@kopexa/theme 1.5.8 → 1.6.1

package/dist/components/index.js

@@ -40,9 +40,20 @@ __export(components_exports, {
   pageLayout: () => pageLayout,
   passwordInput: () => passwordInput,
   popover: () => popover,
+  previewCard: () => previewCard,
+  riskBadge: () => riskBadge,
+  riskIndicator: () => riskIndicator,
+  sectionRow: () => sectionRow,
+  separator: () => separator,
+  sidebar: () => sidebar,
+  sidebarMenuAction: () => sidebarMenuAction,
+  sidebarMenuButton: () => sidebarMenuButton,
   skeleton: () => skeleton,
   spinner: () => spinner,
+  splitPageLayout: () => splitPageLayout,
+  tabNav: () => tabNav,
   table: () => table,
+  tabs: () => tabs,
   tooltip: () => tooltip
 });
 module.exports = __toCommonJS(components_exports);
@@ -82,7 +93,7 @@ var translateCenterClasses = [
 
 // src/utils/variants.ts
 var solid = {
-  default: "bg-accent text-accent-foreground",
+  default: "bg-accent/70 text-accent-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
   destructive: "bg-destructive text-destructive-foreground",
@@ -116,7 +127,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 +581,9 @@ var card = (0, import_tailwind_variants6.tv)({
       none: {
         root: "shadow-none"
       },
+      "2xs": {
+        root: "shadow-2xs"
+      },
       sm: {
         root: "shadow-sm"
       },
@@ -580,6 +594,11 @@ var card = (0, import_tailwind_variants6.tv)({
         root: "shadow-lg"
       }
     },
+    border: {
+      true: {
+        root: "border"
+      }
+    },
     radius: {
       none: {
         root: "rounded-none",
@@ -628,12 +647,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
   }
 });
 
@@ -1212,13 +1232,15 @@ var drawer = (0, import_tailwind_variants13.tv)({
         content: "max-w-6xl"
       },
       full: {
-        content: "max-w-full max-h-full h-[calc(100dvh_-_1rem)] inset-2"
+        content: "max-w-full max-h-full h-[calc(100dvh_-_1rem)] !inset-2"
       }
     },
     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 +1433,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 +1452,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 +1481,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 +1510,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 +1519,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 +1535,7 @@ var pageLayout = (0, import_tailwind_variants18.tv)({
   defaultVariants: {
     width: "xl",
     spacing: "normal",
-    paneWidth: "md",
+    paneWidth: "lg",
     gap: "normal"
   }
 });
@@ -1527,15 +1552,331 @@ var popover = (0, import_tailwind_variants19.tv)({
   }
 });
 
-// src/components/skeleton.ts
+// src/components/preview-card.ts
 var import_tailwind_variants20 = require("tailwind-variants");
-var skeleton = (0, import_tailwind_variants20.tv)({
+var previewCard = (0, import_tailwind_variants20.tv)({
+  slots: {
+    root: [
+      "flex w-full items-start gap-3 rounded-md bg-background p-2 transition-colors",
+      "transition-all group min-h-10",
+      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+    ],
+    icon: ["flex-shrink-0 text-muted-foreground"],
+    content: ["flex min-w-0 flex-1 flex-col justify-center"],
+    title: ["truncate text-xs font-medium text-foreground"],
+    description: ["truncate text-[10px] text-muted-foreground line-clamp-1"],
+    action: ["shrink-0 rounded-full [&_svg]:size-4"],
+    tags: ["mt-1.5 flex items-center gap-2"]
+  },
+  variants: {
+    size: {
+      md: {
+        icon: "[&__svg]:size-5"
+      }
+    },
+    isBordered: {
+      true: {
+        root: ["border"]
+      },
+      false: {}
+    },
+    isHoverable: {
+      true: {
+        root: "hover:bg-muted/50 hover:border-primary",
+        title: "group-hover:text-primary"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    isBordered: true
+  }
+});
+
+// src/components/risk-badge.ts
+var import_tailwind_variants21 = require("tailwind-variants");
+var riskBadge = (0, import_tailwind_variants21.tv)({
+  slots: {
+    root: ["inline-flex flex-col items-start gap-0.5"],
+    label: ["inline-flex items-center gap-0.5 text-xs"],
+    grade: ["font-semibold"],
+    level: ["font-medium"],
+    dots: ["inline-flex items-center gap-0.5"],
+    dot: [
+      "inline-block w-1.5 h-1.5 rounded-full",
+      "transition-all duration-150 ease-in-out"
+    ]
+  },
+  variants: {
+    color: {
+      default: {
+        dot: "bg-gray-200 dark:bg-gray-700"
+      },
+      success: {
+        dot: "bg-success"
+      },
+      destructive: {
+        dot: "bg-destructive"
+      },
+      warning: {
+        dot: "bg-warning"
+      }
+    },
+    dotFilled: {
+      true: {
+        dot: "opacity-100 scale-110"
+      },
+      false: {
+        dot: "opacity-40 scale-100"
+      }
+    }
+  }
+});
+
+// src/components/risk-indicator.ts
+var import_tailwind_variants22 = require("tailwind-variants");
+var riskIndicator = (0, import_tailwind_variants22.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/section-row.ts
+var import_tailwind_variants23 = require("tailwind-variants");
+var sectionRow = (0, import_tailwind_variants23.tv)({
+  slots: {
+    root: ["section-row items-start"],
+    title: "section-row__title text-muted-foreground text-sm font-semibold",
+    valueText: "whitespace-pre-line text-pretty text-sm",
+    valueContainer: "section-row__value-container flex flex-wrap gap-1",
+    action: "section-row__action"
+  },
+  variants: {
+    hasActions: {
+      true: {
+        root: [
+          "has-actions"
+          //"md:grid-cols-[min(40%,--spacing(80))_auto_28px]",
+        ]
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    hasActions: false
+  }
+});
+
+// src/components/separator.ts
+var import_tailwind_variants24 = require("tailwind-variants");
+var separator = (0, import_tailwind_variants24.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: ""
+    }
+  },
+  compoundVariants: []
+});
+
+// src/components/sidebar.ts
+var import_tailwind_variants25 = require("tailwind-variants");
+var sidebar = (0, import_tailwind_variants25.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_variants25.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_variants25.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_variants26 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants26.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_variants27 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants27.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -1651,23 +1992,156 @@ var spinner = (0, import_tailwind_variants21.tv)({
   }
 });
 
+// src/components/split-page-layout.ts
+var import_tailwind_variants28 = require("tailwind-variants");
+var splitPageLayout = (0, import_tailwind_variants28.tv)({
+  slots: {
+    root: [
+      "size-full min-h-0 grid grid-cols-[1fr_10px] md:grid-cols-3 relative"
+    ],
+    content: ["p-4 md:p-6 col-span-1 md:col-span-2"],
+    panelContainer: [
+      "flex flex-col",
+      "md:border-s",
+      //"size-full",
+      "bg-muted dark:bg-primary-900"
+    ],
+    panel: [
+      "md:border-s",
+      "p-4 md:p-6",
+      "overflow-y-auto overflow-x-hidden",
+      "flex-1",
+      "min-h-0",
+      "h-full"
+    ],
+    bleed: "-mx-4 md:-mx-6",
+    mobileWrapper: "relative",
+    mobileContainer: ["absolute top-2 right-2 z-10"]
+  },
+  variants: {
+    inset: {
+      true: {
+        panelContainer: "rounded-e-md max-md:rounded-md"
+      }
+    }
+  },
+  defaultVariants: {
+    inset: true
+  }
+});
+
+// src/components/tab-nav.ts
+var import_tailwind_variants29 = require("tailwind-variants");
+var tabNav = (0, import_tailwind_variants29.tv)({
+  slots: {
+    base: "",
+    list: [
+      "flex",
+      "items-center",
+      "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: {
+    bleed: {
+      true: {
+        list: "-mx-4 md:-mx-6 px-4 md:px-6"
+      },
+      false: {}
+    },
+    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_variants30 = require("tailwind-variants");
+var table = (0, import_tailwind_variants30.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",
@@ -1689,15 +2163,50 @@ var table = (0, import_tailwind_variants22.tv)({
       "before:w-0.5",
       "before:opacity-0",
       "group-aria-[selected=true]/tr:first:before:opacity-100"
-    ]
+    ],
+    ownerCell: [
+      "min-h-[50px]",
+      "inline-flex items-center justify-center gap-2"
+    ],
+    ownerCellAvatar: [],
+    ownerCelltextWrapper: "inline-flex flex-col items-start",
+    ownerCellName: "text-xs font-medium",
+    ownerCellDescription: "text-[11px] text-muted-foreground truncate",
+    ownerCellUnassigned: "text-xs italic text-muted-foreground"
   },
   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 +2271,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_variants31 = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants31.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_variants32 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants32.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -1802,8 +2351,19 @@ var tooltip = (0, import_tailwind_variants23.tv)({
   pageLayout,
   passwordInput,
   popover,
+  previewCard,
+  riskBadge,
+  riskIndicator,
+  sectionRow,
+  separator,
+  sidebar,
+  sidebarMenuAction,
+  sidebarMenuButton,
   skeleton,
   spinner,
+  splitPageLayout,
+  tabNav,
   table,
+  tabs,
   tooltip
 });