@epilot/volt-ui-mcp 0.1.3 → 0.1.4

package/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-03-09T12:59:07.619Z",
+  "generatedAt": "2026-04-20T09:22:53.529Z",
   "components": [
     {
       "name": "Accordion",
@@ -73,7 +73,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui-react\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
         }
       ]
     },
@@ -112,7 +112,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui-react\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
         }
       ]
     },
@@ -151,7 +151,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui-react\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
         }
       ]
     },
@@ -202,7 +202,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+          "code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui-react\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n\n  <Separator />\n  \n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n    <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
         }
       ]
     },
@@ -241,7 +241,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -286,7 +286,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -331,7 +331,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -364,7 +364,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -391,7 +391,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -418,7 +418,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -445,7 +445,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -472,7 +472,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -505,7 +505,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -532,7 +532,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -559,7 +559,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
+          "code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button, AlertDialogPortal } from \"@epilot/volt-ui-react\"\n\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button destructive>Delete Account</Button>\n  </AlertDialogTrigger>\n  <AlertDialogPortal container={document.getElementById(\"root\")}>\n    <AlertDialogContent size=\"lg\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</AlertDialog>"
         }
       ]
     },
@@ -577,7 +577,7 @@
       "props": [
         {
           "name": "`color`",
-          "type": "\"accent\" | \"neutral\" | \"success\" | \"warning\" | \"error\" | \"blue\" | \"sky\" | \"mint\" | \"green\" | \"teal\" | \"cyan\" | \"indigo\" | \"purple\" | \"pink\" | \"red\" | \"orange\" | \"yellow\" | \"bronze\" | \"gray\"",
+          "type": "\"accent\" | \"neutral\" | \"success\" | \"warning\" | \"error\" | \"blue\" | \"sky\" | \"mint\" | \"lime\" | \"green\" | \"teal\" | \"cyan\" | \"indigo\" | \"purple\" | \"pink\" | \"red\" | \"orange\" | \"yellow\" | \"bronze\" | \"gray\"",
           "default": "`\"accent\"`",
           "description": "The color variant. Semantic colors (accent, neutral, success, warning, error) are recommended for status. Named colors are available for custom categorization."
         },
@@ -610,7 +610,115 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Badge } from \"@epilot/volt-ui\"\n\n<Badge color=\"accent\">Accent</Badge>\n<Badge color=\"success\">Success</Badge>\n<Badge color=\"error\">Error</Badge>"
+          "code": "import { Badge } from \"@epilot/volt-ui-react\"\n\n<Badge color=\"accent\">Accent</Badge>\n<Badge color=\"success\">Success</Badge>\n<Badge color=\"error\">Error</Badge>"
+        }
+      ]
+    },
+    {
+      "name": "Breadcrumb",
+      "title": "Breadcrumb",
+      "description": "A navigation aid that shows the user's current location within a hierarchy",
+      "docsPath": "docs/content/docs/components/breadcrumb.mdx",
+      "docSlug": "breadcrumb",
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/breadcrumb/breadcrumb.tsx"
+      ],
+      "props": [
+        {
+          "name": "`separator`",
+          "type": "`ReactNode`",
+          "default": "`\"/\"`",
+          "description": "Content rendered between items"
+        },
+        {
+          "name": "`className`",
+          "type": "`string`",
+          "default": "-",
+          "description": "Additional CSS classes on the `<nav>`"
+        }
+      ],
+      "examples": [
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { Breadcrumb, BreadcrumbItem } from \"@epilot/volt-ui-react\"\n\n<Breadcrumb>\n  <BreadcrumbItem asChild>\n    <Link to=\"/contacts\">Contacts</Link>\n  </BreadcrumbItem>\n  <BreadcrumbItem isCurrent>John Doe</BreadcrumbItem>\n</Breadcrumb>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<Breadcrumb>\n  <BreadcrumbItem isCurrent>Summary</BreadcrumbItem>\n</Breadcrumb>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<Breadcrumb separator={<ChevronRight className=\"size-3\" />}>\n  <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>\n  <BreadcrumbItem href=\"/products\">Products</BreadcrumbItem>\n  <BreadcrumbItem isCurrent>Details</BreadcrumbItem>\n</Breadcrumb>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { Link } from \"react-router-dom\"\n\n<Breadcrumb>\n  <BreadcrumbItem asChild>\n    <Link to=\"/contacts\">Contacts</Link>\n  </BreadcrumbItem>\n  <BreadcrumbItem isCurrent>John Doe</BreadcrumbItem>\n</Breadcrumb>"
+        }
+      ]
+    },
+    {
+      "name": "BreadcrumbItem",
+      "title": "Breadcrumb",
+      "description": "A navigation aid that shows the user's current location within a hierarchy",
+      "docsPath": "docs/content/docs/components/breadcrumb.mdx",
+      "docSlug": "breadcrumb",
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/breadcrumb/breadcrumb.tsx"
+      ],
+      "props": [
+        {
+          "name": "`asChild`",
+          "type": "`boolean`",
+          "default": "`false`",
+          "description": "Render as the child element (e.g. router Link)"
+        },
+        {
+          "name": "`href`",
+          "type": "`string`",
+          "default": "-",
+          "description": "If provided, renders as `<a>`. Ignored when `asChild` is true"
+        },
+        {
+          "name": "`isCurrent`",
+          "type": "`boolean`",
+          "default": "`false`",
+          "description": "Marks as current page. Adds `aria-current=\"page\"` and removes link styling"
+        },
+        {
+          "name": "`className`",
+          "type": "`string`",
+          "default": "-",
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { Breadcrumb, BreadcrumbItem } from \"@epilot/volt-ui-react\"\n\n<Breadcrumb>\n  <BreadcrumbItem asChild>\n    <Link to=\"/contacts\">Contacts</Link>\n  </BreadcrumbItem>\n  <BreadcrumbItem isCurrent>John Doe</BreadcrumbItem>\n</Breadcrumb>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<Breadcrumb>\n  <BreadcrumbItem isCurrent>Summary</BreadcrumbItem>\n</Breadcrumb>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<Breadcrumb separator={<ChevronRight className=\"size-3\" />}>\n  <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>\n  <BreadcrumbItem href=\"/products\">Products</BreadcrumbItem>\n  <BreadcrumbItem isCurrent>Details</BreadcrumbItem>\n</Breadcrumb>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { Link } from \"react-router-dom\"\n\n<Breadcrumb>\n  <BreadcrumbItem asChild>\n    <Link to=\"/contacts\">Contacts</Link>\n  </BreadcrumbItem>\n  <BreadcrumbItem isCurrent>John Doe</BreadcrumbItem>\n</Breadcrumb>"
         }
       ]
     },
@@ -628,7 +736,7 @@
       "props": [
         {
           "name": "`variant`",
-          "type": "`\"primary\"` | `\"secondary\"` | `\"tertiary\"`",
+          "type": "`\"primary\"` | `\"secondary\"` | `\"tertiary\"` | `\"ghost\"`",
           "default": "`\"primary\"`",
           "description": "The visual style variant of the button."
         },
@@ -661,12 +769,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Button } from \"@epilot/volt-ui\";\n\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\" shape=\"normal\">Secondary</Button>\n<Button variant=\"tertiary\" shape=\"normal\">Tertiary</Button>\n<Button size=\"icon\"><PlusIcon /></Button>\n\n<Button destructive variant=\"primary\">Primary</Button>\n<Button destructive variant=\"secondary\">Secondary</Button>\n<Button destructive variant=\"tertiary\">Tertiary</Button>\n<Button destructive size=\"icon\"><PlusIcon /></Button></div>"
+          "code": "import { Button } from \"@epilot/volt-ui-react\";\n\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\" shape=\"normal\">Secondary</Button>\n<Button variant=\"tertiary\" shape=\"normal\">Tertiary</Button>\n<Button size=\"icon\"><PlusIcon /></Button>\n\n<Button destructive variant=\"primary\">Primary</Button>\n<Button destructive variant=\"secondary\">Secondary</Button>\n<Button destructive variant=\"tertiary\">Tertiary</Button>\n<Button destructive size=\"icon\"><PlusIcon /></Button></div>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Button } from \"@epilot/volt-ui\";\n\n<Button size=\"xs\">Extra Small</Button>\n<Button size=\"sm\">Small</Button>\n<Button size=\"base\">Base</Button>\n<Button size=\"lg\">Large</Button>\n\n<Button size=\"icon-xs\"><PlusIcon /></Button>\n<Button size=\"icon-sm\"><PlusIcon /></Button>\n<Button size=\"icon\"><PlusIcon /></Button>\n<Button size=\"icon-lg\"><PlusIcon /></Button>"
+          "code": "import { Button } from \"@epilot/volt-ui-react\";\n\n<Button size=\"xs\">Extra Small</Button>\n<Button size=\"sm\">Small</Button>\n<Button size=\"base\">Base</Button>\n<Button size=\"lg\">Large</Button>\n\n<Button size=\"icon-xs\"><PlusIcon /></Button>\n<Button size=\"icon-sm\"><PlusIcon /></Button>\n<Button size=\"icon\"><PlusIcon /></Button>\n<Button size=\"icon-lg\"><PlusIcon /></Button>"
         },
         {
           "language": "tsx",
@@ -710,7 +818,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui\";\n\n<ButtonGroup>\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator />\n  <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button variant=\"secondary\">Action</Button>\n  <ButtonGroupSeparator />\n  <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button destructive>Action</Button>\n  <ButtonGroupSeparator />\n  <Button destructive><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator orientation=\"vertical\" />\n  <Button><MinusIcon /></Button>\n</ButtonGroup>"
+          "code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui-react\";\n\n<ButtonGroup>\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator />\n  <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button variant=\"secondary\">Action</Button>\n  <ButtonGroupSeparator />\n  <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button destructive>Action</Button>\n  <ButtonGroupSeparator />\n  <Button destructive><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator orientation=\"vertical\" />\n  <Button><MinusIcon /></Button>\n</ButtonGroup>"
         }
       ]
     },
@@ -743,7 +851,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui\";\n\n<ButtonGroup>\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator />\n  <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button variant=\"secondary\">Action</Button>\n  <ButtonGroupSeparator />\n  <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button destructive>Action</Button>\n  <ButtonGroupSeparator />\n  <Button destructive><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator orientation=\"vertical\" />\n  <Button><MinusIcon /></Button>\n</ButtonGroup>"
+          "code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui-react\";\n\n<ButtonGroup>\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator />\n  <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button variant=\"secondary\">Action</Button>\n  <ButtonGroupSeparator />\n  <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button destructive>Action</Button>\n  <ButtonGroupSeparator />\n  <Button destructive><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator orientation=\"vertical\" />\n  <Button><MinusIcon /></Button>\n</ButtonGroup>"
         }
       ]
     },
@@ -782,7 +890,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui\";\n\n<ButtonGroup>\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator />\n  <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button variant=\"secondary\">Action</Button>\n  <ButtonGroupSeparator />\n  <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button destructive>Action</Button>\n  <ButtonGroupSeparator />\n  <Button destructive><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator orientation=\"vertical\" />\n  <Button><MinusIcon /></Button>\n</ButtonGroup>"
+          "code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui-react\";\n\n<ButtonGroup>\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator />\n  <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button variant=\"secondary\">Action</Button>\n  <ButtonGroupSeparator />\n  <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n  <Button destructive>Action</Button>\n  <ButtonGroupSeparator />\n  <Button destructive><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n  <Button><PlusIcon /></Button>\n  <ButtonGroupSeparator orientation=\"vertical\" />\n  <Button><MinusIcon /></Button>\n</ButtonGroup>"
         }
       ]
     },
@@ -863,7 +971,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { DateTimePicker } from \"@epilot/volt-ui\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<Date>(new Date())\n\n  return (\n    <DateTimePicker\n      label=\"Appointment\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { DateTimePicker } from \"@epilot/volt-ui-react\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<Date>(new Date())\n\n  return (\n    <DateTimePicker\n      label=\"Appointment\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
         },
         {
           "language": "tsx",
@@ -931,19 +1039,19 @@
           "name": "`customIcon`",
           "type": "`React.ReactNode`",
           "default": "-",
-          "description": "A custom icon element to replace the default variant icon."
+          "description": "A custom icon and pass `data-slot=\"callout-icon\"` as props"
         }
       ],
       "examples": [
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle className=\"size-5\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle data-slot=\"callout-icon\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
         }
       ]
     },
@@ -976,12 +1084,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle className=\"size-5\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle data-slot=\"callout-icon\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
         }
       ]
     },
@@ -1008,12 +1116,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle className=\"size-5\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle data-slot=\"callout-icon\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
         }
       ]
     },
@@ -1040,12 +1148,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\n\n<Callout variant=\"info\">\n  <CalloutTitle>Info</CalloutTitle>\n  <CalloutDescription>This is an information message.</CalloutDescription>\n  <CalloutAction>\n    <Button variant=\"secondary\">Close</Button>\n  </CalloutAction>\n</Callout>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle className=\"size-5\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
+          "code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui-react\"\nimport { IconInfoCircle } from \"@tabler/icons-react\"\n\n<Callout customIcon={<IconInfoCircle data-slot=\"callout-icon\" />}>\n  <CalloutTitle>Custom Icon</CalloutTitle>\n  <CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>\n</Callout>\n  \n// Hide icon completely\n<Callout variant=\"warning\" hideIcon>\n  <CalloutTitle>No Icon</CalloutTitle>\n  <CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>\n</Callout>"
         }
       ]
     },
@@ -1072,7 +1180,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1099,7 +1207,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1126,7 +1234,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1153,7 +1261,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1180,7 +1288,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1207,7 +1315,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1234,7 +1342,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
+          "code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui-react\"\n\n<Card className=\"max-w-lg\">\n  <CardHeader>\n    <CardTitle>Project status</CardTitle>\n    <CardDescription>Latest deployment and uptime.</CardDescription>\n    <CardAction>\n      <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n  </CardContent>\n  <CardFooter>\n    <Text variant=\"helper1\">Updated 2h ago</Text>\n  </CardFooter>\n</Card>"
         }
       ]
     },
@@ -1309,7 +1417,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Checkbox, Label } from \"@epilot/volt-ui\"\n\n<div>\n  <Checkbox id=\"agree-to-terms\" />\n  <Label htmlFor=\"agree-to-terms\">Accept terms and conditions.</Label>\n</div>\n\n<div>\n  <Checkbox id=\"enable-notifications\" checked />\n  <Label htmlFor=\"enable-notifications\">\n    Notifications enabled\n  </Label>\n</div>\n\n<div>\n  <Checkbox id=\"some-items-selected\" checked=\"indeterminate\" />\n  <Label htmlFor=\"some-items-selected\">\n    Some items selected\n  </Label>\n</div>"
+          "code": "import { Checkbox, Label } from \"@epilot/volt-ui-react\"\n\n<div>\n  <Checkbox id=\"agree-to-terms\" />\n  <Label htmlFor=\"agree-to-terms\">Accept terms and conditions.</Label>\n</div>\n\n<div>\n  <Checkbox id=\"enable-notifications\" checked />\n  <Label htmlFor=\"enable-notifications\">\n    Notifications enabled\n  </Label>\n</div>\n\n<div>\n  <Checkbox id=\"some-items-selected\" checked=\"indeterminate\" />\n  <Label htmlFor=\"some-items-selected\">\n    Some items selected\n  </Label>\n</div>"
         }
       ]
     },
@@ -1378,12 +1486,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui-react\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
@@ -1403,7 +1511,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
+          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui-react\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
         }
       ]
     },
@@ -1430,12 +1538,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui-react\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
@@ -1455,7 +1563,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
+          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui-react\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
         }
       ]
     },
@@ -1482,12 +1590,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui-react\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
@@ -1507,7 +1615,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
+          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui-react\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
         }
       ]
     },
@@ -1540,12 +1648,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle } from \"@epilot/volt-ui-react\"\nimport { IconLayoutSidebar, IconLayoutSidebarFilled, IconFolder, IconFile, IconStar, IconClock } from \"@tabler/icons-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  {/* Full content — shown when expanded, and in floating panel on hover */}\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    <nav className=\"flex flex-col gap-1 p-4 flex-1 min-h-0\">\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 text-sm font-medium\" href=\"#\">\n        <IconFolder size={18} />\n        All files\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconStar size={18} />\n        Starred\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconClock size={18} />\n        Recent\n      </a>\n      <a className=\"flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm\" href=\"#\">\n        <IconFile size={18} />\n        Documents\n      </a>\n    </nav>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n\n  {/* Collapsed strip — icon for each section + toggle at bottom */}\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      <div className=\"p-2 rounded-lg bg-blue-50\">\n        <IconFolder size={18} className=\"text-blue-600\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconStar size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconClock size={18} className=\"text-gray-500\" />\n      </div>\n      <div className=\"p-2 rounded-lg hover:bg-gray-100\">\n        <IconFile size={18} className=\"text-gray-500\" />\n      </div>\n    </div>\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {({ collapsed }) => collapsed\n        ? <IconLayoutSidebarFilled size={18} className=\"text-blue-600\" />\n        : <IconLayoutSidebar size={18} className=\"text-gray-500\" />}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
+          "code": "import { useState } from \"react\"\nimport { CollapsibleSidebar, CollapsibleSidebarContent, CollapsibleSidebarCondensed, CollapsibleSidebarToggle, Button } from \"@epilot/volt-ui-react\"\n\nconst [collapsed, setCollapsed] = useState(false)\n\n<div className=\"flex gap-2\">\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(false)}>Expand</Button>\n  <Button variant=\"secondary\" size=\"sm\" onClick={() => setCollapsed(true)}>Collapse</Button>\n</div>\n\n<CollapsibleSidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <CollapsibleSidebarContent className=\"bg-white border-r\">\n    {/* nav items */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-end\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarContent>\n  <CollapsibleSidebarCondensed className=\"bg-white border-r h-full\">\n    {/* icon for each section */}\n    <CollapsibleSidebarToggle className=\"border-t border-gray-100 justify-center\">\n      {/* toggle icon */}\n    </CollapsibleSidebarToggle>\n  </CollapsibleSidebarCondensed>\n</CollapsibleSidebar>"
         },
         {
           "language": "tsx",
@@ -1565,929 +1673,163 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
+          "code": "import { useCollapsibleSidebar } from \"@epilot/volt-ui-react\"\n\nconst { collapsed, onCollapsedChange, width, collapsedWidth, isHovered, expandOnHover } = useCollapsibleSidebar()"
         }
       ]
     },
     {
       "name": "DataTable",
-      "title": "Columns & Filtering",
-      "description": "Column visibility, resizing, pinning, and filtering options.",
-      "docsPath": "docs/content/docs/components/data-table/columns.mdx",
-      "docSlug": "data-table/columns",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableToolbar } from \"@epilot/volt-ui\"\nimport { IconSearch } from \"@tabler/icons-react\"\n\nfunction MyTable() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableGlobalFilter\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n    >\n      <DataTableToolbar>\n        <div className=\"flex items-center gap-2 rounded-lg border border-gray-a6 px-3 py-1.5\">\n          <IconSearch size={18} />\n          <input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent, DataTableToolbar, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  // Get current filter values\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  // Update status filter\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  // Update type filter\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableFiltering\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n    >\n      <DataTableToolbar>\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"overdue\">Overdue</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnVisibility,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  return (\n    <DataTable columns={columns} data={data} enableSorting>\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        {/* Use -mr-1 wrapper to align icon with toolbar edge (compensates for button hover padding) */}\n        <div className=\"-mr-1\">\n          <DataTableColumnVisibility label=\"Toggle columns\" />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    enableHiding: false, // This column won't appear in the visibility dropdown\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    // enableHiding defaults to true\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    enableHiding: false, // Actions column should always be visible\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { Button } from \"@epilot/volt-ui\"\n\n<DataTableColumnVisibility\n  label=\"Toggle columns\"\n  trigger={\n    <Button variant=\"tertiary\" size=\"sm\">\n      Columns\n    </Button>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  // ... other columns\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    meta: {\n      visibilityLabel: \"Actions\", // Label shown in visibility dropdown\n    },\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} enableColumnOrdering>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnOrder,\n  DataTableColumnVisibility,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data}>\n  <DataTableToolbar>\n    <div className=\"flex-1\" />\n    <DataTableColumnOrder label=\"Column order\" />\n  </DataTableToolbar>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{/* Custom icon */}\n<DataTableColumnOrder label=\"Column order\" icon={<MyIcon />} />\n\n{/* Fully custom trigger */}\n<DataTableColumnOrder label=\"Column order\" trigger={<Button>Reorder</Button>} />"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    meta: { enableOrdering: false }, // Cannot be reordered\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    // Reorderable by default\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\nimport { useLocalStorage } from \"@/hooks/useSessionStorage\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n    \"my-table-column-order\",\n    []\n  )\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableColumnOrdering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    size: 120,      // Initial width\n    minSize: 80,    // Minimum width when resizing\n    maxSize: 200,   // Maximum width when resizing\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Type\",\n    size: 100,\n    enableResizing: false, // Disable resizing for this column\n  },\n  // ...more columns\n]\n\n// Column resizing is enabled by default\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// To disable column resizing:\n<DataTable columns={columns} data={data} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnSizingState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({\n    id: 100,\n    customer: 180,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    size: 60,\n    enableResizing: false, // Cannot be resized\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    size: 150,\n    minSize: 100,  // Minimum 100px\n    maxSize: 400,  // Maximum 400px\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses defaults: minSize=20, maxSize=unlimited\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default: handles appear on header hover\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// Always show resize handles\n<DataTable columns={columns} data={data} resizeHandleVisibility=\"always\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { RowSelectionState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      autoPinSelection // Pin checkbox column when rows are selected\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n<DataTable\n  columns={columns}\n  data={data}\n  columnPinning={{ left: [\"id\"], right: [\"actions\"] }}\n>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnPinningState } from \"@epilot/volt-ui\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({\n    left: [\"id\"],\n    right: [],\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n// Compact rows (smallest)\n<DataTable columns={columns} data={data} density=\"compact\">\n  <DataTableContent />\n</DataTable>\n\n// Normal rows (default)\n<DataTable columns={columns} data={data} density=\"normal\">\n  <DataTableContent />\n</DataTable>\n\n// Comfortable rows (largest)\n<DataTable columns={columns} data={data} density=\"comfortable\">\n  <DataTableContent />\n</DataTable>"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableBody",
-      "title": "Data Table",
-      "description": "A powerful data table component built on Tanstack Table with support for sorting, filtering, pagination, row selection, and virtualization.",
-      "docsPath": "docs/content/docs/components/data-table/index.mdx",
-      "docSlug": "data-table/index",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-body.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\ntype Invoice = {\n  id: string\n  status: string\n  customer: string\n  amount: number\n}\n\nconst columns: ColumnDef<Invoice>[] = [\n  { accessorKey: \"id\", header: \"Invoice\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"customer\", header: \"Customer\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n]\n\n// Column resizing is enabled by default. Disable if you prefer fixed columns:\n<DataTable columns={columns} data={invoices} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction FullExample() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [rowSelection, setRowSelection] = useState({})\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => setGlobalFilter(e.target.value)}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport type { ColumnFiltersState, PaginationState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction ServerExample() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [rowSelection, setRowSelection] = useState({})\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  // In a real app, use useQuery with pagination/sorting/filters as query keys\n  const { data, totalItems } = useServerData({\n    pagination,\n    sorting,\n    globalFilter,\n    statusFilter,\n    typeFilter,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      manualSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      manualFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n        totalItems: totalItems,\n        onPaginationChange: setPagination,\n      }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => {\n            setGlobalFilter(e.target.value)\n            setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n          }}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            onClick={() => {\n              setColumnFilters([])\n              setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n            }}\n          >\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"description\",\n    header: \"Description\",\n    size: 200,\n    meta: { cellOverflow: \"wrap\" }, // This column wraps, others truncate\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses table default\n  },\n]\n\n<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableColumnHeader } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Invoice\" />,\n  },\n  {\n    accessorKey: \"customer\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Customer\" />,\n  },\n  // ...more columns\n]\n\n<DataTable columns={columns} data={data} enableSorting>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableFooter, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [pageSize, setPageSize] = useState(5)\n  const visibleData = data.slice(0, pageSize)\n  const hasMore = pageSize < data.length\n\n  return (\n    <DataTable columns={columns} data={visibleData}>\n      <DataTableContent />\n      {hasMore && (\n        <DataTableFooter className=\"justify-start\">\n          <Button size=\"sm\" variant=\"tertiary\" onClick={() => setPageSize((prev) => prev + 3)}>\n            Show more ({data.length - pageSize} remaining)\n          </Button>\n        </DataTableFooter>\n      )}\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"name\",\n  header: \"Name\",\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"status\",\n  header: \"Status\",\n  cell: ({ row }) => <Badge>{row.getValue(\"status\")}</Badge>,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"date\",\n  header: ({ column }) => <DataTableColumnHeader column={column} title=\"Date\" />,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: () => <div className=\"text-right\">Amount</div>,\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" },\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: ({ column }) => (\n    <div className=\"flex justify-end\">\n      <DataTableColumnHeader column={column} title=\"Amount\" />\n    </div>\n  ),\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" }, // Ensures proper header padding alignment\n}"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableColumnHeader",
-      "title": "Data Table",
-      "description": "A powerful data table component built on Tanstack Table with support for sorting, filtering, pagination, row selection, and virtualization.",
-      "docsPath": "docs/content/docs/components/data-table/index.mdx",
-      "docSlug": "data-table/index",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-column-header.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\ntype Invoice = {\n  id: string\n  status: string\n  customer: string\n  amount: number\n}\n\nconst columns: ColumnDef<Invoice>[] = [\n  { accessorKey: \"id\", header: \"Invoice\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"customer\", header: \"Customer\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n]\n\n// Column resizing is enabled by default. Disable if you prefer fixed columns:\n<DataTable columns={columns} data={invoices} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction FullExample() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [rowSelection, setRowSelection] = useState({})\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => setGlobalFilter(e.target.value)}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport type { ColumnFiltersState, PaginationState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction ServerExample() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [rowSelection, setRowSelection] = useState({})\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  // In a real app, use useQuery with pagination/sorting/filters as query keys\n  const { data, totalItems } = useServerData({\n    pagination,\n    sorting,\n    globalFilter,\n    statusFilter,\n    typeFilter,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      manualSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      manualFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n        totalItems: totalItems,\n        onPaginationChange: setPagination,\n      }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => {\n            setGlobalFilter(e.target.value)\n            setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n          }}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            onClick={() => {\n              setColumnFilters([])\n              setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n            }}\n          >\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"description\",\n    header: \"Description\",\n    size: 200,\n    meta: { cellOverflow: \"wrap\" }, // This column wraps, others truncate\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses table default\n  },\n]\n\n<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableColumnHeader } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Invoice\" />,\n  },\n  {\n    accessorKey: \"customer\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Customer\" />,\n  },\n  // ...more columns\n]\n\n<DataTable columns={columns} data={data} enableSorting>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableFooter, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [pageSize, setPageSize] = useState(5)\n  const visibleData = data.slice(0, pageSize)\n  const hasMore = pageSize < data.length\n\n  return (\n    <DataTable columns={columns} data={visibleData}>\n      <DataTableContent />\n      {hasMore && (\n        <DataTableFooter className=\"justify-start\">\n          <Button size=\"sm\" variant=\"tertiary\" onClick={() => setPageSize((prev) => prev + 3)}>\n            Show more ({data.length - pageSize} remaining)\n          </Button>\n        </DataTableFooter>\n      )}\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"name\",\n  header: \"Name\",\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"status\",\n  header: \"Status\",\n  cell: ({ row }) => <Badge>{row.getValue(\"status\")}</Badge>,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"date\",\n  header: ({ column }) => <DataTableColumnHeader column={column} title=\"Date\" />,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: () => <div className=\"text-right\">Amount</div>,\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" },\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: ({ column }) => (\n    <div className=\"flex justify-end\">\n      <DataTableColumnHeader column={column} title=\"Amount\" />\n    </div>\n  ),\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" }, // Ensures proper header padding alignment\n}"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableColumnOrder",
-      "title": "Columns & Filtering",
-      "description": "Column visibility, resizing, pinning, and filtering options.",
-      "docsPath": "docs/content/docs/components/data-table/columns.mdx",
-      "docSlug": "data-table/columns",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-column-order.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableToolbar } from \"@epilot/volt-ui\"\nimport { IconSearch } from \"@tabler/icons-react\"\n\nfunction MyTable() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableGlobalFilter\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n    >\n      <DataTableToolbar>\n        <div className=\"flex items-center gap-2 rounded-lg border border-gray-a6 px-3 py-1.5\">\n          <IconSearch size={18} />\n          <input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent, DataTableToolbar, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  // Get current filter values\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  // Update status filter\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  // Update type filter\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableFiltering\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n    >\n      <DataTableToolbar>\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"overdue\">Overdue</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnVisibility,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  return (\n    <DataTable columns={columns} data={data} enableSorting>\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        {/* Use -mr-1 wrapper to align icon with toolbar edge (compensates for button hover padding) */}\n        <div className=\"-mr-1\">\n          <DataTableColumnVisibility label=\"Toggle columns\" />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    enableHiding: false, // This column won't appear in the visibility dropdown\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    // enableHiding defaults to true\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    enableHiding: false, // Actions column should always be visible\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { Button } from \"@epilot/volt-ui\"\n\n<DataTableColumnVisibility\n  label=\"Toggle columns\"\n  trigger={\n    <Button variant=\"tertiary\" size=\"sm\">\n      Columns\n    </Button>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  // ... other columns\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    meta: {\n      visibilityLabel: \"Actions\", // Label shown in visibility dropdown\n    },\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} enableColumnOrdering>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnOrder,\n  DataTableColumnVisibility,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data}>\n  <DataTableToolbar>\n    <div className=\"flex-1\" />\n    <DataTableColumnOrder label=\"Column order\" />\n  </DataTableToolbar>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{/* Custom icon */}\n<DataTableColumnOrder label=\"Column order\" icon={<MyIcon />} />\n\n{/* Fully custom trigger */}\n<DataTableColumnOrder label=\"Column order\" trigger={<Button>Reorder</Button>} />"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    meta: { enableOrdering: false }, // Cannot be reordered\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    // Reorderable by default\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\nimport { useLocalStorage } from \"@/hooks/useSessionStorage\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n    \"my-table-column-order\",\n    []\n  )\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableColumnOrdering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    size: 120,      // Initial width\n    minSize: 80,    // Minimum width when resizing\n    maxSize: 200,   // Maximum width when resizing\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Type\",\n    size: 100,\n    enableResizing: false, // Disable resizing for this column\n  },\n  // ...more columns\n]\n\n// Column resizing is enabled by default\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// To disable column resizing:\n<DataTable columns={columns} data={data} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnSizingState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({\n    id: 100,\n    customer: 180,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    size: 60,\n    enableResizing: false, // Cannot be resized\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    size: 150,\n    minSize: 100,  // Minimum 100px\n    maxSize: 400,  // Maximum 400px\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses defaults: minSize=20, maxSize=unlimited\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default: handles appear on header hover\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// Always show resize handles\n<DataTable columns={columns} data={data} resizeHandleVisibility=\"always\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { RowSelectionState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      autoPinSelection // Pin checkbox column when rows are selected\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n<DataTable\n  columns={columns}\n  data={data}\n  columnPinning={{ left: [\"id\"], right: [\"actions\"] }}\n>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnPinningState } from \"@epilot/volt-ui\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({\n    left: [\"id\"],\n    right: [],\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n// Compact rows (smallest)\n<DataTable columns={columns} data={data} density=\"compact\">\n  <DataTableContent />\n</DataTable>\n\n// Normal rows (default)\n<DataTable columns={columns} data={data} density=\"normal\">\n  <DataTableContent />\n</DataTable>\n\n// Comfortable rows (largest)\n<DataTable columns={columns} data={data} density=\"comfortable\">\n  <DataTableContent />\n</DataTable>"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableColumnVisibility",
-      "title": "Columns & Filtering",
-      "description": "Column visibility, resizing, pinning, and filtering options.",
-      "docsPath": "docs/content/docs/components/data-table/columns.mdx",
-      "docSlug": "data-table/columns",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-column-visibility.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableToolbar } from \"@epilot/volt-ui\"\nimport { IconSearch } from \"@tabler/icons-react\"\n\nfunction MyTable() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableGlobalFilter\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n    >\n      <DataTableToolbar>\n        <div className=\"flex items-center gap-2 rounded-lg border border-gray-a6 px-3 py-1.5\">\n          <IconSearch size={18} />\n          <input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent, DataTableToolbar, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  // Get current filter values\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  // Update status filter\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  // Update type filter\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableFiltering\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n    >\n      <DataTableToolbar>\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"overdue\">Overdue</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnVisibility,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  return (\n    <DataTable columns={columns} data={data} enableSorting>\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        {/* Use -mr-1 wrapper to align icon with toolbar edge (compensates for button hover padding) */}\n        <div className=\"-mr-1\">\n          <DataTableColumnVisibility label=\"Toggle columns\" />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    enableHiding: false, // This column won't appear in the visibility dropdown\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    // enableHiding defaults to true\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    enableHiding: false, // Actions column should always be visible\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { Button } from \"@epilot/volt-ui\"\n\n<DataTableColumnVisibility\n  label=\"Toggle columns\"\n  trigger={\n    <Button variant=\"tertiary\" size=\"sm\">\n      Columns\n    </Button>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  // ... other columns\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    meta: {\n      visibilityLabel: \"Actions\", // Label shown in visibility dropdown\n    },\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} enableColumnOrdering>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnOrder,\n  DataTableColumnVisibility,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data}>\n  <DataTableToolbar>\n    <div className=\"flex-1\" />\n    <DataTableColumnOrder label=\"Column order\" />\n  </DataTableToolbar>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{/* Custom icon */}\n<DataTableColumnOrder label=\"Column order\" icon={<MyIcon />} />\n\n{/* Fully custom trigger */}\n<DataTableColumnOrder label=\"Column order\" trigger={<Button>Reorder</Button>} />"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    meta: { enableOrdering: false }, // Cannot be reordered\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    // Reorderable by default\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\nimport { useLocalStorage } from \"@/hooks/useSessionStorage\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n    \"my-table-column-order\",\n    []\n  )\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableColumnOrdering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    size: 120,      // Initial width\n    minSize: 80,    // Minimum width when resizing\n    maxSize: 200,   // Maximum width when resizing\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Type\",\n    size: 100,\n    enableResizing: false, // Disable resizing for this column\n  },\n  // ...more columns\n]\n\n// Column resizing is enabled by default\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// To disable column resizing:\n<DataTable columns={columns} data={data} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnSizingState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({\n    id: 100,\n    customer: 180,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    size: 60,\n    enableResizing: false, // Cannot be resized\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    size: 150,\n    minSize: 100,  // Minimum 100px\n    maxSize: 400,  // Maximum 400px\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses defaults: minSize=20, maxSize=unlimited\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default: handles appear on header hover\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// Always show resize handles\n<DataTable columns={columns} data={data} resizeHandleVisibility=\"always\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { RowSelectionState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      autoPinSelection // Pin checkbox column when rows are selected\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n<DataTable\n  columns={columns}\n  data={data}\n  columnPinning={{ left: [\"id\"], right: [\"actions\"] }}\n>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnPinningState } from \"@epilot/volt-ui\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({\n    left: [\"id\"],\n    right: [],\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n// Compact rows (smallest)\n<DataTable columns={columns} data={data} density=\"compact\">\n  <DataTableContent />\n</DataTable>\n\n// Normal rows (default)\n<DataTable columns={columns} data={data} density=\"normal\">\n  <DataTableContent />\n</DataTable>\n\n// Comfortable rows (largest)\n<DataTable columns={columns} data={data} density=\"comfortable\">\n  <DataTableContent />\n</DataTable>"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableContent",
-      "title": "Columns & Filtering",
-      "description": "Column visibility, resizing, pinning, and filtering options.",
-      "docsPath": "docs/content/docs/components/data-table/columns.mdx",
-      "docSlug": "data-table/columns",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-content.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableToolbar } from \"@epilot/volt-ui\"\nimport { IconSearch } from \"@tabler/icons-react\"\n\nfunction MyTable() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableGlobalFilter\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n    >\n      <DataTableToolbar>\n        <div className=\"flex items-center gap-2 rounded-lg border border-gray-a6 px-3 py-1.5\">\n          <IconSearch size={18} />\n          <input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent, DataTableToolbar, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  // Get current filter values\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  // Update status filter\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  // Update type filter\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableFiltering\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n    >\n      <DataTableToolbar>\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"overdue\">Overdue</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnVisibility,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  return (\n    <DataTable columns={columns} data={data} enableSorting>\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        {/* Use -mr-1 wrapper to align icon with toolbar edge (compensates for button hover padding) */}\n        <div className=\"-mr-1\">\n          <DataTableColumnVisibility label=\"Toggle columns\" />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    enableHiding: false, // This column won't appear in the visibility dropdown\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    // enableHiding defaults to true\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    enableHiding: false, // Actions column should always be visible\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { Button } from \"@epilot/volt-ui\"\n\n<DataTableColumnVisibility\n  label=\"Toggle columns\"\n  trigger={\n    <Button variant=\"tertiary\" size=\"sm\">\n      Columns\n    </Button>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  // ... other columns\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    meta: {\n      visibilityLabel: \"Actions\", // Label shown in visibility dropdown\n    },\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} enableColumnOrdering>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnOrder,\n  DataTableColumnVisibility,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data}>\n  <DataTableToolbar>\n    <div className=\"flex-1\" />\n    <DataTableColumnOrder label=\"Column order\" />\n  </DataTableToolbar>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{/* Custom icon */}\n<DataTableColumnOrder label=\"Column order\" icon={<MyIcon />} />\n\n{/* Fully custom trigger */}\n<DataTableColumnOrder label=\"Column order\" trigger={<Button>Reorder</Button>} />"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    meta: { enableOrdering: false }, // Cannot be reordered\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    // Reorderable by default\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\nimport { useLocalStorage } from \"@/hooks/useSessionStorage\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n    \"my-table-column-order\",\n    []\n  )\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableColumnOrdering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    size: 120,      // Initial width\n    minSize: 80,    // Minimum width when resizing\n    maxSize: 200,   // Maximum width when resizing\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Type\",\n    size: 100,\n    enableResizing: false, // Disable resizing for this column\n  },\n  // ...more columns\n]\n\n// Column resizing is enabled by default\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// To disable column resizing:\n<DataTable columns={columns} data={data} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnSizingState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({\n    id: 100,\n    customer: 180,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    size: 60,\n    enableResizing: false, // Cannot be resized\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    size: 150,\n    minSize: 100,  // Minimum 100px\n    maxSize: 400,  // Maximum 400px\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses defaults: minSize=20, maxSize=unlimited\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default: handles appear on header hover\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// Always show resize handles\n<DataTable columns={columns} data={data} resizeHandleVisibility=\"always\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { RowSelectionState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      autoPinSelection // Pin checkbox column when rows are selected\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n<DataTable\n  columns={columns}\n  data={data}\n  columnPinning={{ left: [\"id\"], right: [\"actions\"] }}\n>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnPinningState } from \"@epilot/volt-ui\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({\n    left: [\"id\"],\n    right: [],\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n// Compact rows (smallest)\n<DataTable columns={columns} data={data} density=\"compact\">\n  <DataTableContent />\n</DataTable>\n\n// Normal rows (default)\n<DataTable columns={columns} data={data} density=\"normal\">\n  <DataTableContent />\n</DataTable>\n\n// Comfortable rows (largest)\n<DataTable columns={columns} data={data} density=\"comfortable\">\n  <DataTableContent />\n</DataTable>"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableError",
-      "title": "Advanced",
-      "description": "Virtualization, loading/error states, and composable API.",
-      "docsPath": "docs/content/docs/components/data-table/advanced.mdx",
-      "docSlug": "data-table/advanced",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-error.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction VirtualizedTable() {\n  const [rowSelection, setRowSelection] = useState({})\n  const largeDataset = useMemo(() => generateLargeData(15000), [])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={largeDataset}\n      enableSorting\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      virtualization={{\n        enabled: true,\n        estimateRowHeight: 48, // Match your row height\n        overscan: 10,          // Render 10 extra rows beyond viewport\n        containerHeight: 600,  // Fixed height required for virtualization\n      }}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "type VirtualizationConfig = {\n  enabled: boolean\n  estimateRowHeight?: number // Default: 48\n  overscan?: number          // Default: 10\n  containerHeight?: number   // Default: 600\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableToolbar,\n} from \"@epilot/volt-ui\"\n\nfunction ComposableTable() {\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableToolbar>\n        <input placeholder=\"Search invoices...\" />\n      </DataTableToolbar>\n\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n\n      <DataTablePagination className=\"mt-4\" />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable\n  columns={columns}\n  data={largeDataset}\n  enableSorting\n  virtualization={{ enabled: true, containerHeight: 500 }}\n>\n  <DataTableContent>\n    <DataTableHeader sticky />\n    <DataTableBody emptyState=\"No results found.\" />\n  </DataTableContent>\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableHeader, DataTableBody, DataTableLoading } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { data, isLoading } = useQuery(...)\n\n  return (\n    <DataTable columns={columns} data={data ?? []}>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody\n          isLoading={isLoading}\n          loadingState={<DataTableLoading />}\n          emptyState=\"No invoices found.\"\n        />\n      </DataTableContent>\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTableBody\n  isLoading={isLoading}\n  loadingState={\n    <DataTableLoading>\n      <Spinner size=\"xl\" className=\"text-accent-light\" />\n      <p className=\"mt-4 text-base font-medium\">{t('table.loading')}</p>\n      <p className=\"text-sm text-gray-light\">{t('table.loading.description')}</p>\n    </DataTableLoading>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableHeader, DataTableBody, DataTableError } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { data, isLoading, isError, refetch } = useQuery(...)\n\n  return (\n    <DataTable columns={columns} data={data ?? []}>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody\n          isLoading={isLoading}\n          loadingState={<DataTableLoading />}\n          isError={isError}\n          errorState={\n            <DataTableError\n              title=\"Failed to load invoices\"\n              description=\"There was a problem connecting to the server.\"\n              retryLabel=\"Retry\"\n              onRetry={refetch}\n            />\n          }\n          emptyState=\"No invoices found.\"\n        />\n      </DataTableContent>\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTableBody\n  isError={isError}\n  errorState={\n    <DataTableError>\n      <AlertTriangle size={48} className=\"text-error-light\" />\n      <p className=\"mt-2 text-lg font-semibold\">{t('table.error.title')}</p>\n      <p className=\"text-sm text-gray-light\">{t('table.error.description')}</p>\n      <div className=\"flex gap-2 mt-4\">\n        <Button variant=\"secondary\" size=\"sm\" onClick={refetch}>\n          {t('retry')}\n        </Button>\n        <Button variant=\"tertiary\" size=\"sm\">\n          {t('contact_support')}\n        </Button>\n      </div>\n    </DataTableError>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default - borders visible on header and rows\n<DataTable columns={columns} data={data} />\n\n// Hide all borders\n<DataTable\n  columns={columns}\n  data={data}\n  showHeaderBorder={false}\n  showRowBorders={false}\n/>\n\n// Hide only row borders (keep header border)\n<DataTable\n  columns={columns}\n  data={data}\n  showRowBorders={false}\n/>\n\n// Hide only header border (keep row borders)\n<DataTable\n  columns={columns}\n  data={data}\n  showHeaderBorder={false}\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default uses var(--volt-gray-2)\n<DataTableHeader sticky />\n\n// Custom background color\n<DataTableHeader sticky stickyBackground=\"white\" />\n\n// Use a different volt gray\n<DataTableHeader sticky stickyBackground=\"var(--volt-gray-1)\" />\n\n// Custom CSS variable\n<DataTableHeader sticky stickyBackground=\"var(--my-header-bg)\" />"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableFooter",
-      "title": "Data Table",
-      "description": "A powerful data table component built on Tanstack Table with support for sorting, filtering, pagination, row selection, and virtualization.",
-      "docsPath": "docs/content/docs/components/data-table/index.mdx",
-      "docSlug": "data-table/index",
-      "documentationUrl": null,
-      "apiReferenceUrl": null,
-      "sourcePaths": [
-        "src/components/data-table/data-table-footer.tsx"
-      ],
-      "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\ntype Invoice = {\n  id: string\n  status: string\n  customer: string\n  amount: number\n}\n\nconst columns: ColumnDef<Invoice>[] = [\n  { accessorKey: \"id\", header: \"Invoice\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"customer\", header: \"Customer\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n]\n\n// Column resizing is enabled by default. Disable if you prefer fixed columns:\n<DataTable columns={columns} data={invoices} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction FullExample() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [rowSelection, setRowSelection] = useState({})\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => setGlobalFilter(e.target.value)}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport type { ColumnFiltersState, PaginationState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction ServerExample() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [rowSelection, setRowSelection] = useState({})\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  // In a real app, use useQuery with pagination/sorting/filters as query keys\n  const { data, totalItems } = useServerData({\n    pagination,\n    sorting,\n    globalFilter,\n    statusFilter,\n    typeFilter,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      manualSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      manualFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n        totalItems: totalItems,\n        onPaginationChange: setPagination,\n      }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => {\n            setGlobalFilter(e.target.value)\n            setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n          }}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            onClick={() => {\n              setColumnFilters([])\n              setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n            }}\n          >\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"description\",\n    header: \"Description\",\n    size: 200,\n    meta: { cellOverflow: \"wrap\" }, // This column wraps, others truncate\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses table default\n  },\n]\n\n<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableColumnHeader } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Invoice\" />,\n  },\n  {\n    accessorKey: \"customer\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Customer\" />,\n  },\n  // ...more columns\n]\n\n<DataTable columns={columns} data={data} enableSorting>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableFooter, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [pageSize, setPageSize] = useState(5)\n  const visibleData = data.slice(0, pageSize)\n  const hasMore = pageSize < data.length\n\n  return (\n    <DataTable columns={columns} data={visibleData}>\n      <DataTableContent />\n      {hasMore && (\n        <DataTableFooter className=\"justify-start\">\n          <Button size=\"sm\" variant=\"tertiary\" onClick={() => setPageSize((prev) => prev + 3)}>\n            Show more ({data.length - pageSize} remaining)\n          </Button>\n        </DataTableFooter>\n      )}\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"name\",\n  header: \"Name\",\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"status\",\n  header: \"Status\",\n  cell: ({ row }) => <Badge>{row.getValue(\"status\")}</Badge>,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"date\",\n  header: ({ column }) => <DataTableColumnHeader column={column} title=\"Date\" />,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: () => <div className=\"text-right\">Amount</div>,\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" },\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: ({ column }) => (\n    <div className=\"flex justify-end\">\n      <DataTableColumnHeader column={column} title=\"Amount\" />\n    </div>\n  ),\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" }, // Ensures proper header padding alignment\n}"
-        }
-      ]
-    },
-    {
-      "name": "DataTableHeader",
-      "title": "Data Table",
-      "description": "A powerful data table component built on Tanstack Table with support for sorting, filtering, pagination, row selection, and virtualization.",
-      "docsPath": "docs/content/docs/components/data-table/index.mdx",
-      "docSlug": "data-table/index",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
-        "src/components/data-table/data-table-header.tsx"
-      ],
-      "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\ntype Invoice = {\n  id: string\n  status: string\n  customer: string\n  amount: number\n}\n\nconst columns: ColumnDef<Invoice>[] = [\n  { accessorKey: \"id\", header: \"Invoice\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"customer\", header: \"Customer\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n]\n\n// Column resizing is enabled by default. Disable if you prefer fixed columns:\n<DataTable columns={columns} data={invoices} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction FullExample() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [rowSelection, setRowSelection] = useState({})\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => setGlobalFilter(e.target.value)}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport type { ColumnFiltersState, PaginationState, SortingState } from \"@tanstack/react-table\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableColumnVisibility,\n  DataTableColumnOrder,\n  DataTableToolbar,\n  Button,\n} from \"@epilot/volt-ui\"\n\nfunction ServerExample() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [rowSelection, setRowSelection] = useState({})\n\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n    setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n  }\n\n  // In a real app, use useQuery with pagination/sorting/filters as query keys\n  const { data, totalItems } = useServerData({\n    pagination,\n    sorting,\n    globalFilter,\n    statusFilter,\n    typeFilter,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      manualSorting\n      enableRowSelection\n      enableColumnOrdering\n      enableGlobalFilter\n      enableFiltering\n      manualFiltering\n      sorting={sorting}\n      onSortingChange={setSorting}\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      pagination={{\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n        totalItems: totalItems,\n        onPaginationChange: setPagination,\n      }}\n    >\n      <DataTableToolbar>\n        <input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={(e) => {\n            setGlobalFilter(e.target.value)\n            setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n          }}\n        />\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            onClick={() => {\n              setColumnFilters([])\n              setPagination((prev) => ({ ...prev, pageIndex: 0 }))\n            }}\n          >\n            Clear filters\n          </Button>\n        )}\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n      <DataTablePagination />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"description\",\n    header: \"Description\",\n    size: 200,\n    meta: { cellOverflow: \"wrap\" }, // This column wraps, others truncate\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses table default\n  },\n]\n\n<DataTable columns={columns} data={data} cellOverflow=\"truncate\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableColumnHeader } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Invoice\" />,\n  },\n  {\n    accessorKey: \"customer\",\n    header: ({ column }) => <DataTableColumnHeader column={column} title=\"Customer\" />,\n  },\n  // ...more columns\n]\n\n<DataTable columns={columns} data={data} enableSorting>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableFooter, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [pageSize, setPageSize] = useState(5)\n  const visibleData = data.slice(0, pageSize)\n  const hasMore = pageSize < data.length\n\n  return (\n    <DataTable columns={columns} data={visibleData}>\n      <DataTableContent />\n      {hasMore && (\n        <DataTableFooter className=\"justify-start\">\n          <Button size=\"sm\" variant=\"tertiary\" onClick={() => setPageSize((prev) => prev + 3)}>\n            Show more ({data.length - pageSize} remaining)\n          </Button>\n        </DataTableFooter>\n      )}\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"name\",\n  header: \"Name\",\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"status\",\n  header: \"Status\",\n  cell: ({ row }) => <Badge>{row.getValue(\"status\")}</Badge>,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"date\",\n  header: ({ column }) => <DataTableColumnHeader column={column} title=\"Date\" />,\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: () => <div className=\"text-right\">Amount</div>,\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" },\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{\n  accessorKey: \"amount\",\n  header: ({ column }) => (\n    <div className=\"flex justify-end\">\n      <DataTableColumnHeader column={column} title=\"Amount\" />\n    </div>\n  ),\n  cell: ({ row }) => (\n    <div className=\"text-right tabular-nums\">\n      {formatCurrency(row.getValue(\"amount\"))}\n    </div>\n  ),\n  meta: { align: \"right\" }, // Ensures proper header padding alignment\n}"
-        }
-      ]
+        "src/components/data-table/data-table-footer.tsx"
+      ],
+      "props": [],
+      "examples": []
+    },
+    {
+      "name": "DataTableHeader",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/data-table/data-table-header.tsx"
+      ],
+      "props": [],
+      "examples": []
     },
     {
       "name": "DataTableLoading",
-      "title": "Advanced",
-      "description": "Virtualization, loading/error states, and composable API.",
-      "docsPath": "docs/content/docs/components/data-table/advanced.mdx",
-      "docSlug": "data-table/advanced",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-loading.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction VirtualizedTable() {\n  const [rowSelection, setRowSelection] = useState({})\n  const largeDataset = useMemo(() => generateLargeData(15000), [])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={largeDataset}\n      enableSorting\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      virtualization={{\n        enabled: true,\n        estimateRowHeight: 48, // Match your row height\n        overscan: 10,          // Render 10 extra rows beyond viewport\n        containerHeight: 600,  // Fixed height required for virtualization\n      }}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "type VirtualizationConfig = {\n  enabled: boolean\n  estimateRowHeight?: number // Default: 48\n  overscan?: number          // Default: 10\n  containerHeight?: number   // Default: 600\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  DataTableHeader,\n  DataTableBody,\n  DataTablePagination,\n  DataTableToolbar,\n} from \"@epilot/volt-ui\"\n\nfunction ComposableTable() {\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableSorting\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableToolbar>\n        <input placeholder=\"Search invoices...\" />\n      </DataTableToolbar>\n\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody />\n      </DataTableContent>\n\n      <DataTablePagination className=\"mt-4\" />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable\n  columns={columns}\n  data={largeDataset}\n  enableSorting\n  virtualization={{ enabled: true, containerHeight: 500 }}\n>\n  <DataTableContent>\n    <DataTableHeader sticky />\n    <DataTableBody emptyState=\"No results found.\" />\n  </DataTableContent>\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableHeader, DataTableBody, DataTableLoading } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { data, isLoading } = useQuery(...)\n\n  return (\n    <DataTable columns={columns} data={data ?? []}>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody\n          isLoading={isLoading}\n          loadingState={<DataTableLoading />}\n          emptyState=\"No invoices found.\"\n        />\n      </DataTableContent>\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTableBody\n  isLoading={isLoading}\n  loadingState={\n    <DataTableLoading>\n      <Spinner size=\"xl\" className=\"text-accent-light\" />\n      <p className=\"mt-4 text-base font-medium\">{t('table.loading')}</p>\n      <p className=\"text-sm text-gray-light\">{t('table.loading.description')}</p>\n    </DataTableLoading>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTableHeader, DataTableBody, DataTableError } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { data, isLoading, isError, refetch } = useQuery(...)\n\n  return (\n    <DataTable columns={columns} data={data ?? []}>\n      <DataTableContent>\n        <DataTableHeader />\n        <DataTableBody\n          isLoading={isLoading}\n          loadingState={<DataTableLoading />}\n          isError={isError}\n          errorState={\n            <DataTableError\n              title=\"Failed to load invoices\"\n              description=\"There was a problem connecting to the server.\"\n              retryLabel=\"Retry\"\n              onRetry={refetch}\n            />\n          }\n          emptyState=\"No invoices found.\"\n        />\n      </DataTableContent>\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTableBody\n  isError={isError}\n  errorState={\n    <DataTableError>\n      <AlertTriangle size={48} className=\"text-error-light\" />\n      <p className=\"mt-2 text-lg font-semibold\">{t('table.error.title')}</p>\n      <p className=\"text-sm text-gray-light\">{t('table.error.description')}</p>\n      <div className=\"flex gap-2 mt-4\">\n        <Button variant=\"secondary\" size=\"sm\" onClick={refetch}>\n          {t('retry')}\n        </Button>\n        <Button variant=\"tertiary\" size=\"sm\">\n          {t('contact_support')}\n        </Button>\n      </div>\n    </DataTableError>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default - borders visible on header and rows\n<DataTable columns={columns} data={data} />\n\n// Hide all borders\n<DataTable\n  columns={columns}\n  data={data}\n  showHeaderBorder={false}\n  showRowBorders={false}\n/>\n\n// Hide only row borders (keep header border)\n<DataTable\n  columns={columns}\n  data={data}\n  showRowBorders={false}\n/>\n\n// Hide only header border (keep row borders)\n<DataTable\n  columns={columns}\n  data={data}\n  showHeaderBorder={false}\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default uses var(--volt-gray-2)\n<DataTableHeader sticky />\n\n// Custom background color\n<DataTableHeader sticky stickyBackground=\"white\" />\n\n// Use a different volt gray\n<DataTableHeader sticky stickyBackground=\"var(--volt-gray-1)\" />\n\n// Custom CSS variable\n<DataTableHeader sticky stickyBackground=\"var(--my-header-bg)\" />"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTablePagination",
-      "title": "Pagination",
-      "description": "Client-side and server-side pagination for DataTable.",
-      "docsPath": "docs/content/docs/components/data-table/pagination.mdx",
-      "docSlug": "data-table/pagination",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-pagination.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DataTablePagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  return (\n    <DataTable\n      columns={columns}\n      data={data} // Full dataset\n      pagination={{ pageSize: 10 }}\n    >\n      <DataTableContent />\n      <DataTablePagination className=\"mt-4\" />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { PaginationState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent, DataTablePagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n\n  // In real app, use TanStack Query or similar\n  const { data, totalItems } = useServerData(pagination)\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data} // Only current page data from server\n      pagination={{\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n        totalItems: totalItems,\n        onPaginationChange: setPagination,\n      }}\n    >\n      <DataTableContent />\n      <DataTablePagination className=\"mt-4\" />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "type PaginationConfig = {\n  pageIndex?: number         // Controlled page index (0-indexed)\n  pageSize?: number          // Default: 10\n  pageSizeOptions?: number[] // Default: [10, 25, 50, 100]\n  totalItems?: number        // Server-side pagination total\n  pageCount?: number         // Server-side pagination page count\n  onPaginationChange?: (state: PaginationState) => void\n}"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableResizeHandle",
@@ -2519,118 +1861,17 @@
     },
     {
       "name": "DataTableToolbar",
-      "title": "Columns & Filtering",
-      "description": "Column visibility, resizing, pinning, and filtering options.",
-      "docsPath": "docs/content/docs/components/data-table/columns.mdx",
-      "docSlug": "data-table/columns",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/data-table/data-table-toolbar.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableToolbar } from \"@epilot/volt-ui\"\nimport { IconSearch } from \"@tabler/icons-react\"\n\nfunction MyTable() {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableGlobalFilter\n      globalFilter={globalFilter}\n      onGlobalFilterChange={setGlobalFilter}\n    >\n      <DataTableToolbar>\n        <div className=\"flex items-center gap-2 rounded-lg border border-gray-a6 px-3 py-1.5\">\n          <IconSearch size={18} />\n          <input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnFiltersState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent, DataTableToolbar, Button } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  // Get current filter values\n  const statusFilter = columnFilters.find((f) => f.id === \"status\")?.value as string | undefined\n  const typeFilter = columnFilters.find((f) => f.id === \"type\")?.value as string | undefined\n\n  // Update status filter\n  const setStatusFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"status\"), { id: \"status\", value }]\n        : prev.filter((f) => f.id !== \"status\")\n    )\n  }\n\n  // Update type filter\n  const setTypeFilter = (value: string | undefined) => {\n    setColumnFilters((prev) =>\n      value\n        ? [...prev.filter((f) => f.id !== \"type\"), { id: \"type\", value }]\n        : prev.filter((f) => f.id !== \"type\")\n    )\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableFiltering\n      columnFilters={columnFilters}\n      onColumnFiltersChange={setColumnFilters}\n    >\n      <DataTableToolbar>\n        <select\n          value={statusFilter ?? \"\"}\n          onChange={(e) => setStatusFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All statuses</option>\n          <option value=\"paid\">Paid</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"overdue\">Overdue</option>\n        </select>\n        <select\n          value={typeFilter ?? \"\"}\n          onChange={(e) => setTypeFilter(e.target.value || undefined)}\n        >\n          <option value=\"\">All types</option>\n          <option value=\"credit\">Credit</option>\n          <option value=\"debit\">Debit</option>\n        </select>\n        {columnFilters.length > 0 && (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => setColumnFilters([])}>\n            Clear filters\n          </Button>\n        )}\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnVisibility,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  return (\n    <DataTable columns={columns} data={data} enableSorting>\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        {/* Use -mr-1 wrapper to align icon with toolbar edge (compensates for button hover padding) */}\n        <div className=\"-mr-1\">\n          <DataTableColumnVisibility label=\"Toggle columns\" />\n        </div>\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    enableHiding: false, // This column won't appear in the visibility dropdown\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    // enableHiding defaults to true\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    enableHiding: false, // Actions column should always be visible\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { Button } from \"@epilot/volt-ui\"\n\n<DataTableColumnVisibility\n  label=\"Toggle columns\"\n  trigger={\n    <Button variant=\"tertiary\" size=\"sm\">\n      Columns\n    </Button>\n  }\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Invoice>[] = [\n  // ... other columns\n  {\n    id: \"actions\",\n    cell: ({ row }) => <ActionsMenu row={row} />,\n    meta: {\n      visibilityLabel: \"Actions\", // Label shown in visibility dropdown\n    },\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data} enableColumnOrdering>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  DataTableColumnOrder,\n  DataTableColumnVisibility,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableToolbar>\n        <div className=\"flex-1\" />\n        <DataTableColumnOrder label=\"Column order\" />\n        <DataTableColumnVisibility label=\"Toggle columns\" />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "<DataTable columns={columns} data={data}>\n  <DataTableToolbar>\n    <div className=\"flex-1\" />\n    <DataTableColumnOrder label=\"Column order\" />\n  </DataTableToolbar>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "{/* Custom icon */}\n<DataTableColumnOrder label=\"Column order\" icon={<MyIcon />} />\n\n{/* Fully custom trigger */}\n<DataTableColumnOrder label=\"Column order\" trigger={<Button>Reorder</Button>} />"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    meta: { enableOrdering: false }, // Cannot be reordered\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    // Reorderable by default\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import {\n  DataTable,\n  DataTableContent,\n  type ColumnOrderState,\n} from \"@epilot/volt-ui\"\nimport { useLocalStorage } from \"@/hooks/useSessionStorage\"\n\nfunction MyTable() {\n  const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n    \"my-table-column-order\",\n    []\n  )\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableColumnOrdering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"Invoice\",\n    size: 120,      // Initial width\n    minSize: 80,    // Minimum width when resizing\n    maxSize: 200,   // Maximum width when resizing\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Type\",\n    size: 100,\n    enableResizing: false, // Disable resizing for this column\n  },\n  // ...more columns\n]\n\n// Column resizing is enabled by default\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// To disable column resizing:\n<DataTable columns={columns} data={data} disableColumnResizing>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnSizingState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({\n    id: 100,\n    customer: 180,\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const columns: ColumnDef<Data>[] = [\n  {\n    accessorKey: \"id\",\n    header: \"ID\",\n    size: 60,\n    enableResizing: false, // Cannot be resized\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    size: 150,\n    minSize: 100,  // Minimum 100px\n    maxSize: 400,  // Maximum 400px\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    // Uses defaults: minSize=20, maxSize=unlimited\n  },\n]"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "// Default: handles appear on header hover\n<DataTable columns={columns} data={data}>\n  <DataTableContent />\n</DataTable>\n\n// Always show resize handles\n<DataTable columns={columns} data={data} resizeHandleVisibility=\"always\">\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { RowSelectionState } from \"@tanstack/react-table\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      autoPinSelection // Pin checkbox column when rows are selected\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n<DataTable\n  columns={columns}\n  data={data}\n  columnPinning={{ left: [\"id\"], right: [\"actions\"] }}\n>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport type { ColumnPinningState } from \"@epilot/volt-ui\"\nimport { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({\n    left: [\"id\"],\n    right: [],\n  })\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\n// Compact rows (smallest)\n<DataTable columns={columns} data={data} density=\"compact\">\n  <DataTableContent />\n</DataTable>\n\n// Normal rows (default)\n<DataTable columns={columns} data={data} density=\"normal\">\n  <DataTableContent />\n</DataTable>\n\n// Comfortable rows (largest)\n<DataTable columns={columns} data={data} density=\"comfortable\">\n  <DataTableContent />\n</DataTable>"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DataTableVirtualizerContext",
@@ -2777,7 +2018,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { DateRangePicker } from \"@epilot/volt-ui\"\nimport type { DateRange } from \"@epilot/volt-ui\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<DateRange>({\n    start: new Date(),\n    end: null,\n  })\n\n  return (\n    <DateRangePicker\n      label=\"Date Range\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { DateRangePicker } from \"@epilot/volt-ui-react\"\nimport type { DateRange } from \"@epilot/volt-ui-react\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<DateRange>({\n    start: new Date(),\n    end: null,\n  })\n\n  return (\n    <DateRangePicker\n      label=\"Date Range\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
         },
         {
           "language": "tsx",
@@ -2954,43 +2195,99 @@
           "description": "Position the time picker below or beside the calendar."
         }
       ],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { DateTimePicker } from \"@epilot/volt-ui\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<Date>(new Date())\n\n  return (\n    <DateTimePicker\n      label=\"Appointment\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "<DateTimePicker\n  label=\"Future Date Only\"\n  value={value}\n  onChange={setValue}\n  disablePast\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "<DateTimePicker\n  label=\"Date & Time\"\n  value={value}\n  onChange={setValue}\n  error=\"Please select a valid date\"\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "<DateTimePicker\n  label=\"Termin\"\n  value={value}\n  onChange={setValue}\n  locale=\"de\"\n  format=\"dd.MM.yyyy HH:mm\"\n  placeholder=\"tt.mm.jjjj hh:mm\"\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "<DateTimePicker\n  label=\"Select Date\"\n  value={value}\n  onChange={setValue}\n  showTodayButton\n  todayLabel=\"Today\"\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "<DateTimePicker\n  label=\"Side Layout\"\n  value={value}\n  onChange={setValue}\n  timePickerPosition=\"side\"\n/>"
-        },
-        {
-          "language": "tsx",
-          "meta": "lineNumbers",
-          "code": "<DateTimePicker\n  label=\"Side Layout + Today\"\n  value={value}\n  onChange={setValue}\n  timePickerPosition=\"side\"\n  showTodayButton\n  todayLabel=\"Today\"\n/>"
-        }
-      ]
+      "examples": [
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { DateTimePicker } from \"@epilot/volt-ui-react\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<Date>(new Date())\n\n  return (\n    <DateTimePicker\n      label=\"Appointment\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<DateTimePicker\n  label=\"Future Date Only\"\n  value={value}\n  onChange={setValue}\n  disablePast\n/>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<DateTimePicker\n  label=\"Date & Time\"\n  value={value}\n  onChange={setValue}\n  error=\"Please select a valid date\"\n/>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<DateTimePicker\n  label=\"Termin\"\n  value={value}\n  onChange={setValue}\n  locale=\"de\"\n  format=\"dd.MM.yyyy HH:mm\"\n  placeholder=\"tt.mm.jjjj hh:mm\"\n/>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<DateTimePicker\n  label=\"Select Date\"\n  value={value}\n  onChange={setValue}\n  showTodayButton\n  todayLabel=\"Today\"\n/>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<DateTimePicker\n  label=\"Side Layout\"\n  value={value}\n  onChange={setValue}\n  timePickerPosition=\"side\"\n/>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "<DateTimePicker\n  label=\"Side Layout + Today\"\n  value={value}\n  onChange={setValue}\n  timePickerPosition=\"side\"\n  showTodayButton\n  todayLabel=\"Today\"\n/>"
+        }
+      ]
+    },
+    {
+      "name": "DateTimePickerInput",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/date-time-picker/date-time-picker.tsx"
+      ],
+      "props": [],
+      "examples": []
+    },
+    {
+      "name": "DateTimePickerPanel",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/date-time-picker/date-time-picker.tsx"
+      ],
+      "props": [],
+      "examples": []
+    },
+    {
+      "name": "DateTimePickerPopover",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/date-time-picker/date-time-picker.tsx"
+      ],
+      "props": [],
+      "examples": []
+    },
+    {
+      "name": "DateTimePickerRoot",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/date-time-picker/date-time-picker.tsx"
+      ],
+      "props": [],
+      "examples": []
     },
     {
       "name": "Dialog",
@@ -3033,7 +2330,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
+          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
         }
       ]
     },
@@ -3130,7 +2427,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
+          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
         }
       ]
     },
@@ -3163,7 +2460,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
+          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
         }
       ]
     },
@@ -3204,7 +2501,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
+          "code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open</Button>\n    </DialogTrigger>\n    <DialogPortal container={document.getElementById(\"root\")}>\n      <DialogOverlay />\n      <DialogContent size=\"2xl\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you&apos;re\n            done.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"flex flex-col gap-4 w-full\">\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Full Name</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"text\" placeholder=\"John Doe\" />\n          </div>\n          <div className=\"flex gap-4\">\n            <Label className=\"w-1/4\">Email</Label>\n            <input className=\"w-full border rounded-lg p-2\" type=\"email\" placeholder=\"john.doe@example.com\" />\n          </div>\n        </form>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"secondary\">Cancel</Button>\n          </DialogClose>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </DialogPortal>\n  </Dialog>\n</div>"
         }
       ]
     },
@@ -3249,7 +2546,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
+          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui-react\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
         },
         {
           "language": "tsx",
@@ -3351,7 +2648,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
+          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui-react\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
         },
         {
           "language": "tsx",
@@ -3389,7 +2686,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
+          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui-react\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
         },
         {
           "language": "tsx",
@@ -3435,7 +2732,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
+          "code": "import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from \"@epilot/volt-ui-react\"\n\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button variant=\"primary\">Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerPortal container={document.getElementById(\"root\")}>\n    <DrawerOverlay />\n    <DrawerContent className=\"w-96\">\n      <DrawerHeader>\n        <DrawerTitle>Details</DrawerTitle>\n        <DrawerDescription>\n          View and edit the details below.\n        </DrawerDescription>\n      </DrawerHeader>\n      <div className=\"flex flex-col gap-4 flex-1 overflow-auto\">\n        <p>Drawer content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"secondary\">Close</Button>\n        </DrawerClose>\n        <Button>Save</Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </DrawerPortal>\n</Drawer>"
         },
         {
           "language": "tsx",
@@ -3446,53 +2743,17 @@
     },
     {
       "name": "DropdownMenu",
-      "title": "Selection & Actions",
-      "description": "Row selection, bulk actions, row actions, and clickable rows.",
-      "docsPath": "docs/content/docs/components/data-table/selection.mdx",
-      "docSlug": "data-table/selection",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/dropdown-menu/dropdown-menu.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableFooter } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    >\n      <DataTableContent />\n      <DataTableFooter>\n        <span className=\"text-sm text-gray-light\">\n          {Object.keys(rowSelection).length} of {data.length} row(s) selected\n        </span>\n      </DataTableFooter>\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useDataTable, Button } from \"@epilot/volt-ui\"\n\nfunction BulkActions() {\n  const { table } = useDataTable()\n\n  // Get selected rows as Row<TData>[]\n  const selectedRows = table.getSelectedRowModel().rows\n\n  // Get the actual data from selected rows\n  const selectedData = selectedRows.map(row => row.original)\n\n  const handleBulkDelete = () => {\n    // selectedData contains the full row objects\n    console.log('Deleting:', selectedData)\n    deleteItems(selectedData.map(item => item.id))\n  }\n\n  if (selectedRows.length === 0) return null\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span>{selectedRows.length} selected</span>\n      <Button variant=\"secondary\" size=\"sm\" onClick={handleBulkDelete} destructive>\n        Delete selected\n      </Button>\n    </div>\n  )\n}\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    >\n      <DataTableToolbar>\n        <BulkActions />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport { DataTable, DataTableContent, Button, getSelectedRowData } from \"@epilot/volt-ui\"\n\nfunction MyPage() {\n  const [rowSelection, setRowSelection] = useState({})\n\n  // Use helper to get selected data\n  const selectedData = useMemo(\n    () => getSelectedRowData(rowSelection, data),\n    [rowSelection, data]\n  )\n\n  const handleBulkDelete = () => {\n    console.log('Deleting:', selectedData)\n    // Call your API, update state, etc.\n  }\n\n  return (\n    <div>\n      {/* Actions outside the table */}\n      <div className=\"mb-4 flex items-center gap-2\">\n        <span>{selectedData.length} selected</span>\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          onClick={handleBulkDelete}\n          disabled={selectedData.length === 0}\n          destructive\n        >\n          Delete selected\n        </Button>\n      </div>\n\n      <DataTable\n        columns={columns}\n        data={data}\n        enableRowSelection\n        rowSelection={rowSelection}\n        onRowSelectionChange={setRowSelection}\n        getRowId={(row) => row.id}\n      >\n        <DataTableContent />\n      </DataTable>\n    </div>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const selectedData = useMemo(() => {\n  const selectedIds = Object.keys(rowSelection).filter(id => rowSelection[id])\n  return data.filter(item => selectedIds.includes(item.id))\n}, [rowSelection, data])"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Button } from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconEye, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columnsWithActions: ColumnDef<Invoice>[] = [\n  { accessorKey: \"id\", header: \"Invoice\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"customer\", header: \"Customer\" },\n  {\n    id: \"actions\",\n    header: () => <span className=\"sr-only\">Actions</span>,\n    cell: ({ row }) => {\n      const invoice = row.original\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical size={16} />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye size={16} />\n              View details\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil size={16} />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(invoice.id)}>\n              <IconCopy size={16} />\n              Copy ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash size={16} />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n    size: 48,\n  },\n]\n\n<DataTable columns={columnsWithActions} data={data} enableSorting>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const handleRowClick = (row) => {\n    // Navigate to detail page or open modal\n    router.push(`/invoice/${row.original.id}`)\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      onRowClick={handleRowClick}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { getSelectedRowData } from \"@epilot/volt-ui\"\n\nconst selectedData = useMemo(\n  () => getSelectedRowData(rowSelection, data),\n  [rowSelection, data]\n)"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DropdownMenuCheckboxItem",
@@ -3523,7 +2784,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3554,13 +2815,19 @@
           "type": "number",
           "default": "`4`",
           "description": "Distance from trigger element."
+        },
+        {
+          "name": "`container`",
+          "type": "HTMLElement | null",
+          "default": "`document.body`",
+          "description": "The DOM element to portal the content into. Pass `null` to disable portaling."
         }
       ],
       "examples": [
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3617,7 +2884,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3654,7 +2921,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3711,7 +2978,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3748,7 +3015,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3764,53 +3031,17 @@
     },
     {
       "name": "DropdownMenuSeparator",
-      "title": "Selection & Actions",
-      "description": "Row selection, bulk actions, row actions, and clickable rows.",
-      "docsPath": "docs/content/docs/components/data-table/selection.mdx",
-      "docSlug": "data-table/selection",
+      "title": null,
+      "description": null,
+      "docsPath": null,
+      "docSlug": null,
       "documentationUrl": null,
       "apiReferenceUrl": null,
       "sourcePaths": [
         "src/components/dropdown-menu/dropdown-menu.tsx"
       ],
       "props": [],
-      "examples": [
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState } from \"react\"\nimport { DataTable, DataTableContent, DataTableFooter } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    >\n      <DataTableContent />\n      <DataTableFooter>\n        <span className=\"text-sm text-gray-light\">\n          {Object.keys(rowSelection).length} of {data.length} row(s) selected\n        </span>\n      </DataTableFooter>\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useDataTable, Button } from \"@epilot/volt-ui\"\n\nfunction BulkActions() {\n  const { table } = useDataTable()\n\n  // Get selected rows as Row<TData>[]\n  const selectedRows = table.getSelectedRowModel().rows\n\n  // Get the actual data from selected rows\n  const selectedData = selectedRows.map(row => row.original)\n\n  const handleBulkDelete = () => {\n    // selectedData contains the full row objects\n    console.log('Deleting:', selectedData)\n    deleteItems(selectedData.map(item => item.id))\n  }\n\n  if (selectedRows.length === 0) return null\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span>{selectedRows.length} selected</span>\n      <Button variant=\"secondary\" size=\"sm\" onClick={handleBulkDelete} destructive>\n        Delete selected\n      </Button>\n    </div>\n  )\n}\n\nfunction MyTable() {\n  const [rowSelection, setRowSelection] = useState({})\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      enableRowSelection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    >\n      <DataTableToolbar>\n        <BulkActions />\n      </DataTableToolbar>\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { useState, useMemo } from \"react\"\nimport { DataTable, DataTableContent, Button, getSelectedRowData } from \"@epilot/volt-ui\"\n\nfunction MyPage() {\n  const [rowSelection, setRowSelection] = useState({})\n\n  // Use helper to get selected data\n  const selectedData = useMemo(\n    () => getSelectedRowData(rowSelection, data),\n    [rowSelection, data]\n  )\n\n  const handleBulkDelete = () => {\n    console.log('Deleting:', selectedData)\n    // Call your API, update state, etc.\n  }\n\n  return (\n    <div>\n      {/* Actions outside the table */}\n      <div className=\"mb-4 flex items-center gap-2\">\n        <span>{selectedData.length} selected</span>\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          onClick={handleBulkDelete}\n          disabled={selectedData.length === 0}\n          destructive\n        >\n          Delete selected\n        </Button>\n      </div>\n\n      <DataTable\n        columns={columns}\n        data={data}\n        enableRowSelection\n        rowSelection={rowSelection}\n        onRowSelectionChange={setRowSelection}\n        getRowId={(row) => row.id}\n      >\n        <DataTableContent />\n      </DataTable>\n    </div>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "const selectedData = useMemo(() => {\n  const selectedIds = Object.keys(rowSelection).filter(id => rowSelection[id])\n  return data.filter(item => selectedIds.includes(item.id))\n}, [rowSelection, data])"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Button } from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconEye, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\nimport type { ColumnDef } from \"@tanstack/react-table\"\n\nconst columnsWithActions: ColumnDef<Invoice>[] = [\n  { accessorKey: \"id\", header: \"Invoice\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"customer\", header: \"Customer\" },\n  {\n    id: \"actions\",\n    header: () => <span className=\"sr-only\">Actions</span>,\n    cell: ({ row }) => {\n      const invoice = row.original\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical size={16} />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye size={16} />\n              View details\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil size={16} />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(invoice.id)}>\n              <IconCopy size={16} />\n              Copy ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash size={16} />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n    size: 48,\n  },\n]\n\n<DataTable columns={columnsWithActions} data={data} enableSorting>\n  <DataTableContent />\n</DataTable>"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { DataTable, DataTableContent } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const handleRowClick = (row) => {\n    // Navigate to detail page or open modal\n    router.push(`/invoice/${row.original.id}`)\n  }\n\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      onRowClick={handleRowClick}\n    >\n      <DataTableContent />\n    </DataTable>\n  )\n}"
-        },
-        {
-          "language": "tsx",
-          "meta": null,
-          "code": "import { getSelectedRowData } from \"@epilot/volt-ui\"\n\nconst selectedData = useMemo(\n  () => getSelectedRowData(rowSelection, data),\n  [rowSelection, data]\n)"
-        }
-      ]
+      "examples": []
     },
     {
       "name": "DropdownMenuShortcut",
@@ -3891,7 +3122,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "import {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuLabel,\n  DropdownMenuShortcut,\n  Button,\n} from \"@epilot/volt-ui-react\"\nimport { IconDotsVertical, IconPencil, IconCopy, IconTrash } from \"@tabler/icons-react\"\n\n<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"tertiary\" size=\"icon-sm\">\n      <IconDotsVertical />\n    </Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <IconPencil />\n      Edit\n      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <IconCopy />\n      Duplicate\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem destructive>\n      <IconTrash />\n      Delete\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
         },
         {
           "language": "tsx",
@@ -3934,17 +3165,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -3989,7 +3220,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4062,7 +3293,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4095,7 +3326,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4128,7 +3359,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4161,7 +3392,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4206,7 +3437,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4251,7 +3482,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4278,7 +3509,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4305,7 +3536,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4338,7 +3569,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4365,7 +3596,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4392,7 +3623,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4431,7 +3662,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4470,7 +3701,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Items</FieldLabel>\n  <FieldCombobox>\n    <FieldComboboxTrigger>\n      <FieldComboboxValue placeholder=\"Select an item\">\n        {value.label}\n      </FieldComboboxValue>\n    </FieldComboboxTrigger>\n    <FieldComboboxContent className=\"max-h-56\">\n      <FieldComboboxInput placeholder=\"Search items\" />\n      <FieldComboboxLoading>\n        <Spinner />\n      </FieldComboboxLoading>\n      <FieldComboboxList>\n        <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n        <FieldComboboxGroup>\n          <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n          <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n          <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n          <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n        </FieldComboboxGroup>\n        \n      </FieldComboboxList>\n    </FieldComboboxContent>\n  </FieldCombobox>\n</Field>"
         }
       ]
     },
@@ -4503,17 +3734,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -4552,17 +3783,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -4601,17 +3832,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -4650,17 +3881,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -4725,12 +3956,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n  <FieldGroup>\n    <Field variant=\"destructive\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Password</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"password\" placeholder=\"********\" />\n      <FieldError>Password is required</FieldError>\n    </Field>\n  </FieldGroup>\n</FieldSet>"
+          "code": "import { Field, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n  <FieldGroup>\n    <Field variant=\"destructive\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Password</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"password\" placeholder=\"********\" />\n      <FieldError>Password is required</FieldError>\n    </Field>\n  </FieldGroup>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         }
       ]
     },
@@ -4783,17 +4014,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -4840,17 +4071,17 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
+          "code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldSet className=\"flex flex-col w-96\">\n  <FieldGroup>\n    <Field variant=\"highlight\">\n      <div className=\"flex items-center gap-2\">\n        <FieldLabel>Email address</FieldLabel>\n        <FieldLabelContent>...</FieldLabelContent>\n      </div>\n      <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n    </Field>\n  </FieldGroup>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Your message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n</FieldSet>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Website</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n      <FieldInput type=\"text\" placeholder=\"example.com\" />\n    </FieldInputGroup>\n  </Field>\n\n  <Field variant=\"highlight\">\n    <FieldLabel>Price</FieldLabel>\n    <FieldInputGroup>\n      <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n      <FieldInput placeholder=\"10.00\" />\n    </FieldInputGroup>\n  </Field>\n</FieldGroup>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
+          "code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui-react\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n  <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n  <FieldError>Email address is required</FieldError>\n</Field>"
         }
       ]
     },
@@ -4907,7 +4138,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Field, FieldLabel, FieldDescription, FieldTextarea } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n  <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n</FieldGroup>"
+          "code": "import { Field, FieldLabel, FieldDescription, FieldTextarea } from \"@epilot/volt-ui-react\"\n\n<FieldGroup>\n  <Field variant=\"highlight\">\n    <FieldLabel>Message</FieldLabel>\n    <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n  </Field>\n  <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n</FieldGroup>"
         }
       ]
     },
@@ -4952,7 +4183,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Label } from \"@epilot/volt-ui\"\n\n<Label size=\"sm\">Email address</Label>\n<Label size=\"base\">Email address</Label>\n<Label size=\"lg\">Email address</Label>"
+          "code": "import { Label } from \"@epilot/volt-ui-react\"\n\n<Label size=\"sm\">Email address</Label>\n<Label size=\"base\">Email address</Label>\n<Label size=\"lg\">Email address</Label>"
         }
       ]
     },
@@ -5009,7 +4240,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Pill } from \"@epilot/volt-ui\"\n\n<Pill color=\"accent\" style=\"solid\">Accent</Pill>\n<Pill color=\"success\" style=\"surface\">Success</Pill>\n<Pill color=\"warning\" style=\"soft\">Warning</Pill>\n<Pill color=\"error\" style=\"solid\">Error</Pill>"
+          "code": "import { Pill } from \"@epilot/volt-ui-react\"\n\n<Pill color=\"accent\" style=\"solid\">Accent</Pill>\n<Pill color=\"success\" style=\"surface\">Success</Pill>\n<Pill color=\"warning\" style=\"soft\">Warning</Pill>\n<Pill color=\"error\" style=\"solid\">Error</Pill>"
         },
         {
           "language": "tsx",
@@ -5039,7 +4270,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Pill, Badge } from \"@epilot/volt-ui\"\n\n<Pill color=\"blue\" style=\"solid\">\n  Label <Badge size=\"sm\" color=\"blue\" style=\"solid\">3</Badge>\n</Pill>"
+          "code": "import { Pill, Badge } from \"@epilot/volt-ui-react\"\n\n<Pill color=\"blue\" style=\"solid\">\n  Label <Badge size=\"sm\" color=\"blue\" style=\"solid\">3</Badge>\n</Pill>"
         },
         {
           "language": "tsx",
@@ -5089,7 +4320,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
+          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
         }
       ]
     },
@@ -5116,7 +4347,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
+          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
         }
       ]
     },
@@ -5156,6 +4387,12 @@
           "default": "`0`",
           "description": "An offset in pixels from the \"start\" or \"end\" alignment options."
         },
+        {
+          "name": "`flush`",
+          "type": "boolean",
+          "default": "`false`",
+          "description": "When true, removes the default padding from the popover content."
+        },
         {
           "name": "`className`",
           "type": "string",
@@ -5167,7 +4404,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
+          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
         }
       ]
     },
@@ -5206,7 +4443,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
+          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
         }
       ]
     },
@@ -5233,7 +4470,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
+          "code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button>Edit Profile</Button>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent>\n        Content\n      </PopoverContent>\n    </PopoverPortal>\n  </Popover>\n</div>"
         }
       ]
     },
@@ -5296,7 +4533,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { RadioGroup, RadioGroupItem, Label } from \"@epilot/volt-ui\"\n\n<RadioGroup defaultValue=\"daily\">\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"daily\" id=\"daily\" />\n    <Label htmlFor=\"daily\">Daily</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"weekly\" id=\"weekly\" />\n    <Label htmlFor=\"weekly\">Weekly</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n    <Label htmlFor=\"monthly\">Monthly</Label>\n  </div>\n</RadioGroup>"
+          "code": "import { RadioGroup, RadioGroupItem, Label } from \"@epilot/volt-ui-react\"\n\n<RadioGroup defaultValue=\"daily\">\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"daily\" id=\"daily\" />\n    <Label htmlFor=\"daily\">Daily</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"weekly\" id=\"weekly\" />\n    <Label htmlFor=\"weekly\">Weekly</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n    <Label htmlFor=\"monthly\">Monthly</Label>\n  </div>\n</RadioGroup>"
         }
       ]
     },
@@ -5347,7 +4584,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { RadioGroup, RadioGroupItem, Label } from \"@epilot/volt-ui\"\n\n<RadioGroup defaultValue=\"daily\">\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"daily\" id=\"daily\" />\n    <Label htmlFor=\"daily\">Daily</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"weekly\" id=\"weekly\" />\n    <Label htmlFor=\"weekly\">Weekly</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n    <Label htmlFor=\"monthly\">Monthly</Label>\n  </div>\n</RadioGroup>"
+          "code": "import { RadioGroup, RadioGroupItem, Label } from \"@epilot/volt-ui-react\"\n\n<RadioGroup defaultValue=\"daily\">\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"daily\" id=\"daily\" />\n    <Label htmlFor=\"daily\">Daily</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"weekly\" id=\"weekly\" />\n    <Label htmlFor=\"weekly\">Weekly</Label>\n  </div>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n    <Label htmlFor=\"monthly\">Monthly</Label>\n  </div>\n</RadioGroup>"
         }
       ]
     },
@@ -5416,7 +4653,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { DateRangePicker } from \"@epilot/volt-ui\"\nimport type { DateRange } from \"@epilot/volt-ui\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<DateRange>({\n    start: new Date(),\n    end: null,\n  })\n\n  return (\n    <DateRangePicker\n      label=\"Date Range\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { DateRangePicker } from \"@epilot/volt-ui-react\"\nimport type { DateRange } from \"@epilot/volt-ui-react\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<DateRange>({\n    start: new Date(),\n    end: null,\n  })\n\n  return (\n    <DateRangePicker\n      label=\"Date Range\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
         },
         {
           "language": "tsx",
@@ -5430,6 +4667,144 @@
         }
       ]
     },
+    {
+      "name": "SegmentedControl",
+      "title": "Segmented Control",
+      "description": "Toggle buttons for switching between different values or views.",
+      "docsPath": "docs/content/docs/components/segmented-control.mdx",
+      "docSlug": "segmented-control",
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/segmented-control/segmented-control.tsx"
+      ],
+      "props": [
+        {
+          "name": "`value`",
+          "type": "string",
+          "default": "—",
+          "description": "The controlled selected value."
+        },
+        {
+          "name": "`defaultValue`",
+          "type": "string",
+          "default": "—",
+          "description": "The default selected value for uncontrolled usage."
+        },
+        {
+          "name": "`onValueChange`",
+          "type": "(value: string) => void",
+          "default": "—",
+          "description": "Callback fired when the selected value changes."
+        },
+        {
+          "name": "`layout`",
+          "type": "\"hug\" | \"equal\" | \"stretch\"",
+          "default": "`\"hug\"`",
+          "description": "`\"hug\"` — each item is its natural width. `\"equal\"` — all items match the widest. `\"stretch\"` — items fill the container."
+        },
+        {
+          "name": "`orientation`",
+          "type": "\"horizontal\" | \"vertical\"",
+          "default": "`\"horizontal\"`",
+          "description": "The axis along which items are arranged."
+        },
+        {
+          "name": "`className`",
+          "type": "string",
+          "default": "—",
+          "description": "Additional CSS classes."
+        }
+      ],
+      "examples": [
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\n\nconst [view, setView] = useState(\"week\")\n\n<SegmentedControl value={view} onValueChange={setView} layout=\"stretch\">\n  <SegmentedControlItem value=\"day\">Day</SegmentedControlItem>\n  <SegmentedControlItem value=\"week\">Week</SegmentedControlItem>\n  <SegmentedControlItem value=\"month\">Month</SegmentedControlItem>\n</SegmentedControl>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\nimport { IconLayoutGrid, IconLayoutList, IconMap } from \"@tabler/icons-react\"\n\nconst [view, setView] = useState(\"grid\")\n\n<SegmentedControl value={view} onValueChange={setView} layout=\"equal\">\n  <SegmentedControlItem value=\"grid\" icon={<IconLayoutGrid />}>Grid</SegmentedControlItem>\n  <SegmentedControlItem value=\"list\" icon={<IconLayoutList />}>List</SegmentedControlItem>\n  <SegmentedControlItem value=\"map\" icon={<IconMap />}>Map</SegmentedControlItem>\n</SegmentedControl>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\nimport { IconAlignLeft, IconAlignCenter, IconAlignRight } from \"@tabler/icons-react\"\n\nconst [align, setAlign] = useState(\"left\")\n\n<SegmentedControl value={align} onValueChange={setAlign}>\n  <SegmentedControlItem value=\"left\" icon={<IconAlignLeft />} aria-label=\"Align left\" />\n  <SegmentedControlItem value=\"center\" icon={<IconAlignCenter />} aria-label=\"Align center\" />\n  <SegmentedControlItem value=\"right\" icon={<IconAlignRight />} aria-label=\"Align right\" />\n</SegmentedControl>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\n\nconst [view, setView] = useState(\"day\")\n\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value=\"day\">Day</SegmentedControlItem>\n  <SegmentedControlItem value=\"week\">Week</SegmentedControlItem>\n  <SegmentedControlItem value=\"month\" disabled>Month</SegmentedControlItem>\n</SegmentedControl>"
+        }
+      ]
+    },
+    {
+      "name": "SegmentedControlItem",
+      "title": "Segmented Control",
+      "description": "Toggle buttons for switching between different values or views.",
+      "docsPath": "docs/content/docs/components/segmented-control.mdx",
+      "docSlug": "segmented-control",
+      "documentationUrl": null,
+      "apiReferenceUrl": null,
+      "sourcePaths": [
+        "src/components/segmented-control/segmented-control.tsx"
+      ],
+      "props": [
+        {
+          "name": "`value`",
+          "type": "string",
+          "default": "—",
+          "description": "**Required.** The value this item represents."
+        },
+        {
+          "name": "`icon`",
+          "type": "ReactNode",
+          "default": "—",
+          "description": "An icon displayed before the label."
+        },
+        {
+          "name": "`disabled`",
+          "type": "boolean",
+          "default": "`false`",
+          "description": "Prevents interaction and dims the item."
+        },
+        {
+          "name": "`aria-label`",
+          "type": "string",
+          "default": "—",
+          "description": "Accessible label. Required when the item has no visible text (icon-only)."
+        },
+        {
+          "name": "`className`",
+          "type": "string",
+          "default": "—",
+          "description": "Additional CSS classes."
+        }
+      ],
+      "examples": [
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\n\nconst [view, setView] = useState(\"week\")\n\n<SegmentedControl value={view} onValueChange={setView} layout=\"stretch\">\n  <SegmentedControlItem value=\"day\">Day</SegmentedControlItem>\n  <SegmentedControlItem value=\"week\">Week</SegmentedControlItem>\n  <SegmentedControlItem value=\"month\">Month</SegmentedControlItem>\n</SegmentedControl>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\nimport { IconLayoutGrid, IconLayoutList, IconMap } from \"@tabler/icons-react\"\n\nconst [view, setView] = useState(\"grid\")\n\n<SegmentedControl value={view} onValueChange={setView} layout=\"equal\">\n  <SegmentedControlItem value=\"grid\" icon={<IconLayoutGrid />}>Grid</SegmentedControlItem>\n  <SegmentedControlItem value=\"list\" icon={<IconLayoutList />}>List</SegmentedControlItem>\n  <SegmentedControlItem value=\"map\" icon={<IconMap />}>Map</SegmentedControlItem>\n</SegmentedControl>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\nimport { IconAlignLeft, IconAlignCenter, IconAlignRight } from \"@tabler/icons-react\"\n\nconst [align, setAlign] = useState(\"left\")\n\n<SegmentedControl value={align} onValueChange={setAlign}>\n  <SegmentedControlItem value=\"left\" icon={<IconAlignLeft />} aria-label=\"Align left\" />\n  <SegmentedControlItem value=\"center\" icon={<IconAlignCenter />} aria-label=\"Align center\" />\n  <SegmentedControlItem value=\"right\" icon={<IconAlignRight />} aria-label=\"Align right\" />\n</SegmentedControl>"
+        },
+        {
+          "language": "tsx",
+          "meta": "lineNumbers",
+          "code": "import { useState } from \"react\"\nimport { SegmentedControl, SegmentedControlItem } from \"@epilot/volt-ui-react\"\n\nconst [view, setView] = useState(\"day\")\n\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value=\"day\">Day</SegmentedControlItem>\n  <SegmentedControlItem value=\"week\">Week</SegmentedControlItem>\n  <SegmentedControlItem value=\"month\" disabled>Month</SegmentedControlItem>\n</SegmentedControl>"
+        }
+      ]
+    },
     {
       "name": "Select",
       "title": "Field Select",
@@ -5507,7 +4882,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5558,7 +4933,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5585,7 +4960,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5624,7 +4999,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5651,7 +5026,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5706,7 +5081,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5745,7 +5120,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5786,7 +5161,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
+          "code": "import {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n  SelectLabel,\n} from \"@epilot/volt-ui-react\"\n\n<Field variant=\"highlight\">\n  <FieldLabel>Theme</FieldLabel>\n  <Select>\n    <SelectTrigger>\n      <SelectValue placeholder=\"Select a theme\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Themes</SelectLabel>\n        <SelectItem value=\"system\">System</SelectItem>\n        <SelectItem value=\"light\">Light</SelectItem>\n        <SelectItem value=\"dark\">Dark</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</Field>"
         }
       ]
     },
@@ -5825,7 +5200,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Separator } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n  <div>Content above</div>\n  <Separator />\n  <div>Content below</div>\n</div>"
+          "code": "import { Separator } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex flex-col gap-4\">\n  <div>Content above</div>\n  <Separator />\n  <div>Content below</div>\n</div>"
         }
       ]
     },
@@ -5864,7 +5239,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Spinner } from \"@epilot/volt-ui\"\n\n<Spinner variant=\"line\" />\n<Spinner variant=\"circle\" />"
+          "code": "import { Spinner } from \"@epilot/volt-ui-react\"\n\n<Spinner variant=\"line\" />\n<Spinner variant=\"circle\" />"
         }
       ]
     },
@@ -5939,12 +5314,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Switch, Label } from \"@epilot/volt-ui\"\n\n<div className=\"flex items-center gap-2\">\n  <Switch id=\"notifications\" />\n  <Label htmlFor=\"notifications\">Enable notifications</Label>\n</div>"
+          "code": "import { Switch, Label } from \"@epilot/volt-ui-react\"\n\n<div className=\"flex items-center gap-2\">\n  <Switch id=\"notifications\" />\n  <Label htmlFor=\"notifications\">Enable notifications</Label>\n</div>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Switch, Label } from \"@epilot/volt-ui\"\n\n<Switch variant=\"primary\" size=\"sm\" />\n<Switch variant=\"primary\" size=\"base\" />\n<Switch variant=\"primary\" size=\"lg\" />\n\n<Switch variant=\"destructive\" size=\"sm\" />\n<Switch variant=\"destructive\" size=\"base\" />\n<Switch variant=\"destructive\" size=\"lg\" />"
+          "code": "import { Switch, Label } from \"@epilot/volt-ui-react\"\n\n<Switch variant=\"primary\" size=\"sm\" />\n<Switch variant=\"primary\" size=\"base\" />\n<Switch variant=\"primary\" size=\"lg\" />\n\n<Switch variant=\"destructive\" size=\"sm\" />\n<Switch variant=\"destructive\" size=\"base\" />\n<Switch variant=\"destructive\" size=\"lg\" />"
         }
       ]
     },
@@ -5977,7 +5352,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -5987,17 +5362,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6024,7 +5399,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6034,17 +5409,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6077,7 +5452,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6087,17 +5462,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6142,7 +5517,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6152,17 +5527,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6189,7 +5564,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6199,17 +5574,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6254,7 +5629,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6264,17 +5639,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6301,7 +5676,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6311,17 +5686,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6396,7 +5771,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6406,17 +5781,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6443,7 +5818,7 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n} from \"@epilot/volt-ui-react\"\nimport { IconAlertTriangle, IconCircleCheck } from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Type</TableHead>\n      <TableHead>Invoice Number</TableHead>\n      <TableHead>Date</TableHead>\n      <TableHead>Due Date</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>08.10.2025</TableCell>\n      <TableCell>22.10.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>Installment rate</TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>08.09.2025</TableCell>\n      <TableCell>22.09.2025</TableCell>\n      <TableCell align=\"right\" numeric>85,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Payment</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell>10.07.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>45,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>Yearly Invoice</TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>15.06.2025</TableCell>\n      <TableCell>29.06.2025</TableCell>\n      <TableCell align=\"right\" numeric>150,00 €</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"teal\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Refund\n        </Badge>\n      </TableCell>\n      <TableCell>Cashback</TableCell>\n      <TableCell>2024-G-003</TableCell>\n      <TableCell>05.05.2025</TableCell>\n      <TableCell>-</TableCell>\n      <TableCell align=\"right\" numeric>-50,00 €</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
@@ -6453,17 +5828,17 @@
         {
           "language": "tsx",
           "meta": null,
-          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+          "code": "import {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n  Badge,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n} from \"@epilot/volt-ui-react\"\nimport {\n  IconDotsVertical,\n  IconPencil,\n  IconCopy,\n  IconTrash,\n  IconEye,\n  IconAlertTriangle,\n  IconCircleCheck,\n} from \"@tabler/icons-react\"\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Status</TableHead>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Customer</TableHead>\n      <TableHead align=\"right\">Amount</TableHead>\n      <TableHead className=\"w-12\"></TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"red\" style=\"soft\" className=\"!bg-red-100 !text-red-600 !font-semibold\">\n          <IconAlertTriangle size={14} />\n          Delayed\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-10</TableCell>\n      <TableCell>John Doe</TableCell>\n      <TableCell align=\"right\" numeric>85.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-A-09</TableCell>\n      <TableCell>Jane Smith</TableCell>\n      <TableCell align=\"right\" numeric>45.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <Badge color=\"green\" style=\"soft\" className=\"!font-semibold\">\n          <IconCircleCheck size={14} />\n          Paid\n        </Badge>\n      </TableCell>\n      <TableCell>2024-J-001</TableCell>\n      <TableCell>Bob Wilson</TableCell>\n      <TableCell align=\"right\" numeric>150.00 €</TableCell>\n      <TableCell>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"tertiary\" size=\"icon-sm\">\n              <IconDotsVertical />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconEye />\n              View\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPencil />\n              Edit\n              <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCopy />\n              Duplicate\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem destructive>\n              <IconTrash />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
+          "code": "import { Table, TablePagination, useClientPagination } from \"@epilot/volt-ui-react\"\n\nfunction MyTable() {\n  const { pageData, paginationProps } = useClientPagination({\n    data: allItems,        // Your full data array\n    initialPageSize: 10,   // Optional, default 10\n  })\n\n  return (\n    <div>\n      <Table>\n        {pageData.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination {...paginationProps} />\n    </div>\n  )\n}"
         },
         {
           "language": "tsx",
           "meta": null,
-          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { Table, TablePagination } from \"@epilot/volt-ui-react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\nfunction MyTable() {\n  const [page, setPage] = useState(1)\n  const [pageSize, setPageSize] = useState(10)\n\n  // Convert page to offset for API\n  const from = (page - 1) * pageSize\n\n  const { data } = useQuery({\n    queryKey: [\"items\", from, pageSize],\n    queryFn: () => fetchItems({ from, size: pageSize }),\n  })\n\n  return (\n    <div>\n      <Table>\n        {data?.results.map(item => (\n          <TableRow key={item.id}>...</TableRow>\n        ))}\n      </Table>\n      <TablePagination\n        page={page}\n        totalItems={data?.hits ?? 0}\n        pageSize={pageSize}\n        onPageChange={setPage}\n        onPageSizeChange={(size) => {\n          setPageSize(size)\n          setPage(1)\n        }}\n      />\n    </div>\n  )\n}"
         }
       ]
     },
@@ -6520,12 +5895,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui-react\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\" variant=\"destructive\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui-react\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\" >Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         }
       ]
     },
@@ -6558,12 +5933,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui-react\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\" variant=\"destructive\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui-react\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\" >Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         }
       ]
     },
@@ -6596,12 +5971,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui-react\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\" variant=\"destructive\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui-react\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\" >Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         }
       ]
     },
@@ -6623,6 +5998,12 @@
           "default": "-",
           "description": "A unique value that associates the trigger with a content panel."
         },
+        {
+          "name": "`variant`",
+          "type": "`\"default\"` | `\"destructive\"`",
+          "default": "`\"default\"`",
+          "description": "The visual variant of the trigger. Use `\"destructive\"` to indicate a validation error on the tab."
+        },
         {
           "name": "`disabled`",
           "type": "`boolean`",
@@ -6640,12 +6021,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui-react\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n    <TabsTrigger value=\"password\" variant=\"destructive\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
+          "code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui-react\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n  <TabsList>\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\n    <TabsTrigger value=\"password\" >Password</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"account\"></TabsContent>\n  <TabsContent value=\"password\"></TabsContent>\n  <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
         }
       ]
     },
@@ -6684,12 +6065,12 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Text } from \"@epilot/volt-ui\"\n\n<Text variant=\"title3\">Title 3</Text>\n<Text variant=\"body2\">Body text</Text>\n<Text variant=\"body1\">Small emphasized text</Text>"
+          "code": "import { Text } from \"@epilot/volt-ui-react\"\n\n<Text variant=\"title3\">Title 3</Text>\n<Text variant=\"body2\">Body text</Text>\n<Text variant=\"body1\">Small emphasized text</Text>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Text } from \"@epilot/volt-ui\"\n\n<Text asChild variant=\"title1\"><h1>Title 1</h1></Text>\n<Text asChild variant=\"heading1\"><h2>Heading 1</h2></Text>"
+          "code": "import { Text } from \"@epilot/volt-ui-react\"\n\n<Text asChild variant=\"title1\"><h1>Title 1</h1></Text>\n<Text asChild variant=\"heading1\"><h2>Heading 1</h2></Text>"
         },
         {
           "language": "tsx",
@@ -6768,7 +6149,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { useState } from \"react\"\nimport { DateTimePicker } from \"@epilot/volt-ui\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<Date>(new Date())\n\n  return (\n    <DateTimePicker\n      label=\"Appointment\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
+          "code": "import { useState } from \"react\"\nimport { DateTimePicker } from \"@epilot/volt-ui-react\"\n\nconst MyComponent = () => {\n  const [value, setValue] = useState<Date>(new Date())\n\n  return (\n    <DateTimePicker\n      label=\"Appointment\"\n      value={value}\n      onChange={setValue}\n      locale=\"en\"\n    />\n  )\n}"
         },
         {
           "language": "tsx",
@@ -6867,7 +6248,7 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Toaster, toast } from \"@epilot/volt-ui\"\n\n// Add Toaster to your app root\n<Toaster />\n\n// Success toast\ntoast.success(\"Successfully saved!\")\n\n// Info toast\ntoast.info(\"Did you know?\")\n\n// Warning toast\ntoast.warning(\"Please review your changes\")\n\n// Error toast\ntoast.error(\"Something went wrong\")"
+          "code": "import { Toaster, toast } from \"@epilot/volt-ui-react\"\n\n// Add Toaster to your app root\n<Toaster />\n\n// Success toast\ntoast.success(\"Successfully saved!\")\n\n// Info toast\ntoast.info(\"Did you know?\")\n\n// Warning toast\ntoast.warning(\"Please review your changes\")\n\n// Error toast\ntoast.error(\"Something went wrong\")"
         },
         {
           "language": "tsx",
@@ -6939,22 +6320,22 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
         }
       ]
     },
@@ -7011,22 +6392,22 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
         }
       ]
     },
@@ -7059,22 +6440,22 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
         }
       ]
     },
@@ -7101,22 +6482,22 @@
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      content\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"secondary\">Top</Button>\n  </TooltipTrigger>\n  <TooltipContent side=\"top\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button size=\"icon\" destructive><IconAlertTriangle /></Button>\n  </TooltipTrigger>\n  <TooltipContent variant=\"destructive\">\n    content\n  </TooltipContent>\n</Tooltip>"
         },
         {
           "language": "tsx",
           "meta": "lineNumbers",
-          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
+          "code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui-react\"\n\n<Tooltip delayDuration={2000}>\n  <TooltipTrigger asChild>\n    <Button variant=\"tertiary\">Delayed tooltip</Button>\n  </TooltipTrigger>\n  <TooltipContent>\n    <p>This tooltip appears after 2 seconds</p>\n  </TooltipContent>\n</Tooltip>"
         }
       ]
     }
@@ -20879,196 +20260,196 @@
     },
     {
       "name": "--color-accent-1",
-      "value": "var(--volt-blue-1)",
+      "value": "var(--volt-accent-1)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-2",
-      "value": "var(--volt-blue-2)",
+      "value": "var(--volt-accent-2)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-3",
-      "value": "var(--volt-blue-3)",
+      "value": "var(--volt-accent-3)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-4",
-      "value": "var(--volt-blue-4)",
+      "value": "var(--volt-accent-4)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-5",
-      "value": "var(--volt-blue-5)",
+      "value": "var(--volt-accent-5)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-6",
-      "value": "var(--volt-blue-6)",
+      "value": "var(--volt-accent-6)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-7",
-      "value": "var(--volt-blue-7)",
+      "value": "var(--volt-accent-7)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-8",
-      "value": "var(--volt-blue-8)",
+      "value": "var(--volt-accent-8)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-9",
-      "value": "var(--volt-blue-9)",
+      "value": "var(--volt-accent-9)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-10",
-      "value": "var(--volt-blue-10)",
+      "value": "var(--volt-accent-10)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-11",
-      "value": "var(--volt-blue-11)",
+      "value": "var(--volt-accent-11)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-12",
-      "value": "var(--volt-blue-12)",
+      "value": "var(--volt-accent-12)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a1",
-      "value": "var(--volt-blue-a1)",
+      "value": "var(--volt-accent-a1)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a2",
-      "value": "var(--volt-blue-a2)",
+      "value": "var(--volt-accent-a2)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a3",
-      "value": "var(--volt-blue-a3)",
+      "value": "var(--volt-accent-a3)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a4",
-      "value": "var(--volt-blue-a4)",
+      "value": "var(--volt-accent-a4)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a5",
-      "value": "var(--volt-blue-a5)",
+      "value": "var(--volt-accent-a5)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a6",
-      "value": "var(--volt-blue-a6)",
+      "value": "var(--volt-accent-a6)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a7",
-      "value": "var(--volt-blue-a7)",
+      "value": "var(--volt-accent-a7)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a8",
-      "value": "var(--volt-blue-a8)",
+      "value": "var(--volt-accent-a8)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a9",
-      "value": "var(--volt-blue-a9)",
+      "value": "var(--volt-accent-a9)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a10",
-      "value": "var(--volt-blue-a10)",
+      "value": "var(--volt-accent-a10)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a11",
-      "value": "var(--volt-blue-a11)",
+      "value": "var(--volt-accent-a11)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-a12",
-      "value": "var(--volt-blue-a12)",
+      "value": "var(--volt-accent-a12)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-contrast",
-      "value": "var(--volt-blue-contrast)",
+      "value": "var(--volt-accent-contrast)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-surface",
-      "value": "var(--volt-blue-surface)",
+      "value": "var(--volt-accent-surface)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-indicator",
-      "value": "var(--volt-blue-indicator)",
+      "value": "var(--volt-accent-indicator)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"
     },
     {
       "name": "--color-accent-track",
-      "value": "var(--volt-blue-track)",
+      "value": "var(--volt-accent-track)",
       "theme": "global",
       "group": "utility",
       "sourcePath": "src/styles/color-utilities.css"