@ztwoint/z-ui 0.1.46 → 0.1.49

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

@@ -1,78 +1,108 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import * as h from "react";
-import { Button as c } from "../../../button/button.js";
-import { useTableFilterContext as g } from "./table-filter.context.js";
-import T from "./filters/text.js";
-import A from "./filters/boolean.js";
-import O from "./filters/number/number.js";
-import z from "./filters/checkbox.js";
-import $ from "../../../assets/icons/circle-check-filled.js";
-import { useClickOutside as j } from "../../../../hooks/useClickOutside.js";
-const E = ({ filterName: l }) => {
-  const [d, n] = h.useState(!1), u = h.useRef(null);
-  j(u, () => n(!1));
-  const {
-    getFilterForColumn: b,
-    hasAppliedFilterForColumn: C,
-    updateColumnFilter: m,
-    applyFilters: p,
-    schema: x,
-    filterComponents: i = {}
-  } = g(), e = x.find((a) => a.key === l);
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import * as m from "react";
+import { Button as u } from "../../../button/button.js";
+import { useTableFilterContext as K } from "./table-filter.context.js";
+import U from "./filters/text.js";
+import I from "./filters/boolean.js";
+import P from "./filters/number/number.js";
+import V from "./filters/checkbox.js";
+import q from "../../../assets/icons/circle-check-filled.js";
+import { useClickOutside as E } from "../../../../hooks/useClickOutside.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 b } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+const oe = ({ filterName: l }) => {
+  const [a, t] = m.useState(!1), [x, s] = m.useState(!1), h = m.useRef(null), {
+    getFilterForColumn: k,
+    hasAppliedFilterForColumn: y,
+    updateColumnFilter: C,
+    applyFilters: c,
+    resetToAppliedFilters: w,
+    schema: T,
+    filterComponents: d = {},
+    tempFilters: F,
+    filter: g
+  } = K();
+  E(h, () => {
+    b(l, F, g.value) && a ? s(!0) : t(!1);
+  });
+  const A = () => {
+    c(), t(!1);
+  }, O = () => {
+    s(!1), t(!1);
+  }, $ = () => {
+    w(), s(!1), t(!1);
+  }, R = () => {
+    s(!1);
+  }, e = T.find((r) => r.key === l);
   if (!e)
     return console.warn(`Column "${l}" not found in schema`), null;
   if (e.filterable === !1)
     return console.warn(`Column "${l}" is not filterable`), null;
-  const k = {
-    boolean: A,
-    text: T,
-    number: O,
-    checkbox: z
-  }, f = (i == null ? void 0 : i[e.cellType || ""]) || k[e.cellType || "text"];
-  if (!f)
+  const z = {
+    boolean: I,
+    text: U,
+    number: P,
+    checkbox: V
+  }, v = e.cellType && (d == null ? void 0 : d[e.cellType]) || z[e.cellType ?? "text"];
+  if (!v)
     return console.warn(
       `No filter component found for column "${e.key}" with cellType "${e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
     ), null;
-  const o = b(l), s = C(l), F = {
+  const o = k(l), f = y(l), p = o ? G(o, e.filterOptions) : void 0, D = {
     condition: (o == null ? void 0 : o.condition) || "",
     value: (o == null ? void 0 : o.value) || ""
-  }, v = () => {
-    m(l, "", ""), p(), n(!1);
-  }, w = () => {
-    p(), n(!1);
+  }, j = () => {
+    C(l, "", ""), c(), t(!1);
+  }, B = () => {
+    c(), t(!1);
   };
-  return /* @__PURE__ */ r("div", { className: "relative", ref: u, children: [
-    /* @__PURE__ */ t(
-      c,
+  return /* @__PURE__ */ i("div", { className: "relative", ref: h, children: [
+    /* @__PURE__ */ n(
+      u,
       {
         onClick: () => {
-          n(!d);
+          t(!a);
         },
-        variant: s ? "filled" : "stroke",
-        shade: s ? "brand" : "neutral",
+        variant: f ? "filled" : "stroke",
+        shade: f ? "brand" : "neutral",
         size: "small",
-        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
           e.title,
-          s && /* @__PURE__ */ t($, { className: "w-4 h-4 text-white flex-shrink-0" })
+          f && /* @__PURE__ */ n(q, { className: "w-4 h-4 text-white flex-shrink-0" })
         ] })
       }
     ),
-    d && /* @__PURE__ */ r("div", { className: "absolute top-full left-0 mt-2 w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
-      /* @__PURE__ */ t(
-        f,
+    a && /* @__PURE__ */ i("div", { className: "absolute top-full left-0 mt-2 w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
+      /* @__PURE__ */ n(
+        v,
         {
-          value: F,
-          onChange: ({ condition: a, value: y }) => m(l, a, y),
+          value: D,
+          onChange: ({ condition: r, value: S }) => C(l, r, S),
           filterOptions: e.filterOptions
         }
       ),
-      /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ t(c, { onClick: v, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-        /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+      !!p && /* @__PURE__ */ i("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ n(u, { onClick: j, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+        /* @__PURE__ */ n(u, { onClick: B, variant: "filled", shade: "neutral", size: "small", children: `Apply${p !== void 0 ? ` ${p}` : ""}` })
       ] })
-    ] })
+    ] }),
+    x && /* @__PURE__ */ n(
+      H,
+      {
+        onClose: R,
+        onKeepChanges: O,
+        onRevertChanges: $,
+        onApplyChanges: A,
+        hasUnsavedChanges: b(
+          l,
+          F,
+          g.value
+        )
+      }
+    )
   ] });
 };
 export {
-  E as TableFilterColumnButton
+  oe as TableFilterColumnButton
 };

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

@@ -9,6 +9,7 @@ export interface TableFilterContextValue {
     hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
+    resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     filterableFields: TableSchema;

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

@@ -9,6 +9,7 @@ declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
     hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
+    resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     tempFilters: FilterRule[];

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

@@ -1,6 +1,6 @@
 import u from "react";
-const S = ({ filter: l, schema: v }) => {
-  const [i, f] = u.useState(null), [r, n] = u.useState(l.value), a = v.filter((t) => t.filterable !== !1);
+const T = ({ filter: l, schema: v }) => {
+  const [i, f] = u.useState(null), [r, s] = u.useState(l.value), a = v.filter((t) => t.filterable !== !1);
   u.useEffect(() => {
     !i && a.length > 0 && f(a[0].key);
   }, [i, a]);
@@ -11,32 +11,34 @@ const S = ({ filter: l, schema: v }) => {
     const e = m(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
   }, g = (t, e, o) => {
-    const d = r.findIndex((s) => s.field === t);
+    const d = r.findIndex((n) => n.field === t);
     if (d >= 0) {
-      const s = r.map(
-        (F, x) => x === d ? {
+      const n = r.map(
+        (F, b) => b === d ? {
           ...F,
           ...e !== void 0 ? { condition: e } : {},
           ...o !== void 0 ? { value: o } : {}
         } : F
       );
-      n(s);
+      s(n);
     } else {
-      const s = {
+      const n = {
         field: t,
         ...e ? { condition: e } : {},
         value: o || ""
       };
-      n([...r, s]);
+      s([...r, n]);
     }
   }, h = () => {
-    n([]);
+    s([]);
   }, C = () => {
+    s(l.value);
+  }, y = () => {
     const t = r.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "");
     l.onChange(t);
-  }, y = l.value.length > 0;
+  }, x = l.value.length > 0;
   return u.useEffect(() => {
-    n(l.value);
+    s(l.value);
   }, [l.value]), {
     selectedColumn: i,
     setSelectedColumn: f,
@@ -45,12 +47,13 @@ const S = ({ filter: l, schema: v }) => {
     hasAppliedFilterForColumn: A,
     updateColumnFilter: g,
     clearAllFilters: h,
-    applyFilters: C,
-    hasActiveFilters: y,
+    resetToAppliedFilters: C,
+    applyFilters: y,
+    hasActiveFilters: x,
     tempFilters: r,
     filterableFields: a
   };
 };
 export {
-  S as default
+  T as default
 };

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

@@ -1,17 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as a } from "../../../lib/utils.js";
-const l = ({ children: e, className: t = "" }) => /* @__PURE__ */ r(
+import { cn as o } from "../../../lib/utils.js";
+const n = ({ children: e, className: t = "" }) => /* @__PURE__ */ r(
   "div",
   {
-    className: a(
-      "flex justify-between items-center bg-neutral-surface-default gap-3 p-2 pl-4",
+    className: o(
+      "flex justify-between items-center bg-background-neutral-default gap-3 p-2 pl-4",
       t
     ),
     children: e
   }
 );
 export {
-  l as TableFooter,
-  l as default
+  n as TableFooter,
+  n as default
 };

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

@@ -1,3 +1,3 @@
 import { StoryObj } from '@storybook/react';
-export declare const basicHeaderUsageCode = "import { Table, TableHeader } from '@/components/table';\n\nconst schema = [\n  {\n    key: 'id',\n    title: 'ID',\n    cellType: 'number',\n    sortable: true,\n  },\n  {\n    key: 'name',\n    title: 'Name',\n    cellType: 'text',\n    sortable: true,\n  },\n];\n\nconst data = [\n  { id: 1, name: 'John Doe' },\n  { id: 2, name: 'Jane Smith' },\n];\n\nfunction MyTable() {\n  return (\n    <Table dataSource={data} schema={schema}>\n      <table className=\"w-full\">\n        <TableHeader \n          schema={schema}\n          cell={{ cellHeight: 'small', hasBorder: true }}\n        />\n        {/* Table body goes here */}\n      </table>\n    </Table>\n  );\n}";
+export declare const basicHeaderUsageCode = "import { Table, TableHeader } from '@/components/table';\n\nconst schema = [\n  {\n    key: 'id',\n    title: 'ID',\n    cellType: 'number',\n    sortable: true,\n  },\n  {\n    key: 'name',\n    title: 'Name',\n    cellType: 'label',\n    sortable: true,\n  },\n];\n\nconst data = [\n  { id: 1, name: 'John Doe' },\n  { id: 2, name: 'Jane Smith' },\n];\n\nfunction MyTable() {\n  return (\n    <Table dataSource={data} schema={schema}>\n      <table className=\"w-full\">\n        <TableHeader \n          schema={schema}\n          cell={{ hasBorder: true }}\n        />\n        {/* Table body goes here */}\n      </table>\n    </Table>\n  );\n}";
 export declare const BasicHeader: StoryObj;

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

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

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

@@ -4,5 +4,5 @@ export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, C
 export { extractCellValue } from './table.utils';
 export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';
-export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
+export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
 export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';

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

@@ -1,7 +1,7 @@
-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 { jsx as e } from "react/jsx-runtime";
+import * as p from "react";
+import { TableContext as a } from "./table.context.js";
+import { TableBody as n } from "./table.js";
 import { TableFilter as f } from "./components/table-filter/table-filter-provider.js";
 import { TableSearch as l } from "./components/table-search/table-search.js";
 import { Pagination as s } from "./components/pagination/pagination.js";
@@ -9,27 +9,56 @@ import { PaginationInfo as T } from "./components/pagination/components/paginati
 import { PaginationQuickJumper as b } from "./components/pagination/components/pagination-quick-jumper.js";
 import "clsx";
 import "tailwind-merge";
+/* empty css                        */
+import "../alert/alert.const.js";
+import "../button/button.js";
+import "../collapsible-side-nav-bar/side-nav-bar-provider.js";
+import "../collapsible-side-nav-bar/side-nav-bar.js";
+import "../collapsible-side-nav-bar/side-nav-bar-header.js";
+import "../collapsible-side-nav-bar/side-nav-bar-content.js";
+import "../collapsible-side-nav-bar/side-nav-bar-footer.js";
+import "../collapsible-side-nav-bar/side-nav-bar-group.js";
+import "../collapsible-side-nav-bar/side-nav-bar-item.js";
+import "../collapsible-side-nav-bar/side-nav-bar-separator.js";
+import "../collapsible-side-nav-bar/context.js";
+import "../collapsible-side-nav-bar/popover/popover.js";
+import "react-country-flag";
+import "classnames";
+import "@radix-ui/react-dialog";
+import "../dropdown/z2-dropdown.js";
+import "@radix-ui/react-dropdown-menu";
+import "lucide-react";
+import "../input/input.js";
+import "../nav-header/nav-header.js";
+import "../nav-header/nav-item/nav-item.js";
+import "@radix-ui/react-select";
+import "../stepper/stepper.js";
+import "../stepper-item/stepper-item.js";
+import "@radix-ui/react-tabs";
+import "../tooltip/tooltip.js";
+import "../badge/badge.js";
+import "../avatar/avatar.js";
 import { TableHeaderWrapper as c } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as d } from "./components/table-header-content.js";
 import { TableFooter as u } from "./components/table-footer.js";
 import { TableFooterContent as g } from "./components/table-footer-content.js";
 const t = ({
-  children: e,
+  children: i,
   pagination: C,
   sort: F,
   filter: v,
   filterComponents: x,
   ...r
 }) => {
-  const i = n.useMemo(
+  const m = p.useMemo(
     () => ({
       ...r
     }),
     [r]
   );
-  return /* @__PURE__ */ a(m.Provider, { value: i, children: e });
+  return /* @__PURE__ */ e(a.Provider, { value: m, children: i });
 }, P = t, o = P;
-o.Body = p;
+o.Body = n;
 o.Filter = f;
 o.Search = l;
 o.Pagination = s;

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

@@ -1,24 +1,30 @@
 export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
 export declare const TABLE_CSS_CLASSES: {
     readonly table: "w-full";
-    readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
+    readonly bordered: {
+        readonly true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ";
+        readonly false: "";
+    };
+    readonly header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed";
     readonly cell: {
-        readonly default: "px-4 py-3 text-sm";
-        readonly cellHeight: {
-            readonly small: "p-3";
-            readonly large: "p-4";
-        };
+        readonly default: "p-0 align-middle relative h-4 ";
         readonly hasBorder: {
-            readonly true: "border border-stroke-solid-light";
+            readonly true: "border-r border-b border-stroke-solid-light ";
             readonly false: "border-b border-stroke-solid-light";
         };
     };
-    readonly headerCell: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
+    readonly headerCell: {
+        readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light";
+        readonly hasBorder: {
+            readonly true: " [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)] border-stroke-solid-light dark:shadow-none dark:border-0";
+            readonly false: "border-stroke-solid-light ";
+        };
+    };
     readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";
     readonly headerCellContent: "flex items-center justify-between";
     readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
     readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
-    readonly row: "hover:bg-surface-neutral-hover transition-colors duration-200 text-text-neutral-primary";
+    readonly row: " transition-colors duration-200 text-text-neutral-primary";
     readonly emptyState: "px-4 py-8 text-center text-gray-500";
     readonly loading: "px-4 py-8 text-center text-gray-500";
 };

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

@@ -1,23 +1,29 @@
 const e = "No data available", t = {
   table: "w-full",
-  header: "bg-background-neutral-medium text-text-neutral-secondary",
+  bordered: {
+    true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ",
+    false: ""
+  },
+  header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed",
   cell: {
-    default: "px-4 py-3 text-sm",
-    cellHeight: {
-      small: "p-3",
-      large: "p-4"
-    },
+    default: "p-0 align-middle relative h-4 ",
     hasBorder: {
-      true: "border border-stroke-solid-light",
+      true: "border-r border-b border-stroke-solid-light ",
       false: "border-b border-stroke-solid-light"
     }
   },
-  headerCell: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider",
+  headerCell: {
+    default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light",
+    hasBorder: {
+      true: " [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)] border-stroke-solid-light dark:shadow-none dark:border-0",
+      false: "border-stroke-solid-light "
+    }
+  },
   sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200",
   headerCellContent: "flex items-center justify-between",
   sortIcon: "ml-2 w-4 h-4 text-gray-400",
   sortIconActive: "ml-2 w-4 h-4 text-gray-600",
-  row: "hover:bg-surface-neutral-hover transition-colors duration-200 text-text-neutral-primary",
+  row: " transition-colors duration-200 text-text-neutral-primary",
   emptyState: "px-4 py-8 text-center text-gray-500",
   loading: "px-4 py-8 text-center text-gray-500"
 };

package/dist/components/table/table.js

@@ -1,41 +1,46 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import * as u from "react";
-import { DEFAULT_EMPTY_MESSAGE as T, TABLE_CSS_CLASSES as h } from "./table.const.js";
-import { TableHeader as g } from "./components/table-header/table-header.js";
-import { TableRow as E } from "./components/table-row.js";
-import { TableEmptyState as y } from "./components/table-empty-state.js";
-import { TableLoadingState as x } from "./components/table-loading-state.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import * as T from "react";
+import { DEFAULT_EMPTY_MESSAGE as g, TABLE_CSS_CLASSES as m } from "./table.const.js";
+import { TableHeader as E } from "./components/table-header/table-header.js";
+import { TableRow as y } from "./components/table-row.js";
+import { TableEmptyState as x } from "./components/table-empty-state.js";
+import { TableLoadingState as B } from "./components/table-loading-state.js";
 import { TableContext as C } from "./table.context.js";
-const w = ({
-  cell: r = { cellHeight: "small", hasBorder: !0 },
-  sort: l,
-  className: m,
-  stickyHeader: s = !1,
-  ...n
-}) => {
-  const c = u.useContext(C), {
-    dataSource: o = [],
-    schema: t = [],
-    loading: i = !1,
-    emptyMessage: f = T,
-    customCells: p
-  } = c || n, d = () => i ? /* @__PURE__ */ e(x, { colSpan: t.length }) : !o || o.length === 0 ? /* @__PURE__ */ e(y, { colSpan: t.length, message: f }) : /* @__PURE__ */ e("tbody", { children: o.map((S, a) => /* @__PURE__ */ e(
-    E,
+import { cn as s } from "../../lib/utils.js";
+const R = ({ cell: o = { hasBorder: !0 }, sort: n, className: f, stickyHeader: d = !1, ...i }) => {
+  const c = T.useContext(C), {
+    dataSource: t = [],
+    schema: r = [],
+    loading: a = !1,
+    emptyMessage: p = g,
+    customCells: u
+  } = c || i, S = () => a ? /* @__PURE__ */ e(B, { colSpan: r.length }) : !t || t.length === 0 ? /* @__PURE__ */ e(x, { colSpan: r.length, message: p }) : /* @__PURE__ */ e("tbody", { children: t.map((b, l) => /* @__PURE__ */ e(
+    y,
     {
-      record: S,
-      index: a,
-      schema: t,
-      customCells: p,
-      cell: r
+      record: b,
+      index: l,
+      schema: r,
+      customCells: u,
+      cell: o
     },
-    a
+    l
   )) });
-  return /* @__PURE__ */ e("div", { className: `${m} overflow-y-auto`, children: /* @__PURE__ */ b("table", { className: h.table, children: [
-    /* @__PURE__ */ e(g, { schema: t, sort: l, cell: r, stickyHeader: s }),
-    d()
-  ] }) });
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: s(
+        "overflow-y-auto",
+        m.bordered[o.hasBorder && !a && t.length > 0 ? "true" : "false"],
+        f
+      ),
+      children: /* @__PURE__ */ h("table", { className: s(m.table, "w-full"), children: [
+        /* @__PURE__ */ e(E, { schema: r, sort: n, cell: o, stickyHeader: d }),
+        S()
+      ] })
+    }
+  );
 };
 export {
-  w as TableBody,
-  w as default
+  R as TableBody,
+  R as default
 };