@ztwoint/z-ui 0.1.85 → 0.1.87

package/dist/components/assets/icons/index.d.ts

@@ -34,3 +34,5 @@ export { default as XIcon } from './x';
 export { default as Z2Icon } from './z2-icon';
 export { default as Z2SlashIcon } from './z2-slash';
 export { default as Z2DataIcon } from './z2data';
+export { default as Vector3Icon } from './vector_3';
+export { default as TableCols2Icon } from './table-cols-2';

package/dist/components/assets/icons/table-cols-2.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function TableCols2({ fill, secondaryfill, strokewidth, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default TableCols2;

package/dist/components/assets/icons/table-cols-2.js

@@ -0,0 +1,60 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+function a({
+  fill: e = "currentColor",
+  secondaryfill: r,
+  strokewidth: n = 1,
+  width: i = "1em",
+  height: s = "1em",
+  title: d = "badge 13",
+  ...h
+}) {
+  return r = r || e, /* @__PURE__ */ o(
+    "svg",
+    {
+      height: s,
+      width: i,
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...h,
+      children: [
+        /* @__PURE__ */ t("title", { children: d }),
+        /* @__PURE__ */ o("g", { fill: e, children: [
+          /* @__PURE__ */ t(
+            "line",
+            {
+              fill: "none",
+              stroke: r,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: n,
+              x1: "10",
+              x2: "10",
+              y1: "17",
+              y2: "3"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "rect",
+            {
+              height: "14",
+              width: "14",
+              fill: "none",
+              rx: "3",
+              ry: "3",
+              stroke: e,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              transform: "translate(0 20) rotate(-90)",
+              x: "3",
+              y: "3"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/components/assets/icons/vector_3.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function Vector3({ fill, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Vector3;

package/dist/components/assets/icons/vector_3.js

@@ -0,0 +1,34 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+function l({
+  fill: r = "currentColor",
+  width: t = "1em",
+  height: o = "1em",
+  title: n = "Vector",
+  ...i
+}) {
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      height: o,
+      width: t,
+      viewBox: "0 0 9 9",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...i,
+      children: [
+        /* @__PURE__ */ e("title", { children: n }),
+        /* @__PURE__ */ e("g", { fill: "none", children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M1 1V1C1 4.86599 4.13401 8 8 8V8",
+            stroke: r,
+            strokeLinecap: "round",
+            strokeOpacity: "1"
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/components/table-card/table-card.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { Table as r } from "../table/table-provider.js";
 import "react";
 import { cn as d } from "../../lib/utils.js";
@@ -47,8 +47,8 @@ const we = ({
   loading: b,
   emptyMessage: H,
   className: j,
-  rounded: n = !0,
-  bordered: i = !0,
+  rounded: i = !0,
+  bordered: c = !0,
   showHeader: g = !0,
   headerClassName: k,
   search: m,
@@ -63,35 +63,35 @@ const we = ({
   showFooter: P = !0,
   footerClassName: T,
   pagination: o,
-  paginationInfo: c,
-  paginationQuickJumper: a,
+  paginationInfo: n,
+  paginationQuickJumper: s,
   error: x = !1,
   dataSourceError: _ = !1
 }) => {
   var f;
   if (x)
-    return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+    return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(S, { className: "mt-1.5" }),
-      /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ e("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
         /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again later" }),
         typeof x == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: x })
       ] })
     ] }) });
-  const N = a && a.totalPage && a.totalPage >= 2, v = o && o.totalPage && o.totalPage >= 2 || !!c || N, C = m || t || h || u, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
-  return /* @__PURE__ */ s("div", { className: d("flex flex-col overflow-hidden relative", j), children: [
-    /* @__PURE__ */ s(r, { dataSource: w, schema: B, emptyMessage: H, children: [
-      g && C && /* @__PURE__ */ s(
+  const C = s && s.totalPage && s.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!n || C, v = m || t || h || u, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
+  return /* @__PURE__ */ a("div", { className: d("flex flex-col overflow-hidden relative", j), children: [
+    /* @__PURE__ */ a(r, { dataSource: w, schema: B, emptyMessage: H, children: [
+      g && v && /* @__PURE__ */ a(
         r.Header,
         {
           className: d(
             "flex-shrink-0",
-            i && "border-stroke-solid-medium border-1 border-b-0",
-            n && "rounded-t-xl",
+            c && "border-stroke-solid-medium border-1 border-b-0",
+            i && "rounded-t-xl",
             k
           ),
           children: [
-            /* @__PURE__ */ s(r.HeaderContent, { children: [
+            /* @__PURE__ */ a(r.HeaderContent, { children: [
               h && h,
               m && /* @__PURE__ */ e(
                 r.Search,
@@ -105,14 +105,15 @@ const we = ({
                   className: m.className
                 }
               ),
-              t && /* @__PURE__ */ s(
+              t && /* @__PURE__ */ a(
                 p,
                 {
                   filterSchema: t.filterSchema,
                   filter: {
                     value: t.value || [],
                     onChange: t.onChange || (() => {
-                    })
+                    }),
+                    onDynamicChange: t.onDynamicChange
                   },
                   children: [
                     R && /* @__PURE__ */ e(p.FilterButton, {}),
@@ -133,44 +134,44 @@ const we = ({
           sort: l == null ? void 0 : l.sort,
           className: d(
             "flex-1 min-h-0",
-            i && "border-stroke-solid-light border-1",
-            n && !(g && C) && "rounded-t-xl",
-            n && !(P && v) && "rounded-b-xl",
-            i && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
-            i && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
+            c && "border-stroke-solid-light border-1",
+            i && !(g && v) && "rounded-t-xl",
+            i && !(P && N) && "rounded-b-xl",
+            c && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
+            c && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
             l == null ? void 0 : l.className
           ),
           stickyHeader: l == null ? void 0 : l.stickyHeader
         }
       ),
-      P && v && /* @__PURE__ */ s(
+      P && N && /* @__PURE__ */ a(
         r.Footer,
         {
           className: d(
             "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
-            i && "border",
-            n && "rounded-b-xl",
+            c && "border",
+            i && "rounded-b-xl",
             T
           ),
           children: [
-            c ? /* @__PURE__ */ e(r.FooterContent, { children: /* @__PURE__ */ e(
+            n ? /* @__PURE__ */ e(r.FooterContent, { children: /* @__PURE__ */ e(
               r.PaginationInfo,
               {
-                showTotal: c.showTotal,
-                totalItems: c.totalItems,
-                currentPage: c.currentPage,
-                itemsPerPage: c.itemsPerPage
+                showTotal: n.showTotal,
+                totalItems: n.totalItems,
+                currentPage: n.currentPage,
+                itemsPerPage: n.itemsPerPage
               }
-            ) }) : a || o ? /* @__PURE__ */ e(r.FooterContent, { children: null }) : null,
-            (a || o) && /* @__PURE__ */ s(r.FooterContent, { children: [
-              N && /* @__PURE__ */ e(
+            ) }) : s || o ? /* @__PURE__ */ e(r.FooterContent, { children: null }) : null,
+            (s || o) && /* @__PURE__ */ a(r.FooterContent, { children: [
+              C && /* @__PURE__ */ e(
                 r.PaginationQuickJumper,
                 {
-                  currentPage: a.currentPage,
-                  totalPage: a.totalPage,
-                  onChange: a.onChange || (() => {
+                  currentPage: s.currentPage,
+                  totalPage: s.totalPage,
+                  onChange: s.onChange || (() => {
                   }),
-                  disabled: a.disabled
+                  disabled: s.disabled
                 }
               ),
               o && /* @__PURE__ */ e(
@@ -188,7 +189,7 @@ const we = ({
         }
       )
     ] }),
-    b && /* @__PURE__ */ e("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
+    b && /* @__PURE__ */ e("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ a("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("p", { className: "text-text-neutral-primary font-medium", children: "Loading..." })
     ] }) })

package/dist/components/table-card/table-card.type.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { TableProps, TableSchema, TableSearch, TableSort } from '../table/table.type';
-import { TableFilter, FilterSchema } from '../table-filter/table-filter.type';
+import { TableFilter, FilterRule, FilterSchema } from '../table-filter/table-filter.type';
 import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../table/components/pagination/pagination.type';
 export interface TableCardProps {
     dataSource: Record<string, unknown>[];
@@ -17,6 +17,7 @@ export interface TableCardProps {
         quickFilters?: string[];
         showFilterButton?: boolean;
         filterSchema: FilterSchema;
+        onDynamicChange?: (filters: FilterRule[]) => void;
     };
     headerLeftContent?: React.ReactNode;
     headerActions?: React.ReactNode;

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

@@ -1,25 +1,21 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useEffect as n } from "react";
-const d = ["equals", "notEqual"], u = ({ value: t, onChange: s }) => {
-  n(() => {
-    t.condition || s({ condition: d[0] });
-  }, []);
-  const i = (r, a) => {
-    s(a ? { value: r } : { value: "" });
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+const c = ({ value: e, onChange: l }) => {
+  const i = (s, d) => {
+    l(d ? { value: s } : { value: "" });
   };
-  return /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ l("div", { className: "p-4 space-y-3", children: [
-    /* @__PURE__ */ l("label", { className: "flex items-center p-3 rounded-lg border border-stroke-solid-light hover:border-stroke-solid-medium hover:bg-gray-50 transition-all duration-200 cursor-pointer group", children: [
-      /* @__PURE__ */ l("div", { className: "relative", children: [
-        /* @__PURE__ */ e(
+  return /* @__PURE__ */ r("div", { className: "w-full", children: /* @__PURE__ */ t("div", { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ t("label", { className: "flex items-center p-3 rounded-lg border border-stroke-solid-light hover:border-stroke-solid-medium hover:bg-gray-50 transition-all duration-200 cursor-pointer group", children: [
+      /* @__PURE__ */ t("div", { className: "relative", children: [
+        /* @__PURE__ */ r(
           "input",
           {
             type: "checkbox",
-            checked: t.value === "true",
-            onChange: (r) => i("true", r.target.checked),
+            checked: (e == null ? void 0 : e.value) === "true",
+            onChange: (s) => i("true", s.target.checked),
             className: "w-5 h-5 rounded border-2 border-stroke-solid-medium text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
           }
         ),
-        t.value === "true" && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+        (e == null ? void 0 : e.value) === "true" && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ r(
           "path",
           {
             fillRule: "evenodd",
@@ -28,26 +24,26 @@ const d = ["equals", "notEqual"], u = ({ value: t, onChange: s }) => {
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ l("div", { className: "ml-3 flex-1", children: [
-        /* @__PURE__ */ l("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-text-neutral-primary", children: "True" }),
-          t.value === "true" && /* @__PURE__ */ e("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800", children: "Selected" })
+      /* @__PURE__ */ t("div", { className: "ml-3 flex-1", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ r("span", { className: "text-sm font-medium text-text-neutral-primary", children: "True" }),
+          (e == null ? void 0 : e.value) === "true" && /* @__PURE__ */ r("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800", children: "Selected" })
         ] }),
-        /* @__PURE__ */ e("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with true values" })
+        /* @__PURE__ */ r("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with true values" })
       ] })
     ] }),
-    /* @__PURE__ */ l("label", { className: "flex items-center p-3 rounded-lg border border-stroke-solid-light hover:border-stroke-solid-medium hover:bg-gray-50 transition-all duration-200 cursor-pointer group", children: [
-      /* @__PURE__ */ l("div", { className: "relative", children: [
-        /* @__PURE__ */ e(
+    /* @__PURE__ */ t("label", { className: "flex items-center p-3 rounded-lg border border-stroke-solid-light hover:border-stroke-solid-medium hover:bg-gray-50 transition-all duration-200 cursor-pointer group", children: [
+      /* @__PURE__ */ t("div", { className: "relative", children: [
+        /* @__PURE__ */ r(
           "input",
           {
             type: "checkbox",
-            checked: t.value === "false",
-            onChange: (r) => i("false", r.target.checked),
+            checked: (e == null ? void 0 : e.value) === "false",
+            onChange: (s) => i("false", s.target.checked),
             className: "w-5 h-5 rounded border-2 border-stroke-solid-medium text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
           }
         ),
-        t.value === "false" && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+        (e == null ? void 0 : e.value) === "false" && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ r(
           "path",
           {
             fillRule: "evenodd",
@@ -56,16 +52,16 @@ const d = ["equals", "notEqual"], u = ({ value: t, onChange: s }) => {
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ l("div", { className: "ml-3 flex-1", children: [
-        /* @__PURE__ */ l("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-text-neutral-primary", children: "False" }),
-          t.value === "false" && /* @__PURE__ */ e("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800", children: "Selected" })
+      /* @__PURE__ */ t("div", { className: "ml-3 flex-1", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ r("span", { className: "text-sm font-medium text-text-neutral-primary", children: "False" }),
+          (e == null ? void 0 : e.value) === "false" && /* @__PURE__ */ r("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800", children: "Selected" })
         ] }),
-        /* @__PURE__ */ e("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with false values" })
+        /* @__PURE__ */ r("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with false values" })
       ] })
     ] })
   ] }) });
 };
 export {
-  u as default
+  c as default
 };

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

@@ -1,63 +1,61 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useState as i, useEffect as f } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { useState as i, useEffect as N } from "react";
 import { Virtuoso as k } from "react-virtuoso";
 import { MagnifierIcon as y } from "../../assets/icons/magnifier-icon.js";
 import S from "../../assets/icons/x.js";
 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) => {
+const E = ({ value: s, onChange: h, filterOptions: n = [] }) => {
+  const [o, c] = i([]), [d, m] = i(""), [f, u] = i(n), x = (l) => {
     m(l.target.value);
     const e = n.filter(
       (a) => a.label.toLowerCase().includes(l.target.value.toLowerCase())
     );
-    h(e);
+    u(e);
   };
-  f(() => {
-    r.condition || d({ condition: V[0] });
-  }, []), f(() => {
-    Array.isArray(r.value) ? o(r.value.filter(Boolean)) : o([]);
-  }, [r.value]);
-  const b = (l, e) => {
+  N(() => {
+    s && Array.isArray(s.value) ? c(s.value.filter(Boolean) ?? []) : c([]);
+  }, [s]);
+  const p = (l, e) => {
     let a;
-    e ? a = [...c, l] : a = c.filter((g) => g !== l), o(a), d({ value: a });
-  }, v = () => {
-    m(""), h(n);
-  }, 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: [
+    e ? a = [...o, l] : a = o.filter((v) => v !== l), c(a), h({ value: a });
+  }, b = () => {
+    m(""), u(n);
+  }, C = (l) => o.includes(l), g = (l, e) => /* @__PURE__ */ r("div", { className: "flex justify-between items-center py-2 px-3", children: [
+    /* @__PURE__ */ r("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
       /* @__PURE__ */ t(
         w,
         {
           checked: C(e.value),
-          onCheckedChange: (a) => b(e.value, a === !0)
+          onCheckedChange: (a) => p(e.value, a === !0)
         }
       ),
       /* @__PURE__ */ t("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: e.label })
     ] }),
-    e.total && /* @__PURE__ */ s("span", { className: "text-text-neutral-muted text-sm", children: [
+    e.total && /* @__PURE__ */ r("span", { className: "text-text-neutral-muted text-sm", children: [
       "[",
       e.total,
       "]"
     ] })
   ] });
-  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: [
+  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__ */ r("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ r("div", { className: "relative border-b border-stroke-solid-medium", children: [
       /* @__PURE__ */ t(y, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
       /* @__PURE__ */ t(
         "input",
         {
           placeholder: "Search options",
-          value: u,
-          onChange: p,
+          value: d,
+          onChange: x,
           className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-8 leading-none-medium-sm w-full"
         }
       ),
-      u && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: v, children: /* @__PURE__ */ t(S, {}) })
+      d && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: b, children: /* @__PURE__ */ t(S, {}) })
     ] }),
     /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(
       k,
       {
-        data: x,
-        itemContent: N,
+        data: f,
+        itemContent: g,
         className: "h-full min-h-60",
         style: { height: "100%" },
         overscan: 5
@@ -66,5 +64,5 @@ const V = ["includesAny", "includesAll", "excludes"], I = ({ value: r, onChange:
   ] });
 };
 export {
-  I as default
+  E as default
 };

package/dist/components/table-filter/filters/number/number.hook.d.ts

@@ -1,14 +1,5 @@
-interface UseNumberFilterProps {
-    value: {
-        condition: string;
-        value: string;
-    };
-    onChange: (update: {
-        condition?: string;
-        value?: string;
-    }) => void;
-}
-export declare const useNumberFilter: ({ value, onChange }: UseNumberFilterProps) => {
+import { FilterComponentProps } from '../../table-filter.type';
+export declare const useNumberFilter: ({ value, onChange }: FilterComponentProps) => {
     specificAmount: string;
     atLeast: string;
     noMoreThan: string;
@@ -20,4 +11,3 @@ export declare const useNumberFilter: ({ value, onChange }: UseNumberFilterProps
     resetAtLeast: () => void;
     resetNoMoreThan: () => void;
 };
-export {};

package/dist/components/table-filter/filters/number/number.hook.js

@@ -1,33 +1,33 @@
-import { useState as s, useEffect as l } from "react";
-const T = ({ value: t, onChange: i }) => {
-  const [r, o] = s(""), [d, n] = s(""), [a, c] = s(""), f = r ? "specific" : d ? "atLeast" : a ? "noMoreThan" : null;
-  return l(() => {
-    t.condition === "=" && t.value ? (o(t.value), n(""), c("")) : t.condition === ">" && t.value ? (n(t.value), o(""), c("")) : t.condition === "<" && t.value && (c(t.value), o(""), n(""));
-  }, [t.condition, t.value]), {
+import { useState as e, useEffect as h } from "react";
+const b = ({ value: t, onChange: o }) => {
+  const [r, n] = e(""), [d, c] = e(""), [f, s] = e(""), A = r ? "specific" : d ? "atLeast" : f ? "noMoreThan" : null;
+  return h(() => {
+    (t == null ? void 0 : t.condition) === "=" && (t != null && t.value) ? (n(t == null ? void 0 : t.value), c(""), s("")) : (t == null ? void 0 : t.condition) === ">" && (t != null && t.value) ? (c(t.value), n(""), s("")) : (t == null ? void 0 : t.condition) === "<" && (t != null && t.value) && (s(t.value), n(""), c(""));
+  }, [t == null ? void 0 : t.condition, t == null ? void 0 : t.value]), {
     specificAmount: r,
     atLeast: d,
-    noMoreThan: a,
-    activeField: f,
-    handleSpecificAmountChange: (e) => {
-      o(e), e ? (n(""), c(""), i({ condition: "=", value: e })) : i({ condition: "", value: "" });
+    noMoreThan: f,
+    activeField: A,
+    handleSpecificAmountChange: (i) => {
+      n(i), i ? (c(""), s(""), o({ condition: "=", value: i })) : o({ condition: "", value: "" });
     },
-    handleAtLeastChange: (e) => {
-      n(e), e ? (o(""), c(""), i({ condition: ">", value: e })) : i({ condition: "", value: "" });
+    handleAtLeastChange: (i) => {
+      c(i), i ? (n(""), s(""), o({ condition: ">", value: i })) : o({ condition: "", value: "" });
     },
-    handleNoMoreThanChange: (e) => {
-      c(e), e ? (o(""), n(""), i({ condition: "<", value: e })) : i({ condition: "", value: "" });
+    handleNoMoreThanChange: (i) => {
+      s(i), i ? (n(""), c(""), o({ condition: "<", value: i })) : o({ condition: "", value: "" });
     },
     resetSpecificAmount: () => {
-      o(""), i({ condition: "", value: "" });
+      n(""), o({ condition: "", value: "" });
     },
     resetAtLeast: () => {
-      n(""), i({ condition: "", value: "" });
+      c(""), o({ condition: "", value: "" });
     },
     resetNoMoreThan: () => {
-      c(""), i({ condition: "", value: "" });
+      s(""), o({ condition: "", value: "" });
     }
   };
 };
 export {
-  T as useNumberFilter
+  b as useNumberFilter
 };

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

@@ -1,47 +1,44 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useEffect as c } from "react";
-import s from "../../assets/icons/x.js";
-import { MagnifierIcon as u } from "../../assets/icons/magnifier-icon.js";
-import { Input as d } from "../../input/input.js";
-const o = [
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import i from "../../assets/icons/x.js";
+import { MagnifierIcon as o } from "../../assets/icons/magnifier-icon.js";
+import { Input as c } from "../../input/input.js";
+const d = [
   { label: "Contains", value: "contains" },
   { label: "Does not equal", value: "notEqual" },
   { label: "Equals", value: "equals" }
-], h = ({ value: t, onChange: a }) => {
-  var i;
-  const n = () => {
-    a({ value: "" });
+], x = ({ value: e, onChange: n }) => {
+  var a;
+  const s = () => {
+    n({ value: "" });
   };
-  return c(() => {
-    t.condition || a({ condition: o[0].value });
-  }, []), /* @__PURE__ */ l("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ e("div", { className: "p-4 relative", children: /* @__PURE__ */ e(
-      d,
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ t("div", { className: "p-4 relative", children: /* @__PURE__ */ t(
+      c,
       {
-        leftIcon: /* @__PURE__ */ e(u, {}),
+        leftIcon: /* @__PURE__ */ t(o, {}),
         size: "large",
         placeholder: "Search options",
-        value: t.value,
-        rightIcon: t.value ? /* @__PURE__ */ e(s, { onClick: n }) : null,
-        onChange: (r) => a({ value: r.target.value }),
+        value: e == null ? void 0 : e.value,
+        rightIcon: e != null && e.value ? /* @__PURE__ */ t(i, { onClick: s }) : null,
+        onChange: (l) => n({ value: l.target.value }),
         className: ""
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-3", children: t.value && /* @__PURE__ */ l("div", { className: "flex items-center justify-center gap-2 px-3 py-2", children: [
-      /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-xs font-medium uppercase tracking-wide", children: (i = o.find((r) => r.value === t.condition)) == null ? void 0 : i.label }),
-      /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ l("span", { className: "text-text-neutral-primary text-sm font-medium px-2 py-1 bg-surface-neutral-default rounded border border-stroke-solid-medium", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 p-3", children: !!(e != null && e.value) && /* @__PURE__ */ r("div", { className: "flex items-center justify-center gap-2 px-3 py-2", children: [
+      /* @__PURE__ */ t("span", { className: "text-text-neutral-muted text-xs font-medium uppercase tracking-wide", children: (a = d.find((l) => l.value === (e == null ? void 0 : e.condition))) == null ? void 0 : a.label }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ r("span", { className: "text-text-neutral-primary text-sm font-medium px-2 py-1 bg-surface-neutral-default rounded border border-stroke-solid-medium", children: [
           "“",
-          t.value,
+          e.value,
           "”"
         ] }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "button",
           {
-            onClick: n,
+            onClick: s,
             className: "flex items-center justify-center w-5 h-5 rounded-full bg-surface-neutral-hovered hover:bg-surface-neutral-pressed transition-colors",
             title: "Remove filter",
-            children: /* @__PURE__ */ e(s, { className: "w-3 h-3 text-text-neutral-muted" })
+            children: /* @__PURE__ */ t(i, { className: "w-3 h-3 text-text-neutral-muted" })
           }
         )
       ] })
@@ -49,5 +46,5 @@ const o = [
   ] });
 };
 export {
-  h as default
+  x as default
 };

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

@@ -1,8 +1,8 @@
 import { jsxs as a, jsx as l } from "react/jsx-runtime";
 import * as x from "react";
 import * as p from "@radix-ui/react-popover";
-import { Button as h } from "../button/button.js";
-import { useTableFilterContext as V } from "./table-filter.context.js";
+import { Button as d } from "../button/button.js";
+import { useTableFilterContext as U } from "./table-filter.context.js";
 import q from "./filters/text.js";
 import E from "./filters/boolean.js";
 import G from "./filters/number/number.js";
@@ -11,63 +11,60 @@ import J from "../assets/icons/circle-check-filled.js";
 import { getFilterCount as L } from "./selected-filters-display/selected-filters-display.utils.js";
 import { FilterConfirmationDialog as M } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChangesForColumn as w } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const le = ({ filterName: n }) => {
-  const [k, r] = x.useState(!1), [f, s] = x.useState(!1), {
+const ne = ({ filterName: t }) => {
+  const [k, s] = x.useState(!1), [f, r] = x.useState(!1), {
     getFilterForColumn: A,
     hasAppliedFilterForColumn: O,
     updateColumnFilter: u,
     applyFilters: c,
     resetToAppliedFilters: P,
     filterSchema: T,
-    filterComponents: d = {},
+    filterComponents: m = {},
     tempFilters: C,
     filter: g
-  } = V(), $ = (o) => {
-    !o && f ? w(n, C, g.value) ? r(!0) : s(!1) : s(o);
+  } = U(), $ = (e) => {
+    !e && f ? w(t, C, g.value) ? s(!0) : r(!1) : r(e);
   }, j = () => {
-    c(), r(!1), s(!1);
+    c(), s(!1), r(!1);
   }, D = () => {
-    r(!1), s(!1);
+    s(!1), r(!1);
   }, K = () => {
-    P(), r(!1), s(!1);
+    P(), s(!1), r(!1);
   }, R = () => {
-    r(!1);
-  }, v = w(n, C, g.value), t = T.find((o) => o.filterKey === n);
-  if (!t)
-    return console.warn(`Column "${n}" not found in schema`), null;
+    s(!1);
+  }, F = w(t, C, g.value), o = T.find((e) => e.filterKey === t);
+  if (!o)
+    return console.warn(`Column "${t}" not found in schema`), null;
   const S = {
     boolean: E,
     string: q,
     number: G,
     checkbox: H
-  }, F = t.type && (d == null ? void 0 : d[t.type]) || S[t.type ?? "string"];
-  if (!F)
+  }, v = o.type && (m == null ? void 0 : m[o.type]) || S[o.type ?? "string"];
+  if (!v)
     return 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;
-  const e = A(n), m = O(n), b = t.options ? Object.entries(t.options).map(([o, i]) => ({
-    label: o,
-    value: o,
+  const n = A(t), h = O(t), b = o.options ? Object.entries(o.options).map(([e, i]) => ({
+    label: e,
+    value: e,
     total: i
-  })) : void 0, y = e ? L(e, b) : void 0, z = e != null && e.value ? Array.isArray(e.value) ? e.value.length : 1 : 0, B = {
-    condition: (e == null ? void 0 : e.condition) || "",
-    value: (e == null ? void 0 : e.value) || ""
+  })) : void 0, y = n ? L(n, b) : void 0, z = n != null && n.value ? Array.isArray(n.value) ? n.value.length : 1 : 0, B = () => {
+    const e = u(t, "", "");
+    c(e), r(!1);
   }, I = () => {
-    const o = u(n, "", "");
-    c(o), s(!1);
-  }, U = () => {
-    c(), s(!1);
+    c(), r(!1);
   };
   return /* @__PURE__ */ a(p.Root, { open: f, onOpenChange: $, children: [
     /* @__PURE__ */ l(p.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-      h,
+      d,
       {
-        variant: m ? "filled" : "stroke",
-        shade: m ? "brand" : "neutral",
+        variant: h ? "filled" : "stroke",
+        shade: h ? "brand" : "neutral",
         size: "small",
         children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
-          t.title,
-          m && /* @__PURE__ */ l(J, { className: "w-4 h-4 text-white flex-shrink-0" })
+          o.title,
+          h && /* @__PURE__ */ l(J, { className: "w-4 h-4 text-white flex-shrink-0" })
         ] })
       }
     ) }),
@@ -79,16 +76,16 @@ const le = ({ filterName: n }) => {
         align: "start",
         children: [
           /* @__PURE__ */ l(
-            F,
+            v,
             {
-              value: B,
-              onChange: ({ condition: o, value: i }) => u(n, o, i),
+              value: n,
+              onChange: ({ condition: e, value: i }) => u(t, e, i),
               filterOptions: b
             }
           ),
-          (v || !!z) && /* @__PURE__ */ a("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-            /* @__PURE__ */ l(h, { onClick: I, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-            v && /* @__PURE__ */ l(h, { onClick: U, variant: "filled", shade: "neutral", size: "small", children: `Apply${y !== void 0 ? ` ${y}` : ""}` })
+          (F || !!z) && /* @__PURE__ */ a("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+            /* @__PURE__ */ l(d, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            F && /* @__PURE__ */ l(d, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${y !== void 0 ? ` ${y}` : ""}` })
           ] })
         ]
       }
@@ -105,5 +102,5 @@ const le = ({ filterName: n }) => {
   ] });
 };
 export {
-  le as TableFilterColumnButton
+  ne as TableFilterColumnButton
 };

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

@@ -1,27 +1,27 @@
-import { jsx as u } from "react/jsx-runtime";
-import i from "./table-filter.hook.js";
-import { TableFilterContext as a } from "./table-filter.context.js";
-const v = ({
+import { jsx as i } from "react/jsx-runtime";
+import a from "./table-filter.hook.js";
+import { TableFilterContext as u } from "./table-filter.context.js";
+const c = ({
   children: r,
   filterComponents: t = {},
   filterSchema: e,
   filter: o
 }) => {
-  const l = i({
+  const n = a({
     filterSchema: e,
     filter: o || { value: [], onChange: () => {
-    } }
+    }, onDynamicChange: void 0 }
   });
   if (!o)
     return null;
-  const n = {
-    ...l,
+  const l = {
+    ...n,
     filterSchema: e,
     filter: o,
     filterComponents: t
   };
-  return /* @__PURE__ */ u(a.Provider, { value: n, children: r });
+  return /* @__PURE__ */ i(u.Provider, { value: l, children: r });
 };
 export {
-  v as TableFilterProvider
+  c as TableFilterProvider
 };

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

@@ -1,59 +1,63 @@
-import i from "react";
-const E = ({ filter: l, filterSchema: o }) => {
-  const [d, c] = i.useState(null), [n, s] = i.useState(l.value);
-  i.useEffect(() => {
-    !d && o.length > 0 && c(o[0].filterKey);
-  }, [d, o]);
-  const f = (t) => n.find((e) => e.field === t), p = (t) => {
-    const e = f(t);
+import o from "react";
+const w = ({ filter: n, filterSchema: c }) => {
+  const [v, d] = o.useState(null), [l, i] = o.useState(n.value);
+  o.useEffect(() => {
+    !v && c.length > 0 && d(c[0].filterKey);
+  }, [v, c]);
+  const F = (t) => l.find((e) => e.field === t), p = (t) => {
+    const e = F(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, A = (t) => l.value.find((e) => e.field === t), m = (t) => {
-    const e = A(t);
+  }, g = (t) => n.value.find((e) => e.field === t), m = (t) => {
+    const e = g(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, g = (t, e, r) => {
-    const F = n.findIndex((a) => a.field === t);
+  }, y = (t, e, a) => {
+    const f = l.findIndex((r) => r.field === t);
     let u = [];
-    if (F >= 0)
-      u = n.map(
-        (v, T) => T === F ? {
-          ...v,
+    if (f >= 0)
+      u = l.map(
+        (s, x) => x === f ? {
+          ...s,
           ...e !== void 0 ? { condition: e } : {},
-          ...r !== void 0 ? { value: r } : {}
-        } : v
+          ...a !== void 0 ? { value: a } : {}
+        } : s
       );
     else {
-      const a = {
+      const r = {
         field: t,
         ...e ? { condition: e } : {},
-        value: r || ""
+        value: a || ""
       };
-      u = [...n, a];
+      u = [...l, r];
     }
-    return s(u), u;
-  }, C = () => {
-    s([]);
+    if (i(u), n.onDynamicChange) {
+      const r = u.filter((s) => Array.isArray(s.value) ? s.value.length > 0 : s.value !== "");
+      n.onDynamicChange(r);
+    }
+    return u;
   }, h = () => {
-    s(l.value);
-  }, y = (t) => {
-    const e = (t || n).filter((r) => Array.isArray(r.value) ? r.value.length > 0 : r.value !== "");
-    l.onChange(e);
-  }, x = l.value.length > 0;
-  return i.useEffect(() => {
-    s(l.value);
-  }, [l.value]), {
-    selectedColumn: d,
-    setSelectedColumn: c,
-    getFilterForColumn: f,
+    i([]), n.onDynamicChange && n.onDynamicChange([]);
+  }, C = () => {
+    i(n.value), n.onDynamicChange && n.onDynamicChange(n.value);
+  }, A = (t) => {
+    const e = (t || l).filter((a) => Array.isArray(a.value) ? a.value.length > 0 : a.value !== "");
+    n.onChange(e);
+  }, D = n.value.length > 0;
+  return o.useEffect(() => {
+    i(n.value);
+  }, [n.value]), {
+    selectedColumn: v,
+    setSelectedColumn: d,
+    getFilterForColumn: F,
     hasFilterForColumn: p,
     hasAppliedFilterForColumn: m,
-    updateColumnFilter: g,
-    clearAllFilters: C,
-    resetToAppliedFilters: h,
-    applyFilters: y,
-    hasActiveFilters: x,
-    tempFilters: n
+    updateColumnFilter: y,
+    clearAllFilters: h,
+    resetToAppliedFilters: C,
+    applyFilters: A,
+    hasActiveFilters: D,
+    tempFilters: l
   };
 };
 export {
-  E as default
+  w as default
 };

package/dist/components/table-filter/table-filter.type.d.ts

@@ -21,6 +21,7 @@ export type FilterSchema = FilterSchemaField[];
 export type TableFilter = {
     value: FilterRule[];
     onChange: (filters: FilterRule[]) => void;
+    onDynamicChange?: (filters: FilterRule[]) => void;
 };
 export interface TableFilterProps {
     filterSchema: FilterSchema;
@@ -32,9 +33,9 @@ export type FilterComponentProps = {
         condition?: string;
         value?: string | string[];
     }) => void;
-    value: {
+    value?: {
         condition?: string;
-        value: string | string[];
+        value?: string | string[];
     };
     filterOptions?: FilterOption[];
 };

package/dist/index.js

@@ -6,7 +6,7 @@ import { Z2SideNavBarProvider as c } from "./components/collapsible-side-nav-bar
 import { Z2SideNavBar as s, Z2SidebarVariants as I } from "./components/collapsible-side-nav-bar/side-nav-bar.js";
 import { Z2SideNavBarHeader as b } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
 import { Z2SideNavBarContent as D } from "./components/collapsible-side-nav-bar/side-nav-bar-content.js";
-import { Z2SideNavBarFooter as T } from "./components/collapsible-side-nav-bar/side-nav-bar-footer.js";
+import { Z2SideNavBarFooter as g } from "./components/collapsible-side-nav-bar/side-nav-bar-footer.js";
 import { Z2SideNavBarGroup as v } from "./components/collapsible-side-nav-bar/side-nav-bar-group.js";
 import { Z2SideNavBarItem as L } from "./components/collapsible-side-nav-bar/side-nav-bar-item.js";
 import { Z2SideNavBarSeparator as h } from "./components/collapsible-side-nav-bar/side-nav-bar-separator.js";
@@ -15,17 +15,17 @@ import { Z2Popover as k } from "./components/collapsible-side-nav-bar/popover/po
 import "react/jsx-runtime";
 import { default as R, default as H } from "./components/assets/icons/sub-nav-indicator.js";
 import { default as F } from "./components/assets/icons/circles-icon.js";
-import { default as _, default as W } from "./components/assets/icons/database-copy.js";
+import { default as _, default as V } from "./components/assets/icons/database-copy.js";
 import { default as U, default as O } from "./components/assets/icons/window-left-copy.js";
 import { default as J, default as Q } from "./components/assets/icons/sidebar-left-show-copy.js";
 import { SIDEBAR_WIDTH as j, SIDEBAR_WIDTH_COLLAPSED as q } from "./components/collapsible-side-nav-bar/constants.js";
 import { CountryFlags as K } from "./components/country-flags/country-flags.js";
 import { Z2Checkbox as oo } from "./components/checkbox/checkbox.js";
 import { Z2Dialog as ro, Z2DialogClose as to, Z2DialogContent as ao, Z2DialogDescription as po, Z2DialogFooter as no, Z2DialogHeader as fo, Z2DialogOverlay as lo, Z2DialogPortal as mo, Z2DialogTitle as xo, Z2DialogTrigger as uo } from "./components/dialog/dialog.js";
-import { DropdownContext as co, Z2Dropdown as Zo, Z2DropdownContent as so, Z2DropdownInput as Io, Z2DropdownItem as So, Z2DropdownSub as bo, Z2DropdownSubContent as Co, Z2DropdownSubItem as Do, Z2DropdownSubTrigger as go } from "./components/dropdown/z2-dropdown.js";
+import { DropdownContext as co, Z2Dropdown as Zo, Z2DropdownContent as so, Z2DropdownInput as Io, Z2DropdownItem as So, Z2DropdownSub as bo, Z2DropdownSubContent as Co, Z2DropdownSubItem as Do, Z2DropdownSubTrigger as To } from "./components/dropdown/z2-dropdown.js";
 import { Z2DropdownMenu as wo, Z2DropdownMenuCheckboxItem as vo, Z2DropdownMenuContent as Bo, Z2DropdownMenuGroup as Lo, Z2DropdownMenuItem as Mo, Z2DropdownMenuLabel as ho, Z2DropdownMenuPortal as Ao, Z2DropdownMenuRadioGroup as Po, Z2DropdownMenuRadioItem as No, Z2DropdownMenuSeparator as ko, Z2DropdownMenuShortcut as Eo, Z2DropdownMenuSub as Ro, Z2DropdownMenuSubContent as Ho, Z2DropdownMenuSubTrigger as yo, Z2DropdownMenuTrigger as Fo } from "./components/dropdown-menu/z2-dropdown-menu.js";
 import { FileUploadArea as _o } from "./components/file-upload-area/file-upload-area.js";
-import { DEFAULT_ACCEPT as Vo } from "./components/file-upload-area/file-upload-area.const.js";
+import { DEFAULT_ACCEPT as Wo } from "./components/file-upload-area/file-upload-area.const.js";
 import { Input as Oo } from "./components/input/input.js";
 import { NavHeader as Jo } from "./components/nav-header/nav-header.js";
 import { NavItem as Yo } from "./components/nav-header/nav-item/nav-item.js";
@@ -36,7 +36,7 @@ import { Z2Tabs as xe, Z2TabsContent as ue, Z2TabsList as ie, Z2TabsTrigger as c
 import { Table as se, TableProvider as Ie } from "./components/table/table-provider.js";
 import { TableBody as be } from "./components/table/table.js";
 import { extractCellValue as De } from "./components/table/table.utils.js";
-import { DEFAULT_EMPTY_MESSAGE as Te, TABLE_CSS_CLASSES as we } from "./components/table/table.const.js";
+import { DEFAULT_EMPTY_MESSAGE as ge, TABLE_CSS_CLASSES as we } from "./components/table/table.const.js";
 import { TableContext as Be, useTableContext as Le } from "./components/table/table.context.js";
 import { TableCell as he } from "./components/table/components/table-cell.js";
 import { NumberCell as Pe } from "./components/table/components/cell/number-cell.js";
@@ -44,7 +44,7 @@ import { BooleanCell as ke } from "./components/table/components/cell/boolean-ce
 import { LinkCell as Re } from "./components/table/components/cell/link-cell.js";
 import { DescriptionCell as ye } from "./components/table/components/cell/description-cell.js";
 import { AvatarCell as Ge } from "./components/table/components/cell/avatar-cell.js";
-import { LabelCell as We } from "./components/table/components/cell/label-cell.js";
+import { LabelCell as Ve } from "./components/table/components/cell/label-cell.js";
 import { TableHeader as Ue } from "./components/table/components/table-header/table-header.js";
 import { default as Xe } from "./components/assets/icons/chevron-down.js";
 import { TableRow as Qe } from "./components/table/components/table-row.js";
@@ -62,12 +62,12 @@ import "react";
 import { Z2Tooltip as Zr } from "./components/tooltip/tooltip.js";
 import { default as Ir } from "./components/table-card/table-card.js";
 import { Badge as br, badgeVariants as Cr } from "./components/badge/badge.js";
-import { Avatar as gr, AvatarWithLabel as Tr } from "./components/avatar/avatar.js";
+import { Avatar as Tr, AvatarWithLabel as gr } from "./components/avatar/avatar.js";
 import { Z2TextPreset as vr } from "./components/text-preset/text-preset.js";
 import { ColumnReOrder as Lr } from "./components/column-reorder/column-reorder.js";
 import { default as hr } from "./components/tree-checkbox-select/TreeCheckboxSelect.js";
 import { Z2Breadcrumb as Pr, Z2BreadcrumbEllipsis as Nr, Z2BreadcrumbItem as kr, Z2BreadcrumbLink as Er, Z2BreadcrumbList as Rr, Z2BreadcrumbPage as Hr, Z2BreadcrumbSeparator as yr } from "./components/breadcrumb/z2-breadcrumb.js";
-import { Z2RadioGroup as Gr, Z2RadioGroupIndicator as _r, Z2RadioGroupItem as Wr } from "./components/radio/z2-radio.js";
+import { Z2RadioGroup as Gr, Z2RadioGroupIndicator as _r, Z2RadioGroupItem as Vr } from "./components/radio/z2-radio.js";
 import { default as Ur } from "./components/assets/icons/apartment-building.js";
 import { Check as Xr } from "./components/assets/icons/check.js";
 import { default as Qr } from "./components/assets/icons/chevron-left.js";
@@ -85,7 +85,7 @@ import { default as Zt } from "./components/assets/icons/link.js";
 import { default as It } from "./components/assets/icons/list-tree.js";
 import { default as bt } from "./components/assets/icons/media-record.js";
 import { Minus as Dt } from "./components/assets/icons/minus.js";
-import { default as Tt } from "./components/assets/icons/octagon-warning-Copy.js";
+import { default as gt } from "./components/assets/icons/octagon-warning-Copy.js";
 import { default as vt } from "./components/assets/icons/pin.js";
 import { default as Lt } from "./components/assets/icons/sitemap.js";
 import { default as ht } from "./components/assets/icons/slider.js";
@@ -94,21 +94,23 @@ import { default as kt } from "./components/assets/icons/vector.js";
 import { XMark as Rt } from "./components/assets/icons/x-mark.js";
 import { default as yt } from "./components/assets/icons/x.js";
 import { default as Gt } from "./components/assets/icons/z2-icon.js";
-import { default as Wt } from "./components/assets/icons/z2-slash.js";
+import { default as Vt } from "./components/assets/icons/z2-slash.js";
 import { default as Ut } from "./components/assets/icons/z2data.js";
-import { useTheme as Xt } from "./lib/theme.hook.js";
-import { cn as Qt } from "./lib/utils.js";
-import { Z2PopoverTrigger as jt } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
-import { Z2PopoverContent as zt } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
+import { default as Xt } from "./components/assets/icons/vector_3.js";
+import { default as Qt } from "./components/assets/icons/table-cols-2.js";
+import { useTheme as jt } from "./lib/theme.hook.js";
+import { cn as zt } from "./lib/utils.js";
+import { Z2PopoverTrigger as $t } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
+import { Z2PopoverContent as ea } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
 export {
   p as Alert,
   m as AlertCirclesIcon,
   n as AlertDescription,
   f as AlertTitle,
   Ur as ApartmentBuildingIcon,
-  gr as Avatar,
+  Tr as Avatar,
   Ge as AvatarCell,
-  Tr as AvatarWithLabel,
+  gr as AvatarWithLabel,
   br as Badge,
   ke as BooleanCell,
   x as Button,
@@ -121,10 +123,10 @@ export {
   F as CirclesIcon,
   Lr as ColumnReOrder,
   K as CountryFlags,
-  Vo as DEFAULT_ACCEPT,
-  Te as DEFAULT_EMPTY_MESSAGE,
+  Wo as DEFAULT_ACCEPT,
+  ge as DEFAULT_EMPTY_MESSAGE,
   _ as DatabaseCopy,
-  W as DatabaseCopyIcon,
+  V as DatabaseCopyIcon,
   ye as DescriptionCell,
   et as DotsIcon,
   tt as DoubleChevronLeftIcon,
@@ -135,7 +137,7 @@ export {
   mt as HomeIcon,
   xt as InfoIcon,
   Oo as Input,
-  We as LabelCell,
+  Ve as LabelCell,
   it as LeftArrowIcon,
   Re as LinkCell,
   Zt as LinkIcon,
@@ -146,7 +148,7 @@ export {
   Jo as NavHeader,
   Yo as NavItem,
   Pe as NumberCell,
-  Tt as OctagonWarningIcon,
+  gt as OctagonWarningIcon,
   xr as PaginationInfo,
   ir as PaginationQuickJumper,
   vt as PinIcon,
@@ -163,6 +165,7 @@ export {
   be as TableBody,
   Ir as TableCard,
   he as TableCell,
+  Qt as TableCols2Icon,
   Be as TableContext,
   pr as TableFooter,
   fr as TableFooterContent,
@@ -176,6 +179,7 @@ export {
   Qe as TableRow,
   hr as TreeCheckboxSelect,
   Pt as UploadIcon,
+  Xt as Vector3Icon,
   kt as VectorIcon,
   U as WindowLeftCopy,
   O as WindowLeftCopyIcon,
@@ -222,14 +226,14 @@ export {
   bo as Z2DropdownSub,
   Co as Z2DropdownSubContent,
   Do as Z2DropdownSubItem,
-  go as Z2DropdownSubTrigger,
+  To as Z2DropdownSubTrigger,
   Gt as Z2Icon,
   k as Z2Popover,
-  zt as Z2PopoverContent,
-  jt as Z2PopoverTrigger,
+  ea as Z2PopoverContent,
+  $t as Z2PopoverTrigger,
   Gr as Z2RadioGroup,
   _r as Z2RadioGroupIndicator,
-  Wr as Z2RadioGroupItem,
+  Vr as Z2RadioGroupItem,
   qo as Z2Select,
   zo as Z2SelectContent,
   Ko as Z2SelectGroup,
@@ -242,14 +246,14 @@ export {
   pe as Z2SelectValue,
   s as Z2SideNavBar,
   D as Z2SideNavBarContent,
-  T as Z2SideNavBarFooter,
+  g as Z2SideNavBarFooter,
   v as Z2SideNavBarGroup,
   b as Z2SideNavBarHeader,
   L as Z2SideNavBarItem,
   c as Z2SideNavBarProvider,
   h as Z2SideNavBarSeparator,
   I as Z2SidebarVariants,
-  Wt as Z2SlashIcon,
+  Vt as Z2SlashIcon,
   fe as Z2Stepper,
   me as Z2StepperItem,
   xe as Z2Tabs,
@@ -260,9 +264,9 @@ export {
   Zr as Z2Tooltip,
   Cr as badgeVariants,
   u as buttonVariants,
-  Qt as cn,
+  zt as cn,
   De as extractCellValue,
   Le as useTableContext,
-  Xt as useTheme,
+  jt as useTheme,
   P as useZ2SideNavBar
 };

package/dist/types/components/assets/icons/index.d.ts

@@ -34,3 +34,5 @@ export { default as XIcon } from './x';
 export { default as Z2Icon } from './z2-icon';
 export { default as Z2SlashIcon } from './z2-slash';
 export { default as Z2DataIcon } from './z2data';
+export { default as Vector3Icon } from './vector_3';
+export { default as TableCols2Icon } from './table-cols-2';

package/dist/types/components/assets/icons/table-cols-2.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function TableCols2({ fill, secondaryfill, strokewidth, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default TableCols2;

package/dist/types/components/assets/icons/vector_3.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function Vector3({ fill, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Vector3;

package/dist/types/components/table-card/table-card.type.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TableProps, TableSchema, TableSearch, TableSort } from '../table/table.type';
-import { TableFilter } from '../table-filter/table-filter.type';
+import { TableFilter, FilterRule } from '../table-filter/table-filter.type';
 import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../table/components/pagination/pagination.type';
 import { FilterSchema } from '../table-filter/table-filter.type';
 export interface TableCardProps {
@@ -18,6 +18,7 @@ export interface TableCardProps {
         quickFilters?: string[];
         showFilterButton?: boolean;
         filterSchema: FilterSchema;
+        onDynamicChange?: (filters: FilterRule[]) => void;
     };
     headerLeftContent?: React.ReactNode;
     headerActions?: React.ReactNode;

package/dist/types/components/table-filter/filters/number/number.hook.d.ts

@@ -1,14 +1,5 @@
-interface UseNumberFilterProps {
-    value: {
-        condition: string;
-        value: string;
-    };
-    onChange: (update: {
-        condition?: string;
-        value?: string;
-    }) => void;
-}
-export declare const useNumberFilter: ({ value, onChange }: UseNumberFilterProps) => {
+import { FilterComponentProps } from '../../table-filter.type';
+export declare const useNumberFilter: ({ value, onChange }: FilterComponentProps) => {
     specificAmount: string;
     atLeast: string;
     noMoreThan: string;
@@ -20,4 +11,3 @@ export declare const useNumberFilter: ({ value, onChange }: UseNumberFilterProps
     resetAtLeast: () => void;
     resetNoMoreThan: () => void;
 };
-export {};

package/dist/types/components/table-filter/table-filter.type.d.ts

@@ -21,6 +21,7 @@ export type FilterSchema = FilterSchemaField[];
 export type TableFilter = {
     value: FilterRule[];
     onChange: (filters: FilterRule[]) => void;
+    onDynamicChange?: (filters: FilterRule[]) => void;
 };
 export interface TableFilterProps {
     filterSchema: FilterSchema;
@@ -32,9 +33,9 @@ export type FilterComponentProps = {
         condition?: string;
         value?: string | string[];
     }) => void;
-    value: {
+    value?: {
         condition?: string;
-        value: string | string[];
+        value?: string | string[];
     };
     filterOptions?: FilterOption[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",