@kopexa/theme 1.5.3 → 1.5.4

package/dist/index.js

@@ -26,16 +26,23 @@ __export(index_exports, {
   button: () => button,
   calendar: () => calendar,
   card: () => card,
+  checkbox: () => checkbox,
   chip: () => chip,
+  code: () => code,
   command: () => command,
+  dataTable: () => dataTable,
   dialog: () => dialog,
   drawer: () => drawer,
   dropdownMenu: () => dropdownMenu,
+  heading: () => heading,
   input: () => input,
+  pageHeader: () => pageHeader,
   pageLayout: () => pageLayout,
   passwordInput: () => passwordInput,
   popover: () => popover,
+  skeleton: () => skeleton,
   spinner: () => spinner,
+  table: () => table,
   tooltip: () => tooltip
 });
 module.exports = __toCommonJS(index_exports);
@@ -175,13 +182,13 @@ var avatar = (0, import_tailwind_variants2.tv)({
   variants: {
     size: {
       sm: {
-        root: "w-8 h-8 text-tiny"
+        root: "w-8 h-8 text-[11px]"
       },
       md: {
-        root: "w-10 h-10 text-tiny"
+        root: "w-10 h-10 text-[12px]"
       },
       lg: {
-        root: "w-14 h-14 text-small"
+        root: "w-14 h-14 text-[14px]"
       }
     },
     color: {
@@ -329,13 +336,13 @@ var button = (0, import_tailwind_variants4.tv)({
     variant: {
       solid: "shadow-xs",
       ghost: "",
-      outline: "border-2 bg-transparent",
+      outline: "border-1 bg-transparent",
       link: ""
     },
     size: {
-      sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5",
-      md: "px-4 min-w-20 h-10 text-sm gap-2 rounded-md has-[>svg]:px-3",
-      lg: "px-6 min-w-24 h-12 text-base gap-3 rounded-lg has-[>svg]:px-4"
+      sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5 [&_svg]:size-3",
+      md: "px-4 min-w-20 h-10 text-sm gap-2 rounded-md has-[>svg]:px-3 [&_svg]:size-4",
+      lg: "px-6 min-w-24 h-12 text-base gap-3 rounded-lg has-[>svg]:px-4 [&_svg]:size-4"
     },
     color: {
       primary: "",
@@ -354,7 +361,7 @@ var button = (0, import_tailwind_variants4.tv)({
     }
   },
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "solid",
     color: "primary",
     fullWidth: false,
@@ -630,9 +637,19 @@ var card = (0, import_tailwind_variants6.tv)({
   }
 });
 
-// src/components/chip.ts
+// src/components/checkbox.ts
 var import_tailwind_variants7 = require("tailwind-variants");
-var chip = (0, import_tailwind_variants7.tv)({
+var checkbox = (0, import_tailwind_variants7.tv)({
+  slots: {
+    base: "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+    indicator: "flex items-center justify-center text-current transition-none",
+    icon: "size-3.5"
+  }
+});
+
+// src/components/chip.ts
+var import_tailwind_variants8 = require("tailwind-variants");
+var chip = (0, import_tailwind_variants8.tv)({
   slots: {
     root: [
       "relative",
@@ -947,9 +964,50 @@ var chip = (0, import_tailwind_variants7.tv)({
   ]
 });
 
+// src/components/code.ts
+var import_tailwind_variants9 = require("tailwind-variants");
+var code = (0, import_tailwind_variants9.tv)({
+  base: [
+    "px-2",
+    "py-1",
+    "h-fit",
+    "font-mono",
+    "font-normal",
+    "inline-block",
+    "whitespace-nowrap"
+  ],
+  variants: {
+    color: {
+      default: colorVariants.flat.default,
+      primary: colorVariants.flat.primary,
+      secondary: colorVariants.flat.secondary,
+      success: colorVariants.flat.success,
+      warning: colorVariants.flat.warning,
+      destructive: colorVariants.flat.destructive
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    size: "sm",
+    radius: "sm"
+  }
+});
+
 // src/components/command.ts
-var import_tailwind_variants8 = require("tailwind-variants");
-var command = (0, import_tailwind_variants8.tv)({
+var import_tailwind_variants10 = require("tailwind-variants");
+var command = (0, import_tailwind_variants10.tv)({
   slots: {
     root: "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
     inputWrapper: "flex h-9 items-center gap-2 border-b px-3",
@@ -967,9 +1025,54 @@ var command = (0, import_tailwind_variants8.tv)({
   }
 });
 
+// src/components/data-table.ts
+var import_tailwind_variants11 = require("tailwind-variants");
+var dataTable = (0, import_tailwind_variants11.tv)({
+  slots: {
+    base: "relative flex min-h-0 flex-1 flex-col",
+    toolbarWrapper: "flex flex-col gap-2 divide-y pb-2",
+    toolbar: "flex items-center py-4",
+    wrapper: "min-h-0 w-full flex-1 overflow-auto overscroll-none",
+    th: "",
+    td: ""
+  },
+  variants: {
+    isFirstColumn: {
+      true: {
+        th: "after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']",
+        td: "after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']"
+      }
+    },
+    showStickyBorder: {
+      true: {
+        th: "after:bg-border",
+        td: "after:bg-border"
+      }
+    },
+    isSelect: {
+      true: {
+        th: "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]",
+        td: "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]"
+      }
+    },
+    isAction: {
+      true: {
+        th: "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]",
+        td: "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]"
+      }
+    },
+    isSticky: {
+      true: {
+        th: "bg-background sticky",
+        td: "bg-background sticky z-[2]"
+      }
+    }
+  }
+});
+
 // src/components/dialog.ts
-var import_tailwind_variants9 = require("tailwind-variants");
-var dialog = (0, import_tailwind_variants9.tv)({
+var import_tailwind_variants12 = require("tailwind-variants");
+var dialog = (0, import_tailwind_variants12.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
@@ -1060,8 +1163,8 @@ var dialog = (0, import_tailwind_variants9.tv)({
 });
 
 // src/components/drawer.ts
-var import_tailwind_variants10 = require("tailwind-variants");
-var drawer = (0, import_tailwind_variants10.tv)({
+var import_tailwind_variants13 = require("tailwind-variants");
+var drawer = (0, import_tailwind_variants13.tv)({
   slots: {
     overlay: dialog.slots.overlay,
     content: [
@@ -1141,8 +1244,8 @@ var drawer = (0, import_tailwind_variants10.tv)({
 });
 
 // src/components/dropdown-menu.ts
-var import_tailwind_variants11 = require("tailwind-variants");
-var dropdownMenu = (0, import_tailwind_variants11.tv)({
+var import_tailwind_variants14 = require("tailwind-variants");
+var dropdownMenu = (0, import_tailwind_variants14.tv)({
   slots: {
     root: "",
     content: "min-w-56 bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
@@ -1161,15 +1264,33 @@ var dropdownMenu = (0, import_tailwind_variants11.tv)({
   }
 });
 
+// src/components/heading.ts
+var import_tailwind_variants15 = require("tailwind-variants");
+var heading = (0, import_tailwind_variants15.tv)({
+  variants: {
+    level: {
+      h1: "text-h1-core",
+      h2: "text-h2-core",
+      h3: "text-h3-core",
+      h4: "text-h4-core",
+      h5: "text-h5-core",
+      h6: "text-h6-core"
+    }
+  },
+  defaultVariants: {
+    level: "h1"
+  }
+});
+
 // src/components/input.ts
-var import_tailwind_variants12 = require("tailwind-variants");
-var passwordInput = (0, import_tailwind_variants12.tv)({
+var import_tailwind_variants16 = require("tailwind-variants");
+var passwordInput = (0, import_tailwind_variants16.tv)({
   slots: {
     button: "focus:outline-hidden",
     icon: "pointer-events-none text-muted-foreground"
   }
 });
-var input = (0, import_tailwind_variants12.tv)({
+var input = (0, import_tailwind_variants16.tv)({
   base: [],
   slots: {
     inputWrapper: [
@@ -1245,13 +1366,49 @@ var input = (0, import_tailwind_variants12.tv)({
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "sm"
+  }
+});
+
+// src/components/page-header.ts
+var import_tailwind_variants17 = require("tailwind-variants");
+var pageHeader = (0, import_tailwind_variants17.tv)({
+  slots: {
+    root: "page-header",
+    titleArea: "page-header__title-area flex gap-2 flex-row items-center",
+    title: "page-header__title block",
+    contextArea: [
+      "page-header__context-area",
+      "flex",
+      "pb-2",
+      "text-sm",
+      "flex-row",
+      "gap-2"
+    ],
+    leadingVisual: "page-header__leading-visual flex items-center [&_svg]:size-4",
+    leadingAction: "page-header__leading-action",
+    breadcrumbs: ["page-header__breadcrumbs", "flex pe-2 items-center"],
+    actions: [
+      "page-header__actions",
+      "flex",
+      "flex-row",
+      "gap-2",
+      "justify-end",
+      "items-start",
+      "min-w-max",
+      "ps-2"
+    ],
+    description: [
+      "page-header__description",
+      "flex flex-row items-center gap-2 pt-2 text-sm font-normal leading-normal"
+    ],
+    navigation: ["page-header__navigation", "block pt-2 text-sm fonr-normal"]
   }
 });
 
 // src/components/page-layout.ts
-var import_tailwind_variants13 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants13.tv)({
+var import_tailwind_variants18 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants18.tv)({
   slots: {
     root: "",
     wrapper: "flex mx-auto flex-wrap",
@@ -1348,8 +1505,8 @@ var pageLayout = (0, import_tailwind_variants13.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants14 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants14.tv)({
+var import_tailwind_variants19 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants19.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -1359,9 +1516,15 @@ var popover = (0, import_tailwind_variants14.tv)({
   }
 });
 
+// src/components/skeleton.ts
+var import_tailwind_variants20 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants20.tv)({
+  base: "bg-accent animate-pulse rounded-md"
+});
+
 // src/components/spinner.ts
-var import_tailwind_variants15 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants15.tv)({
+var import_tailwind_variants21 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants21.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -1477,9 +1640,126 @@ var spinner = (0, import_tailwind_variants15.tv)({
   }
 });
 
+// src/components/table.ts
+var import_tailwind_variants22 = require("tailwind-variants");
+var table = (0, import_tailwind_variants22.tv)({
+  slots: {
+    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: [
+      "group/th px-3 py-3.5 text-start text-xs font-semibold whitespace-normal",
+      "text-foreground border-b"
+    ],
+    td: [
+      "py-2 px-3 text-xs font-normal whitespace-normal relative",
+      "[&>*]:z-[1]",
+      "[&>*]:relative",
+      // after content for selection
+      "after:pointer-events-none",
+      "after:content-['']",
+      "after:absolute",
+      "after:-z-[1]",
+      "after:inset-0",
+      "after:opacity-0",
+      "group-aria-[selected=true]/tr:after:opacity-100",
+      // before content for selection
+      "before:pointer-events-none",
+      "before:content-['']",
+      "before:absolute",
+      "before:-z-[1]",
+      "before:inset-y-0",
+      "before:start-0",
+      "before:w-0.5",
+      "before:opacity-0",
+      "group-aria-[selected=true]/tr:first:before:opacity-100"
+    ]
+  },
+  variants: {
+    overscroll: {
+      horizontal: {
+        th: "whitespace-nowrap",
+        td: "whitespace-nowrap"
+      }
+    },
+    color: {
+      default: {
+        td: [
+          "first:before:bg-primary group-aria-[selected=true]/tr:text-accent-foreground"
+        ]
+      },
+      primary: {
+        td: [
+          "before:bg-primary group-aria-[selected=true]/tr:text-primary dark:group-aria-[selected=true]/tr:text-primary-foreground",
+          "after:bg-primary/10 dark:after:bg-primary/20"
+        ]
+      }
+    },
+    layout: {
+      auto: {
+        table: "table-auto"
+      },
+      fixed: {
+        table: "table-fixed"
+      }
+    },
+    isSelectable: {
+      true: {
+        tr: "cursor-default",
+        td: [
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:bg-muted/30"
+        ]
+      }
+    },
+    hasSelect: {
+      true: {
+        tr: "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap"
+      }
+    },
+    hasActions: {
+      true: {
+        tr: "[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap"
+      }
+    },
+    isStickyCell: {
+      true: {
+        th: "sticky bg-background z-[2]",
+        td: "sticky h-full bg-background z-[2]"
+      }
+    },
+    isSelectCell: {
+      true: {
+        td: "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]"
+      }
+    },
+    isActionCell: {
+      true: {
+        td: "w-[calc(28px+24px+4px)] min-w-[calc(28px+24px+4px)] max-w-[calc(28px+24px+4px)]"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full",
+        wrapper: "w-full",
+        table: "w-full"
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "auto",
+    color: "default",
+    fullWidth: true
+  }
+});
+
 // src/components/tooltip.ts
-var import_tailwind_variants16 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants16.tv)({
+var import_tailwind_variants23 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants23.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -1497,15 +1777,22 @@ var tooltip = (0, import_tailwind_variants16.tv)({
   button,
   calendar,
   card,
+  checkbox,
   chip,
+  code,
   command,
+  dataTable,
   dialog,
   drawer,
   dropdownMenu,
+  heading,
   input,
+  pageHeader,
   pageLayout,
   passwordInput,
   popover,
+  skeleton,
   spinner,
+  table,
   tooltip
 });

package/dist/index.mjs

@@ -1,14 +1,42 @@
 import "./chunk-XSN6P5JL.mjs";
-import "./chunk-5EDS3TJU.mjs";
+import "./chunk-FWB233VZ.mjs";
+import {
+  tooltip
+} from "./chunk-SVCFD7RR.mjs";
+import {
+  input,
+  passwordInput
+} from "./chunk-CQDTDA47.mjs";
+import {
+  pageHeader
+} from "./chunk-HAVJ6EQ6.mjs";
+import {
+  pageLayout
+} from "./chunk-GQV7INYX.mjs";
+import {
+  popover
+} from "./chunk-J35D7RWA.mjs";
+import {
+  skeleton
+} from "./chunk-VNQEJU4P.mjs";
 import {
   spinner
 } from "./chunk-4UDOCFU5.mjs";
 import {
-  tooltip
-} from "./chunk-SVCFD7RR.mjs";
+  table
+} from "./chunk-CDTKWCOH.mjs";
+import {
+  chip
+} from "./chunk-32L6KXLV.mjs";
+import {
+  code
+} from "./chunk-5BIGFSZK.mjs";
 import {
   command
 } from "./chunk-YPHFKGNI.mjs";
+import {
+  dataTable
+} from "./chunk-GNYTZGE5.mjs";
 import {
   drawer
 } from "./chunk-UI2M2MFB.mjs";
@@ -19,15 +47,8 @@ import {
   dropdownMenu
 } from "./chunk-EXBKQDH5.mjs";
 import {
-  input,
-  passwordInput
-} from "./chunk-7CM52H5K.mjs";
-import {
-  pageLayout
-} from "./chunk-GQV7INYX.mjs";
-import {
-  popover
-} from "./chunk-J35D7RWA.mjs";
+  heading
+} from "./chunk-NWKBPO37.mjs";
 import {
   alertDialog
 } from "./chunk-CPEP2RO4.mjs";
@@ -36,11 +57,12 @@ import {
 } from "./chunk-XCLEKBCJ.mjs";
 import {
   avatar
-} from "./chunk-Z56OSRTC.mjs";
+} from "./chunk-I2NMD23O.mjs";
 import {
   button
-} from "./chunk-BIRJNNEY.mjs";
+} from "./chunk-3M5JSM7Y.mjs";
 import "./chunk-25L2JS6A.mjs";
+import "./chunk-67PPUTSS.mjs";
 import {
   calendar
 } from "./chunk-JWF5ABNP.mjs";
@@ -48,9 +70,8 @@ import {
   card
 } from "./chunk-4VKJFW6Y.mjs";
 import {
-  chip
-} from "./chunk-32L6KXLV.mjs";
-import "./chunk-67PPUTSS.mjs";
+  checkbox
+} from "./chunk-KPOZFVP6.mjs";
 export {
   alertDialog,
   avatar,
@@ -58,15 +79,22 @@ export {
   button,
   calendar,
   card,
+  checkbox,
   chip,
+  code,
   command,
+  dataTable,
   dialog,
   drawer,
   dropdownMenu,
+  heading,
   input,
+  pageHeader,
   pageLayout,
   passwordInput,
   popover,
+  skeleton,
   spinner,
+  table,
   tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",
@@ -44,8 +44,8 @@
     "flat": "^6.0.1",
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "1.0.0",
-    "tw-animate-css": "^1.3.5",
-    "@kopexa/shared-utils": "1.1.4"
+    "tw-animate-css": "^1.3.6",
+    "@kopexa/shared-utils": "1.1.5"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"