@kopexa/theme 1.5.3 → 1.5.4

package/dist/components/table.js

@@ -0,0 +1,144 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table.ts
+var table_exports = {};
+__export(table_exports, {
+  table: () => table
+});
+module.exports = __toCommonJS(table_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var table = (0, import_tailwind_variants.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
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  table
+});

package/dist/components/table.mjs

@@ -0,0 +1,6 @@
+import {
+  table
+} from "../chunk-CDTKWCOH.mjs";
+export {
+  table
+};

package/dist/index.css

@@ -10,11 +10,11 @@
 	--card-foreground: oklch(0.145 0 0);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.145 0 0);
-	--primary: var(--color-primary-900);
+	--primary: var(--color-primary-800);
 	--primary-foreground: var(--color-white);
 	--secondary: var(--color-default-200);
 	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
+	--muted: var(--color-default-100);
 	--muted-foreground: oklch(0.556 0 0);
 	--accent: var(--color-default-100);
 	--accent-foreground: oklch(0.205 0 0);
@@ -26,8 +26,8 @@
 	--warning-foreground: var(--color-white);
     --info: var(--color-info-500);
     --info-foreground: oklch(--color-black);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
+	--border: var(--color-default-200);
+	--input:var(--color-default-200);
 	--ring: oklch(0.708 0 0);
 	--chart-1: oklch(0.646 0.222 41.116);
 	--chart-2: oklch(0.6 0.118 184.704);
@@ -39,9 +39,9 @@
 	--sidebar-foreground: oklch(0.145 0 0);
 	--sidebar-primary: oklch(0.205 0 0);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent:var(--color-default-200);
 	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-border: var(--color-default-200);
 	--sidebar-ring: oklch(0.708 0 0);
 }
 
@@ -52,13 +52,13 @@
 	--card-foreground: oklch(0.985 0 0);
 	--popover: oklch(0.145 0 0);
 	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.985 0 0);
-	--primary-foreground: oklch(0.205 0 0);
+	--primary: var(--color-primary-700);
+	--primary-foreground: var(--color-white);
 	--secondary: oklch(0.269 0 0);
 	--secondary-foreground: oklch(0.985 0 0);
 	--muted: oklch(0.269 0 0);
 	--muted-foreground: oklch(0.708 0 0);
-	--accent: var(--color-default-800);
+	--accent: var(--color-primary-800);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: var(--color-destructive-600);
 	--destructive-foreground: var(--color-white);
@@ -68,8 +68,8 @@
 	--warning-foreground: var(--color-white);
     --info: var(--color-info-500);
     --info-foreground: oklch(--color-black);
-	--border: oklch(0.269 0 0);
-	--input: oklch(0.269 0 0);
+	--border: var(--color-primary-800);
+	--input: var(--color-primary-800);
 	--ring: oklch(0.439 0 0);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);
@@ -80,9 +80,9 @@
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent: var(--color-primary-800);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.269 0 0);
+	--sidebar-border: var(--color-primary-800);
 	--sidebar-ring: oklch(0.439 0 0);
 }
 
@@ -111,17 +111,17 @@
     --color-success-900: oklch(22.65% 0.049 162.45);
     --color-success-950: oklch(18.48% 0.04 162.16);
 
-    --color-default-50: #f1f1f1;
-    --color-default-100: oklch(91.34% 0.003 286.77);
-    --color-default-200: oklch(82.74% 0.004 286.56);
-    --color-default-300: oklch(73.28% 0.006 286.42);
-    --color-default-400: oklch(64.83% 0.007 286.3);
-    --color-default-500: oklch(56.1% 0.009 286.18);
-    --color-default-600: oklch(47.36% 0.011 286.02);
-    --color-default-700: oklch(38.89% 0.01 285.97);
-    --color-default-800: oklch(30.27% 0.007 286.02);
-    --color-default-900: oklch(21.03% 0.006 285.93);
-    --color-default-950: oklch(16.47% 0.004 285.98);
+    --color-default-50: oklch(0.98 0.00 248);
+    --color-default-100: oklch(0.97 0.00 265);
+    --color-default-200: oklch(0.93 0.01 265);
+    --color-default-300: oklch(0.87 0.01 258);
+    --color-default-400: oklch(0.71 0.02 261);
+    --color-default-500: oklch(0.55 0.02 264);
+    --color-default-600: oklch(0.45 0.03 257);
+    --color-default-700: oklch(0.37 0.03 260);
+    --color-default-800: oklch(0.28 0.03 257);
+    --color-default-900: oklch(0.21 0.03 265);
+    --color-default-950: oklch(0.13 0.03 262);
 
     --color-warning-50: oklch(97.44% 0.014 46.3);
     --color-warning-100: oklch(95.09% 0.027 49.62);
@@ -166,8 +166,8 @@
 	--color-card-foreground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--color-primary-950);
-	--color-primary-foreground: var(--color-white);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 	--color-secondary: var(--secondary);
 	--color-secondary-foreground: var(--secondary-foreground);
 	--color-muted: var(--muted);
@@ -202,6 +202,36 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+
+    --text-h1-core: 1.5rem;
+    --text-h1-core--line-height: 2rem;
+    --text-h1-core--font-weight: 600;
+    --text-h1-core--letter-spacing: -0.01em;
+
+    --text-h2-core: 1.25rem;
+    --text-h2-core--line-height: 1.6;
+    --text-h2-core--font-weight: 600;
+    --text-h2-core--letter-spacing: -0.01em;
+
+    --text-h3-core: 1.125rem;
+    --text-h3-core--line-height: 1.625rem;
+    --text-h3-core--font-weight: 500;
+    --text-h3-core--letter-spacing: -0.005em;
+
+    --text-h4-core: 1rem;
+    --text-h4-core--line-height: 1.5rem;
+    --text-h4-core--font-weight: 500;
+    --text-h4-core--letter-spacing: 0em;
+
+    --text-h5-core: 0.875rem;
+    --text-h5-core--line-height: 1.25rem;
+    --text-h5-core--font-weight: 500;
+    --text-h5-core--letter-spacing: 0.005em;
+
+    --text-h6-core: 0.75rem;
+    --text-h6-core--line-height: 1rem;
+    --text-h6-core--font-weight: 500;
+    --text-h6-core--letter-spacing: 0.01em;
 }
 
 @layer base {
@@ -259,4 +289,79 @@
             transform: translate(0px, 0px);
         }
     }
+}
+
+@layer components {
+    .page-header {
+        /* Grid Row Order */
+        --grid-row-order-context-area: 1;
+        --grid-row-order-leading-action: 2;
+        --grid-row-order-breadcrumbs: 2;
+        --grid-row-order-title-area: 2;
+        --grid-row-order-trailing-action: 2;
+        --grid-row-order-actions: 2;
+        --grid-row-order-description: 3;
+        --grid-row-order-navigation: 4;
+
+        /* Title Area Region Order */
+        --title-area-region-order-leading-visual: 0;
+        --title-area-region-order-title: 1;
+        --title-area-region-order-trailing-visual: 2;
+
+        /* Context Area Region Order */
+        --context-area-region-order-parent-link: 0;
+        --context-area-region-order-context-bar: 1;
+        --context-area-region-order-context-area-actions: 2;
+
+        display: grid;
+        grid-template-columns: auto auto auto auto 1fr;
+        grid-template-areas:
+            'context-area context-area context-area context-area context-area'
+            'leading-action breadcrumbs title-area trailing-action actions'
+            'description description description description description'
+            'navigation navigation navigation navigation navigation';
+
+    }
+
+    .page-header__context-area {
+        grid-area: context-area;
+        grid-row: var(--grid-row-order-context-area);
+    }
+
+    .page-header__title-area {
+        grid-area: title-area;
+        grid-row: var(--grid-row-order-title-area);
+    }
+
+    .page-header__title {
+        order: var(--title-area-region-order-title);
+    }
+
+    .page-header__leading-action {
+        grid-area: leading-action;
+    }
+
+    .page-header__leading_visual {
+        order: var(--title-area-region-order-leading-visual);
+    }
+
+    .page-header__breadcrumbs {
+        grid-row: var(--grid-row-order-breadcrumbs);
+        grid-area: breadcrumbs;
+    }
+
+    .page-header__actions {
+        grid-area: actions;
+        grid-row: var(--grid-row-order-actions);
+    }
+
+    .page-header__description {
+        grid-row: var(--grid-row-order-description);
+        grid-area: description;
+    }
+
+    .page-header__navigation {
+        grid-row: var(--grid-row-order-navigation);
+        grid-area: navigation;
+    }
 }

package/dist/index.d.mts

@@ -5,14 +5,21 @@ export { AvatarGroupSlots, AvatarGroupVariantProps, avatarGroup } from './compon
 export { ButtonVariantProps, button } from './components/button.mjs';
 export { CalendarVariantProps, calendar } from './components/calendar.mjs';
 export { CardSlots, CardVariantProps, card } from './components/card.mjs';
+export { CheckboxVariantProps, checkbox } from './components/checkbox.mjs';
 export { ChipSlots, ChipVariantProps, chip } from './components/chip.mjs';
+export { CodeVariantProps, code } from './components/code.mjs';
 export { CommandVariants, command } from './components/command.mjs';
+export { DataTableVariants, dataTable } from './components/data-table.mjs';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.mjs';
 export { DrawerVariantProps, drawer } from './components/drawer.mjs';
 export { DropdownMenuVariantProps, dropdownMenu } from './components/dropdown-menu.mjs';
+export { HeadingVariantProps, heading } from './components/heading.mjs';
 export { InputVariantProps, input, passwordInput } from './components/input.mjs';
+export { PageHeaderVariantProps, pageHeader } from './components/page-header.mjs';
 export { PageLayoutVariantProps, pageLayout } from './components/page-layout.mjs';
 export { PopoverVariants, popover } from './components/popover.mjs';
+export { skeleton } from './components/skeleton.mjs';
 export { SpinnerVariants, spinner } from './components/spinner.mjs';
+export { TableSlots, TableVariantProps, table } from './components/table.mjs';
 export { TooltipVariants, tooltip } from './components/tooltip.mjs';
 export { SlotsToClasses } from './utils/types.mjs';

package/dist/index.d.ts

@@ -5,14 +5,21 @@ export { AvatarGroupSlots, AvatarGroupVariantProps, avatarGroup } from './compon
 export { ButtonVariantProps, button } from './components/button.js';
 export { CalendarVariantProps, calendar } from './components/calendar.js';
 export { CardSlots, CardVariantProps, card } from './components/card.js';
+export { CheckboxVariantProps, checkbox } from './components/checkbox.js';
 export { ChipSlots, ChipVariantProps, chip } from './components/chip.js';
+export { CodeVariantProps, code } from './components/code.js';
 export { CommandVariants, command } from './components/command.js';
+export { DataTableVariants, dataTable } from './components/data-table.js';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.js';
 export { DrawerVariantProps, drawer } from './components/drawer.js';
 export { DropdownMenuVariantProps, dropdownMenu } from './components/dropdown-menu.js';
+export { HeadingVariantProps, heading } from './components/heading.js';
 export { InputVariantProps, input, passwordInput } from './components/input.js';
+export { PageHeaderVariantProps, pageHeader } from './components/page-header.js';
 export { PageLayoutVariantProps, pageLayout } from './components/page-layout.js';
 export { PopoverVariants, popover } from './components/popover.js';
+export { skeleton } from './components/skeleton.js';
 export { SpinnerVariants, spinner } from './components/spinner.js';
+export { TableSlots, TableVariantProps, table } from './components/table.js';
 export { TooltipVariants, tooltip } from './components/tooltip.js';
 export { SlotsToClasses } from './utils/types.js';