feat: update kanban

Author: sadmann7

docs/public/r/styles/default/sortable-demo.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/sortable-demo.tsx",
-      "content": "\"use client\";\n\nimport * as Sortable from \"@/registry/default/ui/sortable\";\nimport * as React from \"react\";\n\ninterface Trick {\n  id: string;\n  title: string;\n  points: number;\n}\n\nexport default function SortableDemo() {\n  const [tricks, setTricks] = React.useState<Trick[]>([\n    { id: \"1\", title: \"The 900\", points: 9000 },\n    { id: \"2\", title: \"Indy Backflip\", points: 4000 },\n    { id: \"3\", title: \"Pizza Guy\", points: 1500 },\n    { id: \"4\", title: \"Rocket Air\", points: 5000 },\n    { id: \"5\", title: \"Kickflip Backflip\", points: 3000 },\n    { id: \"6\", title: \"FS 540\", points: 4500 },\n  ]);\n\n  return (\n    <Sortable.Root\n      value={tricks}\n      onValueChange={setTricks}\n      getItemValue={(item) => item.id}\n      orientation=\"mixed\"\n    >\n      <Sortable.Content className=\"grid grid-cols-3 gap-2.5\">\n        {tricks.map((trick) => (\n          <TrickCard key={trick.id} trick={trick} asHandle />\n        ))}\n      </Sortable.Content>\n      <Sortable.Overlay>\n        {(activeItem) => {\n          const trick = tricks.find((trick) => trick.id === activeItem.value);\n          if (!trick) return null;\n\n          return <TrickCard trick={trick} />;\n        }}\n      </Sortable.Overlay>\n    </Sortable.Root>\n  );\n}\n\ninterface TrickCardProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Sortable.Item>, \"value\"> {\n  trick: Trick;\n}\n\nfunction TrickCard({ trick, ...props }: TrickCardProps) {\n  return (\n    <Sortable.Item key={trick.id} value={trick.id} asChild {...props}>\n      <div className=\"flex size-full flex-col items-center justify-center rounded-md border bg-zinc-100 p-6 text-center text-foreground shadow dark:bg-zinc-900\">\n        <div className=\"font-medium text-sm leading-tight sm:text-base\">\n          {trick.title}\n        </div>\n        <div className=\"hidden text-muted-foreground text-sm sm:block\">\n          {trick.points} points\n        </div>\n      </div>\n    </Sortable.Item>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport * as Sortable from \"@/registry/default/ui/sortable\";\nimport * as React from \"react\";\n\ninterface Trick {\n  id: string;\n  title: string;\n  points: number;\n}\n\nexport default function SortableDemo() {\n  const [tricks, setTricks] = React.useState<Trick[]>([\n    { id: \"1\", title: \"The 900\", points: 9000 },\n    { id: \"2\", title: \"Indy Backflip\", points: 4000 },\n    { id: \"3\", title: \"Pizza Guy\", points: 1500 },\n    { id: \"4\", title: \"Rocket Air\", points: 5000 },\n    { id: \"5\", title: \"Kickflip Backflip\", points: 3000 },\n    { id: \"6\", title: \"FS 540\", points: 4500 },\n  ]);\n\n  return (\n    <Sortable.Root\n      value={tricks}\n      onValueChange={setTricks}\n      getItemValue={(item) => item.id}\n      orientation=\"mixed\"\n    >\n      <Sortable.Content className=\"grid grid-cols-3 gap-2.5\">\n        {tricks.map((trick) => (\n          <TrickCard key={trick.id} trick={trick} asHandle />\n        ))}\n      </Sortable.Content>\n      <Sortable.Overlay>\n        {(activeItem) => {\n          const trick = tricks.find((trick) => trick.id === activeItem.value);\n\n          if (!trick) return null;\n\n          return <TrickCard trick={trick} />;\n        }}\n      </Sortable.Overlay>\n    </Sortable.Root>\n  );\n}\n\ninterface TrickCardProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Sortable.Item>, \"value\"> {\n  trick: Trick;\n}\n\nfunction TrickCard({ trick, ...props }: TrickCardProps) {\n  return (\n    <Sortable.Item key={trick.id} value={trick.id} asChild {...props}>\n      <div className=\"flex size-full flex-col items-center justify-center rounded-md border bg-zinc-100 p-6 text-center text-foreground shadow dark:bg-zinc-900\">\n        <div className=\"font-medium text-sm leading-tight sm:text-base\">\n          {trick.title}\n        </div>\n        <div className=\"hidden text-muted-foreground text-sm sm:block\">\n          {trick.points} points\n        </div>\n      </div>\n    </Sortable.Item>\n  );\n}\n",
       "type": "registry:example",
       "target": ""
     }

docs/public/r/styles/default/sortable-handle-demo.json

@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "example/sortable-handle-demo.tsx",
-      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport {\n  Sortable,\n  SortableContent,\n  SortableItem,\n  SortableItemHandle,\n  SortableOverlay,\n} from \"@/registry/default/ui/sortable\";\nimport { GripVertical } from \"lucide-react\";\nimport * as React from \"react\";\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 asHandle>\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        <Skeleton className=\"size-full rounded-none\" />\n      </SortableOverlay>\n    </Sortable>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport {\n  Sortable,\n  SortableContent,\n  SortableItem,\n  SortableItemHandle,\n  SortableOverlay,\n} from \"@/registry/default/ui/sortable\";\nimport { GripVertical } from \"lucide-react\";\nimport * as React from \"react\";\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        <Skeleton className=\"size-full rounded-none\" />\n      </SortableOverlay>\n    </Sortable>\n  );\n}\n",
       "type": "registry:example",
       "target": ""
     }