@ztwoint/z-ui 0.1.125 → 0.1.127

package/dist/components/dynamic-table/z2-table-pagination.js

@@ -1,18 +1,18 @@
 import { jsx as t, jsxs as l, Fragment as f } from "react/jsx-runtime";
-import { useZ2Table as z } from "./z2-table-context.js";
+import { useZ2Table as k } from "./z2-table-context.js";
 import { Z2Skeleton as N } from "../skeleton/skeleton.js";
 import { Button as s } from "../button/button.js";
 import "react";
-import { cn as I } from "../../lib/utils.js";
-import { Z2Select as L, Z2SelectTrigger as y, Z2SelectValue as T, Z2SelectContent as Z, Z2SelectItem as G } from "../select/z2-select.js";
+import { cn as z } from "../../lib/utils.js";
+import { Z2Select as I, Z2SelectTrigger as L, Z2SelectValue as T, Z2SelectContent as Z, Z2SelectItem as G } from "../select/z2-select.js";
 import $ from "../assets/icons/double-chevron-left.js";
 import j from "../assets/icons/double-chevron-right.js";
 import B from "../assets/icons/chevron-left.js";
 import M from "../assets/icons/chevron-right.js";
 import { Input as D } from "../input/input.js";
 function X(P) {
-  var b;
-  const { table: a, recordCount: g, isLoading: h } = z(), e = { ...{
+  var v;
+  const { table: a, recordCount: g, isLoading: h } = k(), e = { ...{
     showSizeToggle: !1,
     sizes: [25, 50, 100],
     sizesLabel: "Show",
@@ -27,7 +27,7 @@ function X(P) {
     nextPageLabel: "Go to next page",
     ellipsisText: "...",
     showGoToPage: !1
-  }, ...P }, r = " rtl:transform rtl:rotate-180", i = a.getState().pagination.pageIndex, c = a.getState().pagination.pageSize, x = i * c + 1, v = Math.min((i + 1) * c, g), d = a.getPageCount(), w = e != null && e.info ? e.info.replace("{from}", x.toString()).replace("{to}", v.toString()).replace("{count}", g.toString()) : `${x} - ${v} of ${g}`, p = (e == null ? void 0 : e.moreLimit) || 5, m = Math.floor(i / p) * p, u = Math.min(m + p, d), S = () => {
+  }, ...P }, r = " rtl:transform rtl:rotate-180", i = a.getState().pagination.pageIndex, c = a.getState().pagination.pageSize, x = i * c + 1, b = Math.min((i + 1) * c, g), p = a.getPageCount(), w = e != null && e.info ? e.info.replace("{from}", x.toString()).replace("{to}", b.toString()).replace("{count}", g.toString()) : `${x} - ${b} of ${g}`, d = (e == null ? void 0 : e.moreLimit) || 5, m = Math.floor(i / d) * d, u = Math.min(m + d, p), S = () => {
     const o = [];
     for (let n = m; n < u; n++)
       o.push(
@@ -36,6 +36,7 @@ function X(P) {
           {
             size: "small",
             variant: "stroke",
+            type: "button",
             disabled: i === n,
             onClick: () => {
               i !== n && a.setPageIndex(n);
@@ -51,14 +52,16 @@ function X(P) {
     {
       size: "small",
       variant: "stroke",
+      type: "button",
       onClick: () => a.setPageIndex(m - 1),
       label: e.ellipsisText
     }
-  ) : null, k = () => u < d ? /* @__PURE__ */ t(
+  ) : null, y = () => u < p ? /* @__PURE__ */ t(
     s,
     {
       variant: "stroke",
       size: "small",
+      type: "button",
       onClick: () => a.setPageIndex(u),
       label: e.ellipsisText
     }
@@ -67,17 +70,17 @@ function X(P) {
     "div",
     {
       "data-slot": "data-grid-pagination",
-      className: I(
+      className: z(
         "flex flex-wrap flex-col sm:flex-row justify-between items-center gap-2.5 py-2.5 sm:py-0 grow",
         e == null ? void 0 : e.className
       ),
       children: [
-        /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center space-x-2.5 pb-2.5 sm:pb-0 order-2 sm:order-1", children: h ? e == null ? void 0 : e.infoSkeleton : /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t("div", { className: "leading-none-medium-sm text-neutral-secondary text-nowrap", children: w }) }) }),
-        /* @__PURE__ */ t("div", { className: "flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 pt-2.5 sm:pt-0 order-1 sm:order-2", children: h ? e == null ? void 0 : e.sizesSkeleton : /* @__PURE__ */ l(f, { children: [
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center space-x-2.5 order-2 sm:order-1", children: h ? e == null ? void 0 : e.infoSkeleton : /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t("div", { className: "leading-none-medium-sm text-neutral-secondary text-nowrap", children: w }) }) }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 order-1 sm:order-2", children: h ? e == null ? void 0 : e.sizesSkeleton : /* @__PURE__ */ l(f, { children: [
           e.showSizeToggle && /* @__PURE__ */ l(f, { children: [
             /* @__PURE__ */ t("div", { className: "leading-none-medium-sm text-neutral-secondary", children: e.rowsPerPageLabel }),
             /* @__PURE__ */ l(
-              L,
+              I,
               {
                 value: `${c}`,
                 onValueChange: (o) => {
@@ -85,8 +88,8 @@ function X(P) {
                   a.setPageSize(n);
                 },
                 children: [
-                  /* @__PURE__ */ t(y, { className: "w-fit", size: "sm", children: /* @__PURE__ */ t(T, { placeholder: `${c}` }) }),
-                  /* @__PURE__ */ t(Z, { side: "top", className: "min-w-[50px]", children: (b = e == null ? void 0 : e.sizes) == null ? void 0 : b.map((o) => /* @__PURE__ */ t(G, { value: `${o}`, children: o }, o)) })
+                  /* @__PURE__ */ t(L, { className: "w-fit", size: "sm", children: /* @__PURE__ */ t(T, { placeholder: `${c}` }) }),
+                  /* @__PURE__ */ t(Z, { side: "top", className: "min-w-[50px]", children: (v = e == null ? void 0 : e.sizes) == null ? void 0 : v.map((o) => /* @__PURE__ */ t(G, { value: `${o}`, children: o }, o)) })
                 ]
               }
             )
@@ -110,12 +113,13 @@ function X(P) {
               }
             )
           ] }),
-          d > 1 && /* @__PURE__ */ l("div", { className: "flex items-center space-x-1 order-1 sm:order-2", children: [
+          p > 1 && /* @__PURE__ */ l("div", { className: "flex items-center space-x-1 order-1 sm:order-2", children: [
             /* @__PURE__ */ t(
               s,
               {
                 size: "small",
                 variant: "stroke",
+                type: "button",
                 className: r,
                 onClick: () => a.firstPage(),
                 disabled: !a.getCanPreviousPage(),
@@ -128,6 +132,7 @@ function X(P) {
               {
                 size: "small",
                 variant: "stroke",
+                type: "button",
                 className: r,
                 onClick: () => a.previousPage(),
                 disabled: !a.getCanPreviousPage(),
@@ -137,12 +142,13 @@ function X(P) {
             ),
             C(),
             S(),
-            k(),
+            y(),
             /* @__PURE__ */ t(
               s,
               {
                 size: "small",
                 variant: "stroke",
+                type: "button",
                 className: r,
                 onClick: () => a.nextPage(),
                 disabled: !a.getCanNextPage(),
@@ -155,6 +161,7 @@ function X(P) {
               {
                 size: "small",
                 variant: "stroke",
+                type: "button",
                 className: r,
                 onClick: () => a.lastPage(),
                 disabled: !a.getCanNextPage(),

package/dist/components/primitives/chart-card/builders/chart-builder-factory.js

@@ -0,0 +1,17 @@
+import { buildBarChartOptions as e } from "./bar-chart-builder.js";
+import { buildLineChartOptions as n } from "./line-chart-builder.js";
+import { buildPieChartOptions as u } from "./pie-chart-builder.js";
+const a = {
+  line: n,
+  bar: e,
+  pie: u
+};
+function h(r, i, o, p) {
+  const t = a[r.type];
+  if (!t)
+    throw new Error(`Unsupported chart type: ${r.type}`);
+  return t(r, i, o, p);
+}
+export {
+  h as buildChartOptions
+};

package/dist/components/{chart-card → primitives/chart-card}/chart-card.js

@@ -1,9 +1,9 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as p from "react";
-import { cn as w } from "../../lib/utils.js";
+import { cn as w } from "../../../lib/utils.js";
 import { validateChartConfig as S, validateChartData as E } from "./validators/config-validator.js";
 import { buildChartOptions as O } from "./builders/chart-builder-factory.js";
-import { Chart as R } from "../chart/chart.js";
+import { Chart as R } from "../../chart/chart.js";
 import { LoadingState as V, ErrorState as l, EmptyState as $ } from "./chart-card-states.js";
 function D({
   config: t,

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

@@ -0,0 +1,39 @@
+const e = {
+  default: ["#2563eb", "#7c3aed", "#d97706", "#16a34a", "#dc2626", "#0284c7"]
+}, f = {
+  basic: e.default,
+  smooth: ["#1d4ed8", "#38bdf8", "#22d3ee", "#6366f1"]
+}, E = {
+  basic: e.default,
+  stacked: ["#0284c7", "#38bdf8", "#60a5fa", "#93c5fd"]
+}, o = {
+  basic: e.default,
+  donut: ["#2563eb", "#7c3aed", "#d97706", "#16a34a", "#dc2626", "#0284c7", "#8b5cf6", "#f59e0b"]
+}, T = {
+  line: f,
+  bar: E,
+  pie: o
+}, n = {
+  text: {
+    primary: "#000000",
+    secondary: "#5d5d5d"
+  },
+  border: {
+    light: "#e7e7e7",
+    default: "#d1d1d1"
+  },
+  background: {
+    default: "#ffffff"
+  }
+};
+function r(t, a) {
+  var d;
+  const c = ((d = T[t]) == null ? void 0 : d[a]) ?? e.default;
+  return Array.from(c);
+}
+export {
+  T as CHART_THEME_PALETTES,
+  e as COLOR_PALETTES,
+  n as UI_COLORS,
+  r as getThemePalette
+};

package/dist/components/primitives/popconfirm/popconfirm.const.d.ts

@@ -0,0 +1,20 @@
+export declare const POPCONFIRM_PLACEMENTS: {
+    readonly TOP: "top";
+    readonly TOP_LEFT: "topLeft";
+    readonly TOP_RIGHT: "topRight";
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_LEFT: "bottomLeft";
+    readonly BOTTOM_RIGHT: "bottomRight";
+    readonly LEFT: "left";
+    readonly LEFT_TOP: "leftTop";
+    readonly LEFT_BOTTOM: "leftBottom";
+    readonly RIGHT: "right";
+    readonly RIGHT_TOP: "rightTop";
+    readonly RIGHT_BOTTOM: "rightBottom";
+};
+export type PopconfirmPlacement = (typeof POPCONFIRM_PLACEMENTS)[keyof typeof POPCONFIRM_PLACEMENTS];
+export declare const POPCONFIRM_DEFAULT_CONFIG: {
+    readonly okText: "OK";
+    readonly cancelText: "Cancel";
+    readonly placement: PopconfirmPlacement;
+};

package/dist/components/primitives/popconfirm/popconfirm.const.js

@@ -0,0 +1,22 @@
+const T = {
+  TOP: "top",
+  TOP_LEFT: "topLeft",
+  TOP_RIGHT: "topRight",
+  BOTTOM: "bottom",
+  BOTTOM_LEFT: "bottomLeft",
+  BOTTOM_RIGHT: "bottomRight",
+  LEFT: "left",
+  LEFT_TOP: "leftTop",
+  LEFT_BOTTOM: "leftBottom",
+  RIGHT: "right",
+  RIGHT_TOP: "rightTop",
+  RIGHT_BOTTOM: "rightBottom"
+}, t = {
+  okText: "OK",
+  cancelText: "Cancel",
+  placement: T.TOP
+};
+export {
+  t as POPCONFIRM_DEFAULT_CONFIG,
+  T as POPCONFIRM_PLACEMENTS
+};

package/dist/components/primitives/popconfirm/popconfirm.d.ts

@@ -0,0 +1,4 @@
+import { PopconfirmProps } from './popconfirm.type';
+import * as React from 'react';
+declare const Popconfirm: React.FC<PopconfirmProps>;
+export { Popconfirm };

package/dist/components/primitives/popconfirm/popconfirm.hook.d.ts

@@ -0,0 +1,14 @@
+interface UsePopconfirmProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+export declare const usePopconfirm: (props: UsePopconfirmProps) => {
+    open: boolean;
+    confirmLoading: boolean;
+    handleOpenChange: (newOpen: boolean) => void;
+    handleConfirm: () => Promise<void>;
+    handleCancel: () => void;
+};
+export {};

package/dist/components/primitives/popconfirm/popconfirm.hook.js

@@ -0,0 +1,32 @@
+import { useState as i, useCallback as a } from "react";
+const g = (f) => {
+  const { open: c, onOpenChange: o, onConfirm: t, onCancel: e } = f, [m, d] = i(!1), [p, l] = i(!1), s = c !== void 0, u = s ? c : m, n = a(
+    (r) => {
+      s || d(r), o == null || o(r);
+    },
+    [s, o]
+  ), C = a(async () => {
+    if (t) {
+      l(!0);
+      try {
+        await t(), n(!1);
+      } catch (r) {
+        console.error("Popconfirm confirm error:", r);
+      } finally {
+        l(!1);
+      }
+    }
+  }, [t, n]), h = a(() => {
+    e == null || e(), n(!1);
+  }, [e, n]);
+  return {
+    open: u,
+    confirmLoading: p,
+    handleOpenChange: n,
+    handleConfirm: C,
+    handleCancel: h
+  };
+};
+export {
+  g as usePopconfirm
+};

package/dist/components/primitives/popconfirm/popconfirm.js

@@ -0,0 +1,78 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { Popover as L, PopoverTrigger as R, PopoverContent as z } from "../../popover/popover.js";
+import { Button as s } from "../../button/button.js";
+import { POPCONFIRM_DEFAULT_CONFIG as l } from "./popconfirm.const.js";
+import { usePopconfirm as A } from "./popconfirm.hook.js";
+import { mapPlacementToRadixAlign as I, mapPlacementToRadixSide as _ } from "./popconfirm.utils.js";
+import "react";
+import { cn as f } from "../../../lib/utils.js";
+const D = ({
+  title: h,
+  children: g,
+  onConfirm: x,
+  onCancel: c,
+  okText: N = l.okText,
+  cancelText: C = l.cancelText,
+  placement: r = l.placement,
+  open: p,
+  onOpenChange: v,
+  disabled: n = !1,
+  okButtonProps: e,
+  cancelButtonProps: i,
+  className: b
+}) => {
+  const { open: O, confirmLoading: m, handleOpenChange: T, handleConfirm: w, handleCancel: j } = A({
+    open: p,
+    onOpenChange: v,
+    onConfirm: x,
+    onCancel: c
+  }), y = _(r), F = I(r);
+  return /* @__PURE__ */ d(L, { open: n ? !1 : O, onOpenChange: T, children: [
+    /* @__PURE__ */ a(R, { asChild: !0, disabled: n, "data-slot": "popconfirm-trigger", children: g }),
+    /* @__PURE__ */ a(
+      z,
+      {
+        side: y,
+        align: F,
+        sideOffset: 8,
+        className: f("p-3 w-auto min-w-[200px]", b),
+        "data-slot": "popconfirm-content",
+        children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ a("div", { className: "text-text-neutral-primary text-sm leading-medium-sm", children: h }),
+          /* @__PURE__ */ d("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ a(
+              s,
+              {
+                onClick: j,
+                variant: "stroke",
+                shade: "neutral",
+                size: "small",
+                disabled: m || (i == null ? void 0 : i.disabled),
+                className: f("min-w-16", i == null ? void 0 : i.className),
+                "data-slot": "popconfirm-cancel-button",
+                children: C
+              }
+            ),
+            /* @__PURE__ */ a(
+              s,
+              {
+                onClick: w,
+                variant: "filled",
+                shade: "brand",
+                size: "small",
+                disabled: m || (e == null ? void 0 : e.disabled) || (i == null ? void 0 : i.disabled),
+                className: f("min-w-16", e == null ? void 0 : e.className),
+                "data-slot": "popconfirm-ok-button",
+                children: e != null && e.loading || m ? "Loading..." : N
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+D.displayName = "Popconfirm";
+export {
+  D as Popconfirm
+};

package/dist/components/primitives/popconfirm/popconfirm.type.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { PopconfirmPlacement } from './popconfirm.const';
+export interface PopconfirmProps {
+    title: ReactNode;
+    children: ReactNode;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+    okText?: string;
+    cancelText?: string;
+    placement?: PopconfirmPlacement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    okButtonProps?: {
+        loading?: boolean;
+        disabled?: boolean;
+        className?: string;
+    };
+    cancelButtonProps?: {
+        disabled?: boolean;
+        className?: string;
+    };
+    className?: string;
+}

package/dist/components/primitives/popconfirm/popconfirm.utils.d.ts

@@ -0,0 +1,3 @@
+import { PopconfirmPlacement } from './popconfirm.const';
+export declare const mapPlacementToRadixSide: (placement: PopconfirmPlacement) => "top" | "bottom" | "left" | "right";
+export declare const mapPlacementToRadixAlign: (placement: PopconfirmPlacement) => "start" | "center" | "end";

package/dist/components/primitives/popconfirm/popconfirm.utils.js

@@ -0,0 +1,6 @@
+import { POPCONFIRM_PLACEMENTS as O } from "./popconfirm.const.js";
+const _ = (T) => T === O.TOP || T === O.TOP_LEFT || T === O.TOP_RIGHT ? "top" : T === O.BOTTOM || T === O.BOTTOM_LEFT || T === O.BOTTOM_RIGHT ? "bottom" : T === O.LEFT || T === O.LEFT_TOP || T === O.LEFT_BOTTOM ? "left" : T === O.RIGHT || T === O.RIGHT_TOP || T === O.RIGHT_BOTTOM ? "right" : "top", P = (T) => T === O.TOP_LEFT || T === O.BOTTOM_LEFT || T === O.LEFT_TOP || T === O.RIGHT_TOP ? "start" : T === O.TOP_RIGHT || T === O.BOTTOM_RIGHT || T === O.LEFT_BOTTOM || T === O.RIGHT_BOTTOM ? "end" : "center";
+export {
+  P as mapPlacementToRadixAlign,
+  _ as mapPlacementToRadixSide
+};

package/dist/components/primitives/select-compact/select-compact.js

@@ -0,0 +1,17 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { Z2Select as m, Z2SelectTrigger as S, Z2SelectValue as i, Z2SelectContent as Z, Z2SelectItem as d } from "../../select/z2-select.js";
+function v({
+  value: r,
+  onChange: t,
+  options: c,
+  placeholder: a = "Select field",
+  className: n
+}) {
+  return /* @__PURE__ */ u(m, { value: r || "", onValueChange: t, children: [
+    /* @__PURE__ */ e(S, { className: n, children: /* @__PURE__ */ e(i, { placeholder: a }) }),
+    /* @__PURE__ */ e(Z, { children: !!c && c.map((l) => /* @__PURE__ */ e(d, { value: l.value, children: l.label }, l.value)) })
+  ] });
+}
+export {
+  v as Z2SelectCompact
+};

package/dist/components/{table-card → primitives/table-card}/table-card.type.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { TableProps, TableSchema, TableSearch, TableSort } from '../table/table.type';
-import { TableFilter, FilterRule, FilterSchema } from '../table-filter/table-filter.type';
-import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../table/components/pagination/pagination.type';
+import { TableProps, TableSchema, TableSearch, TableSort } from '../../table/table.type';
+import { TableFilter, FilterRule, FilterSchema } from '../../table-filter/table-filter.type';
+import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../../table/components/pagination/pagination.type';
 export interface TableCardProps {
     dataSource: Record<string, unknown>[];
     schema: TableSchema;

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

@@ -32,7 +32,9 @@ import "../../table-provider.js";
 import { Avatar as l } from "../../../avatar/avatar.js";
 import "../../table.context.js";
 import "../../../tooltip/tooltip.js";
-import "../../../table-filter/index.js";
+import "../../../table-filter/table-filter.context.js";
+import "@radix-ui/react-popover";
+import "react-virtuoso";
 import "../../../badge/badge.js";
 import "../../../text-preset/text-preset.js";
 import "react-dom";
@@ -41,12 +43,10 @@ import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledg
 import "@radix-ui/react-slot";
 import "../../../radio/z2-radio.js";
 import "../../../segmented-control/item.js";
-import "@radix-ui/react-popover";
+import "../../../primitives/popconfirm/popconfirm.js";
 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 "../../../z2map/map.js";
 import "../../../z2map/map.constants.js";
 import "../../../z2map/components/map-pin.js";

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

@@ -36,7 +36,9 @@ import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
-import "../table-filter/index.js";
+import "../table-filter/table-filter.context.js";
+import "@radix-ui/react-popover";
+import "react-virtuoso";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
@@ -46,12 +48,10 @@ import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dis
 import "@radix-ui/react-slot";
 import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
-import "@radix-ui/react-popover";
+import "../primitives/popconfirm/popconfirm.js";
 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 "../z2map/map.js";
 import "../z2map/map.constants.js";
 import "../z2map/components/map-pin.js";

package/dist/components/table-filter/table-filter.context.js

@@ -1,13 +1,4 @@
-import * as e from "react";
-const o = e.createContext(
+import * as t from "react";
+t.createContext(
   void 0
-), r = () => {
-  const t = e.useContext(o);
-  if (t === void 0)
-    throw new Error("useTableFilterContext must be used within a TableFilterProvider");
-  return t;
-};
-export {
-  o as TableFilterContext,
-  r as useTableFilterContext
-};
+);