@kopexa/theme 1.7.6 → 1.7.7

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   code: () => code,
   command: () => command,
   dataTable: () => dataTable,
+  datagrid: () => datagrid,
   dialog: () => dialog,
   drawer: () => drawer,
   dropdownMenu: () => dropdownMenu,
@@ -1367,9 +1368,146 @@ var command = (0, import_tailwind_variants13.tv)({
   }
 });
 
-// src/components/data-table.ts
+// src/components/data-grid.ts
 var import_tailwind_variants14 = require("tailwind-variants");
-var dataTable = (0, import_tailwind_variants14.tv)({
+var datagrid = (0, import_tailwind_variants14.tv)({
+  slots: {
+    container: "grid w-full",
+    table: "w-full align-middle caption-bottom text-left rtl:text-right text-foreground font-normal text-sm",
+    head: "",
+    headerRow: "",
+    headerRowCell: "relative h-10 text-left rtl:text-right align-middle font-normal text-secondary-foreground/80 [&:has([role=checkbox])]:pe-0",
+    headRowCellResize: "absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -end-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px",
+    rowSpacer: "h-2",
+    body: "[&_tr:last-child]:border-0",
+    bodyRowSkeleton: "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+    bodyRowSkeletonCell: "align-middle",
+    bodyRow: "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+    bodyRowCell: "align-middle",
+    bodyRowExpanded: "",
+    empty: "text-center text-muted-foreground py-6"
+  },
+  variants: {
+    border: {
+      true: {
+        container: "border border-border rounded-lg"
+      }
+    },
+    headerBorder: {
+      true: {
+        headerRow: "[&>th]:border-b"
+      }
+    },
+    cellBorder: {
+      true: {
+        headerRow: "[&_>:last-child]:border-e-0",
+        headerRowCell: "border-e",
+        bodyRowSkeleton: "[&_>:last-child]:border-e-0",
+        bodyRowSkeletonCell: "border-e",
+        bodyRow: "[&_>:last-child]:border-e-0",
+        bodyRowCell: "border-e"
+      }
+    },
+    rowBorder: {
+      true: {
+        bodyRowExpanded: "[&:not(:last-child)>td]:border-b"
+      }
+    },
+    rowRounded: {
+      true: {
+        body: "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg"
+      }
+    },
+    columnsResizable: {
+      true: {
+        headerRowCell: "truncate"
+      }
+    },
+    columnsDraggable: {
+      true: {
+        table: "border-separate border-spacing-0"
+      }
+    },
+    headerBackground: {
+      false: {
+        headerRow: "bg-transparent"
+      },
+      true: {
+        headerRow: "bg-muted/40"
+      }
+    },
+    stripped: {
+      true: {
+        headerRow: "bg-transparent",
+        bodyRowSkeleton: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted",
+        bodyRow: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted"
+      }
+    },
+    width: {
+      fixed: {
+        table: "table-fixed",
+        headerRowCell: "w-[var(--size)]"
+      },
+      auto: {
+        table: "table-auto"
+      }
+    },
+    dense: {
+      true: {
+        headerRowCell: "px-2.5 h-8",
+        bodyRowSkeletonCell: "px-2.5 py-2",
+        bodyRowCell: "px-2.5 py-2"
+      },
+      false: {
+        headerRowCell: "px-4",
+        bodyRowSkeletonCell: "px-4 py-3",
+        bodyRowCell: "px-4 py-3"
+      }
+    },
+    columnsPinnable: {
+      true: {
+        headerRowCell: "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs"
+      },
+      false: {}
+    },
+    headerSticky: {
+      true: {
+        head: "sticky top-0 z-10 bg-background/90 backdrop-blur-xs"
+      }
+    },
+    loadingMode: {
+      skeleton: {}
+    }
+  },
+  compoundVariants: [
+    {
+      stripped: false,
+      rowBorder: true,
+      className: {
+        bodyRowSkeleton: "border-b border-border [&:not(:last-child)>td]:border-b",
+        bodyRow: "border-b border-border [&:not(:last-child)>td]:border-b"
+      }
+    }
+  ],
+  defaultVariants: {
+    border: true,
+    dense: false,
+    width: "fixed",
+    headerSticky: false,
+    headerBorder: true,
+    headerBackground: true,
+    cellBorder: false,
+    stripped: false,
+    columnsPinnable: false,
+    columnsResizable: false,
+    loadingMode: "skeleton",
+    rowBorder: true
+  }
+});
+
+// src/components/data-table.ts
+var import_tailwind_variants15 = require("tailwind-variants");
+var dataTable = (0, import_tailwind_variants15.tv)({
   slots: {
     base: "relative flex min-h-0 flex-1 flex-col",
     toolbarWrapper: "flex flex-col gap-2 divide-y pb-2",
@@ -1413,8 +1551,8 @@ var dataTable = (0, import_tailwind_variants14.tv)({
 });
 
 // src/components/dialog.ts
-var import_tailwind_variants15 = require("tailwind-variants");
-var dialog = (0, import_tailwind_variants15.tv)({
+var import_tailwind_variants16 = require("tailwind-variants");
+var dialog = (0, import_tailwind_variants16.tv)({
   slots: {
     overlay: [
       "fixed inset-0 z-50 bg-black/25",
@@ -1503,8 +1641,8 @@ var dialog = (0, import_tailwind_variants15.tv)({
 });
 
 // src/components/drawer.ts
-var import_tailwind_variants16 = require("tailwind-variants");
-var drawer = (0, import_tailwind_variants16.tv)({
+var import_tailwind_variants17 = require("tailwind-variants");
+var drawer = (0, import_tailwind_variants17.tv)({
   slots: {
     overlay: dialog.slots.overlay,
     content: [
@@ -1606,8 +1744,8 @@ var drawer = (0, import_tailwind_variants16.tv)({
 });
 
 // src/components/dropdown-menu.ts
-var import_tailwind_variants17 = require("tailwind-variants");
-var dropdownMenu = (0, import_tailwind_variants17.tv)({
+var import_tailwind_variants18 = require("tailwind-variants");
+var dropdownMenu = (0, import_tailwind_variants18.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",
@@ -1627,8 +1765,8 @@ var dropdownMenu = (0, import_tailwind_variants17.tv)({
 });
 
 // src/components/framework-row.ts
-var import_tailwind_variants18 = require("tailwind-variants");
-var frameworkRow = (0, import_tailwind_variants18.tv)({
+var import_tailwind_variants19 = require("tailwind-variants");
+var frameworkRow = (0, import_tailwind_variants19.tv)({
   slots: {
     root: "flex w-full items-start gap-3 py-2 first:pt-0 last:pb-0 border-b border-dotted last:border-0",
     standardContainer: "shrink-0",
@@ -1641,8 +1779,8 @@ var frameworkRow = (0, import_tailwind_variants18.tv)({
 });
 
 // src/components/heading.ts
-var import_tailwind_variants19 = require("tailwind-variants");
-var heading = (0, import_tailwind_variants19.tv)({
+var import_tailwind_variants20 = require("tailwind-variants");
+var heading = (0, import_tailwind_variants20.tv)({
   variants: {
     level: {
       h1: "text-h1-core",
@@ -1659,8 +1797,8 @@ var heading = (0, import_tailwind_variants19.tv)({
 });
 
 // src/components/hover-card.ts
-var import_tailwind_variants20 = require("tailwind-variants");
-var hoverCard = (0, import_tailwind_variants20.tv)({
+var import_tailwind_variants21 = require("tailwind-variants");
+var hoverCard = (0, import_tailwind_variants21.tv)({
   slots: {
     content: [
       ...popoverContentClasses,
@@ -1675,14 +1813,14 @@ var hoverCard = (0, import_tailwind_variants20.tv)({
 });
 
 // src/components/input.ts
-var import_tailwind_variants21 = require("tailwind-variants");
-var passwordInput = (0, import_tailwind_variants21.tv)({
+var import_tailwind_variants22 = require("tailwind-variants");
+var passwordInput = (0, import_tailwind_variants22.tv)({
   slots: {
     button: "focus:outline-hidden",
     icon: "pointer-events-none text-muted-foreground"
   }
 });
-var input = (0, import_tailwind_variants21.tv)({
+var input = (0, import_tailwind_variants22.tv)({
   base: [],
   slots: {
     inputWrapper: [
@@ -1763,8 +1901,8 @@ var input = (0, import_tailwind_variants21.tv)({
 });
 
 // src/components/integration-card.ts
-var import_tailwind_variants22 = require("tailwind-variants");
-var integrationCard = (0, import_tailwind_variants22.tv)({
+var import_tailwind_variants23 = require("tailwind-variants");
+var integrationCard = (0, import_tailwind_variants23.tv)({
   slots: {
     root: "",
     header: "flex items-start justify-between gap-3",
@@ -1786,8 +1924,8 @@ var integrationCard = (0, import_tailwind_variants22.tv)({
 });
 
 // src/components/page-header.ts
-var import_tailwind_variants23 = require("tailwind-variants");
-var pageHeader = (0, import_tailwind_variants23.tv)({
+var import_tailwind_variants24 = require("tailwind-variants");
+var pageHeader = (0, import_tailwind_variants24.tv)({
   slots: {
     root: "page-header",
     titleArea: "page-header__title-area flex gap-2 flex-row items-center",
@@ -1822,8 +1960,8 @@ var pageHeader = (0, import_tailwind_variants23.tv)({
 });
 
 // src/components/page-layout.ts
-var import_tailwind_variants24 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants24.tv)({
+var import_tailwind_variants25 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants25.tv)({
   slots: {
     root: "",
     wrapper: "flex flex-wrap w-full",
@@ -1940,8 +2078,8 @@ var pageLayout = (0, import_tailwind_variants24.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants25 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants25.tv)({
+var import_tailwind_variants26 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants26.tv)({
   slots: {
     content: [
       ...popoverContentClasses,
@@ -1952,8 +2090,8 @@ var popover = (0, import_tailwind_variants25.tv)({
 });
 
 // src/components/preview-card.ts
-var import_tailwind_variants26 = require("tailwind-variants");
-var previewCard = (0, import_tailwind_variants26.tv)({
+var import_tailwind_variants27 = require("tailwind-variants");
+var previewCard = (0, import_tailwind_variants27.tv)({
   slots: {
     root: [
       "flex w-full items-start gap-3 rounded-md bg-background p-2 transition-colors",
@@ -1994,8 +2132,8 @@ var previewCard = (0, import_tailwind_variants26.tv)({
 });
 
 // src/components/related-control-chip.ts
-var import_tailwind_variants27 = require("tailwind-variants");
-var relatedControlChip = (0, import_tailwind_variants27.tv)({
+var import_tailwind_variants28 = require("tailwind-variants");
+var relatedControlChip = (0, import_tailwind_variants28.tv)({
   slots: {
     root: [
       "text-xs border rounded-full cursor-pointer hover:text-primary px-2.5 py-0.5"
@@ -2005,8 +2143,8 @@ var relatedControlChip = (0, import_tailwind_variants27.tv)({
 });
 
 // src/components/resizable.ts
-var import_tailwind_variants28 = require("tailwind-variants");
-var resizable = (0, import_tailwind_variants28.tv)({
+var import_tailwind_variants29 = require("tailwind-variants");
+var resizable = (0, import_tailwind_variants29.tv)({
   slots: {
     root: ["flex h-full w-full data-[panel-group-direction=vertical]:flex-col"],
     panel: [],
@@ -2032,8 +2170,8 @@ var resizable = (0, import_tailwind_variants28.tv)({
 });
 
 // src/components/risk-badge.ts
-var import_tailwind_variants29 = require("tailwind-variants");
-var riskBadge = (0, import_tailwind_variants29.tv)({
+var import_tailwind_variants30 = require("tailwind-variants");
+var riskBadge = (0, import_tailwind_variants30.tv)({
   slots: {
     root: ["inline-flex flex-col items-start gap-0.5"],
     label: ["inline-flex items-center gap-0.5 text-xs"],
@@ -2072,8 +2210,8 @@ var riskBadge = (0, import_tailwind_variants29.tv)({
 });
 
 // src/components/risk-indicator.ts
-var import_tailwind_variants30 = require("tailwind-variants");
-var riskIndicator = (0, import_tailwind_variants30.tv)({
+var import_tailwind_variants31 = require("tailwind-variants");
+var riskIndicator = (0, import_tailwind_variants31.tv)({
   slots: {
     base: "flex items-end gap-0.5",
     bar: "rounded-sm",
@@ -2106,8 +2244,8 @@ var riskIndicator = (0, import_tailwind_variants30.tv)({
 });
 
 // src/components/section-row.ts
-var import_tailwind_variants31 = require("tailwind-variants");
-var sectionRow = (0, import_tailwind_variants31.tv)({
+var import_tailwind_variants32 = require("tailwind-variants");
+var sectionRow = (0, import_tailwind_variants32.tv)({
   slots: {
     root: ["grid grid-cols-1 text-base/6 sm:text-sm/6", "w-full"],
     title: [
@@ -2167,8 +2305,8 @@ var sectionRow = (0, import_tailwind_variants31.tv)({
 });
 
 // src/components/separator.ts
-var import_tailwind_variants32 = require("tailwind-variants");
-var separator = (0, import_tailwind_variants32.tv)({
+var import_tailwind_variants33 = require("tailwind-variants");
+var separator = (0, import_tailwind_variants33.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: {
@@ -2180,8 +2318,8 @@ var separator = (0, import_tailwind_variants32.tv)({
 });
 
 // src/components/sidebar.ts
-var import_tailwind_variants33 = require("tailwind-variants");
-var sidebar = (0, import_tailwind_variants33.tv)({
+var import_tailwind_variants34 = require("tailwind-variants");
+var sidebar = (0, import_tailwind_variants34.tv)({
   slots: {
     provider: [
       "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full"
@@ -2269,7 +2407,7 @@ var sidebar = (0, import_tailwind_variants33.tv)({
     isMobile: false
   }
 });
-var sidebarMenuButton = (0, import_tailwind_variants33.tv)({
+var sidebarMenuButton = (0, import_tailwind_variants34.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]",
@@ -2321,7 +2459,7 @@ var sidebarMenuButton = (0, import_tailwind_variants33.tv)({
     }
   ]
 });
-var sidebarMenuAction = (0, import_tailwind_variants33.tv)({
+var sidebarMenuAction = (0, import_tailwind_variants34.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.
@@ -2341,14 +2479,14 @@ var sidebarMenuAction = (0, import_tailwind_variants33.tv)({
 });
 
 // src/components/skeleton.ts
-var import_tailwind_variants34 = require("tailwind-variants");
-var skeleton = (0, import_tailwind_variants34.tv)({
+var import_tailwind_variants35 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants35.tv)({
   base: "bg-accent animate-pulse rounded-md"
 });
 
 // src/components/skeleton-avatar.ts
-var import_tailwind_variants35 = require("tailwind-variants");
-var skeletonAvatar = (0, import_tailwind_variants35.tv)({
+var import_tailwind_variants36 = require("tailwind-variants");
+var skeletonAvatar = (0, import_tailwind_variants36.tv)({
   base: "rounded-full",
   variants: {
     size: {
@@ -2365,8 +2503,8 @@ var skeletonAvatar = (0, import_tailwind_variants35.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants36 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants36.tv)({
+var import_tailwind_variants37 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants37.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -2483,8 +2621,8 @@ var spinner = (0, import_tailwind_variants36.tv)({
 });
 
 // src/components/split-page-layout.ts
-var import_tailwind_variants37 = require("tailwind-variants");
-var splitPageLayout = (0, import_tailwind_variants37.tv)({
+var import_tailwind_variants38 = require("tailwind-variants");
+var splitPageLayout = (0, import_tailwind_variants38.tv)({
   slots: {
     root: [
       "size-full min-h-0 grid grid-cols-[1fr_10px] md:grid-cols-3 relative"
@@ -2521,8 +2659,8 @@ var splitPageLayout = (0, import_tailwind_variants37.tv)({
 });
 
 // src/components/standard-chip.ts
-var import_tailwind_variants38 = require("tailwind-variants");
-var standardChip = (0, import_tailwind_variants38.tv)({
+var import_tailwind_variants39 = require("tailwind-variants");
+var standardChip = (0, import_tailwind_variants39.tv)({
   extend: chip,
   slots: {
     root: [
@@ -2613,8 +2751,8 @@ var standardChip = (0, import_tailwind_variants38.tv)({
 });
 
 // src/components/tab-nav.ts
-var import_tailwind_variants39 = require("tailwind-variants");
-var tabNav = (0, import_tailwind_variants39.tv)({
+var import_tailwind_variants40 = require("tailwind-variants");
+var tabNav = (0, import_tailwind_variants40.tv)({
   slots: {
     base: "",
     list: [
@@ -2704,8 +2842,8 @@ var tabNav = (0, import_tailwind_variants39.tv)({
 });
 
 // src/components/table.ts
-var import_tailwind_variants40 = require("tailwind-variants");
-var table = (0, import_tailwind_variants40.tv)({
+var import_tailwind_variants41 = require("tailwind-variants");
+var table = (0, import_tailwind_variants41.tv)({
   slots: {
     container: ["overflow-x-auto whitespace-nowrap", "-mx-(--gutter)"],
     wrapper: ["inline-block min-w-full align-middle"],
@@ -2867,8 +3005,8 @@ var table = (0, import_tailwind_variants40.tv)({
 });
 
 // src/components/tabs.ts
-var import_tailwind_variants41 = require("tailwind-variants");
-var tabs = (0, import_tailwind_variants41.tv)({
+var import_tailwind_variants42 = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants42.tv)({
   slots: {
     root: "flex flex-col gap-2",
     list: [
@@ -2905,8 +3043,8 @@ var tabs = (0, import_tailwind_variants41.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants42 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants42.tv)({
+var import_tailwind_variants43 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants43.tv)({
   slots: {
     content: [
       "bg-primary-900 text-primary-foreground",
@@ -2933,6 +3071,7 @@ var tooltip = (0, import_tailwind_variants42.tv)({
   code,
   command,
   dataTable,
+  datagrid,
   dialog,
   drawer,
   dropdownMenu,

package/dist/index.mjs

@@ -1,5 +1,8 @@
 import "./chunk-XSN6P5JL.mjs";
-import "./chunk-MA4DKK64.mjs";
+import "./chunk-3ZVSVLZD.mjs";
+import {
+  standardChip
+} from "./chunk-SHHD2WUZ.mjs";
 import {
   tabNav
 } from "./chunk-ZLM6Z3W2.mjs";
@@ -12,6 +15,9 @@ import {
 import {
   tooltip
 } from "./chunk-OLYO7UPH.mjs";
+import {
+  riskIndicator
+} from "./chunk-CZMZHA7U.mjs";
 import {
   sectionRow
 } from "./chunk-I4ZIT7EK.mjs";
@@ -36,8 +42,8 @@ import {
   splitPageLayout
 } from "./chunk-W7RJG22S.mjs";
 import {
-  standardChip
-} from "./chunk-SHHD2WUZ.mjs";
+  integrationCard
+} from "./chunk-QOW6FLZ6.mjs";
 import {
   pageHeader
 } from "./chunk-HAVJ6EQ6.mjs";
@@ -59,12 +65,12 @@ import {
 import {
   riskBadge
 } from "./chunk-V2J5XG34.mjs";
-import {
-  riskIndicator
-} from "./chunk-CZMZHA7U.mjs";
 import {
   drawer
 } from "./chunk-TJDRYBGW.mjs";
+import {
+  dialog
+} from "./chunk-MWG2OZMD.mjs";
 import {
   dropdownMenu
 } from "./chunk-EXBKQDH5.mjs";
@@ -81,9 +87,6 @@ import {
   input,
   passwordInput
 } from "./chunk-UMSU2ZEG.mjs";
-import {
-  integrationCard
-} from "./chunk-QOW6FLZ6.mjs";
 import {
   callout
 } from "./chunk-XAHAVJUM.mjs";
@@ -102,12 +105,12 @@ import {
 import {
   command
 } from "./chunk-YPHFKGNI.mjs";
+import {
+  datagrid
+} from "./chunk-45KIKY4A.mjs";
 import {
   dataTable
 } from "./chunk-GNYTZGE5.mjs";
-import {
-  dialog
-} from "./chunk-MWG2OZMD.mjs";
 import {
   accordion
 } from "./chunk-TLCFFCOP.mjs";
@@ -146,6 +149,7 @@ export {
   code,
   command,
   dataTable,
+  datagrid,
   dialog,
   drawer,
   dropdownMenu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",