item-select.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-select",
  "type": "registry:example",
  "registryDependencies": [
    "item"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/item-select.tsx",
      "content": "import * as React from \"react\"\nimport { Check, FileText, Folder, Image, Video } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/new-york-v4/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst files = [\n  {\n    id: \"1\",\n    type: \"document\",\n    name: \"Project Proposal.pdf\",\n    size: \"2.4 MB\",\n    icon: FileText,\n  },\n  {\n    id: \"2\",\n    type: \"image\",\n    name: \"Design Mockups.png\",\n    size: \"1.8 MB\",\n    icon: Image,\n  },\n  {\n    id: \"3\",\n    type: \"video\",\n    name: \"Product Demo.mp4\",\n    size: \"25.6 MB\",\n    icon: Video,\n  },\n  {\n    id: \"4\",\n    type: \"folder\",\n    name: \"Marketing Assets\",\n    size: \"15 files\",\n    icon: Folder,\n  },\n]\n\nconst themes = [\n  { id: \"light\", name: \"Light\", description: \"Clean and bright interface\" },\n  { id: \"dark\", name: \"Dark\", description: \"Easy on the eyes\" },\n  { id: \"system\", name: \"System\", description: \"Matches your device preference\" },\n]\n\nexport default function ItemSelect() {\n  const [selectedFiles, setSelectedFiles] = React.useState<string[]>([])\n  const [selectedTheme, setSelectedTheme] = React.useState(\"system\")\n\n  const toggleFileSelection = (fileId: string) => {\n    setSelectedFiles(prev =>\n      prev.includes(fileId)\n        ? prev.filter(id => id !== fileId)\n        : [...prev, fileId]\n    )\n  }\n\n  const selectAllFiles = () => {\n    setSelectedFiles(files.map(file => file.id))\n  }\n\n  const clearSelection = () => {\n    setSelectedFiles([])\n  }\n\n  return (\n    <div className=\"grid gap-6 lg:grid-cols-2\">\n      {/* Multi-Select with Checkboxes */}\n      <div className=\"space-y-4\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-sm font-medium\">Select Files</h3>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\" variant=\"outline\" onClick={selectAllFiles}>\n              Select All\n            </Button>\n            <Button size=\"sm\" variant=\"ghost\" onClick={clearSelection}>\n              Clear\n            </Button>\n          </div>\n        </div>\n\n        <ItemGroup variant=\"outline\">\n          {files.map((file, index) => (\n            <React.Fragment key={file.id}>\n              <Item\n                className={`cursor-pointer transition-colors ${\n                  selectedFiles.includes(file.id)\n                    ? \"bg-muted/50\"\n                    : \"hover:bg-muted/30\"\n                }`}\n                onClick={() => toggleFileSelection(file.id)}\n              >\n                <ItemActions className=\"order-first\">\n                  <Checkbox\n                    checked={selectedFiles.includes(file.id)}\n                    onChange={() => toggleFileSelection(file.id)}\n                  />\n                </ItemActions>\n                <ItemMedia variant=\"icon\">\n                  <file.icon />\n                </ItemMedia>\n                <ItemContent>\n                  <ItemTitle>{file.name}</ItemTitle>\n                  <ItemDescription>{file.size}</ItemDescription>\n                </ItemContent>\n                {selectedFiles.includes(file.id) && (\n                  <ItemActions>\n                    <Check className=\"size-4 text-primary\" />\n                  </ItemActions>\n                )}\n              </Item>\n              {index !== files.length - 1 && <ItemSeparator />}\n            </React.Fragment>\n          ))}\n        </ItemGroup>\n\n        {selectedFiles.length > 0 && (\n          <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            <span>{selectedFiles.length} files selected</span>\n            <Button size=\"sm\" variant=\"outline\">\n              Download Selected\n            </Button>\n          </div>\n        )}\n      </div>\n\n      {/* Single Select with Radio */}\n      <div className=\"space-y-4\">\n        <h3 className=\"text-sm font-medium\">Choose Theme</h3>\n\n        <RadioGroup value={selectedTheme} onValueChange={setSelectedTheme}>\n          <ItemGroup variant=\"outline\">\n            {themes.map((theme, index) => (\n              <React.Fragment key={theme.id}>\n                <Item\n                  className={`cursor-pointer transition-colors ${\n                    selectedTheme === theme.id\n                      ? \"bg-primary/5 border-primary/20\"\n                      : \"hover:bg-muted/30\"\n                  }`}\n                  onClick={() => setSelectedTheme(theme.id)}\n                >\n                  <ItemActions className=\"order-first\">\n                    <RadioGroupItem value={theme.id} />\n                  </ItemActions>\n                  <ItemContent>\n                    <ItemTitle>{theme.name}</ItemTitle>\n                    <ItemDescription>{theme.description}</ItemDescription>\n                  </ItemContent>\n                  {selectedTheme === theme.id && (\n                    <ItemActions>\n                      <Check className=\"size-4 text-primary\" />\n                    </ItemActions>\n                  )}\n                </Item>\n                {index !== themes.length - 1 && <ItemSeparator />}\n              </React.Fragment>\n            ))}\n          </ItemGroup>\n        </RadioGroup>\n\n        <div className=\"flex justify-end\">\n          <Button>Apply Theme</Button>\n        </div>\n      </div>\n    </div>\n  )\n}",
      "type": "registry:example"
    }
  ]
}