@kopexa/theme 1.5.8 → 1.6.0

package/dist/{chunk-FLD2CUFZ.mjs → chunk-3IIJVON7.mjs}

@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
 var pageLayout = 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",
@@ -22,7 +22,8 @@ var pageLayout = 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: {
@@ -50,14 +51,14 @@ var pageLayout = 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"
       }
     },
@@ -79,7 +80,8 @@ var pageLayout = tv({
         header: "p-4",
         content: "p-4",
         pane: "p-4",
-        footerContent: "p-4"
+        footerContent: "p-4",
+        bleed: ["-mx-4 p-4"]
       },
       // 1.5rem
       normal: {
@@ -87,7 +89,8 @@ var pageLayout = 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: {
@@ -102,7 +105,7 @@ var pageLayout = tv({
   defaultVariants: {
     width: "xl",
     spacing: "normal",
-    paneWidth: "md",
+    paneWidth: "lg",
     gap: "normal"
   }
 });

package/dist/chunk-CZMZHA7U.mjs

@@ -0,0 +1,37 @@
+// src/components/risk-indicator.ts
+import { tv } from "tailwind-variants";
+var riskIndicator = 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"
+  }
+});
+
+export {
+  riskIndicator
+};

package/dist/{chunk-UI2M2MFB.mjs → chunk-DH3KNPAO.mjs}

@@ -58,7 +58,9 @@ var drawer = 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"
       }

package/dist/{chunk-4VKJFW6Y.mjs → chunk-EACX3NZF.mjs}

@@ -50,6 +50,9 @@ var card = tv({
       none: {
         root: "shadow-none"
       },
+      "2xs": {
+        root: "shadow-2xs"
+      },
       sm: {
         root: "shadow-sm"
       },
@@ -60,6 +63,11 @@ var card = tv({
         root: "shadow-lg"
       }
     },
+    border: {
+      true: {
+        root: "border"
+      }
+    },
     radius: {
       none: {
         root: "rounded-none",
@@ -108,12 +116,13 @@ var card = tv({
   },
   defaultVariants: {
     radius: "lg",
-    shadow: "md",
+    shadow: "sm",
     fullWidth: false,
     isHoverable: false,
     isPressable: false,
     isBlurred: false,
-    isDisabled: false
+    isDisabled: false,
+    border: true
   }
 });
 

package/dist/chunk-GA6UOB2D.mjs

@@ -0,0 +1,166 @@
+// src/components/sidebar.ts
+import { tv } from "tailwind-variants";
+var sidebar = 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 = 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 = 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"
+      ]
+    }
+  }
+});
+
+export {
+  sidebar,
+  sidebarMenuButton,
+  sidebarMenuAction
+};

package/dist/{chunk-32L6KXLV.mjs → chunk-HOQ2LD24.mjs}

@@ -1,6 +1,6 @@
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-UVT775TU.mjs";
 
 // src/components/chip.ts
 import { tv } from "tailwind-variants";

package/dist/chunk-I6M4S2KZ.mjs

@@ -0,0 +1,41 @@
+// src/components/tabs.ts
+import { tv } from "tailwind-variants";
+var tabs = 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"
+  }
+});
+
+export {
+  tabs
+};

package/dist/chunk-IRKCLWJD.mjs

@@ -0,0 +1,15 @@
+// src/components/separator.ts
+import { tv } from "tailwind-variants";
+var separator = 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: ""
+    }
+  }
+});
+
+export {
+  separator
+};

package/dist/{chunk-3M5JSM7Y.mjs → chunk-MGYGD5BF.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-25L2JS6A.mjs";
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-UVT775TU.mjs";
 
 // src/components/button.ts
 import { tv } from "tailwind-variants";

package/dist/{chunk-I2NMD23O.mjs → chunk-OMS3433R.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-25L2JS6A.mjs";
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-UVT775TU.mjs";
 
 // src/components/avatar.ts
 import { tv } from "tailwind-variants";

package/dist/{chunk-CDTKWCOH.mjs → chunk-SU53TZN7.mjs}

@@ -2,19 +2,23 @@
 import { tv } from "tailwind-variants";
 var table = 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",
@@ -39,12 +43,38 @@ var table = 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: [
@@ -109,8 +139,10 @@ var table = tv({
     }
   },
   defaultVariants: {
+    variant: "default",
     layout: "auto",
     color: "default",
+    bleed: false,
     fullWidth: true
   }
 });

package/dist/chunk-UPTG533L.mjs

@@ -0,0 +1,87 @@
+// src/components/tab-nav.ts
+import { tv } from "tailwind-variants";
+var tabNav = 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"
+  }
+});
+
+export {
+  tabNav
+};

package/dist/{chunk-67PPUTSS.mjs → chunk-UVT775TU.mjs}

@@ -34,7 +34,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",

package/dist/{chunk-5BIGFSZK.mjs → chunk-WSX3HKVE.mjs}

@@ -1,6 +1,6 @@
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-UVT775TU.mjs";
 
 // src/components/code.ts
 import { tv } from "tailwind-variants";

package/dist/components/avatar.js

@@ -74,7 +74,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",

package/dist/components/avatar.mjs

@@ -1,8 +1,8 @@
 import {
   avatar
-} from "../chunk-I2NMD23O.mjs";
+} from "../chunk-OMS3433R.mjs";
 import "../chunk-25L2JS6A.mjs";
-import "../chunk-67PPUTSS.mjs";
+import "../chunk-UVT775TU.mjs";
 export {
   avatar
 };

package/dist/components/button.js

@@ -67,7 +67,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",

package/dist/components/button.mjs

@@ -1,8 +1,8 @@
 import {
   button
-} from "../chunk-3M5JSM7Y.mjs";
+} from "../chunk-MGYGD5BF.mjs";
 import "../chunk-25L2JS6A.mjs";
-import "../chunk-67PPUTSS.mjs";
+import "../chunk-UVT775TU.mjs";
 export {
   button
 };