@ztwoint/z-ui 0.1.34 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/table/components/table-footer.js +1 -1
  2. package/dist/components/table/components/table-header/table-header.js +1 -1
  3. package/dist/components/table/table.const.d.ts +1 -1
  4. package/dist/components/table/table.const.js +1 -1
  5. package/dist/components/table-card/index.d.ts +1 -1
  6. package/dist/components/table-card/table-card.js +73 -64
  7. package/dist/components/table-card/table-card.type.d.ts +19 -27
  8. package/dist/css/config/colors/semantic-colors.css +28 -27
  9. package/dist/css/styles/tailwind.css +1 -1
  10. package/dist/types/components/table/table.const.d.ts +1 -1
  11. package/dist/types/components/table-card/index.d.ts +1 -1
  12. package/dist/types/components/table-card/table-card.type.d.ts +19 -27
  13. package/package.json +1 -1
package/dist/components/table/components/table-footer.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
2
2
  const l = ({ children: e, className: r = "" }) => /* @__PURE__ */ t(
3
3
  "div",
4
4
  {
5
- 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} `,
5
+ 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} `,
6
6
  children: e
7
7
  }
8
8
  );
package/dist/components/table/components/table-header/table-header.js CHANGED
@@ -12,7 +12,7 @@ const x = ({
12
12
  }) => /* @__PURE__ */ r(
13
13
  "thead",
14
14
  {
15
- className: `${t.header} ${s ? "sticky top-[-1.5px] z-10" : ""}`,
15
+ className: `${t.header} ${s ? "sticky top-[-1.5px] z-1" : ""}`,
16
16
  children: /* @__PURE__ */ r("tr", { children: a.map((e) => {
17
17
  const l = h(e.key, i), d = p(e.key, i);
18
18
  return /* @__PURE__ */ r(
package/dist/components/table/table.const.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
2
2
  export declare const TABLE_CSS_CLASSES: {
3
3
  readonly table: "w-full";
4
- readonly header: "bg-neutral-25 text-text-neutral-secondary";
4
+ readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
5
5
  readonly cell: {
6
6
  readonly default: "px-4 py-3 text-sm";
7
7
  readonly cellHeight: {
package/dist/components/table/table.const.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const e = "No data available", t = {
2
2
  table: "w-full",
3
- header: "bg-neutral-25 text-text-neutral-secondary",
3
+ header: "bg-background-neutral-medium text-text-neutral-secondary",
4
4
  cell: {
5
5
  default: "px-4 py-3 text-sm",
6
6
  cellHeight: {
package/dist/components/table-card/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default as TableCard } from './table-card';
2
- export type { TableCardProps, TableCardSearch, TableCardFilter, TableCardPaginationInfo, TableCardPaginationQuickJumper, TableCardPagination, TableCardBodyProps, } from './table-card.type';
2
+ export type { TableCardProps } from './table-card.type';
package/dist/components/table-card/table-card.js CHANGED
@@ -1,83 +1,92 @@
1
- import { jsx as a, jsxs as s } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as d } from "react/jsx-runtime";
2
2
  import { Table as e } from "../table/table-provider.js";
3
3
  import "react";
4
- import { cn as c } from "../../lib/utils.js";
4
+ import { cn as o } from "../../lib/utils.js";
5
5
  import "../table/table.context.js";
6
6
  import "../button/button.js";
7
7
  import "../input/input.js";
8
- const J = ({
9
- dataSource: g,
10
- schema: h,
11
- className: C,
12
- showHeader: b = !0,
13
- headerClassName: x,
14
- search: m,
15
- filter: f,
16
- body: k = {
8
+ const S = ({
9
+ dataSource: f,
10
+ schema: m,
11
+ loading: u,
12
+ emptyMessage: N,
13
+ className: H,
14
+ showHeader: P = !0,
15
+ headerClassName: v,
16
+ search: s,
17
+ filter: h,
18
+ headerActions: n,
19
+ body: r = {
17
20
  cell: { cellHeight: "small", hasBorder: !0 },
18
21
  className: "",
19
22
  stickyHeader: !0
20
23
  },
21
- showFooter: N = !0,
22
- footerClassName: v,
23
- paginationInfo: u,
24
- paginationQuickJumper: P,
25
- pagination: p,
26
- overrides: n = {},
27
- ...y
24
+ showFooter: C = !0,
25
+ footerClassName: _,
26
+ pagination: a,
27
+ paginationInfo: c,
28
+ paginationQuickJumper: t
28
29
  }) => {
29
- const r = m ? { ...m, ...n.search } : void 0, d = f ? { ...f, ...n.filter } : void 0, i = { ...k, ...n.body }, o = u ? { ...u, ...n.paginationInfo } : void 0, t = P ? { ...P, ...n.paginationQuickJumper } : void 0, l = p ? { ...p, ...n.pagination } : void 0;
30
- return /* @__PURE__ */ a("div", { className: c("flex flex-col overflow-hidden", C), children: /* @__PURE__ */ s(e, { dataSource: g, schema: h, ...y, children: [
31
- b && /* @__PURE__ */ a(e.Header, { className: c("flex-shrink-0", x), children: /* @__PURE__ */ s(e.HeaderContent, { children: [
32
- r && /* @__PURE__ */ a(
33
- e.Search,
34
- {
35
- search: {
36
- value: r.value || "",
37
- onChange: r.onChange || (() => {
38
- }),
39
- placeholder: r.placeholder
40
- },
41
- className: r.className
42
- }
43
- ),
44
- d && /* @__PURE__ */ a(
45
- e.Filter,
46
- {
47
- schema: h,
48
- filter: {
49
- value: d.value || [],
50
- onChange: d.onChange || (() => {
51
- })
30
+ const x = a || c || t, g = s || h || n;
31
+ 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: [
32
+ P && g && /* @__PURE__ */ d(e.Header, { className: o("flex-shrink-0", v), children: [
33
+ /* @__PURE__ */ d(e.HeaderContent, { children: [
34
+ s && /* @__PURE__ */ l(
35
+ e.Search,
36
+ {
37
+ search: {
38
+ value: s.value || "",
39
+ onChange: s.onChange || (() => {
40
+ }),
41
+ placeholder: s.placeholder
42
+ },
43
+ className: s.className
52
44
  }
53
- }
54
- )
55
- ] }) }),
56
- /* @__PURE__ */ a(
45
+ ),
46
+ h && /* @__PURE__ */ l(
47
+ e.Filter,
48
+ {
49
+ schema: m,
50
+ filter: {
51
+ value: h.value || [],
52
+ onChange: h.onChange || (() => {
53
+ })
54
+ }
55
+ }
56
+ )
57
+ ] }),
58
+ n && /* @__PURE__ */ l(e.HeaderContent, { children: n })
59
+ ] }),
60
+ /* @__PURE__ */ l(
57
61
  e.Body,
58
62
  {
59
- cell: i.cell,
60
- sort: i.sort,
61
- className: c(
63
+ cell: r == null ? void 0 : r.cell,
64
+ sort: r == null ? void 0 : r.sort,
65
+ className: o(
62
66
  "flex-1 min-h-0",
63
- g.length < 1 && "border-stroke-solid-light border-b-1 border-x-1 border-t-0 rounded-b-xl",
64
- i.className
67
+ "border-stroke-solid-light border-b-1 border-x-1 border-t-0",
68
+ !(P && g) && "rounded-t-xl",
69
+ !(C && x) && "rounded-b-xl",
70
+ "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
71
+ "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
72
+ "[&_tr:last-child_td]:border-b-0",
73
+ r == null ? void 0 : r.className
65
74
  ),
66
- stickyHeader: i.stickyHeader
75
+ stickyHeader: r == null ? void 0 : r.stickyHeader
67
76
  }
68
77
  ),
69
- N && (o || t || l) && /* @__PURE__ */ s(e.Footer, { className: c("flex-shrink-0", v), children: [
70
- o && /* @__PURE__ */ a(e.FooterContent, { children: /* @__PURE__ */ a(
78
+ C && x && /* @__PURE__ */ d(e.Footer, { className: o("flex-shrink-0", _), children: [
79
+ c && /* @__PURE__ */ l(e.FooterContent, { children: /* @__PURE__ */ l(
71
80
  e.PaginationInfo,
72
81
  {
73
- showTotal: o.showTotal || !1,
74
- totalItems: o.totalItems || 0,
75
- currentPage: o.currentPage || 1,
76
- itemsPerPage: o.itemsPerPage || 10
82
+ showTotal: c.showTotal || !1,
83
+ totalItems: c.totalItems || 0,
84
+ currentPage: c.currentPage || 1,
85
+ itemsPerPage: c.itemsPerPage || 10
77
86
  }
78
87
  ) }),
79
- (t || l) && /* @__PURE__ */ s(e.FooterContent, { children: [
80
- t && /* @__PURE__ */ a(
88
+ (t || a) && /* @__PURE__ */ d(e.FooterContent, { children: [
89
+ t && /* @__PURE__ */ l(
81
90
  e.PaginationQuickJumper,
82
91
  {
83
92
  currentPage: t.currentPage || 1,
@@ -87,12 +96,12 @@ const J = ({
87
96
  disabled: t.disabled || !1
88
97
  }
89
98
  ),
90
- l && /* @__PURE__ */ a(
99
+ a && /* @__PURE__ */ l(
91
100
  e.Pagination,
92
101
  {
93
- currentPage: l.currentPage || 1,
94
- totalPage: l.totalPage || 1,
95
- onChange: l.onChange || (() => {
102
+ currentPage: a.currentPage || 1,
103
+ totalPage: a.totalPage || 1,
104
+ onChange: a.onChange || (() => {
96
105
  })
97
106
  }
98
107
  )
@@ -101,5 +110,5 @@ const J = ({
101
110
  ] }) });
102
111
  };
103
112
  export {
104
- J as default
113
+ S as default
105
114
  };
package/dist/components/table-card/table-card.type.d.ts CHANGED
@@ -1,36 +1,28 @@
1
- import { TableProps, TableSchema, TableFilter as TableFilterType, TableSearch as TableSearchType } from '../table/table.type';
1
+ import { default as React } from 'react';
2
+ import { TableProps, TableSchema, TableFilter, TableSearch, TableSort } from '../table/table.type';
2
3
  import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../table/components/pagination/pagination.type';
3
- export interface TableCardSearch extends Partial<TableSearchType> {
4
- className?: string;
5
- }
6
- export type TableCardFilter = Partial<TableFilterType>;
7
- export type TableCardPaginationInfo = Partial<PaginationInfoProps>;
8
- export type TableCardPaginationQuickJumper = Partial<PaginationQuickJumperProps>;
9
- export type TableCardPagination = Partial<PaginationProps>;
10
- export type TableCardBodyProps = Pick<TableProps, 'cell' | 'sort'> & {
11
- className?: string;
12
- stickyHeader?: boolean;
13
- };
14
- export interface TableCardProps extends Omit<TableProps, 'filter' | 'pagination' | 'sort'> {
4
+ export interface TableCardProps {
15
5
  dataSource: Record<string, unknown>[];
16
6
  schema: TableSchema;
17
7
  className?: string;
18
8
  showHeader?: boolean;
19
9
  headerClassName?: string;
20
- search?: TableCardSearch;
21
- filter?: TableCardFilter;
22
- body?: TableCardBodyProps;
10
+ search?: Partial<TableSearch> & {
11
+ className?: string;
12
+ };
13
+ filter?: Partial<TableFilter>;
14
+ headerActions?: React.ReactNode;
15
+ body?: {
16
+ cell?: TableProps['cell'];
17
+ sort?: TableSort;
18
+ className?: string;
19
+ stickyHeader?: boolean;
20
+ };
23
21
  showFooter?: boolean;
24
22
  footerClassName?: string;
25
- paginationInfo?: TableCardPaginationInfo;
26
- paginationQuickJumper?: TableCardPaginationQuickJumper;
27
- pagination?: TableCardPagination;
28
- overrides?: {
29
- search?: Partial<TableCardSearch>;
30
- filter?: Partial<TableCardFilter>;
31
- body?: Partial<TableCardBodyProps>;
32
- paginationInfo?: Partial<TableCardPaginationInfo>;
33
- paginationQuickJumper?: Partial<TableCardPaginationQuickJumper>;
34
- pagination?: Partial<TableCardPagination>;
35
- };
23
+ pagination?: Partial<PaginationProps>;
24
+ paginationInfo?: Partial<PaginationInfoProps>;
25
+ paginationQuickJumper?: Partial<PaginationQuickJumperProps>;
26
+ loading?: boolean;
27
+ emptyMessage?: string;
36
28
  }
package/dist/css/config/colors/semantic-colors.css CHANGED
@@ -1,16 +1,16 @@
1
1
  /* Semantic Colors - Design System Foundation */
2
2
 
3
3
  :root {
4
- /* Background Colors */
5
- --background-default: var(--neutral-0);
6
- --background-on-top: var(--neutral-0);
7
- --background-light: var(--neutral-25);
8
- --background-medium: var(--neutral-50);
9
- --background-high: var(--neutral-100);
10
- --background-inverted-elevated: rgba(255, 255, 255, 0.1);
11
- --background-attention: var(--neutral-200);
12
- --background-brand: #001534;
13
4
 
5
+ /* Background Colors - Neutral */
6
+ --background-neutral-default: var(--neutral-0);
7
+ --background-neutral-on-top: var(--neutral-0);
8
+ --background-neutral-light: var(--neutral-25);
9
+ --background-neutral-medium: var(--neutral-50);
10
+ --background-neutral-high: var(--neutral-100);
11
+ --background-neutral-pressed: var(--neutral-75);
12
+ --background-neutral-hover: var(--neutral-50);
13
+ --background-neutral-focused: var(--neutral-25);
14
14
  /* Surface Colors - Neutral */
15
15
  --surface-neutral-default: var(--neutral-0);
16
16
  --surface-neutral-hover: var(--neutral-75);
@@ -119,16 +119,17 @@
119
119
  }
120
120
 
121
121
  .dark {
122
- /* Background Colors - Dark Mode */
123
- --background-default: var(--neutral-0);
124
- --background-on-top: var(--neutral-50);
125
- --background-light: var(--neutral-25);
126
- --background-medium: var(--neutral-25);
127
- --background-high: var(--neutral-100);
128
- --background-inverted-elevated: rgba(20, 20, 20, 0.1);
129
- --background-attention: var(--neutral-200);
130
- --background-brand: #0f0f0f;
131
122
 
123
+
124
+ /* Background Colors - Neutral - Dark Mode */
125
+ --background-neutral-default: var(--neutral-0);
126
+ --background-neutral-on-top: var(--neutral-50);
127
+ --background-neutral-light: var(--neutral-25);
128
+ --background-neutral-medium: var(--neutral-25);
129
+ --background-neutral-high: var(--neutral-100);
130
+ --background-neutral-pressed: var(--neutral-75);
131
+ --background-neutral-hover: var(--neutral-50);
132
+ --background-neutral-focused: var(--neutral-25);
132
133
  /* Surface Colors - Neutral - Dark Mode */
133
134
  --surface-neutral-default: var(--neutral-0);
134
135
  --surface-neutral-hover: var(--neutral-75);
@@ -238,16 +239,16 @@
238
239
 
239
240
  /* Tailwind v4 Theme Integration */
240
241
  @theme inline {
241
- /* Background Colors */
242
- --color-background-default: var(--background-default);
243
- --color-background-on-top: var(--background-on-top);
244
- --color-background-light: var(--background-light);
245
- --color-background-medium: var(--background-medium);
246
- --color-background-high: var(--background-high);
247
- --color-background-inverted-elevated: var(--background-inverted-elevated);
248
- --color-background-attention: var(--background-attention);
249
- --color-background-brand: var(--background-brand);
250
242
 
243
+ /* Background Colors - Neutral */
244
+ --color-background-neutral-default: var(--background-neutral-default);
245
+ --color-background-neutral-on-top: var(--background-neutral-on-top);
246
+ --color-background-neutral-light: var(--background-neutral-light);
247
+ --color-background-neutral-medium: var(--background-neutral-medium);
248
+ --color-background-neutral-high: var(--background-neutral-high);
249
+ --color-background-neutral-pressed: var(--background-neutral-pressed);
250
+ --color-background-neutral-hover: var(--background-neutral-hover);
251
+ --color-background-neutral-focused: var(--background-neutral-focused);
251
252
  /* Surface Colors - Neutral */
252
253
  --color-surface-neutral-default: var(--surface-neutral-default);
253
254
  --color-surface-neutral-hover: var(--surface-neutral-hover);