@ztwoint/z-ui 0.1.104 → 0.1.106

package/dist/components/badge/badge.d.ts

@@ -1,11 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | null | undefined;
-    size?: "default" | "sm" | "xs" | "lg" | null | undefined;
-    color?: "default" | "success" | "warning" | "destructive" | "primary" | null | undefined;
+    variant?: "success" | "warning" | "danger" | "neutral" | "brand" | "gray" | null | undefined;
+    rounded?: "none" | "sm" | "md" | "full" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-declare function Badge({ className, variant, size, color, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+declare function Badge({ className, variant, size, rounded, leftIcon, rightIcon, label, asChild, }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    label?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/dist/components/badge/badge.js

@@ -1,121 +1,54 @@
-import { jsx as n } from "react/jsx-runtime";
-import { Slot as c } from "@radix-ui/react-slot";
-import { cva as i } from "class-variance-authority";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { Slot as m } from "@radix-ui/react-slot";
+import { cva as o } from "class-variance-authority";
 import "react";
-import { cn as u } from "../../lib/utils.js";
-const l = i(
-  "inline-flex rounded-lg items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent",
-        destructive: "border-transparent",
-        outline: ""
-      },
-      size: {
-        default: "px-[8px] py-[3px] text-sm",
-        xs: "px-[4px] py-[1px] text-[10px]",
-        sm: "px-[6px] py-[2px] text-xs",
-        lg: "px-[10px] py-[4px] text-base"
-      },
-      color: {
-        default: "",
-        primary: "bg-surface-neutral-default text-default-brand [a&]:hover:bg-surface-neutral-hover",
-        destructive: "bg-surface-danger-default text-inverted-primary [a&]:hover:bg-surface-danger-hover",
-        success: "bg-surface-success-default text-inverted-primary [a&]:hover:bg-surface-success-hover",
-        warning: "bg-surface-warning-default text-inverted-primary [a&]:hover:bg-surface-warning-hover"
-      }
+import { cn as c } from "../../lib/utils.js";
+const g = o("inline-flex items-center justify-center py-1 px-1.5", {
+  variants: {
+    variant: {
+      neutral: "bg-surface-neutral-default text-neutral-primary border border-stroke-solid-light",
+      brand: "bg-surface-accent-default text-inverted-primary",
+      gray: "bg-surface-gray-default text-inverted-primary",
+      danger: "bg-surface-danger-default text-inverted-primary",
+      success: "bg-surface-success-default text-inverted-primary",
+      warning: "bg-surface-warning-default text-inverted-primary"
     },
-    compoundVariants: [
-      // Default variant with different colors
-      {
-        variant: "default",
-        color: "default",
-        class: "bg-surface-neutral-hover [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "default",
-        color: "primary",
-        class: "bg-[var(--surface-accent-light)] text-default-brand [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "default",
-        color: "destructive",
-        class: "bg-[var(--surface-danger-light)] text-danger-secondary [a&]:hover:bg-surface-danger-hover"
-      },
-      {
-        variant: "default",
-        color: "success",
-        class: "bg-[var(--surface-success-light)] text-success-secondary [a&]:hover:bg-surface-success-hover"
-      },
-      {
-        variant: "default",
-        color: "warning",
-        class: "bg-[var(--surface-warning-light)] text-warning-secondary [a&]:hover:bg-surface-warning-hover"
-      },
-      // Destructive variant with different colors
-      {
-        variant: "destructive",
-        color: "default",
-        class: "bg-neutral-950 text-inverted-primary [a&]:hover:bg-neutral-800"
-      },
-      {
-        variant: "destructive",
-        color: "primary",
-        class: "bg-[var(--surface-accent-default)] text-inverted-primary [a&]:hover:bg-surface-primary-hover"
-      },
-      // Outline variant with different colors
-      {
-        variant: "outline",
-        color: "default",
-        class: "bg-[var(--surface-neutral-hover)] text-neutral-primary border border-neutral-300 [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "outline",
-        color: "primary",
-        class: "bg-[var(--surface-accent-light)] text-brand-secondary border border-blue-300 [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "outline",
-        color: "destructive",
-        class: "bg-[var(--surface-danger-light)] text-danger-secondary border border-red-300 [a&]:hover:bg-surface-danger-light-hover"
-      },
-      {
-        variant: "outline",
-        color: "success",
-        class: "bg-[var(--surface-success-light)] text-success-secondary border border-green-300 [a&]:hover:bg-surface-success-light-hover"
-      },
-      {
-        variant: "outline",
-        color: "warning",
-        class: "bg-[var(--surface-warning-light)] text-warning-secondary border border-amber-300 [a&]:hover:bg-surface-warning-light-hover"
-      }
-    ],
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      color: "default"
+    rounded: {
+      full: "rounded-full",
+      lg: "rounded-lg",
+      md: "rounded-md",
+      sm: "rounded-sm",
+      none: "rounded-none"
+    },
+    size: {
+      sm: "leading-none-regular-xs",
+      md: "leading-none-regular-sm",
+      lg: "leading-none-regular"
     }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    rounded: "lg",
+    size: "md"
   }
-);
-function p({
-  className: r,
-  variant: e,
-  size: a,
-  color: t,
-  asChild: s = !1,
-  ...o
+});
+function h({
+  className: t,
+  variant: s,
+  size: d,
+  rounded: i,
+  leftIcon: r,
+  rightIcon: a,
+  label: n,
+  asChild: l = !1
 }) {
-  return /* @__PURE__ */ n(
-    s ? c : "span",
-    {
-      "data-slot": "badge",
-      className: u(l({ variant: e, size: a, color: t }), r),
-      ...o
-    }
-  );
+  return /* @__PURE__ */ u(l ? m : "span", { "data-slot": "badge", className: c(g({ variant: s, size: d, rounded: i }), t), children: [
+    r && /* @__PURE__ */ e("span", { className: "size-3.5", children: r }),
+    n && /* @__PURE__ */ e("span", { className: "flex items-center justify-center px-0.5 py-px", children: n }),
+    a && /* @__PURE__ */ e("span", { className: "size-3.5", children: a })
+  ] });
 }
 export {
-  p as Badge,
-  l as badgeVariants
+  h as Badge,
+  g as badgeVariants
 };

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

@@ -1,6 +1,6 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import * as b from "react";
-import * as p from "@radix-ui/react-popover";
+import * as f from "@radix-ui/react-popover";
 import { Button as y } from "../button/button.js";
 import { useTableFilterContext as q } from "./table-filter.context.js";
 import E from "./filters/text.js";
@@ -13,36 +13,36 @@ import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-con
 import { hasUnsavedFilterChanges as S } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 const ie = () => {
   var k, A;
-  const [K, i] = b.useState(!1), c = b.useRef(null), [C, d] = b.useState(!1), {
-    selectedColumn: o,
+  const [K, i] = b.useState(!1), n = b.useRef(null), [C, c] = b.useState(!1), {
+    selectedColumn: a,
     setSelectedColumn: O,
     getFilterForColumn: P,
-    hasFilterForColumn: D,
-    updateColumnFilter: R,
-    clearAllFilters: T,
+    hasFilterForColumn: T,
+    updateColumnFilter: D,
+    clearAllFilters: R,
     resetToAppliedFilters: $,
     applyFilters: z,
     hasActiveFilters: h,
     tempFilters: u,
-    filterSchema: m,
-    filter: f,
-    filterComponents: g = {}
+    filterSchema: d,
+    filter: m,
+    filterComponents: x = {}
   } = q(), B = (e) => {
-    !e && C ? S(u, f.value) ? i(!0) : d(!1) : d(e);
+    !e && C ? S(u, m.value) ? i(!0) : c(!1) : c(e);
   }, N = () => {
-    z(), i(!1), d(!1);
+    z(), i(!1), c(!1);
   }, L = () => {
-    $(), i(!1), d(!1);
+    $(), i(!1), c(!1);
   }, I = () => {
     i(!1);
-  }, F = S(u, f.value), l = P(o || ""), V = () => {
-    if (!o) return null;
-    const e = m.find((a) => a.filterKey === o), r = {
+  }, F = S(u, m.value), l = P(a || ""), V = () => {
+    if (!a) return null;
+    const e = d.find((o) => o.filterKey === a), s = {
       boolean: G,
       string: E,
       number: J,
       checkbox: M
-    }, j = (e == null ? void 0 : e.type) && (g == null ? void 0 : g[e.type]) || r[(e == null ? void 0 : e.type) ?? "string"];
+    }, j = (e == null ? void 0 : e.type) && (x == null ? void 0 : x[e.type]) || s[(e == null ? void 0 : e.type) ?? "string"];
     if (!j)
       return console.warn(
         `No filter component found for column "${e == null ? void 0 : e.filterKey}" with type "${e == null ? void 0 : e.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
@@ -55,30 +55,30 @@ const ie = () => {
       j,
       {
         value: U,
-        onChange: ({ condition: a, value: v }) => R(o, a, v),
-        filterOptions: e != null && e.options ? Object.entries(e.options).map(([a, v]) => ({
-          label: a,
-          value: a,
+        onChange: ({ condition: o, value: v }) => D(a, o, v),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, v]) => ({
+          label: o,
+          value: o,
           total: v
         })) : void 0
       },
-      o
+      a
     ) }) });
-  }, H = f.loading || !1;
-  l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (c.current = l);
-  const x = m.find(
+  }, H = m.loading || !1;
+  l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (n.current = l);
+  const g = d.find(
     (e) => {
-      var r;
-      return e.filterKey == ((r = c.current) == null ? void 0 : r.field);
+      var s;
+      return e.filterKey == ((s = n.current) == null ? void 0 : s.field);
     }
-  ), w = Array.isArray((k = c.current) == null ? void 0 : k.value) ? (A = c.current) == null ? void 0 : A.value.map(
+  ), w = Array.isArray((k = n.current) == null ? void 0 : k.value) ? (A = n.current) == null ? void 0 : A.value.map(
     (e) => {
-      var r;
-      return ((r = x == null ? void 0 : x.options) == null ? void 0 : r[e]) || 0;
+      var s;
+      return ((s = g == null ? void 0 : g.options) == null ? void 0 : s[e]) || 1;
     }
-  ) : [1], n = w.reduce((e, r) => e + r, 0);
-  return /* @__PURE__ */ s(p.Root, { open: C, onOpenChange: B, children: [
-    /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+  ) : [], p = w.reduce((e, s) => e + s, 0);
+  return /* @__PURE__ */ r(f.Root, { open: C, onOpenChange: B, children: [
+    /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
       y,
       {
         variant: h ? "filled" : "stroke",
@@ -86,52 +86,69 @@ const ie = () => {
         size: "small",
         children: [
           "Filters ",
-          h && `(${f.value.length})`
+          h && `(${m.value.length})`
         ]
       }
     ) }),
-    /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ s(
-      p.Content,
+    /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ r(
+      f.Content,
       {
         className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
         align: "start",
         children: [
-          /* @__PURE__ */ s("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
-            /* @__PURE__ */ s("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
+          /* @__PURE__ */ r("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
+            /* @__PURE__ */ r("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
               /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
-              m.map((e) => /* @__PURE__ */ s(
+              d.map((e) => /* @__PURE__ */ r(
                 "button",
                 {
                   onClick: () => O(e.filterKey),
-                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${o === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
                   children: [
-                    /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                    D(e.filterKey) && /* @__PURE__ */ t(Q, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                    /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
+                      e.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+                        e.helperText,
+                        ": "
+                      ] }),
+                      /* @__PURE__ */ t("span", { className: "truncate", children: e.title })
+                    ] }),
+                    T(e.filterKey) && /* @__PURE__ */ t(Q, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
                   ]
                 },
                 e.filterKey
               ))
             ] }),
-            /* @__PURE__ */ s("div", { className: "flex-1 flex flex-col relative", children: [
-              o ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
-              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col relative", children: [
+              a ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
+              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
                 /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
                 /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })
               ] }) })
             ] })
           ] }),
-          (!!n || F) && /* @__PURE__ */ s("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
+          (!!p || F) && /* @__PURE__ */ r("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
             w.length > 0 ? /* @__PURE__ */ t(
               W,
               {
                 tempFilters: u,
-                filterSchema: m,
-                totalCount: n
+                filterSchema: d,
+                totalCount: p
               }
             ) : /* @__PURE__ */ t("div", { className: "w-full" }),
-            /* @__PURE__ */ s("div", { className: "flex justify-end gap-2", children: [
-              !!n && /* @__PURE__ */ t(y, { onClick: T, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ t(
+                y,
+                {
+                  onClick: () => {
+                    n.current = void 0, R();
+                  },
+                  variant: "stroke",
+                  shade: "neutral",
+                  size: "small",
+                  children: "Clear All"
+                }
+              ),
               /* @__PURE__ */ t(
                 y,
                 {
@@ -141,7 +158,7 @@ const ie = () => {
                   size: "small",
                   className: "min-w-20",
                   disabled: !F,
-                  children: `Apply ${n ? n.toLocaleString() : ""}`
+                  children: `Apply ${p ? p.toLocaleString() : ""}`
                 }
               )
             ] })

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

@@ -1,7 +1,7 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import k, { useMemo as K } from "react";
 import * as d from "@radix-ui/react-popover";
-import { Button as f } from "../button/button.js";
+import { Button as u } from "../button/button.js";
 import { useTableFilterContext as L } from "./table-filter.context.js";
 import _ from "./filters/text.js";
 import M from "./filters/boolean.js";
@@ -11,95 +11,101 @@ import E from "../assets/icons/circle-check-filled.js";
 import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
 import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const re = ({ filterName: t }) => {
-  const [O, i] = k.useState(!1), [u, r] = k.useState(!1), {
+const re = ({ filterName: l }) => {
+  const [T, i] = k.useState(!1), [f, s] = k.useState(!1), {
     getFilterForColumn: C,
-    hasAppliedFilterForColumn: P,
+    hasAppliedFilterForColumn: O,
     updateColumnFilter: g,
     applyFilters: c,
-    resetToAppliedFilters: T,
+    resetToAppliedFilters: P,
     filterSchema: j,
     filterComponents: m = {},
     tempFilters: v,
     filter: p
-  } = L(), $ = (o) => {
-    !o && u ? A(t, v, p.value) ? i(!0) : r(!1) : r(o);
+  } = L(), N = (o) => {
+    !o && f ? A(l, v, p.value) ? i(!0) : s(!1) : s(o);
+  }, $ = () => {
+    c(), i(!1), s(!1);
   }, D = () => {
-    c(), i(!1), r(!1);
+    P(), i(!1), s(!1);
   }, R = () => {
-    T(), i(!1), r(!1);
-  }, S = () => {
     i(!1);
-  }, b = A(t, v, p.value), n = j.find((o) => o.filterKey === t), l = K(
-    () => C(t),
-    [t, C]
+  }, b = A(l, v, p.value), t = j.find((o) => o.filterKey === l), n = K(
+    () => C(l),
+    [l, C]
   );
-  if (!n)
-    return console.warn(`Column "${t}" not found in schema`), null;
-  const z = {
+  if (!t)
+    return console.warn(`Column "${l}" not found in schema`), null;
+  const S = {
     boolean: M,
     string: _,
     number: U,
     checkbox: q
-  }, F = n.type && (m == null ? void 0 : m[n.type]) || z[n.type ?? "string"], h = P(t), x = p.loading || !1, y = n.options ? Object.entries(n.options).map(([o, a]) => ({
+  }, x = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(l), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, a]) => ({
     label: o,
     value: o,
     total: a
-  })) : void 0, w = l ? G(l, y) : void 0, B = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, N = () => {
-    const o = g(t, "", "");
-    c(o), r(!1);
+  })) : void 0, w = n ? G(n, y) : void 0, z = n != null && n.value ? Array.isArray(n.value) ? n.value.length : 1 : 0, B = () => {
+    const o = g(l, "", "");
+    c(o), s(!1);
   }, I = () => {
-    c(), r(!1);
+    c(), s(!1);
   };
-  return F ? /* @__PURE__ */ s(d.Root, { open: u, onOpenChange: $, children: [
+  return x ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
     /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
-      f,
+      u,
       {
         variant: h ? "filled" : "stroke",
         shade: h ? "brand" : "neutral",
         size: "small",
-        children: /* @__PURE__ */ s("span", { className: "flex items-center gap-2", children: [
-          n.title,
+        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
+            t.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+              t.helperText,
+              ": "
+            ] }),
+            t.title
+          ] }),
           h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
-          x && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin flex-shrink-0" })
+          F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin flex-shrink-0" })
         ] })
       }
     ) }),
-    /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ s(
+    /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ r(
       d.Content,
       {
         className: "w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
         align: "start",
         children: [
-          x ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
+          F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
             /* @__PURE__ */ e("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-stroke-solid-strong rounded-full animate-spin" }),
             /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
           ] }) }) : /* @__PURE__ */ e(
-            F,
+            x,
             {
-              value: l,
-              onChange: ({ condition: o, value: a }) => g(t, o, a),
+              value: n,
+              onChange: ({ condition: o, value: a }) => g(l, o, a),
               filterOptions: y
             }
           ),
-          (b || !!B) && /* @__PURE__ */ s("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-            /* @__PURE__ */ e(f, { onClick: N, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-            b && /* @__PURE__ */ e(f, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
+          (b || !!z) && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+            /* @__PURE__ */ e(u, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            b && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
           ] })
         ]
       }
     ) }),
-    O && /* @__PURE__ */ e(
+    T && /* @__PURE__ */ e(
       H,
       {
-        onClose: S,
-        onRevertChanges: R,
-        onApplyChanges: D
+        onClose: R,
+        onRevertChanges: D,
+        onApplyChanges: $
       }
     )
   ] }) : (console.warn(
-    `No filter component found for column "${n.filterKey}" with type "${n.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
+    `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".`
   ), null);
 };
 export {

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

@@ -14,6 +14,7 @@ export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
 export type FilterSchemaField = {
     filterKey: string;
     title: string;
+    helperText?: string;
     type: FilterFieldType;
     options?: Record<string, number>;
 };

package/dist/css/config/colors/semantic/surface.css

@@ -46,6 +46,8 @@
   --surface-inverted-hover: var(--alpha-two-300);
   --surface-inverted-pressed: var(--neutral-00);
   --surface-inverted-disabled: var(--neutral-100);
+
+  --surface-gray-default: var(--neutral-600);
 }
 
 .dark {
@@ -136,4 +138,7 @@
   --color-surface-inverted-hover: var(--surface-inverted-hover);
   --color-surface-inverted-pressed: var(--surface-inverted-pressed);
   --color-surface-inverted-disabled: var(--surface-inverted-disabled);
+
+  /* Surface Colors - Gray */
+  --color-surface-gray-default: var(--surface-gray-default);
 }