@ztwoint/z-ui 0.1.45 → 0.1.46

package/dist/components/table/components/pagination/index.d.ts

@@ -1,4 +1,5 @@
 export { Pagination, default } from './pagination';
+export { PaginationInfo, PaginationQuickJumper } from './components';
 export type { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps, } from './pagination.type';
 export { usePagination } from './pagination.hook';
 export { usePaginationQuickJumper } from './components/pagination-quick-jumper.hook';

package/dist/components/table/components/pagination/pagination.hook.d.ts

@@ -1,5 +1,5 @@
 import { PaginationHookProps, PaginationHookReturn } from './pagination.type';
-export declare const usePagination: (props: PaginationHookProps) => PaginationHookReturn & {
+export declare const usePagination: ({ currentPage, totalPage, maxVisiblePages, }: PaginationHookProps) => PaginationHookReturn & {
     goToPage: (page: number) => boolean;
     canGoToPage: (page: number) => boolean;
 };

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

@@ -1,22 +1,26 @@
-import { useMemo as i, useCallback as o } from "react";
-import { calculateVisiblePages as l, isValidPageNumber as P } from "./pagination.utils.js";
-const u = (a) => {
-  const n = i(
-    () => l(a),
-    [a.currentPage, a.totalPage, a.maxVisiblePages]
-  ), e = o(
-    (t) => P(t, a.totalPage),
-    [a.totalPage]
-  ), g = o(
-    (t) => e(t),
-    [e]
+import { useMemo as u, useCallback as s } from "react";
+import { calculateVisiblePages as a, isValidPageNumber as m } from "./pagination.utils.js";
+const f = ({
+  currentPage: e,
+  totalPage: o,
+  maxVisiblePages: i
+}) => {
+  const t = u(
+    () => a({ currentPage: e, totalPage: o, maxVisiblePages: i }),
+    [e, o, i]
+  ), n = s(
+    (r) => m(r, o),
+    [o]
+  ), c = s(
+    (r) => n(r),
+    [n]
   );
   return {
-    ...n,
-    goToPage: g,
-    canGoToPage: e
+    ...t,
+    goToPage: c,
+    canGoToPage: n
   };
 };
 export {
-  u as usePagination
+  f as usePagination
 };

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

@@ -1,74 +1,58 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { useState as o, useEffect as f } from "react";
-import { MagnifierIcon as k } from "../../../../assets/icons/magnifier-icon.js";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { useState as i, useEffect as h } from "react";
+import { MagnifierIcon as y } from "../../../../assets/icons/magnifier-icon.js";
 import C from "../../../../assets/icons/x.js";
-const h = ["includesAny", "includesAll", "excludes"], j = ({ value: s, onChange: d, filterOptions: c = [] }) => {
-  const [n, u] = o([]), [i, m] = o(""), [p, x] = o(c), b = (e) => {
+const k = ["includesAny", "includesAll", "excludes"], j = ({ value: r, onChange: d, filterOptions: c = [] }) => {
+  const [n, o] = i([]), [u, m] = i(""), [x, f] = i(c), p = (e) => {
     m(e.target.value);
-    const l = c.filter(
-      (a) => a.label.toLowerCase().includes(e.target.value.toLowerCase())
+    const a = c.filter(
+      (l) => l.label.toLowerCase().includes(e.target.value.toLowerCase())
     );
-    x(l);
+    f(a);
   };
-  f(() => {
-    s.condition || d({ condition: h[0] });
-  }, []), f(() => {
-    Array.isArray(s.value) ? u(s.value.filter(Boolean)) : u([]);
-  }, [s.value]);
-  const v = (e, l) => {
-    let a;
-    l ? a = [...n, e] : a = n.filter((y) => y !== e), u(a), d({ value: a });
-  }, g = () => {
-    m(""), x(c);
+  h(() => {
+    r.condition || d({ condition: k[0] });
+  }, []), h(() => {
+    Array.isArray(r.value) ? o(r.value.filter(Boolean)) : o([]);
+  }, [r.value]);
+  const v = (e, a) => {
+    let l;
+    a ? l = [...n, e] : l = n.filter((g) => g !== e), o(l), d({ value: l });
+  }, b = () => {
+    m(""), f(c);
   }, N = (e) => n.includes(e);
-  return c.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm", children: "No filter options available for this column" }) : /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ r("div", { className: "relative border-b border-stroke-solid-medium", children: [
-      /* @__PURE__ */ t(k, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+  return c.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ s("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: i,
-          onChange: b,
-          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-10 text-sm w-full"
+          value: u,
+          onChange: p,
+          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-8 leading-none-medium-sm w-full"
         }
       ),
-      i && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: g, children: /* @__PURE__ */ t(C, {}) })
+      u && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: b, children: /* @__PURE__ */ t(C, {}) })
     ] }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 p-3", children: [
-      /* @__PURE__ */ t(
-        "select",
-        {
-          value: s.condition,
-          onChange: (e) => d({ condition: e.target.value }),
-          className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm mb-3",
-          children: h.map((e) => /* @__PURE__ */ r("option", { value: e, children: [
-            e === "includesAny" && "Includes any of",
-            e === "includesAll" && "Includes all of",
-            e === "excludes" && "Excludes"
-          ] }, e))
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: "space-y-2 max-h-48 overflow-y-auto", children: p.map((e) => /* @__PURE__ */ r("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col p-3", children: /* @__PURE__ */ t("div", { className: "space-y-5 h-full overflow-y-auto", children: x.map((e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
         /* @__PURE__ */ t(
           "input",
           {
             type: "checkbox",
             checked: N(e.value),
-            onChange: (l) => v(e.value, l.target.checked),
-            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+            onChange: (a) => v(e.value, a.target.checked)
           }
         ),
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: e.label })
-      ] }, e.value)) }),
-      n.length > 0 && /* @__PURE__ */ r("div", { className: "mt-3 p-2 bg-surface-neutral-muted rounded text-sm", children: [
-        /* @__PURE__ */ t("div", { className: "text-text-neutral-muted mb-1", children: "Selected:" }),
-        /* @__PURE__ */ t("div", { className: "text-text-neutral-primary", children: n.map((e) => {
-          const l = c.find((a) => a.value === e);
-          return (l == null ? void 0 : l.label) || e;
-        }).join(", ") })
+        /* @__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,
+        "]"
       ] })
-    ] })
+    ] }, e.value)) }) })
   ] });
 };
 export {

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

@@ -1,51 +1,53 @@
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { useEffect as s } from "react";
-import u from "../../../../assets/icons/x.js";
-import { MagnifierIcon as c } from "../../../../assets/icons/magnifier-icon.js";
+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 = [
   { label: "Contains", value: "contains" },
   { label: "Does not equal", value: "notEqual" },
   { label: "Equals", value: "equals" }
-], f = ({ value: t, onChange: a }) => {
-  var n;
-  const i = () => {
+], h = ({ value: t, onChange: a }) => {
+  var i;
+  const n = () => {
     a({ value: "" });
   };
-  return s(() => {
+  return c(() => {
     t.condition || a({ condition: o[0].value });
-  }, []), /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "relative border-b border-stroke-solid-medium", children: [
-      /* @__PURE__ */ l(c, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
-      /* @__PURE__ */ l(
-        "input",
-        {
-          placeholder: "Search options",
-          value: t.value,
-          onChange: (e) => a({ value: e.target.value }),
-          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-10 text-sm w-full"
-        }
-      ),
-      t.value && /* @__PURE__ */ l("span", { className: "absolute right-3 top-3.5", onClick: i, children: /* @__PURE__ */ l(u, {}) })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 p-3", children: [
-      /* @__PURE__ */ l(
-        "select",
-        {
-          value: t.condition,
-          onChange: (e) => a({ condition: e.target.value }),
-          className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
-          children: o.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
-        }
-      ),
-      t.value && /* @__PURE__ */ r("div", { className: "text-text-neutral-primary text-sm text-center", children: [
-        (n = o.find((e) => e.value === t.condition)) == null ? void 0 : n.label,
-        ":",
-        " ",
-        t.value
+  }, []), /* @__PURE__ */ l("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "p-4 relative", children: /* @__PURE__ */ e(
+      d,
+      {
+        leftIcon: /* @__PURE__ */ e(u, {}),
+        size: "large",
+        placeholder: "Search options",
+        value: t.value,
+        rightIcon: t.value ? /* @__PURE__ */ e(s, { onClick: n }) : null,
+        onChange: (r) => a({ value: r.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: [
+          "“",
+          t.value,
+          "”"
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: n,
+            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" })
+          }
+        )
       ] })
-    ] })
+    ] }) })
   ] });
 };
 export {
-  f as default
+  h as default
 };

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

@@ -1 +1,4 @@
-export { TableFilter } from './table-filter';
+export { TableFilterProvider, TableFilter } from './table-filter-provider';
+export { TableFilterButton } from './table-filter-button';
+export { TableFilterColumnButton } from './table-filter-column-button';
+export { useTableFilterContext } from './table-filter.context';

package/dist/components/table/components/table-filter/selected-filters-display/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectedFiltersDisplay } from './selected-filters-display';
+export type { SelectedFilterDisplayProps, FilterDisplayItem, } from './selected-filters-display.type';

package/dist/components/table/components/table-filter/selected-filters-display/selected-filters-display.d.ts

@@ -0,0 +1,3 @@
+import { SelectedFilterDisplayProps } from './selected-filters-display.type';
+import * as React from 'react';
+export declare const SelectedFiltersDisplay: React.FC<SelectedFilterDisplayProps>;

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

@@ -0,0 +1,30 @@
+import { jsxs as e, jsx as a, Fragment as i } from "react/jsx-runtime";
+import * as m from "react";
+import { createFilterDisplayItems as d, calculateTotalCount as o } from "./selected-filters-display.utils.js";
+const u = ({
+  selectedFilters: r,
+  schema: s
+}) => {
+  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,
+      " 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: [
+      /* @__PURE__ */ a("div", { className: "inline-flex items-center text-text-neutral-secondary rounded-md leading-none-regular-sm", children: /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: [
+        t.fieldTitle,
+        " ",
+        t.count !== void 0 && /* @__PURE__ */ e(i, { children: [
+          "[",
+          /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.count }),
+          "]"
+        ] })
+      ] }) }),
+      c < l.length - 1 && /* @__PURE__ */ a("span", { className: "text-text-neutral-muted", children: "•" })
+    ] }, t.field)) })
+  ] });
+};
+export {
+  u as SelectedFiltersDisplay
+};

package/dist/components/table/components/table-filter/selected-filters-display/selected-filters-display.type.d.ts

@@ -0,0 +1,12 @@
+import { FilterRule, TableSchema } from '../../../table.type';
+export interface SelectedFilterDisplayProps {
+    selectedFilters: FilterRule[];
+    schema: TableSchema;
+}
+export interface FilterDisplayItem {
+    field: string;
+    fieldTitle: string;
+    value: string | string[];
+    condition?: string;
+    count?: number;
+}

package/dist/components/table/components/table-filter/selected-filters-display/selected-filters-display.utils.d.ts

@@ -0,0 +1,6 @@
+import { FilterRule, TableSchema, FilterOption } from '../../../table.type';
+import { FilterDisplayItem } from './selected-filters-display.type';
+export declare const formatFilterValue: (value: string | string[]) => string;
+export declare const getFilterCount: (filterRule: FilterRule, filterOptions?: FilterOption[]) => number | undefined;
+export declare const createFilterDisplayItems: (selectedFilters: FilterRule[], schema: TableSchema) => FilterDisplayItem[];
+export declare const calculateTotalCount: (filterDisplayItems: FilterDisplayItem[]) => number;

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

@@ -0,0 +1,26 @@
+const a = (r, n) => {
+  if (!(!n || n.length === 0))
+    if (Array.isArray(r.value)) {
+      const t = n.filter(
+        (u) => r.value.includes(u.value)
+      ).reduce((u, o) => u + (o.total || 0), 0);
+      return t > 0 ? t : void 0;
+    } else {
+      const e = n.find((t) => t.value === r.value);
+      return e == null ? void 0 : e.total;
+    }
+}, l = (r, n) => r.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "").map((e) => {
+  const t = n.find((o) => o.key === e.field), u = a(e, t == null ? void 0 : t.filterOptions);
+  return {
+    field: e.field,
+    fieldTitle: (t == null ? void 0 : t.title) || e.field,
+    value: e.value,
+    condition: e.condition,
+    count: u
+  };
+}), c = (r) => r.reduce((n, e) => n + (e.count || 0), 0);
+export {
+  c as calculateTotalCount,
+  l as createFilterDisplayItems,
+  a as getFilterCount
+};

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const TableFilterButton: React.FC;

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

@@ -0,0 +1,103 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as f from "react";
+import { Button as c } from "../../../button/button.js";
+import { useTableFilterContext as O } from "./table-filter.context.js";
+import z from "./filters/text.js";
+import S from "./filters/boolean.js";
+import $ from "./filters/number/number.js";
+import B from "./filters/checkbox.js";
+import R from "../../../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as P } from "./selected-filters-display/selected-filters-display.js";
+import { useClickOutside as D } from "../../../../hooks/useClickOutside.js";
+const Q = () => {
+  const [d, o] = f.useState(!1), m = f.useRef(null), {
+    selectedColumn: r,
+    setSelectedColumn: h,
+    getFilterForColumn: x,
+    hasFilterForColumn: b,
+    updateColumnFilter: v,
+    clearAllFilters: y,
+    applyFilters: F,
+    hasActiveFilters: i,
+    filterableFields: k,
+    tempFilters: N,
+    schema: p,
+    filter: g,
+    filterComponents: n = {}
+  } = O();
+  D(m, () => o(!1));
+  const w = () => {
+    F(), o(!1);
+  }, C = () => {
+    if (!r) return null;
+    const e = p.find((a) => a.key === r), T = {
+      boolean: S,
+      text: z,
+      number: $,
+      checkbox: B
+    }, u = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || T[(e == null ? void 0 : e.cellType) || "text"];
+    if (!u)
+      return console.warn(
+        `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
+      ), null;
+    const s = x(r), j = {
+      condition: (s == null ? void 0 : s.condition) || "",
+      value: (s == null ? void 0 : s.value) || ""
+    };
+    return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
+      u,
+      {
+        value: j,
+        onChange: ({ condition: a, value: A }) => v(r, a, A),
+        filterOptions: e == null ? void 0 : e.filterOptions
+      }
+    ) }) }) });
+  };
+  return /* @__PURE__ */ l("div", { className: "relative", ref: m, children: [
+    /* @__PURE__ */ l(
+      c,
+      {
+        onClick: (e) => {
+          e.stopPropagation(), o(!d);
+        },
+        variant: i ? "filled" : "stroke",
+        shade: i ? "brand" : "neutral",
+        size: "small",
+        children: [
+          "Filter ",
+          i && `(${g.value.length})`
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
+      /* @__PURE__ */ l("div", { className: "flex min-h-[442px]", children: [
+        /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
+          k.map((e) => /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: () => h(e.key),
+              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.key ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+              children: [
+                /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
+                b(e.key) && /* @__PURE__ */ t(R, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+              ]
+            },
+            e.key
+          ))
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? C() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+      ] }),
+      /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ t(P, { selectedFilters: N, schema: p }),
+        /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ t(c, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as TableFilterButton
+};

package/dist/components/table/components/table-filter/table-filter-column-button.d.ts

@@ -0,0 +1,3 @@
+import { TableFilterColumnButtonProps } from './table-filter-column-button.type';
+import * as React from 'react';
+export declare const TableFilterColumnButton: React.FC<TableFilterColumnButtonProps>;

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

@@ -0,0 +1,78 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import * as h from "react";
+import { Button as c } from "../../../button/button.js";
+import { useTableFilterContext as g } from "./table-filter.context.js";
+import T from "./filters/text.js";
+import A from "./filters/boolean.js";
+import O from "./filters/number/number.js";
+import z from "./filters/checkbox.js";
+import $ from "../../../assets/icons/circle-check-filled.js";
+import { useClickOutside as j } from "../../../../hooks/useClickOutside.js";
+const E = ({ filterName: l }) => {
+  const [d, n] = h.useState(!1), u = h.useRef(null);
+  j(u, () => n(!1));
+  const {
+    getFilterForColumn: b,
+    hasAppliedFilterForColumn: C,
+    updateColumnFilter: m,
+    applyFilters: p,
+    schema: x,
+    filterComponents: i = {}
+  } = g(), e = x.find((a) => a.key === l);
+  if (!e)
+    return console.warn(`Column "${l}" not found in schema`), null;
+  if (e.filterable === !1)
+    return console.warn(`Column "${l}" is not filterable`), null;
+  const k = {
+    boolean: A,
+    text: T,
+    number: O,
+    checkbox: z
+  }, f = (i == null ? void 0 : i[e.cellType || ""]) || k[e.cellType || "text"];
+  if (!f)
+    return console.warn(
+      `No filter component found for column "${e.key}" with cellType "${e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
+    ), null;
+  const o = b(l), s = C(l), F = {
+    condition: (o == null ? void 0 : o.condition) || "",
+    value: (o == null ? void 0 : o.value) || ""
+  }, v = () => {
+    m(l, "", ""), p(), n(!1);
+  }, w = () => {
+    p(), n(!1);
+  };
+  return /* @__PURE__ */ r("div", { className: "relative", ref: u, children: [
+    /* @__PURE__ */ t(
+      c,
+      {
+        onClick: () => {
+          n(!d);
+        },
+        variant: s ? "filled" : "stroke",
+        shade: s ? "brand" : "neutral",
+        size: "small",
+        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+          e.title,
+          s && /* @__PURE__ */ t($, { className: "w-4 h-4 text-white flex-shrink-0" })
+        ] })
+      }
+    ),
+    d && /* @__PURE__ */ r("div", { className: "absolute top-full left-0 mt-2 w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
+      /* @__PURE__ */ t(
+        f,
+        {
+          value: F,
+          onChange: ({ condition: a, value: y }) => m(l, a, y),
+          filterOptions: e.filterOptions
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ t(c, { onClick: v, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+        /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  E as TableFilterColumnButton
+};

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

@@ -0,0 +1,3 @@
+export interface TableFilterColumnButtonProps {
+    filterName: string;
+}

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

@@ -0,0 +1,14 @@
+import { TableFilterProps } from './table-filter.type';
+import { TableFilterButton } from './table-filter-button';
+import { TableFilterColumnButton } from './table-filter-column-button';
+import * as React from 'react';
+export interface TableFilterProviderProps extends TableFilterProps {
+    children: React.ReactNode;
+}
+export declare const TableFilterProvider: React.FC<TableFilterProviderProps>;
+interface TableFilterCompoundComponent extends React.FC<TableFilterProviderProps> {
+    FilterButton: typeof TableFilterButton;
+    FilterColumnButton: typeof TableFilterColumnButton;
+}
+export declare const TableFilter: TableFilterCompoundComponent;
+export {};

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

@@ -0,0 +1,32 @@
+import { jsx as u } from "react/jsx-runtime";
+import m from "./table-filter.hook.js";
+import { TableFilterContext as a } from "./table-filter.context.js";
+import { TableFilterButton as F } from "./table-filter-button.js";
+import { TableFilterColumnButton as b } from "./table-filter-column-button.js";
+const p = ({
+  children: e,
+  filterComponents: l = {},
+  schema: o,
+  filter: t
+}) => {
+  const n = m({
+    schema: o,
+    filter: t || { value: [], onChange: () => {
+    } }
+  });
+  if (!t)
+    return null;
+  const i = {
+    ...n,
+    schema: o,
+    filter: t,
+    filterComponents: l
+  };
+  return /* @__PURE__ */ u(a.Provider, { value: i, children: e });
+}, r = p;
+r.FilterButton = F;
+r.FilterColumnButton = b;
+export {
+  r as TableFilter,
+  p as TableFilterProvider
+};

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

@@ -0,0 +1,21 @@
+import { TableSchema, TableFilter as TableFilterType, FilterRule } from '../../table.type';
+import { FilterComponentType } from './table-filter.type';
+import * as React from 'react';
+export interface TableFilterContextValue {
+    selectedColumn: string | null;
+    setSelectedColumn: (column: string | null) => void;
+    getFilterForColumn: (columnKey: string) => FilterRule | undefined;
+    hasFilterForColumn: (columnKey: string) => boolean;
+    hasAppliedFilterForColumn: (columnKey: string) => boolean;
+    updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
+    clearAllFilters: () => void;
+    applyFilters: () => void;
+    hasActiveFilters: boolean;
+    filterableFields: TableSchema;
+    tempFilters: FilterRule[];
+    schema: TableSchema;
+    filter: TableFilterType;
+    filterComponents?: Record<string, FilterComponentType>;
+}
+export declare const TableFilterContext: React.Context<TableFilterContextValue | undefined>;
+export declare const useTableFilterContext: () => TableFilterContextValue;