@ztwoint/z-ui 0.1.129 → 0.1.130

package/dist/components/table-filter/table-filter-button.js

@@ -1,6 +1,6 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as b from "react";
-import * as f from "@radix-ui/react-popover";
+import * as p from "@radix-ui/react-popover";
 import { Button as y } from "../button/button.js";
 import { useTableFilterContext as q } from "./table-filter.context.js";
 import E from "./filters/text.js";
@@ -11,33 +11,34 @@ import Q from "../assets/icons/circle-check-filled.js";
 import { SelectedFiltersDisplay as W } from "./selected-filters-display/selected-filters-display.js";
 import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChanges as S } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const ie = () => {
-  var k, A;
-  const [K, i] = b.useState(!1), n = b.useRef(null), [C, c] = b.useState(!1), {
+import { NumberBadge as Y } from "../number-badge/number-badge.js";
+const de = () => {
+  var w, A;
+  const [K, c] = b.useState(!1), n = b.useRef(null), [C, d] = b.useState(!1), {
     selectedColumn: a,
     setSelectedColumn: O,
     getFilterForColumn: P,
     hasFilterForColumn: T,
     updateColumnFilter: D,
     clearAllFilters: R,
-    resetToAppliedFilters: $,
-    applyFilters: z,
-    hasActiveFilters: h,
+    resetToAppliedFilters: B,
+    applyFilters: $,
+    hasActiveFilters: f,
     tempFilters: u,
-    filterSchema: d,
-    filter: m,
+    filterSchema: m,
+    filter: h,
     filterComponents: x = {}
-  } = q(), B = (e) => {
-    !e && C ? S(u, m.value) ? i(!0) : c(!1) : c(e);
+  } = q(), z = (e) => {
+    !e && C ? S(u, h.value) ? c(!0) : d(!1) : d(e);
   }, N = () => {
-    z(), i(!1), c(!1);
+    $(), c(!1), d(!1);
   }, L = () => {
-    $(), i(!1), c(!1);
+    B(), c(!1), d(!1);
   }, I = () => {
-    i(!1);
-  }, F = S(u, m.value), l = P(a || ""), V = () => {
+    c(!1);
+  }, F = S(u, h.value), r = P(a || ""), V = () => {
     if (!a) return null;
-    const e = d.find((o) => o.filterKey === a), s = {
+    const e = m.find((o) => o.filterKey === a), s = {
       boolean: G,
       string: E,
       number: J,
@@ -48,8 +49,8 @@ const ie = () => {
         `No filter component found for column "${e == null ? void 0 : e.filterKey}" with type "${e == null ? void 0 : e.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
       ), null;
     const U = {
-      condition: (l == null ? void 0 : l.condition) || "",
-      value: (l == null ? void 0 : l.value) || ""
+      condition: (r == null ? void 0 : r.condition) || "",
+      value: (r == null ? void 0 : r.value) || ""
     };
     return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
       j,
@@ -64,50 +65,50 @@ const ie = () => {
       },
       a
     ) }) });
-  }, H = m.loading || !1;
-  l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (n.current = l);
-  const g = d.find(
+  }, H = h.loading || !1;
+  r && (Array.isArray(r.value) && r.value.length > 0 || (r == null ? void 0 : r.value) !== "") && (n.current = r);
+  const g = m.find(
     (e) => {
       var s;
       return e.filterKey == ((s = n.current) == null ? void 0 : s.field);
     }
-  ), w = Array.isArray((k = n.current) == null ? void 0 : k.value) ? (A = n.current) == null ? void 0 : A.value.map(
+  ), k = Array.isArray((w = n.current) == null ? void 0 : w.value) ? (A = n.current) == null ? void 0 : A.value.map(
     (e) => {
       var s;
       return ((s = g == null ? void 0 : g.options) == null ? void 0 : s[e]) || 1;
     }
-  ) : [], p = w.reduce((e, s) => e + s, 0);
-  return /* @__PURE__ */ r(f.Root, { open: C, onOpenChange: B, children: [
-    /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
+  ) : [], i = k.reduce((e, s) => e + s, 0);
+  return /* @__PURE__ */ l(p.Root, { open: C, onOpenChange: z, children: [
+    /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
       y,
       {
-        variant: h ? "filled" : "stroke",
-        shade: h ? "brand" : "neutral",
+        variant: f ? "colored-stroke" : "stroke",
+        shade: f ? "brand" : "neutral",
         size: "small",
         children: [
           "Filters ",
-          h && `(${m.value.length})`
+          f && /* @__PURE__ */ t(Y, { number: i, textColor: "brand" })
         ]
       }
     ) }),
-    /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ r(
-      f.Content,
+    /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ l(
+      p.Content,
       {
         className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
         align: "start",
         children: [
-          /* @__PURE__ */ r("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
-            /* @__PURE__ */ r("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
+          /* @__PURE__ */ l("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
+            /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
               /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
-              d.map((e) => /* @__PURE__ */ r(
+              m.map((e) => /* @__PURE__ */ l(
                 "button",
                 {
                   onClick: () => O(e.filterKey),
                   className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
                   children: [
-                    /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
-                      e.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+                    /* @__PURE__ */ l("span", { className: "flex items-center gap-1", children: [
+                      e.helperText && /* @__PURE__ */ l("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
                         e.helperText,
                         ": "
                       ] }),
@@ -119,24 +120,24 @@ const ie = () => {
                 e.filterKey
               ))
             ] }),
-            /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col relative", children: [
+            /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col relative", children: [
               a ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
-              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
+              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-3", children: [
                 /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
                 /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })
               ] }) })
             ] })
           ] }),
-          (!!p || F) && /* @__PURE__ */ r("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
-            w.length > 0 ? /* @__PURE__ */ t(
+          (!!i || F) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
+            k.length > 0 ? /* @__PURE__ */ t(
               W,
               {
                 tempFilters: u,
-                filterSchema: d,
-                totalCount: p
+                filterSchema: m,
+                totalCount: i
               }
             ) : /* @__PURE__ */ t("div", { className: "w-full" }),
-            /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
               /* @__PURE__ */ t(
                 y,
                 {
@@ -158,7 +159,7 @@ const ie = () => {
                   size: "small",
                   className: "min-w-20",
                   disabled: !F,
-                  children: `Apply ${p ? p.toLocaleString() : ""}`
+                  children: `Apply ${i ? i.toLocaleString() : ""}`
                 }
               )
             ] })
@@ -177,5 +178,5 @@ const ie = () => {
   ] });
 };
 export {
-  ie as TableFilterButton
+  de as TableFilterButton
 };

package/dist/components/table-filter/table-filter-column-button.js

@@ -1,113 +1,113 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import k, { useMemo as K } from "react";
 import * as d from "@radix-ui/react-popover";
-import { Button as u } from "../button/button.js";
+import { Button as f } from "../button/button.js";
 import { useTableFilterContext as L } from "./table-filter.context.js";
 import _ from "./filters/text.js";
 import M from "./filters/boolean.js";
 import U from "./filters/number/number.js";
 import q from "./filters/checkbox.js";
-import E from "../assets/icons/circle-check-filled.js";
-import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
-import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
+import { getFilterCount as E } from "./selected-filters-display/selected-filters-display.utils.js";
+import { FilterConfirmationDialog as G } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const re = ({ filterName: n }) => {
-  const [T, a] = k.useState(!1), [f, s] = k.useState(!1), {
-    getFilterForColumn: C,
+import { NumberBadge as H } from "../number-badge/number-badge.js";
+const le = ({ filterName: n }) => {
+  const [T, a] = k.useState(!1), [C, s] = k.useState(!1), {
+    getFilterForColumn: g,
     hasAppliedFilterForColumn: O,
-    updateColumnFilter: g,
+    updateColumnFilter: b,
     applyFilters: c,
     resetToAppliedFilters: P,
     filterSchema: j,
     filterComponents: m = {},
     tempFilters: v,
     filter: p
-  } = L(), N = (o) => {
-    !o && f ? A(n, v, p.value) ? a(!0) : s(!1) : s(o);
+  } = L(), N = (t) => {
+    !t && C ? A(n, v, p.value) ? a(!0) : s(!1) : s(t);
   }, $ = () => {
     c(), a(!1), s(!1);
-  }, D = () => {
+  }, B = () => {
     P(), a(!1), s(!1);
-  }, R = () => {
+  }, D = () => {
     a(!1);
-  }, x = A(n, v, p.value), t = j.find((o) => o.filterKey === n), l = K(
-    () => C(n),
-    [n, C]
+  }, x = A(n, v, p.value), o = j.find((t) => t.filterKey === n), r = K(
+    () => g(n),
+    [n, g]
   );
-  if (!t)
+  if (!o)
     return console.warn(`Column "${n}" not found in schema`), null;
-  const S = {
+  const R = {
     boolean: M,
     string: _,
     number: U,
     checkbox: q
-  }, b = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(n), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, i]) => ({
-    label: o,
-    value: o,
+  }, F = o.type && (m == null ? void 0 : m[o.type]) || R[o.type ?? "string"], u = O(n), y = p.loading || !1, w = o.options ? Object.entries(o.options).map(([t, i]) => ({
+    label: t,
+    value: t,
     total: i
-  })) : void 0, w = l ? G(l, y) : void 0, z = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, B = () => {
-    const o = g(n, "", "");
-    c(o), s(!1);
+  })) : void 0, h = r ? E(r, w) : void 0, S = r != null && r.value ? Array.isArray(r.value) ? r.value.length : 1 : 0, z = () => {
+    const t = b(n, "", "");
+    c(t), s(!1);
   }, I = () => {
     c(), s(!1);
   };
-  return b ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
+  return F ? /* @__PURE__ */ l(d.Root, { open: C, onOpenChange: N, children: [
     /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
-      u,
+      f,
       {
-        variant: h ? "filled" : "stroke",
-        shade: h ? "brand" : "neutral",
+        variant: u ? "colored-stroke" : "stroke",
+        shade: u ? "brand" : "neutral",
         size: "small",
-        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
-            t.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
-              t.helperText,
+        children: /* @__PURE__ */ l("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ l("span", { className: "flex items-center gap-1", children: [
+            o.helperText && /* @__PURE__ */ l("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+              o.helperText,
               ": "
             ] }),
-            t.title
+            o.title
           ] }),
-          h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
-          F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-text-brand-secondary rounded-full animate-spin flex-shrink-0" })
+          u && /* @__PURE__ */ e(H, { number: h || 0, textColor: "brand" }),
+          y && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-text-brand-secondary rounded-full animate-spin flex-shrink-0" })
         ] })
       }
     ) }),
-    /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ r(
+    /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ l(
       d.Content,
       {
         className: "w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
         align: "start",
         children: [
-          F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
+          y ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-3", children: [
             /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
             /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
           ] }) }) : /* @__PURE__ */ e(
-            b,
+            F,
             {
-              value: l,
-              onChange: ({ condition: o, value: i }) => g(n, o, i),
-              filterOptions: y
+              value: r,
+              onChange: ({ condition: t, value: i }) => b(n, t, i),
+              filterOptions: w
             }
           ),
-          (x || !!z) && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-            /* @__PURE__ */ e(u, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-            x && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
+          (x || !!S) && /* @__PURE__ */ l("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+            /* @__PURE__ */ e(f, { onClick: z, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            x && /* @__PURE__ */ e(f, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${h !== void 0 ? ` ${h}` : ""}` })
           ] })
         ]
       }
     ) }),
     T && /* @__PURE__ */ e(
-      H,
+      G,
       {
-        onClose: R,
-        onRevertChanges: D,
+        onClose: D,
+        onRevertChanges: B,
         onApplyChanges: $
       }
     )
   ] }) : (console.warn(
-    `No filter component found for column "${t.filterKey}" with type "${t.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
+    `No filter component found for column "${o.filterKey}" with type "${o.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
   ), null);
 };
 export {
-  re as TableFilterColumnButton
+  le as TableFilterColumnButton
 };

package/dist/css/config/colors/semantic/base.css

@@ -127,11 +127,11 @@
   --alpha-two-900: rgba(255, 255, 255, 0.9);
 
   --shadow-custom:
-    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 1px var(--color-neutral-150);
   --shadow-default:
-    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 1px var(--color-neutral-150);
 
-  --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
+  --shadow-button-disabled: 0px 0px 0px 1px var(--neutral-100), 0px 1px 2px 0px transparent;
 }
 
 .dark {
@@ -259,11 +259,11 @@
   --alpha-two-900: rgba(0, 0, 0, 0.9);
 
   --shadow-custom:
-    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 1px var(--color-neutral-150);
   --shadow-default:
-    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 1px var(--color-neutral-150);
 
-  --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
+  --shadow-button-disabled: 0px 0px 0px 1px var(--neutral-100), 0px 1px 2px 0px transparent;
 }
 
 /* Tailwind v4 Theme Integration */

package/dist/css/config/config.css

@@ -21,8 +21,9 @@
     font-family: inherit;
   }
 }
-@import './config-deprecated.css';
+/*@import './config-deprecated.css';*/
 /* @import './colors/defaults.css'; */
+
 @import './colors/semantic/index.css';
 @import './typography/index.css';
 @import './shadows.css';

package/dist/css/config/other-variables.css

@@ -1,5 +1,5 @@
 :root {
-  --stroke-default: 0.5px;
+  --stroke-default: 1px;
   --stroke-thick: 2px;
 }