{
  "name": "sortable-handle-demo",
  "type": "registry:example",
  "dependencies": [
    "@dnd-kit/core",
    "@dnd-kit/modifiers",
    "@dnd-kit/sortable",
    "@dnd-kit/utilities"
  ],
  "registryDependencies": [
    "button",
    "sortable",
    "table"
  ],
  "files": [
    {
      "path": "examples/sortable-handle-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { GripVertical } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Sortable,\n  SortableContent,\n  SortableItem,\n  SortableItemHandle,\n  SortableOverlay,\n} from \"@/registry/bases/radix/ui/sortable\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\";\n\nexport default function SortableHandleDemo() {\n  const [tricks, setTricks] = React.useState([\n    { id: \"1\", title: \"The 900\", difficulty: \"Expert\", points: 9000 },\n    { id: \"2\", title: \"Indy Backflip\", difficulty: \"Advanced\", points: 4000 },\n    { id: \"3\", title: \"Pizza Guy\", difficulty: \"Intermediate\", points: 1500 },\n    {\n      id: \"4\",\n      title: \"360 Varial McTwist\",\n      difficulty: \"Expert\",\n      points: 5000,\n    },\n  ]);\n\n  return (\n    <Sortable\n      value={tricks}\n      onValueChange={setTricks}\n      getItemValue={(item) => item.id}\n    >\n      <Table className=\"rounded-none border\">\n        <TableHeader>\n          <TableRow className=\"bg-accent/50\">\n            <TableHead className=\"w-[50px] bg-transparent\" />\n            <TableHead className=\"bg-transparent\">Trick</TableHead>\n            <TableHead className=\"bg-transparent\">Difficulty</TableHead>\n            <TableHead className=\"bg-transparent text-right\">Points</TableHead>\n          </TableRow>\n        </TableHeader>\n        <SortableContent asChild>\n          <TableBody>\n            {tricks.map((trick) => (\n              <SortableItem key={trick.id} value={trick.id} asChild>\n                <TableRow>\n                  <TableCell className=\"w-[50px]\">\n                    <SortableItemHandle asChild>\n                      <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                        <GripVertical className=\"h-4 w-4\" />\n                      </Button>\n                    </SortableItemHandle>\n                  </TableCell>\n                  <TableCell className=\"font-medium\">{trick.title}</TableCell>\n                  <TableCell className=\"text-muted-foreground\">\n                    {trick.difficulty}\n                  </TableCell>\n                  <TableCell className=\"text-right text-muted-foreground\">\n                    {trick.points}\n                  </TableCell>\n                </TableRow>\n              </SortableItem>\n            ))}\n          </TableBody>\n        </SortableContent>\n      </Table>\n      <SortableOverlay>\n        <div className=\"size-full rounded-none bg-primary/10\" />\n      </SortableOverlay>\n    </Sortable>\n  );\n}\n",
      "target": ""
    }
  ]
}