@ztwoint/z-ui 0.1.127 → 0.1.129

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

@@ -0,0 +1,216 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { Table as r } from "../../table/table-provider.js";
+import "react";
+import { cn as d } from "../../../lib/utils.js";
+/* empty css                           */
+import "../../alert/alert.const.js";
+import "../../button/button.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-provider.js";
+import "../../collapsible-side-nav-bar/side-nav-bar.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-header.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-content.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-footer.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-group.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-item.js";
+import "../../collapsible-side-nav-bar/side-nav-bar-separator.js";
+import "../../collapsible-side-nav-bar/context.js";
+import "../../collapsible-side-nav-bar/popover/popover.js";
+import "react-country-flag";
+import "classnames";
+import "@radix-ui/react-checkbox";
+import "@radix-ui/react-dialog";
+import "../../dropdown/z2-dropdown.js";
+import "@radix-ui/react-dropdown-menu";
+import "lucide-react";
+import S from "../../assets/icons/octagon-warning-Copy.js";
+import "../../input/input.js";
+import "../../nav-header/nav-header.js";
+import "../../nav-header/nav-item/nav-item.js";
+import "@radix-ui/react-select";
+import "../../stepper/stepper.js";
+import "../../stepper-item/stepper-item.js";
+import "@radix-ui/react-tabs";
+import "../../tooltip/tooltip.js";
+import { Filter as x } from "../../table-filter/index.js";
+import "../../badge/badge.js";
+import "../../avatar/avatar.js";
+import "../../text-preset/text-preset.js";
+import "react-dom";
+import "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
+import "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
+import "@radix-ui/react-slot";
+import "../../radio/z2-radio.js";
+import "../../segmented-control/item.js";
+import "@radix-ui/react-popover";
+import "../popconfirm/popconfirm.js";
+import "../../dynamic-table/z2-table.js";
+import "../../dynamic-table/z2-table-context.js";
+import "../../chart/chart.js";
+import "../chart-card/config/defaults.js";
+import "../chart-card/config/colors.js";
+import "../../z2map/map.js";
+import "../../z2map/map.constants.js";
+import "../../z2map/components/map-pin.js";
+import "../../z2map/components/map-pin-content.js";
+import "../../z2map/components/map-controls.js";
+import "../../z2map/components/map-zoom-control.js";
+import "../../z2map/components/map-style-control.js";
+import "../../table/table.context.js";
+const Dt = ({
+  dataSource: w,
+  schema: B,
+  loading: b,
+  emptyMessage: k,
+  className: H,
+  rounded: c = !0,
+  bordered: n = !0,
+  showHeader: g = !0,
+  headerClassName: j,
+  search: s,
+  filter: e,
+  headerLeftContent: h,
+  headerActions: p,
+  body: o = {
+    cell: { hasBorder: !0 },
+    className: "",
+    stickyHeader: !0
+  },
+  showFooter: P = !0,
+  footerClassName: T,
+  pagination: l,
+  paginationInfo: i,
+  paginationQuickJumper: a,
+  error: u = !1,
+  dataSourceError: _ = !1
+}) => {
+  var F;
+  if (u)
+    return /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ m("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ t(S, { className: "mt-1.5" }),
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ t("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
+        /* @__PURE__ */ t("div", { className: "text-sm", children: "Please try again later" }),
+        typeof u == "string" && /* @__PURE__ */ t("div", { className: "text-text-warning-secondary text-sm", children: u })
+      ] })
+    ] }) });
+  const N = a && a.totalPage && a.totalPage >= 2, C = l && l.totalPage && l.totalPage >= 2 || !!i || N, v = s || e || h || p, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
+  return /* @__PURE__ */ m("div", { className: d("flex flex-col overflow-hidden relative", H), children: [
+    /* @__PURE__ */ m(r, { dataSource: w, schema: B, emptyMessage: k, children: [
+      g && v && /* @__PURE__ */ m(
+        r.Header,
+        {
+          className: d(
+            "flex-shrink-0",
+            n && "border-stroke-solid-medium border-1 border-b-0",
+            c && "rounded-t-xl",
+            j
+          ),
+          children: [
+            /* @__PURE__ */ m(r.HeaderContent, { className: "overflow-x-auto p-[1px]", children: [
+              h && h,
+              s && /* @__PURE__ */ t(
+                r.Search,
+                {
+                  search: {
+                    value: s.value || "",
+                    onChange: s.onChange || (() => {
+                    }),
+                    placeholder: s.placeholder
+                  },
+                  className: s.className
+                }
+              ),
+              e && /* @__PURE__ */ m(
+                x,
+                {
+                  filterSchema: e.filterSchema,
+                  filter: {
+                    value: e.value || [],
+                    onChange: e.onChange || (() => {
+                    }),
+                    onFilterClick: e.onFilterClick,
+                    loading: e.loading
+                  },
+                  children: [
+                    R && /* @__PURE__ */ t(x.FilterButton, {}),
+                    (F = e == null ? void 0 : e.quickFilters) == null ? void 0 : F.map((f) => /* @__PURE__ */ t(x.FilterColumnButton, { filterName: f }, f))
+                  ]
+                }
+              )
+            ] }),
+            p && /* @__PURE__ */ t(r.HeaderContent, { children: p })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        r.Body,
+        {
+          dataSourceError: _,
+          cell: o == null ? void 0 : o.cell,
+          sort: o == null ? void 0 : o.sort,
+          className: d(
+            "flex-1 min-h-0",
+            n && "border-stroke-solid-light border-1",
+            c && !(g && v) && "rounded-t-xl",
+            c && !(P && C) && "rounded-b-xl",
+            n && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
+            n && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
+            o == null ? void 0 : o.className
+          ),
+          stickyHeader: o == null ? void 0 : o.stickyHeader
+        }
+      ),
+      P && C && /* @__PURE__ */ m(
+        r.Footer,
+        {
+          className: d(
+            "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
+            n && "border",
+            c && "rounded-b-xl",
+            T
+          ),
+          children: [
+            i ? /* @__PURE__ */ t(r.FooterContent, { children: /* @__PURE__ */ t(
+              r.PaginationInfo,
+              {
+                showTotal: i.showTotal,
+                totalItems: i.totalItems,
+                currentPage: i.currentPage,
+                itemsPerPage: i.itemsPerPage
+              }
+            ) }) : a || l ? /* @__PURE__ */ t(r.FooterContent, { children: null }) : null,
+            (a || l) && /* @__PURE__ */ m(r.FooterContent, { children: [
+              N && /* @__PURE__ */ t(
+                r.PaginationQuickJumper,
+                {
+                  currentPage: a.currentPage,
+                  totalPage: a.totalPage,
+                  onChange: a.onChange || (() => {
+                  }),
+                  disabled: a.disabled
+                }
+              ),
+              l && /* @__PURE__ */ t(
+                r.Pagination,
+                {
+                  currentPage: l.currentPage,
+                  totalPage: l.totalPage,
+                  onChange: l.onChange || (() => {
+                  }),
+                  totalItems: l.totalItems
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    b && /* @__PURE__ */ t("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ t("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
+      /* @__PURE__ */ t("p", { className: "text-text-neutral-primary font-medium", children: "Loading..." })
+    ] }) })
+  ] });
+};
+export {
+  Dt as default
+};

package/dist/components/table/components/cell/avatar-cell.js

@@ -32,9 +32,7 @@ import "../../table-provider.js";
 import { Avatar as l } from "../../../avatar/avatar.js";
 import "../../table.context.js";
 import "../../../tooltip/tooltip.js";
-import "../../../table-filter/table-filter.context.js";
-import "@radix-ui/react-popover";
-import "react-virtuoso";
+import "../../../table-filter/index.js";
 import "../../../badge/badge.js";
 import "../../../text-preset/text-preset.js";
 import "react-dom";
@@ -43,10 +41,13 @@ import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledg
 import "@radix-ui/react-slot";
 import "../../../radio/z2-radio.js";
 import "../../../segmented-control/item.js";
+import "@radix-ui/react-popover";
 import "../../../primitives/popconfirm/popconfirm.js";
 import "../../../dynamic-table/z2-table.js";
 import "../../../dynamic-table/z2-table-context.js";
 import "../../../chart/chart.js";
+import "../../../primitives/chart-card/config/defaults.js";
+import "../../../primitives/chart-card/config/colors.js";
 import "../../../z2map/map.js";
 import "../../../z2map/map.constants.js";
 import "../../../z2map/components/map-pin.js";
@@ -54,7 +55,7 @@ import "../../../z2map/components/map-pin-content.js";
 import "../../../z2map/components/map-controls.js";
 import "../../../z2map/components/map-zoom-control.js";
 import "../../../z2map/components/map-style-control.js";
-const xt = ({
+const ft = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -92,5 +93,5 @@ const xt = ({
   }
 );
 export {
-  xt as AvatarCell
+  ft as AvatarCell
 };

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

@@ -36,9 +36,7 @@ import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
-import "../table-filter/table-filter.context.js";
-import "@radix-ui/react-popover";
-import "react-virtuoso";
+import "../table-filter/index.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
@@ -48,10 +46,13 @@ import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dis
 import "@radix-ui/react-slot";
 import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
+import "@radix-ui/react-popover";
 import "../primitives/popconfirm/popconfirm.js";
 import "../dynamic-table/z2-table.js";
 import "../dynamic-table/z2-table-context.js";
 import "../chart/chart.js";
+import "../primitives/chart-card/config/defaults.js";
+import "../primitives/chart-card/config/colors.js";
 import "../z2map/map.js";
 import "../z2map/map.constants.js";
 import "../z2map/components/map-pin.js";

package/dist/components/table-filter/close-filter-confirm/filter-confirmation-dialog.js

@@ -0,0 +1,20 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Button as r } from "../../button/button.js";
+import { Z2Dialog as a, Z2DialogContent as t, Z2DialogHeader as s, Z2DialogTitle as d, Z2DialogDescription as h, Z2DialogFooter as c } from "../../dialog/dialog.js";
+const u = ({
+  onClose: l,
+  onRevertChanges: n,
+  onApplyChanges: o
+}) => /* @__PURE__ */ e(a, { open: !0, onOpenChange: l, children: /* @__PURE__ */ i(t, { className: "max-w-md p-4 rounded-2xl", children: [
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ e("div", { className: "flex justify-between", children: /* @__PURE__ */ e(d, { children: "Unsaved Filter Changes" }) }),
+    /* @__PURE__ */ e(h, { children: "You have unsaved filter changes. Would you like to keep these changes or revert to the previous state?" })
+  ] }),
+  /* @__PURE__ */ i(c, { children: [
+    /* @__PURE__ */ e(r, { onClick: n, variant: "stroke", shade: "danger", size: "small", children: "Discard" }),
+    /* @__PURE__ */ e(r, { onClick: o, variant: "filled", shade: "brand", size: "small", children: "Apply Changes" })
+  ] })
+] }) });
+export {
+  u as FilterConfirmationDialog
+};

package/dist/components/table-filter/close-filter-confirm/filter-confirmation-dialog.utils.js

@@ -0,0 +1,20 @@
+const v = (u, t) => {
+  if (u.length !== t.length)
+    return !1;
+  const i = [...u].sort((r, l) => r.field.localeCompare(l.field)), e = [...t].sort((r, l) => r.field.localeCompare(l.field));
+  return i.every((r, l) => {
+    const a = e[l];
+    return r.field !== a.field || r.condition !== a.condition ? !1 : Array.isArray(r.value) && Array.isArray(a.value) ? r.value.length !== a.value.length ? !1 : r.value.every((n, s) => n === a.value[s]) : Array.isArray(r.value) || Array.isArray(a.value) ? !1 : r.value === a.value;
+  });
+}, o = (u, t) => {
+  const i = u.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "");
+  return !v(i, t);
+}, y = (u, t, i) => {
+  const e = t.find((n) => n.field === u), r = i.find((n) => n.field === u), l = e && (Array.isArray(e.value) ? e.value.length > 0 : e.value !== ""), a = r && (Array.isArray(r.value) ? r.value.length > 0 : r.value !== "");
+  return !l && a || l && !a ? !0 : !l && !a ? !1 : l && a && e && r ? e.condition !== r.condition ? !0 : Array.isArray(e.value) && Array.isArray(r.value) ? e.value.length !== r.value.length ? !0 : !e.value.every((n, s) => n === r.value[s]) : Array.isArray(e.value) || Array.isArray(r.value) ? !0 : e.value !== r.value : !1;
+};
+export {
+  v as areFiltersEqual,
+  o as hasUnsavedFilterChanges,
+  y as hasUnsavedFilterChangesForColumn
+};

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

@@ -0,0 +1,67 @@
+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__ */ 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: (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"
+          }
+        ),
+        (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",
+            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__ */ 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__ */ r("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with true values" })
+      ] })
+    ] }),
+    /* @__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: (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"
+          }
+        ),
+        (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",
+            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__ */ 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__ */ r("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with false values" })
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  c as default
+};

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

@@ -0,0 +1,70 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { useState as d, useEffect as h } 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 E = ({ value: n, onChange: f, filterOptions: r = [] }) => {
+  const [c, o] = d([]), [m, u] = d(""), [x, i] = d(r), p = (l) => {
+    u(l.target.value);
+    const e = r.filter(
+      (a) => a.label.toLowerCase().includes(l.target.value.toLowerCase())
+    );
+    i(e);
+  };
+  h(() => {
+    n && Array.isArray(n.value) ? o(n.value.filter(Boolean) ?? []) : o([]);
+  }, [n]), h(() => {
+    i(r);
+  }, [r]);
+  const b = (l, e) => {
+    let a;
+    e ? a = [...c, l] : a = c.filter((N) => N !== l), o(a), f({ value: a });
+  }, C = () => {
+    u(""), i(r);
+  }, g = (l) => c.includes(l), v = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
+    /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+      /* @__PURE__ */ t(
+        w,
+        {
+          checked: g(e.value),
+          onCheckedChange: (a) => b(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,
+      "]"
+    ] })
+  ] });
+  return r.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm p-4", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ s("div", { className: "relative border-b border-stroke-solid-medium", children: [
+      /* @__PURE__ */ t(y, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          placeholder: "Search options",
+          value: m,
+          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"
+        }
+      ),
+      m && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: C, children: /* @__PURE__ */ t(S, {}) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(
+      k,
+      {
+        data: x,
+        itemContent: v,
+        className: "h-full min-h-60",
+        style: { height: "100%" },
+        overscan: 5
+      }
+    ) })
+  ] });
+};
+export {
+  E as default
+};

package/dist/components/table-filter/filters/number/filter-input-field.js

@@ -0,0 +1,38 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import i from "../../../assets/icons/x.js";
+const d = ({
+  label: l,
+  operator: n,
+  value: e,
+  onChange: o,
+  onReset: s,
+  disabled: r,
+  placeholder: m = "0.00"
+}) => /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+  /* @__PURE__ */ t("label", { className: "text-sm font-medium text-text-neutral-primary", children: l }),
+  /* @__PURE__ */ a("div", { className: "relative", children: [
+    /* @__PURE__ */ t("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-text-neutral-muted", children: n }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        type: "number",
+        value: e,
+        onChange: (u) => o(u.target.value),
+        placeholder: m,
+        disabled: r,
+        className: `border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary placeholder:text-text-neutral-muted rounded px-2 py-2 pl-10 pr-8 text-sm w-full ${r ? "opacity-50 cursor-not-allowed" : ""}`
+      }
+    ),
+    e && /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: s,
+        className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-text-neutral-muted hover:text-text-neutral-primary",
+        children: /* @__PURE__ */ t(i, {})
+      }
+    )
+  ] })
+] });
+export {
+  d as FilterInputField
+};

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

@@ -0,0 +1,33 @@
+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: f,
+    activeField: A,
+    handleSpecificAmountChange: (i) => {
+      n(i), i ? (c(""), s(""), o({ condition: "=", value: i })) : o({ condition: "", value: "" });
+    },
+    handleAtLeastChange: (i) => {
+      c(i), i ? (n(""), s(""), o({ condition: ">", value: i })) : o({ condition: "", value: "" });
+    },
+    handleNoMoreThanChange: (i) => {
+      s(i), i ? (n(""), c(""), o({ condition: "<", value: i })) : o({ condition: "", value: "" });
+    },
+    resetSpecificAmount: () => {
+      n(""), o({ condition: "", value: "" });
+    },
+    resetAtLeast: () => {
+      c(""), o({ condition: "", value: "" });
+    },
+    resetNoMoreThan: () => {
+      s(""), o({ condition: "", value: "" });
+    }
+  };
+};
+export {
+  b as useNumberFilter
+};

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

@@ -0,0 +1,55 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { useNumberFilter as f } from "./number.hook.js";
+import { FilterInputField as t } from "./filter-input-field.js";
+const C = ({ value: o, onChange: l }) => {
+  const {
+    specificAmount: n,
+    atLeast: r,
+    noMoreThan: s,
+    activeField: e,
+    handleSpecificAmountChange: i,
+    handleAtLeastChange: c,
+    handleNoMoreThanChange: h,
+    resetSpecificAmount: p,
+    resetAtLeast: u,
+    resetNoMoreThan: d
+  } = f({ value: o, onChange: l });
+  return /* @__PURE__ */ m("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ a(
+      t,
+      {
+        label: "Specific",
+        operator: "=",
+        value: n,
+        onChange: i,
+        onReset: p,
+        disabled: e !== null && e !== "specific"
+      }
+    ),
+    /* @__PURE__ */ a(
+      t,
+      {
+        label: "At least...",
+        operator: "≥",
+        value: r,
+        onChange: c,
+        onReset: u,
+        disabled: e !== null && e !== "atLeast"
+      }
+    ),
+    /* @__PURE__ */ a(
+      t,
+      {
+        label: "No more than...",
+        operator: "≤",
+        value: s,
+        onChange: h,
+        onReset: d,
+        disabled: e !== null && e !== "noMoreThan"
+      }
+    )
+  ] });
+};
+export {
+  C as default
+};

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

@@ -0,0 +1,50 @@
+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" }
+], x = ({ value: e, onChange: n }) => {
+  var a;
+  const s = () => {
+    n({ value: "" });
+  };
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ t("div", { className: "p-4 relative", children: /* @__PURE__ */ t(
+      c,
+      {
+        leftIcon: /* @__PURE__ */ t(o, {}),
+        size: "large",
+        placeholder: "Search options",
+        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__ */ 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: [
+          "“",
+          e.value,
+          "”"
+        ] }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            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__ */ t(i, { className: "w-3 h-3 text-text-neutral-muted" })
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  x as default
+};

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

@@ -0,0 +1,11 @@
+import { TableFilterProvider as o } from "./table-filter-provider.js";
+import { TableFilterButton as r } from "./table-filter-button.js";
+import { TableFilterColumnButton as e } from "./table-filter-column-button.js";
+import { useTableFilterContext as F } from "./table-filter.context.js";
+const t = o;
+t.FilterButton = r;
+t.FilterColumnButton = e;
+export {
+  t as Filter,
+  F as useTableFilterContext
+};