{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "A picture or initials in a disc of glass.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json"
  ],
  "files": [
    {
      "path": "src/avatar.tsx",
      "content": "\"use client\";\n\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { GlassPane, type GlassRefraction } from \"./glass\";\nimport { cx, type GlassOptions } from \"./types\";\nimport \"./liquikit.css\";\n\nexport type AvatarProps = GlassOptions & {\n\tsrc?: string;\n\talt?: string;\n\tfallback?: ReactNode;\n\tsize?: number;\n\trefraction?: GlassRefraction;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n};\n\nexport function Avatar({\n\tsrc,\n\talt = \"\",\n\tfallback,\n\tsize = 40,\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tclassName,\n\tstyle,\n}: AvatarProps) {\n\treturn (\n\t\t<BaseAvatar.Root\n\t\t\tclassName={cx(\"glass-ui-avatar\", className)}\n\t\t\tstyle={{ ...style, \"--avatar-size\": `${size}px` } as CSSProperties}\n\t\t\trender={(props) => (\n\t\t\t\t<GlassPane\n\t\t\t\t\t{...props}\n\t\t\t\t\tradius=\"capsule\"\n\t\t\t\t\ttheme={theme}\n\t\t\t\t\tlens={lens}\n\t\t\t\t\tliquid={liquid}\n\t\t\t\t\trefraction={refraction}\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"glass-ui-avatar__disc\">\n\t\t\t\t{src ? (\n\t\t\t\t\t<BaseAvatar.Image\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\tclassName=\"glass-ui-avatar__image\"\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t<BaseAvatar.Fallback className=\"glass-ui-avatar__fallback\">\n\t\t\t\t\t{fallback}\n\t\t\t\t</BaseAvatar.Fallback>\n\t\t\t</span>\n\t\t</BaseAvatar.Root>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/avatar.tsx"
    }
  ],
  "type": "registry:ui"
}