@ztwoint/z-ui 0.1.33 → 0.1.35

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

@@ -1,105 +1,119 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
 import { Button as s } from "../../../button/button.js";
-import N from "./table-filter.hook.js";
+import C from "./table-filter.hook.js";
 import T from "./filters/text.js";
-import z from "./filters/boolean.js";
-import w from "./filters/number.js";
-const C = ({
-  filterComponents: o = {},
-  schema: c,
-  filter: n
+import j from "./filters/boolean.js";
+import z from "./filters/number/number.js";
+import A from "./filters/checkbox.js";
+import O from "../../../assets/icons/circle-check-filled.js";
+const E = ({
+  filterComponents: n = {},
+  schema: d,
+  filter: o
 }) => {
   const {
-    addFilterRule: b,
-    applyFilters: y,
-    filterableFields: k,
-    hasActiveFilters: d,
+    selectedColumn: r,
+    setSelectedColumn: p,
+    getFilterForColumn: x,
+    hasFilterForColumn: b,
+    updateColumnFilter: f,
+    clearAllFilters: v,
+    applyFilters: k,
+    hasActiveFilters: i,
     isOpen: m,
-    removeFilterRule: F,
-    setIsOpen: p,
-    tempFilters: x,
-    updateFilterRule: u
-  } = N({ schema: c, filter: n || { value: [], onChange: () => {
+    setIsOpen: u,
+    filterableFields: y
+  } = C({ schema: d, filter: o || { value: [], onChange: () => {
   } } });
-  return n ? /* @__PURE__ */ r("div", { className: "relative", children: [
-    /* @__PURE__ */ r(
+  if (!o)
+    return null;
+  const N = () => {
+    if (!r) return null;
+    const e = d.find((c) => c.key === r), F = {
+      boolean: j,
+      text: T,
+      number: z,
+      checkbox: A
+    }, h = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || F[(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 a = x(r), g = {
+      condition: (a == null ? void 0 : a.condition) || "",
+      value: (a == null ? void 0 : a.value) || ""
+    };
+    return /* @__PURE__ */ l("div", { className: "flex-1", children: /* @__PURE__ */ l("div", { className: "mb-4", children: /* @__PURE__ */ l("div", { className: "", children: /* @__PURE__ */ l(
+      h,
+      {
+        value: g,
+        onChange: ({ condition: c, value: w }) => f(r, c, w),
+        filterOptions: e == null ? void 0 : e.filterOptions
+      }
+    ) }) }) });
+  };
+  return /* @__PURE__ */ t("div", { className: "relative", children: [
+    /* @__PURE__ */ t(
       s,
       {
-        onClick: () => p(!m),
-        variant: d ? "filled" : "stroke",
-        shade: d ? "brand" : "neutral",
+        onClick: () => u(!m),
+        variant: i ? "filled" : "stroke",
+        shade: i ? "brand" : "neutral",
         size: "small",
         children: [
           "Filter ",
-          d && `(${n.value.length})`
+          i && `(${o.value.length})`
         ]
       }
     ),
-    m && /* @__PURE__ */ t("div", { className: "absolute top-full left-0 mt-2 min-w-96 bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-      x.map((i, a) => {
-        const e = c.find((l) => l.key === i.field), h = {
-          boolean: z,
-          text: T,
-          number: w
-        }, v = (o == null ? void 0 : o[(e == null ? void 0 : e.cellType) || ""]) || h[(e == null ? void 0 : e.cellType) || "text"];
-        v || 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".`
-        );
-        const g = v ?? h.text;
-        return /* @__PURE__ */ r("div", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ t(
-            "select",
-            {
-              value: i.field,
-              onChange: (l) => u(a, { field: l.target.value, condition: void 0 }),
-              className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm flex-1",
-              children: k.map((l) => /* @__PURE__ */ t("option", { value: l.key, children: l.title }, l.key))
-            }
-          ),
-          /* @__PURE__ */ t(
-            g,
+    m && /* @__PURE__ */ t("div", { className: "absolute top-full left-0 mt-2 min-w-[600px] bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10", children: [
+      /* @__PURE__ */ t("div", { className: "flex min-h-[300px]", children: [
+        /* @__PURE__ */ t("div", { className: "w-48 border-r border-stroke-solid-medium", children: [
+          /* @__PURE__ */ l("div", { className: "p-3 border-b border-stroke-solid-medium", children: /* @__PURE__ */ l("h3", { className: "text-sm font-medium text-text-neutral-primary", children: "Columns" }) }),
+          /* @__PURE__ */ l("div", { className: "py-2", children: y.map((e) => /* @__PURE__ */ t(
+            "button",
             {
-              onChange: ({ condition: l, value: f }) => {
-                u(a, {
-                  ...l ? { condition: l } : {},
-                  ...f ? { value: f } : {}
-                });
-              },
-              value: { value: i.value, condition: i.condition }
+              onClick: () => p(e.key),
+              className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors ${r === e.key ? "bg-surface-brand-subtle text-text-brand-primary" : "text-text-neutral-primary"}`,
+              children: [
+                /* @__PURE__ */ l("span", { className: "truncate", children: e.title }),
+                b(e.key) && /* @__PURE__ */ l(O, { className: "w-4 h-4 text-icon-brand-primary flex-shrink-0 ml-2" })
+              ]
             },
-            a
-          ),
-          /* @__PURE__ */ t(
-            s,
-            {
-              onClick: () => F(a),
-              variant: "ghost",
-              shade: "danger",
-              size: "small",
-              className: "!px-2 !py-1",
-              children: "×"
-            }
-          )
-        ] }, a);
-      }),
-      /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ t(s, { onClick: b, variant: "stroke", shade: "neutral", size: "small", children: "+ Add" }),
-        /* @__PURE__ */ t("div", { className: "flex-1" }),
-        /* @__PURE__ */ t(
+            e.key
+          )) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col", children: r ? N() : /* @__PURE__ */ l("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 justify-between items-center p-4 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ l(
           s,
           {
-            onClick: () => p(!1),
-            variant: "stroke",
+            onClick: v,
+            variant: "ghost",
             shade: "neutral",
             size: "small",
-            children: "Cancel"
+            disabled: !i,
+            children: "Clear All"
           }
         ),
-        /* @__PURE__ */ t(s, { onClick: y, variant: "filled", shade: "brand", size: "small", children: "Apply" })
+        /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ l(
+            s,
+            {
+              onClick: () => u(!1),
+              variant: "stroke",
+              shade: "neutral",
+              size: "small",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ l(s, { onClick: k, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+        ] })
       ] })
-    ] }) })
-  ] }) : null;
+    ] })
+  ] });
 };
 export {
-  C as TableFilter
+  E as TableFilter
 };

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TableFilter, TableSchema } from '../../table.type';
+import { TableFilter, TableSchema, FilterOption } from '../../table.type';
 export interface TableFilterProps {
     schema: TableSchema;
     filter: TableFilter;
@@ -8,11 +8,12 @@ export interface TableFilterProps {
 export type FilterComponentProps = {
     onChange: (input: {
         condition?: string;
-        value?: string;
+        value?: string | string[];
     }) => void;
     value: {
         condition?: string;
-        value: string;
+        value: string | string[];
     };
+    filterOptions?: FilterOption[];
 };
 export type FilterComponentType = FC<FilterComponentProps>;

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

@@ -2,7 +2,7 @@ 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} `,
+    className: `flex justify-between items-center bg-neutral-surface-default border-stroke-solid-light border border-t-[0.5px] gap-3 p-2 pl-4 rounded-b-xl  ${r} `,
     children: e
   }
 );

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

@@ -12,7 +12,7 @@ const x = ({
 }) => /* @__PURE__ */ r(
   "thead",
   {
-    className: `${t.header} ${s ? "sticky top-[-1.5px] z-10" : ""}`,
+    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(

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

@@ -1,6 +1,6 @@
 export { Table as default, Table, TableProvider } from './table-provider';
 export { TableBody } from './table';
-export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
+export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, FilterOption, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
 export { getNestedValue, extractCellValue } from './table.utils';
 export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';

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

@@ -1,7 +1,7 @@
 export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
 export declare const TABLE_CSS_CLASSES: {
     readonly table: "w-full";
-    readonly header: "bg-neutral-25 text-text-neutral-secondary";
+    readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
     readonly cell: {
         readonly default: "px-4 py-3 text-sm";
         readonly cellHeight: {

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

@@ -1,6 +1,6 @@
 const e = "No data available", t = {
   table: "w-full",
-  header: "bg-neutral-25 text-text-neutral-secondary",
+  header: "bg-background-neutral-medium text-text-neutral-secondary",
   cell: {
     default: "px-4 py-3 text-sm",
     cellHeight: {

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { FilterComponentType } from './components/table-filter/table-filter.type';
-export type CellType = 'text' | 'number' | 'boolean';
+export type CellType = 'text' | 'number' | 'boolean' | 'checkbox';
 export type CellValue = string | number | boolean | null | undefined;
 export type CellRendererProps = {
     value: CellValue;
@@ -12,6 +12,10 @@ export type FilterCondition = 'contains' | 'notEqual' | 'equal' | '>' | '<' | '=
 export type FilterRule = {
     field: string;
     condition?: string;
+    value: string | string[];
+};
+export type FilterOption = {
+    label: string;
     value: string;
 };
 export type TableFilter = {
@@ -49,6 +53,7 @@ export type TableSchemaColumn = {
     filterable?: boolean;
     hideable?: boolean;
     sortable?: boolean;
+    filterOptions?: FilterOption[];
 };
 export type TableSchema = TableSchemaColumn[];
 export type TableProps = {

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

@@ -1,2 +1,2 @@
 export { default as TableCard } from './table-card';
-export type { TableCardProps, TableCardSearch, TableCardFilter, TableCardPaginationInfo, TableCardPaginationQuickJumper, TableCardPagination, TableCardBodyProps, } from './table-card.type';
+export type { TableCardProps } from './table-card.type';

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

@@ -0,0 +1,114 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { Table as e } from "../table/table-provider.js";
+import "react";
+import { cn as o } from "../../lib/utils.js";
+import "../table/table.context.js";
+import "../button/button.js";
+import "../input/input.js";
+const S = ({
+  dataSource: f,
+  schema: m,
+  loading: u,
+  emptyMessage: N,
+  className: H,
+  showHeader: P = !0,
+  headerClassName: v,
+  search: s,
+  filter: h,
+  headerActions: n,
+  body: r = {
+    cell: { cellHeight: "small", hasBorder: !0 },
+    className: "",
+    stickyHeader: !0
+  },
+  showFooter: C = !0,
+  footerClassName: _,
+  pagination: a,
+  paginationInfo: c,
+  paginationQuickJumper: t
+}) => {
+  const x = a || c || t, g = s || h || n;
+  return /* @__PURE__ */ l("div", { className: o("flex flex-col overflow-hidden", H), children: /* @__PURE__ */ d(e, { dataSource: f, schema: m, loading: u, emptyMessage: N, children: [
+    P && g && /* @__PURE__ */ d(e.Header, { className: o("flex-shrink-0", v), children: [
+      /* @__PURE__ */ d(e.HeaderContent, { children: [
+        s && /* @__PURE__ */ l(
+          e.Search,
+          {
+            search: {
+              value: s.value || "",
+              onChange: s.onChange || (() => {
+              }),
+              placeholder: s.placeholder
+            },
+            className: s.className
+          }
+        ),
+        h && /* @__PURE__ */ l(
+          e.Filter,
+          {
+            schema: m,
+            filter: {
+              value: h.value || [],
+              onChange: h.onChange || (() => {
+              })
+            }
+          }
+        )
+      ] }),
+      n && /* @__PURE__ */ l(e.HeaderContent, { children: n })
+    ] }),
+    /* @__PURE__ */ l(
+      e.Body,
+      {
+        cell: r == null ? void 0 : r.cell,
+        sort: r == null ? void 0 : r.sort,
+        className: o(
+          "flex-1 min-h-0",
+          "border-stroke-solid-light border-b-1 border-x-1 border-t-0",
+          !(P && g) && "rounded-t-xl",
+          !(C && x) && "rounded-b-xl",
+          "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
+          "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
+          "[&_tr:last-child_td]:border-b-0",
+          r == null ? void 0 : r.className
+        ),
+        stickyHeader: r == null ? void 0 : r.stickyHeader
+      }
+    ),
+    C && x && /* @__PURE__ */ d(e.Footer, { className: o("flex-shrink-0", _), children: [
+      c && /* @__PURE__ */ l(e.FooterContent, { children: /* @__PURE__ */ l(
+        e.PaginationInfo,
+        {
+          showTotal: c.showTotal || !1,
+          totalItems: c.totalItems || 0,
+          currentPage: c.currentPage || 1,
+          itemsPerPage: c.itemsPerPage || 10
+        }
+      ) }),
+      (t || a) && /* @__PURE__ */ d(e.FooterContent, { children: [
+        t && /* @__PURE__ */ l(
+          e.PaginationQuickJumper,
+          {
+            currentPage: t.currentPage || 1,
+            totalPage: t.totalPage || 1,
+            onChange: t.onChange || (() => {
+            }),
+            disabled: t.disabled || !1
+          }
+        ),
+        a && /* @__PURE__ */ l(
+          e.Pagination,
+          {
+            currentPage: a.currentPage || 1,
+            totalPage: a.totalPage || 1,
+            onChange: a.onChange || (() => {
+            })
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  S as default
+};

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

@@ -1,36 +1,28 @@
-import { TableProps, TableSchema, TableFilter as TableFilterType, TableSearch as TableSearchType } from '../table/table.type';
+import { default as React } from 'react';
+import { TableProps, TableSchema, TableFilter, TableSearch, TableSort } from '../table/table.type';
 import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../table/components/pagination/pagination.type';
-export interface TableCardSearch extends Partial<TableSearchType> {
-    className?: string;
-}
-export type TableCardFilter = Partial<TableFilterType>;
-export type TableCardPaginationInfo = Partial<PaginationInfoProps>;
-export type TableCardPaginationQuickJumper = Partial<PaginationQuickJumperProps>;
-export type TableCardPagination = Partial<PaginationProps>;
-export type TableCardBodyProps = Pick<TableProps, 'cell' | 'sort'> & {
-    className?: string;
-    stickyHeader?: boolean;
-};
-export interface TableCardProps extends Omit<TableProps, 'filter' | 'pagination' | 'sort'> {
+export interface TableCardProps {
     dataSource: Record<string, unknown>[];
     schema: TableSchema;
     className?: string;
     showHeader?: boolean;
     headerClassName?: string;
-    search?: TableCardSearch;
-    filter?: TableCardFilter;
-    body?: TableCardBodyProps;
+    search?: Partial<TableSearch> & {
+        className?: string;
+    };
+    filter?: Partial<TableFilter>;
+    headerActions?: React.ReactNode;
+    body?: {
+        cell?: TableProps['cell'];
+        sort?: TableSort;
+        className?: string;
+        stickyHeader?: boolean;
+    };
     showFooter?: boolean;
     footerClassName?: string;
-    paginationInfo?: TableCardPaginationInfo;
-    paginationQuickJumper?: TableCardPaginationQuickJumper;
-    pagination?: TableCardPagination;
-    overrides?: {
-        search?: Partial<TableCardSearch>;
-        filter?: Partial<TableCardFilter>;
-        body?: Partial<TableCardBodyProps>;
-        paginationInfo?: Partial<TableCardPaginationInfo>;
-        paginationQuickJumper?: Partial<TableCardPaginationQuickJumper>;
-        pagination?: Partial<TableCardPagination>;
-    };
+    pagination?: Partial<PaginationProps>;
+    paginationInfo?: Partial<PaginationInfoProps>;
+    paginationQuickJumper?: Partial<PaginationQuickJumperProps>;
+    loading?: boolean;
+    emptyMessage?: string;
 }

package/dist/css/config/colors/semantic-colors.css

@@ -1,16 +1,16 @@
 /* Semantic Colors - Design System Foundation */
 
 :root {
-  /* Background Colors */
-  --background-default: var(--neutral-0);
-  --background-on-top: var(--neutral-0);
-  --background-light: var(--neutral-25);
-  --background-medium: var(--neutral-50);
-  --background-high: var(--neutral-100);
-  --background-inverted-elevated: rgba(255, 255, 255, 0.1);
-  --background-attention: var(--neutral-200);
-  --background-brand: #001534;
 
+/* Background Colors - Neutral */
+  --background-neutral-default: var(--neutral-0);
+  --background-neutral-on-top: var(--neutral-0);
+  --background-neutral-light: var(--neutral-25);
+  --background-neutral-medium: var(--neutral-50);
+  --background-neutral-high: var(--neutral-100);
+  --background-neutral-pressed: var(--neutral-75);
+  --background-neutral-hover: var(--neutral-50);
+  --background-neutral-focused: var(--neutral-25);
   /* Surface Colors - Neutral */
   --surface-neutral-default: var(--neutral-0);
   --surface-neutral-hover: var(--neutral-75);
@@ -119,16 +119,17 @@
 }
 
 .dark {
-  /* Background Colors - Dark Mode */
-  --background-default: var(--neutral-0);
-  --background-on-top: var(--neutral-50);
-  --background-light: var(--neutral-25);
-  --background-medium: var(--neutral-25);
-  --background-high: var(--neutral-100);
-  --background-inverted-elevated: rgba(20, 20, 20, 0.1);
-  --background-attention: var(--neutral-200);
-  --background-brand: #0f0f0f;
 
+
+  /* Background Colors - Neutral - Dark Mode */
+    --background-neutral-default: var(--neutral-0);
+    --background-neutral-on-top: var(--neutral-50);
+    --background-neutral-light: var(--neutral-25);
+    --background-neutral-medium: var(--neutral-25);
+    --background-neutral-high: var(--neutral-100);
+    --background-neutral-pressed: var(--neutral-75);
+    --background-neutral-hover: var(--neutral-50);
+    --background-neutral-focused: var(--neutral-25);
   /* Surface Colors - Neutral - Dark Mode */
   --surface-neutral-default: var(--neutral-0);
   --surface-neutral-hover: var(--neutral-75);
@@ -238,16 +239,16 @@
 
 /* Tailwind v4 Theme Integration */
 @theme inline {
-  /* Background Colors */
-  --color-background-default: var(--background-default);
-  --color-background-on-top: var(--background-on-top);
-  --color-background-light: var(--background-light);
-  --color-background-medium: var(--background-medium);
-  --color-background-high: var(--background-high);
-  --color-background-inverted-elevated: var(--background-inverted-elevated);
-  --color-background-attention: var(--background-attention);
-  --color-background-brand: var(--background-brand);
 
+  /* Background Colors - Neutral */
+    --color-background-neutral-default: var(--background-neutral-default);
+    --color-background-neutral-on-top: var(--background-neutral-on-top);
+    --color-background-neutral-light: var(--background-neutral-light);
+    --color-background-neutral-medium: var(--background-neutral-medium);
+    --color-background-neutral-high: var(--background-neutral-high);
+    --color-background-neutral-pressed: var(--background-neutral-pressed);
+    --color-background-neutral-hover: var(--background-neutral-hover);
+    --color-background-neutral-focused: var(--background-neutral-focused);
   /* Surface Colors - Neutral */
   --color-surface-neutral-default: var(--surface-neutral-default);
   --color-surface-neutral-hover: var(--surface-neutral-hover);