@kopexa/theme 1.5.8 → 1.6.1

package/dist/components/table.js

@@ -26,19 +26,23 @@ module.exports = __toCommonJS(table_exports);
 var import_tailwind_variants = require("tailwind-variants");
 var table = (0, import_tailwind_variants.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",
@@ -60,15 +64,50 @@ var table = (0, import_tailwind_variants.tv)({
       "before:w-0.5",
       "before:opacity-0",
       "group-aria-[selected=true]/tr:first:before:opacity-100"
-    ]
+    ],
+    ownerCell: [
+      "min-h-[50px]",
+      "inline-flex items-center justify-center gap-2"
+    ],
+    ownerCellAvatar: [],
+    ownerCelltextWrapper: "inline-flex flex-col items-start",
+    ownerCellName: "text-xs font-medium",
+    ownerCellDescription: "text-[11px] text-muted-foreground truncate",
+    ownerCellUnassigned: "text-xs italic text-muted-foreground"
   },
   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: [
@@ -133,8 +172,10 @@ var table = (0, import_tailwind_variants.tv)({
     }
   },
   defaultVariants: {
+    variant: "default",
     layout: "auto",
     color: "default",
+    bleed: false,
     fullWidth: true
   }
 });

package/dist/components/table.mjs

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

package/dist/components/tabs.d.mts

@@ -0,0 +1,43 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const tabs: tailwind_variants.TVReturnType<{
+    size: {
+        md: {
+            list: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    trigger: string[];
+    content: string[];
+}, undefined, {
+    size: {
+        md: {
+            list: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    trigger: string[];
+    content: string[];
+}, tailwind_variants.TVReturnType<{
+    size: {
+        md: {
+            list: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    trigger: string[];
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TabsVariantProps = VariantProps<typeof tabs>;
+
+export { type TabsVariantProps, tabs };

package/dist/components/tabs.d.ts

@@ -0,0 +1,43 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const tabs: tailwind_variants.TVReturnType<{
+    size: {
+        md: {
+            list: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    trigger: string[];
+    content: string[];
+}, undefined, {
+    size: {
+        md: {
+            list: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    trigger: string[];
+    content: string[];
+}, tailwind_variants.TVReturnType<{
+    size: {
+        md: {
+            list: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    trigger: string[];
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TabsVariantProps = VariantProps<typeof tabs>;
+
+export { type TabsVariantProps, tabs };

package/dist/components/tabs.js

@@ -0,0 +1,65 @@
+"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/tabs.ts
+var tabs_exports = {};
+__export(tabs_exports, {
+  tabs: () => tabs
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants.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"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tabs
+});

package/dist/components/tabs.mjs

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

package/dist/index.css

@@ -4,19 +4,19 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-	--background: oklch(0.9851 0 0);
+	--background: var(--color-white);
 	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
+	--card: var(--color-white);
 	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
+	--popover: var(--color-white);
 	--popover-foreground: oklch(0.145 0 0);
-	--primary: var(--color-primary-800);
+	--primary: var(--color-primary-600);
 	--primary-foreground: var(--color-white);
 	--secondary: var(--color-default-200);
 	--secondary-foreground: oklch(0.205 0 0);
-	--muted: var(--color-default-100);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: var(--color-default-100);
+	--muted: var(--color-default-50);
+	--muted-foreground: var(--color-default-800);
+	--accent: var(--color-primary-50);
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: var(--color-destructive-600);
 	--destructive-foreground: var(--color-white);
@@ -35,10 +35,10 @@
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
 	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar: var(--color-primary-900);
+	--sidebar-foreground: var(--color-white);
 	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-primary-foreground:  var(--color-white);
 	--sidebar-accent:var(--color-default-200);
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: var(--color-default-200);
@@ -46,7 +46,7 @@
 }
 
 .dark {
-	--background: var(--color-primary-950);
+	--background: var(--color-primary-900);
 	--foreground: var(--color-white);
 	--card: var(--color-primary-900);
 	--card-foreground: oklch(0.985 0 0);
@@ -76,7 +76,7 @@
 	--chart-3: oklch(0.769 0.188 70.08);
 	--chart-4: oklch(0.627 0.265 303.9);
 	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
+	--sidebar: var(--color-primary-950);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
@@ -87,6 +87,30 @@
 }
 
 @theme {
+    --color-desert-storm-50: oklch(0.9831 0.0034 67.78);
+    --color-desert-storm-100: oklch(0.9406 0.0121 67.68);
+    --color-desert-storm-200: oklch(0.8755 0.0243 63.46);
+    --color-desert-storm-300: oklch(0.7943 0.04 63.4);
+    --color-desert-storm-400: oklch(0.6986 0.0578 54.9);
+    --color-desert-storm-500: oklch(0.6309 0.0714 50.37);
+    --color-desert-storm-600: oklch(0.5785 0.0752 42.41);
+    --color-desert-storm-700: oklch(0.5036 0.0654 37.66);
+    --color-desert-storm-800: oklch(0.4408 0.0533 34.25);
+    --color-desert-storm-900: oklch(0.3873 0.043 34.09);
+    --color-desert-storm-950: oklch(0.2556 0.0275 30.23);
+
+    --color-slate-gray-50: oklch(0.9769 0.0032 197.11);
+    --color-slate-gray-100: oklch(0.9569 0.0065 208.78);
+    --color-slate-gray-200: oklch(0.9167 0.0095 222.06);
+    --color-slate-gray-300: oklch(0.8639 0.0167 221.1);
+    --color-slate-gray-400: oklch(0.7983 0.0218 232.21);
+    --color-slate-gray-500: oklch(0.7354 0.0268 240.8);
+    --color-slate-gray-600: oklch(0.6647 0.0326 246.78);
+    --color-slate-gray-700: oklch(0.5925 0.0309 248.35);
+    --color-slate-gray-800: oklch(0.5154 0.0253 250.43);
+    --color-slate-gray-900: oklch(0.455 0.0194 245.39);
+    --color-slate-gray-950: oklch(0.3209 0.0109 236.95);
+
     --color-primary-50: oklch(96.58% 0.016 262.77);
     --color-primary-100: oklch(92.21% 0.037 262.15);
     --color-primary-200: oklch(84.55% 0.074 259.28);
@@ -111,17 +135,17 @@
     --color-success-900: oklch(22.65% 0.049 162.45);
     --color-success-950: oklch(18.48% 0.04 162.16);
 
-    --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-default-50: var(--color-slate-gray-50);
+    --color-default-100: var(--color-slate-gray-100);
+    --color-default-200: var(--color-slate-gray-200);
+    --color-default-300: var(--color-slate-gray-300);
+    --color-default-400: var(--color-slate-gray-400);
+    --color-default-500: var(--color-slate-gray-500);
+    --color-default-600: var(--color-slate-gray-600);
+    --color-default-700: var(--color-slate-gray-700);
+    --color-default-800: var(--color-slate-gray-800);
+    --color-default-900: var(--color-slate-gray-900);
+    --color-default-950: var(--color-slate-gray-950);
 
     --color-warning-50: oklch(97.44% 0.014 46.3);
     --color-warning-100: oklch(95.09% 0.027 49.62);
@@ -366,4 +390,50 @@
         grid-row: var(--grid-row-order-navigation);
         grid-area: navigation;
     }
+
+    .section-row {
+        display: grid;
+        gap: calc(var(--spacing) * 2);
+        grid-template-columns: auto auto;
+        grid-template-areas:
+            'title title'
+            'value-container value-container';
+    }
+
+    .section-row.has-actions {
+        grid-template-columns: auto 28px;
+        grid-template-areas:
+            'title title'
+            'value-container action';
+    }
+
+    .section-row__title {
+        grid-area: title;
+    }
+
+    .section-row__value-container {
+        grid-area: value-container;
+        display: flex;
+        justify-content: flex-start;
+    }
+
+    .section-row__action {
+        grid-area: action;
+    }
+
+    @media (min-width: theme(--breakpoint-md)) {
+        .section-row {
+            grid-template-columns: min(40%, calc(var(--spacing) * 28)) 1fr;
+		    grid-template-areas: 'title value-container';
+        }
+
+        .section-row.has-actions {
+            grid-template-columns: min(40%, calc(var(--spacing) * 28)) 1fr 28px;
+		    grid-template-areas: 'title value-container action';
+        }
+
+        .section-row__value-container {
+            justify-content: flex-end;
+        }
+    }
 }

package/dist/index.d.mts

@@ -18,8 +18,17 @@ export { InputVariantProps, input, passwordInput } from './components/input.mjs'
 export { PageHeaderVariantProps, pageHeader } from './components/page-header.mjs';
 export { PageLayoutSlots, PageLayoutVariantProps, pageLayout } from './components/page-layout.mjs';
 export { PopoverVariants, popover } from './components/popover.mjs';
+export { PreviewCardSlots, PreviewCardVariantProps, previewCard } from './components/preview-card.mjs';
+export { RiskBadgeVariantProps, riskBadge } from './components/risk-badge.mjs';
+export { RiskIndicatorVariantProps, riskIndicator } from './components/risk-indicator.mjs';
+export { SectionRowSlots, SectionRowVariantProps, sectionRow } from './components/section-row.mjs';
+export { SeparatorVariantProps, separator } from './components/separator.mjs';
+export { SidebarMenuActionVariantProps, SidebarMenuButtonVariantProps, SidebarVariantProps, sidebar, sidebarMenuAction, sidebarMenuButton } from './components/sidebar.mjs';
 export { skeleton } from './components/skeleton.mjs';
 export { SpinnerVariants, spinner } from './components/spinner.mjs';
+export { SplitPageLayoutVariantProps, splitPageLayout } from './components/split-page-layout.mjs';
+export { TabNavSlots, TabNavVariantProps, tabNav } from './components/tab-nav.mjs';
 export { TableSlots, TableVariantProps, table } from './components/table.mjs';
+export { TabsVariantProps, tabs } from './components/tabs.mjs';
 export { TooltipVariants, tooltip } from './components/tooltip.mjs';
 export { SlotsToClasses } from './utils/types.mjs';

package/dist/index.d.ts

@@ -18,8 +18,17 @@ export { InputVariantProps, input, passwordInput } from './components/input.js';
 export { PageHeaderVariantProps, pageHeader } from './components/page-header.js';
 export { PageLayoutSlots, PageLayoutVariantProps, pageLayout } from './components/page-layout.js';
 export { PopoverVariants, popover } from './components/popover.js';
+export { PreviewCardSlots, PreviewCardVariantProps, previewCard } from './components/preview-card.js';
+export { RiskBadgeVariantProps, riskBadge } from './components/risk-badge.js';
+export { RiskIndicatorVariantProps, riskIndicator } from './components/risk-indicator.js';
+export { SectionRowSlots, SectionRowVariantProps, sectionRow } from './components/section-row.js';
+export { SeparatorVariantProps, separator } from './components/separator.js';
+export { SidebarMenuActionVariantProps, SidebarMenuButtonVariantProps, SidebarVariantProps, sidebar, sidebarMenuAction, sidebarMenuButton } from './components/sidebar.js';
 export { skeleton } from './components/skeleton.js';
 export { SpinnerVariants, spinner } from './components/spinner.js';
+export { SplitPageLayoutVariantProps, splitPageLayout } from './components/split-page-layout.js';
+export { TabNavSlots, TabNavVariantProps, tabNav } from './components/tab-nav.js';
 export { TableSlots, TableVariantProps, table } from './components/table.js';
+export { TabsVariantProps, tabs } from './components/tabs.js';
 export { TooltipVariants, tooltip } from './components/tooltip.js';
 export { SlotsToClasses } from './utils/types.js';