{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "combo-box-multi-select-example",
  "title": "Combo Box Multi Select",
  "description": "combo-box-multi-select-example",
  "registryDependencies": [
    "https://intentui.com/r/combo-box",
    "https://intentui.com/r/field",
    "https://intentui.com/r/tag-group",
    "https://intentui.com/r/text"
  ],
  "files": [
    {
      "path": "src/components/examples/pickers/combo-box/combo-box-multi-select-example.tsx",
      "content": "'use client'\n\nimport {\n  ComboBox,\n  ComboBoxContent,\n  ComboBoxInput,\n  ComboBoxItem,\n  ComboBoxValue,\n} from '@/components/ui/combo-box'\nimport { Label } from '@/components/ui/field'\nimport { Tag, TagGroup, TagList } from '@/components/ui/tag-group'\nimport { Text } from '@/components/ui/text'\n\nconst roles = [\n  { id: 1, name: 'Owner' },\n  { id: 2, name: 'Admin' },\n  { id: 3, name: 'Moderator' },\n  { id: 4, name: 'Member' },\n  { id: 5, name: 'Guest' },\n  { id: 6, name: 'Support' },\n  { id: 7, name: 'Billing' },\n  { id: 8, name: 'Sales' },\n  { id: 9, name: 'Marketing' },\n  { id: 10, name: 'Content' },\n  { id: 11, name: 'Designer' },\n  { id: 12, name: 'Product manager' },\n  { id: 13, name: 'Project manager' },\n  { id: 14, name: 'Developer' },\n  { id: 15, name: 'QA' },\n  { id: 16, name: 'DevOps' },\n  { id: 17, name: 'Data analyst' },\n  { id: 18, name: 'Finance' },\n  { id: 19, name: 'Legal' },\n  { id: 20, name: 'HR' },\n]\nexport default function ComboBoxMultiSelectDemo() {\n  return (\n    <ComboBox\n      className=\"sm:min-w-max sm:max-w-xs\"\n      name=\"role\"\n      aria-label=\"Roles\"\n      selectionMode=\"multiple\"\n    >\n      <Label>Role</Label>\n      <ComboBoxInput placeholder=\"Select a role\" />\n      <ComboBoxValue<(typeof roles)[0]>>\n        {({ selectedItems, state }) => (\n          <TagGroup\n            aria-label=\"Selected states\"\n            onRemove={(keys) => {\n              if (Array.isArray(state.value)) {\n                state.setValue(state.value.filter((k) => !keys.has(k)))\n              }\n            }}\n          >\n            <TagList\n              renderEmptyState={() => <Text>No selected items</Text>}\n              items={selectedItems.filter((item) => item != null)}\n            >\n              {(item) => <Tag>{item.name}</Tag>}\n            </TagList>\n          </TagGroup>\n        )}\n      </ComboBoxValue>\n      <ComboBoxContent items={roles}>\n        {(item) => (\n          <ComboBoxItem id={item.id} textValue={item.name}>\n            {item.name}\n          </ComboBoxItem>\n        )}\n      </ComboBoxContent>\n    </ComboBox>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/combo-box-multi-select-example/page.tsx"
    }
  ],
  "type": "registry:page"
}