{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-icon",
  "type": "registry:ui",
  "title": "Feature icon",
  "description": "A tinted box that holds an icon. You pass an icon component, and it is hidden from screen readers.",
  "categories": [
    "atom"
  ],
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/feature-icon.tsx",
      "type": "registry:ui",
      "target": "components/ui/feature-icon.tsx",
      "content": "/**\n * FeatureIcon — the tinted container an icon sits in on feature cards.\n *\n * Takes an icon *component* rather than a rendered node so it can apply sizing\n * and `aria-hidden` itself. That removes the most common a11y slip in marketing\n * UI: a decorative icon that is announced because the author forgot to hide it.\n *\n * a11y: the icon is always `aria-hidden` — its meaning is carried by the heading\n * beside it. If an icon is the *only* content conveying something, it does not\n * belong here; use a labelled element instead.\n *\n * Dependencies: class-variance-authority, react, @/lib/types, @/lib/utils.\n */\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport type { ElementType } from \"react\"\n\nimport type { IconComponent } from \"@/lib/types\"\nimport { cn } from \"@/lib/utils\"\n\nexport const featureIconVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center\",\n  {\n    variants: {\n      variant: {\n        soft: \"bg-accent text-accent-foreground\",\n        solid: \"bg-primary text-primary-foreground\",\n        outline: \"border-border bg-background text-foreground border\",\n        plain: \"text-primary\",\n      },\n      size: {\n        sm: \"size-9 [&_svg]:size-4\",\n        md: \"size-11 [&_svg]:size-5\",\n        lg: \"size-14 [&_svg]:size-6\",\n      },\n      shape: {\n        rounded: \"rounded-lg\",\n        circle: \"rounded-full\",\n        square: \"rounded-none\",\n      },\n    },\n    compoundVariants: [{ variant: \"plain\", class: \"size-auto bg-transparent\" }],\n    defaultVariants: { variant: \"soft\", size: \"md\", shape: \"rounded\" },\n  },\n)\n\nexport interface FeatureIconProps extends VariantProps<typeof featureIconVariants> {\n  icon: IconComponent\n  className?: string\n}\n\nexport function FeatureIcon({ icon, variant, size, shape, className }: FeatureIconProps) {\n  const Icon = icon as ElementType\n\n  return (\n    <span className={cn(featureIconVariants({ variant, size, shape }), className)}>\n      <Icon aria-hidden focusable=\"false\" />\n    </span>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/feature-icon"
}