{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-gradient-icon",
  "type": "registry:ui",
  "title": "Border Gradient Icon",
  "description": "A Border Gradient Icon component for displaying an icon with a border gradient.",
  "files": [
    {
      "path": "src/registry/ui/border-gradient-icon.tsx",
      "type": "registry:ui",
      "content": "import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { cn } from \"@/lib/utils\";\n\nconst sizes = {\n  sm: { tile: \"size-16 rounded-lg\", icon: \"[&_svg]:size-5\", label: \"text-xs\" },\n  md: { tile: \"size-24 rounded-xl\", icon: \"[&_svg]:size-7\", label: \"text-xs\" },\n  lg: { tile: \"size-32 rounded-xl\", icon: \"[&_svg]:size-9\", label: \"text-sm\" },\n} as const;\n\nexport type BorderGradientIconProps = React.ComponentProps<\"div\"> & {\n  icon: React.ReactNode;\n  label: React.ReactNode;\n  size?: keyof typeof sizes;\n  /** Render as the child element (e.g. an `<a>` or `<button>`) instead of a `<div>`. */\n  asChild?: boolean;\n};\n\n/**\n * An icon tile with a subtle 1px gradient border.\n * Use `asChild` with an empty `<a>` or `<button>` child to make it interactive;\n * the icon and label are rendered inside that element.\n */\nexport function BorderGradientIcon({\n  icon,\n  label,\n  size = \"md\",\n  asChild = false,\n  className,\n  children,\n  ...props\n}: BorderGradientIconProps) {\n  const Comp = asChild ? Slot : \"div\";\n  const s = sizes[size];\n\n  const content = (\n    <>\n      <span aria-hidden className={cn(\"text-foreground\", s.icon)}>\n        {icon}\n      </span>\n      <span\n        className={cn(\n          \"font-medium text-muted-foreground transition-colors group-hover/tile:text-foreground\",\n          s.label\n        )}\n      >\n        {label}\n      </span>\n    </>\n  );\n\n  return (\n    <Comp\n      data-slot=\"border-gradient-icon\"\n      className={cn(\n        \"flex flex-col items-center justify-center gap-2 border border-transparent text-center outline-none transition-colors\",\n        // 1px gradient border: solid card fill on the padding box, gradient on the border box.\n        \"[background:linear-gradient(var(--card),var(--card))_padding-box,linear-gradient(to_bottom,var(--border),color-mix(in_oklab,var(--primary)_40%,transparent))_border-box]\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"group/tile [a&]:cursor-pointer [button&]:cursor-pointer\",\n        s.tile,\n        className\n      )}\n      {...props}\n    >\n      {content}\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n}\n\nexport { BorderGradientIcon as IconTile };\nexport type IconTileProps = BorderGradientIconProps;\n"
    }
  ],
  "dependencies": [
    "@radix-ui/react-slot"
  ]
}