{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon-ring",
  "title": "Icon Ring",
  "description": "The outlined circle holding a tile's category icon, with an optional alert badge. The visual counterweight to Action Orb.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/icon-ring.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The outlined circle that holds a tile's category icon. Its counterpart is\n * ActionOrb: the ring identifies, the orb acts. Keeping them visually opposed\n * (hairline vs. filled) is what stops a tile from having two focal points.\n */\nconst ring = cva(\n  \"relative inline-flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        /** Hairline circle — the dashboard default. */\n        hairline: \"border border-current/20 text-current\",\n        /** Frosted disc, for rings over photographic or tinted grounds. */\n        glass: \"lq-glass text-white\",\n        /** Filled neutral disc. */\n        muted: \"bg-current/8 text-current\",\n        /** Filled black disc — inverts the pairing when the tile is light. */\n        ink: \"bg-ink text-white\",\n        /** No container at all; just aligns the icon to the grid. */\n        bare: \"text-current\",\n      },\n      size: {\n        sm: \"size-8 [&_svg]:size-3.5\",\n        md: \"size-10 [&_svg]:size-4\",\n        lg: \"size-12 [&_svg]:size-5\",\n        xl: \"size-16 [&_svg]:size-6\",\n      },\n    },\n    defaultVariants: { variant: \"hairline\", size: \"md\" },\n  },\n)\n\nexport interface IconRingProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof ring> {\n  /**\n   * A status mark pinned to the ring's upper-right, as on the Total Dept tile.\n   * `alert` is the vermilion triangle; `dot` is a quieter version.\n   */\n  badge?: \"alert\" | \"dot\" | \"volt\" | null\n  badgeLabel?: string\n}\n\nexport function IconRing({\n  className,\n  variant,\n  size,\n  badge,\n  badgeLabel,\n  children,\n  ...props\n}: IconRingProps) {\n  return (\n    <span\n      data-slot=\"icon-ring\"\n      className={cn(ring({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n      {badge === \"alert\" ? (\n        <span\n          role={badgeLabel ? \"img\" : undefined}\n          aria-label={badgeLabel}\n          aria-hidden={badgeLabel ? undefined : true}\n          className=\"absolute -top-0.5 -right-0.5 text-flare\"\n        >\n          <svg viewBox=\"0 0 24 22\" className=\"size-4 drop-shadow-[0_1px_2px_rgb(0_0_0/0.25)]\">\n            <path\n              d=\"M10.3 2.1a2 2 0 0 1 3.4 0l8.1 14.4a2 2 0 0 1-1.7 3H3.9a2 2 0 0 1-1.7-3z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </span>\n      ) : badge ? (\n        <span\n          aria-label={badgeLabel}\n          aria-hidden={badgeLabel ? undefined : true}\n          className={cn(\n            \"absolute -top-0.5 -right-0.5 size-2.5 rounded-full ring-2 ring-white/70 dark:ring-black/40\",\n            badge === \"volt\" ? \"bg-volt\" : \"bg-flare\",\n          )}\n        />\n      ) : null}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}