@ztwoint/z-ui 0.1.105 → 0.1.107

package/dist/components/dynamic-table/util/command.d.ts

@@ -0,0 +1,18 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { Z2Dialog } from '../../dialog/dialog';
+import * as React from 'react';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, className, ...props }: React.ComponentProps<typeof Z2Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/dynamic-table/util/seperator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/components/dynamic-table/z2-column-header.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Column } from '@tanstack/react-table';
+interface Z2TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    title?: string;
+    icon?: ReactNode;
+    pinnable?: boolean;
+    filter?: ReactNode;
+    visibility?: boolean;
+}
+declare function Z2TableColumnHeader<TData, TValue>({ column, title, icon, className, filter, visibility, }: Z2TableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { Z2TableColumnHeader, type Z2TableColumnHeaderProps };

package/dist/components/dynamic-table/z2-table-context.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { ColumnFiltersState, RowData, SortingState, Table } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        headerTitle?: string;
+        headerClassName?: string;
+        cellClassName?: string;
+        skeleton?: ReactNode;
+        expandedContent?: (row: TData) => ReactNode;
+    }
+}
+export type Z2TableApiFetchParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting?: SortingState;
+    filters?: ColumnFiltersState;
+    searchQuery?: string;
+};
+export type Z2TableApiResponse<T> = {
+    data: T[];
+    empty: boolean;
+    pagination: {
+        total: number;
+        page: number;
+    };
+};
+export interface Z2TableContextProps<TData extends object> {
+    props: Z2TableProps<TData>;
+    table: Table<TData>;
+    recordCount: number;
+    isLoading: boolean;
+}
+export type Z2TableRequestParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting?: SortingState;
+    columnFilters?: ColumnFiltersState;
+};
+export interface Z2TableProps<TData extends object> {
+    className?: string;
+    table?: Table<TData>;
+    recordCount: number;
+    children?: ReactNode;
+    onRowClick?: (row: TData) => void;
+    isLoading?: boolean;
+    loadingMode?: 'skeleton' | 'spinner';
+    loadingMessage?: ReactNode | string;
+    emptyMessage?: ReactNode | string;
+    tableLayout?: {
+        dense?: boolean;
+        cellBorder?: boolean;
+        rowBorder?: boolean;
+        rowRounded?: boolean;
+        stripped?: boolean;
+        headerBackground?: boolean;
+        headerBorder?: boolean;
+        headerSticky?: boolean;
+        width?: 'auto' | 'fixed';
+        columnsVisibility?: boolean;
+        columnsResizable?: boolean;
+        columnsPinnable?: boolean;
+        columnsMovable?: boolean;
+        columnsDraggable?: boolean;
+        rowsDraggable?: boolean;
+    };
+    tableClassNames?: {
+        base?: string;
+        header?: string;
+        headerRow?: string;
+        headerSticky?: string;
+        body?: string;
+        bodyRow?: string;
+        footer?: string;
+        edgeCell?: string;
+    };
+}
+declare function useZ2Table(): Z2TableContextProps<any>;
+declare function Z2TableProvider<TData extends object>({ children, table, ...props }: Z2TableProps<TData> & {
+    table: Table<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRoot<TData extends object>({ children, table, ...props }: Z2TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableContainer({ children, className, border, }: {
+    children: ReactNode;
+    className?: string;
+    border?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { useZ2Table, Z2TableProvider, Z2TableRoot, Z2TableContainer };

package/dist/components/dynamic-table/z2-table-filter.d.ts

@@ -0,0 +1,15 @@
+import { Column } from '@tanstack/react-table';
+import * as React from 'react';
+interface Z2TableColumnFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    options: {
+        label: string;
+        value: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+}
+declare function Z2TableColumnFilter<TData, TValue>({ column, title, options, }: Z2TableColumnFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { Z2TableColumnFilter, type Z2TableColumnFilterProps };

package/dist/components/dynamic-table/z2-table-pagination.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface Z2TablePaginationProps {
+    sizes?: number[];
+    sizesInfo?: string;
+    sizesLabel?: string;
+    sizesDescription?: string;
+    sizesSkeleton?: ReactNode;
+    more?: boolean;
+    moreLimit?: number;
+    info?: string;
+    infoSkeleton?: ReactNode;
+    className?: string;
+    rowsPerPageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    ellipsisText?: string;
+}
+declare function Z2TablePagination(props: Z2TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Z2TablePagination, type Z2TablePaginationProps };

package/dist/components/dynamic-table/z2-table-visibility.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Table } from '@tanstack/react-table';
+declare function Z2TableColumnVisibility<TData>({ table, trigger, }: {
+    table: Table<TData>;
+    trigger: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { Z2TableColumnVisibility };

package/dist/components/dynamic-table/z2-table.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Cell, Column, Header, HeaderGroup, Row } from '@tanstack/react-table';
+import * as React from 'react';
+declare function Z2TableBase({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHead({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHeadRow<TData>({ children, headerGroup, }: {
+    children: ReactNode;
+    headerGroup: HeaderGroup<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHeadRowCell<TData>({ children, header, dndRef, dndStyle, }: {
+    children: ReactNode;
+    header: Header<TData, unknown>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHeadRowCellResize<TData>({ header }: {
+    header: Header<TData, unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRowSpacer(): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowSkeleton({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowSkeletonCell<TData>({ children, column, }: {
+    children: ReactNode;
+    column: Column<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRow<TData>({ children, row, dndRef, dndStyle, }: {
+    children: ReactNode;
+    row: Row<TData>;
+    dndRef?: React.Ref<HTMLTableRowElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowExpandded<TData>({ row }: {
+    row: Row<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowCell<TData>({ children, cell, dndRef, dndStyle, }: {
+    children: ReactNode;
+    cell: Cell<TData, unknown>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableEmpty(): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableLoader(): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRowSelect<TData>({ row, }: {
+    row: Row<TData>;
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRowSelectAll(_props: {
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2Table<TData>(): import("react/jsx-runtime").JSX.Element;
+export { Z2Table, Z2TableBase, Z2TableBody, Z2TableBodyRow, Z2TableBodyRowCell, Z2TableBodyRowExpandded, Z2TableBodyRowSkeleton, Z2TableBodyRowSkeletonCell, Z2TableEmpty, Z2TableHead, Z2TableHeadRow, Z2TableHeadRowCell, Z2TableHeadRowCellResize, Z2TableLoader, Z2TableRowSelect, Z2TableRowSelectAll, Z2TableRowSpacer, };

package/dist/components/scroll-area/scoll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,2 @@
+declare function Z2Skeleton({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Z2Skeleton };

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>;
 };