Avatar

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn, type WithElementRef } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
</script>

<span
  bind:this={ref}
  data-slot="avatar-badge"
  class={cn(
    'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-[#b9d765] text-[#101207] ring-2 ring-background select-none',
    'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
    'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
    'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
    className
  )}
  {...restProps}
>
  {@render children?.()}
</span>

<script lang="ts">
  import { Avatar as AvatarPrimitive } from 'bits-ui';
  import { cn } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    ...restProps
  }: AvatarPrimitive.FallbackProps = $props();
</script>

<AvatarPrimitive.Fallback
  bind:ref
  data-slot="avatar-fallback"
  class={cn(
    'flex size-full items-center justify-center rounded-full bg-zinc-950 font-mono text-sm font-semibold text-zinc-300 uppercase group-data-[size=sm]/avatar:text-xs',
    className
  )}
  {...restProps}
/>

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn, type WithElementRef } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="avatar-group-count"
  class={cn(
    'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-950 font-mono text-sm font-semibold text-zinc-300 ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn, type WithElementRef } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="avatar-group"
  class={cn(
    'cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

<script lang="ts">
  import { Avatar as AvatarPrimitive } from 'bits-ui';
  import { cn } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    ...restProps
  }: AvatarPrimitive.ImageProps = $props();
</script>

<AvatarPrimitive.Image
  bind:ref
  data-slot="avatar-image"
  class={cn('aspect-square size-full rounded-full object-cover saturate-90', className)}
  {...restProps}
/>

<script lang="ts">
  import { Avatar as AvatarPrimitive } from 'bits-ui';
  import { cn } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    loadingStatus = $bindable('loading'),
    size = 'default',
    class: className,
    ...restProps
  }: AvatarPrimitive.RootProps & {
    size?: 'default' | 'sm' | 'lg';
  } = $props();
</script>

<AvatarPrimitive.Root
  bind:ref
  bind:loadingStatus
  data-slot="avatar"
  data-size={size}
  class={cn(
    'size-8 rounded-full bg-background text-zinc-100 after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-zinc-800 group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-lighten',
    className
  )}
  {...restProps}
/>

import Root from './avatar.svelte';
import Image from './avatar-image.svelte';
import Fallback from './avatar-fallback.svelte';
import Badge from './avatar-badge.svelte';
import Group from './avatar-group.svelte';
import GroupCount from './avatar-group-count.svelte';

export {
  Root,
  Image,
  Fallback,
  Badge,
  Group,
  GroupCount,
  //
  Root as Avatar,
  Image as AvatarImage,
  Fallback as AvatarFallback,
  Badge as AvatarBadge,
  Group as AvatarGroup,
  GroupCount as AvatarGroupCount
};