@ztwoint/z-ui 0.1.45 → 0.1.47

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

@@ -1,63 +1,71 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { useEffect as i } from "react";
-const c = ["equals", "notEqual"], m = ({ value: r, onChange: l }) => {
-  i(() => {
-    r.condition || l({ condition: c[0] });
+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 s = (e, u) => {
-    l(u ? { value: e } : { value: "" });
-  }, n = (e) => {
-    switch (e) {
-      case "equals":
-        return "Equals";
-      case "notEqual":
-        return "Not equal to";
-      default:
-        return e;
-    }
+  const i = (r, a) => {
+    s(a ? { value: r } : { value: "" });
   };
-  return /* @__PURE__ */ t("div", { className: "flex flex-col", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2 p-3", children: [
-    /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ a("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-        /* @__PURE__ */ t(
+  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(
           "input",
           {
             type: "checkbox",
-            checked: r.value === "true",
-            onChange: (e) => s("true", e.target.checked),
-            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+            checked: t.value === "true",
+            onChange: (r) => i("true", r.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"
           }
         ),
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: "True" })
+        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(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+          }
+        ) }) })
       ] }),
-      /* @__PURE__ */ a("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-        /* @__PURE__ */ t(
+      /* @__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__ */ e("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(
           "input",
           {
             type: "checkbox",
-            checked: r.value === "false",
-            onChange: (e) => s("false", e.target.checked),
-            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+            checked: t.value === "false",
+            onChange: (r) => i("false", r.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"
           }
         ),
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: "False" })
+        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(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+          }
+        ) }) })
+      ] }),
+      /* @__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__ */ e("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with false values" })
       ] })
-    ] }),
-    /* @__PURE__ */ t(
-      "select",
-      {
-        value: r.condition,
-        onChange: (e) => l({ 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: c.map((e) => /* @__PURE__ */ t("option", { value: e, children: n(e) }, e))
-      }
-    ),
-    r.value && /* @__PURE__ */ a("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: r.value === "true" ? "True" : "False" })
     ] })
   ] }) });
 };
 export {
-  m as default
+  u as default
 };

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 o = (n, u) => {
+  if (!u || u.length === 0) return n.value !== "" ? 1 : 0;
+  if (Array.isArray(n.value)) {
+    const t = u.filter(
+      (r) => n.value.includes(r.value)
+    ).reduce((r, a) => r + (a.total || 0), 0);
+    return t > 0 ? t : void 0;
+  } else {
+    const e = u.find((t) => t.value === n.value);
+    return e == null ? void 0 : e.total;
+  }
+}, l = (n, u) => n.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "").map((e) => {
+  const t = u.find((a) => a.key === e.field), r = o(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: r
+  };
+}), c = (n) => n.reduce((u, e) => u + (e.count || 1), 0);
+export {
+  c as calculateTotalCount,
+  l as createFilterDisplayItems,
+  o 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,113 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as x from "react";
+import { Button as d } from "../../../button/button.js";
+import { useTableFilterContext as z } from "./table-filter.context.js";
+import S from "./filters/text.js";
+import B from "./filters/boolean.js";
+import D from "./filters/number/number.js";
+import I 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 V } from "../../../../hooks/useClickOutside.js";
+import { createFilterDisplayItems as q, calculateTotalCount as E } from "./selected-filters-display/selected-filters-display.utils.js";
+const Z = () => {
+  const [m, o] = x.useState(!1), p = x.useRef(null), {
+    selectedColumn: r,
+    setSelectedColumn: b,
+    getFilterForColumn: y,
+    hasFilterForColumn: v,
+    updateColumnFilter: F,
+    clearAllFilters: k,
+    applyFilters: N,
+    hasActiveFilters: i,
+    filterableFields: g,
+    tempFilters: u,
+    schema: a,
+    filter: C,
+    filterComponents: n = {}
+  } = z();
+  V(p, () => o(!1));
+  const w = () => {
+    N(), o(!1);
+  }, T = q(u, a), f = E(T), j = () => {
+    if (!r) return null;
+    const e = a.find((c) => c.key === r), A = {
+      boolean: B,
+      text: S,
+      number: D,
+      checkbox: I
+    }, h = (e == null ? void 0 : e.cellType) && (n == null ? void 0 : n[e.cellType]) || A[(e == null ? void 0 : e.cellType) ?? "text"];
+    if (!h)
+      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 = y(r), O = {
+      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(
+      h,
+      {
+        value: O,
+        onChange: ({ condition: c, value: $ }) => F(r, c, $),
+        filterOptions: e == null ? void 0 : e.filterOptions
+      }
+    ) }) }) });
+  };
+  return /* @__PURE__ */ l("div", { className: "relative", ref: p, children: [
+    /* @__PURE__ */ l(
+      d,
+      {
+        onClick: (e) => {
+          e.stopPropagation(), o(!m);
+        },
+        variant: i ? "filled" : "stroke",
+        shade: i ? "brand" : "neutral",
+        size: "small",
+        children: [
+          "Filter ",
+          i && `(${C.value.length})`
+        ]
+      }
+    ),
+    m && /* @__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" }) }),
+          g.map((e) => /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: () => b(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 }),
+                v(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 ? j() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+      ] }),
+      !!f && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[71px]", children: [
+        /* @__PURE__ */ t(P, { selectedFilters: u, schema: a }),
+        /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ t(d, { onClick: k, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(
+            d,
+            {
+              onClick: w,
+              variant: "filled",
+              shade: "neutral",
+              size: "small",
+              children: `Apply ${f || ""}`
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Z 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,79 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import * as C from "react";
+import { Button as d } from "../../../button/button.js";
+import { useTableFilterContext as T } from "./table-filter.context.js";
+import O from "./filters/text.js";
+import $ from "./filters/boolean.js";
+import A from "./filters/number/number.js";
+import z from "./filters/checkbox.js";
+import j from "../../../assets/icons/circle-check-filled.js";
+import { useClickOutside as B } from "../../../../hooks/useClickOutside.js";
+import { getFilterCount as R } from "./selected-filters-display/selected-filters-display.utils.js";
+const J = ({ filterName: o }) => {
+  const [u, n] = C.useState(!1), m = C.useRef(null);
+  B(m, () => n(!1));
+  const {
+    getFilterForColumn: b,
+    hasAppliedFilterForColumn: x,
+    updateColumnFilter: p,
+    applyFilters: f,
+    schema: F,
+    filterComponents: i = {}
+  } = T(), e = F.find((c) => c.key === o);
+  if (!e)
+    return console.warn(`Column "${o}" not found in schema`), null;
+  if (e.filterable === !1)
+    return console.warn(`Column "${o}" is not filterable`), null;
+  const k = {
+    boolean: $,
+    text: O,
+    number: A,
+    checkbox: z
+  }, h = e.cellType && (i == null ? void 0 : i[e.cellType]) || k[e.cellType ?? "text"];
+  if (!h)
+    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 l = b(o), s = x(o), a = l ? R(l, e.filterOptions) : void 0, v = {
+    condition: (l == null ? void 0 : l.condition) || "",
+    value: (l == null ? void 0 : l.value) || ""
+  }, y = () => {
+    p(o, "", ""), f(), n(!1);
+  }, w = () => {
+    f(), n(!1);
+  };
+  return /* @__PURE__ */ r("div", { className: "relative", ref: m, children: [
+    /* @__PURE__ */ t(
+      d,
+      {
+        onClick: () => {
+          n(!u);
+        },
+        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(j, { className: "w-4 h-4 text-white flex-shrink-0" })
+        ] })
+      }
+    ),
+    u && /* @__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(
+        h,
+        {
+          value: v,
+          onChange: ({ condition: c, value: g }) => p(o, c, g),
+          filterOptions: e.filterOptions
+        }
+      ),
+      !!a && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ t(d, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+        /* @__PURE__ */ t(d, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: `Apply${a !== void 0 ? ` ${a}` : ""}` })
+      ] })
+    ] })
+  ] });
+};
+export {
+  J 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;
+}