{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-32",
  "type": "registry:component",
  "title": "Select 32",
  "description": "Select 32. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "button",
    "label",
    "popover"
  ],
  "files": [
    {
      "path": "components/watermelon/select-32.tsx",
      "type": "registry:component",
      "content": "import { useState } from 'react';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\n\nimport { Button } from '@/components/base-ui/button';\nimport { Label } from '@/components/base-ui/label';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/base-ui/popover';\nimport { cn } from '@/lib/utils';\n\nconst ops = [\n  { id: 'monitoring', label: 'Real-time Monitoring' },\n  { id: 'logging', label: 'Log Aggregation' },\n  { id: 'analytics', label: 'Security Analytics' },\n  { id: 'backups', label: 'Automated Backups' },\n];\n\nconst Select32 = () => {\n  const [selected, setSelected] = useState<string[]>(['monitoring']);\n\n  const toggleOp = (id: string) => {\n    setSelected((prev) =>\n      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]\n    );\n  };\n\n  const getLabel = () => {\n    if (selected.length === 0) return 'Select operations';\n    if (selected.length === 1) return ops.find(o => o.id === selected[0])?.label;\n    return `${selected.length} operations active`;\n  };\n\n  return (\n    <div className=\"w-full max-w-xs space-y-2 text-zinc-900 dark:text-zinc-100\">\n      <Label className=\"text-zinc-600 dark:text-zinc-400\">Active Pipeline Services</Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            className=\"w-full justify-between rounded-xl border-zinc-200 bg-white px-3 font-normal shadow-xs transition-all hover:bg-zinc-50 focus:ring-2 focus:ring-zinc-400/20 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900 dark:focus:ring-zinc-500/20 outline-none\"\n          >\n            <span className={cn(\"truncate\", selected.length === 0 && \"text-zinc-500\")}>\n              {getLabel()}\n            </span>\n            <IconChevronDown className=\"size-4 shrink-0 opacity-50\" stroke={1.5} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent \n          align=\"start\"\n          className=\"w-(--radix-popover-trigger-width) p-1 rounded-xl border-zinc-200 bg-white shadow-lg dark:border-zinc-800 dark:bg-zinc-950\"\n        >\n          <div className=\"flex flex-col gap-0.5\">\n            {ops.map((op) => {\n              const isSelected = selected.includes(op.id);\n              return (\n                <button\n                  key={op.id}\n                  onClick={() => toggleOp(op.id)}\n                  className={cn(\n                    \"flex items-center justify-between w-full px-2.5 py-2 rounded-lg text-sm transition-colors outline-none\",\n                    \"hover:bg-zinc-100 dark:hover:bg-zinc-900\",\n                    isSelected ? \"text-zinc-900 dark:text-zinc-100\" : \"text-zinc-600 dark:text-zinc-400\"\n                  )}\n                >\n                  <span className=\"font-medium\">{op.label}</span>\n                  {isSelected && (\n                    <IconCheck className=\"size-4 text-zinc-900 dark:text-zinc-100\" stroke={2} />\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n\nexport default Select32;\n"
    }
  ]
}