@opencxh/ui-kit 3.49.0 → 3.57.1

package/dist/index.js

@@ -71,7 +71,7 @@ const Ge = {
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary",
-  ghost: "btn text-gray-700",
+  ghost: "btn o__tertiary",
   destructive: "btn o__destructive"
 }, Ke = {
   xs: "px-2 py-1 text-xs",
@@ -108,9 +108,8 @@ const Ge = {
         ref: l,
         type: "button",
         className: g(
-          // Base styles
-          "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200",
-          "focus:outline-none focus:ring-1 focus:ring-offset-1",
+          // Base styles — radius/focus/colors come from the token-driven `.btn o__*` CSS
+          "inline-flex items-center justify-center transition-colors duration-200",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
           Ge[r],
@@ -1732,18 +1731,18 @@ const ur = ({
       className: "min-w-[160px] btn btn o__secondary"
     }
   ) }) : /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[240px]", children: /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ d("details", { className: "group", children: [
-    /* @__PURE__ */ d("summary", { className: "flex items-center space-x-2 cursor-pointer hover:bg-white rounded-full px-3 py-2 text-sm btn btn o__secondary", children: [
+    /* @__PURE__ */ d("summary", { className: "flex items-center space-x-2 cursor-pointer rounded-full px-3 py-2 text-sm btn btn o__secondary", children: [
       /* @__PURE__ */ e("span", { children: r.label }),
-      /* @__PURE__ */ e("span", { className: "text-gray-800", children: r.multiSelect && Array.isArray(r.value) ? r.value?.map(
+      /* @__PURE__ */ e("span", { className: "text-default", children: r.multiSelect && Array.isArray(r.value) ? r.value?.map(
         (a) => r.options?.find((s) => s.value === a)?.label
       ).join(", ") : r.options?.find((a) => a.value === r.value)?.label }),
-      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(ze, {}) })
+      /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(ze, {}) })
     ] }),
-    /* @__PURE__ */ d("div", { className: "absolute z-10 left-0 mt-1 bg-white border border-gray-100 rounded-lg shadow-sm p-2 w-48", children: [
+    /* @__PURE__ */ d("div", { className: "absolute z-10 left-0 mt-1 bg-module border border-neutral rounded-lg shadow-lvl-0 p-2 w-48", children: [
       r.options?.map((a) => /* @__PURE__ */ e(
         "button",
         {
-          className: "w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 text-sm text-gray-700 flex items-center space-x-2",
+          className: "w-full text-left px-3 py-2 rounded-md hover:bg-module-subtle text-sm text-default flex items-center space-x-2",
           onClick: () => t(a.value),
           children: /* @__PURE__ */ e(
             "span",
@@ -1758,9 +1757,9 @@ const ur = ({
       r.value && /* @__PURE__ */ e(
         "button",
         {
-          className: "w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 text-sm text-gray-700 flex items-center space-x-2 mt-2",
+          className: "w-full text-left px-3 py-2 rounded-md hover:bg-module-subtle text-sm text-default flex items-center space-x-2 mt-2",
           onClick: () => t(null),
-          children: /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-600", children: "Clear filter" })
+          children: /* @__PURE__ */ e("span", { className: "text-muted", children: "Clear filter" })
         }
       )
     ] })
@@ -1922,8 +1921,8 @@ const ur = ({
                   "text-center": o.align === "center",
                   "text-right": o.align === "right",
                   "cursor-pointer select-none": o.sortable,
-                  "sticky left-0 bg-white dark:bg-neutral-900": o.sticky === "left",
-                  "sticky right-0 bg-white dark:bg-neutral-900": o.sticky === "right"
+                  "sticky left-0 bg-module": o.sticky === "left",
+                  "sticky right-0 bg-module": o.sticky === "right"
                 }
               ),
               style: { width: o.width },
@@ -2005,8 +2004,8 @@ const ur = ({
                         "text-left": j.align === "left" || !j.align,
                         "text-center": j.align === "center",
                         "text-right": j.align === "right",
-                        "sticky left-0 bg-white dark:bg-neutral-900": j.sticky === "left",
-                        "sticky right-0 bg-white dark:bg-neutral-900": j.sticky === "right"
+                        "sticky left-0 bg-module": j.sticky === "left",
+                        "sticky right-0 bg-module": j.sticky === "right"
                       }),
                       children: j.cell ? j.cell(Y, o, w) : String(Y || "")
                     },
@@ -2358,18 +2357,21 @@ const Z = ({
       "font-semibold": t === "semibold",
       "font-bold": t === "bold"
     },
-    // Color variants
+    // Color variants. Tekst-tonen lopen via de semantische `--text-*` tokens
+    // (gedefinieerd voor light én dark in global.css) zodat ze matchen met de
+    // rest van de interface (zelfde tokens als bv. Table). De `--text-*` vars
+    // worden in `.dark` overschreven, dus geen aparte `dark:`-varianten nodig.
     {
       "text-primary": a === "primary",
       "text-secondary": a === "secondary",
-      "text-accent": a === "accent",
-      "text-success": a === "success",
+      "text-[var(--text-accent)]": a === "accent",
+      "text-[var(--text-success)]": a === "success",
       "text-warning": a === "warning",
-      "text-error": a === "error",
+      "text-[var(--text-error)]": a === "error",
       "text-info": a === "info",
-      "text-neutral": a === "neutral",
+      "text-[var(--text-default)]": a === "neutral",
       "text-current": a === "current",
-      "text-neutral-400 dark:text-neutral-500": a === "muted"
+      "text-[var(--text-muted)]": a === "muted"
     },
     // Alignment
     {
@@ -3409,25 +3411,25 @@ const rt = ({
     ] })
   ] });
 }, Er = {
-  default: "bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-200",
-  primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200",
-  secondary: "bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-200",
-  success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
-  warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
-  error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
-  info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+  default: "bg-neutral-container text-default",
+  primary: "bg-accent-container text-accent",
+  secondary: "bg-neutral-container text-muted",
+  success: "bg-success-container text-success",
+  warning: "bg-notice-container text-on-notice",
+  error: "bg-error-container text-error",
+  info: "bg-beta-container text-link"
 }, $r = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 }, zr = {
-  default: "bg-secondary-400",
-  primary: "bg-primary-500",
-  secondary: "bg-secondary-400",
-  success: "bg-green-500",
-  warning: "bg-yellow-500",
-  error: "bg-red-500",
-  info: "bg-blue-500"
+  default: "bg-neutral-fill",
+  primary: "bg-accent-fill",
+  secondary: "bg-neutral-fill",
+  success: "bg-success-fill",
+  warning: "bg-notice-fill",
+  error: "bg-error-fill",
+  info: "bg-beta-fill"
 };
 function tt({
   variant: r = "default",
@@ -4111,7 +4113,7 @@ const ot = ({
           r.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: r.icon }),
           /* @__PURE__ */ e("span", { className: "flex-1", children: r.label }),
           r.count !== void 0 && r.count > 0 && /* @__PURE__ */ e("span", { className: "ml-2 mr-1.5", children: r.count }),
-          c && /* @__PURE__ */ e("span", { className: `${a ? "collapsed" : ""}`, children: /* @__PURE__ */ e(Re, { className: "w-4 h-4 text-gray-300" }) })
+          c && /* @__PURE__ */ e("span", { className: `${a ? "collapsed" : ""}`, children: /* @__PURE__ */ e(Re, { className: "w-4 h-4 text-muted" }) })
         ]
       }
     ),
@@ -4134,7 +4136,7 @@ const ot = ({
   preMenuItemsComponent: c
 }) => /* @__PURE__ */ d("div", { className: "flex flex-col h-screen mb-6", children: [
   /* @__PURE__ */ d("div", { className: "sidebar-menu-header", children: [
-    /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-gray-800 mb-2", children: r }),
+    /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-default mb-2", children: r }),
     /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: n?.map((h, b) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: h }, b)) })
   ] }),
   c && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: c }),
@@ -4181,16 +4183,16 @@ const ot = ({
       "font-semibold": t === "semibold",
       "font-bold": t === "bold"
     },
-    // Color variants
+    // Color variants — semantische `--text-*` tokens (light+dark) net als Text/Table.
     {
       "text-primary": a === "primary",
       "text-secondary": a === "secondary",
-      "text-accent": a === "accent",
-      "text-success": a === "success",
+      "text-[var(--text-accent)]": a === "accent",
+      "text-[var(--text-success)]": a === "success",
       "text-warning": a === "warning",
-      "text-error": a === "error",
+      "text-[var(--text-error)]": a === "error",
       "text-info": a === "info",
-      "text-neutral": a === "neutral",
+      "text-[var(--text-default)]": a === "neutral",
       "text-current": a === "current"
     },
     // Alignment
@@ -4436,7 +4438,11 @@ const it = ({
   info: "bg-info",
   neutral: "bg-neutral",
   white: "bg-white",
-  module: "bg-module"
+  module: "bg-module",
+  "module-subtle": "bg-module-subtle",
+  backdrop: "bg-backdrop",
+  editor: "bg-editor",
+  input: "bg-input"
 }, Or = {
   none: "rounded-none",
   sm: "rounded-sm",
@@ -4499,7 +4505,7 @@ const it = ({
 );
 Te.displayName = "Box";
 const mt = ({ children: r, title: n, ...t }) => /* @__PURE__ */ d(Te, { background: "module", radius: "xl", shadow: "sm", ...t, children: [
-  n && /* @__PURE__ */ e("span", { className: "text-base font-medium text-gray-800 mb-2", children: n }),
+  n && /* @__PURE__ */ e("span", { className: "text-base font-medium text-default mb-2", children: n }),
   r
 ] });
 function ht({