{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon",
  "title": "Icon",
  "description": "Sizes and optically aligns a lucide icon against the M3 type scale.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/icon.tsx",
      "content": "import { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { iconVariants } from \"./icon-variants\"\n\ntype IconProps = Omit<React.ComponentProps<\"span\">, \"children\"> &\n  VariantProps<typeof iconVariants> & {\n    children: React.ReactNode\n    /**\n     * The name announced by assistive technology.\n     *\n     * Omit it — the common case — and the icon is hidden entirely, which is\n     * correct whenever the meaning is already carried by adjacent text. Supply\n     * it only when the icon is the *only* thing conveying something, and then\n     * name the meaning (\"Delete\") rather than the picture (\"Trash can\").\n     */\n    label?: string\n  }\n\n/**\n * Sizes an icon and lets it inherit its colour.\n *\n * Deliberately not interactive: it renders a `span` and takes no press\n * handling. An icon that does something is an icon inside a `Button` or a\n * `Link`, which is where the target size, the focus ring, and the role come\n * from — an icon that grew its own would give you two competing versions of\n * each.\n */\nfunction Icon({ children, className, label, size, ...props }: IconProps) {\n  return (\n    <span\n      data-slot=\"icon\"\n      data-size={size ?? \"md\"}\n      // Decorative by default. The alternative — leaving it exposed with no\n      // name — is the case that actually hurts: a screen reader announces\n      // \"image\" or the raw file name beside a label that already said it.\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      aria-label={label}\n      className={cn(iconVariants({ size }), className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport { Icon, iconVariants }\nexport type { IconProps }\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/icon-variants.ts",
      "content": "/**\n * Variant definitions live beside the component rather than inside it — see\n * badge-variants.ts for why (React Fast Refresh boundaries).\n */\n\nimport { cva } from \"class-variance-authority\"\n\n/**\n * Icon sizes, and the type roles they sit beside.\n *\n * The sizes are the kit's, not a doubling scale: an icon is optically matched\n * to the text next to it, and Material's own pairings are what the components\n * already use (see docs/m3-specs.md).\n *\n *   xs   18dp  chips and dense controls set in label-large\n *   sm   20dp  buttons at label-large and title-medium; the XSmall icon button\n *   md   24dp  the default — icon buttons, list leading icons, app bars,\n *              navigation destinations\n *   lg   32dp  buttons set in headline-large\n *   xl   40dp  extra-large controls\n *\n * Colour is controlled by inheritance rather than by a variant, which is why\n * there is no colour entry below. An icon takes `currentColor` from whatever\n * it sits in, so it is correct inside a filled button, a tonal chip, and an\n * error message without any of them passing it a colour. Reach for a text\n * colour utility on the icon only when it is meant to differ from its label.\n */\nexport const iconVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center [&>svg]:pointer-events-none [&>svg]:size-full\",\n  {\n    variants: {\n      size: {\n        xs: \"size-[18px]\",\n        sm: \"size-5\",\n        md: \"size-6\",\n        lg: \"size-8\",\n        xl: \"size-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "media"
  ],
  "type": "registry:ui"
}