@ztwoint/z-ui 0.1.136 → 0.2.0-beta.1

package/dist/components/avatar/avatar.d.ts

@@ -75,7 +75,7 @@ declare function Element({ label, className, ref, asChild, children, ...props }:
  * Props for the Avatar Label component.
  * @interface LabelProps
  */
-interface LabelProps {
+interface AvatarLabelProps {
     /** Text content to display in the avatar (typically user initials) */
     label: string;
     /** Additional CSS classes for custom styling */
@@ -98,7 +98,7 @@ interface LabelProps {
  * <Avatar.Label label="AB" className="text-yellow-300" />
  * ```
  */
-declare function Label({ label, className, ref, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+declare function Label({ label, className, ref, ...props }: AvatarLabelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for the AvatarWithLabel convenience component.
  * @interface AvatarWithLabelProps
@@ -182,4 +182,4 @@ declare const Avatar: {
  * - TypeScript support with comprehensive prop types
  * - Optimized typography for readability at all sizes
  */
-export { Avatar, AvatarWithLabel, ElementProps, LabelProps, RootProps, AvatarWithLabelProps };
+export { Avatar, AvatarWithLabel, ElementProps, AvatarLabelProps, RootProps, AvatarWithLabelProps };

package/dist/components/badge/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
     variant?: "success" | "warning" | "danger" | "neutral" | "brand" | "gray" | null | undefined;
-    rounded?: "none" | "sm" | "md" | "full" | "lg" | null | undefined;
+    rounded?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, rounded, leftIcon, rightIcon, label, asChild, }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {

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

@@ -24,7 +24,6 @@ import "../../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
 import "lucide-react";
 import S from "../../assets/icons/octagon-warning-Copy.js";
-import "../../input/input.js";
 import "../../nav-header/nav-header.js";
 import "../../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
@@ -34,13 +33,12 @@ import "../../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../../tooltip/tooltip.js";
 import { Filter as x } from "../../table-filter/index.js";
-import "../../badge/badge.js";
 import "../../avatar/avatar.js";
 import "../../text-preset/text-preset.js";
 import "react-dom";
 import "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
-import "@radix-ui/react-slot";
+import "../../input/input.js";
 import "../../radio/z2-radio.js";
 import "../../segmented-control/item.js";
 import "../popconfirm/popconfirm.js";
@@ -56,8 +54,16 @@ import "../../z2map/components/map-pin-content.js";
 import "../../z2map/components/map-controls.js";
 import "../../z2map/components/map-zoom-control.js";
 import "../../z2map/components/map-style-control.js";
+import "../../../v2/atoms/inputs/input.js";
+import "../../../v2/atoms/inputs/label.js";
+import "../../../v2/atoms/indicators/badge.js";
+import "../../../v2/atoms/indicators/number-badge.js";
+import "../../../v2/atoms/indicators/featured-icon.js";
+import "../../../v2/atoms/indicators/stepper.js";
+import "../../../v2/atoms/actions/button.js";
+import "../../../v2/atoms/actions/breadcrumb-link.js";
 import "../../table/table.context.js";
-const Gt = ({
+const Xt = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -69,8 +75,8 @@ const Gt = ({
   headerClassName: j,
   search: s,
   filter: e,
-  headerLeftContent: h,
-  headerActions: p,
+  headerLeftContent: p,
+  headerActions: h,
   body: o = {
     cell: { hasBorder: !0 },
     className: "",
@@ -94,7 +100,7 @@ const Gt = ({
         typeof u == "string" && /* @__PURE__ */ t("div", { className: "text-text-warning-secondary text-sm", children: u })
       ] })
     ] }) });
-  const N = a && a.totalPage && a.totalPage >= 2, C = l && l.totalPage && l.totalPage >= 2 || !!i || N, v = s || e || h || p, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
+  const N = a && a.totalPage && a.totalPage >= 2, C = l && l.totalPage && l.totalPage >= 2 || !!i || N, v = s || e || p || h, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
   return /* @__PURE__ */ m("div", { className: d("flex flex-col overflow-hidden relative", H), children: [
     /* @__PURE__ */ m(r, { dataSource: w, schema: B, emptyMessage: k, children: [
       g && v && /* @__PURE__ */ m(
@@ -108,7 +114,7 @@ const Gt = ({
           ),
           children: [
             /* @__PURE__ */ m(r.HeaderContent, { className: "overflow-x-auto p-[1px]", children: [
-              h && h,
+              p && p,
               s && /* @__PURE__ */ t(
                 r.Search,
                 {
@@ -139,7 +145,7 @@ const Gt = ({
                 }
               )
             ] }),
-            p && /* @__PURE__ */ t(r.HeaderContent, { children: p })
+            h && /* @__PURE__ */ t(r.HeaderContent, { children: h })
           ]
         }
       ),
@@ -213,5 +219,5 @@ const Gt = ({
   ] });
 };
 export {
-  Gt as default
+  Xt as default
 };

package/dist/components/table/components/cell/avatar-cell.d.ts

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { RootProps, LabelProps } from '../../../avatar/avatar';
+import { RootProps, AvatarLabelProps } from '../../../avatar/avatar';
 import { CellValue } from '../../table.type';
 export interface AvatarCellProps {
     avatar: {
-        label: LabelProps['label'];
+        label: AvatarLabelProps['label'];
         color: RootProps['color'];
     };
     value: CellValue;

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

@@ -22,7 +22,6 @@ import "@radix-ui/react-dialog";
 import "../../../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
 import "lucide-react";
-import "../../../input/input.js";
 import "../../../nav-header/nav-header.js";
 import "../../../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
@@ -33,14 +32,13 @@ import "@radix-ui/react-tabs";
 import "../../table-provider.js";
 import { Avatar as l } from "../../../avatar/avatar.js";
 import "../../table.context.js";
+import "../../../input/input.js";
 import "../../../tooltip/tooltip.js";
 import "../../../table-filter/index.js";
-import "../../../badge/badge.js";
 import "../../../text-preset/text-preset.js";
 import "react-dom";
 import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
-import "@radix-ui/react-slot";
 import "../../../radio/z2-radio.js";
 import "../../../segmented-control/item.js";
 import "../../../primitives/popconfirm/popconfirm.js";
@@ -56,7 +54,15 @@ import "../../../z2map/components/map-pin-content.js";
 import "../../../z2map/components/map-controls.js";
 import "../../../z2map/components/map-zoom-control.js";
 import "../../../z2map/components/map-style-control.js";
-const ut = ({
+import "../../../../v2/atoms/inputs/input.js";
+import "../../../../v2/atoms/inputs/label.js";
+import "../../../../v2/atoms/indicators/badge.js";
+import "../../../../v2/atoms/indicators/number-badge.js";
+import "../../../../v2/atoms/indicators/featured-icon.js";
+import "../../../../v2/atoms/indicators/stepper.js";
+import "../../../../v2/atoms/actions/button.js";
+import "../../../../v2/atoms/actions/breadcrumb-link.js";
+const gt = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -94,5 +100,5 @@ const ut = ({
   }
 );
 export {
-  ut as AvatarCell
+  gt as AvatarCell
 };

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

@@ -29,7 +29,6 @@ import "@radix-ui/react-dialog";
 import "../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
 import "lucide-react";
-import "../input/input.js";
 import "../nav-header/nav-header.js";
 import "../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
@@ -39,13 +38,12 @@ import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
 import "../table-filter/index.js";
-import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
 import "react-dom";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
-import "@radix-ui/react-slot";
+import "../input/input.js";
 import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
 import "../primitives/popconfirm/popconfirm.js";
@@ -61,6 +59,14 @@ import "../z2map/components/map-pin-content.js";
 import "../z2map/components/map-controls.js";
 import "../z2map/components/map-zoom-control.js";
 import "../z2map/components/map-style-control.js";
+import "../../v2/atoms/inputs/input.js";
+import "../../v2/atoms/inputs/label.js";
+import "../../v2/atoms/indicators/badge.js";
+import "../../v2/atoms/indicators/number-badge.js";
+import "../../v2/atoms/indicators/featured-icon.js";
+import "../../v2/atoms/indicators/stepper.js";
+import "../../v2/atoms/actions/button.js";
+import "../../v2/atoms/actions/breadcrumb-link.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/z2map/components/map-controls.js

@@ -15,13 +15,13 @@ const f = ({
     "div",
     {
       className: s(
-        "absolute bottom-6 right-6 z-0 transition-all duration-300 hover:scale-105",
+        "absolute bottom-6 right-6 z-10 transition-all duration-300 hover:scale-105",
         l
       ),
       children: /* @__PURE__ */ r(d, { onZoomIn: o, onZoomOut: t })
     }
   ),
-  e && a && i && /* @__PURE__ */ r("div", { className: s("absolute top-6 right-6 z-0 transition-all duration-300", l), children: /* @__PURE__ */ r(c, { activeStyle: a, onStyleChange: i }) })
+  e && a && i && /* @__PURE__ */ r("div", { className: s("absolute top-6 right-6 z-10 transition-all duration-300", l), children: /* @__PURE__ */ r(c, { activeStyle: a, onStyleChange: i }) })
 ] });
 f.displayName = "MapControls";
 export {

package/dist/components/z2map/components/map-empty-state.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { MapPinOff as a } from "lucide-react";
-const s = () => /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none flex items-center justify-center z-0", children: /* @__PURE__ */ e("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] border border-stroke-solid-light p-8 max-w-sm mx-4 pointer-events-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+const s = () => /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none flex items-center justify-center z-20", children: /* @__PURE__ */ e("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] border border-stroke-solid-light p-8 max-w-sm mx-4 pointer-events-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-4 text-center", children: [
   /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-neutral-default flex items-center justify-center", children: /* @__PURE__ */ e(a, { className: "w-8 h-8 text-neutral-secondary" }) }) }),
   /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e("h3", { className: "leading-none-medium-base text-neutral-primary font-semibold", children: "No locations to display" }) })
 ] }) }) });

package/dist/components/z2map/components/map-loading-state.js

@@ -25,7 +25,7 @@ const c = ({ width: r, height: t, className: l }) => {
             }
           }
         ) }),
-        /* @__PURE__ */ a("div", { className: "relative z-0 flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ a("div", { className: "relative z-10 flex flex-col items-center gap-3", children: [
           /* @__PURE__ */ a("div", { className: "relative", children: [
             /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-accent-default/10 flex items-center justify-center", children: /* @__PURE__ */ e(i, { className: "w-8 h-8 text-accent-primary animate-spin" }) }),
             /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-accent-primary/20 animate-ping" })

package/dist/components/z2map/components/map-pin.js

@@ -23,7 +23,7 @@ const m = v(
       },
       active: {
         true: [
-          "scale-125 z-0",
+          "scale-125 z-50",
           "before:ring-4 before:ring-white/70",
           "before:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"
         ],
@@ -100,12 +100,12 @@ const m = v(
           "div",
           {
             className: c(
-              "absolute inset-0 rounded-full z-0 opacity-60",
+              "absolute inset-0 rounded-full z-[1] opacity-60",
               w[o]
             )
           }
         ),
-        /* @__PURE__ */ n("div", { className: "relative z-0 flex items-center justify-center", children: f || /* @__PURE__ */ n(h, { size: g, className: "text-white drop-shadow-sm" }) })
+        /* @__PURE__ */ n("div", { className: "relative z-10 flex items-center justify-center", children: f || /* @__PURE__ */ n(h, { size: g, className: "text-white drop-shadow-sm" }) })
       ]
     }
   );

package/dist/components/z2map/map.js

@@ -20,20 +20,20 @@ import { DEFAULT_MAP_CONFIG as r } from "./map.constants.js";
 import { cn as Q } from "../../lib/utils.js";
 /* empty css                                              */
 const X = ({
-  locations: m = [],
+  locations: n = [],
   mapboxToken: M,
   width: a = r.width,
-  height: l = r.height,
-  className: d,
-  pinVariant: s = r.pinVariant,
+  height: d = r.height,
+  className: s,
+  pinVariant: l = r.pinVariant,
   pinSize: h = r.pinSize,
   renderPin: t,
-  renderPopover: n,
+  renderPopover: m,
   popoverDisabled: C = r.popoverDisabled,
-  interactive: b = r.interactive,
-  draggable: c = r.draggable,
+  interactive: w = r.interactive,
+  draggable: u = r.draggable,
   scrollZoom: x = r.scrollZoom,
-  showZoomControls: w = r.showZoomControls,
+  showZoomControls: b = r.showZoomControls,
   showStyleSwitcher: y = r.showStyleSwitcher,
   minZoom: S = r.minZoom,
   maxZoom: k = r.maxZoom,
@@ -43,26 +43,26 @@ const X = ({
   const {
     mapRef: O,
     initialViewState: I,
-    currentVariant: z,
+    currentVariant: A,
     activeLocation: p,
-    openPopoverId: A,
-    setOpenPopoverId: E,
-    mapStyle: P,
-    containerStyle: j,
-    handleZoomIn: F,
-    handleZoomOut: L,
-    handleStyleChange: N,
+    openPopoverId: E,
+    setOpenPopoverId: P,
+    mapStyle: j,
+    containerStyle: F,
+    handleZoomIn: L,
+    handleZoomOut: N,
+    handleStyleChange: T,
     handlePinHover: i,
-    handlePinClickWrapper: u,
-    handleMove: T
-  } = $({ locations: m, width: a, height: l, ..._ });
-  return Z ? /* @__PURE__ */ o(J, { width: a, height: l, className: d }) : /* @__PURE__ */ g(
+    handlePinClickWrapper: c,
+    handleMove: z
+  } = $({ locations: n, width: a, height: d, ..._ });
+  return Z ? /* @__PURE__ */ o(J, { width: a, height: d, className: s }) : /* @__PURE__ */ g(
     "div",
     {
-      style: j,
+      style: F,
       className: Q(
-        "relative rounded-xl overflow-hidden  border border-stroke-solid-light [&_.mapboxgl-ctrl-bottom-right]:!z-0 [&_.mapboxgl-ctrl-bottom-left]:!z-0",
-        d
+        "relative rounded-xl overflow-hidden shadow-[0_2px_16px_rgba(0,0,0,0.08)] border border-stroke-solid-light",
+        s
       ),
       children: [
         /* @__PURE__ */ o(
@@ -72,16 +72,16 @@ const X = ({
             mapboxAccessToken: M,
             initialViewState: I,
             style: { width: "100%", height: "100%" },
-            mapStyle: P,
-            interactive: b,
-            dragPan: c,
+            mapStyle: j,
+            interactive: w,
+            dragPan: u,
             scrollZoom: x,
             minZoom: S,
             maxZoom: k,
-            onMove: T,
+            onMove: z,
             projection: { name: "mercator" },
-            cursor: c ? void 0 : "default",
-            children: m.map((e) => {
+            cursor: u ? void 0 : "default",
+            children: n.map((e) => {
               const f = (p == null ? void 0 : p.id) === e.id;
               return /* @__PURE__ */ o(
                 H,
@@ -92,30 +92,30 @@ const X = ({
                   children: C ? /* @__PURE__ */ o(V, { children: t ? t(e) : /* @__PURE__ */ o(
                     v,
                     {
-                      variant: s,
+                      variant: l,
                       size: h,
                       icon: e.icon,
                       active: f,
-                      onClick: () => u(e),
+                      onClick: () => c(e),
                       onMouseEnter: () => i(e),
                       onMouseLeave: () => i(null)
                     }
                   ) }) : /* @__PURE__ */ g(
                     R,
                     {
-                      open: A === e.id,
+                      open: E === e.id,
                       onOpenChange: (D) => {
-                        E(D ? e.id : null);
+                        P(D ? e.id : null);
                       },
                       children: [
                         /* @__PURE__ */ o(U, { asChild: !0, children: /* @__PURE__ */ o("div", { children: t ? t(e) : /* @__PURE__ */ o(
                           v,
                           {
-                            variant: s,
+                            variant: l,
                             size: h,
                             icon: e.icon,
                             active: f,
-                            onClick: () => u(e),
+                            onClick: () => c(e),
                             onMouseEnter: () => i(e),
                             onMouseLeave: () => i(null)
                           }
@@ -127,7 +127,7 @@ const X = ({
                             align: "center",
                             className: "w-auto max-w-sm p-3 bg-white/98 backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.12)] border-stroke-solid-light",
                             sideOffset: 8,
-                            children: /* @__PURE__ */ o(q, { location: e, customContent: n == null ? void 0 : n(e) })
+                            children: /* @__PURE__ */ o(q, { location: e, customContent: m == null ? void 0 : m(e) })
                           }
                         )
                       ]
@@ -142,15 +142,15 @@ const X = ({
         /* @__PURE__ */ o(
           B,
           {
-            showZoomControls: w,
-            onZoomIn: F,
-            onZoomOut: L,
+            showZoomControls: b,
+            onZoomIn: L,
+            onZoomOut: N,
             showStyleSwitcher: y,
-            activeStyle: z,
-            onStyleChange: N
+            activeStyle: A,
+            onStyleChange: T
           }
         ),
-        m.length === 0 && /* @__PURE__ */ o(K, {})
+        n.length === 0 && /* @__PURE__ */ o(K, {})
       ]
     }
   );

package/dist/css/config/config.css

@@ -27,3 +27,4 @@
 @import './typography/index.css';
 @import './shadows.css';
 @import './other-variables.css';
+@import './components/index.css';