@ztwoint/z-ui 0.1.108 → 0.1.110

package/dist/components/column-reorder/column-reorder.hook.js

@@ -9,17 +9,16 @@ import "clsx";
 import "tailwind-merge";
 import { isColumnData as s } from "./components/column-item/column-item.util.js";
 import "../button/button.js";
-import "../tooltip/tooltip.js";
-const b = ({ columns: o, onReorder: r }) => {
-  const [t, a] = I(o);
+const $ = ({ columns: e, onReorder: r }) => {
+  const [t, a] = I(e);
   return p(() => {
-    a(o);
-  }, [o]), p(() => C({
-    canMonitor({ source: e }) {
-      return s(e.data);
+    a(e);
+  }, [e]), p(() => C({
+    canMonitor({ source: o }) {
+      return s(o.data);
     },
-    onDrop({ location: e, source: g }) {
-      const c = e.current.dropTargets[0];
+    onDrop({ location: o, source: g }) {
+      const c = o.current.dropTargets[0];
       if (!c)
         return;
       const n = g.data, i = c.data;
@@ -44,5 +43,5 @@ const b = ({ columns: o, onReorder: r }) => {
   }), [t, r]), { internalColumns: t };
 };
 export {
-  b as useColumnReorder
+  $ as useColumnReorder
 };

package/dist/components/column-reorder/components/column-item/column-item.js

@@ -1,128 +1,87 @@
 import { jsxs as l, Fragment as f, jsx as e } from "react/jsx-runtime";
-import { useRef as x, useState as h, useEffect as b } from "react";
-import { createPortal as N } from "react-dom";
-import { cn as u } from "../../../../lib/utils.js";
-import { useColumnItemDragAndDrop as v } from "./column-item.hook.js";
-import { Button as y } from "../../../button/button.js";
-import k from "../../../assets/icons/x.js";
-import { parseColumnLabel as p } from "./column-item.util.js";
-import g from "../../../assets/icons/drag-handle.js";
-import { Z2Tooltip as w } from "../../../tooltip/tooltip.js";
-const L = {
+import { createPortal as x } from "react-dom";
+import "react";
+import { cn as c } from "../../../../lib/utils.js";
+import { useColumnItemDragAndDrop as h } from "./column-item.hook.js";
+import { Button as b } from "../../../button/button.js";
+import N from "../../../assets/icons/x.js";
+import { parseColumnLabel as g } from "./column-item.util.js";
+import u from "../../../assets/icons/drag-handle.js";
+const y = {
   "is-dragging": "opacity-40",
   "is-dragging-over": "bg-background-neutral-medium"
-}, d = ({ text: t, className: s, tooltipMessage: r }) => {
-  const i = x(null), [o, m] = h(!1);
-  b(() => {
-    const n = () => {
-      if (i.current) {
-        const c = i.current;
-        m(c.scrollWidth > c.clientWidth);
-      }
-    };
-    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
-  }, [t]);
-  const a = /* @__PURE__ */ e("span", { ref: i, className: u("truncate min-w-0", s), children: t });
-  return o && r ? /* @__PURE__ */ e(w, { message: r, side: "top", children: a }) : a;
-}, T = ({
+}, i = ({ text: t, className: r }) => /* @__PURE__ */ e("span", { className: c("truncate min-w-0", r), children: t }), k = ({
   edge: t,
-  isFirstElement: s = !1
+  isFirstElement: r = !1
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: u(
+    className: c(
       "absolute left-0 right-0 h-0.5 bg-blue-500",
-      t === "top" ? s ? "top-0" : "top-[-3px]" : "bottom-0"
+      t === "top" ? r ? "top-0" : "top-[-3px]" : "bottom-0"
     )
   }
 );
-function E({ column: t }) {
-  const { groupLabel: s, fieldLabel: r } = p(t);
+function v({ column: t }) {
+  const { groupLabel: r, fieldLabel: a } = g(t);
   return /* @__PURE__ */ l("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
-    /* @__PURE__ */ e(g, {}),
+    /* @__PURE__ */ e(u, {}),
     /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5 ", children: t.icon }),
     /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
-      /* @__PURE__ */ e(
-        d,
-        {
-          text: s,
-          className: "text-text-neutral-secondary",
-          tooltipMessage: `Group: ${s}`
-        }
-      ),
+      /* @__PURE__ */ e(i, { text: r, className: "text-text-neutral-secondary" }),
       /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
-      /* @__PURE__ */ e(
-        d,
-        {
-          text: r,
-          className: "text-text-neutral-primary",
-          tooltipMessage: `Field: ${r}`
-        }
-      )
+      /* @__PURE__ */ e(i, { text: a, className: "text-text-neutral-primary" })
     ] })
   ] });
 }
-const S = ({
+const T = ({
   column: t,
-  index: s,
-  onRemove: r,
-  renderAction: i,
-  disabled: o = !1
+  index: r,
+  onRemove: a,
+  renderAction: o,
+  disabled: n = !1
 }) => {
-  const { ref: m, state: a } = v(t, s, o), { groupLabel: n, fieldLabel: c } = p(t);
+  const { ref: p, state: s } = h(t, r, n), { groupLabel: d, fieldLabel: m } = g(t);
   return /* @__PURE__ */ l(f, { children: [
     /* @__PURE__ */ l("div", { className: "relative border-b-0.5", children: [
       /* @__PURE__ */ l(
         "div",
         {
           "data-column-id": t.id,
-          ref: m,
-          className: u(
+          ref: p,
+          title: `${d} / ${m}`,
+          className: c(
             "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default transition-colors",
-            o ? "cursor-default" : "cursor-grab hover:bg-background-neutral-medium",
-            L[a.type] ?? ""
+            n ? "cursor-default" : "cursor-grab hover:bg-background-neutral-medium",
+            y[s.type] ?? ""
           ),
           children: [
-            !o && /* @__PURE__ */ e(g, {}),
+            !n && /* @__PURE__ */ e(u, {}),
             /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
             /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
-              /* @__PURE__ */ e(
-                d,
-                {
-                  text: n,
-                  className: "text-text-neutral-secondary",
-                  tooltipMessage: `Group: ${n}`
-                }
-              ),
+              /* @__PURE__ */ e(i, { text: d, className: "text-text-neutral-secondary" }),
               /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
-              /* @__PURE__ */ e(
-                d,
-                {
-                  text: c,
-                  className: "text-text-neutral-primary",
-                  tooltipMessage: `Field: ${c}`
-                }
-              )
+              /* @__PURE__ */ e(i, { text: m, className: "text-text-neutral-primary" })
             ] }),
-            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: i ? i(t, r) : /* @__PURE__ */ e(
-              y,
+            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: o ? o(t, a) : /* @__PURE__ */ e(
+              b,
               {
-                onClick: () => r == null ? void 0 : r(t.id),
+                onClick: () => a == null ? void 0 : a(t.id),
                 variant: "ghost",
                 shade: "neutral",
                 size: "medium",
-                leftIcon: /* @__PURE__ */ e(k, { className: "w-4 h-4" })
+                leftIcon: /* @__PURE__ */ e(N, { className: "w-4 h-4" })
               }
             ) })
           ]
         }
       ),
-      a.type === "is-dragging-over" && a.closestEdge && /* @__PURE__ */ e(T, { edge: a.closestEdge, isFirstElement: s === 0 })
+      s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(k, { edge: s.closestEdge, isFirstElement: r === 0 })
     ] }),
-    a.type === "preview" && N(/* @__PURE__ */ e(E, { column: t }), a.container)
+    s.type === "preview" && x(/* @__PURE__ */ e(v, { column: t }), s.container)
   ] });
 };
 export {
-  S as ColumnItem,
-  S as default
+  T as ColumnItem,
+  T as default
 };

package/dist/components/radio/z2-radio.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 declare function Z2RadioGroup({ ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function Z2RadioGroupItem({ className, children, size, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
-    size?: 'sm' | 'default' | 'lg';
-}): import("react/jsx-runtime").JSX.Element;
+declare const Z2RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: "sm" | "default" | "lg";
+} & React.RefAttributes<HTMLButtonElement>>;
 declare function Z2RadioGroupIndicator({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
 export { Z2RadioGroup, Z2RadioGroupItem, Z2RadioGroupIndicator };

package/dist/components/radio/z2-radio.js

@@ -1,55 +1,51 @@
 import { jsx as t } from "react/jsx-runtime";
+import * as l from "react";
 import * as o from "@radix-ui/react-radio-group";
 import { cn as d } from "../../lib/utils.js";
-function c({ ...e }) {
+function b({ ...e }) {
   return /* @__PURE__ */ t(o.Root, { "data-slot": "radio-group", ...e });
 }
-function n({
-  className: e,
-  children: r,
-  size: a = "default",
-  ...s
-}) {
-  return /* @__PURE__ */ t(
-    o.Item,
-    {
-      "data-slot": "radio-group-item",
-      "data-size": a,
-      className: d(
-        // Base styles
-        "aspect-square rounded-full border-2 border-stroke-solid-high bg-surface-neutral-default",
-        "transition-all duration-200 ease-in-out relative",
-        "focus:outline-none",
-        // Size variants
-        "data-[size=sm]:size-3 data-[size=default]:size-4 data-[size=lg]:size-5",
-        // State styles
-        "hover:border-stroke-solid-hover hover:bg-surface-neutral-hover",
-        "data-[state=checked]:border-surface-accent-default data-[state=checked]:bg-surface-accent-default",
-        "data-[state=checked]:hover:border-surface-accent-hover data-[state=checked]:hover:bg-surface-accent-hover",
-        // Disabled state
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "disabled:border-stroke-solid-light disabled:bg-surface-neutral-disabled",
-        "disabled:hover:border-stroke-solid-light disabled:hover:bg-surface-neutral-disabled",
-        "disabled:data-[state=checked]:border-stroke-solid-light disabled:data-[state=checked]:bg-surface-neutral-disabled",
-        e
-      ),
-      ...s,
-      children: r ?? /* @__PURE__ */ t(
-        i,
-        {
-          className: d(
-            "rounded-full bg-surface-neutral-default",
-            "transition-all duration-200 ease-in-out",
-            a === "sm" && "size-1.5",
-            a === "default" && "size-2",
-            a === "lg" && "size-2.5"
-          )
-        }
-      )
-    }
-  );
-}
-function i({
+const u = l.forwardRef(({ className: e, children: r, size: a = "default", ...s }, i) => /* @__PURE__ */ t(
+  o.Item,
+  {
+    ref: i,
+    "data-slot": "radio-group-item",
+    "data-size": a,
+    className: d(
+      // Base styles
+      "aspect-square rounded-full border-2 border-stroke-solid-high bg-surface-neutral-default",
+      "transition-all duration-200 ease-in-out relative",
+      "focus:outline-none",
+      // Size variants
+      "data-[size=sm]:size-3 data-[size=default]:size-4 data-[size=lg]:size-5",
+      // State styles
+      "hover:border-stroke-solid-hover hover:bg-surface-neutral-hover",
+      "data-[state=checked]:border-surface-accent-default data-[state=checked]:bg-surface-accent-default",
+      "data-[state=checked]:hover:border-surface-accent-hover data-[state=checked]:hover:bg-surface-accent-hover",
+      // Disabled state
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:border-stroke-solid-light disabled:bg-surface-neutral-disabled",
+      "disabled:hover:border-stroke-solid-light disabled:hover:bg-surface-neutral-disabled",
+      "disabled:data-[state=checked]:border-stroke-solid-light disabled:data-[state=checked]:bg-surface-neutral-disabled",
+      e
+    ),
+    ...s,
+    children: r ?? /* @__PURE__ */ t(
+      c,
+      {
+        className: d(
+          "rounded-full bg-surface-neutral-default",
+          "transition-all duration-200 ease-in-out",
+          a === "sm" && "size-1.5",
+          a === "default" && "size-2",
+          a === "lg" && "size-2.5"
+        )
+      }
+    )
+  }
+));
+u.displayName = "Z2RadioGroupItem";
+function c({
   className: e,
   ...r
 }) {
@@ -66,7 +62,7 @@ function i({
   );
 }
 export {
-  c as Z2RadioGroup,
-  i as Z2RadioGroupIndicator,
-  n as Z2RadioGroupItem
+  b as Z2RadioGroup,
+  c as Z2RadioGroupIndicator,
+  u as Z2RadioGroupItem
 };

package/dist/components/radio-card/radio-card.d.ts

@@ -0,0 +1,10 @@
+declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, className, itemClassName, }: {
+    primaryText: string;
+    supportText: string;
+    value: string;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+    itemClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default Z2RadioCard;

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

@@ -39,7 +39,7 @@ 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 "@radix-ui/react-radio-group";
+import "../../../radio/z2-radio.js";
 import "../../../segmented-control/item.js";
 import "@radix-ui/react-popover";
 import "../../../dynamic-table/z2-table.js";

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

@@ -44,7 +44,7 @@ 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 "@radix-ui/react-radio-group";
+import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
 import "@radix-ui/react-popover";
 import "../dynamic-table/z2-table.js";

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

@@ -39,7 +39,7 @@ 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 "@radix-ui/react-radio-group";
+import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
 import "@radix-ui/react-popover";
 import "../dynamic-table/z2-table.js";

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

@@ -4,6 +4,7 @@
   --text-neutral-primary: var(--neutral-950);
   --text-neutral-secondary: var(--neutral-600);
   --text-neutral-muted: var(--neutral-400);
+  --text-neutral-pale: var(--neutral-200);
 
   /* Text Colors - Inverted */
   --text-inverted-primary: var(--neutral-00);
@@ -41,6 +42,7 @@
   --text-neutral-primary: var(--neutral-950);
   --text-neutral-secondary: var(--neutral-500);
   --text-neutral-muted: var(--neutral-400);
+  --text-neutral-pale: var(--neutral-200);
 
   /* Text Colors - Inverted - Dark Mode */
   --text-inverted-primary: var(--neutral-00);
@@ -80,7 +82,7 @@
   --color-text-neutral-primary: var(--text-neutral-primary);
   --color-text-neutral-secondary: var(--text-neutral-secondary);
   --color-text-neutral-muted: var(--text-neutral-muted);
-
+  --color-text-neutral-pale: var(--text-neutral-pale);
   /* Text Colors - Inverted */
   --color-text-inverted-primary: var(--text-inverted-primary);
   --color-text-inverted-secondary: var(--text-inverted-secondary);