@humain/ui 2.2.2 → 2.2.4

package/dist/wc/hf-app-sidebar.js

@@ -3,18 +3,18 @@ import { i as He, t as Te } from "./vendor/react.js";
 import { n as p } from "./utils.js";
 import { a as oe, i as Ve, l as We, n as qe, o as Ue, t as Ge, u as Ke } from "./_shared.js";
 import { t as F } from "./createLucideIcon.js";
-import { t as Ze } from "./calendar.js";
-import { t as Je } from "./chevron-right.js";
-import { t as Qe } from "./circle.js";
-import { t as Xe } from "./file-text.js";
+import { t as Xe } from "./calendar.js";
+import { t as Ze } from "./chevron-right.js";
+import { t as Je } from "./circle.js";
+import { t as Qe } from "./file-text.js";
 import { t as Ye } from "./house.js";
 import { t as ce } from "./message-circle.js";
-import { a as de, c as pe, d as ue, f as fe, g as S, h as et, l as me, m as tt, n as be, o as I, p as at, r as xe, s as E, t as ot, u as rt } from "./sidebar.js";
+import { _ as et, a as de, c as I, d as pe, f as tt, g as at, h as ot, i as ue, l as E, m as fe, n as me, p as be, r as rt, s as xe, t as he, u as ge, v as S } from "./AppSidebar.constants.js";
 import { t as st } from "./settings.js";
 import { t as re } from "./Avatar.js";
 import { t as nt } from "./workflow.js";
-import { t as he } from "./dist.js";
-import { t as ge } from "./Badge.js";
+import { t as ve } from "./dist.js";
+import { t as Ne } from "./Badge.js";
 import { t as it } from "./Separator3.js";
 import { a as lt, i as ct, s as dt } from "./Popover.js";
 import { n as M, r as $, t as B } from "./tooltip2.js";
@@ -72,7 +72,7 @@ var ut = [
     r: "4",
     key: "nufk8"
   }]
-], ht = F("users", xt), l = /* @__PURE__ */ Re(He(), 1), t = Te(), ve = "280px", Ne = "116px";
+], ht = F("users", xt), l = /* @__PURE__ */ Re(He(), 1), t = Te();
 function je(e, a) {
   return a == null ? e : `${e}, ${typeof a == "number" ? `${a} ${a === 1 ? "item" : "items"}` : a}`;
 }
@@ -80,7 +80,7 @@ function Se(e, a) {
   return e ? "bg-transparent" : a ?? "bg-[var(--sidebar)]";
 }
 function ye({ isCollapsed: e, side: a, rounded: o, backgroundClass: r }) {
-  return p("flex h-full min-h-0 flex-col items-center pb-4 pt-6", e ? "w-full px-6" : ["w-[calc(100%-0.75rem)] px-3", a === "left" ? "mr-3 self-start" : "ml-3 self-end"], r, o && (a === "left" ? "rounded-r-lg" : "rounded-l-lg"));
+  return p("flex h-full min-h-0 flex-col items-center pb-4 pt-6", e ? "w-full px-2" : ["w-[calc(100%-0.75rem)] px-3", a === "left" ? "mr-3 self-start" : "ml-3 self-end"], r, o && (a === "left" ? "rounded-r-lg" : "rounded-l-lg"));
 }
 function Ce(e, a) {
   return typeof e == "number" && Number.isFinite(e) && e >= 0 ? Math.floor(e) : a;
@@ -93,11 +93,11 @@ function C(e, a) {
 function gt(e) {
   return (typeof e == "function" || typeof e == "object" && e !== null) && R in e;
 }
-function P(e) {
+function O(e) {
   if (gt(e)) return e[R];
   if (typeof e == "object" && e !== null) {
     const a = e;
-    return P(a.type) ?? P(a.render);
+    return O(a.type) ?? O(a.render);
   }
 }
 function vt(e) {
@@ -125,7 +125,7 @@ function vt(e) {
         a.explicitFooter = o;
         return;
       }
-      const n = P(r);
+      const n = O(r);
       n === "header" ? a.header.push(o) : n === "content" ? a.content.push(o) : n === "footer" ? a.footer.push(o) : a.content.push(o);
     }), a;
   }, [e]);
@@ -223,8 +223,11 @@ function T({ logo: e, compactedLogo: a, subtext: o, className: r, ...n }) {
           children: "HUMAIN"
         })] })
       }), o && /* @__PURE__ */ (0, t.jsx)("p", {
-        className: "text-sm text-sidebar-foreground",
-        children: o
+        className: "ps-11 text-sm text-sidebar-foreground",
+        children: /* @__PURE__ */ (0, t.jsx)("span", {
+          "data-slot": "app-sidebar-logo-subtext",
+          children: o
+        })
       })]
     }), /* @__PURE__ */ (0, t.jsx)("button", {
       type: "button",
@@ -264,7 +267,7 @@ function q({ children: e, className: a }) {
 }
 q.displayName = "AppSidebar.Footer";
 function U({ children: e, "aria-label": a = "Sidebar navigation", className: o }) {
-  const r = /* @__PURE__ */ (0, t.jsx)(ue, {
+  const r = /* @__PURE__ */ (0, t.jsx)(be, {
     className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-1",
     children: l.Children.map(e, (n) => /* @__PURE__ */ (0, t.jsx)(fe, { children: n }))
   });
@@ -301,7 +304,7 @@ function we({ label: e, className: a }) {
   });
 }
 we.displayName = "AppSidebar.NavSection";
-var Ie = he("relative flex w-full items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-normal transition-[color,background-color] duration-200 ease-smooth motion-reduce:transition-none", {
+var Ie = ve("relative flex w-full items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-normal transition-[color,background-color] duration-200 ease-smooth motion-reduce:transition-none", {
   variants: { state: {
     default: "text-sidebar-foreground hover:bg-sidebar-accent",
     active: "bg-primary/10 text-sidebar-foreground"
@@ -309,15 +312,15 @@ var Ie = he("relative flex w-full items-center gap-1.5 rounded-lg px-2 py-2 text
   defaultVariants: { state: "default" }
 });
 function Ee({ icon: e, label: a, isActive: o = !1, badge: r, onClick: n, href: i, className: c, children: u }) {
-  const { state: m, containerRef: f } = S(), { side: s } = H(), b = m === "collapsed", d = l.Children.count(u) > 0, v = l.Children.toArray(u).some((g) => l.isValidElement(g) && g.props.isActive === !0), h = o || v, [N, x] = l.useState(h && d), Z = l.useId(), J = s === "right" ? "left" : "right", ze = "linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)", Fe = s === "right" ? "justify-end rounded-l-xl rounded-r-none" : "justify-start rounded-r-xl rounded-l-none", Me = s === "right" ? "rounded-l-xl" : "rounded-r-xl", $e = l.useMemo(() => ({ getBoundingClientRect: () => {
-    const g = f.current, j = g?.getBoundingClientRect(), ae = g?.ownerDocument.defaultView?.innerHeight ?? j?.height ?? 0, O = j ? s === "right" ? j.left : j.right : 0;
+  const { state: m, containerRef: f } = S(), { side: s } = H(), b = m === "collapsed", d = l.Children.count(u) > 0, v = l.Children.toArray(u).some((g) => l.isValidElement(g) && g.props.isActive === !0), h = o || v, [N, x] = l.useState(h && d), X = l.useId(), Z = s === "right" ? "left" : "right", ze = "linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)", Fe = s === "right" ? "justify-end rounded-l-xl rounded-r-none" : "justify-start rounded-r-xl rounded-l-none", Me = s === "right" ? "rounded-l-xl" : "rounded-r-xl", $e = l.useMemo(() => ({ getBoundingClientRect: () => {
+    const g = f.current, j = g?.getBoundingClientRect(), ae = g?.ownerDocument.defaultView?.innerHeight ?? j?.height ?? 0, P = j ? s === "right" ? j.left : j.right : 0;
     return {
-      x: O,
+      x: P,
       y: 0,
       top: 0,
-      right: O,
+      right: P,
       bottom: ae,
-      left: O,
+      left: P,
       width: 0,
       height: ae
     };
@@ -325,21 +328,21 @@ function Ee({ icon: e, label: a, isActive: o = !1, badge: r, onClick: n, href: i
   l.useEffect(() => {
     h && d && x(!0);
   }, [h, d]);
-  const A = je(a, r), Q = /* @__PURE__ */ (0, t.jsx)("span", {
+  const A = je(a, r), J = /* @__PURE__ */ (0, t.jsx)("span", {
     "data-slot": "nav-icon",
     className: "flex shrink-0 items-center p-0.5 [&>svg]:size-4",
     children: e
-  }), X = /* @__PURE__ */ (0, t.jsx)("span", {
+  }), Q = /* @__PURE__ */ (0, t.jsx)("span", {
     className: "flex-1 text-start group-data-[collapsible=icon]:hidden",
     children: a
-  }), Y = r != null && /* @__PURE__ */ (0, t.jsx)(ge, {
+  }), Y = r != null && /* @__PURE__ */ (0, t.jsx)(Ne, {
     size: "sm",
     variant: "soft",
     color: "primary",
     className: "px-1.5 group-data-[collapsible=icon]:hidden",
     "aria-hidden": "true",
     children: r
-  }), ee = d && /* @__PURE__ */ (0, t.jsx)(Je, {
+  }), ee = d && /* @__PURE__ */ (0, t.jsx)(Ze, {
     "aria-hidden": "true",
     className: p("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth group-data-[collapsible=icon]:hidden motion-reduce:transition-none", N ? "rotate-90" : "rtl:rotate-180", h && N && "text-primary")
   }), k = p(Ie({ state: h ? "active" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "min-h-11 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-2 group-data-[collapsible=icon]:w-11 group-data-[collapsible=icon]:h-11", c), w = o ? { "aria-current": "page" } : {};
@@ -370,7 +373,7 @@ function Ee({ icon: e, label: a, isActive: o = !1, badge: r, onClick: n, href: i
       "data-slot": "app-sidebar-nav-item",
       children: g
     }), /* @__PURE__ */ (0, t.jsx)(ct, {
-      side: J,
+      side: Z,
       align: "start",
       sideOffset: 0,
       alignOffset: 0,
@@ -396,7 +399,7 @@ function Ee({ icon: e, label: a, isActive: o = !1, badge: r, onClick: n, href: i
         }), u]
       })
     })] }) : a ? /* @__PURE__ */ (0, t.jsxs)(B, { children: [/* @__PURE__ */ (0, t.jsx)($, { render: j }), /* @__PURE__ */ (0, t.jsx)(M, {
-      side: J,
+      side: Z,
       sideOffset: 8,
       children: a
     })] }) : j;
@@ -410,8 +413,8 @@ function Ee({ icon: e, label: a, isActive: o = !1, badge: r, onClick: n, href: i
     ...w,
     "data-slot": "app-sidebar-nav-item",
     children: [
+      J,
       Q,
-      X,
       Y,
       ee
     ]
@@ -421,18 +424,18 @@ function Ee({ icon: e, label: a, isActive: o = !1, badge: r, onClick: n, href: i
     className: p(k, "cursor-pointer"),
     "aria-label": A,
     "aria-expanded": d ? N : void 0,
-    "aria-controls": d ? Z : void 0,
+    "aria-controls": d ? X : void 0,
     ...w,
     "data-slot": "app-sidebar-nav-item",
     children: [
+      J,
       Q,
-      X,
       Y,
       ee
     ]
   });
   return d ? /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [te, N && /* @__PURE__ */ (0, t.jsx)("ul", {
-    id: Z,
+    id: X,
     role: "group",
     "aria-label": `${a} sub-navigation`,
     className: "ms-4 flex flex-col items-start border-s border-sidebar-border py-1 ps-2",
@@ -444,7 +447,7 @@ function _e({ label: e, badge: a, isActive: o = !1, href: r, onClick: n, classNa
   const c = je(e, a), u = p(Ie({ state: o ? "active" : "default" }), "min-h-11 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "transition-[color,background-color,transform] ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", i), m = o ? { "aria-current": "page" } : {}, f = /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [/* @__PURE__ */ (0, t.jsx)("span", {
     className: "flex-1 text-start",
     children: e
-  }), a != null && /* @__PURE__ */ (0, t.jsx)(ge, {
+  }), a != null && /* @__PURE__ */ (0, t.jsx)(Ne, {
     size: "sm",
     variant: "soft",
     color: "primary",
@@ -474,9 +477,9 @@ function _({ count: e = 3, className: a }) {
   const o = Ce(e, 3);
   return /* @__PURE__ */ (0, t.jsx)(I, {
     className: p("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", a),
-    children: /* @__PURE__ */ (0, t.jsx)(E, { children: /* @__PURE__ */ (0, t.jsx)(ue, {
+    children: /* @__PURE__ */ (0, t.jsx)(E, { children: /* @__PURE__ */ (0, t.jsx)(be, {
       className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
-      children: Array.from({ length: o }).map((r, n) => /* @__PURE__ */ (0, t.jsx)(fe, { children: /* @__PURE__ */ (0, t.jsx)(tt, {}) }, `nav-skeleton-${n}`))
+      children: Array.from({ length: o }).map((r, n) => /* @__PURE__ */ (0, t.jsx)(fe, { children: /* @__PURE__ */ (0, t.jsx)(at, {}) }, `nav-skeleton-${n}`))
     }) })
   });
 }
@@ -487,7 +490,7 @@ function G({ label: e = "Recent Chats", children: a, className: o }) {
   return r === "collapsed" ? null : /* @__PURE__ */ (0, t.jsxs)(I, {
     "data-slot": "app-sidebar-chat-list",
     className: p("mt-4 flex min-h-0 flex-1 flex-col p-0", o),
-    children: [/* @__PURE__ */ (0, t.jsx)(pe, {
+    children: [/* @__PURE__ */ (0, t.jsx)(ge, {
       className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
       children: e
     }), /* @__PURE__ */ (0, t.jsx)(E, {
@@ -504,7 +507,7 @@ function G({ label: e = "Recent Chats", children: a, className: o }) {
 }
 G.displayName = "AppSidebar.ChatList";
 C(G, "content");
-var yt = he("flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 min-h-11 transition-[color,background-color,transform] duration-200 ease-smooth cursor-pointer motion-reduce:transition-none ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", {
+var yt = ve("flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 min-h-11 transition-[color,background-color,transform] duration-200 ease-smooth cursor-pointer motion-reduce:transition-none ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", {
   variants: { state: {
     default: "hover:bg-muted",
     hover: "bg-muted",
@@ -563,14 +566,14 @@ function L({ count: e = 5, label: a = "Recent Chats", className: o }) {
   const r = Ce(e, 5);
   return /* @__PURE__ */ (0, t.jsxs)(I, {
     className: p("mt-4 flex min-h-0 flex-1 flex-col p-0 group-data-[collapsible=icon]:hidden", o),
-    children: [/* @__PURE__ */ (0, t.jsx)(pe, {
+    children: [/* @__PURE__ */ (0, t.jsx)(ge, {
       className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
       children: a
     }), /* @__PURE__ */ (0, t.jsx)(E, {
       className: "flex-1 overflow-hidden",
       children: /* @__PURE__ */ (0, t.jsx)("div", {
         className: "flex h-full flex-col overflow-y-auto pb-5",
-        children: Array.from({ length: r }).map((n, i) => /* @__PURE__ */ (0, t.jsx)(at, {}, `chat-skeleton-${i}`))
+        children: Array.from({ length: r }).map((n, i) => /* @__PURE__ */ (0, t.jsx)(ot, {}, `chat-skeleton-${i}`))
       })
     })]
   });
@@ -640,7 +643,7 @@ function K({ name: e, subtitle: a, avatarSrc: o, isOnline: r = !1, onExpand: n,
 K.displayName = "AppSidebar.Account";
 C(K, "footer");
 function D({ className: e }) {
-  return /* @__PURE__ */ (0, t.jsx)(ot, { className: e });
+  return /* @__PURE__ */ (0, t.jsx)(rt, { className: e });
 }
 D.displayName = "AppSidebar.AccountSkeleton";
 C(D, "footer");
@@ -649,11 +652,11 @@ function De({ navCount: e = 4, chatCount: a = 5, logo: o, compactedLogo: r, coll
     containerRef: s,
     explicitSide: i
   }), v = Se(b, u);
-  return /* @__PURE__ */ (0, t.jsx)(be, {
+  return /* @__PURE__ */ (0, t.jsx)(ue, {
     collapsible: n,
     side: d,
-    width: ve,
-    collapsedWidth: Ne,
+    width: me,
+    collapsedWidth: he,
     className: p("bg-transparent", m),
     children: /* @__PURE__ */ (0, t.jsxs)("div", {
       "data-slot": "app-sidebar-surface",
@@ -664,18 +667,18 @@ function De({ navCount: e = 4, chatCount: a = 5, logo: o, compactedLogo: r, coll
         backgroundClass: v
       }),
       children: [
-        /* @__PURE__ */ (0, t.jsx)(me, {
-          className: "h-[68px] w-full p-2",
+        /* @__PURE__ */ (0, t.jsx)(pe, {
+          className: "h-[68px] w-full p-2 group-data-[collapsible=icon]:p-0",
           children: /* @__PURE__ */ (0, t.jsx)(T, {
             logo: o,
             compactedLogo: r
           })
         }),
-        /* @__PURE__ */ (0, t.jsxs)(xe, {
+        /* @__PURE__ */ (0, t.jsxs)(de, {
           className: "flex w-full flex-col gap-0 overflow-hidden pt-3 group-data-[collapsible=icon]:items-center",
           children: [/* @__PURE__ */ (0, t.jsx)(_, { count: e }), /* @__PURE__ */ (0, t.jsx)(L, { count: a })]
         }),
-        /* @__PURE__ */ (0, t.jsx)(de, {
+        /* @__PURE__ */ (0, t.jsx)(xe, {
           className: "w-full gap-0 p-0 group-data-[collapsible=icon]:items-center",
           children: /* @__PURE__ */ (0, t.jsx)(D, {})
         })
@@ -684,7 +687,7 @@ function De({ navCount: e = 4, chatCount: a = 5, logo: o, compactedLogo: r, coll
   });
 }
 De.displayName = "AppSidebar.Skeleton";
-function Oe({ logo: e, compactedLogo: a, logoSubtext: o, collapsible: r = "icon", side: n, rounded: i = !1, sidebarBgColor: c, className: u, children: m, dir: f, ...s }) {
+function Pe({ logo: e, compactedLogo: a, logoSubtext: o, collapsible: r = "icon", side: n, rounded: i = !1, sidebarBgColor: c, className: u, children: m, dir: f, ...s }) {
   const { state: b, containerRef: d } = S(), v = b === "collapsed", h = ke({
     containerRef: d,
     explicitDir: f,
@@ -692,11 +695,11 @@ function Oe({ logo: e, compactedLogo: a, logoSubtext: o, collapsible: r = "icon"
   }), N = Se(v, c), x = vt(m);
   return /* @__PURE__ */ (0, t.jsx)(Ae.Provider, {
     value: { side: h },
-    children: /* @__PURE__ */ (0, t.jsx)(be, {
+    children: /* @__PURE__ */ (0, t.jsx)(ue, {
       collapsible: r,
       side: h,
-      width: ve,
-      collapsedWidth: Ne,
+      width: me,
+      collapsedWidth: he,
       dir: f,
       className: p("bg-transparent", u),
       ...s,
@@ -709,19 +712,19 @@ function Oe({ logo: e, compactedLogo: a, logoSubtext: o, collapsible: r = "icon"
           backgroundClass: N
         }),
         children: [
-          /* @__PURE__ */ (0, t.jsx)(me, {
-            className: "h-[68px] w-full p-2",
+          /* @__PURE__ */ (0, t.jsx)(pe, {
+            className: "h-[68px] w-full p-2 group-data-[collapsible=icon]:p-0",
             children: /* @__PURE__ */ (0, t.jsx)(T, {
               logo: e,
               compactedLogo: a,
               subtext: o
             })
           }),
-          /* @__PURE__ */ (0, t.jsx)(xe, {
+          /* @__PURE__ */ (0, t.jsx)(de, {
             className: "flex w-full flex-col gap-0 overflow-hidden pt-3 group-data-[collapsible=icon]:items-center",
             children: x.explicitContent ? x.explicitContent.props.children : x.content
           }),
-          /* @__PURE__ */ (0, t.jsx)(de, {
+          /* @__PURE__ */ (0, t.jsx)(xe, {
             className: "w-full gap-0 p-0 group-data-[collapsible=icon]:items-center",
             children: x.explicitFooter ? x.explicitFooter.props.children : x.footer
           })
@@ -730,8 +733,8 @@ function Oe({ logo: e, compactedLogo: a, logoSubtext: o, collapsible: r = "icon"
     })
   });
 }
-Oe.displayName = "AppSidebar";
-var y = Object.assign(Oe, {
+Pe.displayName = "AppSidebar";
+var y = Object.assign(Pe, {
   Header: V,
   Content: W,
   Footer: q,
@@ -762,8 +765,8 @@ var y = Object.assign(Oe, {
 }, Ct = {
   home: Ye,
   users: ht,
-  calendar: Ze,
-  "file-text": Xe,
+  calendar: Xe,
+  "file-text": Qe,
   settings: st,
   "message-circle": ce,
   workflow: nt
@@ -778,7 +781,7 @@ function kt(e) {
     if (o) return l.createElement(o, { "aria-hidden": !0 });
     ie.has(a) || (ie.add(a), console.warn(`[hf-app-sidebar] Unsupported nav item icon "${a}". Falling back to "circle".`));
   }
-  return l.createElement(Qe, { "aria-hidden": !0 });
+  return l.createElement(Je, { "aria-hidden": !0 });
 }
 function wt(e) {
   return e.type === "section";
@@ -790,7 +793,7 @@ function le(e, a) {
       alt: e.alt || a
     }) : null;
 }
-var Pe = class extends Ge {
+var Oe = class extends Ge {
   get propDefs() {
     return z;
   }
@@ -841,7 +844,7 @@ var Pe = class extends Ge {
       subtitle: r.subtitle,
       avatarSrc: r.avatarSrc,
       isOnline: r.isOnline
-    }))), a && f.push(l.createElement(rt, {
+    }))), a && f.push(l.createElement(tt, {
       key: "inset",
       connected: e.connected
     }, We(a))), l.createElement(et, {
@@ -851,11 +854,11 @@ var Pe = class extends Ge {
     }, ...f);
   }
 };
-Ue(Pe, z);
-Ke("hf-app-sidebar", Pe);
+Ue(Oe, z);
+Ke("hf-app-sidebar", Oe);
 export {
-  Pe as AppSidebarWC,
-  Pe as default
+  Oe as AppSidebarWC,
+  Oe as default
 };
 
 //# sourceMappingURL=hf-app-sidebar.js.map