@ztwoint/z-ui 0.1.46 → 0.1.49

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

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

@@ -1,137 +1,164 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { Table as e } from "../table/table-provider.js";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { Table as t } from "../table/table-provider.js";
 import "react";
-import { cn as P } from "../../lib/utils.js";
-import "../table/table.context.js";
+import { cn as n } from "../../lib/utils.js";
+/* 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";
-const M = ({
-  dataSource: w,
-  schema: C,
-  loading: T,
-  emptyMessage: _,
-  className: k,
-  rounded: n = !0,
-  bordered: d = !0,
-  showHeader: x = !0,
-  headerClassName: R,
-  search: a,
-  filter: t,
-  headerLeftContent: m,
+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 "../table/table.context.js";
+const dt = ({
+  dataSource: v,
+  schema: i,
+  loading: H,
+  emptyMessage: w,
+  className: T,
+  rounded: d = !0,
+  bordered: h = !0,
+  showHeader: C = !0,
+  headerClassName: _,
+  search: m,
+  filter: e,
+  headerLeftContent: P,
   headerActions: u,
-  body: l = {
-    cell: { cellHeight: "small", hasBorder: !0 },
+  body: r = {
+    cell: { hasBorder: !0 },
     className: "",
     stickyHeader: !0
   },
-  showFooter: F = !0,
-  footerClassName: j,
-  pagination: s,
-  paginationInfo: c,
-  paginationQuickJumper: o
+  showFooter: x = !0,
+  footerClassName: k,
+  pagination: l,
+  paginationInfo: a,
+  paginationQuickJumper: s
 }) => {
-  var N;
-  const g = o && o.totalPage && o.totalPage >= 2, B = s && s.totalPage && s.totalPage >= 2 || !!c || g, H = a || t || m || u, q = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
-  return /* @__PURE__ */ r("div", { className: P("flex flex-col overflow-hidden", k), children: /* @__PURE__ */ h(e, { dataSource: w, schema: C, loading: T, emptyMessage: _, children: [
-    x && H && /* @__PURE__ */ h(
-      e.Header,
+  var B;
+  const F = s && s.totalPage && s.totalPage >= 2, p = l && l.totalPage && l.totalPage >= 2 || !!a || F, g = m || e || P || u, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
+  return /* @__PURE__ */ o("div", { className: n("flex flex-col overflow-hidden", T), children: /* @__PURE__ */ c(t, { dataSource: v, schema: i, loading: H, emptyMessage: w, children: [
+    C && g && /* @__PURE__ */ c(
+      t.Header,
       {
-        className: P(
+        className: n(
           "flex-shrink-0",
-          d && "border-stroke-solid-medium border-1 border-b-0",
-          n && "rounded-t-xl",
-          R
+          h && "border-stroke-solid-medium border-1 border-b-0",
+          d && "rounded-t-xl",
+          _
         ),
         children: [
-          /* @__PURE__ */ h(e.HeaderContent, { children: [
-            m && m,
-            a && /* @__PURE__ */ r(
-              e.Search,
+          /* @__PURE__ */ c(t.HeaderContent, { children: [
+            P && P,
+            m && /* @__PURE__ */ o(
+              t.Search,
               {
                 search: {
-                  value: a.value || "",
-                  onChange: a.onChange || (() => {
+                  value: m.value || "",
+                  onChange: m.onChange || (() => {
                   }),
-                  placeholder: a.placeholder
+                  placeholder: m.placeholder
                 },
-                className: a.className
+                className: m.className
               }
             ),
-            t && /* @__PURE__ */ h(
-              e.Filter,
+            e && /* @__PURE__ */ c(
+              t.Filter,
               {
-                schema: C,
+                schema: i,
                 filter: {
-                  value: t.value || [],
-                  onChange: t.onChange || (() => {
+                  value: e.value || [],
+                  onChange: e.onChange || (() => {
                   })
                 },
                 children: [
-                  q && /* @__PURE__ */ r(e.Filter.FilterButton, {}),
-                  (N = t == null ? void 0 : t.quickFilters) == null ? void 0 : N.map((v) => /* @__PURE__ */ r(e.Filter.FilterColumnButton, { filterName: v }, v))
+                  R && /* @__PURE__ */ o(t.Filter.FilterButton, {}),
+                  (B = e == null ? void 0 : e.quickFilters) == null ? void 0 : B.map((N) => /* @__PURE__ */ o(t.Filter.FilterColumnButton, { filterName: N }, N))
                 ]
               }
             )
           ] }),
-          u && /* @__PURE__ */ r(e.HeaderContent, { children: u })
+          u && /* @__PURE__ */ o(t.HeaderContent, { children: u })
         ]
       }
     ),
-    /* @__PURE__ */ r(
-      e.Body,
+    /* @__PURE__ */ o(
+      t.Body,
       {
-        cell: l == null ? void 0 : l.cell,
-        sort: l == null ? void 0 : l.sort,
-        className: P(
+        cell: r == null ? void 0 : r.cell,
+        sort: r == null ? void 0 : r.sort,
+        className: n(
           "flex-1 min-h-0",
-          d && "border-stroke-solid-light border-b-1 border-x-1 border-t-0",
-          n && !(x && H) && "rounded-t-xl",
-          n && !(F && B) && "rounded-b-xl",
-          d && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
-          d && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
-          l == null ? void 0 : l.className
+          h && "border-stroke-solid-light border-1",
+          d && !(C && g) && "rounded-t-xl",
+          d && !(x && p) && "rounded-b-xl",
+          h && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
+          h && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
+          r == null ? void 0 : r.className
         ),
-        stickyHeader: l == null ? void 0 : l.stickyHeader
+        stickyHeader: r == null ? void 0 : r.stickyHeader
       }
     ),
-    F && B && /* @__PURE__ */ h(
-      e.Footer,
+    x && p && /* @__PURE__ */ c(
+      t.Footer,
       {
-        className: P(
-          "flex-shrink-0",
-          d && "border-stroke-solid-light border border-t-[0.5px]",
-          n && "rounded-b-xl",
-          j
+        className: n(
+          "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
+          h && "border",
+          d && "rounded-b-xl",
+          k
         ),
         children: [
-          c ? /* @__PURE__ */ r(e.FooterContent, { children: /* @__PURE__ */ r(
-            e.PaginationInfo,
+          a ? /* @__PURE__ */ o(t.FooterContent, { children: /* @__PURE__ */ o(
+            t.PaginationInfo,
             {
-              showTotal: c.showTotal,
-              totalItems: c.totalItems,
-              currentPage: c.currentPage,
-              itemsPerPage: c.itemsPerPage
+              showTotal: a.showTotal,
+              totalItems: a.totalItems,
+              currentPage: a.currentPage,
+              itemsPerPage: a.itemsPerPage
             }
-          ) }) : o || s ? /* @__PURE__ */ r(e.FooterContent, { children: null }) : null,
-          (o || s) && /* @__PURE__ */ h(e.FooterContent, { children: [
-            g && /* @__PURE__ */ r(
-              e.PaginationQuickJumper,
+          ) }) : s || l ? /* @__PURE__ */ o(t.FooterContent, { children: null }) : null,
+          (s || l) && /* @__PURE__ */ c(t.FooterContent, { children: [
+            F && /* @__PURE__ */ o(
+              t.PaginationQuickJumper,
               {
-                currentPage: o.currentPage,
-                totalPage: o.totalPage,
-                onChange: o.onChange || (() => {
+                currentPage: s.currentPage,
+                totalPage: s.totalPage,
+                onChange: s.onChange || (() => {
                 }),
-                disabled: o.disabled
+                disabled: s.disabled
               }
             ),
-            s && /* @__PURE__ */ r(
-              e.Pagination,
+            l && /* @__PURE__ */ o(
+              t.Pagination,
               {
-                currentPage: s.currentPage,
-                totalPage: s.totalPage,
-                onChange: s.onChange || (() => {
+                currentPage: l.currentPage,
+                totalPage: l.totalPage,
+                onChange: l.onChange || (() => {
                 }),
-                totalItems: s.totalItems
+                totalItems: l.totalItems
               }
             )
           ] })
@@ -141,5 +168,5 @@ const M = ({
   ] }) });
 };
 export {
-  M as default
+  dt as default
 };

package/dist/components/tooltip/tooltip.js

@@ -1,32 +1,34 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-tooltip";
-import { cn as s } from "../../lib/utils.js";
-const c = ({
-  message: e,
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-tooltip";
+import { cn as n } from "../../lib/utils.js";
+const p = ({
+  message: d,
   children: i,
-  delayDuration: n = 300,
-  side: a = "top",
-  className: l,
-  ...d
-}) => /* @__PURE__ */ o(r.Provider, { delayDuration: n, children: /* @__PURE__ */ t(r.Root, { children: [
-  /* @__PURE__ */ o(r.Trigger, { asChild: !0, children: i }),
-  /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ t(
-    r.Content,
+  delayDuration: o = 300,
+  side: l = void 0,
+  className: r,
+  ...s
+}) => /* @__PURE__ */ a(e.Provider, { delayDuration: o, children: /* @__PURE__ */ t(e.Root, { children: [
+  /* @__PURE__ */ a(e.Trigger, { asChild: !0, children: i }),
+  /* @__PURE__ */ a(e.Portal, { children: /* @__PURE__ */ t(
+    e.Content,
     {
-      side: a,
-      className: s(
-        "bg-[var(--color-neutral-950)] border-none text-white leading-none-regular-sm z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        l
+      side: l,
+      sideOffset: 4,
+      className: n(
+        "bg-tooltip-surface text-white leading-none-regular-sm rounded-md px-2 py-2",
+        "will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
+        r
       ),
-      ...d,
+      ...s,
       children: [
-        e,
-        /* @__PURE__ */ o(r.Arrow, { className: "bg-[var(--color-neutral-950)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        d,
+        /* @__PURE__ */ a(e.Arrow, { className: "fill-tooltip-surface" })
       ]
     }
   ) })
 ] }) });
-c.displayName = "Z2Tooltip";
+p.displayName = "Z2Tooltip";
 export {
-  c as Z2Tooltip
+  p as Z2Tooltip
 };

package/dist/css/config/colors/backgrounds.css

@@ -1,32 +1,32 @@
 /* neutral */
 @utility bg-neutral-default {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-background-neutral-default);
 }
 
 @utility bg-neutral-on-top {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-background-neutral-on-top);
 }
 
 @utility bg-neutral-light {
-  background-color: var(--color-neutral-25);
+  background-color: var(--color-background-neutral-light);
 }
 
 @utility bg-neutral-high {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-background-neutral-high);
 }
 
 @utility bg-neutral-medium {
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-background-neutral-medium);
 }
 
 @utility bg-neutral-inverted-elevated {
-  background-color: var(--color-alpha-two-100);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility bg-neutral-inverted-attention {
-  background-color: var(--color-alpha-two-200);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 @utility bg-neutral-inverted-brand {
-  background-color: #001534;
+  background-color: var(--color-surface-accent-default);
 }

package/dist/css/config/colors/components/avatar.css

@@ -1,53 +1,53 @@
 /* blue */
 .c-avatar-blue-surface {
-  background-color: var(--color-accent-100);
+  background-color: var(--alert-surface-accent);
 }
 
 .c-avatar-blue-name {
-  color: var(--color-accent-950);
+  color: var(--color-text-brand-primary);
 }
 
 /* red */
 .c-avatar-red-surface {
-  background-color: var(--color-danger-100);
+  background-color: var(--alert-surface-danger);
 }
 
 .c-avatar-red-name {
-  color: var(--color-danger-950);
+  color: var(--color-text-danger-primary);
 }
 
 /* yellow */
 .c-avatar-yellow-surface {
-  background-color: var(--color-warning-100);
+  background-color: var(--alert-surface-warning);
 }
 
 .c-avatar-yellow-name {
-  color: var(--color-warning-950);
+  color: var(--color-text-warning-primary);
 }
 
 /* green */
 .c-avatar-green-surface {
-  background-color: var(--color-success-100);
+  background-color: var(--alert-surface-success);
 }
 
 .c-avatar-green-name {
-  color: var(--color-success-950);
+  color: var(--color-text-success-primary);
 }
 
 /* purple */
 .c-avatar-purple-surface {
-  background-color: var(--color-purple-100);
+  background-color: var(--color-surface-purple-default);
 }
 
 .c-avatar-purple-name {
-  color: var(--color-purple-950);
+  color: var(--color-text-purple-primary);
 }
 
 /* sky */
 .c-avatar-sky-surface {
-  background-color: var(--color-sky-100);
+  background-color: var(--color-surface-accent-default);
 }
 
 .c-avatar-sky-name {
-  color: var(--color-sky-950);
+  color: var(--color-text-brand-primary);
 }