@ztwoint/z-ui 0.1.46 → 0.1.47

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

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

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

@@ -1,103 +1,113 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as f from "react";
-import { Button as c } from "../../../button/button.js";
-import { useTableFilterContext as O } from "./table-filter.context.js";
-import z from "./filters/text.js";
-import S from "./filters/boolean.js";
-import $ from "./filters/number/number.js";
-import B from "./filters/checkbox.js";
+import * as x from "react";
+import { Button as d } from "../../../button/button.js";
+import { useTableFilterContext as z } from "./table-filter.context.js";
+import S from "./filters/text.js";
+import B from "./filters/boolean.js";
+import D from "./filters/number/number.js";
+import I from "./filters/checkbox.js";
 import R from "../../../assets/icons/circle-check-filled.js";
 import { SelectedFiltersDisplay as P } from "./selected-filters-display/selected-filters-display.js";
-import { useClickOutside as D } from "../../../../hooks/useClickOutside.js";
-const Q = () => {
-  const [d, o] = f.useState(!1), m = f.useRef(null), {
+import { useClickOutside as V } from "../../../../hooks/useClickOutside.js";
+import { createFilterDisplayItems as q, calculateTotalCount as E } from "./selected-filters-display/selected-filters-display.utils.js";
+const Z = () => {
+  const [m, o] = x.useState(!1), p = x.useRef(null), {
     selectedColumn: r,
-    setSelectedColumn: h,
-    getFilterForColumn: x,
-    hasFilterForColumn: b,
-    updateColumnFilter: v,
-    clearAllFilters: y,
-    applyFilters: F,
+    setSelectedColumn: b,
+    getFilterForColumn: y,
+    hasFilterForColumn: v,
+    updateColumnFilter: F,
+    clearAllFilters: k,
+    applyFilters: N,
     hasActiveFilters: i,
-    filterableFields: k,
-    tempFilters: N,
-    schema: p,
-    filter: g,
+    filterableFields: g,
+    tempFilters: u,
+    schema: a,
+    filter: C,
     filterComponents: n = {}
-  } = O();
-  D(m, () => o(!1));
+  } = z();
+  V(p, () => o(!1));
   const w = () => {
-    F(), o(!1);
-  }, C = () => {
+    N(), o(!1);
+  }, T = q(u, a), f = E(T), j = () => {
     if (!r) return null;
-    const e = p.find((a) => a.key === r), T = {
-      boolean: S,
-      text: z,
-      number: $,
-      checkbox: B
-    }, u = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || T[(e == null ? void 0 : e.cellType) || "text"];
-    if (!u)
+    const e = a.find((c) => c.key === r), A = {
+      boolean: B,
+      text: S,
+      number: D,
+      checkbox: I
+    }, h = (e == null ? void 0 : e.cellType) && (n == null ? void 0 : n[e.cellType]) || A[(e == null ? void 0 : e.cellType) ?? "text"];
+    if (!h)
       return console.warn(
         `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
       ), null;
-    const s = x(r), j = {
+    const s = y(r), O = {
       condition: (s == null ? void 0 : s.condition) || "",
       value: (s == null ? void 0 : s.value) || ""
     };
     return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
-      u,
+      h,
       {
-        value: j,
-        onChange: ({ condition: a, value: A }) => v(r, a, A),
+        value: O,
+        onChange: ({ condition: c, value: $ }) => F(r, c, $),
         filterOptions: e == null ? void 0 : e.filterOptions
       }
     ) }) }) });
   };
-  return /* @__PURE__ */ l("div", { className: "relative", ref: m, children: [
+  return /* @__PURE__ */ l("div", { className: "relative", ref: p, children: [
     /* @__PURE__ */ l(
-      c,
+      d,
       {
         onClick: (e) => {
-          e.stopPropagation(), o(!d);
+          e.stopPropagation(), o(!m);
         },
         variant: i ? "filled" : "stroke",
         shade: i ? "brand" : "neutral",
         size: "small",
         children: [
           "Filter ",
-          i && `(${g.value.length})`
+          i && `(${C.value.length})`
         ]
       }
     ),
-    d && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
+    m && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
       /* @__PURE__ */ l("div", { className: "flex min-h-[442px]", children: [
         /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5", children: [
           /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
-          k.map((e) => /* @__PURE__ */ l(
+          g.map((e) => /* @__PURE__ */ l(
             "button",
             {
-              onClick: () => h(e.key),
+              onClick: () => b(e.key),
               className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors rounded-lg ${r === e.key ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
               children: [
                 /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                b(e.key) && /* @__PURE__ */ t(R, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                v(e.key) && /* @__PURE__ */ t(R, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
               ]
             },
             e.key
           ))
         ] }),
-        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? C() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? j() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
       ] }),
-      /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ t(P, { selectedFilters: N, schema: p }),
+      !!f && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[71px]", children: [
+        /* @__PURE__ */ t(P, { selectedFilters: u, schema: a }),
         /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ t(c, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-          /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+          /* @__PURE__ */ t(d, { onClick: k, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(
+            d,
+            {
+              onClick: w,
+              variant: "filled",
+              shade: "neutral",
+              size: "small",
+              children: `Apply ${f || ""}`
+            }
+          )
         ] })
       ] })
     ] })
   ] });
 };
 export {
-  Q as TableFilterButton
+  Z as TableFilterButton
 };

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

@@ -1,78 +1,79 @@
 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 * as C from "react";
+import { Button as d } from "../../../button/button.js";
+import { useTableFilterContext as T } from "./table-filter.context.js";
+import O from "./filters/text.js";
+import $ from "./filters/boolean.js";
+import A 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));
+import j from "../../../assets/icons/circle-check-filled.js";
+import { useClickOutside as B } from "../../../../hooks/useClickOutside.js";
+import { getFilterCount as R } from "./selected-filters-display/selected-filters-display.utils.js";
+const J = ({ filterName: o }) => {
+  const [u, n] = C.useState(!1), m = C.useRef(null);
+  B(m, () => n(!1));
   const {
     getFilterForColumn: b,
-    hasAppliedFilterForColumn: C,
-    updateColumnFilter: m,
-    applyFilters: p,
-    schema: x,
+    hasAppliedFilterForColumn: x,
+    updateColumnFilter: p,
+    applyFilters: f,
+    schema: F,
     filterComponents: i = {}
-  } = g(), e = x.find((a) => a.key === l);
+  } = T(), e = F.find((c) => c.key === o);
   if (!e)
-    return console.warn(`Column "${l}" not found in schema`), null;
+    return console.warn(`Column "${o}" not found in schema`), null;
   if (e.filterable === !1)
-    return console.warn(`Column "${l}" is not filterable`), null;
+    return console.warn(`Column "${o}" is not filterable`), null;
   const k = {
-    boolean: A,
-    text: T,
-    number: O,
+    boolean: $,
+    text: O,
+    number: A,
     checkbox: z
-  }, f = (i == null ? void 0 : i[e.cellType || ""]) || k[e.cellType || "text"];
-  if (!f)
+  }, h = e.cellType && (i == null ? void 0 : i[e.cellType]) || k[e.cellType ?? "text"];
+  if (!h)
     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 = {
-    condition: (o == null ? void 0 : o.condition) || "",
-    value: (o == null ? void 0 : o.value) || ""
-  }, v = () => {
-    m(l, "", ""), p(), n(!1);
+  const l = b(o), s = x(o), a = l ? R(l, e.filterOptions) : void 0, v = {
+    condition: (l == null ? void 0 : l.condition) || "",
+    value: (l == null ? void 0 : l.value) || ""
+  }, y = () => {
+    p(o, "", ""), f(), n(!1);
   }, w = () => {
-    p(), n(!1);
+    f(), n(!1);
   };
-  return /* @__PURE__ */ r("div", { className: "relative", ref: u, children: [
+  return /* @__PURE__ */ r("div", { className: "relative", ref: m, children: [
     /* @__PURE__ */ t(
-      c,
+      d,
       {
         onClick: () => {
-          n(!d);
+          n(!u);
         },
         variant: s ? "filled" : "stroke",
         shade: s ? "brand" : "neutral",
         size: "small",
         children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
           e.title,
-          s && /* @__PURE__ */ t($, { className: "w-4 h-4 text-white flex-shrink-0" })
+          s && /* @__PURE__ */ t(j, { 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: [
+    u && /* @__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,
+        h,
         {
-          value: F,
-          onChange: ({ condition: a, value: y }) => m(l, a, y),
+          value: v,
+          onChange: ({ condition: c, value: g }) => p(o, c, g),
           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" })
+      !!a && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ t(d, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+        /* @__PURE__ */ t(d, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: `Apply${a !== void 0 ? ` ${a}` : ""}` })
       ] })
     ] })
   ] });
 };
 export {
-  E as TableFilterColumnButton
+  J as TableFilterColumnButton
 };

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,31 +1,31 @@
 import { jsx as r, jsxs as c } 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 { TableSortIcon as h } from "./table-sort-icon.js";
+import { getCurrentSortDirection as n, isSortActive as p, handleSortClick as C } from "./table-header.utils.js";
 import "react";
 import { cn as S } from "../../../../lib/utils.js";
 const x = ({
-  schema: a,
-  sort: i,
+  schema: i,
+  sort: a,
   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);
+    children: /* @__PURE__ */ r("tr", { children: i.map((e) => {
+      const l = n(e.key, a), d = p(e.key, a);
       return /* @__PURE__ */ r(
         "th",
         {
           className: S(
-            e.sortable ? t.sortableHeaderCell : t.headerCell,
-            t.cell.hasBorder[o.hasBorder ? "true" : "false"]
+            e.sortable ? t.sortableHeaderCell : t.headerCell.default,
+            t.headerCell.hasBorder[o.hasBorder ? "true" : "false"]
           ),
-          onClick: e.sortable ? () => C(e.key, i) : void 0,
+          onClick: e.sortable ? () => C(e.key, a) : 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.sortable && /* @__PURE__ */ r(h, { direction: l, isActive: d })
           ] })
         },
         e.key

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

@@ -3,22 +3,24 @@ export declare const TABLE_CSS_CLASSES: {
     readonly table: "w-full";
     readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
     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";
+        readonly hasBorder: {
+            readonly true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
+            readonly false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-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

@@ -2,22 +2,24 @@ const e = "No data available", t = {
   table: "w-full",
   header: "bg-background-neutral-medium text-text-neutral-secondary",
   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",
+    hasBorder: {
+      true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]",
+      false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-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

@@ -6,13 +6,7 @@ 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 { TableContext as C } from "./table.context.js";
-const w = ({
-  cell: r = { cellHeight: "small", hasBorder: !0 },
-  sort: l,
-  className: m,
-  stickyHeader: s = !1,
-  ...n
-}) => {
+const w = ({ cell: r = { hasBorder: !0 }, sort: l, className: m, stickyHeader: s = !1, ...n }) => {
   const c = u.useContext(C), {
     dataSource: o = [],
     schema: t = [],

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

@@ -1,6 +1,12 @@
 import { FC } from 'react';
 import { FilterComponentType } from './components/table-filter/table-filter.type';
-export type CellType = 'text' | 'number' | 'boolean' | 'checkbox';
+import { NumberCellProps } from './components/cell/number-cell';
+import { BooleanCellProps } from './components/cell/boolean-cell';
+import { LinkCellProps } from './components/cell/link-cell';
+import { AvatarCellProps } from './components/cell/avatar-cell';
+import { LabelCellProps } from './components/cell/label-cell';
+import { DescriptionCellProps } from './components/cell/description-cell';
+export type CellType = 'number' | 'boolean' | 'checkbox' | 'link' | 'avatar' | 'label' | 'description' | 'text';
 export type CellValue = string | number | boolean | null | undefined;
 export type CellRendererProps = {
     value: CellValue;
@@ -46,22 +52,46 @@ export type TableSort = {
     sortedColumns: SortColumn[];
     onSort: (field: string, direction: SortDirection) => void;
 };
-export type TableSchemaColumn = {
+type CellPropsByType = {
+    number: Omit<NumberCellProps, 'value'>;
+    boolean: Omit<BooleanCellProps, 'value'>;
+    checkbox: Omit<BooleanCellProps, 'value'>;
+    link: Omit<LinkCellProps, 'value' | 'href'> & {
+        href: string;
+    };
+    avatar: Omit<AvatarCellProps, 'value'>;
+    label: Omit<LabelCellProps, 'value'>;
+    description: Omit<DescriptionCellProps, 'value'>;
+};
+type ColumnBase<T extends CellType> = {
     key: string;
-    valueGetter?: (record: Record<string, any>) => string | number | boolean | null | undefined;
     title: string;
-    cellType: CellType;
+    cellType: T;
     cellRenderer?: CellRenderer;
     filterable?: boolean;
     hideable?: boolean;
     sortable?: boolean;
     filterOptions?: FilterOption[];
 };
+export type TableSchemaColumn = (ColumnBase<'number'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['number'];
+}) | (ColumnBase<'boolean'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['boolean'];
+}) | (ColumnBase<'checkbox'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['checkbox'];
+}) | (ColumnBase<'link'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['link'];
+}) | (ColumnBase<'avatar'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['avatar'];
+}) | (ColumnBase<'label'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['label'];
+}) | (ColumnBase<'description'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['description'];
+});
 export type TableSchema = TableSchemaColumn[];
 export type TableProps = {
     cell?: {
         hasBorder?: boolean;
-        cellHeight?: 'small' | 'large';
     };
     dataSource: Record<string, unknown>[];
     schema: TableSchema;
@@ -73,3 +103,4 @@ export type TableProps = {
     sort?: TableSort;
     customCells?: Record<string, CellRenderer>;
 };
+export {};

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

@@ -1,2 +1,2 @@
 import { CellValue, TableSchemaColumn } from './table.type';
-export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;
+export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue | Record<string, unknown>;

package/dist/components/table/table.utils.js

@@ -1,6 +1,8 @@
-const a = (t, e) => {
-  var r;
-  return e.valueGetter ? e.valueGetter(t) : (r = t[e.key]) == null ? void 0 : r.toString();
+const a = (r, e) => {
+  if (e.valueGetter)
+    return e.valueGetter(r);
+  const t = r[e.key];
+  return t != null ? t ?? void 0 : void 0;
 };
 export {
   a as extractCellValue