@ztwoint/z-ui 0.1.30 → 0.1.31

package/dist/components/table/table.js

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

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

@@ -18,6 +18,11 @@ export type TableFilter = {
     value: FilterRule[];
     onChange: (filters: FilterRule[]) => void;
 };
+export type TableSearch = {
+    value: string;
+    onChange: (searchValue: string) => void;
+    placeholder?: string;
+};
 export type TablePaginationConfig = {
     currentPage: number;
     totalPage: number;

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

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

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TableCardProps } from './table-card.type';
+declare const TableCard: React.FC<TableCardProps>;
+export default TableCard;

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

@@ -0,0 +1,36 @@
+import { TableProps, TableSchema, TableFilter as TableFilterType, TableSearch as TableSearchType } 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'> {
+    dataSource: Record<string, unknown>[];
+    schema: TableSchema;
+    className?: string;
+    showHeader?: boolean;
+    headerClassName?: string;
+    search?: TableCardSearch;
+    filter?: TableCardFilter;
+    body?: TableCardBodyProps;
+    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>;
+    };
+}

package/dist/css/config/colors/defaults.css

@@ -123,6 +123,13 @@
   --alpha-two-700: rgba(255, 255, 255, 0.7);
   --alpha-two-800: rgba(255, 255, 255, 0.8);
   --alpha-two-900: rgba(255, 255, 255, 0.9);
+
+  --shadow-custom:
+    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+  --shadow-default:
+    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+
+  --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
 }
 
 .dark {
@@ -248,6 +255,13 @@
   --alpha-two-700: rgba(0, 0, 0, 0.7);
   --alpha-two-800: rgba(0, 0, 0, 0.8);
   --alpha-two-900: rgba(0, 0, 0, 0.9);
+
+  --shadow-custom:
+    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+  --shadow-default:
+    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+
+  --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
 }
 
 /* Tailwind v4 Theme Integration */
@@ -375,10 +389,5 @@
   --color-alpha-two-800: var(--alpha-two-800);
   --color-alpha-two-900: var(--alpha-two-900);
 
-  --shadow-custom:
-    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
-  --shadow-default:
-    0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
-  --shadow-button-disabled:
-    0px 1px 2px 0px var(--color-neutral-950), 0px 0px 0px 0.5px var(--color-alpha-two-50);
+  --shadow-button-disabled: var(--shadow-button-disabled);
 }

package/dist/css/config/components/index.css

@@ -1 +1,2 @@
 @import './button.css';
+@import './input.css';

package/dist/css/config/components/input.css

@@ -0,0 +1,56 @@
+/* Input Component Colors - Design System Foundation */
+
+:root {
+  /* Input - Surface */
+  --input-surface-default: var(--neutral-0);
+  --input-surface-hover: var(--neutral-50);
+  --input-surface-pressed: var(--neutral-100);
+  --input-surface-active: var(--neutral-00);
+  --input-surface-filled: var(--neutral-25);
+  --input-surface-disabled: var(--neutral-50);
+
+  /* Input - Stroke */
+  --input-stroke-default: var(--neutral-150);
+  --input-stroke-hover: var(--neutral-200);
+  --input-stroke-pressed: transparent;
+  --input-stroke-active: var(--neutral-950);
+  --input-stroke-filled: var(--neutral-150);
+  --input-stroke-disabled: var(--neutral-100);
+}
+
+.dark {
+  /* Input - Surface - Dark Mode */
+  --input-surface-default: var(--neutral-50);
+  --input-surface-hover: var(--neutral-100);
+  --input-surface-pressed: var(--neutral-150);
+  --input-surface-active: var(--neutral-50);
+  --input-surface-filled: rgba(0, 0, 0, 0.2);
+  --input-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  /* Input - Stroke - Dark Mode */
+  --input-stroke-default: var(--neutral-100);
+  --input-stroke-hover: var(--neutral-200);
+  --input-stroke-pressed: transparent;
+  --input-stroke-active: var(--neutral-950);
+  --input-stroke-filled: var(--neutral-50);
+  --input-stroke-disabled: var(--neutral-50);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+  /* Input - Surface */
+  --color-input-surface-default: var(--input-surface-default);
+  --color-input-surface-hover: var(--input-surface-hover);
+  --color-input-surface-pressed: var(--input-surface-pressed);
+  --color-input-surface-active: var(--input-surface-active);
+  --color-input-surface-filled: var(--input-surface-filled);
+  --color-input-surface-disabled: var(--input-surface-disabled);
+
+  /* Input - Stroke */
+  --color-input-stroke-default: var(--input-stroke-default);
+  --color-input-stroke-hover: var(--input-stroke-hover);
+  --color-input-stroke-pressed: var(--input-stroke-pressed);
+  --color-input-stroke-active: var(--input-stroke-active);
+  --color-input-stroke-filled: var(--input-stroke-filled);
+  --color-input-stroke-disabled: var(--input-stroke-disabled);
+}