@ztwoint/z-ui 0.1.62 → 0.1.64

package/dist/components/checkbox/checkbox.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-checkbox";
-import { cn as i } from "../../lib/utils.js";
+import { cn as n } from "../../lib/utils.js";
 function s({ className: r, ...a }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ e(
     t.Root,
     {
       "data-slot": "checkbox",
-      className: i(
+      className: n(
         [
           "group border-box size-3.5 rounded-[5px] border-[2px] border-stroke-solid-high",
           "hover:border-stroke-solid-hover",
@@ -18,14 +18,14 @@ function s({ className: r, ...a }) {
           "data-[state=indeterminate]:hover:bg-accent-hover",
           "data-[state=indeterminate]:text-text-inverted-primary",
           "focus-visible:border-ring",
-          "shrink-0",
+          //   'shrink-0',
           "transition-all duration-100 ease-in-out",
-          "flex items-center justify-center"
+          "inline-flex items-center justify-center"
         ],
         r
       ),
       ...a,
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ i(
         t.Indicator,
         {
           "data-slot": "checkbox-indicator",
@@ -34,7 +34,7 @@ function s({ className: r, ...a }) {
             /* @__PURE__ */ e(
               "svg",
               {
-                className: "hidden group-data-[state=checked]:block",
+                className: "hidden group-data-[state=checked]:block size-3.5",
                 xmlns: "http://www.w3.org/2000/svg",
                 width: "14",
                 height: "14",
@@ -52,7 +52,7 @@ function s({ className: r, ...a }) {
             /* @__PURE__ */ e(
               "svg",
               {
-                className: "hidden group-data-[state=indeterminate]:block",
+                className: "hidden group-data-[state=indeterminate]:block size-3.5",
                 xmlns: "http://www.w3.org/2000/svg",
                 width: "14",
                 height: "14",
@@ -71,7 +71,7 @@ function s({ className: r, ...a }) {
         }
       )
     }
-  );
+  ) });
 }
 export {
   s as Z2Checkbox

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

@@ -1,57 +1,57 @@
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-select";
-import { ChevronDownIcon as i, ChevronUpIcon as d } from "lucide-react";
-import { cn as l } from "../../lib/utils.js";
+import * as s from "@radix-ui/react-select";
+import { ChevronDownIcon as c, ChevronUpIcon as d } from "lucide-react";
+import { cn as r } from "../../lib/utils.js";
 import u from "../assets/icons/circle-check-filled.js";
 function h({ ...e }) {
-  return /* @__PURE__ */ t(a.Root, { "data-slot": "select", ...e });
+  return /* @__PURE__ */ t(s.Root, { "data-slot": "select", ...e });
 }
 function b({
   className: e,
-  ...s
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    a.Group,
+    s.Group,
     {
       "data-slot": "select-group",
-      className: l(
+      className: r(
         // layout
         "flex w-full flex-col items-start gap-1 relative rounded-none",
         e
       ),
-      ...s
+      ...a
     }
   );
 }
 function g({
   className: e,
-  ...s
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    a.Value,
+    s.Value,
     {
       "data-slot": "select-value",
-      className: l(
+      className: r(
         // layout + text alignment
         "w-full self-center items-start text-left flex gap-1",
         e
       ),
-      ...s
+      ...a
     }
   );
 }
 function w({
   className: e,
-  size: s = "default",
-  children: r,
+  size: a = "default",
+  children: l,
   ...n
 }) {
   return /* @__PURE__ */ o(
-    a.Trigger,
+    s.Trigger,
     {
       "data-slot": "select-trigger",
-      "data-size": s,
-      className: l(
+      "data-size": a,
+      className: r(
         // base layout
         "h-7.5 flex items-center justify-between w-full self-stretch transition-all cursor-pointer",
         "gap-[6px] p-2 rounded-md",
@@ -83,23 +83,23 @@ function w({
       ),
       ...n,
       children: [
-        r,
-        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "shrink-0 w-[14px] h-[14px] aspect-square text-text-neutral-muted" }) })
+        l,
+        /* @__PURE__ */ t(s.Icon, { asChild: !0, children: /* @__PURE__ */ t(c, { className: "shrink-0 w-[14px] h-[14px] aspect-square text-text-neutral-muted" }) })
       ]
     }
   );
 }
 function v({
   className: e,
-  children: s,
-  position: r = "popper",
+  children: a,
+  position: l = "popper",
   ...n
 }) {
-  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
-    a.Content,
+  return /* @__PURE__ */ t(s.Portal, { children: /* @__PURE__ */ t(
+    s.Content,
     {
       "data-slot": "select-content",
-      className: l(
+      className: r(
         "min-w-[var(--radix-select-trigger-width)] flex flex-col items-start p-1 rounded-xl",
         // background stack (overlay on top + base)
         "bg-dropdown-surface",
@@ -108,51 +108,51 @@ function v({
         e
       ),
       sideOffset: 10,
-      position: r,
+      position: l,
       ...n,
-      children: /* @__PURE__ */ t(a.Viewport, { className: "!w-full ", children: s })
+      children: /* @__PURE__ */ t(s.Viewport, { className: "!w-full ", children: a })
     }
   ) });
 }
 function N({
   className: e,
-  ...s
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    a.Label,
+    s.Label,
     {
       "data-slot": "select-label",
-      className: l(
+      className: r(
         "flex items-center gap-1 self-stretch text-text-neutral-secondary",
         "px-2 pt-2 pb-1",
         "leading-none-medium-sm",
         e
       ),
-      ...s
+      ...a
     }
   );
 }
-function S({ className: e, children: s, leftIcon: r, label: n, ...c }) {
+function S({ className: e, children: a, leftIcon: l, label: n, ...i }) {
   return /* @__PURE__ */ o(
-    a.Item,
+    s.Item,
     {
       "data-slot": "select-item",
-      className: l(
+      className: r(
         "border-none w-full relative self-stretch flex items-center justify-between gap-2 cursor-pointer outline-none rounded-md",
-        "data-[disabled]:pointer-events-none",
+        "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-text-neutral-muted",
         "p-2",
         // hover/active surface
         "data-[state=active]:surface-neutral-focused hover:surface-neutral-focused",
         e
       ),
-      ...c,
+      ...i,
       children: [
-        /* @__PURE__ */ t(a.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis leading-none-medium-sm", children: [
-          r && /* @__PURE__ */ t("div", { className: "flex w-3.5 h-3.5 items-center justify-center", children: r }),
-          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden text-ellipsis leading-none-medium-sm", children: s || n })
+        /* @__PURE__ */ t(s.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "flex items-center justify-center gap-2 flex-1 leading-none-medium-sm", children: [
+          l && /* @__PURE__ */ t("div", { className: "flex w-3.5 h-3.5 items-center justify-center", children: l }),
+          /* @__PURE__ */ t("div", { className: "flex-1", children: a || n })
         ] }) }),
         /* @__PURE__ */ t(
-          a.ItemIndicator,
+          s.ItemIndicator,
           {
             "data-slot": "select-item-indicator",
             className: "flex w-[14px] h-[14px] items-center justify-center",
@@ -165,42 +165,42 @@ function S({ className: e, children: s, leftIcon: r, label: n, ...c }) {
 }
 function y({
   className: e,
-  ...s
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    a.Separator,
+    s.Separator,
     {
       "data-slot": "select-separator",
-      className: l("border-t-[1px] border-solid border-stroke-solid-light my-1 mx-1", e),
-      ...s
+      className: r("border-t-[1px] border-solid border-stroke-solid-light my-1 mx-1", e),
+      ...a
     }
   );
 }
 function Z({
   className: e,
-  ...s
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    a.ScrollUpButton,
+    s.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: l("flex cursor-default items-center justify-center py-1", e),
-      ...s,
+      className: r("flex cursor-default items-center justify-center py-1", e),
+      ...a,
       children: /* @__PURE__ */ t(d, { className: "size-4" })
     }
   );
 }
 function j({
   className: e,
-  ...s
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    a.ScrollDownButton,
+    s.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: l("flex cursor-default items-center justify-center py-1", e),
-      ...s,
-      children: /* @__PURE__ */ t(i, { className: "size-4" })
+      className: r("flex cursor-default items-center justify-center py-1", e),
+      ...a,
+      children: /* @__PURE__ */ t(c, { className: "size-4" })
     }
   );
 }

package/dist/components/tree-checkbox-select/TreeCheckboxSelect.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TreeCheckboxSelectProps } from './TreeCheckboxSelect.types';
+declare const TreeCheckboxSelect: React.FC<TreeCheckboxSelectProps>;
+export default TreeCheckboxSelect;

package/dist/components/tree-checkbox-select/TreeCheckboxSelect.js

@@ -0,0 +1,301 @@
+import { jsx as g, jsxs as w } from "react/jsx-runtime";
+import { useMemo as V, useCallback as d, useState as Q } from "react";
+import { Z2Checkbox as J } from "../checkbox/checkbox.js";
+import { cn as R } from "../../lib/utils.js";
+import { Input as ee } from "../input/input.js";
+import { MagnifierIcon as te } from "../assets/icons/magnifier-icon.js";
+const le = (N) => {
+  const x = /* @__PURE__ */ new Map(), k = [];
+  N.forEach((s) => {
+    const h = s.key.split(".");
+    let n = "";
+    h.forEach((o, p) => {
+      const m = p === h.length - 1;
+      if (n = n ? `${n}.${o}` : o, x.has(n)) {
+        if (m) {
+          const b = x.get(n);
+          b.label = s.label, b.disabled = s.disabled, b.hint = s.hint, b.isLeaf = !0;
+        }
+      } else {
+        const b = {
+          id: n,
+          label: m ? s.label : o,
+          // Use original label for leaf, path part for intermediate
+          children: [],
+          disabled: m ? s.disabled : void 0,
+          hint: m ? s.hint : void 0,
+          isLeaf: m
+        };
+        x.set(n, b);
+      }
+    });
+  }), x.forEach((s, h) => {
+    const n = h.split(".");
+    if (n.length === 1)
+      k.push(s);
+    else {
+      const o = n.slice(0, -1).join("."), p = x.get(o);
+      p && !p.children.find((m) => m.id === s.id) && p.children.push(s);
+    }
+  });
+  const c = (s) => s.sort((h, n) => h.label.localeCompare(n.label)).map((h) => ({
+    ...h,
+    children: h.children && h.children.length > 0 ? c(h.children) : void 0
+  }));
+  return c(k);
+}, de = ({
+  items: N,
+  defaultValue: x = [],
+  onChange: k,
+  selectionMode: c = "all-nodes",
+  defaultExpandedIds: s,
+  searchable: h = !0,
+  searchPlaceholder: n = "Search items...",
+  filterFn: o,
+  onSearchChange: p,
+  showSelectAll: m = !0,
+  selectAllLabel: b = "Select all",
+  cascade: z = !0,
+  renderLabel: $,
+  ariaLabel: K,
+  ariaLabelledby: O,
+  disabled: v = !1
+}) => {
+  const S = V(() => le(N), [N]), U = d((e) => e.map((t) => t.id), []), [f, W] = Q(new Set(x)), [I, X] = Q(
+    new Set(s || U(S))
+  ), [j, Y] = Q(""), C = d(
+    (e) => {
+      const t = [], i = (l) => {
+        l.children && l.children.forEach((r) => {
+          r.disabled || (c === "leaves-only" ? (!r.children || r.children.length === 0) && t.push(r.id) : t.push(r.id)), i(r);
+        });
+      };
+      return i(e), t;
+    },
+    [c]
+  ), L = d(
+    (e, t, i) => {
+      for (const l of e) {
+        if (l.id === t) return i || null;
+        if (l.children) {
+          const r = L(l.children, t, l.id);
+          if (r !== null) return r;
+        }
+      }
+      return null;
+    },
+    []
+  ), y = d((e, t) => e.label.toLowerCase().includes(t.toLowerCase()), []), F = d(
+    (e, t) => {
+      if (!t) return e;
+      const i = o || y, l = (u) => i(u, t) ? !0 : u.children ? u.children.some((a) => l(a)) : !1, r = (u) => u.filter((a) => l(a)).map((a) => i(a, t) ? a.children && a.children.length > 0 ? {
+        ...a,
+        children: a.children
+        // Include all children as-is
+      } : a : {
+        ...a,
+        children: a.children ? r(a.children) : void 0
+      });
+      return r(e);
+    },
+    [o, y]
+  ), Z = V(() => F(S, j), [S, j, F]), B = d(
+    (e, t = 0) => {
+      const i = [];
+      return e.forEach((l) => {
+        const r = !!(l.children && l.children.length > 0), u = I.has(l.id);
+        i.push({
+          node: l,
+          level: t,
+          isBranch: r,
+          visibleChildrenCount: u && l.children ? l.children.length : 0
+        }), u && l.children && i.push(...B(l.children, t + 1));
+      }), i;
+    },
+    [I]
+  ), E = V(() => B(Z), [Z, B]), P = d(
+    (e) => {
+      const t = f.has(e.id);
+      if (!e.children || e.children.length === 0)
+        return t ? "checked" : "unchecked";
+      const i = C(e);
+      if (i.length === 0)
+        return t ? "checked" : "unchecked";
+      const l = i.filter((r) => f.has(r));
+      return l.length === 0 ? t && c === "all-nodes" ? "checked" : "unchecked" : l.length === i.length ? "checked" : "mixed";
+    },
+    [f, C, c]
+  ), A = d(
+    (e) => {
+      W(e), k == null || k(Array.from(e));
+    },
+    [k]
+  ), G = d((e) => {
+    X(e);
+  }, []), T = d(
+    (e) => {
+      if (e.disabled || v) return;
+      const t = new Set(f), i = P(e);
+      if (z && e.children && e.children.length > 0) {
+        const l = C(e);
+        i === "checked" ? (l.forEach((r) => t.delete(r)), c === "all-nodes" && t.delete(e.id)) : (l.forEach((r) => t.add(r)), c === "all-nodes" && t.add(e.id));
+      } else
+        (c === "all-nodes" || !e.children || e.children.length === 0) && (f.has(e.id) ? t.delete(e.id) : t.add(e.id));
+      A(t);
+    },
+    [
+      f,
+      P,
+      z,
+      c,
+      C,
+      v,
+      A
+    ]
+  ), _ = d(() => {
+    const t = E.filter(
+      ({ node: r }) => !r.disabled && (c === "all-nodes" || !r.children || r.children.length === 0)
+    ).map(({ node: r }) => r.id), i = t.every((r) => f.has(r)), l = new Set(f);
+    i ? t.forEach((r) => l.delete(r)) : t.forEach((r) => l.add(r)), A(l);
+  }, [E, f, c, A]), H = d(() => {
+    const e = E.filter(
+      ({ node: l }) => !l.disabled && (c === "all-nodes" || !l.children || l.children.length === 0)
+    );
+    if (e.length === 0) return "unchecked";
+    const t = e.map(({ node: l }) => l.id), i = t.filter((l) => f.has(l)).length;
+    return i === 0 ? "unchecked" : i === t.length ? "checked" : "mixed";
+  }, [E, f, c]), q = d(
+    (e) => {
+      if (Y(e), p == null || p(e), e) {
+        const t = new Set(I), i = (l, r) => {
+          l.forEach((u) => {
+            if ((o || y)(u, e)) {
+              let D = r;
+              for (; D; )
+                t.add(D), D = L(S, D) || void 0;
+            }
+            u.children && i(u.children, u.id);
+          });
+        };
+        i(S), G(t);
+      }
+    },
+    [I, o, y, L, S, G, p]
+  ), M = d(
+    ({ node: e, level: t }) => {
+      const i = P(e), l = !0, r = !!(e.children && e.children.length > 0);
+      return /* @__PURE__ */ g(
+        "div",
+        {
+          className: R([
+            "flex items-center gap-2 py-1.5",
+            "leading-none-medium-sm",
+            "text-text-neutral-primary"
+          ]),
+          children: /* @__PURE__ */ w(
+            "div",
+            {
+              className: R(["flex items-center gap-2"]),
+              role: "treeitem",
+              "aria-level": t + 1,
+              "aria-expanded": r ? l : void 0,
+              "aria-checked": i === "mixed" ? "mixed" : i === "checked",
+              style: { paddingLeft: `${t * 23 + 6}px` },
+              "data-testid": `tree-node-${e.id}`,
+              children: [
+                /* @__PURE__ */ g(
+                  "svg",
+                  {
+                    className: "self-start ml-auto",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "9",
+                    height: "9",
+                    viewBox: "0 0 9 9",
+                    fill: "none",
+                    children: /* @__PURE__ */ g("path", { d: "M1 1V1C1 4.86599 4.13401 8 8 8V8", stroke: "#E0E0E0", strokeLinecap: "round" })
+                  }
+                ),
+                /* @__PURE__ */ g(
+                  J,
+                  {
+                    checked: i === "checked" ? !0 : i === "mixed" ? "indeterminate" : !1,
+                    onCheckedChange: () => T(e),
+                    disabled: e.disabled || v,
+                    "aria-label": `Select ${e.label}`
+                  }
+                ),
+                /* @__PURE__ */ w(
+                  "span",
+                  {
+                    className: "cursor-pointer select-none",
+                    onClick: () => !e.disabled && !v && T(e),
+                    children: [
+                      $ ? $(e) : e.label,
+                      e.hint && /* @__PURE__ */ w("span", { children: [
+                        " ",
+                        e.hint
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            },
+            e.id
+          )
+        }
+      );
+    },
+    [P, v, T, $]
+  );
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      role: "tree",
+      "aria-multiselectable": "true",
+      "aria-label": K,
+      "aria-labelledby": O,
+      children: [
+        /* @__PURE__ */ w(
+          "div",
+          {
+            className: R([
+              "flex items-center gap-2 justify-between",
+              "leading-none-medium-sm",
+              "text-text-neutral-primary"
+            ]),
+            children: [
+              m && /* @__PURE__ */ w("div", { role: "treeitem", "aria-level": 1, className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ g(
+                  J,
+                  {
+                    checked: H() === "checked" ? !0 : H() === "mixed" ? "indeterminate" : !1,
+                    onCheckedChange: _,
+                    disabled: v,
+                    "aria-label": b
+                  }
+                ),
+                /* @__PURE__ */ g("span", { children: b })
+              ] }),
+              h && /* @__PURE__ */ g(
+                ee,
+                {
+                  size: "small",
+                  type: "text",
+                  leftIcon: /* @__PURE__ */ g(te, {}),
+                  placeholder: n,
+                  value: j,
+                  onChange: (e) => q(e.target.value),
+                  disabled: v
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ g("div", { role: "group", children: E.map((e) => M(e)) })
+      ]
+    }
+  );
+};
+export {
+  de as default
+};

package/dist/components/tree-checkbox-select/TreeCheckboxSelect.types.d.ts

@@ -0,0 +1,55 @@
+export type FlatItem = {
+    key: string;
+    label: string;
+    disabled?: boolean;
+    hint?: string;
+};
+export type TreeNode = {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    disabled?: boolean;
+    hint?: string;
+    isLeaf?: boolean;
+};
+export type SelectionMode = 'leaves-only' | 'all-nodes';
+export interface TreeCheckboxSelectProps {
+    /** Flat array of items with hierarchical keys */
+    items: FlatItem[];
+    /** Initial selection */
+    defaultValue?: string[];
+    /** Change handler returns normalized selected ids */
+    onChange?: (nextIds: string[]) => void;
+    /** Control which nodes are selectable */
+    selectionMode?: SelectionMode;
+    /** Default expanded ids (default: expand all roots) */
+    defaultExpandedIds?: string[];
+    /** Search behavior */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Custom filter function; default matches label (case-insensitive) */
+    filterFn?: (node: TreeNode, query: string) => boolean;
+    onSearchChange?: (query: string) => void;
+    /** "Select all" behavior scoped to current filtered view */
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
+    /** If true, checking a parent cascades to all descendants; unchecking clears all */
+    cascade?: boolean;
+    /** Optional render override for labels (no styling) */
+    renderLabel?: (node: TreeNode) => React.ReactNode;
+    /** Accessibility */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    /** Disable component */
+    disabled?: boolean;
+    /** Test id */
+    dataTestId?: string;
+}
+export interface FlatNode {
+    node: TreeNode;
+    level: number;
+    isBranch: boolean;
+    visibleChildrenCount: number;
+    parentId?: string;
+}
+export type CheckState = 'checked' | 'unchecked' | 'mixed';

package/dist/components/tree-checkbox-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeCheckboxSelect } from './TreeCheckboxSelect';
+export type { FlatItem, TreeNode, TreeCheckboxSelectProps, SelectionMode, } from './TreeCheckboxSelect.types';