{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swatch-group",
  "type": "registry:ui",
  "title": "Swatch group",
  "description": "Single choice among visual options (colours, shapes, avatars) as a grid of square tiles with radio-group semantics and keyboard support.",
  "dependencies": [
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/swatch-group.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps } from \"react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A single choice among visual options: colours, shapes, avatars, themes.\n * Radio-group semantics from Radix (one tab stop, arrow keys move and\n * select, Space selects, `name` submits the value with a form); each item is\n * a square tile that shows its swatch and is named by `aria-label`, since\n * the swatch is a picture. The selected tile carries an accent rim and a\n * small check, so the choice does not rest on colour alone.\n */\n\n/** The tiles in a wrapping grid. Name the group with `aria-label` or `aria-labelledby` (a `FieldLegend`). */\nfunction SwatchGroup({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"swatch-group\"\n      loop\n      className={cn(\"grid grid-cols-[repeat(auto-fill,minmax(3.25rem,1fr))] gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** One tile: put the swatch inside (an `AgentAvatar`, a colour dot) and name it with `aria-label`. */\nfunction SwatchGroupItem({ className, children, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"swatch-group-item\"\n      className={cn(\n        \"press-icon group/swatch relative flex aspect-square min-w-0 cursor-pointer items-center justify-center rounded-lg border border-border bg-card outline-none\",\n        \"transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:bg-foreground/4 hover:border-foreground/20\",\n        \"data-[state=checked]:border-accent data-[state=checked]:bg-accent/6 data-[state=checked]:ring-1 data-[state=checked]:ring-accent\",\n        \"focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"swatch-group-indicator\"\n        className=\"absolute top-1 right-1 flex size-3.5 animate-check-in items-center justify-center rounded-full bg-accent text-accent-foreground\"\n      >\n        <Check aria-hidden=\"true\" className=\"size-2.5\" strokeWidth={3.5} />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { SwatchGroup, SwatchGroupItem };\n"
    }
  ]
}