@ztwoint/z-ui 0.1.114 → 0.1.116

package/dist/components/chart-card/config/colors.js

@@ -0,0 +1,49 @@
+const d = {
+  default: ["#2563eb", "#7c3aed", "#d97706", "#16a34a", "#dc2626", "#0284c7"],
+  brand: ["#2563eb", "#3b82f6", "#1d4ed8", "#60a5fa"],
+  success: ["#16a34a", "#22c55e", "#15803d", "#4ade80"],
+  warning: ["#d97706", "#f59e0b", "#b45309", "#fbbf24"],
+  danger: ["#dc2626", "#ef4444", "#b91c1c", "#f87171"],
+  purple: ["#7c3aed", "#8b5cf6", "#6d28d9", "#a78bfa"],
+  neutral: ["#5d5d5d", "#6d6d6d", "#4f4f4f", "#888888"]
+}, t = {
+  basic: d.default,
+  smooth: ["#1d4ed8", "#38bdf8", "#22d3ee", "#6366f1"]
+}, b = {
+  basic: d.default,
+  stacked: ["#0284c7", "#38bdf8", "#60a5fa", "#93c5fd"]
+}, E = {
+  basic: d.default,
+  donut: ["#2563eb", "#7c3aed", "#d97706", "#16a34a", "#dc2626", "#0284c7", "#8b5cf6", "#f59e0b"]
+}, n = {
+  line: t,
+  bar: b,
+  pie: E
+}, r = {
+  text: {
+    primary: "#000000",
+    secondary: "#5d5d5d",
+    muted: "#888888"
+  },
+  border: {
+    light: "#e7e7e7",
+    default: "#d1d1d1",
+    medium: "#b0b0b0"
+  },
+  background: {
+    default: "#ffffff",
+    light: "#fafafa",
+    medium: "#f6f6f6"
+  }
+};
+function u(a, f) {
+  var e;
+  const c = ((e = n[a]) == null ? void 0 : e[f]) ?? d.default;
+  return Array.from(c);
+}
+export {
+  n as CHART_THEME_PALETTES,
+  d as COLOR_PALETTES,
+  r as UI_COLORS,
+  u as getThemePalette
+};

package/dist/components/chart-card/config/defaults.d.ts

@@ -0,0 +1,164 @@
+import { ChartOptions } from '../chart-card.config.types';
+export declare const DEFAULT_CHART_HEIGHT = 400;
+export declare const DEFAULT_CHART_WIDTH = "100%";
+export declare const DEFAULT_FONT_FAMILY = "Inter Variable, sans-serif";
+export declare const COMMON_TEXT_STYLE: {
+    fontFamily: string;
+    color: "#000000";
+};
+export declare function buildTitleConfig(title: string, options?: ChartOptions['title']): {
+    text: string;
+    textStyle: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    left: "center" | "left" | "right";
+    top: number;
+    padding: number[];
+} | undefined;
+export declare function buildTooltipConfig(options?: ChartOptions['tooltip']): {
+    trigger: "axis" | "item";
+    backgroundColor: "#ffffff";
+    borderColor: "#d1d1d1";
+    borderWidth: number;
+    textStyle: {
+        fontFamily: string;
+        color: "#000000";
+    };
+} | undefined;
+export declare function buildLegendConfig(data: string[], hasTitle?: boolean, options?: ChartOptions['legend']): {
+    data: string[];
+    top: string | number;
+    bottom: string | number | undefined;
+    left: string | number;
+    right: string | number | undefined;
+    orient: "horizontal" | "vertical";
+    itemGap: number;
+    padding: number[];
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        color: "#000000";
+    };
+    itemWidth: number;
+    itemHeight: number;
+} | undefined;
+export declare function buildAxisLabelConfig(rotate?: number): {
+    rotate?: number | undefined;
+    color: "#5d5d5d";
+    fontFamily: string;
+    fontSize: number;
+};
+export declare function buildAxisLineConfig(show?: boolean): {
+    show: boolean;
+    lineStyle: {
+        color: "#d1d1d1";
+    };
+};
+export declare function buildSplitLineConfig(show?: boolean): {
+    show: boolean;
+    lineStyle: {
+        color: "#e7e7e7";
+    };
+};
+export declare function buildGridConfig(hasTitle: boolean, hasLegend?: boolean, legendPosition?: 'top' | 'bottom' | 'left' | 'right', customGrid?: ChartOptions['grid']): {
+    left: string | number;
+    right: string | number;
+    bottom: string | number;
+    top: string | number;
+    containLabel: boolean;
+};
+export declare function buildXAxisConfig(data: string[], boundaryGap?: boolean, options?: ChartOptions['xAxis']): {
+    show: boolean;
+    type?: undefined;
+    data?: undefined;
+    boundaryGap?: undefined;
+    name?: undefined;
+    nameLocation?: undefined;
+    nameGap?: undefined;
+    nameTextStyle?: undefined;
+    axisLine?: undefined;
+    axisLabel?: undefined;
+    splitLine?: undefined;
+} | {
+    type: "category";
+    data: string[];
+    boundaryGap: boolean;
+    name: string | undefined;
+    nameLocation: "end" | "middle" | "start";
+    nameGap: number | undefined;
+    nameTextStyle: {
+        fontSize: number;
+        fontWeight: number;
+        fontFamily: string;
+        color: "#000000";
+    } | undefined;
+    axisLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#d1d1d1";
+        };
+    };
+    axisLabel: {
+        rotate?: number | undefined;
+        color: "#5d5d5d";
+        fontFamily: string;
+        fontSize: number;
+    };
+    splitLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#e7e7e7";
+        };
+    };
+    show?: undefined;
+};
+export declare function buildYAxisConfig(options?: ChartOptions['yAxis']): {
+    show: boolean;
+    type?: undefined;
+    name?: undefined;
+    nameLocation?: undefined;
+    nameGap?: undefined;
+    nameRotate?: undefined;
+    nameTextStyle?: undefined;
+    min?: undefined;
+    max?: undefined;
+    axisLine?: undefined;
+    axisLabel?: undefined;
+    splitLine?: undefined;
+} | {
+    type: "value";
+    name: string | undefined;
+    nameLocation: "end" | "middle" | "start";
+    nameGap: number | undefined;
+    nameRotate: number;
+    nameTextStyle: {
+        fontSize: number;
+        fontWeight: number;
+        fontFamily: string;
+        color: "#000000";
+    } | undefined;
+    min: number | undefined;
+    max: number | undefined;
+    axisLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#d1d1d1";
+        };
+    };
+    axisLabel: {
+        rotate?: number | undefined;
+        color: "#5d5d5d";
+        fontFamily: string;
+        fontSize: number;
+    };
+    splitLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#e7e7e7";
+        };
+    };
+    show?: undefined;
+};

package/dist/components/chart-card/config/defaults.js

@@ -0,0 +1,156 @@
+import { UI_COLORS as m } from "./colors.js";
+const g = "Inter Variable, sans-serif", c = {
+  fontFamily: g,
+  color: m.text.primary
+};
+function y(e, l) {
+  if ((l == null ? void 0 : l.show) === !1)
+    return;
+  const r = (l == null ? void 0 : l.position) ?? "left", a = (l == null ? void 0 : l.fontSize) ?? 16, f = (l == null ? void 0 : l.color) ?? m.text.primary;
+  return {
+    text: e,
+    textStyle: {
+      fontFamily: g,
+      fontSize: a,
+      fontWeight: 500,
+      color: f
+    },
+    left: r,
+    top: 12,
+    padding: [0, 0, 8, 0]
+  };
+}
+function C(e) {
+  return (e == null ? void 0 : e.show) === !1 ? void 0 : {
+    trigger: (e == null ? void 0 : e.trigger) ?? "axis",
+    backgroundColor: m.background.default,
+    borderColor: m.border.default,
+    borderWidth: 1,
+    textStyle: {
+      ...c
+    }
+  };
+}
+function v(e, l = !1, r) {
+  if ((r == null ? void 0 : r.show) === !1)
+    return;
+  const a = (r == null ? void 0 : r.position) ?? "top", f = (r == null ? void 0 : r.orient) ?? "horizontal";
+  let u = l ? 48 : 16, t, d = "center", b;
+  return a === "bottom" ? (u = "auto", t = 10) : a === "left" ? (u = "middle", d = 10) : a === "right" && (u = "middle", d = "auto", b = 10), {
+    data: e,
+    top: u,
+    bottom: t,
+    left: d,
+    right: b,
+    orient: f,
+    itemGap: 20,
+    padding: [8, 0, 12, 0],
+    textStyle: {
+      ...c,
+      fontSize: 12
+    },
+    itemWidth: 25,
+    itemHeight: 14
+  };
+}
+function x(e) {
+  return {
+    color: m.text.secondary,
+    fontFamily: g,
+    fontSize: 11,
+    ...e && { rotate: e }
+  };
+}
+function S(e = !0) {
+  return {
+    show: e,
+    lineStyle: {
+      color: m.border.default
+    }
+  };
+}
+function h(e = !0) {
+  return {
+    show: e,
+    lineStyle: {
+      color: m.border.light
+    }
+  };
+}
+function T(e, l = !1, r = "top", a) {
+  if (a)
+    return {
+      left: a.left ?? "3%",
+      right: a.right ?? "4%",
+      bottom: a.bottom ?? "3%",
+      top: a.top ?? 20,
+      containLabel: !0
+    };
+  let f = 20;
+  e && (f += 48), l && r === "top" && (f += 40);
+  let u = "3%";
+  l && r === "bottom" && (u = 60);
+  let t = "3%";
+  l && r === "left" && (t = 100);
+  let d = "4%";
+  return l && r === "right" && (d = 100), {
+    left: t,
+    right: d,
+    bottom: u,
+    top: f,
+    containLabel: !0
+  };
+}
+function w(e, l = !0, r) {
+  return (r == null ? void 0 : r.show) === !1 ? { show: !1 } : {
+    type: "category",
+    data: e,
+    boundaryGap: l,
+    name: r == null ? void 0 : r.name,
+    nameLocation: (r == null ? void 0 : r.nameLocation) ?? "middle",
+    nameGap: r != null && r.name ? 30 : void 0,
+    nameTextStyle: r != null && r.name ? {
+      ...c,
+      fontSize: 12,
+      fontWeight: 500
+    } : void 0,
+    axisLine: S(),
+    axisLabel: x(r == null ? void 0 : r.labelRotate),
+    splitLine: h((r == null ? void 0 : r.gridLines) ?? !1)
+  };
+}
+function z(e) {
+  if ((e == null ? void 0 : e.show) === !1)
+    return { show: !1 };
+  const l = (e == null ? void 0 : e.min) === "auto" || e == null ? void 0 : e.min, r = (e == null ? void 0 : e.max) === "auto" || e == null ? void 0 : e.max;
+  return {
+    type: "value",
+    name: e == null ? void 0 : e.name,
+    nameLocation: (e == null ? void 0 : e.nameLocation) ?? "middle",
+    nameGap: e != null && e.name ? 50 : void 0,
+    nameRotate: 90,
+    nameTextStyle: e != null && e.name ? {
+      ...c,
+      fontSize: 12,
+      fontWeight: 500
+    } : void 0,
+    min: l,
+    max: r,
+    axisLine: S(!1),
+    axisLabel: x(),
+    splitLine: h((e == null ? void 0 : e.gridLines) ?? !0)
+  };
+}
+export {
+  c as COMMON_TEXT_STYLE,
+  g as DEFAULT_FONT_FAMILY,
+  x as buildAxisLabelConfig,
+  S as buildAxisLineConfig,
+  T as buildGridConfig,
+  v as buildLegendConfig,
+  h as buildSplitLineConfig,
+  y as buildTitleConfig,
+  C as buildTooltipConfig,
+  w as buildXAxisConfig,
+  z as buildYAxisConfig
+};

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

@@ -0,0 +1,10 @@
+export { ChartCard } from './chart-card';
+export type { ChartCardProps } from './chart-card.types';
+export { LoadingState, EmptyState, ErrorState } from './chart-card-states';
+export type { ChartType, ChartTheme, LineChartTheme, BarChartTheme, ChartConfig, BarChartConfig, LineChartConfig, ChartSeries, ChartData, ChartOptions, SeriesStyleConfig, } from './chart-card.config.types';
+export { UI_COLORS, COLOR_PALETTES, getThemePalette } from './config/colors';
+export { validateChartConfig, validateChartData } from './validators/config-validator';
+export type { ValidationResult } from './validators/config-validator';
+export { buildBarChartOptions } from './builders/bar-chart-builder';
+export { buildLineChartOptions } from './builders/line-chart-builder';
+export { buildChartOptions, isChartTypeSupported, registeredChartTypes, } from './builders/chart-builder-factory';

package/dist/components/chart-card/validators/config-validator.d.ts

@@ -0,0 +1,7 @@
+import { ChartConfig, ChartData } from '../chart-card.config.types';
+export interface ValidationResult {
+    valid: boolean;
+    error?: string;
+}
+export declare function validateChartConfig(config: ChartConfig): ValidationResult;
+export declare function validateChartData(data: ChartData): ValidationResult;

package/dist/components/chart-card/validators/config-validator.js

@@ -0,0 +1,40 @@
+const i = /* @__PURE__ */ new Set([
+  "basic",
+  "smooth"
+]), s = /* @__PURE__ */ new Set([
+  "basic",
+  "stacked"
+]);
+function n(e) {
+  var r;
+  return e != null && e.type ? (r = e.name) != null && r.trim() ? (e.type === "line" ? i.has(e.theme) : s.has(e.theme)) ? { valid: !0 } : {
+    valid: !1,
+    error: `Theme "${e.theme}" is not supported for ${e.type} charts`
+  } : { valid: !1, error: "Chart name is required" } : { valid: !1, error: "Chart type is required" };
+}
+function u(e) {
+  if (!e)
+    return { valid: !1, error: "Chart data is required" };
+  if (!Array.isArray(e.labels) || e.labels.length === 0)
+    return { valid: !1, error: "At least one label is required" };
+  if (!Array.isArray(e.series) || e.series.length === 0)
+    return { valid: !1, error: "At least one data series is required" };
+  const a = e.labels.length;
+  for (const r of e.series) {
+    const t = l(r, a);
+    if (!t.valid)
+      return t;
+  }
+  return { valid: !0 };
+}
+function l(e, a) {
+  var r;
+  return (r = e.name) != null && r.trim() ? Array.isArray(e.values) ? e.values.length !== a ? {
+    valid: !1,
+    error: `Series "${e.name}" contains ${e.values.length} points, expected ${a}`
+  } : { valid: !0 } : { valid: !1, error: `Series "${e.name}" is missing values` } : { valid: !1, error: "Each series requires a name" };
+}
+export {
+  n as validateChartConfig,
+  u as validateChartData
+};

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

@@ -44,7 +44,10 @@ import "../../../segmented-control/item.js";
 import "@radix-ui/react-popover";
 import "../../../dynamic-table/z2-table.js";
 import "../../../dynamic-table/z2-table-context.js";
-const mt = ({
+import "../../../chart/chart.js";
+import "../../../chart-card/config/defaults.js";
+import "../../../chart-card/config/colors.js";
+const pt = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -82,5 +85,5 @@ const mt = ({
   }
 );
 export {
-  mt as AvatarCell
+  pt as AvatarCell
 };

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

@@ -49,6 +49,9 @@ import "../segmented-control/item.js";
 import "@radix-ui/react-popover";
 import "../dynamic-table/z2-table.js";
 import "../dynamic-table/z2-table-context.js";
+import "../chart/chart.js";
+import "../chart-card/config/defaults.js";
+import "../chart-card/config/colors.js";
 import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as b } from "./components/table-header-content.js";
 import { TableFooter as s } from "./components/table-footer.js";

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

@@ -44,8 +44,11 @@ import "../segmented-control/item.js";
 import "@radix-ui/react-popover";
 import "../dynamic-table/z2-table.js";
 import "../dynamic-table/z2-table-context.js";
+import "../chart/chart.js";
+import "../chart-card/config/defaults.js";
+import "../chart-card/config/colors.js";
 import "../table/table.context.js";
-const He = ({
+const _e = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -58,7 +61,7 @@ const He = ({
   search: m,
   filter: t,
   headerLeftContent: h,
-  headerActions: u,
+  headerActions: p,
   body: l = {
     cell: { hasBorder: !0 },
     className: "",
@@ -69,20 +72,20 @@ const He = ({
   pagination: o,
   paginationInfo: i,
   paginationQuickJumper: a,
-  error: p = !1,
+  error: u = !1,
   dataSourceError: _ = !1
 }) => {
   var F;
-  if (p)
+  if (u)
     return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(S, { className: "mt-1.5" }),
       /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ e("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
         /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again later" }),
-        typeof p == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: p })
+        typeof u == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: u })
       ] })
     ] }) });
-  const C = a && a.totalPage && a.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!i || C, v = m || t || h || u, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
+  const C = a && a.totalPage && a.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!i || C, v = m || t || h || p, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
   return /* @__PURE__ */ s("div", { className: d("flex flex-col overflow-hidden relative", H), children: [
     /* @__PURE__ */ s(r, { dataSource: w, schema: B, emptyMessage: k, children: [
       g && v && /* @__PURE__ */ s(
@@ -127,7 +130,7 @@ const He = ({
                 }
               )
             ] }),
-            u && /* @__PURE__ */ e(r.HeaderContent, { children: u })
+            p && /* @__PURE__ */ e(r.HeaderContent, { children: p })
           ]
         }
       ),
@@ -201,5 +204,5 @@ const He = ({
   ] });
 };
 export {
-  He as default
+  _e as default
 };