@kopexa/theme 1.5.8 → 1.6.0

package/dist/index.css

@@ -4,19 +4,19 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-	--background: oklch(0.9851 0 0);
+	--background: var(--color-white);
 	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
+	--card: var(--color-white);
 	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
+	--popover: var(--color-white);
 	--popover-foreground: oklch(0.145 0 0);
-	--primary: var(--color-primary-800);
+	--primary: var(--color-primary-600);
 	--primary-foreground: var(--color-white);
 	--secondary: var(--color-default-200);
 	--secondary-foreground: oklch(0.205 0 0);
 	--muted: var(--color-default-100);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: var(--color-default-100);
+	--muted-foreground: var(--color-default-600);
+	--accent: var(--color-primary-50);
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: var(--color-destructive-600);
 	--destructive-foreground: var(--color-white);
@@ -35,10 +35,10 @@
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
 	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar: var(--color-primary-900);
+	--sidebar-foreground: var(--color-white);
 	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-primary-foreground:  var(--color-white);
 	--sidebar-accent:var(--color-default-200);
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: var(--color-default-200);
@@ -46,7 +46,7 @@
 }
 
 .dark {
-	--background: var(--color-primary-950);
+	--background: var(--color-primary-900);
 	--foreground: var(--color-white);
 	--card: var(--color-primary-900);
 	--card-foreground: oklch(0.985 0 0);
@@ -76,7 +76,7 @@
 	--chart-3: oklch(0.769 0.188 70.08);
 	--chart-4: oklch(0.627 0.265 303.9);
 	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
+	--sidebar: var(--color-primary-950);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
@@ -87,6 +87,18 @@
 }
 
 @theme {
+    --color-desert-storm-50: oklch(0.9831 0.0034 67.78);
+    --color-desert-storm-100: oklch(0.9406 0.0121 67.68);
+    --color-desert-storm-200: oklch(0.8755 0.0243 63.46);
+    --color-desert-storm-300: oklch(0.7943 0.04 63.4);
+    --color-desert-storm-400: oklch(0.6986 0.0578 54.9);
+    --color-desert-storm-500: oklch(0.6309 0.0714 50.37);
+    --color-desert-storm-600: oklch(0.5785 0.0752 42.41);
+    --color-desert-storm-700: oklch(0.5036 0.0654 37.66);
+    --color-desert-storm-800: oklch(0.4408 0.0533 34.25);
+    --color-desert-storm-900: oklch(0.3873 0.043 34.09);
+    --color-desert-storm-950: oklch(0.2556 0.0275 30.23);
+
     --color-primary-50: oklch(96.58% 0.016 262.77);
     --color-primary-100: oklch(92.21% 0.037 262.15);
     --color-primary-200: oklch(84.55% 0.074 259.28);

package/dist/index.d.mts

@@ -18,8 +18,13 @@ export { InputVariantProps, input, passwordInput } from './components/input.mjs'
 export { PageHeaderVariantProps, pageHeader } from './components/page-header.mjs';
 export { PageLayoutSlots, PageLayoutVariantProps, pageLayout } from './components/page-layout.mjs';
 export { PopoverVariants, popover } from './components/popover.mjs';
+export { RiskIndicatorVariantProps, riskIndicator } from './components/risk-indicator.mjs';
+export { SeparatorVariantProps, separator } from './components/separator.mjs';
+export { SidebarMenuActionVariantProps, SidebarMenuButtonVariantProps, SidebarVariantProps, sidebar, sidebarMenuAction, sidebarMenuButton } from './components/sidebar.mjs';
 export { skeleton } from './components/skeleton.mjs';
 export { SpinnerVariants, spinner } from './components/spinner.mjs';
+export { TabNavSlots, TabNavVariantProps, tabNav } from './components/tab-nav.mjs';
 export { TableSlots, TableVariantProps, table } from './components/table.mjs';
+export { TabsVariantProps, tabs } from './components/tabs.mjs';
 export { TooltipVariants, tooltip } from './components/tooltip.mjs';
 export { SlotsToClasses } from './utils/types.mjs';

package/dist/index.d.ts

@@ -18,8 +18,13 @@ export { InputVariantProps, input, passwordInput } from './components/input.js';
 export { PageHeaderVariantProps, pageHeader } from './components/page-header.js';
 export { PageLayoutSlots, PageLayoutVariantProps, pageLayout } from './components/page-layout.js';
 export { PopoverVariants, popover } from './components/popover.js';
+export { RiskIndicatorVariantProps, riskIndicator } from './components/risk-indicator.js';
+export { SeparatorVariantProps, separator } from './components/separator.js';
+export { SidebarMenuActionVariantProps, SidebarMenuButtonVariantProps, SidebarVariantProps, sidebar, sidebarMenuAction, sidebarMenuButton } from './components/sidebar.js';
 export { skeleton } from './components/skeleton.js';
 export { SpinnerVariants, spinner } from './components/spinner.js';
+export { TabNavSlots, TabNavVariantProps, tabNav } from './components/tab-nav.js';
 export { TableSlots, TableVariantProps, table } from './components/table.js';
+export { TabsVariantProps, tabs } from './components/tabs.js';
 export { TooltipVariants, tooltip } from './components/tooltip.js';
 export { SlotsToClasses } from './utils/types.js';

package/dist/index.js

@@ -40,9 +40,16 @@ __export(index_exports, {
   pageLayout: () => pageLayout,
   passwordInput: () => passwordInput,
   popover: () => popover,
+  riskIndicator: () => riskIndicator,
+  separator: () => separator,
+  sidebar: () => sidebar,
+  sidebarMenuAction: () => sidebarMenuAction,
+  sidebarMenuButton: () => sidebarMenuButton,
   skeleton: () => skeleton,
   spinner: () => spinner,
+  tabNav: () => tabNav,
   table: () => table,
+  tabs: () => tabs,
   tooltip: () => tooltip
 });
 module.exports = __toCommonJS(index_exports);
@@ -116,7 +123,7 @@ var faded = {
   foreground: "border-default bg-accent/30 text-foreground"
 };
 var ghost = {
-  primary: "bg-transparent text-primary",
+  primary: "bg-transparent text-primary dark:text-primary-foreground",
   secondary: "bg-transparent text-secondary",
   destructive: "bg-transparent text-destructive",
   warning: "bg-transparent text-warning",
@@ -570,6 +577,9 @@ var card = (0, import_tailwind_variants6.tv)({
       none: {
         root: "shadow-none"
       },
+      "2xs": {
+        root: "shadow-2xs"
+      },
       sm: {
         root: "shadow-sm"
       },
@@ -580,6 +590,11 @@ var card = (0, import_tailwind_variants6.tv)({
         root: "shadow-lg"
       }
     },
+    border: {
+      true: {
+        root: "border"
+      }
+    },
     radius: {
       none: {
         root: "rounded-none",
@@ -628,12 +643,13 @@ var card = (0, import_tailwind_variants6.tv)({
   },
   defaultVariants: {
     radius: "lg",
-    shadow: "md",
+    shadow: "sm",
     fullWidth: false,
     isHoverable: false,
     isPressable: false,
     isBlurred: false,
-    isDisabled: false
+    isDisabled: false,
+    border: true
   }
 });
 
@@ -1218,7 +1234,9 @@ var drawer = (0, import_tailwind_variants13.tv)({
     placement: {
       top: {},
       bottom: {},
-      left: {},
+      left: {
+        content: "inset-y-2 ms-2 left-0 border-r h-[calc(100dvh_-_1rem)]"
+      },
       right: {
         content: "inset-y-2 me-2 right-0 h-[calc(100%-1rem)] border-l"
       }
@@ -1411,7 +1429,7 @@ var import_tailwind_variants18 = require("tailwind-variants");
 var pageLayout = (0, import_tailwind_variants18.tv)({
   slots: {
     root: "",
-    wrapper: "flex mx-auto flex-wrap w-full",
+    wrapper: "flex flex-wrap w-full",
     baseContent: "flex flex-1 flex-wrap max-w-full",
     header: "w-full grow-0 shrink-0",
     footerWrapper: "w-full",
@@ -1430,7 +1448,8 @@ var pageLayout = (0, import_tailwind_variants18.tv)({
     ],
     pane: "w-[var(--pane-width-size)] md:overflow-auto",
     contentWrapper: "flex min-w-px flex-col basis-0 grow shrink",
-    content: "w-full mx-auto grow h-full"
+    content: "w-full mx-auto grow h-full",
+    bleed: []
   },
   variants: {
     gap: {
@@ -1458,14 +1477,14 @@ var pageLayout = (0, import_tailwind_variants18.tv)({
         content: "max-w-full"
       },
       md: {
-        wrapper: "max-w-3xl",
+        wrapper: "max-w-3xl mx-auto",
         content: "max-w-3xl"
       },
       lg: {
-        wrapper: "max-w-5xl"
+        wrapper: "max-w-5xl mx-auto"
       },
       xl: {
-        wrapper: "max-w-8xl",
+        wrapper: "max-w-8xl mx-auto",
         content: "max-w-8xl"
       }
     },
@@ -1487,7 +1506,8 @@ var pageLayout = (0, import_tailwind_variants18.tv)({
         header: "p-4",
         content: "p-4",
         pane: "p-4",
-        footerContent: "p-4"
+        footerContent: "p-4",
+        bleed: ["-mx-4 p-4"]
       },
       // 1.5rem
       normal: {
@@ -1495,7 +1515,8 @@ var pageLayout = (0, import_tailwind_variants18.tv)({
         header: "p-2 md:p-3",
         content: "p-2 md:p-3",
         pane: "p-2 md:p-3",
-        footerContent: "p-2 md:p-3"
+        footerContent: "p-2 md:p-3",
+        bleed: ["-mx-2 md:-mx-3 p-2 md:p-3"]
       }
     },
     inModal: {
@@ -1510,7 +1531,7 @@ var pageLayout = (0, import_tailwind_variants18.tv)({
   defaultVariants: {
     width: "xl",
     spacing: "normal",
-    paneWidth: "md",
+    paneWidth: "lg",
     gap: "normal"
   }
 });
@@ -1527,15 +1548,222 @@ var popover = (0, import_tailwind_variants19.tv)({
   }
 });
 
-// src/components/skeleton.ts
+// src/components/risk-indicator.ts
 var import_tailwind_variants20 = require("tailwind-variants");
-var skeleton = (0, import_tailwind_variants20.tv)({
+var riskIndicator = (0, import_tailwind_variants20.tv)({
+  slots: {
+    base: "flex items-end gap-0.5",
+    bar: "rounded-sm",
+    barLow: "bg-green-500",
+    barMedium: "bg-yellow-500",
+    barHigh: "bg-red-500",
+    barInactive: "bg-gray-200",
+    barHeight1: "h-1/3",
+    barHeight2: "h-2/3",
+    barHeight3: "h-full",
+    barWidth: "w-1"
+  },
+  variants: {
+    level: {
+      none: "",
+      low: "",
+      medium: "",
+      high: ""
+    },
+    size: {
+      sm: "h-3",
+      md: "h-4",
+      lg: "h-5"
+    }
+  },
+  defaultVariants: {
+    level: "none",
+    size: "md"
+  }
+});
+
+// src/components/separator.ts
+var import_tailwind_variants21 = require("tailwind-variants");
+var separator = (0, import_tailwind_variants21.tv)({
+  base: "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    }
+  }
+});
+
+// src/components/sidebar.ts
+var import_tailwind_variants22 = require("tailwind-variants");
+var sidebar = (0, import_tailwind_variants22.tv)({
+  slots: {
+    provider: [
+      "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full"
+    ],
+    sidebarWrapper: ["group peer text-sidebar-foreground hidden md:block"],
+    sidebar: [
+      "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col"
+    ],
+    gap: [
+      "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+      "group-data-[collapsible=offcanvas]:w-0",
+      "group-data-[side=right]:rotate-180"
+    ],
+    container: [
+      "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex"
+    ],
+    inner: [
+      "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+    ],
+    trigger: [],
+    rail: [
+      "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+      "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+      "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+      "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+      "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+      "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+    ],
+    inset: [
+      "bg-background relative flex w-full flex-1 flex-col",
+      "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2"
+    ],
+    input: ["bg-background h-8 w-full shadow-none"],
+    header: ["flex flex-col gap-2 p-2"],
+    footer: ["flex flex-col gap-2 p-2"],
+    separator: ["bg-sidebar-border mx-2 w-auto"],
+    content: [
+      "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden"
+    ],
+    group: ["relative flex w-full min-w-0 flex-col p-2"],
+    groupLabel: [
+      "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
+    ],
+    groupAction: [
+      "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      // Increases the hit area of the button on mobile.
+      "after:absolute after:-inset-2 md:after:hidden",
+      "group-data-[collapsible=icon]:hidden"
+    ],
+    groupContent: ["w-full text-sm"],
+    menu: ["flex w-full min-w-0 flex-col gap-1"],
+    menuItem: ["group/menu-item relative"]
+  },
+  variants: {
+    variant: {
+      sidebar: {
+        gap: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        container: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l"
+      },
+      floating: {
+        gap: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
+        container: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+      },
+      inset: {
+        gap: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
+        container: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+      }
+    },
+    side: {
+      left: {
+        container: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+      },
+      right: {
+        container: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
+      }
+    },
+    isMobile: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "sidebar",
+    isMobile: false
+  }
+});
+var sidebarMenuButton = (0, import_tailwind_variants22.tv)({
+  base: [
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md",
+    "p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding]",
+    "disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "data-[active=true]:font-medium",
+    "group-data-[collapsible=icon]:size-8!",
+    "group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
+  ],
+  variants: {
+    variant: {
+      default: "",
+      outline: ""
+    },
+    color: {
+      default: [
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        "focus-visible:ring-2",
+        "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent",
+        "data-[active=true]:text-sidebar-accent-foreground",
+        "data-[state=open]:hover:bg-sidebar-accent",
+        "data-[state=open]:hover:text-sidebar-accent-foreground "
+      ]
+    },
+    size: {
+      sm: "h-7 text-xs",
+      md: "h-8 text-sm",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "default",
+    size: "md"
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      color: "default",
+      class: ["hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"]
+    },
+    {
+      variant: "outline",
+      color: "default",
+      class: [
+        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      ]
+    }
+  ]
+});
+var sidebarMenuAction = (0, import_tailwind_variants22.tv)({
+  base: [
+    "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+    // Increases the hit area of the button on mobile.
+    "after:absolute after:-inset-2 md:after:hidden",
+    "peer-data-[size=sm]/menu-button:top-1",
+    "peer-data-[size=default]/menu-button:top-1.5",
+    "peer-data-[size=lg]/menu-button:top-2.5",
+    "group-data-[collapsible=icon]:hidden"
+  ],
+  variants: {
+    showOnHover: {
+      true: [
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"
+      ]
+    }
+  }
+});
+
+// src/components/skeleton.ts
+var import_tailwind_variants23 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants23.tv)({
   base: "bg-accent animate-pulse rounded-md"
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants21 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants21.tv)({
+var import_tailwind_variants24 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants24.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -1651,23 +1879,111 @@ var spinner = (0, import_tailwind_variants21.tv)({
   }
 });
 
+// src/components/tab-nav.ts
+var import_tailwind_variants25 = require("tailwind-variants");
+var tabNav = (0, import_tailwind_variants25.tv)({
+  slots: {
+    base: "",
+    list: [
+      "flex",
+      "justify-start",
+      "overflow-x-auto",
+      "whitespace-nowrap",
+      "font-sans"
+    ],
+    item: "flex",
+    link: [
+      "relative",
+      "flex",
+      "items-center",
+      "justify-center",
+      "shrink-0",
+      "select-none",
+      "px-2",
+      "[&_svg]:shrink-0",
+      "transition-colors",
+      "font-normal",
+      "data-active:[&>_span]:font-medium",
+      "hover:[&>_span]:bg-accent hover:[&>_span]:text-accent-foreground"
+    ],
+    linkInner: [
+      "flex",
+      "items-center",
+      "justify-center",
+      "absolute",
+      "overflow-hidden",
+      "transition-all"
+    ],
+    linkInnerHidden: [
+      "flex",
+      "items-center",
+      "justify-center",
+      "invisible",
+      "transition-all"
+    ]
+  },
+  variants: {
+    color: {
+      primary: {
+        link: ["before:bg-primary"]
+      }
+    },
+    size: {
+      sm: {
+        link: ["h-10", "text-xs [&_svg]:size-3.5"],
+        linkInner: "px-3 h-8 gap-2 rounded-sm min-w-16",
+        linkInnerHidden: "px-3 h-8 gap-2 rounded-sm min-w-16"
+      },
+      md: {
+        link: ["h-12", "text-sm", "rounded-md [&_svg]:size-4"],
+        linkInner: "px-4 h-10 gap-2 rounded-md min-w-20",
+        linkInnerHidden: "px-4 h-10 gap-2 rounded-md min-w-20"
+      }
+    },
+    border: {
+      true: {
+        list: "border-b -mb-px",
+        link: [
+          "before:h-[2px]",
+          "before:absolute",
+          "before:bottom-0",
+          "before:left-0",
+          "before:right-0",
+          "before:opacity-0",
+          "before:transition-opacity",
+          "data-active:before:opacity-100"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    border: true,
+    size: "sm"
+  }
+});
+
 // src/components/table.ts
-var import_tailwind_variants22 = require("tailwind-variants");
-var table = (0, import_tailwind_variants22.tv)({
+var import_tailwind_variants26 = require("tailwind-variants");
+var table = (0, import_tailwind_variants26.tv)({
   slots: {
+    container: ["overflow-x-auto whitespace-nowrap", "-mx-3 md:-mx-6"],
+    wrapper: ["inline-block min-w-full align-middle"],
     table: "min-w-full h-auto",
     thead: "",
     tbody: "after:block divide-y",
     tr: [
       "group/tr outline-hidden",
-      "[&_td:last-child]:pr-4 [&_th:last-child]:pr-4",
-      "[&_td:first-child]:pl-4 [&_th:first-child]:pl-4"
+      "[&_th:last-child]:pr-4",
+      "[&_th:first-child]:pl-4"
     ],
     th: [
       "group/th px-3 py-3.5 text-start text-xs font-semibold whitespace-normal",
       "text-foreground border-b"
     ],
     td: [
+      "first:pl-3 last:pr-3",
+      "md:first:pl-6 md:last:pr-6",
       "py-2 px-3 text-xs font-normal whitespace-normal relative",
       "[&>*]:z-[1]",
       "[&>*]:relative",
@@ -1692,12 +2008,38 @@ var table = (0, import_tailwind_variants22.tv)({
     ]
   },
   variants: {
+    bleed: {
+      true: {},
+      false: {
+        container: ["px-3 md:px-6"],
+        th: ["first:pl-1 last:pr-1"],
+        td: ["first:pl-1 last:pr-1"]
+      }
+    },
     overscroll: {
       horizontal: {
         th: "whitespace-nowrap",
         td: "whitespace-nowrap"
       }
     },
+    variant: {
+      default: {},
+      // a border between cells and above the table
+      // this is used for the grid variant
+      grid: {
+        table: "border-separate border-spacing-0",
+        th: [
+          "border-l first:border-l-0 border-b",
+          "first:pl-3 md:first:pl-6 last:pr-3 md:last:pr-6"
+        ],
+        td: [
+          "border-l first:border-l-0",
+          "border-b",
+          // first cell has no border
+          "[&_td:first-child]:border-l-0 [&_th:first-child]:border-l-0"
+        ]
+      }
+    },
     color: {
       default: {
         td: [
@@ -1762,15 +2104,55 @@ var table = (0, import_tailwind_variants22.tv)({
     }
   },
   defaultVariants: {
+    variant: "default",
     layout: "auto",
     color: "default",
+    bleed: false,
     fullWidth: true
   }
 });
 
+// src/components/tabs.ts
+var import_tailwind_variants27 = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants27.tv)({
+  slots: {
+    root: "flex flex-col gap-2",
+    list: [
+      "bg-muted text-muted-foreground",
+      "inline-flex flex-col md:flex-row",
+      "w-full md:w-fit items-center justify-center rounded-lg p-[3px]"
+    ],
+    trigger: [
+      "inline-flex flex-1 items-center justify-center gap-1.5 rounded-md",
+      " border border-transparent",
+      "data-[state=active]:bg-background",
+      "dark:data-[state=active]:text-foreground",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring",
+      "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
+      "text-foreground dark:text-muted-foreground",
+      "h-[calc(100%-1px)] whitespace-nowrap transition-[color,box-shadow]",
+      "focus-visible:ring-[3px] focus-visible:outline-1",
+      "disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    ],
+    content: ["flex-1 outline-none"]
+  },
+  variants: {
+    size: {
+      md: {
+        list: "md:h-9",
+        trigger: "px-2 py-1 text-sm font-medium max-md:w-full"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
 // src/components/tooltip.ts
-var import_tailwind_variants23 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants23.tv)({
+var import_tailwind_variants28 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants28.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -1802,8 +2184,15 @@ var tooltip = (0, import_tailwind_variants23.tv)({
   pageLayout,
   passwordInput,
   popover,
+  riskIndicator,
+  separator,
+  sidebar,
+  sidebarMenuAction,
+  sidebarMenuButton,
   skeleton,
   spinner,
+  tabNav,
   table,
+  tabs,
   tooltip
 });