@ztwoint/z-ui 0.1.117 → 0.1.119

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.
@@ -5,7 +5,7 @@ export declare const TABLE_CSS_CLASSES: {
5
5
  readonly true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ";
6
6
  readonly false: "";
7
7
  };
8
- readonly header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed";
8
+ readonly header: "bg-background-neutral-light text-text-neutral-secondary table-fixed";
9
9
  readonly cell: {
10
10
  readonly default: "p-0 align-middle relative h-4 ";
11
11
  readonly hasBorder: {
@@ -14,13 +14,13 @@ export declare const TABLE_CSS_CLASSES: {
14
14
  };
15
15
  };
16
16
  readonly headerCell: {
17
- readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light";
17
+ readonly default: "p-3 text-left text-xs font-medium tracking-wider border-stroke-solid-light";
18
18
  readonly hasBorder: {
19
19
  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";
20
20
  readonly false: "border-stroke-solid-light ";
21
21
  };
22
22
  };
23
- readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";
23
+ readonly sortableHeaderCell: "p-3 text-left text-xs font-medium tracking-wider cursor-pointer transition-colors duration-200";
24
24
  readonly headerCellContent: "flex items-center justify-between";
25
25
  readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
26
26
  readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
@@ -1,10 +1,10 @@
1
- const e = "No data available", t = {
1
+ const t = "No data available", e = {
2
2
  table: "w-full",
3
3
  bordered: {
4
4
  true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ",
5
5
  false: ""
6
6
  },
7
- header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed",
7
+ header: "bg-background-neutral-light text-text-neutral-secondary table-fixed",
8
8
  cell: {
9
9
  default: "p-0 align-middle relative h-4 ",
10
10
  hasBorder: {
@@ -13,13 +13,13 @@ const e = "No data available", t = {
13
13
  }
14
14
  },
15
15
  headerCell: {
16
- default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light",
16
+ default: "p-3 text-left text-xs font-medium tracking-wider border-stroke-solid-light",
17
17
  hasBorder: {
18
18
  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",
19
19
  false: "border-stroke-solid-light "
20
20
  }
21
21
  },
22
- sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200",
22
+ sortableHeaderCell: "p-3 text-left text-xs font-medium tracking-wider cursor-pointer transition-colors duration-200",
23
23
  headerCellContent: "flex items-center justify-between",
24
24
  sortIcon: "ml-2 w-4 h-4 text-gray-400",
25
25
  sortIconActive: "ml-2 w-4 h-4 text-gray-600",
@@ -29,6 +29,6 @@ const e = "No data available", t = {
29
29
  loading: "px-4 py-8 text-center text-gray-500"
30
30
  };
31
31
  export {
32
- e as DEFAULT_EMPTY_MESSAGE,
33
- t as TABLE_CSS_CLASSES
32
+ t as DEFAULT_EMPTY_MESSAGE,
33
+ e as TABLE_CSS_CLASSES
34
34
  };
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import { default as React, FC } from 'react';
2
2
  import { NumberCellProps } from './components/cell/number-cell';
3
3
  import { BooleanCellProps } from './components/cell/boolean-cell';
4
4
  import { LinkCellProps } from './components/cell/link-cell';
@@ -49,7 +49,7 @@ type CellPropsByType = {
49
49
  };
50
50
  type ColumnBase<T extends CellType> = {
51
51
  key: string;
52
- title: string;
52
+ title: string | React.ReactNode;
53
53
  cellType: T;
54
54
  cellRenderer?: CellRenderer;
55
55
  hideable?: boolean;
@@ -11,8 +11,8 @@ import E from "../assets/icons/circle-check-filled.js";
11
11
  import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
12
12
  import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
13
13
  import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
14
- const re = ({ filterName: l }) => {
15
- const [T, i] = k.useState(!1), [f, s] = k.useState(!1), {
14
+ const re = ({ filterName: n }) => {
15
+ const [T, a] = k.useState(!1), [f, s] = k.useState(!1), {
16
16
  getFilterForColumn: C,
17
17
  hasAppliedFilterForColumn: O,
18
18
  updateColumnFilter: g,
@@ -23,35 +23,35 @@ const re = ({ filterName: l }) => {
23
23
  tempFilters: v,
24
24
  filter: p
25
25
  } = L(), N = (o) => {
26
- !o && f ? A(l, v, p.value) ? i(!0) : s(!1) : s(o);
26
+ !o && f ? A(n, v, p.value) ? a(!0) : s(!1) : s(o);
27
27
  }, $ = () => {
28
- c(), i(!1), s(!1);
28
+ c(), a(!1), s(!1);
29
29
  }, D = () => {
30
- P(), i(!1), s(!1);
30
+ P(), a(!1), s(!1);
31
31
  }, R = () => {
32
- i(!1);
33
- }, b = A(l, v, p.value), t = j.find((o) => o.filterKey === l), n = K(
34
- () => C(l),
35
- [l, C]
32
+ a(!1);
33
+ }, x = A(n, v, p.value), t = j.find((o) => o.filterKey === n), l = K(
34
+ () => C(n),
35
+ [n, C]
36
36
  );
37
37
  if (!t)
38
- return console.warn(`Column "${l}" not found in schema`), null;
38
+ return console.warn(`Column "${n}" not found in schema`), null;
39
39
  const S = {
40
40
  boolean: M,
41
41
  string: _,
42
42
  number: U,
43
43
  checkbox: q
44
- }, x = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(l), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, a]) => ({
44
+ }, b = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(n), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, i]) => ({
45
45
  label: o,
46
46
  value: o,
47
- total: a
48
- })) : void 0, w = n ? G(n, y) : void 0, z = n != null && n.value ? Array.isArray(n.value) ? n.value.length : 1 : 0, B = () => {
49
- const o = g(l, "", "");
47
+ total: i
48
+ })) : void 0, w = l ? G(l, y) : void 0, z = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, B = () => {
49
+ const o = g(n, "", "");
50
50
  c(o), s(!1);
51
51
  }, I = () => {
52
52
  c(), s(!1);
53
53
  };
54
- return x ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
54
+ return b ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
55
55
  /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
56
56
  u,
57
57
  {
@@ -67,7 +67,7 @@ const re = ({ filterName: l }) => {
67
67
  t.title
68
68
  ] }),
69
69
  h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
70
- F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin flex-shrink-0" })
70
+ F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-text-brand-secondary rounded-full animate-spin flex-shrink-0" })
71
71
  ] })
72
72
  }
73
73
  ) }),
@@ -79,19 +79,19 @@ const re = ({ filterName: l }) => {
79
79
  align: "start",
80
80
  children: [
81
81
  F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
82
- /* @__PURE__ */ e("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-stroke-solid-strong rounded-full animate-spin" }),
82
+ /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
83
83
  /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
84
84
  ] }) }) : /* @__PURE__ */ e(
85
- x,
85
+ b,
86
86
  {
87
- value: n,
88
- onChange: ({ condition: o, value: a }) => g(l, o, a),
87
+ value: l,
88
+ onChange: ({ condition: o, value: i }) => g(n, o, i),
89
89
  filterOptions: y
90
90
  }
91
91
  ),
92
- (b || !!z) && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
92
+ (x || !!z) && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
93
93
  /* @__PURE__ */ e(u, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
94
- b && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
94
+ x && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
95
95
  ] })
96
96
  ]
97
97
  }
@@ -13,7 +13,7 @@ export type FilterOption = {
13
13
  export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
14
14
  export type FilterSchemaField = {
15
15
  filterKey: string;
16
- title: string;
16
+ title: string | React.ReactNode;
17
17
  helperText?: string;
18
18
  type: FilterFieldType;
19
19
  options?: Record<string, number>;
@@ -5,7 +5,7 @@ export declare const TABLE_CSS_CLASSES: {
5
5
  readonly true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ";
6
6
  readonly false: "";
7
7
  };
8
- readonly header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed";
8
+ readonly header: "bg-background-neutral-light text-text-neutral-secondary table-fixed";
9
9
  readonly cell: {
10
10
  readonly default: "p-0 align-middle relative h-4 ";
11
11
  readonly hasBorder: {
@@ -14,13 +14,13 @@ export declare const TABLE_CSS_CLASSES: {
14
14
  };
15
15
  };
16
16
  readonly headerCell: {
17
- readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light";
17
+ readonly default: "p-3 text-left text-xs font-medium tracking-wider border-stroke-solid-light";
18
18
  readonly hasBorder: {
19
19
  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";
20
20
  readonly false: "border-stroke-solid-light ";
21
21
  };
22
22
  };
23
- readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";
23
+ readonly sortableHeaderCell: "p-3 text-left text-xs font-medium tracking-wider cursor-pointer transition-colors duration-200";
24
24
  readonly headerCellContent: "flex items-center justify-between";
25
25
  readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
26
26
  readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  export type CellType = 'number' | 'boolean' | 'checkbox' | 'link' | 'avatar' | 'label' | 'description' | 'text';
3
3
  export type CellValue = string | number | boolean | null | undefined;
4
4
  export type CellRendererProps = {
@@ -49,7 +49,7 @@ type CellPropsByType = {
49
49
  };
50
50
  type ColumnBase<T extends CellType> = {
51
51
  key: string;
52
- title: string;
52
+ title: string | React.ReactNode;
53
53
  cellType: T;
54
54
  cellRenderer?: CellRenderer;
55
55
  hideable?: boolean;
@@ -13,7 +13,7 @@ export type FilterOption = {
13
13
  export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
14
14
  export type FilterSchemaField = {
15
15
  filterKey: string;
16
- title: string;
16
+ title: string | React.ReactNode;
17
17
  helperText?: string;
18
18
  type: FilterFieldType;
19
19
  options?: Record<string, number>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ztwoint/z-ui",
3
- "version": "0.1.117",
3
+ "version": "0.1.119",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",