@ztwoint/z-ui 0.1.30 → 0.1.33

package/dist/components/button/button.js

@@ -8,17 +8,15 @@ const k = z(
   {
     variants: {
       variant: {
-        filled: [
-          "border-[.5px] disabled:border-none disabled:shadow-[var(--shadow-button-disabled)]"
-        ],
-        stroke: ["disabled:shadow-[var(--shadow-button-disabled)]"],
+        filled: ["border-[.5px] disabled:border-none disabled:shadow-button-disabled"],
+        stroke: ["disabled:shadow-button-disabled"],
         ghost: [""]
       },
       shade: {
         brand: "bg-button-primary-brand-surface-default border-button-primary-brand-surface-default  text-text-inverted-primary hover:bg-button-primary-brand-surface-hover active:bg-button-primary-brand-surface-pressed disabled:bg-button-primary-brand-surface-disabled disabled:text-text-neutral-muted disabled:border-button-primary-brand-surface-disabled",
         neutral: "bg-button-primary-neutral-surface-default border-button-primary-neutral-surface-default disabled:border-none text-text-inverted-primary  hover:bg-button-primary-neutral-surface-hover active:bg-button-primary-neutral-surface-pressed  disabled:bg-button-primary-neutral-surface-disabled disabled:text-text-neutral-muted",
         danger: "bg-button-primary-danger-surface-default border-button-primary-danger-stroke-default text-text-inverted-primary hover:bg-button-primary-danger-surface-hover active:bg-button-primary-danger-surface-pressed disabled:bg-button-primary-danger-surface-disabled disabled:text-text-neutral-muted",
-        neutralGhost: "border-none text-text-neutral-primary hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent"
+        neutralGhost: "border-none text-text-neutral-primary hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted"
       },
       size: {
         large: "gap-1",
@@ -96,14 +94,15 @@ const k = z(
     asChild: o = !1,
     leftIcon: t,
     rightIcon: a,
-    label: p,
+    label: m,
     children: u,
-    ...m
+    ...p
   }, y) => {
-    const f = o ? O : "button", r = p || u, n = !r && !!(t || a), l = n ? t || a : null, g = d(
-      k({ shade: b, size: c, variant: x, iconOnly: n, className: i })
-    ), s = "w-3.5 h-3.5";
-    return /* @__PURE__ */ e(f, { className: g, ref: y, ...m, children: o ? u : n ? l ? /* @__PURE__ */ e("span", { className: s, children: l }) : null : /* @__PURE__ */ v(h, { children: [
+    const f = o ? O : "button", r = m || u, n = !r && !!(t || a), l = n ? t || a : null, g = d(
+      k({ shade: b, size: c, variant: x, iconOnly: n }),
+      i
+    ), s = "w-3.5 h-3.5 min-w-max";
+    return /* @__PURE__ */ e(f, { className: g, ref: y, ...p, children: o ? u : n ? l ? /* @__PURE__ */ e("span", { className: s, children: l }) : null : /* @__PURE__ */ v(h, { children: [
       t && /* @__PURE__ */ e("span", { className: d(s), children: t }),
       r && /* @__PURE__ */ e("span", { children: r }),
       a && /* @__PURE__ */ e("span", { className: d(s), children: a })

package/dist/components/input/input.d.ts

@@ -1,2 +1,3 @@
 import { default as React } from 'react';
-export declare const Input: React.FC<React.InputHTMLAttributes<HTMLInputElement>>;
+import { InputProps } from './input.type';
+export declare const Input: React.FC<InputProps>;

package/dist/components/input/input.js

@@ -1,11 +1,40 @@
-import { jsx as o } from "react/jsx-runtime";
-const e = (r) => /* @__PURE__ */ o(
-  "input",
-  {
-    className: "border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-    ...r
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { cva as _ } from "class-variance-authority";
+import "react";
+import { cn as e } from "../../lib/utils.js";
+const d = _("", {
+  variants: {
+    size: {
+      small: "p-1.5 gap-1 h-[26px]",
+      large: "p-2 gap-1.5 h-[30px]"
+    }
   }
-);
+}), m = ({ size: s, leftIcon: a, rightIcon: n, className: o, ...i }) => {
+  const r = " w-3.5 h-3.5 text-text-neutral-secondary has-[:disabled]:text-input-surface-disabled", { ...p } = i;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: e(
+        "rounded-lg bg-input-surface-default flex items-center shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.default)] hover:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.hover)] focus-within:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] focus-within:hover:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] has-[:disabled]:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.disabled)]",
+        d({ size: s }),
+        o
+      ),
+      children: [
+        a && /* @__PURE__ */ t("span", { className: e(r, s === "large" && "w-4 h-4"), children: a }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            className: e(
+              "bg-transparent text-text-neutral-primary placeholder:text-text-neutral-muted disabled:text-text-neutral-muted leading-none-medium-sm border-none outline-none flex-1"
+            ),
+            ...p
+          }
+        ),
+        n && /* @__PURE__ */ t("span", { className: e(r), children: n })
+      ]
+    }
+  );
+};
 export {
-  e as Input
+  m as Input
 };

package/dist/components/input/input.type.d.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size: 'large' | 'small';
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}

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

@@ -1,11 +1,12 @@
 export { TableCell } from './table-cell';
-export { TableHeader, TableSortIcon } from './table-header';
+export { TextCell, NumberCell, BooleanCell } from './cell';
+export { TableHeader } from './table-header';
 export { TableRow } from './table-row';
 export { TableEmptyState } from './table-empty-state';
 export { TableLoadingState } from './table-loading-state';
-export { Pagination as TablePagination } from './pagination';
+export { Pagination as TablePagination } from './pagination/pagination';
 export { TableHeaderWrapper } from './table-header-wrapper';
 export { TableHeaderContent } from './table-header-content';
 export { TableFooter } from './table-footer';
 export { TableFooterContent } from './table-footer-content';
-export * from './cell';
+export { TableSearch } from './table-search';

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

@@ -9,9 +9,9 @@ export declare const PAGINATION_CSS_CLASSES: {
     readonly buttonActive: "bg-blue-600 text-white border-blue-600 hover:bg-blue-700";
     readonly buttonIcon: "flex items-center justify-center w-8 h-8 text-sm rounded border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors";
     readonly ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400";
-    readonly info: "text-sm text-text-neutral-secondary";
+    readonly info: "leading-none-sm text-text-neutral-secondary";
     readonly jumper: "flex items-center gap-2 text-sm text-text-neutral-primary";
-    readonly input: "w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
+    readonly input: "w-16 px-2 py-1 text-sm h-6 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
 };
 export declare const PAGINATION_LABELS: {
     readonly previous: "Previous page";

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

@@ -2,10 +2,10 @@ const e = {
   MAX_VISIBLE_PAGES: 6
 }, t = {
   ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400",
-  info: "text-sm text-text-neutral-secondary",
+  info: "leading-none-sm text-text-neutral-secondary",
   jumper: "flex items-center gap-2 text-sm text-text-neutral-primary",
-  input: "w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-}, r = {
+  input: "w-16 px-2 py-1 text-sm h-6 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+}, o = {
   previous: "Previous page",
   next: "Next page",
   first: "First page",
@@ -18,5 +18,5 @@ const e = {
 export {
   t as PAGINATION_CSS_CLASSES,
   e as PAGINATION_DEFAULTS,
-  r as PAGINATION_LABELS
+  o as PAGINATION_LABELS
 };

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

@@ -1,112 +1,116 @@
-import { jsxs as I, jsx as s } from "react/jsx-runtime";
-import { usePagination as S } from "./pagination.hook.js";
-import { PAGINATION_LABELS as o, PAGINATION_DEFAULTS as x, PAGINATION_CSS_CLASSES as E } from "./pagination.const.js";
-import { Button as d } from "../../../button/button.js";
-import k from "../../../assets/icons/chevron-left.js";
-import N from "../../../assets/icons/chevron-right.js";
-import L from "../../../assets/icons/double-chevron-left.js";
-import _ from "../../../assets/icons/double-chevron-right.js";
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { usePagination as A } from "./pagination.hook.js";
+import { PAGINATION_LABELS as o, PAGINATION_DEFAULTS as C, PAGINATION_CSS_CLASSES as S } from "./pagination.const.js";
+import { Button as m } from "../../../button/button.js";
+import E from "../../../assets/icons/chevron-left.js";
+import k from "../../../assets/icons/chevron-right.js";
+import y from "../../../assets/icons/double-chevron-left.js";
+import L from "../../../assets/icons/double-chevron-right.js";
 import "react";
-import { cn as z } from "../../../../lib/utils.js";
-const p = () => /* @__PURE__ */ s("span", { className: E.ellipsis, children: "..." }), V = ({
-  currentPage: i,
-  totalPage: r,
-  onChange: b,
-  disabled: t = !1
+import { cn as _ } from "../../../../lib/utils.js";
+const p = () => /* @__PURE__ */ e("span", { className: S.ellipsis, children: "..." }), $ = ({
+  currentPage: t,
+  totalPage: l,
+  onChange: x,
+  disabled: r = !1
 }) => {
-  const { visiblePages: m, hasEllipsisStart: v, hasEllipsisEnd: A } = S({
-    currentPage: i,
-    totalPage: r,
-    maxVisiblePages: x.MAX_VISIBLE_PAGES
+  const { visiblePages: d, hasEllipsisStart: b, hasEllipsisEnd: N } = A({
+    currentPage: t,
+    totalPage: l,
+    maxVisiblePages: C.MAX_VISIBLE_PAGES
   });
-  if (r <= 1)
+  if (l <= 1)
     return null;
-  const f = i === 1, c = i === r, a = (e) => {
-    !t && e !== i && e >= 1 && e <= r && b(e);
-  }, C = () => {
-    const e = [];
-    let h = !1, u = !1;
-    return m.forEach((l, y) => {
-      v && l === m[1] && !h && (e.push(/* @__PURE__ */ s(p, {}, "ellipsis-start")), h = !0);
-      const n = l === i;
-      e.push(
-        /* @__PURE__ */ s(
-          d,
+  const c = t === 1, f = t === l, i = (s) => {
+    !r && s !== t && s >= 1 && s <= l && x(s);
+  }, I = () => {
+    const s = [];
+    let u = !1, h = !1;
+    return d.forEach((a, z) => {
+      b && a === d[1] && !u && (s.push(/* @__PURE__ */ e(p, {}, "ellipsis-start")), u = !0);
+      const n = a === t;
+      s.push(
+        /* @__PURE__ */ e(
+          m,
           {
-            onClick: () => a(l),
+            onClick: () => i(a),
             variant: "stroke",
             shade: n ? "brand" : "neutral",
             size: "small",
-            "aria-label": `${o.page} ${l}`,
+            "aria-label": `${o.page} ${a}`,
             "aria-current": n ? "page" : void 0,
-            className: z(
-              "min-w-[29px] text-text-neutral-secondary",
-              n && "border border-button-primary-brand-surface-default"
+            className: _(
+              "text-text-neutral-secondary",
+              n && "border border-button-primary-brand-surface-default text-text-neutral-primary"
             ),
             style: {
               borderStyle: n ? "solid" : "none",
               boxShadow: n ? "none" : ""
             },
-            children: l
+            leftIcon: /* @__PURE__ */ e("span", { className: "leading-none-medium-sm", children: a })
           },
-          l
+          a
         )
-      ), A && l === m[m.length - 2] && !u && (e.push(/* @__PURE__ */ s(p, {}, "ellipsis-end")), u = !0);
-    }), e;
+      ), N && a === d[d.length - 2] && !h && (s.push(/* @__PURE__ */ e(p, {}, "ellipsis-end")), h = !0);
+    }), s;
   };
-  return /* @__PURE__ */ I("div", { className: "flex gap-1", children: [
-    /* @__PURE__ */ s(
-      d,
+  return /* @__PURE__ */ v("div", { className: "flex gap-1.5 items-center", children: [
+    /* @__PURE__ */ e(
+      m,
       {
         "aria-label": o.first,
-        onClick: () => a(1),
-        disabled: t || f,
+        onClick: () => i(1),
+        disabled: r || c,
         variant: "stroke",
         shade: "neutral",
         size: "small",
-        leftIcon: /* @__PURE__ */ s(L, {})
+        className: "text-text-neutral-secondary",
+        leftIcon: /* @__PURE__ */ e(y, {})
       }
     ),
-    /* @__PURE__ */ s(
-      d,
+    /* @__PURE__ */ e(
+      m,
       {
         "aria-label": o.previous,
-        onClick: () => a(i - 1),
-        disabled: t || f,
+        onClick: () => i(t - 1),
+        disabled: r || c,
         variant: "stroke",
         shade: "neutral",
         size: "small",
-        leftIcon: /* @__PURE__ */ s(k, {})
+        className: "text-text-neutral-secondary",
+        leftIcon: /* @__PURE__ */ e(E, {})
       }
     ),
-    C(),
-    /* @__PURE__ */ s(
-      d,
+    I(),
+    /* @__PURE__ */ e(
+      m,
       {
         "aria-label": o.next,
-        onClick: () => a(i + 1),
-        disabled: t || c,
+        onClick: () => i(t + 1),
+        disabled: r || f,
         variant: "stroke",
         shade: "neutral",
         size: "small",
-        leftIcon: /* @__PURE__ */ s(N, {})
+        className: "text-text-neutral-secondary",
+        leftIcon: /* @__PURE__ */ e(k, {})
       }
     ),
-    /* @__PURE__ */ s(
-      d,
+    /* @__PURE__ */ e(
+      m,
       {
         "aria-label": o.last,
-        onClick: () => a(r),
-        disabled: t || c,
+        onClick: () => i(l),
+        disabled: r || f,
         variant: "stroke",
         shade: "neutral",
         size: "small",
-        leftIcon: /* @__PURE__ */ s(_, {})
+        className: "text-text-neutral-secondary",
+        leftIcon: /* @__PURE__ */ e(L, {})
       }
     )
   ] });
 };
 export {
-  V as Pagination,
-  V as default
+  $ as Pagination,
+  $ as default
 };

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

@@ -21,7 +21,7 @@ const C = ({
     updateFilterRule: u
   } = N({ schema: c, filter: n || { value: [], onChange: () => {
   } } });
-  return n ? /* @__PURE__ */ r("div", { className: "relative mb-4", children: [
+  return n ? /* @__PURE__ */ r("div", { className: "relative", children: [
     /* @__PURE__ */ r(
       s,
       {

package/dist/components/table/components/table-footer-content.js

@@ -1,9 +1,16 @@
 import { jsx as o } from "react/jsx-runtime";
-const s = ({
+const a = ({
   children: e,
   className: t = ""
-}) => /* @__PURE__ */ o("div", { className: `flex items-center ${t}`, children: e });
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: `flex items-center 
+     gap-3 ${t}`,
+    children: e
+  }
+);
 export {
-  s as TableFooterContent,
-  s as default
+  a as TableFooterContent,
+  a as default
 };

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

@@ -1,6 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-const o = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `flex justify-between items-center ${t}`, children: e });
+import { jsx as t } from "react/jsx-runtime";
+const l = ({ children: e, className: r = "" }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: `flex justify-between items-center bg-neutral-default border-stroke-solid-light border border-t-[0.5px] gap-3 p-2 pl-4 rounded-b-xl  ${r} `,
+    children: e
+  }
+);
 export {
-  o as TableFooter,
-  o as default
+  l as TableFooter,
+  l as default
 };

package/dist/components/table/components/table-header/table-header.d.ts

@@ -4,6 +4,7 @@ interface TableHeaderProps {
     schema: TableSchemaColumn[];
     sort?: TableSort;
     cell: TableProps['cell'];
+    stickyHeader?: boolean;
 }
 export declare const TableHeader: React.FC<TableHeaderProps>;
 export {};

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

@@ -1,27 +1,38 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { TABLE_CSS_CLASSES as t } from "../../table.const.js";
-import { TableSortIcon as c } from "./table-sort-icon.js";
-import { getCurrentSortDirection as n, isSortActive as h, handleSortClick as p } from "./table-header.utils.js";
+import { TableSortIcon as n } from "./table-sort-icon.js";
+import { getCurrentSortDirection as h, isSortActive as p, handleSortClick as C } from "./table-header.utils.js";
 import "react";
-import { cn as C } from "../../../../lib/utils.js";
-const y = ({ schema: a, sort: i, cell: o }) => /* @__PURE__ */ r("thead", { className: t.header, children: /* @__PURE__ */ r("tr", { children: a.map((e) => {
-  const s = n(e.key, i), l = h(e.key, i);
-  return /* @__PURE__ */ r(
-    "th",
-    {
-      className: C(
-        e.sortable ? t.sortableHeaderCell : t.headerCell,
-        t.cell.hasBorder[o.hasBorder ? "true" : "false"]
-      ),
-      onClick: e.sortable ? () => p(e.key, i) : void 0,
-      children: /* @__PURE__ */ d("div", { className: t.headerCellContent, children: [
-        /* @__PURE__ */ r("span", { children: e.title }),
-        e.sortable && /* @__PURE__ */ r(c, { direction: s, isActive: l })
-      ] })
-    },
-    e.key
-  );
-}) }) });
+import { cn as S } from "../../../../lib/utils.js";
+const x = ({
+  schema: a,
+  sort: i,
+  cell: o,
+  stickyHeader: s = !1
+}) => /* @__PURE__ */ r(
+  "thead",
+  {
+    className: `${t.header} ${s ? "sticky top-[-1.5px] z-10" : ""}`,
+    children: /* @__PURE__ */ r("tr", { children: a.map((e) => {
+      const l = h(e.key, i), d = p(e.key, i);
+      return /* @__PURE__ */ r(
+        "th",
+        {
+          className: S(
+            e.sortable ? t.sortableHeaderCell : t.headerCell,
+            t.cell.hasBorder[o.hasBorder ? "true" : "false"]
+          ),
+          onClick: e.sortable ? () => C(e.key, i) : void 0,
+          children: /* @__PURE__ */ c("div", { className: t.headerCellContent, children: [
+            /* @__PURE__ */ r("span", { children: e.title }),
+            e.sortable && /* @__PURE__ */ r(n, { direction: l, isActive: d })
+          ] })
+        },
+        e.key
+      );
+    }) })
+  }
+);
 export {
-  y as TableHeader
+  x as TableHeader
 };

package/dist/components/table/components/table-header-content.js

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 const s = ({
   children: e,
   className: t = ""
-}) => /* @__PURE__ */ r("div", { className: `flex items-center ${t}`, children: e });
+}) => /* @__PURE__ */ a("div", { className: `flex items-center justify-between  gap-3 ${t}`, children: e });
 export {
   s as TableHeaderContent,
   s as default

package/dist/components/table/components/table-header-wrapper.js

@@ -1,9 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
-const s = ({
+const o = ({
   children: e,
   className: r = ""
-}) => /* @__PURE__ */ t("div", { className: `flex justify-between items-center ${r}`, children: e });
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: `p-3 gap-3 flex justify-between items-center  border-stroke-solid-medium border-1 border-b-0 rounded-t-xl ${r}`,
+    children: e
+  }
+);
 export {
-  s as TableHeaderWrapper,
-  s as default
+  o as TableHeaderWrapper,
+  o as default
 };

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

@@ -0,0 +1 @@
+export { TableSearch } from './table-search';

package/dist/components/table/components/table-search/table-search.d.ts

@@ -0,0 +1,7 @@
+import { TableSearch as TableSearchType } from '../../table.type';
+import * as React from 'react';
+export interface TableSearchProps {
+    search: TableSearchType;
+    className?: string;
+}
+export declare const TableSearch: React.FC<TableSearchProps>;

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

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Input as c } from "../../../input/input.js";
+import { MagnifierIcon as l } from "../../../assets/icons/magnifier-icon.js";
+const h = ({ search: r, className: o = "" }) => {
+  const { value: t, onChange: a, placeholder: n = "Search by Item Number or Description" } = r;
+  return /* @__PURE__ */ e(
+    c,
+    {
+      size: "small",
+      leftIcon: /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
+      placeholder: n,
+      value: t,
+      onChange: (m) => a(m.target.value),
+      type: "text",
+      className: o
+    }
+  );
+};
+export {
+  h as TableSearch
+};

package/dist/components/table/table-provider.d.ts

@@ -1,6 +1,7 @@
 import { TableProps } from './table.type';
 import { TableBody } from './table';
 import { TableFilter } from './components/table-filter';
+import { TableSearch } from './components/table-search';
 import { Pagination } from './components/pagination';
 import { TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent } from './components';
 import { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';
@@ -12,6 +13,7 @@ declare const TableProvider: React.FC<TableProviderProps>;
 interface TableCompoundComponent extends React.FC<TableProviderProps> {
     Body: typeof TableBody;
     Filter: typeof TableFilter;
+    Search: typeof TableSearch;
     Pagination: typeof Pagination;
     PaginationInfo: typeof PaginationInfo;
     PaginationQuickJumper: typeof PaginationQuickJumper;

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

@@ -1,45 +1,47 @@
-import { jsx as n } from "react/jsx-runtime";
-import * as a from "react";
+import { jsx as a } from "react/jsx-runtime";
+import * as n from "react";
 import { TableContext as m } from "./table.context.js";
 import { TableBody as p } from "./table.js";
 import { TableFilter as f } from "./components/table-filter/table-filter.js";
-import { Pagination as l } from "./components/pagination/pagination.js";
+import { TableSearch as l } from "./components/table-search/table-search.js";
+import { Pagination as s } from "./components/pagination/pagination.js";
 import "clsx";
 import "tailwind-merge";
-import { TableHeaderWrapper as s } from "./components/table-header-wrapper.js";
-import { TableHeaderContent as d } from "./components/table-header-content.js";
-import { TableFooter as T } from "./components/table-footer.js";
-import { TableFooterContent as b } from "./components/table-footer-content.js";
+import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
+import { TableHeaderContent as b } from "./components/table-header-content.js";
+import { TableFooter as c } from "./components/table-footer.js";
+import { TableFooterContent as d } from "./components/table-footer-content.js";
 import { PaginationInfo as u } from "./components/pagination/components/pagination-info.js";
-import { PaginationQuickJumper as c } from "./components/pagination/components/pagination-quick-jumper.js";
-const r = ({
+import { PaginationQuickJumper as g } from "./components/pagination/components/pagination-quick-jumper.js";
+const t = ({
   children: e,
-  pagination: P,
-  sort: C,
-  filter: F,
-  filterComponents: v,
-  ...t
+  pagination: C,
+  sort: F,
+  filter: v,
+  filterComponents: x,
+  ...r
 }) => {
-  const i = a.useMemo(
+  const i = n.useMemo(
     () => ({
-      ...t
+      ...r
     }),
-    [t]
+    [r]
   );
-  return /* @__PURE__ */ n(m.Provider, { value: i, children: e });
-}, g = r, o = g;
+  return /* @__PURE__ */ a(m.Provider, { value: i, children: e });
+}, P = t, o = P;
 o.Body = p;
 o.Filter = f;
-o.Pagination = l;
+o.Search = l;
+o.Pagination = s;
 o.PaginationInfo = u;
-o.PaginationQuickJumper = c;
-o.Provider = r;
-o.Header = s;
-o.HeaderContent = d;
-o.Footer = T;
-o.FooterContent = b;
+o.PaginationQuickJumper = g;
+o.Provider = t;
+o.Header = T;
+o.HeaderContent = b;
+o.Footer = c;
+o.FooterContent = d;
 export {
   o as Table,
-  r as TableProvider,
+  t as TableProvider,
   o as default
 };

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

@@ -1,4 +1,7 @@
 import { TableProps } from './table.type';
 import * as React from 'react';
-export declare const TableBody: React.FC<Partial<TableProps>>;
+export declare const TableBody: React.FC<Partial<TableProps> & {
+    className?: string;
+    stickyHeader?: boolean;
+}>;
 export default TableBody;