{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-36",
  "type": "registry:component",
  "title": "Select 36",
  "description": "Select 36. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [
    "@tabler/icons-react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/select-36.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { \n  Header, \n  ListBox, \n  ListBoxItem, \n  ListBoxSection, \n  Separator \n} from 'react-aria-components';\nimport { IconCheck } from '@tabler/icons-react';\nimport type { Selection } from 'react-aria-components';\n\nimport { Label } from '@/components/base-ui/label';\nimport { cn } from '@/lib/utils';\n\nconst Select36 = () => {\n  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['read', 'billing']));\n\n  return (\n    <div className=\"w-full max-w-xs space-y-2\">\n      <Label className=\"text-zinc-600 dark:text-zinc-400 font-medium tracking-tight\">\n        Policy Governance Scopes\n      </Label>\n      <div className=\"overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs dark:border-zinc-800 dark:bg-zinc-950 transition-all\">\n        <ListBox\n          className=\"max-h-72 flex flex-col gap-2 overflow-auto p-1 text-sm outline-none\"\n          aria-label=\"Select security scopes\"\n          selectionMode=\"multiple\"\n          selectionBehavior=\"toggle\"\n          selectedKeys={selectedKeys}\n          onSelectionChange={setSelectedKeys}\n        >\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2.5 py-1.5 text-[11px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500\">\n              Operational Scopes\n            </Header>\n            {[\n              { id: 'read', label: 'ReadOnly Access' },\n              { id: 'write', label: 'Write & Execute' },\n              { id: 'delete', label: 'Destructive Ops' },\n            ].map((item) => (\n              <ListBoxItem\n                key={item.id}\n                id={item.id}\n                className={({ isSelected, isHovered, isFocusVisible }) => cn(\n                  \"flex items-center justify-between rounded-lg px-2.5 py-2 text-sm outline-none cursor-default select-none transition-colors\",\n                  isHovered && \"bg-zinc-100/50 dark:bg-zinc-900/50\",\n                  isSelected && \"bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100\",\n                  isFocusVisible && \"ring-2 ring-zinc-400 dark:ring-zinc-500 ring-offset-2 dark:ring-offset-zinc-950\",\n                  !isSelected && \"text-zinc-600 dark:text-zinc-400\"\n                )}\n              >\n                {({ isSelected }) => (\n                  <>\n                    <span className=\"font-medium\">{item.label}</span>\n                    {isSelected && (\n                      <IconCheck className=\"size-4 text-zinc-900 dark:text-zinc-100\" stroke={2} />\n                    )}\n                  </>\n                )}\n              </ListBoxItem>\n            ))}\n          </ListBoxSection>\n\n          <Separator className=\"mx-1 my-1.5 border-t border-zinc-100 dark:border-zinc-800\" />\n\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2.5 py-1.5 text-[11px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500\">\n              Administrative Scopes\n            </Header>\n            {[\n              { id: 'users', label: 'User Governance' },\n              { id: 'billing', label: 'Billing & Quotas' },\n              { id: 'audit', label: 'Security Audits' },\n            ].map((item) => (\n              <ListBoxItem\n                key={item.id}\n                id={item.id}\n                className={({ isSelected, isHovered, isFocusVisible }) => cn(\n                  \"flex items-center justify-between rounded-lg px-2.5 py-2 text-sm outline-none cursor-default select-none transition-colors\",\n                  isHovered && \"bg-zinc-100/50 dark:bg-zinc-900/50\",\n                  isSelected && \"bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100\",\n                  isFocusVisible && \"ring-2 ring-zinc-400 dark:ring-zinc-500 ring-offset-2 dark:ring-offset-zinc-950\",\n                  !isSelected && \"text-zinc-600 dark:text-zinc-400\"\n                )}\n              >\n                {({ isSelected }) => (\n                  <>\n                    <span className=\"font-medium\">{item.label}</span>\n                    {isSelected && (\n                      <IconCheck className=\"size-4 text-zinc-900 dark:text-zinc-100\" stroke={2} />\n                    )}\n                  </>\n                )}\n              </ListBoxItem>\n            ))}\n          </ListBoxSection>\n        </ListBox>\n      </div>\n      <p className=\"text-[11px] text-zinc-500 px-1 dark:text-zinc-500\">\n        Click to toggle multiple policy scopes.\n      </p>\n    </div>\n  );\n};\n\nexport default Select36;\n"
    }
  ]
}