@pibit.ai/cure-design-system 0.6.19 → 0.6.20

package/dist/patterns/breadcrumbs/breadcrumbs.js

@@ -1,41 +1,39 @@
 import { jsx as t } from "react/jsx-runtime";
-import b, { useState as h } from "react";
-import { Breadcrumbs as g } from "react-aria-components";
-import { cx as o } from "../../utils/cn.js";
-import { BreadcrumbItem as n } from "./breadcrumb-item.js";
-import { BreadcrumbsContext as x } from "./context.js";
-const B = {
+import h, { useState as g } from "react";
+import { Breadcrumbs as x } from "react-aria-components";
+import { cx as n } from "../../utils/cn.js";
+import { BreadcrumbItem as l } from "./breadcrumb-item.js";
+import { BreadcrumbsContext as B } from "./context.js";
+const v = {
   text: "gap-0.5 md:gap-0.5",
   "text-line": "pl-2 gap-1.25 md:gap-1.25 py-2 after:pointer-events-none after:absolute after:inset-0 after:border-b after:border-t after:border-secondary",
   button: "gap-0.5 md:gap-0.5"
-}, v = ({
-  children: l,
+}, C = ({
+  children: c,
   divider: a = "slash",
   type: s = "text",
-  className: c,
+  className: i,
   maxVisibleItems: r = 4
 }) => {
-  const [i, m] = h(!1), d = (() => {
-    const e = b.Children.toArray(l);
-    if (!r || e.length <= r || i)
+  const [m, d] = g(!1), p = (() => {
+    const e = h.Children.toArray(c);
+    if (!r || e.length <= r || m)
       return e;
-    const p = e.slice(0, Math.ceil(r / 2)), f = e.slice(
-      -Math.floor((r - 1) / 2)
-    ), u = /* @__PURE__ */ t(
-      n,
+    const f = e.slice(0, Math.ceil(r / 2)), o = Math.floor((r - 1) / 2), u = o > 0 ? e.slice(-o) : [], b = /* @__PURE__ */ t(
+      l,
       {
         isEllipsis: !0,
         divider: a,
         type: s,
-        onClick: () => m(!0)
+        onClick: () => d(!0)
       },
       "ellipsis"
     );
-    return [...p, u, ...f];
+    return [...f, b, ...u];
   })();
-  return /* @__PURE__ */ t("nav", { "aria-label": "Breadcrumbs", className: o("min-w-0", c), children: /* @__PURE__ */ t(x.Provider, { value: { divider: a, type: s }, children: /* @__PURE__ */ t(g, { className: o("relative flex", B[s]), children: d }) }) });
+  return /* @__PURE__ */ t("nav", { "aria-label": "Breadcrumbs", className: n("min-w-0", i), children: /* @__PURE__ */ t(B.Provider, { value: { divider: a, type: s }, children: /* @__PURE__ */ t(x, { className: n("relative flex", v[s]), children: p }) }) });
 };
-v.Item = n;
+C.Item = l;
 export {
-  v as Breadcrumbs
+  C as Breadcrumbs
 };

package/dist/patterns/sub-sidebar/sub-sidebar.d.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react';
 import { SubSidebarConfig, SubSidebarGuard, SubSidebarLinkProps } from './types';
 export interface SubSidebarProps {
+    /**
+     * Keep it stable (memoize it): a group holding the active link re-opens whenever `config.sections` changes
+     * identity, so an inline config re-opens it on every parent render.
+     */
     config: SubSidebarConfig;
     /** The current location's path, e.g. `useLocation().pathname`. */
     currentPath: string;

package/dist/patterns/sub-sidebar/sub-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sub-sidebar.d.ts","sourceRoot":"","sources":["../../../src/patterns/sub-sidebar/sub-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEf,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAajB,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,sDAAsD;IACtD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IACvD,yFAAyF;IACzF,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,eAAO,MAAM,UAAU,GAAI,wFAQxB,eAAe,4CA8YjB,CAAC"}
+{"version":3,"file":"sub-sidebar.d.ts","sourceRoot":"","sources":["../../../src/patterns/sub-sidebar/sub-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEf,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAajB,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,MAAM,EAAE,gBAAgB,CAAC;IACzB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,sDAAsD;IACtD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IACvD,yFAAyF;IACzF,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,eAAO,MAAM,UAAU,GAAI,wFAQxB,eAAe,4CAmZjB,CAAC"}

package/dist/patterns/sub-sidebar/sub-sidebar.js

@@ -1,26 +1,26 @@
 import { jsxs as o, jsx as r, Fragment as S } from "react/jsx-runtime";
-import { useState as A, useEffect as z, Fragment as m } from "react";
+import { useState as A, useEffect as z, Fragment as u } from "react";
 import { Minus as F, Plus as I } from "@untitledui/icons";
 import { CollapseLeft as D } from "../../primitives/custom-icon/icons/collapse-left.js";
 import { CollapseRight as H } from "../../primitives/custom-icon/icons/collapse-right.js";
 import { cx as n } from "../../utils/cn.js";
 import { ButtonUtility as K } from "../../primitives/button/button-utility.js";
-const q = ({
+const T = ({
   href: i,
   className: c,
-  children: p
-}) => /* @__PURE__ */ r("a", { href: i, className: c, children: p }), B = (i, c) => c, W = ({
+  children: d
+}) => /* @__PURE__ */ r("a", { href: i, className: c, children: d }), $ = (i, c) => c, U = ({
   config: i,
   currentPath: c,
-  isCollapsed: p,
+  isCollapsed: d,
   onCollapsedChange: k,
-  renderLink: x = q,
-  guard: h = B,
+  renderLink: x = T,
+  guard: h = $,
   className: C
 }) => {
-  const [E, b] = A(/* @__PURE__ */ new Set()), y = (a) => c === a || c.startsWith(a + "/"), u = (a) => a.map((t) => t.href).filter((t) => !!t).filter(y).sort((t, l) => l.length - t.length)[0] ?? null, w = () => {
+  const [E, b] = A(/* @__PURE__ */ new Set()), y = (a) => c === a || c.startsWith(a + "/"), m = (a) => a.map((t) => t.href).filter((t) => !!t).filter(y).sort((t, l) => l.length - t.length)[0] ?? null, w = () => {
     var e;
-    const a = !p;
+    const a = !d;
     k(a), (e = i.onToggleCollapse) == null || e.call(i, a);
   };
   z(() => {
@@ -28,9 +28,9 @@ const q = ({
     i.sections.forEach((e) => {
       e.items.forEach((t) => {
         var l;
-        if ((l = t.items) != null && l.length && u(t.items) !== null) {
-          const d = t.href || t.label;
-          a.add(d);
+        if ((l = t.items) != null && l.length && m(t.items) !== null) {
+          const p = t.href || t.label;
+          a.add(p);
         }
       });
     }), b((e) => {
@@ -46,18 +46,18 @@ const q = ({
     });
   }, v = (a) => {
     var e;
-    return (e = a.items) != null && e.length && u(a.items) !== null ? !0 : a.href ? y(a.href) : !1;
-  }, j = (a, e) => u(e) === a;
+    return (e = a.items) != null && e.length && m(a.items) !== null ? !0 : a.href ? y(a.href) : !1;
+  }, j = (a, e) => m(e) === a;
   return /* @__PURE__ */ o(
     "div",
     {
       className: n(
         "h-full flex-shrink-0 bg-white border-r border-[#EDEFF4] relative transition-all duration-300 ease-in-out",
-        p ? "w-0 border-r-0" : i.width || "w-[296px]",
+        d ? "w-0 border-r-0" : i.width || "w-[296px]",
         C
       ),
       children: [
-        i.collapsible !== !1 && p && /* @__PURE__ */ r(
+        i.collapsible !== !1 && d && /* @__PURE__ */ r(
           "button",
           {
             onClick: w,
@@ -77,8 +77,9 @@ const q = ({
           {
             className: n(
               "pl-4 h-full flex flex-col overflow-hidden transition-opacity duration-300",
-              p ? "opacity-0 pointer-events-none" : "opacity-100"
+              d ? "opacity-0 pointer-events-none" : "opacity-100"
             ),
+            inert: d,
             children: [
               i.title && /* @__PURE__ */ o("div", { className: "pt-6 pb-4 relative flex-shrink-0 flex items-center justify-between", children: [
                 /* @__PURE__ */ r("h2", { className: "pl-1.5 text-primary font-semibold text-md leading-7 whitespace-nowrap", children: i.title }),
@@ -98,13 +99,13 @@ const q = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("nav", { className: "flex-1 pb-4 pr-2 overflow-y-auto overflow-x-hidden", children: i.sections.map((a) => /* @__PURE__ */ r(m, { children: h(
+              /* @__PURE__ */ r("nav", { className: "flex-1 pb-4 pr-2 overflow-y-auto overflow-x-hidden", children: i.sections.map((a) => /* @__PURE__ */ r(u, { children: h(
                 (a == null ? void 0 : a.permissions) || [],
                 /* @__PURE__ */ o("div", { className: n("mb-6"), children: [
                   /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-[10px] text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
                   /* @__PURE__ */ r("ul", { className: "space-y-1", children: a.items.map((e) => {
-                    const t = e.href || e.label, l = E.has(t), N = e.items && e.items.length > 0, d = v(e);
-                    return N ? /* @__PURE__ */ r(m, { children: h(
+                    const t = e.href || e.label, l = E.has(t), N = e.items && e.items.length > 0, p = v(e);
+                    return N ? /* @__PURE__ */ r(u, { children: h(
                       e.permissions || [],
                       /* @__PURE__ */ o(
                         "li",
@@ -119,7 +120,7 @@ const q = ({
                               {
                                 className: n(
                                   "flex items-center justify-between px-1 py-2 rounded-md transition-colors cursor-pointer",
-                                  d ? "bg-active text-primary font-medium" : "text-primary hover:bg-active",
+                                  p ? "bg-active text-primary font-medium" : "text-primary hover:bg-active",
                                   e.disabled ? "cursor-not-allowed" : ""
                                 ),
                                 role: "button",
@@ -130,7 +131,7 @@ const q = ({
                                   s.stopPropagation(), !e.disabled && f(e);
                                 },
                                 onKeyDown: (s) => {
-                                  if (s.key === "Enter" || s.key === " ") {
+                                  if (s.target === s.currentTarget && (s.key === "Enter" || s.key === " ")) {
                                     if (s.stopPropagation(), e.disabled) return;
                                     f(e);
                                   }
@@ -148,6 +149,7 @@ const q = ({
                                         e.disabled ? "cursor-not-allowed" : ""
                                       ),
                                       size: "xs",
+                                      "aria-label": `${l ? "Collapse" : "Expand"} ${e.label}`,
                                       icon: l ? /* @__PURE__ */ r(F, { size: 12 }) : /* @__PURE__ */ r(I, { size: 12 })
                                     }
                                   )
@@ -163,7 +165,7 @@ const q = ({
                                     s.href,
                                     e.items
                                   );
-                                  return /* @__PURE__ */ r(m, { children: h(
+                                  return /* @__PURE__ */ r(u, { children: h(
                                     s.permissions || [],
                                     /* @__PURE__ */ r("li", { className: "relative", children: x({
                                       href: s.href,
@@ -194,7 +196,7 @@ const q = ({
                         }
                       ),
                       null
-                    ) }, t) : /* @__PURE__ */ r(m, { children: h(
+                    ) }, t) : /* @__PURE__ */ r(u, { children: h(
                       e.permissions || [],
                       /* @__PURE__ */ r(
                         "li",
@@ -208,7 +210,7 @@ const q = ({
                             {
                               className: n(
                                 "flex items-center justify-between px-2 py-2 rounded-md transition-colors cursor-not-allowed",
-                                d ? "bg-active text-primary" : "text-primary"
+                                p ? "bg-active text-primary" : "text-primary"
                               ),
                               "aria-disabled": "true",
                               children: /* @__PURE__ */ r("span", { className: "whitespace-nowrap font-medium", children: e.label })
@@ -217,7 +219,7 @@ const q = ({
                             href: e.href,
                             className: n(
                               "flex items-center justify-between px-2 py-2 rounded-md transition-colors",
-                              d ? "bg-active text-primary" : "text-primary hover:bg-active",
+                              p ? "bg-active text-primary" : "text-primary hover:bg-active",
                               e.disabled ? "opacity-30 cursor-not-allowed" : ""
                             ),
                             children: /* @__PURE__ */ r("span", { className: "whitespace-nowrap font-medium", children: e.label })
@@ -230,7 +232,7 @@ const q = ({
                               },
                               className: n(
                                 "w-full flex items-center justify-between px-2 py-2 rounded-md text-sm transition-colors cursor-pointer",
-                                d ? "bg-active text-primary font-medium" : "text-primary hover:bg-active",
+                                p ? "bg-active text-primary font-medium" : "text-primary hover:bg-active",
                                 e.disabled ? "opacity-30 cursor-not-allowed" : ""
                               ),
                               children: /* @__PURE__ */ r("span", { className: "whitespace-nowrap", children: e.label })
@@ -243,7 +245,7 @@ const q = ({
                         {
                           className: n(
                             "flex items-center justify-between opacity-30 px-2 py-2 rounded-md transition-colors cursor-not-allowed text-xs whitespace-nowrap font-medium",
-                            d ? "bg-active text-primary" : "text-primary"
+                            p ? "bg-active text-primary" : "text-primary"
                           ),
                           "aria-disabled": "true",
                           children: e.label
@@ -279,5 +281,5 @@ const q = ({
   );
 };
 export {
-  W as SubSidebar
+  U as SubSidebar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pibit.ai/cure-design-system",
-  "version": "0.6.19",
+  "version": "0.6.20",
   "description": "CURE Design System - React component library",
   "author": "Pibit",
   "license": "MIT",