@ztwoint/z-ui 0.1.44 → 0.1.46

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Props for the Avatar Root component.
+ * @interface RootProps
+ */
+interface RootProps {
+    /** Size variant of the avatar. Affects width, height, border radius, and text size */
+    size: 'xxs' | 'xs' | 'sm' | 'md';
+    /** Color theme of the avatar using design system color tokens */
+    color: 'orange' | 'purple' | 'green' | 'blue';
+    /** Child components, typically Avatar.Label or Avatar.Element */
+    children: React.ReactNode;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the root div element */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+/**
+ * Avatar Root component - the container for avatar content.
+ *
+ * @param props - The component props
+ * @param props.size - Size variant (xxs: 18px, xs: 22px, sm: 26px, md: 30px)
+ * @param props.color - Color theme using design system tokens
+ * @param props.children - Child components (typically Avatar.Label)
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the root div element
+ * @returns The rendered avatar container
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root size="sm" color="orange">
+ *   <Avatar.Label label="JD" />
+ * </Avatar.Root>
+ * ```
+ */
+declare function Root({ size, color, children, className, ref, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the Avatar Element component.
+ * @interface ElementProps
+ */
+interface ElementProps {
+    /** Text content to display in the avatar (typically initials) */
+    label: string;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the span element */
+    ref?: React.RefObject<HTMLSpanElement>;
+    /** When true, merges props with the first child instead of rendering a span */
+    asChild?: boolean;
+    /** Child components (only used when asChild is true) */
+    children?: React.ReactNode;
+}
+/**
+ * Avatar Element component - flexible text/content renderer with asChild support.
+ *
+ * @param props - The component props
+ * @param props.label - Text to display (typically user initials)
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the element
+ * @param props.asChild - When true, uses Radix Slot to merge with first child
+ * @param props.children - Child components (only when asChild is true)
+ * @returns The rendered element with avatar text styling
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Element label="JD" />
+ *
+ * // With asChild for custom elements
+ * <Avatar.Element label="JD" asChild>
+ *   <button>Custom Button</button>
+ * </Avatar.Element>
+ * ```
+ */
+declare function Element({ label, className, ref, asChild, children, ...props }: ElementProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the Avatar Label component.
+ * @interface LabelProps
+ */
+interface LabelProps {
+    /** Text content to display in the avatar (typically user initials) */
+    label: string;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the span element */
+    ref?: React.RefObject<HTMLSpanElement>;
+}
+/**
+ * Avatar Label component - simplified wrapper around Avatar.Element.
+ *
+ * @param props - The component props
+ * @param props.label - Text to display (typically user initials)
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the span element
+ * @returns The rendered label with avatar text styling
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Label label="JD" />
+ * <Avatar.Label label="AB" className="text-yellow-300" />
+ * ```
+ */
+declare function Label({ label, className, ref, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the AvatarWithLabel convenience component.
+ * @interface AvatarWithLabelProps
+ */
+interface AvatarWithLabelProps {
+    /** Text content to display in the avatar (typically user initials) */
+    label: string;
+    /** Size variant of the avatar. Affects width, height, border radius, and text size */
+    size: 'xxs' | 'xs' | 'sm' | 'md';
+    /** Color theme of the avatar using design system color tokens */
+    color: 'orange' | 'purple' | 'green' | 'blue';
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the root div element */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+/**
+ * AvatarWithLabel - A convenience component that combines Avatar.Root and Avatar.Label.
+ * Perfect for simple use cases where you just need an avatar with text.
+ *
+ * @param props - The component props
+ * @param props.label - Text to display (typically user initials)
+ * @param props.size - Size variant (xxs: 18px, xs: 22px, sm: 26px, md: 30px)
+ * @param props.color - Color theme using design system tokens
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the root div element
+ * @returns The rendered avatar with label
+ *
+ * @example
+ * ```tsx
+ * <AvatarWithLabel label="JD" size="sm" color="orange" />
+ * <AvatarWithLabel label="AB" size="md" color="blue" className="rounded-full" />
+ * ```
+ */
+declare function AvatarWithLabel({ label, size, color, className, ref, ...props }: AvatarWithLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Avatar compound component with multiple variants for flexible usage.
+ *
+ * @namespace Avatar
+ * @property {React.ComponentType<RootProps>} Root - Container component for avatar content
+ * @property {React.ComponentType<ElementProps>} Element - Flexible text/content renderer with asChild support
+ * @property {React.ComponentType<LabelProps>} Label - Simplified text renderer (wrapper around Element)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Avatar.Root size="sm" color="orange">
+ *   <Avatar.Label label="JD" />
+ * </Avatar.Root>
+ *
+ * // With custom styling
+ * <Avatar.Root size="md" color="blue" className="rounded-full border-2 border-white">
+ *   <Avatar.Label label="AB" className="text-yellow-300" />
+ * </Avatar.Root>
+ *
+ * // Using Element with asChild for custom components
+ * <Avatar.Root size="sm" color="green">
+ *   <Avatar.Element label="CD" asChild>
+ *     <button onClick={handleClick}>Clickable Avatar</button>
+ *   </Avatar.Element>
+ * </Avatar.Root>
+ * ```
+ */
+declare const Avatar: {
+    Root: typeof Root;
+    Element: typeof Element;
+    Label: typeof Label;
+};
+/**
+ * @fileoverview Avatar component library providing both compound and convenience components.
+ *
+ * This module exports:
+ * - Avatar: A compound component with Root, Element, and Label sub-components
+ * - AvatarWithLabel: A convenience component that combines Root and Label
+ *
+ * Features:
+ * - Multiple sizes (xxs, xs, sm, md) with responsive scaling
+ * - Color themes using design system tokens
+ * - Customizable styling via className
+ * - Radix Slot support for advanced composition
+ * - TypeScript support with comprehensive prop types
+ * - Optimized typography for readability at all sizes
+ */
+export { Avatar, AvatarWithLabel, ElementProps, LabelProps, RootProps, AvatarWithLabelProps };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,55 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cva as i } from "class-variance-authority";
+import { cn as l } from "../../lib/utils.js";
+import { Slot as f } from "@radix-ui/react-slot";
+const d = i("px-[.375rem] aspect-square flex items-center justify-center", {
+  variants: {
+    size: {
+      xxs: "size-[1.125rem] rounded-[.3125rem] text-[8px]",
+      xs: "size-[1.375rem] rounded-md text-sm",
+      sm: "size-[1.625rem] rounded-lg text-sm",
+      md: "size-[1.875rem] rounded-[.625rem] text-base"
+    },
+    color: {
+      orange: "bg-[var(--surface-warning-default)]",
+      purple: "bg-[var(--surface-purple-default)]",
+      green: "bg-[var(--surface-success-default)]",
+      blue: "bg-[var(--surface-accent-default)]"
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    color: "orange"
+  }
+});
+function p({ size: t, color: a, children: r, className: e, ref: n, ...s }) {
+  const m = d({ size: t, color: a });
+  return /* @__PURE__ */ o("div", { "data-slot": "avatar-root", className: l(m, e), ref: n, ...s, children: r });
+}
+function u({ label: t, className: a, ref: r, asChild: e = !1, children: n, ...s }) {
+  return /* @__PURE__ */ o(
+    e ? f : "span",
+    {
+      "data-slot": "avatar-element",
+      className: l(e ? "" : "text-white text-center font-primary text-xs font-[450] leading-none tracking-[-0.0125rem] uppercase", a),
+      ref: r,
+      ...s,
+      children: e ? n : t
+    }
+  );
+}
+function x({ label: t, className: a, ref: r, ...e }) {
+  return /* @__PURE__ */ o(u, { label: t, className: a, ref: r, ...e });
+}
+function C({ label: t, size: a, color: r, className: e, ref: n, ...s }) {
+  return /* @__PURE__ */ o(c.Root, { size: a, color: r, className: e, ref: n, ...s, children: /* @__PURE__ */ o(c.Label, { label: t }) });
+}
+const c = {
+  Root: p,
+  Element: u,
+  Label: x
+};
+export {
+  c as Avatar,
+  C as AvatarWithLabel
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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