gvf3n4ygn-test/__generated/registry-schemes/styles/css/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/css/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=\"sigma-ui-avatar__fallback-icon\" />\n        </slot>\n      </template>\n    </Image>\n  </div>\n</template>\n\n<style>\n.sigma-ui-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: normal;\n  color: hsl(var(--foreground));\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.sigma-ui-avatar__fallback-icon {\n  width: 40%;\n  height: 40%;\n  color: hsl(var(--primary) / 0.5);\n}\n\n.sigma-ui-avatar--sm {\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: 0.75rem;\n}\n\n.sigma-ui-avatar--base {\n  width: 4rem;\n  height: 4rem;\n  font-size: 1.5rem;\n}\n\n.sigma-ui-avatar--lg {\n  width: 8rem;\n  height: 8rem;\n  font-size: 3rem;\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  'sigma-ui-avatar',\n  {\n    variants: {\n      size: {\n        sm: 'sigma-ui-avatar--sm',\n        base: 'sigma-ui-avatar--base',\n        lg: 'sigma-ui-avatar--lg',\n      },\n    },\n  },\n);\n\nexport type AvatarVariants = VariantProps<typeof avatarVariants>;\n"
    }
  ],
  "type": "components:ui"
}