@ztwoint/z-ui 0.1.129 → 0.1.131

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 k, { useMemo as K } from "react";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import w, { 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 { CheckboxFilter as q } from "../checkbox-filter/index.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] = w.useState(!1), [C, s] = w.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, k = 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, k) : 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: k
             }
           ),
-          (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;
 }