@ztwoint/z-ui 0.1.78 → 0.1.80

package/dist/components/assets/icons/chevron-left.js

@@ -1,20 +1,16 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-function h({ fill: r = "currentColor", title: t = "chevron left", ...o }) {
-  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...o, children: [
-    /* @__PURE__ */ e("title", { children: t }),
-    /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+function i({ fill: e = "currentColor", title: r = "chevron left", ...h }) {
+  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...h, children: [
+    /* @__PURE__ */ t("title", { children: r }),
+    /* @__PURE__ */ t("g", { fill: e, children: /* @__PURE__ */ t(
       "path",
       {
-        d: "M8.75 11.55L4.2 7l4.55-4.55",
-        fill: "none",
-        stroke: r,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2"
+        d: "M9.04222 11.5852C8.73911 11.8883 8.24772 11.8883 7.94461 11.5852L3.90816 7.54877C3.60517 7.24565 3.60511 6.75424 3.90816 6.45115L7.94461 2.4147C8.2477 2.1118 8.73913 2.1118 9.04222 2.4147C9.34523 2.71778 9.34517 3.20921 9.04222 3.51231L5.55457 6.99996L9.04222 10.4876C9.34528 10.7908 9.34533 11.2821 9.04222 11.5852Z",
+        fill: e
       }
     ) })
   ] });
 }
 export {
-  h as default
+  i as default
 };

package/dist/components/column-reorder/column-visibility-select.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface ColumnVisibilitySelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+export declare const ColumnVisibilitySelect: React.FC<ColumnVisibilitySelectProps>;
+export default ColumnVisibilitySelect;

package/dist/components/column-reorder/column-visibility.hook.d.ts

@@ -0,0 +1,24 @@
+import { ColumnType } from './column-reorder.type';
+export type ColumnVisibilityValue = string;
+export interface UseColumnVisibilityOptions {
+    /** Initial map of columnId -> visibility value */
+    initial?: Record<string, ColumnVisibilityValue>;
+    /** Default value to use when a column has no entry */
+    defaultValue?: ColumnVisibilityValue;
+}
+export interface UseColumnVisibilityResult {
+    /** Map of columnId -> visibility setting */
+    settings: Record<string, ColumnVisibilityValue>;
+    /** Read a column's visibility with default fallback */
+    get: (columnId: string) => ColumnVisibilityValue;
+    /** Update a column's visibility */
+    set: (columnId: string, value: ColumnVisibilityValue) => void;
+    /** Bulk set/reset settings (replaces entire state) */
+    setAll: (next: Record<string, ColumnVisibilityValue>) => void;
+}
+/**
+ * Manages per-column visibility settings with sensible defaults.
+ * Keeps UI concerns separate from state management.
+ */
+export declare function useColumnVisibility(columns: ColumnType[], options?: UseColumnVisibilityOptions): UseColumnVisibilityResult;
+export default useColumnVisibility;

package/dist/components/column-reorder/components/column-item/column-item.type.d.ts

@@ -1,4 +1,5 @@
 import { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { ReactNode } from 'react';
 import { ColumnType } from '../../column-reorder.type';
 export type ColumnItemState = {
     type: 'idle';
@@ -15,5 +16,5 @@ export interface ColumnItemProps {
     column: ColumnType;
     index: number;
     onRemove?: (columnId: string) => void;
-    renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => React.ReactNode;
+    renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => ReactNode;
 }

package/dist/components/table/components/pagination/pagination.js

@@ -40,8 +40,8 @@ const p = () => /* @__PURE__ */ e("span", { className: S.ellipsis, children: "..
             "aria-label": `${o.page} ${a}`,
             "aria-current": i ? "page" : void 0,
             className: _(
-              "text-text-neutral-secondary hover:bg-button-secondary-surface-pressed",
-              i && "border border-button-primary-brand-surface-default text-text-neutral-primary bg-button-secondary-surface-pressed "
+              "text-text-neutral-secondary hover:bg-btn-secondary-surface-pressed",
+              i && "border border-btn-primary-brand-surface-default text-text-neutral-primary bg-btn-secondary-surface-pressed"
             ),
             style: {
               borderStyle: i ? "solid" : "none",

package/dist/components/table-filter/filters/checkbox.js

@@ -1,9 +1,10 @@
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { useState as i, useEffect as f } from "react";
-import { Virtuoso as y } from "react-virtuoso";
-import { MagnifierIcon as k } from "../../assets/icons/magnifier-icon.js";
+import { Virtuoso as k } from "react-virtuoso";
+import { MagnifierIcon as y } from "../../assets/icons/magnifier-icon.js";
 import S from "../../assets/icons/x.js";
-const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange: d, filterOptions: n = [] }) => {
+import { Z2Checkbox as w } from "../../checkbox/checkbox.js";
+const V = ["includesAny", "includesAll", "excludes"], I = ({ value: r, onChange: d, filterOptions: n = [] }) => {
   const [c, o] = i([]), [u, m] = i(""), [x, h] = i(n), p = (l) => {
     m(l.target.value);
     const e = n.filter(
@@ -12,23 +13,22 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
     h(e);
   };
   f(() => {
-    r.condition || d({ condition: w[0] });
+    r.condition || d({ condition: V[0] });
   }, []), f(() => {
     Array.isArray(r.value) ? o(r.value.filter(Boolean)) : o([]);
   }, [r.value]);
   const b = (l, e) => {
     let a;
-    e ? a = [...c, l] : a = c.filter((C) => C !== l), o(a), d({ value: a });
+    e ? a = [...c, l] : a = c.filter((g) => g !== l), o(a), d({ value: a });
   }, v = () => {
     m(""), h(n);
-  }, g = (l) => c.includes(l), N = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
+  }, C = (l) => c.includes(l), N = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
     /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
       /* @__PURE__ */ t(
-        "input",
+        w,
         {
-          type: "checkbox",
-          checked: g(e.value),
-          onChange: (a) => b(e.value, a.target.checked)
+          checked: C(e.value),
+          onCheckedChange: (a) => b(e.value, a === !0)
         }
       ),
       /* @__PURE__ */ t("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: e.label })
@@ -41,7 +41,7 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
   ] });
   return n.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm p-4", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ s("div", { className: "relative border-b border-stroke-solid-medium", children: [
-      /* @__PURE__ */ t(k, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ t(y, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
       /* @__PURE__ */ t(
         "input",
         {
@@ -54,7 +54,7 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
       u && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: v, children: /* @__PURE__ */ t(S, {}) })
     ] }),
     /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(
-      y,
+      k,
       {
         data: x,
         itemContent: N,
@@ -66,5 +66,5 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
   ] });
 };
 export {
-  B as default
+  I as default
 };

package/dist/components/table-filter/selected-filters-display/selected-filters-display.js

@@ -8,7 +8,7 @@ const u = ({
   const l = d(r, s), n = o(l);
   return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2.5 max-w-md", children: [
     n > 0 && /* @__PURE__ */ e("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: [
-      n,
+      n.toLocaleString(),
       " total"
     ] }),
     /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2.5 max-w-md", children: l.map((t, c) => /* @__PURE__ */ e(m.Fragment, { children: [
@@ -17,7 +17,7 @@ const u = ({
         " ",
         t.count !== void 0 && /* @__PURE__ */ e(i, { children: [
           "[",
-          /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.count }),
+          /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.count.toLocaleString() }),
           "]"
         ] })
       ] }) }),

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

@@ -1,15 +1,15 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as F from "react";
-import * as m from "@radix-ui/react-popover";
+import * as d from "@radix-ui/react-popover";
 import { Button as x } from "../button/button.js";
 import { useTableFilterContext as H } from "./table-filter.context.js";
-import U from "./filters/text.js";
-import V from "./filters/boolean.js";
-import q from "./filters/number/number.js";
-import E from "./filters/checkbox.js";
-import G from "../assets/icons/circle-check-filled.js";
-import { SelectedFiltersDisplay as J } from "./selected-filters-display/selected-filters-display.js";
-import { createFilterDisplayItems as L, calculateTotalCount as M } from "./selected-filters-display/selected-filters-display.utils.js";
+import L from "./filters/text.js";
+import U from "./filters/boolean.js";
+import V from "./filters/number/number.js";
+import q from "./filters/checkbox.js";
+import E from "../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as G } from "./selected-filters-display/selected-filters-display.js";
+import { createFilterDisplayItems as J, calculateTotalCount as M } from "./selected-filters-display/selected-filters-display.utils.js";
 import { FilterConfirmationDialog as Q } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChanges as N } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 const ne = () => {
@@ -17,34 +17,34 @@ const ne = () => {
     selectedColumn: r,
     setSelectedColumn: k,
     getFilterForColumn: K,
-    hasFilterForColumn: j,
-    updateColumnFilter: A,
-    clearAllFilters: D,
-    resetToAppliedFilters: O,
-    applyFilters: P,
-    hasActiveFilters: d,
+    hasFilterForColumn: S,
+    updateColumnFilter: j,
+    clearAllFilters: A,
+    resetToAppliedFilters: D,
+    applyFilters: O,
+    hasActiveFilters: h,
     tempFilters: i,
     filterSchema: c,
-    filter: h,
-    filterComponents: p = {}
-  } = H(), S = (e) => {
-    !e && g ? N(i, h.value) ? a(!0) : n(!1) : n(e);
+    filter: p,
+    filterComponents: f = {}
+  } = H(), P = (e) => {
+    !e && g ? N(i, p.value) ? a(!0) : n(!1) : n(e);
   }, v = () => {
-    P(), a(!1), n(!1);
+    O(), a(!1), n(!1);
   }, T = () => {
     a(!1), n(!1);
   }, $ = () => {
-    O(), a(!1), n(!1);
+    D(), a(!1), n(!1);
   }, R = () => {
     a(!1);
-  }, b = N(i, h.value), z = L(i, c), f = M(z), B = () => {
+  }, b = N(i, p.value), z = J(i, c), m = M(z), B = () => {
     if (!r) return null;
     const e = c.find((o) => o.filterKey === r), y = {
-      boolean: V,
-      string: U,
-      number: q,
-      checkbox: E
-    }, C = (e == null ? void 0 : e.type) && (p == null ? void 0 : p[e.type]) || y[(e == null ? void 0 : e.type) ?? "string"];
+      boolean: U,
+      string: L,
+      number: V,
+      checkbox: q
+    }, C = (e == null ? void 0 : e.type) && (f == null ? void 0 : f[e.type]) || y[(e == null ? void 0 : e.type) ?? "string"];
     if (!C)
       return console.warn(
         `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".`
@@ -57,7 +57,7 @@ const ne = () => {
       C,
       {
         value: I,
-        onChange: ({ condition: o, value: u }) => A(r, o, u),
+        onChange: ({ condition: o, value: u }) => j(r, o, u),
         filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, u]) => ({
           label: o,
           value: o,
@@ -67,21 +67,21 @@ const ne = () => {
       r
     ) }) });
   };
-  return /* @__PURE__ */ l(m.Root, { open: g, onOpenChange: S, children: [
-    /* @__PURE__ */ t(m.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l(d.Root, { open: g, onOpenChange: P, children: [
+    /* @__PURE__ */ t(d.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
       x,
       {
-        variant: d ? "filled" : "stroke",
-        shade: d ? "brand" : "neutral",
+        variant: h ? "filled" : "stroke",
+        shade: h ? "brand" : "neutral",
         size: "small",
         children: [
           "Filters ",
-          d && `(${h.value.length})`
+          h && `(${p.value.length})`
         ]
       }
     ) }),
-    /* @__PURE__ */ t(m.Portal, { children: /* @__PURE__ */ l(
-      m.Content,
+    /* @__PURE__ */ t(d.Portal, { children: /* @__PURE__ */ l(
+      d.Content,
       {
         className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
@@ -97,7 +97,7 @@ const ne = () => {
                   className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors rounded-lg ${r === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
                   children: [
                     /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                    j(e.filterKey) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                    S(e.filterKey) && /* @__PURE__ */ t(E, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
                   ]
                 },
                 e.filterKey
@@ -105,11 +105,11 @@ const ne = () => {
             ] }),
             /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? B() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
           ] }),
-          (!!f || b) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
-            /* @__PURE__ */ t(J, { selectedFilters: i, schema: c }),
+          (!!m || b) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
+            /* @__PURE__ */ t(G, { selectedFilters: i, schema: c }),
             /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-              !!f && /* @__PURE__ */ t(x, { onClick: D, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-              !!b && /* @__PURE__ */ t(
+              !!m && /* @__PURE__ */ t(x, { onClick: A, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+              /* @__PURE__ */ t(
                 x,
                 {
                   onClick: v,
@@ -117,7 +117,8 @@ const ne = () => {
                   shade: "neutral",
                   size: "small",
                   className: "min-w-20",
-                  children: `Apply ${f || ""}`
+                  disabled: !b,
+                  children: `Apply ${m ? m.toLocaleString() : ""}`
                 }
               )
             ] })