{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "list-box-controlled-example",
  "title": "List Box Controlled",
  "description": "list-box-controlled-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/field",
    "https://intentui.com/r/list-box"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/list-box/list-box-controlled-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport type { Selection } from 'react-aria-components/GridList'\nimport { Description } from '@/components/ui/field'\nimport { ListBox, ListBoxItem } from '@/components/ui/list-box'\n\nexport default function ListBoxControlledDemo() {\n  const [selected, setSelected] = useState<Selection>(new Set([1]))\n  return (\n    <div className=\"min-w-2xs\">\n      <ListBox\n        selectedKeys={selected}\n        onSelectionChange={setSelected}\n        items={fruits}\n        aria-label=\"Fruits\"\n        selectionMode=\"single\"\n      >\n        {(fruit) => (\n          <ListBoxItem id={fruit.id} textValue={fruit.name}>\n            {fruit.name}\n          </ListBoxItem>\n        )}\n      </ListBox>\n\n      {selected && (\n        <Description className=\"mt-4 block [&>strong]:font-medium [&>strong]:text-fg\">\n          Selected: <strong>{selected}</strong>\n        </Description>\n      )}\n    </div>\n  )\n}\n\nconst fruits = [\n  {\n    id: 1,\n    name: 'Apple',\n  },\n  {\n    id: 2,\n    name: 'Banana',\n  },\n  {\n    id: 3,\n    name: 'Orange',\n  },\n  {\n    id: 4,\n    name: 'Strawberry',\n  },\n  {\n    id: 5,\n    name: 'Grapes',\n  },\n  {\n    id: 6,\n    name: 'Mango',\n  },\n  {\n    id: 7,\n    name: 'Pineapple',\n  },\n]\n",
      "type": "registry:page",
      "target": "app/list-box-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}