@humain/ui 2.2.7 → 2.2.9

package/dist/wc/hf-display-value.js

@@ -1,17 +1,17 @@
 import { a as V } from "./rolldown-runtime.js";
-import { i as q, n as L, t as $ } from "./vendor/react.js";
+import { i as L, n as $, t as O } from "./vendor/react.js";
 import { n as l } from "./utils.js";
-import { c as O, s as _ } from "./_shared.js";
-import { t as P } from "./circle-question-mark.js";
+import { c as P, s as _ } from "./_shared.js";
+import { t as q } from "./circle-question-mark.js";
 import { t as v } from "./Avatar.js";
-import { t as y } from "./Badge.js";
+import { t as N } from "./Badge.js";
 import { n as M, r as R, t as Z } from "./tooltip2.js";
-var g = /* @__PURE__ */ V(q(), 1), e = $();
+var g = /* @__PURE__ */ V(L(), 1), e = O();
 function B(t) {
   return t.id ?? `${t.label}:${t.avatarAlt ?? "no-avatar"}`;
 }
-function H({ label: t, avatar: s, avatarAlt: r, ...a }) {
-  return /* @__PURE__ */ (0, e.jsx)(y, {
+function H({ label: t, avatar: s, avatarAlt: r, ...n }) {
+  return /* @__PURE__ */ (0, e.jsx)(N, {
     variant: "outline",
     shape: "rounded",
     size: "md",
@@ -22,7 +22,7 @@ function H({ label: t, avatar: s, avatarAlt: r, ...a }) {
       size: "sm",
       shape: "circle"
     }) : void 0,
-    ...a,
+    ...n,
     children: t
   });
 }
@@ -30,13 +30,13 @@ function W({ label: t, helpIcon: s, helpTooltip: r }) {
   return t ? /* @__PURE__ */ (0, e.jsxs)("div", {
     className: "flex items-center gap-0.5",
     children: [/* @__PURE__ */ (0, e.jsx)("span", {
-      className: "text-sm font-medium leading-5 text-secondary-foreground dark:text-text-quaternary",
+      className: "text-sm font-medium leading-5 text-secondary-foreground",
       children: t
     }), s && /* @__PURE__ */ (0, e.jsxs)(Z, { children: [/* @__PURE__ */ (0, e.jsx)(R, { render: /* @__PURE__ */ (0, e.jsx)("button", {
       type: "button",
-      className: "text-muted-foreground hover:text-text-quaternary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none",
+      className: "text-muted-foreground hover:text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none",
       "aria-label": r || `Help for ${t}`,
-      children: /* @__PURE__ */ (0, e.jsx)(P, { className: "size-4" })
+      children: /* @__PURE__ */ (0, e.jsx)(q, { className: "size-4" })
     }) }), /* @__PURE__ */ (0, e.jsx)(M, { children: r || t })] })]
   }) : null;
 }
@@ -46,17 +46,17 @@ function I({ hint: t }) {
     children: t
   }) : null;
 }
-function K({ type: t, icon: s, value: r, children: a, leadingText: i, trailingText: m, displayPaddingY: o, linkHref: d, tags: n, avatarProps: p, avatarSupportingText: x, badgeProps: f, badgeLabel: h }) {
+function K({ type: t, icon: s, value: r, children: n, leadingText: i, trailingText: m, displayPaddingY: o, linkHref: c, tags: a, avatarProps: p, avatarSupportingText: u, badgeProps: x, badgeLabel: h }) {
   switch (t) {
     case "icon-leading":
       return /* @__PURE__ */ (0, e.jsxs)("div", {
         className: "flex items-center gap-2 flex-1 min-w-0",
         children: [s && /* @__PURE__ */ (0, e.jsx)("span", {
-          className: "shrink-0 text-text-quaternary [&>svg]:size-5",
+          className: "shrink-0 text-muted-foreground [&>svg]:size-5",
           children: s
         }), /* @__PURE__ */ (0, e.jsx)("span", {
           className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-          children: r ?? a
+          children: r ?? n
         })]
       });
     case "leading-text":
@@ -65,14 +65,14 @@ function K({ type: t, icon: s, value: r, children: a, leadingText: i, trailingTe
         children: [i && /* @__PURE__ */ (0, e.jsx)("div", {
           className: l("flex items-center gap-1 overflow-hidden", o),
           children: /* @__PURE__ */ (0, e.jsx)("span", {
-            className: "text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap",
+            className: "text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap",
             children: i
           })
         }), /* @__PURE__ */ (0, e.jsx)("div", {
           className: l("flex-1 flex items-center gap-2 min-w-0", o, "ps-3"),
           children: /* @__PURE__ */ (0, e.jsx)("span", {
             className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-            children: r ?? a
+            children: r ?? n
           })
         })]
       });
@@ -83,12 +83,12 @@ function K({ type: t, icon: s, value: r, children: a, leadingText: i, trailingTe
           className: l("flex-1 flex items-center gap-2 min-w-0", o),
           children: /* @__PURE__ */ (0, e.jsx)("span", {
             className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-            children: r ?? a
+            children: r ?? n
           })
         }), m && /* @__PURE__ */ (0, e.jsx)("div", {
           className: l("flex items-center gap-1 overflow-hidden px-3", o),
           children: /* @__PURE__ */ (0, e.jsx)("span", {
-            className: "text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap",
+            className: "text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap",
             children: m
           })
         })]
@@ -96,21 +96,21 @@ function K({ type: t, icon: s, value: r, children: a, leadingText: i, trailingTe
     case "link":
       return /* @__PURE__ */ (0, e.jsx)("div", {
         className: "flex items-center gap-2 flex-1 min-w-0",
-        children: d ? /* @__PURE__ */ (0, e.jsx)("a", {
-          href: d,
+        children: c ? /* @__PURE__ */ (0, e.jsx)("a", {
+          href: c,
           className: "text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline",
           target: "_blank",
           rel: "noopener noreferrer",
-          children: r ?? a ?? d
+          children: r ?? n ?? c
         }) : /* @__PURE__ */ (0, e.jsx)("span", {
           className: "text-sm font-normal leading-5 text-primary dark:text-primary truncate",
-          children: r ?? a
+          children: r ?? n
         })
       });
     case "tags":
       return /* @__PURE__ */ (0, e.jsxs)("div", {
         className: "flex items-center gap-1.5 flex-wrap",
-        children: [n?.map((u) => /* @__PURE__ */ (0, e.jsx)(H, { ...u }, B(u))), a]
+        children: [a?.map((f) => /* @__PURE__ */ (0, e.jsx)(H, { ...f }, B(f))), n]
       });
     case "avatar":
       return /* @__PURE__ */ (0, e.jsxs)("div", {
@@ -122,21 +122,21 @@ function K({ type: t, icon: s, value: r, children: a, leadingText: i, trailingTe
           className: "flex flex-col",
           children: [/* @__PURE__ */ (0, e.jsx)("span", {
             className: "text-sm font-semibold leading-5 text-foreground dark:text-foreground",
-            children: r ?? a ?? p?.fallback
-          }), x && /* @__PURE__ */ (0, e.jsx)("span", {
+            children: r ?? n ?? p?.fallback
+          }), u && /* @__PURE__ */ (0, e.jsx)("span", {
             className: "text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground",
-            children: x
+            children: u
           })]
         })]
       });
     case "badge":
       return /* @__PURE__ */ (0, e.jsx)("div", {
         className: "flex items-center gap-2 flex-1 min-w-0",
-        children: /* @__PURE__ */ (0, e.jsx)(y, {
+        children: /* @__PURE__ */ (0, e.jsx)(N, {
           variant: "dot",
           color: "success",
-          ...f,
-          children: h ?? r ?? a
+          ...x,
+          children: h ?? r ?? n
         })
       });
     default:
@@ -144,21 +144,21 @@ function K({ type: t, icon: s, value: r, children: a, leadingText: i, trailingTe
         className: "flex items-center gap-2 flex-1 min-w-0",
         children: /* @__PURE__ */ (0, e.jsx)("span", {
           className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-          children: r ?? a ?? /* @__PURE__ */ (0, e.jsx)("span", {
-            className: "text-muted-foreground dark:text-text-quaternary italic",
+          children: r ?? n ?? /* @__PURE__ */ (0, e.jsx)("span", {
+            className: "text-secondary-foreground italic",
             children: "—"
           })
         })
       });
   }
 }
-var N = g.forwardRef(({ className: t, label: s, value: r, hint: a, helpIcon: i = !1, helpTooltip: m, icon: o, size: d = "sm", type: n = "default", rtl: p = !1, leadingText: x, trailingText: f, linkHref: h, avatarProps: u, avatarSupportingText: w, badgeProps: C, badgeLabel: k, tags: T, children: E, ...z }, D) => {
-  const A = p, j = d === "md" ? "py-2.5" : "py-2";
+var y = g.forwardRef(({ className: t, label: s, value: r, hint: n, helpIcon: i = !1, helpTooltip: m, icon: o, size: c = "sm", type: a = "default", rtl: p = !1, leadingText: u, trailingText: x, linkHref: h, avatarProps: f, avatarSupportingText: w, badgeProps: C, badgeLabel: k, tags: T, children: E, ...z }, D) => {
+  const A = p, j = c === "md" ? "py-2.5" : "py-2";
   return /* @__PURE__ */ (0, e.jsxs)("div", {
     ref: D,
     "data-slot": "display-value",
     dir: A ? "rtl" : void 0,
-    className: l("flex flex-col gap-1.5", n === "tags" || n === "avatar" || n === "badge" ? "w-[400px]" : "w-[320px]", t),
+    className: l("flex flex-col gap-1.5", a === "tags" || a === "avatar" || a === "badge" ? "w-[400px]" : "w-[320px]", t),
     ...z,
     children: [
       /* @__PURE__ */ (0, e.jsx)(W, {
@@ -168,29 +168,29 @@ var N = g.forwardRef(({ className: t, label: s, value: r, hint: a, helpIcon: i =
       }),
       /* @__PURE__ */ (0, e.jsx)("div", {
         "data-slot": "display-value-content",
-        className: l("flex items-center gap-2 w-full rounded-md", n !== "leading-text" && n !== "trailing-text" && j),
+        className: l("flex items-center gap-2 w-full rounded-md", a !== "leading-text" && a !== "trailing-text" && j),
         children: /* @__PURE__ */ (0, e.jsx)(K, {
-          type: n,
+          type: a,
           icon: o,
           value: r,
-          leadingText: x,
-          trailingText: f,
+          leadingText: u,
+          trailingText: x,
           displayPaddingY: j,
           linkHref: h,
           tags: T,
-          avatarProps: u,
+          avatarProps: f,
           avatarSupportingText: w,
           badgeProps: C,
           badgeLabel: k,
           children: E
         })
       }),
-      /* @__PURE__ */ (0, e.jsx)(I, { hint: a })
+      /* @__PURE__ */ (0, e.jsx)(I, { hint: n })
     ]
   });
 });
-N.displayName = "DisplayValue";
-var Q = L(), c = {
+y.displayName = "DisplayValue";
+var Q = $(), d = {
   label: "string",
   value: "json",
   hint: "string",
@@ -233,26 +233,26 @@ var Q = L(), c = {
     this._render();
   }
   static get observedAttributes() {
-    return Object.keys(c).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
+    return Object.keys(d).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
   }
   _setProp(t, s) {
-    const r = c[t] || "string";
-    this._props[t] = O(s, r), this._render();
+    const r = d[t] || "string";
+    this._props[t] = P(s, r), this._render();
   }
   _getProp(t) {
     if (t in this._props) return this._props[t];
-    const s = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = c[t] || "string";
+    const s = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = d[t] || "string";
     return _(this.getAttribute(s), r);
   }
   _render() {
     if (!this._root || !this._childrenContainer) return;
     const t = {};
-    for (const [r, a] of Object.entries(c)) if (r in this._props) t[r] = this._props[r];
+    for (const [r, n] of Object.entries(d)) if (r in this._props) t[r] = this._props[r];
     else {
       const i = r.replace(/([A-Z])/g, "-$1").toLowerCase();
-      t[r] = _(this.getAttribute(i), a);
+      t[r] = _(this.getAttribute(i), n);
     }
-    const s = g.createElement(N, t, g.createElement("span", {
+    const s = g.createElement(y, t, g.createElement("span", {
       ref: (r) => {
         r && this._childrenContainer && r.replaceWith(this._childrenContainer);
       },
@@ -261,7 +261,7 @@ var Q = L(), c = {
     this._root.render(s);
   }
 };
-for (const t of Object.keys(c)) Object.defineProperty(b.prototype, t, {
+for (const t of Object.keys(d)) Object.defineProperty(b.prototype, t, {
   get() {
     return this._getProp(t);
   },

package/dist/wc/hf-display-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-display-value.js","names":[],"sources":["../../src/components/molecules/forms/DisplayValue/DisplayValue.tsx","../../src/wc/hf-display-value.ts"],"sourcesContent":["import { HelpCircle } from 'lucide-react';\nimport * as React from 'react';\nimport { Badge, type BadgeProps } from '@/components/atoms/display/Badge';\nimport { Avatar, type AvatarProps } from '@/components/molecules/data/Avatar';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport type DisplayValueType =\n  | 'default'\n  | 'icon-leading'\n  | 'trailing-text'\n  | 'link'\n  | 'tags'\n  | 'leading-text'\n  | 'avatar'\n  | 'badge';\n\nexport interface DisplayValueTag\n  extends Omit<BadgeProps, 'avatar' | 'children'> {\n  label: string;\n  avatar?: string;\n  avatarAlt?: string;\n}\n\nexport interface DisplayValueProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text displayed above the field */\n  label?: string;\n  /** The main value to display */\n  value?: React.ReactNode;\n  /** Hint text displayed below the field */\n  hint?: string;\n  /** Show help icon with tooltip */\n  helpIcon?: boolean;\n  /** Tooltip content for help icon */\n  helpTooltip?: string;\n  /** Leading icon for icon-leading type */\n  icon?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Display type */\n  type?: DisplayValueType;\n  /** RTL layout support */\n  rtl?: boolean;\n  /** Leading text (for leading-text type) */\n  leadingText?: string;\n  /** Trailing text (for trailing-text type) */\n  trailingText?: string;\n  /** Link URL (for link type) */\n  linkHref?: string;\n  /** Avatar props (for avatar type) */\n  avatarProps?: AvatarProps;\n  /** Supporting text for avatar */\n  avatarSupportingText?: string;\n  /** Badge props (for badge type) */\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  /** Badge label (for badge type) */\n  badgeLabel?: string;\n  /** Tags data (for tags type) */\n  tags?: DisplayValueTag[];\n}\n\ntype DisplayTag = NonNullable<DisplayValueProps['tags']>[number];\n\nfunction getDisplayTagKey(tag: DisplayTag): React.Key {\n  return tag.id ?? `${tag.label}:${tag.avatarAlt ?? 'no-avatar'}`;\n}\n\nfunction DisplayValueBadge({ label, avatar, avatarAlt, ...props }: DisplayTag) {\n  return (\n    <Badge\n      variant=\"outline\"\n      shape=\"rounded\"\n      size=\"md\"\n      avatar={\n        avatar ? (\n          <Avatar\n            src={avatar}\n            alt={avatarAlt ?? ''}\n            fallback={label}\n            size=\"sm\"\n            shape=\"circle\"\n          />\n        ) : undefined\n      }\n      {...props}\n    >\n      {label}\n    </Badge>\n  );\n}\n\ninterface DisplayValueLabelProps {\n  label?: string;\n  helpIcon: boolean;\n  helpTooltip?: string;\n}\n\nfunction DisplayValueLabel({\n  label,\n  helpIcon,\n  helpTooltip,\n}: DisplayValueLabelProps) {\n  if (!label) return null;\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      <span className=\"text-sm font-medium leading-5 text-secondary-foreground dark:text-text-quaternary\">\n        {label}\n      </span>\n      {helpIcon && (\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-text-quaternary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none\"\n                aria-label={helpTooltip || `Help for ${label}`}\n              >\n                <HelpCircle className=\"size-4\" />\n              </button>\n            }\n          />\n          <TooltipPopup>{helpTooltip || label}</TooltipPopup>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nfunction DisplayValueHint({ hint }: { hint?: string }) {\n  if (!hint) return null;\n\n  return (\n    <p className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground w-full\">\n      {hint}\n    </p>\n  );\n}\n\ninterface DisplayValueContentProps {\n  type: DisplayValueType;\n  icon?: React.ReactNode;\n  value?: React.ReactNode;\n  children?: React.ReactNode;\n  leadingText?: string;\n  trailingText?: string;\n  displayPaddingY: string;\n  linkHref?: string;\n  tags?: DisplayValueProps['tags'];\n  avatarProps?: AvatarProps;\n  avatarSupportingText?: string;\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  badgeLabel?: string;\n}\n\nfunction DisplayValueContent({\n  type,\n  icon,\n  value,\n  children,\n  leadingText,\n  trailingText,\n  displayPaddingY,\n  linkHref,\n  tags,\n  avatarProps,\n  avatarSupportingText,\n  badgeProps,\n  badgeLabel,\n}: DisplayValueContentProps) {\n  switch (type) {\n    case 'icon-leading':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {icon && (\n            <span className=\"shrink-0 text-text-quaternary [&>svg]:size-5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children}\n          </span>\n        </div>\n      );\n\n    case 'leading-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          {leadingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap\">\n                {leadingText}\n              </span>\n            </div>\n          )}\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n              'ps-3',\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n        </div>\n      );\n\n    case 'trailing-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n          {trailingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden px-3',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap\">\n                {trailingText}\n              </span>\n            </div>\n          )}\n        </div>\n      );\n\n    case 'link':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {linkHref ? (\n            <a\n              href={linkHref}\n              className=\"text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {value ?? children ?? linkHref}\n            </a>\n          ) : (\n            <span className=\"text-sm font-normal leading-5 text-primary dark:text-primary truncate\">\n              {value ?? children}\n            </span>\n          )}\n        </div>\n      );\n\n    case 'tags':\n      return (\n        <div className=\"flex items-center gap-1.5 flex-wrap\">\n          {tags?.map((tag) => (\n            <DisplayValueBadge key={getDisplayTagKey(tag)} {...tag} />\n          ))}\n          {children}\n        </div>\n      );\n\n    case 'avatar':\n      return (\n        <div className=\"flex items-center gap-2\">\n          <Avatar size=\"lg\" {...avatarProps} />\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm font-semibold leading-5 text-foreground dark:text-foreground\">\n              {value ?? children ?? avatarProps?.fallback}\n            </span>\n            {avatarSupportingText && (\n              <span className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground\">\n                {avatarSupportingText}\n              </span>\n            )}\n          </div>\n        </div>\n      );\n\n    case 'badge':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <Badge variant=\"dot\" color=\"success\" {...badgeProps}>\n            {badgeLabel ?? value ?? children}\n          </Badge>\n        </div>\n      );\n\n    default:\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children ?? (\n              <span className=\"text-muted-foreground dark:text-text-quaternary italic\">\n                —\n              </span>\n            )}\n          </span>\n        </div>\n      );\n  }\n}\n\nconst DisplayValue = React.forwardRef<HTMLDivElement, DisplayValueProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      hint,\n      helpIcon = false,\n      helpTooltip,\n      icon,\n      size = 'sm',\n      type = 'default',\n      rtl = false,\n      leadingText,\n      trailingText,\n      linkHref,\n      avatarProps,\n      avatarSupportingText,\n      badgeProps,\n      badgeLabel,\n      tags,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRTL = rtl;\n\n    // Size-based padding for display area\n    const displayPaddingY = size === 'md' ? 'py-2.5' : 'py-2';\n\n    // Determine container width based on type\n    const containerWidth =\n      type === 'tags' || type === 'avatar' || type === 'badge'\n        ? 'w-[400px]'\n        : 'w-[320px]';\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"display-value\"\n        dir={isRTL ? 'rtl' : undefined}\n        className={cn('flex flex-col gap-1.5', containerWidth, className)}\n        {...props}\n      >\n        {/* Label section */}\n        <DisplayValueLabel\n          label={label}\n          helpIcon={helpIcon}\n          helpTooltip={helpTooltip}\n        />\n\n        {/* Display section */}\n        <div\n          data-slot=\"display-value-content\"\n          className={cn(\n            'flex items-center gap-2 w-full rounded-md',\n            // Only add vertical padding for non-special types\n            type !== 'leading-text' &&\n              type !== 'trailing-text' &&\n              displayPaddingY,\n          )}\n        >\n          <DisplayValueContent\n            type={type}\n            icon={icon}\n            value={value}\n            leadingText={leadingText}\n            trailingText={trailingText}\n            displayPaddingY={displayPaddingY}\n            linkHref={linkHref}\n            tags={tags}\n            avatarProps={avatarProps}\n            avatarSupportingText={avatarSupportingText}\n            badgeProps={badgeProps}\n            badgeLabel={badgeLabel}\n          >\n            {children}\n          </DisplayValueContent>\n        </div>\n\n        {/* Hint section */}\n        <DisplayValueHint hint={hint} />\n      </div>\n    );\n  },\n);\n\nDisplayValue.displayName = 'DisplayValue';\n\nexport { DisplayValue };\n","/**\n * Web Component wrapper for DisplayValue\n * Custom element: <hf-display-value>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { DisplayValue } from '../components/molecules/forms/DisplayValue';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    label: 'string',\n    value: 'json',\n    hint: 'string',\n    helpIcon: 'boolean',\n    helpTooltip: 'string',\n    icon: 'json',\n    size: 'string',\n    type: 'string',\n    rtl: 'boolean',\n    leadingText: 'string',\n    trailingText: 'string',\n    linkHref: 'string',\n    avatarProps: 'json',\n    avatarSupportingText: 'string',\n    badgeProps: 'json',\n    badgeLabel: 'string',\n    tags: 'json'\n};\n\nclass DisplayValueWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      DisplayValue,\n      props,\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(DisplayValueWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-display-value')) {\n  customElements.define('hf-display-value', DisplayValueWC);\n}\n\nexport { DisplayValueWC };\nexport default DisplayValueWC;\n"],"mappings":"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"}
+{"version":3,"file":"hf-display-value.js","names":[],"sources":["../../src/components/molecules/forms/DisplayValue/DisplayValue.tsx","../../src/wc/hf-display-value.ts"],"sourcesContent":["import { HelpCircle } from 'lucide-react';\nimport * as React from 'react';\nimport { Badge, type BadgeProps } from '@/components/atoms/display/Badge';\nimport { Avatar, type AvatarProps } from '@/components/molecules/data/Avatar';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport type DisplayValueType =\n  | 'default'\n  | 'icon-leading'\n  | 'trailing-text'\n  | 'link'\n  | 'tags'\n  | 'leading-text'\n  | 'avatar'\n  | 'badge';\n\nexport interface DisplayValueTag\n  extends Omit<BadgeProps, 'avatar' | 'children'> {\n  label: string;\n  avatar?: string;\n  avatarAlt?: string;\n}\n\nexport interface DisplayValueProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text displayed above the field */\n  label?: string;\n  /** The main value to display */\n  value?: React.ReactNode;\n  /** Hint text displayed below the field */\n  hint?: string;\n  /** Show help icon with tooltip */\n  helpIcon?: boolean;\n  /** Tooltip content for help icon */\n  helpTooltip?: string;\n  /** Leading icon for icon-leading type */\n  icon?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Display type */\n  type?: DisplayValueType;\n  /** RTL layout support */\n  rtl?: boolean;\n  /** Leading text (for leading-text type) */\n  leadingText?: string;\n  /** Trailing text (for trailing-text type) */\n  trailingText?: string;\n  /** Link URL (for link type) */\n  linkHref?: string;\n  /** Avatar props (for avatar type) */\n  avatarProps?: AvatarProps;\n  /** Supporting text for avatar */\n  avatarSupportingText?: string;\n  /** Badge props (for badge type) */\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  /** Badge label (for badge type) */\n  badgeLabel?: string;\n  /** Tags data (for tags type) */\n  tags?: DisplayValueTag[];\n}\n\ntype DisplayTag = NonNullable<DisplayValueProps['tags']>[number];\n\nfunction getDisplayTagKey(tag: DisplayTag): React.Key {\n  return tag.id ?? `${tag.label}:${tag.avatarAlt ?? 'no-avatar'}`;\n}\n\nfunction DisplayValueBadge({ label, avatar, avatarAlt, ...props }: DisplayTag) {\n  return (\n    <Badge\n      variant=\"outline\"\n      shape=\"rounded\"\n      size=\"md\"\n      avatar={\n        avatar ? (\n          <Avatar\n            src={avatar}\n            alt={avatarAlt ?? ''}\n            fallback={label}\n            size=\"sm\"\n            shape=\"circle\"\n          />\n        ) : undefined\n      }\n      {...props}\n    >\n      {label}\n    </Badge>\n  );\n}\n\ninterface DisplayValueLabelProps {\n  label?: string;\n  helpIcon: boolean;\n  helpTooltip?: string;\n}\n\nfunction DisplayValueLabel({\n  label,\n  helpIcon,\n  helpTooltip,\n}: DisplayValueLabelProps) {\n  if (!label) return null;\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      <span className=\"text-sm font-medium leading-5 text-secondary-foreground\">\n        {label}\n      </span>\n      {helpIcon && (\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none\"\n                aria-label={helpTooltip || `Help for ${label}`}\n              >\n                <HelpCircle className=\"size-4\" />\n              </button>\n            }\n          />\n          <TooltipPopup>{helpTooltip || label}</TooltipPopup>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nfunction DisplayValueHint({ hint }: { hint?: string }) {\n  if (!hint) return null;\n\n  return (\n    <p className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground w-full\">\n      {hint}\n    </p>\n  );\n}\n\ninterface DisplayValueContentProps {\n  type: DisplayValueType;\n  icon?: React.ReactNode;\n  value?: React.ReactNode;\n  children?: React.ReactNode;\n  leadingText?: string;\n  trailingText?: string;\n  displayPaddingY: string;\n  linkHref?: string;\n  tags?: DisplayValueProps['tags'];\n  avatarProps?: AvatarProps;\n  avatarSupportingText?: string;\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  badgeLabel?: string;\n}\n\nfunction DisplayValueContent({\n  type,\n  icon,\n  value,\n  children,\n  leadingText,\n  trailingText,\n  displayPaddingY,\n  linkHref,\n  tags,\n  avatarProps,\n  avatarSupportingText,\n  badgeProps,\n  badgeLabel,\n}: DisplayValueContentProps) {\n  switch (type) {\n    case 'icon-leading':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {icon && (\n            <span className=\"shrink-0 text-muted-foreground [&>svg]:size-5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children}\n          </span>\n        </div>\n      );\n\n    case 'leading-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          {leadingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap\">\n                {leadingText}\n              </span>\n            </div>\n          )}\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n              'ps-3',\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n        </div>\n      );\n\n    case 'trailing-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n          {trailingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden px-3',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap\">\n                {trailingText}\n              </span>\n            </div>\n          )}\n        </div>\n      );\n\n    case 'link':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {linkHref ? (\n            <a\n              href={linkHref}\n              className=\"text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {value ?? children ?? linkHref}\n            </a>\n          ) : (\n            <span className=\"text-sm font-normal leading-5 text-primary dark:text-primary truncate\">\n              {value ?? children}\n            </span>\n          )}\n        </div>\n      );\n\n    case 'tags':\n      return (\n        <div className=\"flex items-center gap-1.5 flex-wrap\">\n          {tags?.map((tag) => (\n            <DisplayValueBadge key={getDisplayTagKey(tag)} {...tag} />\n          ))}\n          {children}\n        </div>\n      );\n\n    case 'avatar':\n      return (\n        <div className=\"flex items-center gap-2\">\n          <Avatar size=\"lg\" {...avatarProps} />\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm font-semibold leading-5 text-foreground dark:text-foreground\">\n              {value ?? children ?? avatarProps?.fallback}\n            </span>\n            {avatarSupportingText && (\n              <span className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground\">\n                {avatarSupportingText}\n              </span>\n            )}\n          </div>\n        </div>\n      );\n\n    case 'badge':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <Badge variant=\"dot\" color=\"success\" {...badgeProps}>\n            {badgeLabel ?? value ?? children}\n          </Badge>\n        </div>\n      );\n\n    default:\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children ?? (\n              <span className=\"text-secondary-foreground italic\">—</span>\n            )}\n          </span>\n        </div>\n      );\n  }\n}\n\nconst DisplayValue = React.forwardRef<HTMLDivElement, DisplayValueProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      hint,\n      helpIcon = false,\n      helpTooltip,\n      icon,\n      size = 'sm',\n      type = 'default',\n      rtl = false,\n      leadingText,\n      trailingText,\n      linkHref,\n      avatarProps,\n      avatarSupportingText,\n      badgeProps,\n      badgeLabel,\n      tags,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRTL = rtl;\n\n    // Size-based padding for display area\n    const displayPaddingY = size === 'md' ? 'py-2.5' : 'py-2';\n\n    // Determine container width based on type\n    const containerWidth =\n      type === 'tags' || type === 'avatar' || type === 'badge'\n        ? 'w-[400px]'\n        : 'w-[320px]';\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"display-value\"\n        dir={isRTL ? 'rtl' : undefined}\n        className={cn('flex flex-col gap-1.5', containerWidth, className)}\n        {...props}\n      >\n        {/* Label section */}\n        <DisplayValueLabel\n          label={label}\n          helpIcon={helpIcon}\n          helpTooltip={helpTooltip}\n        />\n\n        {/* Display section */}\n        <div\n          data-slot=\"display-value-content\"\n          className={cn(\n            'flex items-center gap-2 w-full rounded-md',\n            // Only add vertical padding for non-special types\n            type !== 'leading-text' &&\n              type !== 'trailing-text' &&\n              displayPaddingY,\n          )}\n        >\n          <DisplayValueContent\n            type={type}\n            icon={icon}\n            value={value}\n            leadingText={leadingText}\n            trailingText={trailingText}\n            displayPaddingY={displayPaddingY}\n            linkHref={linkHref}\n            tags={tags}\n            avatarProps={avatarProps}\n            avatarSupportingText={avatarSupportingText}\n            badgeProps={badgeProps}\n            badgeLabel={badgeLabel}\n          >\n            {children}\n          </DisplayValueContent>\n        </div>\n\n        {/* Hint section */}\n        <DisplayValueHint hint={hint} />\n      </div>\n    );\n  },\n);\n\nDisplayValue.displayName = 'DisplayValue';\n\nexport { DisplayValue };\n","/**\n * Web Component wrapper for DisplayValue\n * Custom element: <hf-display-value>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { DisplayValue } from '../components/molecules/forms/DisplayValue';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    label: 'string',\n    value: 'json',\n    hint: 'string',\n    helpIcon: 'boolean',\n    helpTooltip: 'string',\n    icon: 'json',\n    size: 'string',\n    type: 'string',\n    rtl: 'boolean',\n    leadingText: 'string',\n    trailingText: 'string',\n    linkHref: 'string',\n    avatarProps: 'json',\n    avatarSupportingText: 'string',\n    badgeProps: 'json',\n    badgeLabel: 'string',\n    tags: 'json'\n};\n\nclass DisplayValueWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      DisplayValue,\n      props,\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(DisplayValueWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-display-value')) {\n  customElements.define('hf-display-value', DisplayValueWC);\n}\n\nexport { DisplayValueWC };\nexport default DisplayValueWC;\n"],"mappings":"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"}

package/dist/wc/hf-nav-account-menu.js

@@ -57,7 +57,7 @@ var b = O("flex items-center gap-4 w-full text-left cursor-pointer transition-co
   } },
   defaultVariants: { type: "card" }
 });
-function q({ avatar: e, name: n, email: o, badge: r, showLogoutButton: s, onLogout: c, compact: a = !1, className: l }) {
+function F({ avatar: e, name: n, email: o, badge: r, showLogoutButton: s, onLogout: c, compact: a = !1, className: l }) {
   const { type: d, open: f } = N(), h = (y) => {
     y.stopPropagation(), c?.();
   }, m = e ? /* @__PURE__ */ (0, t.jsx)("div", {
@@ -92,7 +92,7 @@ function q({ avatar: e, name: n, email: o, badge: r, showLogoutButton: s, onLogo
     }), /* @__PURE__ */ (0, t.jsx)("button", {
       type: "button",
       onClick: h,
-      className: "shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
+      className: "shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
       "aria-label": "Sign out",
       children: /* @__PURE__ */ (0, t.jsx)(H, { className: "size-5" })
     })]
@@ -107,7 +107,7 @@ function q({ avatar: e, name: n, email: o, badge: r, showLogoutButton: s, onLogo
     children: [m, !a && /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [x, /* @__PURE__ */ (0, t.jsx)(T, { className: i("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none", f ? "rotate-180" : "rtl:rotate-180") })] })]
   });
 }
-function F({ side: e = "right", align: n = "end", sideOffset: o = 8, children: r, className: s }) {
+function q({ side: e = "right", align: n = "end", sideOffset: o = 8, children: r, className: s }) {
   return /* @__PURE__ */ (0, t.jsx)(L, {
     side: e,
     align: n,
@@ -262,8 +262,8 @@ function G({ variant: e = "theme-gradient", size: n = "sm", checked: o, onChecke
   });
 }
 _.displayName = "NavAccountMenu";
-q.displayName = "NavAccountMenuTrigger";
-F.displayName = "NavAccountMenuContent";
+F.displayName = "NavAccountMenuTrigger";
+q.displayName = "NavAccountMenuContent";
 R.displayName = "NavAccountMenuHeader";
 W.displayName = "NavAccountMenuSection";
 Z.displayName = "NavAccountMenuItem";

package/dist/wc/hf-nav-account-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-nav-account-menu.js","names":[],"sources":["../../../../../../../../../../../Users/akarim/Documents/test/humain_foundation_ui/node_modules/.bun/lucide-react@1.27.0+0f58469d5b3bd39f/node_modules/lucide-react/dist/esm/icons/log-out.mjs","../../src/components/templates/NavAccountMenu/NavAccountMenu.tsx","../../src/wc/hf-nav-account-menu.ts"],"sourcesContent":["/**\n * @license lucide-react v1.27.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\"path\", { d: \"m16 17 5-5-5-5\", key: \"1bji2h\" }],\n  [\"path\", { d: \"M21 12H9\", key: \"dn1m92\" }],\n  [\"path\", { d: \"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\", key: \"1uf3rs\" }]\n];\nconst LogOut = createLucideIcon(\"log-out\", __iconNode);\n\nexport { __iconNode, LogOut as default };\n//# sourceMappingURL=log-out.mjs.map\n","'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight, LogOut } from 'lucide-react';\nimport * as React from 'react';\nimport { Switch } from '@/components/atoms/forms/Switch/Switch';\nimport { Kbd } from '@/components/molecules/data/Kbd';\nimport {\n  PopoverRoot as PopoverBase,\n  PopoverPopup as PopoverContentBase,\n  PopoverTrigger as PopoverTriggerBase,\n} from '@/components/organisms/overlays/Popover';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Context for NavAccountMenu\n// ============================================\n\ninterface NavAccountMenuContextValue {\n  type: 'card' | 'simple';\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst [NavAccountMenuContext, useNavAccountMenuContext] =\n  createSafeContext<NavAccountMenuContextValue>('NavAccountMenu');\n\n// ============================================\n// NavAccountMenu (Root)\n// ============================================\n\nexport interface NavAccountMenuProps {\n  /** Trigger variant style */\n  type?: 'card' | 'simple';\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Initial open state for uncontrolled mode */\n  defaultOpen?: boolean;\n  /** Children (trigger + content) */\n  children: React.ReactNode;\n}\n\nfunction NavAccountMenu({\n  type = 'card',\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: NavAccountMenuProps) {\n  const [open, handleOpenChange] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const contextValue = React.useMemo(\n    () => ({\n      type,\n      open,\n      onOpenChange: handleOpenChange,\n    }),\n    [type, open, handleOpenChange],\n  );\n\n  return (\n    <NavAccountMenuContext.Provider value={contextValue}>\n      <PopoverBase open={open} onOpenChange={handleOpenChange}>\n        <div data-slot=\"nav-account-menu\">{children}</div>\n      </PopoverBase>\n    </NavAccountMenuContext.Provider>\n  );\n}\n\n// ============================================\n// NavAccountMenuTrigger\n// ============================================\n\nconst triggerVariants = cva(\n  'flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none',\n  {\n    variants: {\n      type: {\n        card: 'bg-surface-1 border border-border rounded-xl shadow-xs p-3 hover:bg-surface-2',\n        simple: 'border border-border px-2 py-3 hover:bg-surface-2 rounded-lg',\n      },\n    },\n    defaultVariants: {\n      type: 'card',\n    },\n  },\n);\n\nexport interface NavAccountMenuTriggerProps\n  extends VariantProps<typeof triggerVariants> {\n  /** Avatar element (use Avatar component) */\n  avatar?: React.ReactNode;\n  /** User display name */\n  name: string;\n  /** User email address */\n  email?: string;\n  /** Optional badge after name (e.g., \"External\" tag) */\n  badge?: React.ReactNode;\n  /** Show logout button instead of chevron (for 'simple' type) */\n  showLogoutButton?: boolean;\n  /** Logout callback for simple variant */\n  onLogout?: () => void;\n  /** Show only avatar without name/email - useful for collapsed sidebar */\n  compact?: boolean;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuTrigger({\n  avatar,\n  name,\n  email,\n  badge,\n  showLogoutButton,\n  onLogout,\n  compact = false,\n  className,\n}: NavAccountMenuTriggerProps) {\n  const { type, open } = useNavAccountMenuContext();\n\n  const handleLogoutClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onLogout?.();\n  };\n\n  const avatarContent = avatar ? (\n    <div className=\"shrink-0\">{avatar}</div>\n  ) : null;\n  const accountDetails = !compact ? (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"min-w-0 truncate text-sm font-semibold text-foreground\">\n          {name}\n        </span>\n        {badge && <span className=\"shrink-0\">{badge}</span>}\n      </div>\n      {email && (\n        <span className=\"truncate text-sm text-muted-foreground\">{email}</span>\n      )}\n    </div>\n  ) : null;\n\n  if (type === 'simple' && showLogoutButton && !compact) {\n    return (\n      <div\n        data-slot=\"nav-account-menu-trigger\"\n        className={cn(triggerVariants({ type }), 'group/trigger', className)}\n      >\n        <PopoverTriggerBase\n          render={\n            <button\n              type=\"button\"\n              aria-haspopup=\"true\"\n              className=\"flex min-w-0 flex-1 items-center gap-4 text-left outline-none\"\n            />\n          }\n        >\n          {avatarContent}\n          {accountDetails}\n        </PopoverTriggerBase>\n        <button\n          type=\"button\"\n          onClick={handleLogoutClick}\n          className=\"shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\"\n          aria-label=\"Sign out\"\n        >\n          <LogOut className=\"size-5\" />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <PopoverTriggerBase\n      render={\n        <button\n          type=\"button\"\n          data-slot=\"nav-account-menu-trigger\"\n          aria-haspopup=\"true\"\n          aria-label={compact ? `${name} account menu` : undefined}\n          className={cn(\n            triggerVariants({ type }),\n            'group/trigger',\n            compact ? 'w-auto justify-center' : 'max-w-[280px]',\n            className,\n          )}\n        />\n      }\n    >\n      {avatarContent}\n      {!compact && (\n        <>\n          {accountDetails}\n          <ChevronRight\n            className={cn(\n              'size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none',\n              open ? 'rotate-180' : 'rtl:rotate-180',\n            )}\n          />\n        </>\n      )}\n    </PopoverTriggerBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuContent\n// ============================================\n\nexport interface NavAccountMenuContentProps {\n  /** Popover side positioning */\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Popover alignment */\n  align?: 'start' | 'center' | 'end';\n  /** Side offset */\n  sideOffset?: number;\n  /** Children */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuContent({\n  side = 'right',\n  align = 'end',\n  sideOffset = 8,\n  children,\n  className,\n}: NavAccountMenuContentProps) {\n  return (\n    <PopoverContentBase\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      aria-label=\"Account menu\"\n      data-slot=\"nav-account-menu-content\"\n      className={cn(\n        'w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden',\n        'shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]',\n        'data-open:animate-in data-closed:animate-out',\n        'data-closed:fade-out-0 data-open:fade-in-0',\n        'data-closed:zoom-out-95 data-open:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        'duration-200 motion-reduce:animate-none',\n        className,\n      )}\n    >\n      <div className=\"flex flex-col py-2\" role=\"menu\" aria-label=\"Account menu\">\n        {children}\n      </div>\n    </PopoverContentBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuHeader\n// ============================================\n\nexport interface NavAccountMenuHeaderProps {\n  /** Header title (e.g. \"Profile\") */\n  title: string;\n  /** Subtitle text or custom React node (e.g. \"Last login 22 May, 2026 11:30pm\") */\n  subtitle?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuHeader({\n  title,\n  subtitle,\n  className,\n}: NavAccountMenuHeaderProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-header\"\n      className={cn('px-6 pb-3 delight-fade-in', className)}\n    >\n      <p className=\"text-base font-semibold text-foreground\">{title}</p>\n      {subtitle &&\n        (typeof subtitle === 'string' ? (\n          <p className=\"mt-2 text-sm text-muted-foreground\">{subtitle}</p>\n        ) : (\n          <div className=\"mt-2\">{subtitle}</div>\n        ))}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSection\n// ============================================\n\nexport interface NavAccountMenuSectionProps {\n  /** Optional section header label */\n  label?: string;\n  /** Show top border separator between sections */\n  bordered?: boolean;\n  /** Section content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSection({\n  label,\n  bordered = false,\n  children,\n  className,\n}: NavAccountMenuSectionProps) {\n  return (\n    <section\n      data-slot=\"nav-account-menu-section\"\n      aria-label={label}\n      className={cn(\n        'flex flex-col gap-1 py-1.5',\n        bordered && 'border-t border-border',\n        className,\n      )}\n    >\n      {label && (\n        <div className=\"px-3 pt-1.5 pb-1\">\n          <span className=\"text-xs font-semibold text-muted-foreground\">\n            {label}\n          </span>\n        </div>\n      )}\n      {children}\n    </section>\n  );\n}\n\n// ============================================\n// NavAccountMenuItem\n// ============================================\n\n/**\n * Props passed to the render function for custom menu item rendering.\n */\nexport interface NavAccountMenuItemRenderProps {\n  /** Combined className for styling */\n  className: string;\n  /** Click handler that closes menu and triggers onSelect */\n  onClick: () => void;\n  /** Menu item content (icon, label, shortcut) */\n  children: React.ReactNode;\n}\n\n/**\n * Render prop type for polymorphic rendering.\n * Accepts a function that receives props and returns an element.\n */\ntype NavAccountMenuItemRenderFn = (\n  props: NavAccountMenuItemRenderProps,\n) => React.ReactElement;\n\nexport interface NavAccountMenuItemProps {\n  /** Left icon (20px) */\n  icon?: React.ReactNode;\n  /** Keyboard shortcut display */\n  shortcut?: string;\n  /** Destructive styling (red) */\n  destructive?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /**\n   * Render prop for polymorphic rendering.\n   * Use this to render the menu item as a different element (e.g., link).\n   * @example\n   * <NavAccountMenuItem\n   *   icon={<User01 />}\n   *   render={(props) => <a {...props} href=\"/profile\" />}\n   * >\n   *   View profile\n   * </NavAccountMenuItem>\n   */\n  render?: NavAccountMenuItemRenderFn;\n  /** Label text */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuItem({\n  icon,\n  shortcut,\n  destructive = false,\n  disabled = false,\n  onSelect,\n  render,\n  children,\n  className,\n}: NavAccountMenuItemProps) {\n  const { onOpenChange } = useNavAccountMenuContext();\n\n  const handleClick = () => {\n    if (disabled) return;\n    onSelect?.();\n    onOpenChange(false);\n  };\n\n  const content = (\n    <div className=\"flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none\">\n      <div className=\"flex flex-1 gap-2 items-center min-w-0\">\n        {icon && (\n          <span\n            className={cn(\n              'shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none',\n              destructive ? 'text-destructive' : 'text-foreground',\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span\n          className={cn(\n            'flex-1 text-sm truncate',\n            destructive ? 'text-destructive' : 'text-secondary-foreground',\n          )}\n        >\n          {children}\n        </span>\n      </div>\n      {shortcut && (\n        <Kbd variant=\"outline\" size=\"xs\" className=\"shrink-0\">\n          {shortcut}\n        </Kbd>\n      )}\n    </div>\n  );\n\n  const baseClassName = cn(\n    'group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none',\n    'hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted',\n    'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n    disabled && 'pointer-events-none opacity-50',\n    className,\n  );\n\n  if (render) {\n    return render({\n      className: baseClassName,\n      onClick: handleClick,\n      children: content,\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      data-slot=\"nav-account-menu-item\"\n      className={baseClassName}\n      onClick={handleClick}\n      disabled={disabled}\n      aria-disabled={disabled || undefined}\n    >\n      {content}\n    </button>\n  );\n}\n\n// ============================================\n// NavAccountMenuAccount\n// ============================================\n\nexport interface NavAccountMenuAccountProps {\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Account display name */\n  name: string;\n  /** Account email */\n  email: string;\n  /** Whether this account is currently selected */\n  selected?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuAccount({\n  avatar,\n  name,\n  email,\n  selected = false,\n  onSelect,\n  className,\n}: NavAccountMenuAccountProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-account\"\n      className={cn('flex items-center px-1.5 py-0 w-full', className)}\n    >\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        aria-checked={selected}\n        aria-label={`Switch to ${name} (${email})`}\n        className={cn(\n          'relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none',\n          'hover:bg-muted focus-visible:bg-muted',\n          'transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n          'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n          'text-left',\n          selected && 'bg-surface-2',\n        )}\n        onClick={onSelect}\n      >\n        {avatar && <div className=\"shrink-0\">{avatar}</div>}\n        <div className=\"flex flex-col min-w-0 flex-1\">\n          <span className=\"text-sm font-semibold text-foreground truncate\">\n            {name}\n          </span>\n          <span className=\"text-sm text-muted-foreground truncate\">\n            {email}\n          </span>\n        </div>\n        {/* Radio indicator */}\n        <div\n          aria-hidden=\"true\"\n          className={cn(\n            'size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n            selected\n              ? 'bg-primary border-primary'\n              : 'border-border bg-transparent',\n          )}\n        >\n          {selected && (\n            <div className=\"size-1.5 rounded-full bg-background delight-check-bounce\" />\n          )}\n        </div>\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSeparator\n// ============================================\n\nexport interface NavAccountMenuSeparatorProps {\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSeparator({ className }: NavAccountMenuSeparatorProps) {\n  return (\n    <hr\n      data-slot=\"nav-account-menu-separator\"\n      className={cn('h-px border-0 bg-border mx-5', className)}\n    />\n  );\n}\n\n// ============================================\n// NavAccountMenuFooter\n// ============================================\n\nexport interface NavAccountMenuFooterProps {\n  /** Footer content (typically buttons) */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuFooter({\n  children,\n  className,\n}: NavAccountMenuFooterProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-footer\"\n      className={cn('flex items-center justify-center px-5 pt-4', className)}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuThemeSwitch (uses Switch theme variant)\n// ============================================\n\nexport interface NavAccountMenuThemeSwitchProps {\n  /** Switch theme variant to render */\n  variant?:\n    | 'theme-gradient'\n    | 'theme-switch'\n    | 'theme-pill'\n    | 'theme-segmented';\n  /** Switch size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Controlled checked state (dark = checked) */\n  checked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Optional label displayed next to the switch (e.g. \"Light Mode\") */\n  label?: string;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuThemeSwitch({\n  variant = 'theme-gradient',\n  size = 'sm',\n  checked,\n  onCheckedChange,\n  label,\n  className,\n}: NavAccountMenuThemeSwitchProps) {\n  const switchId = React.useId();\n  const labelId = label ? `${switchId}-label` : undefined;\n\n  return (\n    <div\n      data-slot=\"nav-account-menu-theme-switch\"\n      className={cn('flex items-center px-1.5 py-0', className)}\n    >\n      <div className=\"flex items-center gap-2.5 p-2\">\n        <Switch\n          id={switchId}\n          variant={variant}\n          size={size}\n          checked={checked}\n          onCheckedChange={onCheckedChange}\n          aria-labelledby={labelId}\n          aria-label={label ? undefined : 'Theme selector'}\n        />\n        {label && (\n          <label\n            htmlFor={switchId}\n            id={labelId}\n            className=\"cursor-pointer text-sm text-secondary-foreground\"\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ============================================\n// Display Names\n// ============================================\n\nNavAccountMenu.displayName = 'NavAccountMenu';\nNavAccountMenuTrigger.displayName = 'NavAccountMenuTrigger';\nNavAccountMenuContent.displayName = 'NavAccountMenuContent';\nNavAccountMenuHeader.displayName = 'NavAccountMenuHeader';\nNavAccountMenuSection.displayName = 'NavAccountMenuSection';\nNavAccountMenuItem.displayName = 'NavAccountMenuItem';\nNavAccountMenuAccount.displayName = 'NavAccountMenuAccount';\nNavAccountMenuSeparator.displayName = 'NavAccountMenuSeparator';\nNavAccountMenuFooter.displayName = 'NavAccountMenuFooter';\nNavAccountMenuThemeSwitch.displayName = 'NavAccountMenuThemeSwitch';\n\n// ============================================\n// Exports\n// ============================================\n\nexport {\n  NavAccountMenu,\n  NavAccountMenuAccount,\n  NavAccountMenuContent,\n  NavAccountMenuFooter,\n  NavAccountMenuHeader,\n  NavAccountMenuItem,\n  NavAccountMenuSection,\n  NavAccountMenuSeparator,\n  NavAccountMenuThemeSwitch,\n  NavAccountMenuTrigger,\n  triggerVariants as navAccountMenuTriggerVariants,\n};\n","/**\n * Web Component wrapper for NavAccountMenu\n * Custom element: <hf-nav-account-menu>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { NavAccountMenu } from '../components/templates/NavAccountMenu';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Event wrapper that dispatches custom DOM events\n */\nfunction createEventDispatcher(element: HTMLElement) {\n  return {\n    onOpenChange: (open: boolean) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('open-change', {\n        detail: open,\n        bubbles: true,\n        composed: true\n      }));\n    }\n  };\n}\n\n/**\n * Wrapper component that connects React events to DOM custom events\n */\nfunction NavAccountMenuWrapper(props: React.ComponentProps<typeof NavAccountMenu> & { _hostElement?: HTMLElement }) {\n  const { _hostElement, ...restProps } = props;\n\n  const eventHandlers = React.useMemo(() => {\n    if (!_hostElement) return {};\n    return createEventDispatcher(_hostElement);\n  }, [_hostElement]);\n\n  return React.createElement(NavAccountMenu, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    type: 'string',\n    open: 'boolean',\n    defaultOpen: 'boolean'\n};\n\nclass NavAccountMenuWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      NavAccountMenuWrapper,\n      { ...props, _hostElement: this },\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(NavAccountMenuWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-nav-account-menu')) {\n  customElements.define('hf-nav-account-menu', NavAccountMenuWC);\n}\n\nexport { NavAccountMenuWC };\nexport default NavAccountMenuWC;\n"],"x_google_ignoreList":[0],"mappings":"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"}
+{"version":3,"file":"hf-nav-account-menu.js","names":[],"sources":["../../../../../../../../../../../Users/akarim/Documents/test/humain_foundation_ui/node_modules/.bun/lucide-react@1.27.0+0f58469d5b3bd39f/node_modules/lucide-react/dist/esm/icons/log-out.mjs","../../src/components/templates/NavAccountMenu/NavAccountMenu.tsx","../../src/wc/hf-nav-account-menu.ts"],"sourcesContent":["/**\n * @license lucide-react v1.27.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\"path\", { d: \"m16 17 5-5-5-5\", key: \"1bji2h\" }],\n  [\"path\", { d: \"M21 12H9\", key: \"dn1m92\" }],\n  [\"path\", { d: \"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\", key: \"1uf3rs\" }]\n];\nconst LogOut = createLucideIcon(\"log-out\", __iconNode);\n\nexport { __iconNode, LogOut as default };\n//# sourceMappingURL=log-out.mjs.map\n","'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight, LogOut } from 'lucide-react';\nimport * as React from 'react';\nimport { Switch } from '@/components/atoms/forms/Switch/Switch';\nimport { Kbd } from '@/components/molecules/data/Kbd';\nimport {\n  PopoverRoot as PopoverBase,\n  PopoverPopup as PopoverContentBase,\n  PopoverTrigger as PopoverTriggerBase,\n} from '@/components/organisms/overlays/Popover';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Context for NavAccountMenu\n// ============================================\n\ninterface NavAccountMenuContextValue {\n  type: 'card' | 'simple';\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst [NavAccountMenuContext, useNavAccountMenuContext] =\n  createSafeContext<NavAccountMenuContextValue>('NavAccountMenu');\n\n// ============================================\n// NavAccountMenu (Root)\n// ============================================\n\nexport interface NavAccountMenuProps {\n  /** Trigger variant style */\n  type?: 'card' | 'simple';\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Initial open state for uncontrolled mode */\n  defaultOpen?: boolean;\n  /** Children (trigger + content) */\n  children: React.ReactNode;\n}\n\nfunction NavAccountMenu({\n  type = 'card',\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: NavAccountMenuProps) {\n  const [open, handleOpenChange] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const contextValue = React.useMemo(\n    () => ({\n      type,\n      open,\n      onOpenChange: handleOpenChange,\n    }),\n    [type, open, handleOpenChange],\n  );\n\n  return (\n    <NavAccountMenuContext.Provider value={contextValue}>\n      <PopoverBase open={open} onOpenChange={handleOpenChange}>\n        <div data-slot=\"nav-account-menu\">{children}</div>\n      </PopoverBase>\n    </NavAccountMenuContext.Provider>\n  );\n}\n\n// ============================================\n// NavAccountMenuTrigger\n// ============================================\n\nconst triggerVariants = cva(\n  'flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none',\n  {\n    variants: {\n      type: {\n        card: 'bg-surface-1 border border-border rounded-xl shadow-xs p-3 hover:bg-surface-2',\n        simple: 'border border-border px-2 py-3 hover:bg-surface-2 rounded-lg',\n      },\n    },\n    defaultVariants: {\n      type: 'card',\n    },\n  },\n);\n\nexport interface NavAccountMenuTriggerProps\n  extends VariantProps<typeof triggerVariants> {\n  /** Avatar element (use Avatar component) */\n  avatar?: React.ReactNode;\n  /** User display name */\n  name: string;\n  /** User email address */\n  email?: string;\n  /** Optional badge after name (e.g., \"External\" tag) */\n  badge?: React.ReactNode;\n  /** Show logout button instead of chevron (for 'simple' type) */\n  showLogoutButton?: boolean;\n  /** Logout callback for simple variant */\n  onLogout?: () => void;\n  /** Show only avatar without name/email - useful for collapsed sidebar */\n  compact?: boolean;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuTrigger({\n  avatar,\n  name,\n  email,\n  badge,\n  showLogoutButton,\n  onLogout,\n  compact = false,\n  className,\n}: NavAccountMenuTriggerProps) {\n  const { type, open } = useNavAccountMenuContext();\n\n  const handleLogoutClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onLogout?.();\n  };\n\n  const avatarContent = avatar ? (\n    <div className=\"shrink-0\">{avatar}</div>\n  ) : null;\n  const accountDetails = !compact ? (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"min-w-0 truncate text-sm font-semibold text-foreground\">\n          {name}\n        </span>\n        {badge && <span className=\"shrink-0\">{badge}</span>}\n      </div>\n      {email && (\n        <span className=\"truncate text-sm text-muted-foreground\">{email}</span>\n      )}\n    </div>\n  ) : null;\n\n  if (type === 'simple' && showLogoutButton && !compact) {\n    return (\n      <div\n        data-slot=\"nav-account-menu-trigger\"\n        className={cn(triggerVariants({ type }), 'group/trigger', className)}\n      >\n        <PopoverTriggerBase\n          render={\n            <button\n              type=\"button\"\n              aria-haspopup=\"true\"\n              className=\"flex min-w-0 flex-1 items-center gap-4 text-left outline-none\"\n            />\n          }\n        >\n          {avatarContent}\n          {accountDetails}\n        </PopoverTriggerBase>\n        <button\n          type=\"button\"\n          onClick={handleLogoutClick}\n          className=\"shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\"\n          aria-label=\"Sign out\"\n        >\n          <LogOut className=\"size-5\" />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <PopoverTriggerBase\n      render={\n        <button\n          type=\"button\"\n          data-slot=\"nav-account-menu-trigger\"\n          aria-haspopup=\"true\"\n          aria-label={compact ? `${name} account menu` : undefined}\n          className={cn(\n            triggerVariants({ type }),\n            'group/trigger',\n            compact ? 'w-auto justify-center' : 'max-w-[280px]',\n            className,\n          )}\n        />\n      }\n    >\n      {avatarContent}\n      {!compact && (\n        <>\n          {accountDetails}\n          <ChevronRight\n            className={cn(\n              'size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none',\n              open ? 'rotate-180' : 'rtl:rotate-180',\n            )}\n          />\n        </>\n      )}\n    </PopoverTriggerBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuContent\n// ============================================\n\nexport interface NavAccountMenuContentProps {\n  /** Popover side positioning */\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Popover alignment */\n  align?: 'start' | 'center' | 'end';\n  /** Side offset */\n  sideOffset?: number;\n  /** Children */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuContent({\n  side = 'right',\n  align = 'end',\n  sideOffset = 8,\n  children,\n  className,\n}: NavAccountMenuContentProps) {\n  return (\n    <PopoverContentBase\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      aria-label=\"Account menu\"\n      data-slot=\"nav-account-menu-content\"\n      className={cn(\n        'w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden',\n        'shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]',\n        'data-open:animate-in data-closed:animate-out',\n        'data-closed:fade-out-0 data-open:fade-in-0',\n        'data-closed:zoom-out-95 data-open:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        'duration-200 motion-reduce:animate-none',\n        className,\n      )}\n    >\n      <div className=\"flex flex-col py-2\" role=\"menu\" aria-label=\"Account menu\">\n        {children}\n      </div>\n    </PopoverContentBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuHeader\n// ============================================\n\nexport interface NavAccountMenuHeaderProps {\n  /** Header title (e.g. \"Profile\") */\n  title: string;\n  /** Subtitle text or custom React node (e.g. \"Last login 22 May, 2026 11:30pm\") */\n  subtitle?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuHeader({\n  title,\n  subtitle,\n  className,\n}: NavAccountMenuHeaderProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-header\"\n      className={cn('px-6 pb-3 delight-fade-in', className)}\n    >\n      <p className=\"text-base font-semibold text-foreground\">{title}</p>\n      {subtitle &&\n        (typeof subtitle === 'string' ? (\n          <p className=\"mt-2 text-sm text-muted-foreground\">{subtitle}</p>\n        ) : (\n          <div className=\"mt-2\">{subtitle}</div>\n        ))}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSection\n// ============================================\n\nexport interface NavAccountMenuSectionProps {\n  /** Optional section header label */\n  label?: string;\n  /** Show top border separator between sections */\n  bordered?: boolean;\n  /** Section content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSection({\n  label,\n  bordered = false,\n  children,\n  className,\n}: NavAccountMenuSectionProps) {\n  return (\n    <section\n      data-slot=\"nav-account-menu-section\"\n      aria-label={label}\n      className={cn(\n        'flex flex-col gap-1 py-1.5',\n        bordered && 'border-t border-border',\n        className,\n      )}\n    >\n      {label && (\n        <div className=\"px-3 pt-1.5 pb-1\">\n          <span className=\"text-xs font-semibold text-muted-foreground\">\n            {label}\n          </span>\n        </div>\n      )}\n      {children}\n    </section>\n  );\n}\n\n// ============================================\n// NavAccountMenuItem\n// ============================================\n\n/**\n * Props passed to the render function for custom menu item rendering.\n */\nexport interface NavAccountMenuItemRenderProps {\n  /** Combined className for styling */\n  className: string;\n  /** Click handler that closes menu and triggers onSelect */\n  onClick: () => void;\n  /** Menu item content (icon, label, shortcut) */\n  children: React.ReactNode;\n}\n\n/**\n * Render prop type for polymorphic rendering.\n * Accepts a function that receives props and returns an element.\n */\ntype NavAccountMenuItemRenderFn = (\n  props: NavAccountMenuItemRenderProps,\n) => React.ReactElement;\n\nexport interface NavAccountMenuItemProps {\n  /** Left icon (20px) */\n  icon?: React.ReactNode;\n  /** Keyboard shortcut display */\n  shortcut?: string;\n  /** Destructive styling (red) */\n  destructive?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /**\n   * Render prop for polymorphic rendering.\n   * Use this to render the menu item as a different element (e.g., link).\n   * @example\n   * <NavAccountMenuItem\n   *   icon={<User01 />}\n   *   render={(props) => <a {...props} href=\"/profile\" />}\n   * >\n   *   View profile\n   * </NavAccountMenuItem>\n   */\n  render?: NavAccountMenuItemRenderFn;\n  /** Label text */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuItem({\n  icon,\n  shortcut,\n  destructive = false,\n  disabled = false,\n  onSelect,\n  render,\n  children,\n  className,\n}: NavAccountMenuItemProps) {\n  const { onOpenChange } = useNavAccountMenuContext();\n\n  const handleClick = () => {\n    if (disabled) return;\n    onSelect?.();\n    onOpenChange(false);\n  };\n\n  const content = (\n    <div className=\"flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none\">\n      <div className=\"flex flex-1 gap-2 items-center min-w-0\">\n        {icon && (\n          <span\n            className={cn(\n              'shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none',\n              destructive ? 'text-destructive' : 'text-foreground',\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span\n          className={cn(\n            'flex-1 text-sm truncate',\n            destructive ? 'text-destructive' : 'text-secondary-foreground',\n          )}\n        >\n          {children}\n        </span>\n      </div>\n      {shortcut && (\n        <Kbd variant=\"outline\" size=\"xs\" className=\"shrink-0\">\n          {shortcut}\n        </Kbd>\n      )}\n    </div>\n  );\n\n  const baseClassName = cn(\n    'group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none',\n    'hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted',\n    'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n    disabled && 'pointer-events-none opacity-50',\n    className,\n  );\n\n  if (render) {\n    return render({\n      className: baseClassName,\n      onClick: handleClick,\n      children: content,\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      data-slot=\"nav-account-menu-item\"\n      className={baseClassName}\n      onClick={handleClick}\n      disabled={disabled}\n      aria-disabled={disabled || undefined}\n    >\n      {content}\n    </button>\n  );\n}\n\n// ============================================\n// NavAccountMenuAccount\n// ============================================\n\nexport interface NavAccountMenuAccountProps {\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Account display name */\n  name: string;\n  /** Account email */\n  email: string;\n  /** Whether this account is currently selected */\n  selected?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuAccount({\n  avatar,\n  name,\n  email,\n  selected = false,\n  onSelect,\n  className,\n}: NavAccountMenuAccountProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-account\"\n      className={cn('flex items-center px-1.5 py-0 w-full', className)}\n    >\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        aria-checked={selected}\n        aria-label={`Switch to ${name} (${email})`}\n        className={cn(\n          'relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none',\n          'hover:bg-muted focus-visible:bg-muted',\n          'transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n          'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n          'text-left',\n          selected && 'bg-surface-2',\n        )}\n        onClick={onSelect}\n      >\n        {avatar && <div className=\"shrink-0\">{avatar}</div>}\n        <div className=\"flex flex-col min-w-0 flex-1\">\n          <span className=\"text-sm font-semibold text-foreground truncate\">\n            {name}\n          </span>\n          <span className=\"text-sm text-muted-foreground truncate\">\n            {email}\n          </span>\n        </div>\n        {/* Radio indicator */}\n        <div\n          aria-hidden=\"true\"\n          className={cn(\n            'size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n            selected\n              ? 'bg-primary border-primary'\n              : 'border-border bg-transparent',\n          )}\n        >\n          {selected && (\n            <div className=\"size-1.5 rounded-full bg-background delight-check-bounce\" />\n          )}\n        </div>\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSeparator\n// ============================================\n\nexport interface NavAccountMenuSeparatorProps {\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSeparator({ className }: NavAccountMenuSeparatorProps) {\n  return (\n    <hr\n      data-slot=\"nav-account-menu-separator\"\n      className={cn('h-px border-0 bg-border mx-5', className)}\n    />\n  );\n}\n\n// ============================================\n// NavAccountMenuFooter\n// ============================================\n\nexport interface NavAccountMenuFooterProps {\n  /** Footer content (typically buttons) */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuFooter({\n  children,\n  className,\n}: NavAccountMenuFooterProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-footer\"\n      className={cn('flex items-center justify-center px-5 pt-4', className)}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuThemeSwitch (uses Switch theme variant)\n// ============================================\n\nexport interface NavAccountMenuThemeSwitchProps {\n  /** Switch theme variant to render */\n  variant?:\n    | 'theme-gradient'\n    | 'theme-switch'\n    | 'theme-pill'\n    | 'theme-segmented';\n  /** Switch size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Controlled checked state (dark = checked) */\n  checked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Optional label displayed next to the switch (e.g. \"Light Mode\") */\n  label?: string;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuThemeSwitch({\n  variant = 'theme-gradient',\n  size = 'sm',\n  checked,\n  onCheckedChange,\n  label,\n  className,\n}: NavAccountMenuThemeSwitchProps) {\n  const switchId = React.useId();\n  const labelId = label ? `${switchId}-label` : undefined;\n\n  return (\n    <div\n      data-slot=\"nav-account-menu-theme-switch\"\n      className={cn('flex items-center px-1.5 py-0', className)}\n    >\n      <div className=\"flex items-center gap-2.5 p-2\">\n        <Switch\n          id={switchId}\n          variant={variant}\n          size={size}\n          checked={checked}\n          onCheckedChange={onCheckedChange}\n          aria-labelledby={labelId}\n          aria-label={label ? undefined : 'Theme selector'}\n        />\n        {label && (\n          <label\n            htmlFor={switchId}\n            id={labelId}\n            className=\"cursor-pointer text-sm text-secondary-foreground\"\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ============================================\n// Display Names\n// ============================================\n\nNavAccountMenu.displayName = 'NavAccountMenu';\nNavAccountMenuTrigger.displayName = 'NavAccountMenuTrigger';\nNavAccountMenuContent.displayName = 'NavAccountMenuContent';\nNavAccountMenuHeader.displayName = 'NavAccountMenuHeader';\nNavAccountMenuSection.displayName = 'NavAccountMenuSection';\nNavAccountMenuItem.displayName = 'NavAccountMenuItem';\nNavAccountMenuAccount.displayName = 'NavAccountMenuAccount';\nNavAccountMenuSeparator.displayName = 'NavAccountMenuSeparator';\nNavAccountMenuFooter.displayName = 'NavAccountMenuFooter';\nNavAccountMenuThemeSwitch.displayName = 'NavAccountMenuThemeSwitch';\n\n// ============================================\n// Exports\n// ============================================\n\nexport {\n  NavAccountMenu,\n  NavAccountMenuAccount,\n  NavAccountMenuContent,\n  NavAccountMenuFooter,\n  NavAccountMenuHeader,\n  NavAccountMenuItem,\n  NavAccountMenuSection,\n  NavAccountMenuSeparator,\n  NavAccountMenuThemeSwitch,\n  NavAccountMenuTrigger,\n  triggerVariants as navAccountMenuTriggerVariants,\n};\n","/**\n * Web Component wrapper for NavAccountMenu\n * Custom element: <hf-nav-account-menu>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { NavAccountMenu } from '../components/templates/NavAccountMenu';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Event wrapper that dispatches custom DOM events\n */\nfunction createEventDispatcher(element: HTMLElement) {\n  return {\n    onOpenChange: (open: boolean) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('open-change', {\n        detail: open,\n        bubbles: true,\n        composed: true\n      }));\n    }\n  };\n}\n\n/**\n * Wrapper component that connects React events to DOM custom events\n */\nfunction NavAccountMenuWrapper(props: React.ComponentProps<typeof NavAccountMenu> & { _hostElement?: HTMLElement }) {\n  const { _hostElement, ...restProps } = props;\n\n  const eventHandlers = React.useMemo(() => {\n    if (!_hostElement) return {};\n    return createEventDispatcher(_hostElement);\n  }, [_hostElement]);\n\n  return React.createElement(NavAccountMenu, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    type: 'string',\n    open: 'boolean',\n    defaultOpen: 'boolean'\n};\n\nclass NavAccountMenuWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      NavAccountMenuWrapper,\n      { ...props, _hostElement: this },\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(NavAccountMenuWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-nav-account-menu')) {\n  customElements.define('hf-nav-account-menu', NavAccountMenuWC);\n}\n\nexport { NavAccountMenuWC };\nexport default NavAccountMenuWC;\n"],"x_google_ignoreList":[0],"mappings":"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"}

package/dist/wc/hf-rich-textarea.js

@@ -283,7 +283,7 @@ var V = u.forwardRef(({ label: t, hint: r, error: o, required: s, showHelpIcon:
           a && /* @__PURE__ */ (0, e.jsx)("button", {
             type: "button",
             onClick: m,
-            className: "text-muted-foreground hover:text-text-quaternary transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full",
+            className: "text-muted-foreground hover:text-secondary-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full",
             "aria-label": "Help",
             children: /* @__PURE__ */ (0, e.jsx)(ie, { className: "size-4" })
           })