{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "Profile image with initials fallback and composable overlapping groups.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/avatar-knobs.ts",
      "target": "@components/control-ui/knob-contracts/avatar-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/avatar.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const avatarKnobs = [\n  \"--cui-avatar-radius\",\n  \"--cui-avatar-group-ring-color\",\n  \"--cui-avatar-fallback-background\",\n  \"--cui-avatar-fallback-foreground\",\n] as const;\nexport type AvatarKnobStyle = Partial<Record<(typeof avatarKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/avatar.css",
      "target": "@components/control-ui/styles/recipes/avatar.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"avatar\"][data-slot=\"root\"]),\n  :where([data-control-family=\"avatar\"][data-slot=\"favicon\"]),\n  :where([data-control-family=\"avatar\"][data-slot=\"source-favicon\"]) {\n    --cui-avatar-radius: 9999px;\n    --cui-avatar-group-ring-color: var(--background);\n    --cui-avatar-fallback-background: var(--muted);\n    --cui-avatar-fallback-foreground: var(--muted-foreground);\n    border-radius: var(--cui-avatar-radius);\n  }\n\n  :where([data-control-family=\"avatar\"][data-slot=\"group\"] > [data-control-family=\"avatar\"]) {\n    box-shadow: 0 0 0 2px var(--cui-avatar-group-ring-color);\n  }\n\n  :where([data-control-family=\"avatar\"][data-slot=\"fallback\"]) {\n    border-radius: 9999px;\n    background: var(--cui-avatar-fallback-background);\n    color: var(--cui-avatar-fallback-foreground);\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n  }\n}\n\n@property --cui-avatar-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-avatar-group-ring-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-avatar-fallback-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-avatar-fallback-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/avatar.tsx",
      "target": "@components/control-ui/ui/avatar.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport type { AvatarKnobStyle } from \"@/components/control-ui/knob-contracts/avatar-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type AvatarProps = Omit<ComponentProps<\"span\">, \"style\"> & { style?: CSSProperties & AvatarKnobStyle };\n\nexport type AvatarGroupProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & AvatarKnobStyle };\n\nexport type AvatarImageProps = ComponentProps<\"img\"> & {\n  onLoadingStatusChange?: (status: \"idle\" | \"loading\" | \"loaded\" | \"error\") => void;\n} & { style?: CSSProperties & AvatarKnobStyle };\n\nexport type AvatarFallbackProps = Omit<ComponentProps<\"span\">, \"style\"> & {\n  delay?: number;\n  style?: CSSProperties & AvatarKnobStyle;\n};\n\nexport function Avatar({ className, ...props }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-control-ui=\"avatar\"\n      data-control-family=\"avatar\"\n      data-slot=\"root\"\n      className={cn(\"relative inline-flex size-9 shrink-0 select-none items-center justify-center overflow-hidden align-middle\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AvatarGroup({ className, ...props }: AvatarGroupProps) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: Profile imagery is not a form fieldset.\n    <div\n      role=\"group\"\n      data-control-ui=\"avatar\"\n      data-control-family=\"avatar\"\n      data-slot=\"group\"\n      className={cn(\"isolate inline-flex items-center -space-x-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <AvatarPrimitive.Image\n      data-control-ui=\"avatar\"\n      data-control-family=\"avatar\"\n      data-slot=\"image\"\n      className={cn(\"size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-control-ui=\"avatar\"\n      data-control-family=\"avatar\"\n      data-slot=\"fallback\"\n      className={cn(\"flex size-full items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/avatar.css\"": {}
  },
  "meta": {}
}