{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "avatar",
	"title": "Avatar",
	"type": "registry:ui",
	"description": "Kura Avatar component source.",
	"devDependencies": [
		"bits-ui@^2.18.1",
		"@internationalized/date@^3.12.2"
	],
	"registryDependencies": [
		"utils"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$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-[#b9d765] text-[#101207] 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",
			"type": "registry:file",
			"target": "avatar/avatar-badge.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Avatar as AvatarPrimitive } from 'bits-ui';\n  import { cn } from '$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-zinc-950 font-mono text-sm font-semibold text-zinc-300 uppercase group-data-[size=sm]/avatar:text-xs',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "avatar/avatar-fallback.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$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-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',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "avatar/avatar-group-count.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$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",
			"type": "registry:file",
			"target": "avatar/avatar-group.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Avatar as AvatarPrimitive } from 'bits-ui';\n  import { cn } from '$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",
			"type": "registry:file",
			"target": "avatar/avatar-image.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Avatar as AvatarPrimitive } from 'bits-ui';\n  import { cn } from '$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-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',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "avatar/avatar.svelte"
		},
		{
			"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",
			"type": "registry:file",
			"target": "avatar/index.ts"
		}
	]
}