@pibit.ai/cure-design-system 0.6.22 → 0.6.24

package/dist/patterns/tree-view/tree-view.js

@@ -1,168 +1,203 @@
-import { jsxs as A, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { useState as $ } from "react";
-import { SearchSm as T, ChevronDown as K, ChevronRight as V } from "@untitledui/icons";
-import { cn as k } from "../../utils/cn.js";
-import { Input as _ } from "../../primitives/input/input.js";
-const N = 10;
-function C(e, l, s = "") {
+import { jsx as s, jsxs as N, Fragment as D } from "react/jsx-runtime";
+import { useMemo as P, useState as V, useRef as Q, useEffect as U } from "react";
+import { SearchSm as z, ChevronDown as B, ChevronRight as F } from "@untitledui/icons";
+import { cn as H } from "../../utils/cn.js";
+import { IndentedTree as X } from "./indented-tree.js";
+import { Input as Z } from "../../primitives/input/input.js";
+const T = 10;
+function K(e, t) {
+  const r = (i, [n, ...a]) => i.map((l, c) => c !== n ? l : a.length ? { ...l, children: r(l.children, a) } : { ...l, isOpen: !l.isOpen });
+  return r(e, t.split("-").map(Number));
+}
+function E(e, t, r = "") {
   const {
-    labelKey: m,
+    labelKey: i,
     childrenKey: n,
-    dataKey: f = "metadata",
-    typeKey: x = "type",
-    idKey: h,
-    maxDepth: i,
-    defaultExpanded: g
-  } = l, v = s ? s.split(".").length : 0;
-  return i != null && v >= i ? [] : (Array.isArray(e) ? e : Object.values(e)).map((t, w) => {
-    const b = h != null ? t[h] : void 0, a = String(b ?? w), d = s ? `${s}.${a}` : a, c = t[n], o = Array.isArray(c) ? c : c != null ? Object.values(c) : [];
+    dataKey: a = "metadata",
+    typeKey: l = "type",
+    idKey: c,
+    maxDepth: o,
+    defaultExpanded: u,
+    expandedIds: f
+  } = t, y = r ? r.split(".").length : 0;
+  return o != null && y >= o ? [] : (Array.isArray(e) ? e : Object.values(e)).map((h, S) => {
+    const b = c != null ? h[c] : void 0, A = String(b ?? S), x = r ? `${r}.${A}` : A, d = h[n], g = Array.isArray(d) ? d : d != null ? Object.values(d) : [];
     return {
-      id: d,
-      label: t[m] ?? "Untitled",
-      type: t[x] ?? "Untitled",
-      isOpen: t.isOpen ?? g ?? !1,
-      children: o.length > 0 ? C(o, l, d) : [],
-      [f]: t
+      id: x,
+      label: h[i] ?? "Untitled",
+      type: h[l] ?? "Untitled",
+      isOpen: h.isOpen ?? (f ? f.has(x) : u) ?? !1,
+      children: g.length > 0 ? E(g, t, x) : [],
+      [a]: h
     };
   });
 }
-function O(e, l) {
-  const s = e.label ?? "", m = Array.isArray(e.children) ? e.children : [];
-  return s.toLowerCase().includes(l.toLowerCase()) ? !0 : m.some((n) => O(n, l));
+function I(e, t) {
+  const r = e.label ?? "", i = Array.isArray(e.children) ? e.children : [];
+  return r.toLowerCase().includes(t.toLowerCase()) ? !0 : i.some((n) => I(n, t));
 }
-const D = () => /* @__PURE__ */ r("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ r("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ r(
+const G = () => /* @__PURE__ */ s("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ s("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ s(
   "div",
   {
     className: "absolute inset-y-0 bg-(--color-border-secondary)",
     style: { left: "-0.5px", width: 1 }
   }
-) }) }), I = ({
+) }) }), J = ({
   data: e,
-  config: l,
-  CustomNode: s,
-  onNodeClick: m,
-  selectedNodeId: n,
-  showSearch: f = !1,
-  searchPlaceholder: x = "Search...",
-  searchClassName: h,
-  searchInputClassName: i,
-  defaultExpanded: g
+  config: t,
+  nodes: r,
+  CustomNode: i,
+  onNodeClick: n,
+  selectedNodeId: a,
+  showSearch: l = !1,
+  searchPlaceholder: c = "Search...",
+  searchClassName: o,
+  searchInputClassName: u,
+  defaultExpanded: f,
+  defaultExpandedIds: y,
+  syncWithData: p = !1,
+  variant: h = "nested",
+  isLeafClickable: S,
+  keyboardNavigation: b = !1,
+  canSelectNode: A,
+  "aria-label": x
 }) => {
-  const [v, y] = $(
-    () => C(e, {
-      ...l,
-      defaultExpanded: g ?? l.defaultExpanded
-    })
-  ), [t, w] = $("");
-  function b(a, d) {
-    const c = structuredClone(v), o = d.split("-"), p = Number(o[0]);
-    o.shift();
-    let u = c[p];
-    o.length > 0 && (u = o.reduce((L, j) => L.children[Number(j)], c[p])), u.isOpen = !u.isOpen, y(c);
+  const d = P(
+    () => y == null ? void 0 : new Set(y),
+    [y]
+  ), g = () => r ?? E(e, {
+    ...t,
+    defaultExpanded: f ?? t.defaultExpanded,
+    expandedIds: d ?? t.expandedIds
+  }), [$, m] = V(g), [w, _] = V(""), j = Q(!1);
+  U(() => {
+    p && (j.current && m(g()), j.current = !0);
+  }, [p, e, t, r, d, f]);
+  function L(v, O) {
+    m((M) => K(M, O));
   }
-  return /* @__PURE__ */ A("div", { className: "min-w-max", children: [
-    f && /* @__PURE__ */ r("div", { className: k("mb-2", h), children: /* @__PURE__ */ r(
-      _,
+  return h === "indented" ? /* @__PURE__ */ s(
+    X,
+    {
+      tree: $,
+      onToggle: (v) => m((O) => K(O, v)),
+      CustomNode: i,
+      onNodeClick: n,
+      selectedNodeId: a,
+      keyboardNavigation: b,
+      canSelectNode: A,
+      "aria-label": x
+    }
+  ) : /* @__PURE__ */ N("div", { className: "min-w-max", children: [
+    l && /* @__PURE__ */ s("div", { className: H("mb-2", o), children: /* @__PURE__ */ s(
+      Z,
       {
         type: "search",
-        placeholder: x,
-        value: t,
-        onChange: (a) => w(a),
+        placeholder: c,
+        value: w,
+        onChange: (v) => _(v),
         size: "sm",
-        className: i,
-        icon: T
+        className: u,
+        icon: z
       }
     ) }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col", children: v.map((a, d) => /* @__PURE__ */ r(
-      S,
+    /* @__PURE__ */ s("div", { className: "flex flex-col", children: $.map((v, O) => /* @__PURE__ */ s(
+      R,
       {
-        node: a,
-        parentId: String(d),
+        node: v,
+        parentId: String(O),
         depth: 0,
-        handleToggle: b,
-        onNodeClick: m,
-        selectedNodeId: n,
-        CustomNode: s,
-        query: t
+        handleToggle: L,
+        onNodeClick: n,
+        selectedNodeId: a,
+        CustomNode: i,
+        query: w,
+        isLeafClickable: S
       },
-      a.id || d
+      v.id || O
     )) })
   ] });
 };
-I.displayName = "TreeView";
-const S = ({
+J.displayName = "TreeView";
+const R = ({
   node: e,
-  parentId: l,
-  depth: s = 0,
-  handleToggle: m,
+  parentId: t,
+  depth: r = 0,
+  handleToggle: i,
   onNodeClick: n,
-  selectedNodeId: f,
-  CustomNode: x,
-  query: h
+  selectedNodeId: a,
+  CustomNode: l,
+  query: c,
+  isLeafClickable: o
 }) => {
-  const i = h.length > 0, g = Array.isArray(e.children) ? e.children : [], v = e.label ?? "";
-  if (i && !O(e, h))
+  const u = c.length > 0, f = Array.isArray(e.children) ? e.children : [], y = e.label ?? "";
+  if (u && !I(e, c))
     return null;
-  const y = g.length > 0, t = f != null && e.id === f, w = y && (i || (e.isOpen ?? !1)), b = (p) => {
-    p.stopPropagation(), y && (i || m(e, l), n == null || n(e));
-  }, a = s === 0 ? "pl-[6px]" : "", d = s === 0 ? "pl-[2px]" : "pl-[8px]", c = i && v.toLowerCase().includes(h.toLowerCase()), o = i ? !0 : e.isOpen;
-  return /* @__PURE__ */ A("div", { className: "relative", children: [
-    /* @__PURE__ */ A(
+  const p = f.length > 0, h = a != null && e.id === a, S = p && (u || (e.isOpen ?? !1)), b = !p && !!(o != null && o(e)), A = (m) => {
+    if (m.stopPropagation(), b) {
+      n == null || n(e);
+      return;
+    }
+    p && (u || i(e, t), n == null || n(e));
+  }, x = r === 0 ? "pl-[6px]" : "", d = r === 0 ? "pl-[2px]" : "pl-[8px]", g = u && y.toLowerCase().includes(c.toLowerCase()), $ = u ? !0 : e.isOpen;
+  return /* @__PURE__ */ N("div", { className: "relative", children: [
+    /* @__PURE__ */ N(
       "div",
       {
-        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${a} ${c ? "bg-(--color-bg-secondary)" : ""} ${y ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""}`,
-        onClick: b,
+        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${x} ${g ? "bg-(--color-bg-secondary)" : ""} ${p ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""} ${b ? "cursor-pointer" : ""}`,
+        onClick: A,
         children: [
-          s > 0 && Array.from({ length: s }).map((p, u) => /* @__PURE__ */ r(D, {}, u)),
-          y ? /* @__PURE__ */ r(
+          r > 0 && Array.from({ length: r }).map((m, w) => /* @__PURE__ */ s(G, {}, w)),
+          p ? /* @__PURE__ */ s(
             "div",
             {
-              className: `flex flex-col h-full items-center shrink-0 ${d} ${o ? "justify-end" : "justify-center"}`,
-              children: o ? /* @__PURE__ */ A(E, { children: [
-                /* @__PURE__ */ r(
-                  K,
+              className: `flex flex-col h-full items-center shrink-0 ${d} ${$ ? "justify-end" : "justify-center"}`,
+              children: $ ? /* @__PURE__ */ N(D, { children: [
+                /* @__PURE__ */ s(
+                  B,
                   {
                     className: "shrink-0 text-(--color-gray-400)",
-                    style: { width: N, height: N }
+                    style: { width: T, height: T }
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ r(
+                /* @__PURE__ */ s("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ s(
                   "div",
                   {
                     className: "absolute inset-y-0 bg-(--color-border-secondary)",
                     style: { left: "-0.5px", width: 1 }
                   }
                 ) })
-              ] }) : /* @__PURE__ */ r(
-                V,
+              ] }) : /* @__PURE__ */ s(
+                F,
                 {
                   className: "shrink-0 text-(--color-gray-400)",
-                  style: { width: N, height: N }
+                  style: { width: T, height: T }
                 }
               )
             }
-          ) : s > 0 ? /* @__PURE__ */ r("div", { className: "h-full w-[6px] shrink-0" }) : null,
-          /* @__PURE__ */ r("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ r(x, { node: e, isSelected: t }) })
+          ) : r > 0 ? /* @__PURE__ */ s("div", { className: "h-full w-[6px] shrink-0" }) : null,
+          /* @__PURE__ */ s("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ s(l, { node: e, isSelected: h }) })
         ]
       }
     ),
-    w && /* @__PURE__ */ r("div", { className: "relative", children: g.map((p, u) => /* @__PURE__ */ r(
-      S,
+    S && /* @__PURE__ */ s("div", { className: "relative", children: f.map((m, w) => /* @__PURE__ */ s(
+      R,
       {
-        node: p,
-        parentId: `${l}-${u}`,
-        depth: s + 1,
-        handleToggle: m,
+        node: m,
+        parentId: `${t}-${w}`,
+        depth: r + 1,
+        handleToggle: i,
         onNodeClick: n,
-        selectedNodeId: f,
-        CustomNode: x,
-        query: h
+        selectedNodeId: a,
+        CustomNode: l,
+        query: c,
+        isLeafClickable: o
       },
-      p.id || `${l}-${u}`
+      m.id || `${t}-${w}`
     )) })
   ] });
 };
 export {
-  I as TreeView,
-  C as buildTreeViewNodes
+  J as TreeView,
+  E as buildTreeViewNodes
 };

package/dist/primitives/checkbox/checkbox.js

@@ -113,7 +113,7 @@ const H = ({
       root: "gap-2",
       textWrapper: c,
       label: e("text-xs font-medium", o),
-      hint: "text-[11px]"
+      hint: "text-2xs"
     },
     md: {
       root: "gap-3",

package/dist/primitives/input/hint-text.js

@@ -1,8 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
-import { cx as m } from "../../utils/cn.js";
-import { Text as s } from "react-aria-components";
+import { cx as s } from "../../utils/cn.js";
+import { Text as m } from "react-aria-components";
 const i = {
-  sm: "text-[11px]",
+  sm: "text-2xs",
   md: "text-xs",
   lg: "text-xs"
 }, p = ({
@@ -11,11 +11,11 @@ const i = {
   className: e,
   ...x
 }) => /* @__PURE__ */ o(
-  s,
+  m,
   {
     ...x,
     slot: t ? "errorMessage" : "description",
-    className: m(
+    className: s(
       "text-tertiary",
       i[r],
       // Invalid state

package/dist/primitives/select/multi-select.js

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as M, Fragment as me } from "react/jsx-runtime";
 import { useId as ge, useCallback as L, useMemo as B, useRef as G, useState as ue, createContext as we, useContext as H, useLayoutEffect as ye } from "react";
-import { useFilter as be, useInteractOutside as xe, FocusScope as ve, useFocusManager as De } from "react-aria";
+import { useFilter as be, useInteractOutside as ve, FocusScope as xe, useFocusManager as De } from "react-aria";
 import { ChevronDown as Ne, SearchMd as ke } from "@untitledui/icons";
 import { ComboBox as Te, ListBox as Se, ComboBoxStateContext as Z, ButtonContext as ee, Group as Re, Input as Fe } from "react-aria-components";
 import { useListData as Ae } from "../../node_modules/react-stately/dist/private/data/useListData.js";
@@ -44,7 +44,7 @@ function $e({
   popoverRef: y
 }) {
   const d = H(Z);
-  return xe({
+  return ve({
     ref: y,
     isDisabled: !(d != null && d.isOpen),
     onInteractOutside: (m) => {
@@ -169,7 +169,7 @@ const Ue = ({
   ...f
 }) => {
   var ae;
-  const _ = ge(), { contains: V } = be({ sensitivity: "base" }), E = (ae = m == null ? void 0 : m.items) != null && ae.length ? m.items.map((n) => n.id) : [], v = L(
+  const _ = ge(), { contains: V } = be({ sensitivity: "base" }), E = (ae = m == null ? void 0 : m.items) != null && ae.length ? m.items.map((n) => n.id) : [], x = L(
     (n) => E.some((i) => String(i) === String(n)),
     [E]
   ), X = L(
@@ -179,9 +179,9 @@ const Ue = ({
         i,
         V
       );
-      return (R || !v(n.id)) && A;
+      return (R || !x(n.id)) && A;
     },
-    [V, v, R]
+    [V, x, R]
   ), w = Ae({
     initialItems: c,
     filter: X
@@ -190,34 +190,34 @@ const Ue = ({
   ) : c : [], [c, z, w.filterText, V]), P = B(() => {
     if (D.length === 0) return "unselected";
     const n = D.filter(
-      (i) => v(i.id)
+      (i) => x(i.id)
     ).length;
     return n === 0 ? "unselected" : n === D.length ? "selected" : "indeterminate";
-  }, [D, v]), t = G(!1), N = L(() => {
+  }, [D, x]), t = G(!1), N = L(() => {
     t.current = !0, setTimeout(() => {
       t.current = !1;
     }, 0);
   }, []), J = L(() => {
     N();
-    const n = P !== "selected", i = D.map((x) => x.id), A = new Set(i.map(String)), K = n ? [.../* @__PURE__ */ new Set([...E, ...i])] : E.filter((x) => !A.has(String(x))), W = D.filter((x) => !v(x.id)), U = D.filter((x) => v(x.id)).map((x) => x.id);
+    const n = P !== "selected", i = D.map((v) => v.id), A = new Set(i.map(String)), K = n ? [.../* @__PURE__ */ new Set([...E, ...i])] : E.filter((v) => !A.has(String(v))), W = D.filter((v) => !x(v.id)), U = D.filter((v) => x(v.id)).map((v) => v.id);
     if (n && W.length > 0 ? m.append(...W) : !n && U.length > 0 && m.remove(...U), T) {
       T(K);
       return;
     }
     if (n) {
-      for (const x of D)
-        v(x.id) || b == null || b(x.id);
+      for (const v of D)
+        x(v.id) || b == null || b(v.id);
       return;
     }
-    for (const x of D)
-      v(x.id) && (l == null || l(x.id));
+    for (const v of D)
+      x(v.id) && (l == null || l(v.id));
   }, [
     N,
     P,
     D,
     E,
     m,
-    v,
+    x,
     T,
     b,
     l
@@ -238,7 +238,7 @@ const Ue = ({
     }, 0);
     const A = w.getItem(n) ?? (c == null ? void 0 : c.find((K) => String(K.id) === String(n)));
     if (A) {
-      if (v(n)) {
+      if (x(n)) {
         const K = E.find((W) => String(W) === i) ?? n;
         m.remove(K), l == null || l(K);
       } else
@@ -313,7 +313,7 @@ const Ue = ({
                 className: k(
                   "text-tertiary",
                   ce[d],
-                  "-mt-0.5 leading-[18px]"
+                  "-mt-0.5 leading-4.5"
                 ),
                 children: j
               }
@@ -510,7 +510,7 @@ const Ue = ({
         e == null || e.close();
         break;
     }
-  }, v = ((z = (w = a == null ? void 0 : a.selectedItems) == null ? void 0 : w.items) == null ? void 0 : z.length) === 0;
+  }, x = ((z = (w = a == null ? void 0 : a.selectedItems) == null ? void 0 : w.items) == null ? void 0 : z.length) === 0;
   return /* @__PURE__ */ M("div", { className: "relative min-w-0 w-full flex-1", children: [
     /* @__PURE__ */ M(
       "div",
@@ -525,7 +525,7 @@ const Ue = ({
           ) : "flex-nowrap items-center overflow-x-auto overflow-y-hidden scrollbar-hide"
         ),
         children: [
-          /* @__PURE__ */ s(ee.Provider, { value: null, children: !v && ((P = (D = a == null ? void 0 : a.selectedItems) == null ? void 0 : D.items) == null ? void 0 : P.map((t) => /* @__PURE__ */ M(
+          /* @__PURE__ */ s(ee.Provider, { value: null, children: !x && ((P = (D = a == null ? void 0 : a.selectedItems) == null ? void 0 : D.items) == null ? void 0 : P.map((t) => /* @__PURE__ */ M(
             "span",
             {
               "data-multiselect-chip": !0,
@@ -575,7 +575,7 @@ const Ue = ({
               className: k(
                 "relative flex flex-1 flex-row items-center",
                 o ? "min-w-[20%]" : "min-w-0",
-                !v && "ml-0.5",
+                !x && "ml-0.5",
                 y && "min-w-[30%]"
               ),
               children: [
@@ -583,7 +583,7 @@ const Ue = ({
                   Fe,
                   {
                     ref: T,
-                    placeholder: v ? m : void 0,
+                    placeholder: x ? m : void 0,
                     onKeyDown: F,
                     onMouseDown: _,
                     onFocus: V,
@@ -692,7 +692,7 @@ const Ue = ({
       },
       children: ({ isDisabled: u, isFocusWithin: h }) => /* @__PURE__ */ M(me, { children: [
         l && /* @__PURE__ */ s(l, { className: "pointer-events-none size-5 shrink-0 text-fg-quaternary" }),
-        /* @__PURE__ */ s(ve, { contain: !1, autoFocus: !1, restoreFocus: !1, children: /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ s(
+        /* @__PURE__ */ s(xe, { contain: !1, autoFocus: !1, restoreFocus: !1, children: /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ s(
           Je,
           {
             inputRef: g,