{
  "name": "avatar",
  "type": "registry:ui",
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "reka-ui"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/avatar/Avatar.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { AvatarVariants } from \".\"\nimport { AvatarRoot } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { avatarVariants } from \".\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  size?: AvatarVariants[\"size\"]\n}>()\n</script>\n\n<template>\n  <AvatarRoot\n    data-slot=\"avatar\"\n    :data-size=\"size ?? 'default'\"\n    :class=\"cn(avatarVariants({ size }), props.class)\"\n  >\n    <slot />\n  </AvatarRoot>\n</template>\n"
    },
    {
      "path": "ui/avatar/AvatarBadge.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <span\n    data-slot=\"avatar-badge\"\n    :class=\"cn(\n      'cn-avatar-badge absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 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      props.class,\n    )\"\n  >\n    <slot />\n  </span>\n</template>\n"
    },
    {
      "path": "ui/avatar/AvatarFallback.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { AvatarFallbackProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { AvatarFallback } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <AvatarFallback\n    data-slot=\"avatar-fallback\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('cn-avatar-fallback flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs', props.class)\"\n  >\n    <slot />\n  </AvatarFallback>\n</template>\n"
    },
    {
      "path": "ui/avatar/AvatarGroup.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\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      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/avatar/AvatarGroupCount.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"avatar-group-count\"\n    :class=\"cn(\n      'cn-avatar-group-count relative flex shrink-0 items-center justify-center ring-2 ring-background',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/avatar/AvatarImage.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { AvatarImageProps } from \"reka-ui\"\nimport { AvatarImage } from \"reka-ui\"\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage\n    data-slot=\"avatar-image\"\n    v-bind=\"props\"\n    class=\"cn-avatar-image aspect-square size-full object-cover\"\n  >\n    <slot />\n  </AvatarImage>\n</template>\n"
    },
    {
      "path": "ui/avatar/index.ts",
      "type": "registry:ui",
      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nexport { default as Avatar } from \"./Avatar.vue\"\nexport { default as AvatarBadge } from \"./AvatarBadge.vue\"\nexport { default as AvatarFallback } from \"./AvatarFallback.vue\"\nexport { default as AvatarGroup } from \"./AvatarGroup.vue\"\nexport { default as AvatarGroupCount } from \"./AvatarGroupCount.vue\"\nexport { default as AvatarImage } from \"./AvatarImage.vue\"\n\nexport const avatarVariants = cva(\n  \"cn-avatar group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\",\n  {\n    variants: {\n      size: {\n        sm: \"\",\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariants>\n"
    }
  ]
}