{
  "name": "avatar",
  "title": "Avatar",
  "description": "Kura Avatar component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();\n</script>\n\n<span\n  bind:this={ref}\n  data-slot=\"avatar-badge\"\n  class={cn(\n    'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',\n    'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n    'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n    'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</span>\n",
      "path": "avatar/avatar-badge.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Avatar as AvatarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: AvatarPrimitive.FallbackProps = $props();\n</script>\n\n<AvatarPrimitive.Fallback\n  bind:ref\n  data-slot=\"avatar-fallback\"\n  class={cn(\n    'flex size-full items-center justify-center rounded-full bg-muted  text-sm font-medium text-muted-foreground  group-data-[size=sm]/avatar:text-xs',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "avatar/avatar-fallback.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"avatar-group-count\"\n  class={cn(\n    'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted  text-sm font-medium text-muted-foreground 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',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "avatar/avatar-group-count.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"avatar-group\"\n  class={cn(\n    'cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "avatar/avatar-group.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Avatar as AvatarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: AvatarPrimitive.ImageProps = $props();\n</script>\n\n<AvatarPrimitive.Image\n  bind:ref\n  data-slot=\"avatar-image\"\n  class={cn('aspect-square size-full rounded-full object-cover saturate-90', className)}\n  {...restProps}\n/>\n",
      "path": "avatar/avatar-image.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Avatar as AvatarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    loadingStatus = $bindable('loading'),\n    size = 'default',\n    class: className,\n    ...restProps\n  }: AvatarPrimitive.RootProps & {\n    size?: 'default' | 'sm' | 'lg';\n  } = $props();\n</script>\n\n<AvatarPrimitive.Root\n  bind:ref\n  bind:loadingStatus\n  data-slot=\"avatar\"\n  data-size={size}\n  class={cn(\n    'size-8 rounded-full bg-background text-foreground after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-lighten',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "avatar/avatar.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './avatar.svelte';\nimport Image from './avatar-image.svelte';\nimport Fallback from './avatar-fallback.svelte';\nimport Badge from './avatar-badge.svelte';\nimport Group from './avatar-group.svelte';\nimport GroupCount from './avatar-group-count.svelte';\n\nexport {\n  Root,\n  Image,\n  Fallback,\n  Badge,\n  Group,\n  GroupCount,\n  //\n  Root as Avatar,\n  Image as AvatarImage,\n  Fallback as AvatarFallback,\n  Badge as AvatarBadge,\n  Group as AvatarGroup,\n  GroupCount as AvatarGroupCount\n};\n",
      "path": "avatar/index.ts",
      "_imports_": [
        {
          "import": "./avatar.svelte",
          "item": "avatar",
          "file": {
            "type": "ui",
            "path": "avatar/avatar.svelte"
          },
          "meta": {}
        },
        {
          "import": "./avatar-image.svelte",
          "item": "avatar",
          "file": {
            "type": "ui",
            "path": "avatar/avatar-image.svelte"
          },
          "meta": {}
        },
        {
          "import": "./avatar-fallback.svelte",
          "item": "avatar",
          "file": {
            "type": "ui",
            "path": "avatar/avatar-fallback.svelte"
          },
          "meta": {}
        },
        {
          "import": "./avatar-badge.svelte",
          "item": "avatar",
          "file": {
            "type": "ui",
            "path": "avatar/avatar-badge.svelte"
          },
          "meta": {}
        },
        {
          "import": "./avatar-group.svelte",
          "item": "avatar",
          "file": {
            "type": "ui",
            "path": "avatar/avatar-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "./avatar-group-count.svelte",
          "item": "avatar",
          "file": {
            "type": "ui",
            "path": "avatar/avatar-group-count.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    }
  ],
  "devDependencies": []
}