@humain/ui 2.2.1 → 2.2.3

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

@@ -1,17 +1,17 @@
 import { a as ie, f as p, i as Te, l as Ve, n as We, o as Ue, t as Ge, u as qe } from "./_shared.js";
 import { t as R } from "./createLucideIcon.js";
 import { t as Ke } 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 Xe } from "./house.js";
+import { t as Xe } from "./chevron-right.js";
+import { t as Ze } from "./circle.js";
+import { t as Je } from "./file-text.js";
+import { t as Qe } from "./house.js";
 import { t as ue } from "./message-circle.js";
-import { a as fe, c as me, d as be, f as he, g as A, h as Ye, l as ge, m as et, n as ve, o as D, p as tt, r as xe, s as O, t as at, u as ot } from "./sidebar.js";
+import { _ as Ye, a as fe, c as D, d as me, f as et, g as tt, h as at, i as be, l as P, m as he, n as ge, p as ve, r as ot, s as xe, t as Ne, u as Se, v as A } from "./AppSidebar.constants.js";
 import { t as rt } from "./settings.js";
 import { t as se } from "./Avatar.js";
 import { t as nt } from "./workflow.js";
-import { t as Ne } from "./dist.js";
-import { t as Se } from "./Badge.js";
+import { t as ye } from "./dist.js";
+import { t as Ce } from "./Badge.js";
 import { t as it } from "./Separator3.js";
 import { a as st, i as lt, s as ct } from "./Popover.js";
 import { n as M, r as B, t as H } from "./tooltip2.js";
@@ -72,7 +72,7 @@ var pt = [
     r: "4",
     key: "nufk8"
   }]
-], ht = R("users", bt), ye = "280px", Ce = "116px";
+], ht = R("users", bt);
 function Ae(e, t) {
   return t == null ? e : `${e}, ${typeof t == "number" ? `${t} ${t === 1 ? "item" : "items"}` : t}`;
 }
@@ -223,8 +223,11 @@ function U({ logo: e, compactedLogo: t, subtext: o, className: r, ...i }) {
           children: "HUMAIN"
         })] })
       }), o && /* @__PURE__ */ a("p", {
-        className: "text-sm text-sidebar-foreground",
-        children: o
+        className: "ps-11 text-sm text-sidebar-foreground",
+        children: /* @__PURE__ */ a("span", {
+          "data-slot": "app-sidebar-logo-subtext",
+          children: o
+        })
       })]
     }), /* @__PURE__ */ a("button", {
       type: "button",
@@ -263,22 +266,22 @@ function K({ children: e, className: t }) {
   });
 }
 K.displayName = "AppSidebar.Footer";
-function Z({ children: e, "aria-label": t = "Sidebar navigation", className: o }) {
-  const r = /* @__PURE__ */ a(be, {
+function X({ children: e, "aria-label": t = "Sidebar navigation", className: o }) {
+  const r = /* @__PURE__ */ a(ve, {
     className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-1",
     children: h.Children.map(e, (i) => /* @__PURE__ */ a(he, { children: i }))
   });
   return /* @__PURE__ */ a(D, {
     "data-slot": "app-sidebar-nav",
     className: p("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", o),
-    children: /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a("nav", {
+    children: /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a("nav", {
       "aria-label": t,
       children: r
     }) })
   });
 }
-Z.displayName = "AppSidebar.Nav";
-w(Z, "content");
+X.displayName = "AppSidebar.Nav";
+w(X, "content");
 function De({ label: e, className: t }) {
   return /* @__PURE__ */ l("div", {
     "data-slot": "app-sidebar-nav-section",
@@ -301,15 +304,15 @@ function De({ label: e, className: t }) {
   });
 }
 De.displayName = "AppSidebar.NavSection";
-var Oe = Ne("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 Pe = ye("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"
   } },
   defaultVariants: { state: "default" }
 });
-function Pe({ icon: e, label: t, isActive: o = !1, badge: r, onClick: i, href: s, className: c, children: u }) {
-  const { state: m, containerRef: f } = A(), { side: n } = W(), b = m === "collapsed", d = h.Children.count(u) > 0, S = h.Children.toArray(u).some((N) => h.isValidElement(N) && N.props.isActive === !0), x = o || S, [y, v] = h.useState(x && d), X = h.useId(), Y = n === "right" ? "left" : "right", Re = "linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)", Me = n === "right" ? "justify-end rounded-l-xl rounded-r-none" : "justify-start rounded-r-xl rounded-l-none", Be = n === "right" ? "rounded-l-xl" : "rounded-r-xl", He = h.useMemo(() => ({ getBoundingClientRect: () => {
+function Oe({ icon: e, label: t, isActive: o = !1, badge: r, onClick: i, href: s, className: c, children: u }) {
+  const { state: m, containerRef: f } = A(), { side: n } = W(), b = m === "collapsed", d = h.Children.count(u) > 0, S = h.Children.toArray(u).some((N) => h.isValidElement(N) && N.props.isActive === !0), x = o || S, [y, v] = h.useState(x && d), Q = h.useId(), Y = n === "right" ? "left" : "right", Re = "linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)", Me = n === "right" ? "justify-end rounded-l-xl rounded-r-none" : "justify-start rounded-r-xl rounded-l-none", Be = n === "right" ? "rounded-l-xl" : "rounded-r-xl", He = h.useMemo(() => ({ getBoundingClientRect: () => {
     const N = f.current, C = N?.getBoundingClientRect(), ne = N?.ownerDocument.defaultView?.innerHeight ?? C?.height ?? 0, j = C ? n === "right" ? C.left : C.right : 0;
     return {
       x: j,
@@ -332,17 +335,17 @@ function Pe({ icon: e, label: t, isActive: o = !1, badge: r, onClick: i, href: s
   }), te = /* @__PURE__ */ a("span", {
     className: "flex-1 text-start group-data-[collapsible=icon]:hidden",
     children: t
-  }), ae = r != null && /* @__PURE__ */ a(Se, {
+  }), ae = r != null && /* @__PURE__ */ a(Ce, {
     size: "sm",
     variant: "soft",
     color: "primary",
     className: "px-1.5 group-data-[collapsible=icon]:hidden",
     "aria-hidden": "true",
     children: r
-  }), oe = d && /* @__PURE__ */ a(Ze, {
+  }), oe = d && /* @__PURE__ */ a(Xe, {
     "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", y ? "rotate-90" : "rtl:rotate-180", x && y && "text-primary")
-  }), E = p(Oe({ state: x ? "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), L = o ? { "aria-current": "page" } : {};
+  }), E = p(Pe({ state: x ? "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), L = o ? { "aria-current": "page" } : {};
   if (b) {
     const N = /* @__PURE__ */ a("span", {
       "data-slot": "nav-icon",
@@ -421,7 +424,7 @@ function Pe({ icon: e, label: t, isActive: o = !1, badge: r, onClick: i, href: s
     className: p(E, "cursor-pointer"),
     "aria-label": I,
     "aria-expanded": d ? y : void 0,
-    "aria-controls": d ? X : void 0,
+    "aria-controls": d ? Q : void 0,
     ...L,
     "data-slot": "app-sidebar-nav-item",
     children: [
@@ -432,19 +435,19 @@ function Pe({ icon: e, label: t, isActive: o = !1, badge: r, onClick: i, href: s
     ]
   });
   return d ? /* @__PURE__ */ l(T, { children: [re, y && /* @__PURE__ */ a("ul", {
-    id: X,
+    id: Q,
     role: "group",
     "aria-label": `${t} sub-navigation`,
     className: "ms-4 flex flex-col items-start border-s border-sidebar-border py-1 ps-2",
     children: u
   })] }) : re;
 }
-Pe.displayName = "AppSidebar.NavItem";
+Oe.displayName = "AppSidebar.NavItem";
 function _e({ label: e, badge: t, isActive: o = !1, href: r, onClick: i, className: s }) {
-  const c = Ae(e, t), u = p(Oe({ 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", s), m = o ? { "aria-current": "page" } : {}, f = /* @__PURE__ */ l(T, { children: [/* @__PURE__ */ a("span", {
+  const c = Ae(e, t), u = p(Pe({ 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", s), m = o ? { "aria-current": "page" } : {}, f = /* @__PURE__ */ l(T, { children: [/* @__PURE__ */ a("span", {
     className: "flex-1 text-start",
     children: e
-  }), t != null && /* @__PURE__ */ a(Se, {
+  }), t != null && /* @__PURE__ */ a(Ce, {
     size: "sm",
     variant: "soft",
     color: "primary",
@@ -470,27 +473,27 @@ function _e({ label: e, badge: t, isActive: o = !1, href: r, onClick: i, classNa
   });
 }
 _e.displayName = "AppSidebar.NavSub";
-function P({ count: e = 3, className: t }) {
+function O({ count: e = 3, className: t }) {
   const o = Ie(e, 3);
   return /* @__PURE__ */ a(D, {
     className: p("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", t),
-    children: /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(be, {
+    children: /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(ve, {
       className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
-      children: Array.from({ length: o }).map((r, i) => /* @__PURE__ */ a(he, { children: /* @__PURE__ */ a(et, {}) }, `nav-skeleton-${i}`))
+      children: Array.from({ length: o }).map((r, i) => /* @__PURE__ */ a(he, { children: /* @__PURE__ */ a(tt, {}) }, `nav-skeleton-${i}`))
     }) })
   });
 }
-P.displayName = "AppSidebar.NavSkeleton";
-w(P, "content");
-function J({ label: e = "Recent Chats", children: t, className: o }) {
+O.displayName = "AppSidebar.NavSkeleton";
+w(O, "content");
+function Z({ label: e = "Recent Chats", children: t, className: o }) {
   const { state: r } = A();
   return r === "collapsed" ? null : /* @__PURE__ */ l(D, {
     "data-slot": "app-sidebar-chat-list",
     className: p("mt-4 flex min-h-0 flex-1 flex-col p-0", o),
-    children: [/* @__PURE__ */ a(me, {
+    children: [/* @__PURE__ */ a(Se, {
       className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
       children: e
-    }), /* @__PURE__ */ a(O, {
+    }), /* @__PURE__ */ a(P, {
       className: "flex-1 overflow-hidden",
       children: /* @__PURE__ */ a("div", {
         className: "flex h-full flex-col overflow-y-auto pb-5 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
@@ -502,9 +505,9 @@ function J({ label: e = "Recent Chats", children: t, className: o }) {
     })]
   });
 }
-J.displayName = "AppSidebar.ChatList";
-w(J, "content");
-var yt = Ne("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", {
+Z.displayName = "AppSidebar.ChatList";
+w(Z, "content");
+var yt = ye("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,21 +566,21 @@ function _({ count: e = 5, label: t = "Recent Chats", className: o }) {
   const r = Ie(e, 5);
   return /* @__PURE__ */ l(D, {
     className: p("mt-4 flex min-h-0 flex-1 flex-col p-0 group-data-[collapsible=icon]:hidden", o),
-    children: [/* @__PURE__ */ a(me, {
+    children: [/* @__PURE__ */ a(Se, {
       className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
       children: t
-    }), /* @__PURE__ */ a(O, {
+    }), /* @__PURE__ */ a(P, {
       className: "flex-1 overflow-hidden",
       children: /* @__PURE__ */ a("div", {
         className: "flex h-full flex-col overflow-y-auto pb-5",
-        children: Array.from({ length: r }).map((i, s) => /* @__PURE__ */ a(tt, {}, `chat-skeleton-${s}`))
+        children: Array.from({ length: r }).map((i, s) => /* @__PURE__ */ a(at, {}, `chat-skeleton-${s}`))
       })
     })]
   });
 }
 _.displayName = "AppSidebar.ChatListSkeleton";
 w(_, "content");
-function Q({ name: e, subtitle: t, avatarSrc: o, isOnline: r = !1, onExpand: i, className: s }) {
+function J({ name: e, subtitle: t, avatarSrc: o, isOnline: r = !1, onExpand: i, className: s }) {
   const { state: c } = A(), { side: u } = W(), m = c === "collapsed", f = u === "right" ? "left" : "right";
   if (m) {
     const n = /* @__PURE__ */ a("button", {
@@ -637,10 +640,10 @@ function Q({ name: e, subtitle: t, avatarSrc: o, isOnline: r = !1, onExpand: i,
     })]
   });
 }
-Q.displayName = "AppSidebar.Account";
-w(Q, "footer");
+J.displayName = "AppSidebar.Account";
+w(J, "footer");
 function z({ className: e }) {
-  return /* @__PURE__ */ a(at, { className: e });
+  return /* @__PURE__ */ a(ot, { className: e });
 }
 z.displayName = "AppSidebar.AccountSkeleton";
 w(z, "footer");
@@ -649,11 +652,11 @@ function je({ navCount: e = 4, chatCount: t = 5, logo: o, compactedLogo: r, coll
     containerRef: n,
     explicitSide: s
   }), S = ke(b, u);
-  return /* @__PURE__ */ a(ve, {
+  return /* @__PURE__ */ a(be, {
     collapsible: i,
     side: d,
-    width: ye,
-    collapsedWidth: Ce,
+    width: ge,
+    collapsedWidth: Ne,
     className: p("bg-transparent", m),
     children: /* @__PURE__ */ l("div", {
       "data-slot": "app-sidebar-surface",
@@ -664,18 +667,18 @@ function je({ navCount: e = 4, chatCount: t = 5, logo: o, compactedLogo: r, coll
         backgroundClass: S
       }),
       children: [
-        /* @__PURE__ */ a(ge, {
+        /* @__PURE__ */ a(me, {
           className: "h-[68px] w-full p-2",
           children: /* @__PURE__ */ a(U, {
             logo: o,
             compactedLogo: r
           })
         }),
-        /* @__PURE__ */ l(xe, {
+        /* @__PURE__ */ l(fe, {
           className: "flex w-full flex-col gap-0 overflow-hidden pt-3 group-data-[collapsible=icon]:items-center",
-          children: [/* @__PURE__ */ a(P, { count: e }), /* @__PURE__ */ a(_, { count: t })]
+          children: [/* @__PURE__ */ a(O, { count: e }), /* @__PURE__ */ a(_, { count: t })]
         }),
-        /* @__PURE__ */ a(fe, {
+        /* @__PURE__ */ a(xe, {
           className: "w-full gap-0 p-0 group-data-[collapsible=icon]:items-center",
           children: /* @__PURE__ */ a(z, {})
         })
@@ -692,11 +695,11 @@ function $e({ logo: e, compactedLogo: t, logoSubtext: o, collapsible: r = "icon"
   }), y = ke(S, c), v = vt(m);
   return /* @__PURE__ */ a(Ee.Provider, {
     value: { side: x },
-    children: /* @__PURE__ */ a(ve, {
+    children: /* @__PURE__ */ a(be, {
       collapsible: r,
       side: x,
-      width: ye,
-      collapsedWidth: Ce,
+      width: ge,
+      collapsedWidth: Ne,
       dir: f,
       className: p("bg-transparent", u),
       ...n,
@@ -709,7 +712,7 @@ function $e({ logo: e, compactedLogo: t, logoSubtext: o, collapsible: r = "icon"
           backgroundClass: y
         }),
         children: [
-          /* @__PURE__ */ a(ge, {
+          /* @__PURE__ */ a(me, {
             className: "h-[68px] w-full p-2",
             children: /* @__PURE__ */ a(U, {
               logo: e,
@@ -717,11 +720,11 @@ function $e({ logo: e, compactedLogo: t, logoSubtext: o, collapsible: r = "icon"
               subtext: o
             })
           }),
-          /* @__PURE__ */ a(xe, {
+          /* @__PURE__ */ a(fe, {
             className: "flex w-full flex-col gap-0 overflow-hidden pt-3 group-data-[collapsible=icon]:items-center",
             children: v.explicitContent ? v.explicitContent.props.children : v.content
           }),
-          /* @__PURE__ */ a(fe, {
+          /* @__PURE__ */ a(xe, {
             className: "w-full gap-0 p-0 group-data-[collapsible=icon]:items-center",
             children: v.explicitFooter ? v.explicitFooter.props.children : v.footer
           })
@@ -735,15 +738,15 @@ var k = Object.assign($e, {
   Header: G,
   Content: q,
   Footer: K,
-  Nav: Z,
+  Nav: X,
   NavSection: De,
-  NavItem: Pe,
+  NavItem: Oe,
   NavSub: _e,
-  NavSkeleton: P,
-  ChatList: J,
+  NavSkeleton: O,
+  ChatList: Z,
   ChatItem: ze,
   ChatListSkeleton: _,
-  Account: Q,
+  Account: J,
   AccountSkeleton: z,
   Skeleton: je
 }), F = {
@@ -760,10 +763,10 @@ var k = Object.assign($e, {
   rounded: "boolean",
   logoSubtext: "string"
 }, Ct = {
-  home: Xe,
+  home: Qe,
   users: ht,
   calendar: Ke,
-  "file-text": Qe,
+  "file-text": Je,
   settings: rt,
   "message-circle": ue,
   workflow: nt
@@ -778,7 +781,7 @@ function kt(e) {
     if (o) return g.createElement(o, { "aria-hidden": !0 });
     de.has(t) || (de.add(t), console.warn(`[hf-app-sidebar] Unsupported nav item icon "${t}". Falling back to "circle".`));
   }
-  return g.createElement(Je, { "aria-hidden": !0 });
+  return g.createElement(Ze, { "aria-hidden": !0 });
 }
 function wt(e) {
   return e.type === "section";
@@ -841,7 +844,7 @@ var Fe = class extends Ge {
       subtitle: r.subtitle,
       avatarSrc: r.avatarSrc,
       isOnline: r.isOnline
-    }))), t && f.push(g.createElement(ot, {
+    }))), t && f.push(g.createElement(et, {
       key: "inset",
       connected: e.connected
     }, Ve(t))), g.createElement(Ye, {