{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-27",
  "title": "With popover swatch",
  "description": "Color swatch button that opens a grid of color swatches, paired with a hex value label in a merged-border row.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "button-group",
    "popover"
  ],
  "files": [
    {
      "path": "registry/patterns/button/button-27.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { ButtonGroup, ButtonGroupText } from '@/components/ui/button-group'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\n\nconst swatches = [\n  { hex: '#EF4444', className: 'bg-red-500' },\n  { hex: '#F97316', className: 'bg-orange-500' },\n  { hex: '#F59E0B', className: 'bg-amber-500' },\n  { hex: '#10B981', className: 'bg-emerald-500' },\n  { hex: '#0EA5E9', className: 'bg-sky-500' },\n  { hex: '#3B82F6', className: 'bg-blue-500' },\n  { hex: '#8B5CF6', className: 'bg-violet-500' },\n  { hex: '#EC4899', className: 'bg-pink-500' },\n  { hex: '#F43F5E', className: 'bg-rose-500' },\n  { hex: '#78716C', className: 'bg-stone-500' },\n  { hex: '#71717A', className: 'bg-zinc-500' },\n  { hex: '#404040', className: 'bg-neutral-700' },\n]\n\nexport function Button27() {\n  return (\n    <ButtonGroup>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Pick color\">\n              <span className=\"size-4 rounded-sm bg-blue-500\" />\n            </Button>\n          }\n        />\n        <PopoverContent align=\"start\" className=\"w-auto p-2\">\n          <div className=\"grid grid-cols-6 gap-1\">\n            {swatches.map((s) => (\n              <button\n                key={s.hex}\n                type=\"button\"\n                aria-label={s.hex}\n                className={cn(\n                  'size-6 rounded-md',\n                  s.className,\n                  'hover:ring-ring focus-visible:ring-ring outline-none hover:ring-2 focus-visible:ring-2',\n                )}\n              />\n            ))}\n          </div>\n        </PopoverContent>\n      </Popover>\n      <ButtonGroupText className=\"font-mono\">#3B82F6</ButtonGroupText>\n    </ButtonGroup>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/button/button-27.tsx"
    }
  ],
  "type": "registry:block"
}