@kopexa/theme 1.5.2 → 1.5.4

package/dist/components/index.js

@@ -22,19 +22,27 @@ var components_exports = {};
 __export(components_exports, {
   alertDialog: () => alertDialog,
   avatar: () => avatar,
+  avatarGroup: () => avatarGroup,
   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(components_exports);
@@ -174,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: {
@@ -229,6 +237,19 @@ var avatar = (0, import_tailwind_variants2.tv)({
       true: {
         root: "opacity-50"
       }
+    },
+    isInGroup: {
+      true: {
+        root: [
+          "-ms-2 hover:-translate-x-3 rtl:hover:translate-x-3 transition-transform",
+          "focus-visible:-translate-x-3 rtl:focus-visible:translate-x-3"
+        ]
+      }
+    },
+    isInGridGroup: {
+      true: {
+        root: "m-0 hover:translate-x-0"
+      }
     }
   },
   defaultVariants: {
@@ -282,9 +303,23 @@ var avatar = (0, import_tailwind_variants2.tv)({
   ]
 });
 
-// src/components/button.ts
+// src/components/avatar-group.ts
 var import_tailwind_variants3 = require("tailwind-variants");
-var button = (0, import_tailwind_variants3.tv)({
+var avatarGroup = (0, import_tailwind_variants3.tv)({
+  slots: {
+    base: "flex items-center justify-center h-auto w-max",
+    count: "hover:-translate-x-0"
+  },
+  variants: {
+    isGrid: {
+      true: "inline-grid grid-cols-4 gap-3"
+    }
+  }
+});
+
+// src/components/button.ts
+var import_tailwind_variants4 = require("tailwind-variants");
+var button = (0, import_tailwind_variants4.tv)({
   base: [
     "group relative inline-flex items-center justify-center select-none",
     "box-border appearance-none",
@@ -301,13 +336,13 @@ var button = (0, import_tailwind_variants3.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: "",
@@ -326,7 +361,7 @@ var button = (0, import_tailwind_variants3.tv)({
     }
   },
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "solid",
     color: "primary",
     fullWidth: false,
@@ -431,8 +466,8 @@ var button = (0, import_tailwind_variants3.tv)({
 });
 
 // src/components/calendar.ts
-var import_tailwind_variants4 = require("tailwind-variants");
-var calendar = (0, import_tailwind_variants4.tv)({
+var import_tailwind_variants5 = require("tailwind-variants");
+var calendar = (0, import_tailwind_variants5.tv)({
   slots: {
     base: [
       "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
@@ -484,8 +519,8 @@ var calendar = (0, import_tailwind_variants4.tv)({
 });
 
 // src/components/card.ts
-var import_tailwind_variants5 = require("tailwind-variants");
-var card = (0, import_tailwind_variants5.tv)({
+var import_tailwind_variants6 = require("tailwind-variants");
+var card = (0, import_tailwind_variants6.tv)({
   slots: {
     root: [
       "flex flex-col relative overflow-hidden h-auto outline-hidden text-card-foreground bg-card box-border",
@@ -602,9 +637,19 @@ var card = (0, import_tailwind_variants5.tv)({
   }
 });
 
+// src/components/checkbox.ts
+var import_tailwind_variants7 = require("tailwind-variants");
+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_variants6 = require("tailwind-variants");
-var chip = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var chip = (0, import_tailwind_variants8.tv)({
   slots: {
     root: [
       "relative",
@@ -919,9 +964,50 @@ var chip = (0, import_tailwind_variants6.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_variants7 = require("tailwind-variants");
-var command = (0, import_tailwind_variants7.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",
@@ -939,9 +1025,54 @@ var command = (0, import_tailwind_variants7.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_variants8 = require("tailwind-variants");
-var dialog = (0, import_tailwind_variants8.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: [
@@ -1032,8 +1163,8 @@ var dialog = (0, import_tailwind_variants8.tv)({
 });
 
 // src/components/drawer.ts
-var import_tailwind_variants9 = require("tailwind-variants");
-var drawer = (0, import_tailwind_variants9.tv)({
+var import_tailwind_variants13 = require("tailwind-variants");
+var drawer = (0, import_tailwind_variants13.tv)({
   slots: {
     overlay: dialog.slots.overlay,
     content: [
@@ -1113,8 +1244,8 @@ var drawer = (0, import_tailwind_variants9.tv)({
 });
 
 // src/components/dropdown-menu.ts
-var import_tailwind_variants10 = require("tailwind-variants");
-var dropdownMenu = (0, import_tailwind_variants10.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",
@@ -1133,15 +1264,33 @@ var dropdownMenu = (0, import_tailwind_variants10.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_variants11 = require("tailwind-variants");
-var passwordInput = (0, import_tailwind_variants11.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_variants11.tv)({
+var input = (0, import_tailwind_variants16.tv)({
   base: [],
   slots: {
     inputWrapper: [
@@ -1217,13 +1366,49 @@ var input = (0, import_tailwind_variants11.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_variants12 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants12.tv)({
+var import_tailwind_variants18 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants18.tv)({
   slots: {
     root: "",
     wrapper: "flex mx-auto flex-wrap",
@@ -1320,8 +1505,8 @@ var pageLayout = (0, import_tailwind_variants12.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants13 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants13.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",
@@ -1331,9 +1516,15 @@ var popover = (0, import_tailwind_variants13.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_variants14 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants14.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",
@@ -1449,9 +1640,126 @@ var spinner = (0, import_tailwind_variants14.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_variants15 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants15.tv)({
+var import_tailwind_variants23 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants23.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -1465,18 +1773,26 @@ var tooltip = (0, import_tailwind_variants15.tv)({
 0 && (module.exports = {
   alertDialog,
   avatar,
+  avatarGroup,
   button,
   calendar,
   card,
+  checkbox,
   chip,
+  code,
   command,
+  dataTable,
   dialog,
   drawer,
   dropdownMenu,
+  heading,
   input,
+  pageHeader,
   pageLayout,
   passwordInput,
   popover,
+  skeleton,
   spinner,
+  table,
   tooltip
 });

package/dist/components/index.mjs

@@ -1,39 +1,67 @@
-import "../chunk-PWBTAIYS.mjs";
+import "../chunk-FWB233VZ.mjs";
 import {
   tooltip
 } from "../chunk-SVCFD7RR.mjs";
-import {
-  drawer
-} from "../chunk-UI2M2MFB.mjs";
-import {
-  dialog
-} from "../chunk-5DF3M5JP.mjs";
-import {
-  dropdownMenu
-} from "../chunk-EXBKQDH5.mjs";
 import {
   input,
   passwordInput
-} from "../chunk-7CM52H5K.mjs";
+} 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 {
+  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";
+import {
+  dialog
+} from "../chunk-5DF3M5JP.mjs";
+import {
+  dropdownMenu
+} from "../chunk-EXBKQDH5.mjs";
+import {
+  heading
+} from "../chunk-NWKBPO37.mjs";
 import {
   alertDialog
 } from "../chunk-CPEP2RO4.mjs";
+import {
+  avatarGroup
+} from "../chunk-XCLEKBCJ.mjs";
 import {
   avatar
-} from "../chunk-Q5DCJR2X.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";
@@ -41,27 +69,31 @@ import {
   card
 } from "../chunk-4VKJFW6Y.mjs";
 import {
-  chip
-} from "../chunk-32L6KXLV.mjs";
-import "../chunk-67PPUTSS.mjs";
-import {
-  command
-} from "../chunk-YPHFKGNI.mjs";
+  checkbox
+} from "../chunk-KPOZFVP6.mjs";
 export {
   alertDialog,
   avatar,
+  avatarGroup,
   button,
   calendar,
   card,
+  checkbox,
   chip,
+  code,
   command,
+  dataTable,
   dialog,
   drawer,
   dropdownMenu,
+  heading,
   input,
+  pageHeader,
   pageLayout,
   passwordInput,
   popover,
+  skeleton,
   spinner,
+  table,
   tooltip
 };

package/dist/components/input.js

@@ -114,7 +114,7 @@ var input = (0, import_tailwind_variants.tv)({
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "sm"
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/input.mjs

@@ -1,7 +1,7 @@
 import {
   input,
   passwordInput
-} from "../chunk-7CM52H5K.mjs";
+} from "../chunk-CQDTDA47.mjs";
 import "../chunk-25L2JS6A.mjs";
 export {
   input,