@pibit.ai/cure-design-system 0.6.26 → 0.6.28

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

@@ -1,44 +1,45 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import { useRef as I, useMemo as $ } from "react";
-import { ChevronRight as P } from "@untitledui/icons";
-import { motion as A } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { AnimatePresence as D } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
-const _ = ({
-  tree: s,
-  onToggle: p,
-  CustomNode: x,
+import { useRef as S, useState as j, useMemo as C, useId as M } from "react";
+import { ChevronRight as _ } from "@untitledui/icons";
+import { motion as D } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { AnimatePresence as B } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+const q = ({
+  tree: r,
+  onToggle: d,
+  CustomNode: v,
   onNodeClick: c,
-  selectedNodeId: v,
-  keyboardNavigation: e,
-  canSelectNode: d,
-  "aria-label": m
+  selectedNodeId: w,
+  keyboardNavigation: t,
+  canSelectNode: h,
+  "aria-label": f
 }) => {
-  const f = I(null), l = $(() => {
-    const t = [];
-    function i(a, r = "", h) {
-      a.forEach((u, g) => {
-        const O = r ? `${r}-${g}` : String(g);
-        t.push({ node: u, path: O, parentId: h }), u.isOpen && i(u.children, O, u.id);
+  var O;
+  const m = S(null), [u, $] = j(null), l = C(() => {
+    const i = [];
+    function e(s, o = "", A) {
+      s.forEach((p, E) => {
+        const P = o ? `${o}-${E}` : String(E);
+        i.push({ node: p, path: P, parentId: A }), p.isOpen && e(p.children, P, p.id);
       });
     }
-    return i(s), t;
-  }, [s]);
-  function o(t) {
-    var a;
-    const i = (a = f.current) == null ? void 0 : a.querySelector(
-      `[data-tree-node-id="${CSS.escape(t)}"]`
+    return e(r), i;
+  }, [r]);
+  function a(i) {
+    var s;
+    const e = (s = m.current) == null ? void 0 : s.querySelector(
+      `[data-tree-node-id="${CSS.escape(i)}"]`
     );
-    i == null || i.focus({ preventScroll: !0 }), i == null || i.scrollIntoView({ block: "nearest", behavior: "instant" });
+    e == null || e.focus({ preventScroll: !0 }), e == null || e.scrollIntoView({ block: "nearest", behavior: "instant" });
   }
-  function w(t) {
-    if (!e || t.nativeEvent.isComposing) return;
-    const i = t.target.closest(
+  function x(i) {
+    if (!t || i.nativeEvent.isComposing) return;
+    const e = i.target.closest(
       "[data-tree-node-id]"
-    ), a = l.findIndex(
-      ({ node: g }) => g.id === (i == null ? void 0 : i.dataset.treeNodeId)
+    ), s = l.findIndex(
+      ({ node: E }) => E.id === (e == null ? void 0 : e.dataset.treeNodeId)
     );
-    if (a < 0) return;
-    const { node: r, path: h, parentId: u } = l[a];
+    if (s < 0) return;
+    const { node: o, path: A, parentId: p } = l[s];
     if ([
       "ArrowDown",
       "ArrowUp",
@@ -48,111 +49,119 @@ const _ = ({
       "End",
       "Enter",
       " "
-    ].includes(t.key) && !((t.key === "Enter" || t.key === " ") && t.target.closest("button")))
-      switch (t.preventDefault(), t.stopPropagation(), t.key) {
+    ].includes(i.key) && !((i.key === "Enter" || i.key === " ") && i.target.closest("button")))
+      switch (i.preventDefault(), i.stopPropagation(), i.key) {
         case "ArrowDown":
-          o(l[(a + 1) % l.length].node.id);
+          a(l[Math.min(s + 1, l.length - 1)].node.id);
           break;
         case "ArrowUp":
-          o(
-            l[(a - 1 + l.length) % l.length].node.id
-          );
+          a(l[Math.max(s - 1, 0)].node.id);
           break;
         case "Home":
-          o(l[0].node.id);
+          a(l[0].node.id);
           break;
         case "End":
-          o(l[l.length - 1].node.id);
+          a(l[l.length - 1].node.id);
           break;
         case "ArrowRight":
-          r.children.length && !r.isOpen ? p(h) : r.children.length && o(r.children[0].id);
+          o.children.length && !o.isOpen ? d(A) : o.children.length && a(o.children[0].id);
           break;
         case "ArrowLeft":
-          r.children.length && r.isOpen ? p(h) : u && o(u);
+          o.children.length && o.isOpen ? d(A) : p && a(p);
           break;
         default:
-          (!d || d(r)) && (c == null || c(r));
+          (!h || h(o)) && (c == null || c(o));
       }
   }
+  const I = u && l.some(({ node: i }) => i.id === u) ? u : (O = l[0]) == null ? void 0 : O.node.id;
+  function g(i) {
+    var s;
+    const e = (s = i.target.closest("[data-tree-node-id]")) == null ? void 0 : s.dataset.treeNodeId;
+    e && $(e);
+  }
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: f,
-      role: e ? "tree" : void 0,
-      "aria-label": e ? m : void 0,
-      onKeyDown: w,
-      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: s.map((t, i) => /* @__PURE__ */ n(
-        E,
+      ref: m,
+      role: t ? "tree" : void 0,
+      "aria-label": t ? f : void 0,
+      onKeyDown: x,
+      onFocus: t ? g : void 0,
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: r.map((i, e) => /* @__PURE__ */ n(
+        R,
         {
-          node: t,
-          path: String(i),
-          onToggle: p,
+          node: i,
+          path: String(e),
+          onToggle: d,
           onNodeClick: c,
-          CustomNode: x,
-          keyboardNavigation: e,
-          selectedNodeId: v,
-          canSelectNode: d,
+          CustomNode: v,
+          keyboardNavigation: t,
+          selectedNodeId: w,
+          canSelectNode: h,
+          tabStopId: I,
           level: 1,
-          position: i + 1,
-          siblingCount: s.length
+          position: e + 1,
+          siblingCount: r.length
         },
-        t.id || i
+        i.id || e
       )) })
     }
   );
-}, E = ({
-  node: s,
-  path: p,
-  onToggle: x,
+}, R = ({
+  node: r,
+  path: d,
+  onToggle: v,
   onNodeClick: c,
-  CustomNode: v,
-  keyboardNavigation: e,
-  selectedNodeId: d,
-  canSelectNode: m,
-  level: f,
-  position: l,
-  siblingCount: o
+  CustomNode: w,
+  keyboardNavigation: t,
+  selectedNodeId: h,
+  canSelectNode: f,
+  tabStopId: m,
+  level: u,
+  position: $,
+  siblingCount: l
 }) => {
-  const w = s.children.length > 0, t = d != null && s.id === d, i = (r) => {
-    r.stopPropagation(), x(p);
-  }, a = (r) => {
-    r.stopPropagation(), c == null || c(s);
+  const a = r.children.length > 0, x = M(), I = t && a && !!r.isOpen, g = h != null && r.id === h, O = (e) => {
+    e.stopPropagation(), v(d);
+  }, i = (e) => {
+    e.stopPropagation(), c == null || c(r);
   };
   return /* @__PURE__ */ b("div", { className: "relative", children: [
     /* @__PURE__ */ b(
       "div",
       {
-        className: `flex items-center gap-2 py-0.5 ${e ? "rounded-md outline-none hover:bg-primary_hover focus:bg-primary_hover" : ""}`,
-        "data-tree-node-id": s.id,
-        role: e ? "treeitem" : void 0,
-        tabIndex: e ? f === 1 && l === 1 ? 0 : -1 : void 0,
-        "aria-label": e ? s.label : void 0,
-        "aria-level": e ? f : void 0,
-        "aria-posinset": e ? l : void 0,
-        "aria-setsize": e ? o : void 0,
-        "aria-expanded": e && w ? !!s.isOpen : void 0,
-        "aria-selected": e && (!m || m(s)) ? t : void 0,
+        className: `flex items-center gap-2 py-0.5 ${t ? "rounded-md outline-none hover:bg-primary_hover focus:bg-primary_hover" : ""}`,
+        "data-tree-node-id": r.id,
+        role: t ? "treeitem" : void 0,
+        tabIndex: t ? r.id === m ? 0 : -1 : void 0,
+        "aria-owns": I ? x : void 0,
+        "aria-label": t ? r.label : void 0,
+        "aria-level": t ? u : void 0,
+        "aria-posinset": t ? $ : void 0,
+        "aria-setsize": t ? l : void 0,
+        "aria-expanded": t && a ? !!r.isOpen : void 0,
+        "aria-selected": t && (!f || f(r)) ? g : void 0,
         children: [
           /* @__PURE__ */ n(
             "div",
             {
               className: "w-4 h-4 flex-shrink-0",
-              onClick: (r) => r.stopPropagation(),
-              children: w && /* @__PURE__ */ n(
+              onClick: (e) => e.stopPropagation(),
+              children: a && /* @__PURE__ */ n(
                 "button",
                 {
                   type: "button",
-                  tabIndex: e ? -1 : void 0,
-                  onClick: i,
+                  tabIndex: t ? -1 : void 0,
+                  onClick: O,
                   className: "cursor-pointer hover:bg-secondary_subtle rounded p-0.5 transition-colors flex items-center justify-center",
-                  "aria-label": s.isOpen ? "Collapse" : "Expand",
+                  "aria-label": r.isOpen ? "Collapse" : "Expand",
                   children: /* @__PURE__ */ n(
-                    A.div,
+                    D.div,
                     {
                       initial: !1,
-                      animate: { rotate: s.isOpen ? 90 : 0 },
+                      animate: { rotate: r.isOpen ? 90 : 0 },
                       transition: { duration: 0.2, ease: "easeOut" },
-                      children: /* @__PURE__ */ n(P, { className: "w-4 h-4 text-[var(--color-gray-400)]" })
+                      children: /* @__PURE__ */ n(_, { className: "w-4 h-4 text-[var(--color-gray-400)]" })
                     }
                   )
                 }
@@ -162,28 +171,28 @@ const _ = ({
           /* @__PURE__ */ n(
             "div",
             {
-              onClick: a,
+              onClick: i,
               className: "flex-1 min-w-0 cursor-pointer",
-              children: /* @__PURE__ */ n(v, { node: s, isSelected: t })
+              children: /* @__PURE__ */ n(w, { node: r, isSelected: g })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ n(D, { initial: !1, children: w && s.isOpen && /* @__PURE__ */ n(
-      A.div,
+    /* @__PURE__ */ n(B, { initial: !1, children: a && r.isOpen && /* @__PURE__ */ n(
+      D.div,
       {
-        initial: e ? !1 : { opacity: 0, height: 0 },
+        initial: t ? !1 : { opacity: 0, height: 0 },
         animate: {
           opacity: 1,
           height: "auto",
           transition: {
             height: {
-              duration: e ? 0 : 0.1,
+              duration: t ? 0 : 0.1,
               ease: "easeOut"
             },
             opacity: {
-              duration: e ? 0 : 0.1,
+              duration: t ? 0 : 0.1,
               ease: "easeOut"
             }
           }
@@ -193,11 +202,11 @@ const _ = ({
           height: 0,
           transition: {
             height: {
-              duration: e ? 0 : 0.3,
+              duration: t ? 0 : 0.3,
               ease: "easeIn"
             },
             opacity: {
-              duration: e ? 0 : 0.2,
+              duration: t ? 0 : 0.2,
               ease: "easeIn"
             }
           }
@@ -205,28 +214,37 @@ const _ = ({
         style: { overflow: "clip" },
         children: /* @__PURE__ */ b("div", { className: "ml-6 relative", children: [
           /* @__PURE__ */ n("div", { className: "absolute left-[-17px] top-[-6px] bottom-0 w-px bg-[var(--color-gray-200)]" }),
-          /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: s.children.map((r, h) => /* @__PURE__ */ n(
-            E,
+          /* @__PURE__ */ n(
+            "div",
             {
-              node: r,
-              path: `${p}-${h}`,
-              onToggle: x,
-              onNodeClick: c,
-              CustomNode: v,
-              keyboardNavigation: e,
-              selectedNodeId: d,
-              canSelectNode: m,
-              level: f + 1,
-              position: h + 1,
-              siblingCount: s.children.length
-            },
-            r.id || `${p}-${h}`
-          )) })
+              id: I ? x : void 0,
+              role: t ? "group" : void 0,
+              className: "flex flex-col gap-2",
+              children: r.children.map((e, s) => /* @__PURE__ */ n(
+                R,
+                {
+                  node: e,
+                  path: `${d}-${s}`,
+                  onToggle: v,
+                  onNodeClick: c,
+                  CustomNode: w,
+                  keyboardNavigation: t,
+                  selectedNodeId: h,
+                  canSelectNode: f,
+                  tabStopId: m,
+                  level: u + 1,
+                  position: s + 1,
+                  siblingCount: r.children.length
+                },
+                e.id || `${d}-${s}`
+              ))
+            }
+          )
         ] })
       }
     ) })
   ] });
 };
 export {
-  _ as IndentedTree
+  q as IndentedTree
 };

package/dist/primitives/featured-icon/featured-icon.d.ts

@@ -7,7 +7,8 @@ export interface FeaturedIconProps {
         className?: string;
     }> | ReactNode;
     size?: "sm" | "md" | "lg" | "xl";
-    color: "brand" | "gray" | "success" | "warning" | "error";
+    /** @default "brand" */
+    color?: "brand" | "gray" | "success" | "warning" | "error";
     theme?: "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue";
 }
 export declare const FeaturedIcon: (props: FeaturedIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/featured-icon/featured-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"featured-icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/featured-icon/featured-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AA6HhD,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;CAC9E;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAwBpD,CAAC"}
+{"version":3,"file":"featured-icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/featured-icon/featured-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AA6HhD,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC3D,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;CAC9E;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAwBpD,CAAC"}