gvf3n4ygn-test/__generated/registry-schemes/styles/tailwind/avatar.json

CLI for SIGMA-UI components.

{
  "name": "avatar",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Avatar.vue",
      "content": "<script setup lang=\"ts\">\nimport { UserIcon } from 'lucide-vue-next';\nimport { avatarVariants } from '.';\nimport { Image, type ImageVariants } from '@ui/registry/tailwind/ui/image';\n\nconst props = withDefaults(defineProps<{\n  src?: string;\n  alt?: string;\n  glow?: boolean;\n\n  size?: 'sm' | 'base' | 'lg';\n  shape?: ImageVariants['shape'];\n}>(), {\n  size: 'base',\n  shape: 'circle',\n});\n</script>\n\n<template>\n  <div :class=\"[avatarVariants({ size }), $attrs.class]\">\n    <Image\n      v-bind=\"props\"\n    >\n      <template #fallback>\n        <slot name=\"fallback\">\n          <UserIcon class=\"w-[40%] h-[40%] text-primary/50\" />\n        </slot>\n      </template>\n    </Image>\n  </div>\n</template>\n\n<style>\n.sigma-ui-image-sm {\n  width: 56px;\n  height: 56px;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Avatar } from './Avatar.vue';\n\nexport const avatarVariants = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n    },\n  },\n);\n\nexport type AvatarVariants = VariantProps<typeof avatarVariants>;\n"
    }
  ],
  "type": "components:ui"
}