@ztwoint/z-ui 0.1.51 → 0.1.53

package/dist/components/table/components/cell/avatar-cell.js

@@ -32,7 +32,8 @@ import { Avatar as p } from "../../../avatar/avatar.js";
 import "../../table.context.js";
 import "../../../tooltip/tooltip.js";
 import "../../../badge/badge.js";
-const V = ({
+import "../../../text-preset/text-preset.js";
+const W = ({
   avatar: m,
   value: a,
   rightIcon: e,
@@ -70,5 +71,5 @@ const V = ({
   }
 );
 export {
-  V as AvatarCell
+  W as AvatarCell
 };

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

@@ -9,7 +9,7 @@ const A = ({
   sort: a,
   cell: s,
   stickyHeader: l = !1
-}) => /* @__PURE__ */ r("thead", { className: i(t.header, l && "sticky top-0 z-1"), children: /* @__PURE__ */ r("tr", { children: o.map((e) => {
+}) => /* @__PURE__ */ r("thead", { className: i(t.header, l && "sticky top-0"), children: /* @__PURE__ */ r("tr", { children: o.map((e) => {
   const d = p(e.key, a), c = C(e.key, a);
   return /* @__PURE__ */ r(
     "th",

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

@@ -1,5 +1,5 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as p from "react";
+import { jsx as p } from "react/jsx-runtime";
+import * as e from "react";
 import { TableContext as a } from "./table.context.js";
 import { TableBody as n } from "./table.js";
 import { TableFilter as f } from "./components/table-filter/table-filter-provider.js";
@@ -38,6 +38,7 @@ import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
+import "../text-preset/text-preset.js";
 import { TableHeaderWrapper as c } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as d } from "./components/table-header-content.js";
 import { TableFooter as u } from "./components/table-footer.js";
@@ -50,13 +51,13 @@ const t = ({
   filterComponents: x,
   ...r
 }) => {
-  const m = p.useMemo(
+  const m = e.useMemo(
     () => ({
       ...r
     }),
     [r]
   );
-  return /* @__PURE__ */ e(a.Provider, { value: m, children: i });
+  return /* @__PURE__ */ p(a.Provider, { value: m, children: i });
 }, P = t, o = P;
 o.Body = n;
 o.Filter = f;

package/dist/components/table/table.js

@@ -1,46 +1,51 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import * as T from "react";
-import { DEFAULT_EMPTY_MESSAGE as g, TABLE_CSS_CLASSES as m } from "./table.const.js";
-import { TableHeader as E } from "./components/table-header/table-header.js";
-import { TableRow as y } from "./components/table-row.js";
-import { TableEmptyState as x } from "./components/table-empty-state.js";
-import { TableLoadingState as B } from "./components/table-loading-state.js";
-import { TableContext as C } from "./table.context.js";
-import { cn as s } from "../../lib/utils.js";
-const R = ({ cell: o = { hasBorder: !0 }, sort: n, className: f, stickyHeader: d = !1, ...i }) => {
-  const c = T.useContext(C), {
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as y from "react";
+import { DEFAULT_EMPTY_MESSAGE as S, TABLE_CSS_CLASSES as n } from "./table.const.js";
+import { TableHeader as g } from "./components/table-header/table-header.js";
+import { TableRow as T } from "./components/table-row.js";
+import { TableEmptyState as w } from "./components/table-empty-state.js";
+import { TableContext as E } from "./table.context.js";
+import { cn as m } from "../../lib/utils.js";
+const j = ({ cell: a = { hasBorder: !0 }, sort: d, className: i, stickyHeader: c = !1, ...f }) => {
+  const p = y.useContext(E), {
     dataSource: t = [],
-    schema: r = [],
-    loading: a = !1,
-    emptyMessage: p = g,
-    customCells: u
-  } = c || i, S = () => a ? /* @__PURE__ */ e(B, { colSpan: r.length }) : !t || t.length === 0 ? /* @__PURE__ */ e(x, { colSpan: r.length, message: p }) : /* @__PURE__ */ e("tbody", { children: t.map((b, l) => /* @__PURE__ */ e(
-    y,
+    schema: o = [],
+    loading: r = !1,
+    emptyMessage: u = S,
+    customCells: h
+  } = p || f, b = () => !t || t.length === 0 && !r ? /* @__PURE__ */ e(w, { colSpan: o.length, message: u }) : /* @__PURE__ */ e("tbody", { children: t.map((x, s) => /* @__PURE__ */ e(
+    T,
     {
-      record: b,
-      index: l,
-      schema: r,
-      customCells: u,
-      cell: o
+      record: x,
+      index: s,
+      schema: o,
+      customCells: h,
+      cell: a
     },
-    l
+    s
   )) });
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: s(
-        "overflow-y-auto",
-        m.bordered[o.hasBorder && !a && t.length > 0 ? "true" : "false"],
-        f
+      className: m(
+        r ? "overflow-y-hidden" : "overflow-y-auto",
+        n.bordered[a.hasBorder && !r && t.length > 0 ? "true" : "false"],
+        i
       ),
-      children: /* @__PURE__ */ h("table", { className: s(m.table, "w-full"), children: [
-        /* @__PURE__ */ e(E, { schema: r, sort: n, cell: o, stickyHeader: d }),
-        S()
-      ] })
+      children: [
+        /* @__PURE__ */ l("table", { className: m(n.table, "w-full"), children: [
+          b(),
+          /* @__PURE__ */ e(g, { schema: o, sort: d, cell: a, stickyHeader: c })
+        ] }),
+        r && /* @__PURE__ */ e("div", { className: "sticky top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
+          /* @__PURE__ */ e("p", { className: "text-text-neutral-primary font-medium", children: "Loading..." })
+        ] }) })
+      ]
     }
   );
 };
 export {
-  R as TableBody,
-  R as default
+  j as TableBody,
+  j as default
 };

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

@@ -31,10 +31,11 @@ import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
+import "../text-preset/text-preset.js";
 import "../table/table.context.js";
-const dt = ({
+const nt = ({
   dataSource: v,
-  schema: i,
+  schema: u,
   loading: H,
   emptyMessage: w,
   className: T,
@@ -45,7 +46,7 @@ const dt = ({
   search: m,
   filter: e,
   headerLeftContent: P,
-  headerActions: u,
+  headerActions: i,
   body: r = {
     cell: { hasBorder: !0 },
     className: "",
@@ -58,8 +59,8 @@ const dt = ({
   paginationQuickJumper: s
 }) => {
   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: [
+  const p = s && s.totalPage && s.totalPage >= 2, F = l && l.totalPage && l.totalPage >= 2 || !!a || p, g = m || e || P || i, 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: u, loading: H, emptyMessage: w, children: [
     C && g && /* @__PURE__ */ c(
       t.Header,
       {
@@ -87,7 +88,7 @@ const dt = ({
             e && /* @__PURE__ */ c(
               t.Filter,
               {
-                schema: i,
+                schema: u,
                 filter: {
                   value: e.value || [],
                   onChange: e.onChange || (() => {
@@ -100,7 +101,7 @@ const dt = ({
               }
             )
           ] }),
-          u && /* @__PURE__ */ o(t.HeaderContent, { children: u })
+          i && /* @__PURE__ */ o(t.HeaderContent, { children: i })
         ]
       }
     ),
@@ -113,7 +114,7 @@ const dt = ({
           "flex-1 min-h-0",
           h && "border-stroke-solid-light border-1",
           d && !(C && g) && "rounded-t-xl",
-          d && !(x && p) && "rounded-b-xl",
+          d && !(x && F) && "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
@@ -121,7 +122,7 @@ const dt = ({
         stickyHeader: r == null ? void 0 : r.stickyHeader
       }
     ),
-    x && p && /* @__PURE__ */ c(
+    x && F && /* @__PURE__ */ c(
       t.Footer,
       {
         className: n(
@@ -141,7 +142,7 @@ const dt = ({
             }
           ) }) : s || l ? /* @__PURE__ */ o(t.FooterContent, { children: null }) : null,
           (s || l) && /* @__PURE__ */ c(t.FooterContent, { children: [
-            F && /* @__PURE__ */ o(
+            p && /* @__PURE__ */ o(
               t.PaginationQuickJumper,
               {
                 currentPage: s.currentPage,
@@ -168,5 +169,5 @@ const dt = ({
   ] }) });
 };
 export {
-  dt as default
+  nt as default
 };

package/dist/components/text-preset/text-preset.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+declare const textPresetVariants: (props?: ({
+    type?: "L" | "C" | "R" | null | undefined;
+    multiline?: boolean | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface Z2TextPresetProps extends VariantProps<typeof textPresetVariants> {
+    primaryFirst?: boolean;
+    primaryText: string;
+    supportText?: string;
+    className?: string;
+}
+export default function Z2TextPreset({ type, multiline, primaryFirst, primaryText, supportText, className, }: Z2TextPresetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text-preset/text-preset.js

@@ -0,0 +1,21 @@
+import "react/jsx-runtime";
+import { cva as t } from "class-variance-authority";
+import "clsx";
+import "tailwind-merge";
+t("flex flex-col", {
+  variants: {
+    type: {
+      L: "text-left",
+      C: "text-center",
+      R: "text-right"
+    },
+    multiline: {
+      true: "gap-3",
+      false: "gap-2.5 *:data-[slot=support-text]:truncate"
+    }
+  },
+  defaultVariants: {
+    type: "L",
+    multiline: !1
+  }
+});

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

@@ -1,44 +1,44 @@
 :root {
-    --alert-surface-neutral: var(--color-neutral-50);
-    --alert-surface-accent: var(--color-blue-50);
-    --alert-surface-success: var(--color-green-50);
-    --alert-surface-warning: var(--color-amber-50);
-    --alert-surface-danger: var(--color-red-50);
+  --alert-surface-neutral: var(--color-neutral-50);
+  --alert-surface-accent: var(--color-blue-50);
+  --alert-surface-success: var(--color-green-50);
+  --alert-surface-warning: var(--color-amber-50);
+  --alert-surface-danger: var(--color-red-50);
 
-    --alert-stroke-neutral: var(--color-neutral-100);
-    --alert-stroke-accent: var(--color-blue-100);
-    --alert-stroke-success: var(--color-green-100);
-    --alert-stroke-warning: var(--color-amber-100);
-    --alert-stroke-danger: var(--color-red-100);
+  --alert-stroke-neutral: var(--color-neutral-100);
+  --alert-stroke-accent: var(--color-blue-100);
+  --alert-stroke-success: var(--color-green-100);
+  --alert-stroke-warning: var(--color-amber-100);
+  --alert-stroke-danger: var(--color-red-100);
 }
 
 .dark {
-    --alert-surface-neutral: var(--color-neutral-50);
-    --alert-surface-accent: var(--color-blue-50);
-    --alert-surface-success: var(--color-green-50);
-    --alert-surface-warning: var(--color-amber-50);
-    --alert-surface-danger: var(--color-red-50);
+  --alert-surface-neutral: var(--color-neutral-50);
+  --alert-surface-accent: var(--color-blue-50);
+  --alert-surface-success: var(--color-green-50);
+  --alert-surface-warning: var(--color-amber-50);
+  --alert-surface-danger: var(--color-red-50);
 
-    --alert-stroke-neutral: var(--color-neutral-100);
-    --alert-stroke-accent: var(--color-blue-100);
-    --alert-stroke-success: var(--color-green-100);
-    --alert-stroke-warning: var(--color-amber-100);
-    --alert-stroke-danger: var(--color-red-100);
+  --alert-stroke-neutral: var(--color-neutral-100);
+  --alert-stroke-accent: var(--color-blue-100);
+  --alert-stroke-success: var(--color-green-100);
+  --alert-stroke-warning: var(--color-amber-100);
+  --alert-stroke-danger: var(--color-red-100);
 }
 
 /* Tailwind v4 Theme Integration */
 @theme inline {
-    /* Alert - Surface */
-    --color-alert-surface-neutral: var(--alert-surface-neutral);
-    --color-alert-surface-accent: var(--alert-surface-accent);
-    --color-alert-surface-success: var(--alert-surface-success);
-    --color-alert-surface-warning: var(--alert-surface-warning);
-    --color-alert-surface-danger: var(--alert-surface-danger);
+  /* Alert - Surface */
+  --color-alert-surface-neutral: var(--alert-surface-neutral);
+  --color-alert-surface-accent: var(--alert-surface-accent);
+  --color-alert-surface-success: var(--alert-surface-success);
+  --color-alert-surface-warning: var(--alert-surface-warning);
+  --color-alert-surface-danger: var(--alert-surface-danger);
 
-    /* Alert - Stroke */
-    --color-alert-stroke-neutral: var(--alert-stroke-neutral);
-    --color-alert-stroke-accent: var(--alert-stroke-accent);
-    --color-alert-stroke-success: var(--alert-stroke-success);
-    --color-alert-stroke-warning: var(--alert-stroke-warning);
-    --color-alert-stroke-danger: var(--alert-stroke-danger);
-}
+  /* Alert - Stroke */
+  --color-alert-stroke-neutral: var(--alert-stroke-neutral);
+  --color-alert-stroke-accent: var(--alert-stroke-accent);
+  --color-alert-stroke-success: var(--alert-stroke-success);
+  --color-alert-stroke-warning: var(--alert-stroke-warning);
+  --color-alert-stroke-danger: var(--alert-stroke-danger);
+}

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

@@ -27,7 +27,7 @@
   --background-neutral-hover: var(--neutral-50);
   --background-neutral-focused: var(--neutral-25);
 
-  --background-inverted-elevated: #1414141A;
+  --background-inverted-elevated: #1414141a;
 
   /* Overlay - Dark Mode */
   --overlay-default: var(--neutral-50);