@humain/ui 2.2.4 → 2.2.5

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

@@ -7,7 +7,7 @@ import { t as O } from "./use-controllable-state.js";
 import { t as P } from "./create-safe-context.js";
 import { a as S, i as j, s as b } from "./Popover.js";
 import { t as V } from "./Kbd.js";
-import * as y from "react";
+import * as _ from "react";
 import v from "react";
 import { createRoot as $ } from "react-dom/client";
 import { Fragment as L, jsx as o, jsxs as c } from "react/jsx-runtime";
@@ -24,13 +24,13 @@ var D = [
     d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",
     key: "1uf3rs"
   }]
-], H = k("log-out", D), [I, _] = P("NavAccountMenu");
+], H = k("log-out", D), [I, y] = P("NavAccountMenu");
 function C({ type: e = "card", open: t, defaultOpen: n = !1, onOpenChange: r, children: a }) {
   const [l, i] = O({
     value: t,
     defaultValue: n,
     onChange: r
-  }), u = y.useMemo(() => ({
+  }), u = _.useMemo(() => ({
     type: e,
     open: l,
     onOpenChange: i
@@ -59,7 +59,7 @@ var N = z("flex items-center gap-4 w-full text-left cursor-pointer transition-co
   defaultVariants: { type: "card" }
 });
 function F({ avatar: e, name: t, email: n, badge: r, showLogoutButton: a, onLogout: l, compact: i = !1, className: u }) {
-  const { type: d, open: f } = _(), h = (w) => {
+  const { type: d, open: f } = y(), h = (w) => {
     w.stopPropagation(), l?.();
   }, m = e ? /* @__PURE__ */ o("div", {
     className: "shrink-0",
@@ -155,7 +155,7 @@ function Z({ label: e, bordered: t = !1, children: n, className: r }) {
   });
 }
 function q({ icon: e, shortcut: t, destructive: n = !1, disabled: r = !1, onSelect: a, render: l, children: i, className: u }) {
-  const { onOpenChange: d } = _(), f = () => {
+  const { onOpenChange: d } = y(), f = () => {
     r || (a?.(), d(!1));
   }, h = /* @__PURE__ */ c("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",
@@ -219,7 +219,7 @@ function K({ avatar: e, name: t, email: n, selected: r = !1, onSelect: a, classN
         /* @__PURE__ */ o("div", {
           "aria-hidden": "true",
           className: s("size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none", r ? "bg-primary border-primary" : "border-border bg-transparent"),
-          children: r && /* @__PURE__ */ o("div", { className: "size-1.5 rounded-full bg-primary-foreground delight-check-bounce" })
+          children: r && /* @__PURE__ */ o("div", { className: "size-1.5 rounded-full bg-background delight-check-bounce" })
         })
       ]
     })
@@ -239,7 +239,7 @@ function B({ children: e, className: t }) {
   });
 }
 function G({ variant: e = "theme-gradient", size: t = "sm", checked: n, onCheckedChange: r, label: a, className: l }) {
-  const i = y.useId(), u = a ? `${i}-label` : void 0;
+  const i = _.useId(), u = a ? `${i}-label` : void 0;
   return /* @__PURE__ */ o("div", {
     "data-slot": "nav-account-menu-theme-switch",
     className: s("flex items-center px-1.5 py-0", l),

package/dist/wc-react/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-primary-foreground 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-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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"}

package/dist/wc-react/hf-steps.js

@@ -14,7 +14,7 @@ var H = _("flex items-center justify-center shrink-0 size-[38px] font-medium tex
     },
     status: {
       complete: "bg-primary text-primary-foreground shadow-sm",
-      active: "bg-primary-foreground border-2 border-primary text-primary shadow-sm",
+      active: "bg-background border-2 border-primary text-primary shadow-sm",
       incomplete: "bg-accent text-muted-foreground"
     }
   },
@@ -85,7 +85,7 @@ function y({ children: e, className: t }) {
 }
 y.displayName = "Steps.Subtext";
 function E({ status: e, onClick: t, children: r, className: o }) {
-  const i = X(), a = l.useContext(w), u = e ?? i.getStepStatus(a), b = a === 0, p = t ?? (i.onStepClick ? () => i.onStepClick?.(a) : void 0);
+  const i = X(), a = l.useContext(w), u = e ?? i.getStepStatus(a), b = a === 0, d = t ?? (i.onStepClick ? () => i.onStepClick?.(a) : void 0);
   let m = null, x = null;
   l.Children.forEach(r, (f) => {
     l.isValidElement(f) && f.type === y ? x = f : f != null && f !== !1 && (m = f);
@@ -93,7 +93,7 @@ function E({ status: e, onClick: t, children: r, className: o }) {
   const S = b ? void 0 : i.getStepStatus(a - 1), g = !b && /* @__PURE__ */ n(I, {
     orientation: i.orientation,
     isComplete: S === "complete"
-  }), s = i.orientation === "horizontal", d = /* @__PURE__ */ n(V, {
+  }), s = i.orientation === "horizontal", p = /* @__PURE__ */ n(V, {
     index: a,
     status: u,
     shape: i.shape,
@@ -109,23 +109,23 @@ function E({ status: e, onClick: t, children: r, className: o }) {
     className: "flex w-full items-start",
     children: [g, /* @__PURE__ */ h("div", {
       className: "flex flex-col items-center",
-      children: [d, k]
+      children: [p, k]
     })]
   }) : /* @__PURE__ */ h("div", {
     className: "flex flex-col items-start",
     children: [g, /* @__PURE__ */ h("div", {
       className: "flex items-center",
-      children: [d, k]
+      children: [p, k]
     })]
   }), N = l.useMemo(() => O(m), [m]), P = u === "complete" ? ", completed" : u === "active" ? ", current" : "";
   return /* @__PURE__ */ n("li", {
     "data-slot": "steps-item",
     "aria-current": u === "active" ? "step" : void 0,
-    "aria-label": !p && N ? `Step ${a + 1}: ${N}${P}` : void 0,
-    className: c(s && !b && "flex-1", !p && o),
-    children: p ? /* @__PURE__ */ n("button", {
+    "aria-label": !d && N ? `Step ${a + 1}: ${N}${P}` : void 0,
+    className: c(s && !b && "flex-1", !d && o),
+    children: d ? /* @__PURE__ */ n("button", {
       type: "button",
-      onClick: p,
+      onClick: d,
       "aria-label": `Step ${a + 1}: ${N || ""}${P}`,
       className: c("cursor-pointer", s && "w-full", o, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"),
       children: z
@@ -134,23 +134,23 @@ function E({ status: e, onClick: t, children: r, className: o }) {
 }
 E.displayName = "Steps.Item";
 function $({ steps: e, currentStep: t = 0, orientation: r = "horizontal", shape: o = "rounded", bulletType: i = "text", onStepClick: a, children: u, className: b }) {
-  const p = l.useCallback((s) => s < t ? "complete" : s === t ? "active" : "incomplete", [t]), m = l.useMemo(() => ({
+  const d = l.useCallback((s) => s < t ? "complete" : s === t ? "active" : "incomplete", [t]), m = l.useMemo(() => ({
     orientation: r,
     shape: o,
     bulletType: i,
     onStepClick: a,
-    getStepStatus: p
+    getStepStatus: d
   }), [
     r,
     o,
     i,
     a,
-    p
-  ]), x = !e && l.Children.count(u) > 0, S = () => !e || e.length === 0 ? null : e.map((s, d) => /* @__PURE__ */ n(w.Provider, {
-    value: d,
+    d
+  ]), x = !e && l.Children.count(u) > 0, S = () => !e || e.length === 0 ? null : e.map((s, p) => /* @__PURE__ */ n(w.Provider, {
+    value: p,
     children: /* @__PURE__ */ h(E, { children: [s.label, s.subtext && /* @__PURE__ */ n(y, { children: s.subtext })] })
-  }, `${d}-${s.label}`)), g = () => l.Children.map(u, (s, d) => /* @__PURE__ */ n(w.Provider, {
-    value: d,
+  }, `${p}-${s.label}`)), g = () => l.Children.map(u, (s, p) => /* @__PURE__ */ n(w.Provider, {
+    value: p,
     children: s
   }));
   return /* @__PURE__ */ n(F.Provider, {

package/dist/wc-react/hf-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-steps.js","names":[],"sources":["../../src/components/organisms/content/Steps/Steps.tsx","../../src/wc/hf-steps.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Check } from 'lucide-react';\nimport * as React from 'react';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn, extractText } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------- */\n\nexport type StepStatus = 'complete' | 'active' | 'incomplete';\n\nexport interface StepData {\n  label: string;\n  subtext?: string;\n}\n\nexport interface StepsProps {\n  /** Steps data for flat API */\n  steps?: StepData[];\n  /** Current step index (0-based) for flat API */\n  currentStep?: number;\n  /** Orientation of the steps */\n  orientation?: 'horizontal' | 'vertical';\n  /** Shape of step indicators */\n  shape?: 'rounded' | 'round';\n  /** Type of bullet content */\n  bulletType?: 'text' | 'icon';\n  /** Callback when a step is clicked */\n  onStepClick?: (index: number) => void;\n  /** Children for compound API */\n  children?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nexport interface StepsItemProps {\n  /** Override auto-calculated status */\n  status?: StepStatus;\n  /** Click handler for this step */\n  onClick?: () => void;\n  /** Step label content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nexport interface StepsSubtextProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/* -----------------------------------------------------------------------------\n * Variants\n * -------------------------------------------------------------------------- */\n\nconst stepIndicatorVariants = cva(\n  'flex items-center justify-center shrink-0 size-[38px] font-medium text-lg transition-all duration-200 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      shape: {\n        rounded: 'rounded-lg',\n        round: 'rounded-full',\n      },\n      status: {\n        complete: 'bg-primary text-primary-foreground shadow-sm',\n        active:\n          'bg-primary-foreground border-2 border-primary text-primary shadow-sm',\n        incomplete: 'bg-accent text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      shape: 'rounded',\n      status: 'incomplete',\n    },\n  },\n);\n\nconst stepConnectorVariants = cva(\n  'shrink-0 transition-colors duration-200 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      orientation: {\n        // Horizontal: fluid width fills available space; mt-[18px] centers 2px line with 38px indicator\n        horizontal: 'h-0.5 flex-1 min-w-4 mx-2 mt-[18px]',\n        // Vertical: fixed size, centered under 38px indicator\n        vertical: 'w-0.5 h-[30px] my-1 ml-[18px]',\n      },\n      status: {\n        complete: 'bg-primary',\n        incomplete: 'bg-border',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n      status: 'incomplete',\n    },\n  },\n);\n\nconst stepLabelVariants = cva('text-base leading-6', {\n  variants: {\n    status: {\n      complete: 'text-card-foreground',\n      active: 'text-card-foreground',\n      incomplete: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'incomplete',\n  },\n});\n\nconst stepSubtextVariants = cva('text-sm leading-5 text-muted-foreground');\n\n/* -----------------------------------------------------------------------------\n * Context\n * -------------------------------------------------------------------------- */\n\ninterface StepsContextValue {\n  orientation: 'horizontal' | 'vertical';\n  shape: 'rounded' | 'round';\n  bulletType: 'text' | 'icon';\n  onStepClick?: (index: number) => void;\n  getStepStatus: (index: number) => StepStatus;\n}\n\nconst [StepsContext, useStepsContext] =\n  createSafeContext<StepsContextValue>('Steps');\n\n/** Per-item index context — injected by Steps parent via Children.map or flat API */\nconst StepIndexContext = React.createContext<number>(0);\n\n/* -----------------------------------------------------------------------------\n * Sub-components\n * -------------------------------------------------------------------------- */\n\ninterface StepIndicatorProps {\n  index: number;\n  status: StepStatus;\n  shape: 'rounded' | 'round';\n  bulletType: 'text' | 'icon';\n}\n\nfunction StepIndicatorContent({\n  index,\n  status,\n  shape,\n  bulletType,\n}: StepIndicatorProps) {\n  if (bulletType === 'icon') {\n    if (status === 'complete') {\n      return <Check className=\"size-[22px] delight-check-draw\" />;\n    }\n    if (status === 'active') {\n      return (\n        <div\n          className={cn(\n            'size-5 bg-primary',\n            shape === 'rounded' ? 'rounded-sm' : 'rounded-full',\n          )}\n        />\n      );\n    }\n\n    return <div className=\"size-1.5 rounded-full bg-current\" />;\n  }\n\n  return index + 1;\n}\n\nfunction StepIndicator({\n  index,\n  status,\n  shape,\n  bulletType,\n}: StepIndicatorProps) {\n  return (\n    <div\n      data-slot=\"steps-indicator\"\n      aria-hidden=\"true\"\n      className={cn(\n        stepIndicatorVariants({ shape, status }),\n        status === 'complete' && 'delight-check-bounce',\n        status === 'active' && 'delight-pulse-once',\n      )}\n    >\n      <StepIndicatorContent\n        index={index}\n        status={status}\n        shape={shape}\n        bulletType={bulletType}\n      />\n    </div>\n  );\n}\n\nStepIndicator.displayName = 'StepIndicator';\n\ninterface StepConnectorProps {\n  orientation: 'horizontal' | 'vertical';\n  isComplete: boolean;\n}\n\nfunction StepConnector({ orientation, isComplete }: StepConnectorProps) {\n  return (\n    <div\n      data-slot=\"steps-connector\"\n      aria-hidden=\"true\"\n      className={cn(\n        stepConnectorVariants({\n          orientation,\n          status: isComplete ? 'complete' : 'incomplete',\n        }),\n        isComplete && 'delight-connector-fill',\n      )}\n    />\n  );\n}\n\nStepConnector.displayName = 'StepConnector';\n\nfunction StepsSubtext({ children, className }: StepsSubtextProps) {\n  return (\n    <span\n      data-slot=\"steps-subtext\"\n      className={cn(stepSubtextVariants(), className)}\n    >\n      {children}\n    </span>\n  );\n}\n\nStepsSubtext.displayName = 'Steps.Subtext';\n\nfunction StepsItem({\n  status: statusOverride,\n  onClick,\n  children,\n  className,\n}: StepsItemProps) {\n  const ctx = useStepsContext();\n  const index = React.useContext(StepIndexContext);\n  const status = statusOverride ?? ctx.getStepStatus(index);\n  const isFirst = index === 0;\n  const handleClick =\n    onClick ?? (ctx.onStepClick ? () => ctx.onStepClick?.(index) : undefined);\n\n  // Extract subtext from children\n  let label: React.ReactNode = null;\n  let subtext: React.ReactNode = null;\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === StepsSubtext) {\n      subtext = child;\n    } else if (child != null && child !== false) {\n      label = child;\n    }\n  });\n\n  // Connector colored based on previous step's completion (source step, not destination)\n  const prevStepStatus = !isFirst ? ctx.getStepStatus(index - 1) : undefined;\n  const connector = !isFirst && (\n    <StepConnector\n      orientation={ctx.orientation}\n      isComplete={prevStepStatus === 'complete'}\n    />\n  );\n\n  const isHorizontal = ctx.orientation === 'horizontal';\n\n  // Build indicator element\n  const indicator = (\n    <StepIndicator\n      index={index}\n      status={status}\n      shape={ctx.shape}\n      bulletType={ctx.bulletType}\n    />\n  );\n\n  // Build label element\n  // In horizontal mode, w-0 ensures the label doesn't affect the indicator column width.\n  // The text overflows visually (centered under the 38px indicator) but the layout\n  // width stays fixed, keeping all connectors equally spaced (matching Figma spec).\n  const labelElement = (\n    <div\n      data-slot=\"steps-label\"\n      className={cn(\n        'flex flex-col',\n        isHorizontal\n          ? 'items-center gap-0.5 text-center w-0 whitespace-nowrap'\n          : 'items-start gap-0.5 ml-2.5',\n      )}\n    >\n      <span className={stepLabelVariants({ status })}>{label}</span>\n      {subtext}\n    </div>\n  );\n\n  // Layout differs by orientation:\n  // - Horizontal: connector + (indicator column), items-start so indicators align at top\n  // - Vertical: connector above, indicator + label in row\n  const content = isHorizontal ? (\n    <div className=\"flex w-full items-start\">\n      {connector}\n      <div className=\"flex flex-col items-center\">\n        {indicator}\n        {labelElement}\n      </div>\n    </div>\n  ) : (\n    <div className=\"flex flex-col items-start\">\n      {connector}\n      <div className=\"flex items-center\">\n        {indicator}\n        {labelElement}\n      </div>\n    </div>\n  );\n\n  const labelText = React.useMemo(() => extractText(label), [label]);\n  const statusSuffix =\n    status === 'complete'\n      ? ', completed'\n      : status === 'active'\n        ? ', current'\n        : '';\n\n  return (\n    <li\n      data-slot=\"steps-item\"\n      aria-current={status === 'active' ? 'step' : undefined}\n      aria-label={\n        !handleClick && labelText\n          ? `Step ${index + 1}: ${labelText}${statusSuffix}`\n          : undefined\n      }\n      className={cn(\n        isHorizontal && !isFirst && 'flex-1',\n        !handleClick && className,\n      )}\n    >\n      {handleClick ? (\n        <button\n          type=\"button\"\n          onClick={handleClick}\n          aria-label={`Step ${index + 1}: ${labelText || ''}${statusSuffix}`}\n          className={cn(\n            'cursor-pointer',\n            isHorizontal && 'w-full',\n            className,\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm',\n          )}\n        >\n          {content}\n        </button>\n      ) : (\n        content\n      )}\n    </li>\n  );\n}\n\nStepsItem.displayName = 'Steps.Item';\n\n/* -----------------------------------------------------------------------------\n * Main Component\n * -------------------------------------------------------------------------- */\n\n/**\n * Steps displays a multi-step progress indicator for wizards and workflows.\n * Supports horizontal/vertical orientation, numbered or icon bullets, and clickable steps.\n *\n * @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps\n * @example\n * ```tsx\n * <Steps\n *   steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Confirm' }]}\n *   currentStep={1}\n *   orientation=\"horizontal\"\n * />\n * ```\n */\nfunction Steps({\n  steps,\n  currentStep = 0,\n  orientation = 'horizontal',\n  shape = 'rounded',\n  bulletType = 'text',\n  onStepClick,\n  children,\n  className,\n}: StepsProps) {\n  const getStepStatus = React.useCallback(\n    (index: number): StepStatus => {\n      if (index < currentStep) return 'complete';\n      if (index === currentStep) return 'active';\n      return 'incomplete';\n    },\n    [currentStep],\n  );\n\n  const contextValue = React.useMemo<StepsContextValue>(\n    () => ({\n      orientation,\n      shape,\n      bulletType,\n      onStepClick,\n      getStepStatus,\n    }),\n    [orientation, shape, bulletType, onStepClick, getStepStatus],\n  );\n\n  // Determine if using flat API or compound API\n  const useCompoundAPI = !steps && React.Children.count(children) > 0;\n\n  const renderFlatAPI = () => {\n    if (!steps || steps.length === 0) return null;\n\n    return steps.map((step, index) => (\n      <StepIndexContext.Provider key={`${index}-${step.label}`} value={index}>\n        <StepsItem>\n          {step.label}\n          {step.subtext && <StepsSubtext>{step.subtext}</StepsSubtext>}\n        </StepsItem>\n      </StepIndexContext.Provider>\n    ));\n  };\n\n  const renderCompoundAPI = () => {\n    return React.Children.map(children, (child, index) => (\n      <StepIndexContext.Provider value={index}>\n        {child}\n      </StepIndexContext.Provider>\n    ));\n  };\n\n  return (\n    <StepsContext.Provider value={contextValue}>\n      <nav\n        aria-label=\"Progress steps\"\n        data-slot=\"steps\"\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: Focusable scroll region satisfies axe scrollable-region-focusable.\n        tabIndex={0}\n        className={cn(\n          'overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          className,\n        )}\n      >\n        <ol\n          data-slot=\"steps-list\"\n          className={cn(\n            'flex',\n            orientation === 'horizontal'\n              ? 'flex-row items-start px-4'\n              : 'flex-col items-start',\n          )}\n        >\n          {useCompoundAPI ? renderCompoundAPI() : renderFlatAPI()}\n        </ol>\n      </nav>\n    </StepsContext.Provider>\n  );\n}\n\nSteps.displayName = 'Steps';\n\n/* -----------------------------------------------------------------------------\n * Compound Export\n * -------------------------------------------------------------------------- */\n\n/**\n * @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps\n */\nexport const StepsCompound = Object.assign(Steps, {\n  Item: StepsItem,\n  Subtext: StepsSubtext,\n});\n\nexport {\n  StepsCompound as Steps,\n  StepsItem,\n  StepsSubtext,\n  stepConnectorVariants,\n  stepIndicatorVariants,\n  stepLabelVariants,\n  stepSubtextVariants,\n};\n","/**\n * Web Component wrapper for Steps\n * Custom element: <hf-steps>\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 { Steps } from '../components/organisms/content/Steps';\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    onStepClick: (index: number) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('step-click', {\n        detail: index,\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 StepsWrapper(props: React.ComponentProps<typeof Steps> & { _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(Steps, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    steps: 'json',\n    currentStep: 'number',\n    orientation: 'string',\n    shape: 'string',\n    bulletType: 'string',\n    className: 'string'\n};\n\nclass StepsWC 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      StepsWrapper,\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(StepsWC.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-steps')) {\n  customElements.define('hf-steps', StepsWC);\n}\n\nexport { StepsWC };\nexport default StepsWC;\n"],"mappings":"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"}
+{"version":3,"file":"hf-steps.js","names":[],"sources":["../../src/components/organisms/content/Steps/Steps.tsx","../../src/wc/hf-steps.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Check } from 'lucide-react';\nimport * as React from 'react';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn, extractText } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------- */\n\nexport type StepStatus = 'complete' | 'active' | 'incomplete';\n\nexport interface StepData {\n  label: string;\n  subtext?: string;\n}\n\nexport interface StepsProps {\n  /** Steps data for flat API */\n  steps?: StepData[];\n  /** Current step index (0-based) for flat API */\n  currentStep?: number;\n  /** Orientation of the steps */\n  orientation?: 'horizontal' | 'vertical';\n  /** Shape of step indicators */\n  shape?: 'rounded' | 'round';\n  /** Type of bullet content */\n  bulletType?: 'text' | 'icon';\n  /** Callback when a step is clicked */\n  onStepClick?: (index: number) => void;\n  /** Children for compound API */\n  children?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nexport interface StepsItemProps {\n  /** Override auto-calculated status */\n  status?: StepStatus;\n  /** Click handler for this step */\n  onClick?: () => void;\n  /** Step label content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nexport interface StepsSubtextProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/* -----------------------------------------------------------------------------\n * Variants\n * -------------------------------------------------------------------------- */\n\nconst stepIndicatorVariants = cva(\n  'flex items-center justify-center shrink-0 size-[38px] font-medium text-lg transition-all duration-200 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      shape: {\n        rounded: 'rounded-lg',\n        round: 'rounded-full',\n      },\n      status: {\n        complete: 'bg-primary text-primary-foreground shadow-sm',\n        active: 'bg-background border-2 border-primary text-primary shadow-sm',\n        incomplete: 'bg-accent text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      shape: 'rounded',\n      status: 'incomplete',\n    },\n  },\n);\n\nconst stepConnectorVariants = cva(\n  'shrink-0 transition-colors duration-200 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      orientation: {\n        // Horizontal: fluid width fills available space; mt-[18px] centers 2px line with 38px indicator\n        horizontal: 'h-0.5 flex-1 min-w-4 mx-2 mt-[18px]',\n        // Vertical: fixed size, centered under 38px indicator\n        vertical: 'w-0.5 h-[30px] my-1 ml-[18px]',\n      },\n      status: {\n        complete: 'bg-primary',\n        incomplete: 'bg-border',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n      status: 'incomplete',\n    },\n  },\n);\n\nconst stepLabelVariants = cva('text-base leading-6', {\n  variants: {\n    status: {\n      complete: 'text-card-foreground',\n      active: 'text-card-foreground',\n      incomplete: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'incomplete',\n  },\n});\n\nconst stepSubtextVariants = cva('text-sm leading-5 text-muted-foreground');\n\n/* -----------------------------------------------------------------------------\n * Context\n * -------------------------------------------------------------------------- */\n\ninterface StepsContextValue {\n  orientation: 'horizontal' | 'vertical';\n  shape: 'rounded' | 'round';\n  bulletType: 'text' | 'icon';\n  onStepClick?: (index: number) => void;\n  getStepStatus: (index: number) => StepStatus;\n}\n\nconst [StepsContext, useStepsContext] =\n  createSafeContext<StepsContextValue>('Steps');\n\n/** Per-item index context — injected by Steps parent via Children.map or flat API */\nconst StepIndexContext = React.createContext<number>(0);\n\n/* -----------------------------------------------------------------------------\n * Sub-components\n * -------------------------------------------------------------------------- */\n\ninterface StepIndicatorProps {\n  index: number;\n  status: StepStatus;\n  shape: 'rounded' | 'round';\n  bulletType: 'text' | 'icon';\n}\n\nfunction StepIndicatorContent({\n  index,\n  status,\n  shape,\n  bulletType,\n}: StepIndicatorProps) {\n  if (bulletType === 'icon') {\n    if (status === 'complete') {\n      return <Check className=\"size-[22px] delight-check-draw\" />;\n    }\n    if (status === 'active') {\n      return (\n        <div\n          className={cn(\n            'size-5 bg-primary',\n            shape === 'rounded' ? 'rounded-sm' : 'rounded-full',\n          )}\n        />\n      );\n    }\n\n    return <div className=\"size-1.5 rounded-full bg-current\" />;\n  }\n\n  return index + 1;\n}\n\nfunction StepIndicator({\n  index,\n  status,\n  shape,\n  bulletType,\n}: StepIndicatorProps) {\n  return (\n    <div\n      data-slot=\"steps-indicator\"\n      aria-hidden=\"true\"\n      className={cn(\n        stepIndicatorVariants({ shape, status }),\n        status === 'complete' && 'delight-check-bounce',\n        status === 'active' && 'delight-pulse-once',\n      )}\n    >\n      <StepIndicatorContent\n        index={index}\n        status={status}\n        shape={shape}\n        bulletType={bulletType}\n      />\n    </div>\n  );\n}\n\nStepIndicator.displayName = 'StepIndicator';\n\ninterface StepConnectorProps {\n  orientation: 'horizontal' | 'vertical';\n  isComplete: boolean;\n}\n\nfunction StepConnector({ orientation, isComplete }: StepConnectorProps) {\n  return (\n    <div\n      data-slot=\"steps-connector\"\n      aria-hidden=\"true\"\n      className={cn(\n        stepConnectorVariants({\n          orientation,\n          status: isComplete ? 'complete' : 'incomplete',\n        }),\n        isComplete && 'delight-connector-fill',\n      )}\n    />\n  );\n}\n\nStepConnector.displayName = 'StepConnector';\n\nfunction StepsSubtext({ children, className }: StepsSubtextProps) {\n  return (\n    <span\n      data-slot=\"steps-subtext\"\n      className={cn(stepSubtextVariants(), className)}\n    >\n      {children}\n    </span>\n  );\n}\n\nStepsSubtext.displayName = 'Steps.Subtext';\n\nfunction StepsItem({\n  status: statusOverride,\n  onClick,\n  children,\n  className,\n}: StepsItemProps) {\n  const ctx = useStepsContext();\n  const index = React.useContext(StepIndexContext);\n  const status = statusOverride ?? ctx.getStepStatus(index);\n  const isFirst = index === 0;\n  const handleClick =\n    onClick ?? (ctx.onStepClick ? () => ctx.onStepClick?.(index) : undefined);\n\n  // Extract subtext from children\n  let label: React.ReactNode = null;\n  let subtext: React.ReactNode = null;\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === StepsSubtext) {\n      subtext = child;\n    } else if (child != null && child !== false) {\n      label = child;\n    }\n  });\n\n  // Connector colored based on previous step's completion (source step, not destination)\n  const prevStepStatus = !isFirst ? ctx.getStepStatus(index - 1) : undefined;\n  const connector = !isFirst && (\n    <StepConnector\n      orientation={ctx.orientation}\n      isComplete={prevStepStatus === 'complete'}\n    />\n  );\n\n  const isHorizontal = ctx.orientation === 'horizontal';\n\n  // Build indicator element\n  const indicator = (\n    <StepIndicator\n      index={index}\n      status={status}\n      shape={ctx.shape}\n      bulletType={ctx.bulletType}\n    />\n  );\n\n  // Build label element\n  // In horizontal mode, w-0 ensures the label doesn't affect the indicator column width.\n  // The text overflows visually (centered under the 38px indicator) but the layout\n  // width stays fixed, keeping all connectors equally spaced (matching Figma spec).\n  const labelElement = (\n    <div\n      data-slot=\"steps-label\"\n      className={cn(\n        'flex flex-col',\n        isHorizontal\n          ? 'items-center gap-0.5 text-center w-0 whitespace-nowrap'\n          : 'items-start gap-0.5 ml-2.5',\n      )}\n    >\n      <span className={stepLabelVariants({ status })}>{label}</span>\n      {subtext}\n    </div>\n  );\n\n  // Layout differs by orientation:\n  // - Horizontal: connector + (indicator column), items-start so indicators align at top\n  // - Vertical: connector above, indicator + label in row\n  const content = isHorizontal ? (\n    <div className=\"flex w-full items-start\">\n      {connector}\n      <div className=\"flex flex-col items-center\">\n        {indicator}\n        {labelElement}\n      </div>\n    </div>\n  ) : (\n    <div className=\"flex flex-col items-start\">\n      {connector}\n      <div className=\"flex items-center\">\n        {indicator}\n        {labelElement}\n      </div>\n    </div>\n  );\n\n  const labelText = React.useMemo(() => extractText(label), [label]);\n  const statusSuffix =\n    status === 'complete'\n      ? ', completed'\n      : status === 'active'\n        ? ', current'\n        : '';\n\n  return (\n    <li\n      data-slot=\"steps-item\"\n      aria-current={status === 'active' ? 'step' : undefined}\n      aria-label={\n        !handleClick && labelText\n          ? `Step ${index + 1}: ${labelText}${statusSuffix}`\n          : undefined\n      }\n      className={cn(\n        isHorizontal && !isFirst && 'flex-1',\n        !handleClick && className,\n      )}\n    >\n      {handleClick ? (\n        <button\n          type=\"button\"\n          onClick={handleClick}\n          aria-label={`Step ${index + 1}: ${labelText || ''}${statusSuffix}`}\n          className={cn(\n            'cursor-pointer',\n            isHorizontal && 'w-full',\n            className,\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm',\n          )}\n        >\n          {content}\n        </button>\n      ) : (\n        content\n      )}\n    </li>\n  );\n}\n\nStepsItem.displayName = 'Steps.Item';\n\n/* -----------------------------------------------------------------------------\n * Main Component\n * -------------------------------------------------------------------------- */\n\n/**\n * Steps displays a multi-step progress indicator for wizards and workflows.\n * Supports horizontal/vertical orientation, numbered or icon bullets, and clickable steps.\n *\n * @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps\n * @example\n * ```tsx\n * <Steps\n *   steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Confirm' }]}\n *   currentStep={1}\n *   orientation=\"horizontal\"\n * />\n * ```\n */\nfunction Steps({\n  steps,\n  currentStep = 0,\n  orientation = 'horizontal',\n  shape = 'rounded',\n  bulletType = 'text',\n  onStepClick,\n  children,\n  className,\n}: StepsProps) {\n  const getStepStatus = React.useCallback(\n    (index: number): StepStatus => {\n      if (index < currentStep) return 'complete';\n      if (index === currentStep) return 'active';\n      return 'incomplete';\n    },\n    [currentStep],\n  );\n\n  const contextValue = React.useMemo<StepsContextValue>(\n    () => ({\n      orientation,\n      shape,\n      bulletType,\n      onStepClick,\n      getStepStatus,\n    }),\n    [orientation, shape, bulletType, onStepClick, getStepStatus],\n  );\n\n  // Determine if using flat API or compound API\n  const useCompoundAPI = !steps && React.Children.count(children) > 0;\n\n  const renderFlatAPI = () => {\n    if (!steps || steps.length === 0) return null;\n\n    return steps.map((step, index) => (\n      <StepIndexContext.Provider key={`${index}-${step.label}`} value={index}>\n        <StepsItem>\n          {step.label}\n          {step.subtext && <StepsSubtext>{step.subtext}</StepsSubtext>}\n        </StepsItem>\n      </StepIndexContext.Provider>\n    ));\n  };\n\n  const renderCompoundAPI = () => {\n    return React.Children.map(children, (child, index) => (\n      <StepIndexContext.Provider value={index}>\n        {child}\n      </StepIndexContext.Provider>\n    ));\n  };\n\n  return (\n    <StepsContext.Provider value={contextValue}>\n      <nav\n        aria-label=\"Progress steps\"\n        data-slot=\"steps\"\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: Focusable scroll region satisfies axe scrollable-region-focusable.\n        tabIndex={0}\n        className={cn(\n          'overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          className,\n        )}\n      >\n        <ol\n          data-slot=\"steps-list\"\n          className={cn(\n            'flex',\n            orientation === 'horizontal'\n              ? 'flex-row items-start px-4'\n              : 'flex-col items-start',\n          )}\n        >\n          {useCompoundAPI ? renderCompoundAPI() : renderFlatAPI()}\n        </ol>\n      </nav>\n    </StepsContext.Provider>\n  );\n}\n\nSteps.displayName = 'Steps';\n\n/* -----------------------------------------------------------------------------\n * Compound Export\n * -------------------------------------------------------------------------- */\n\n/**\n * @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps\n */\nexport const StepsCompound = Object.assign(Steps, {\n  Item: StepsItem,\n  Subtext: StepsSubtext,\n});\n\nexport {\n  StepsCompound as Steps,\n  StepsItem,\n  StepsSubtext,\n  stepConnectorVariants,\n  stepIndicatorVariants,\n  stepLabelVariants,\n  stepSubtextVariants,\n};\n","/**\n * Web Component wrapper for Steps\n * Custom element: <hf-steps>\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 { Steps } from '../components/organisms/content/Steps';\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    onStepClick: (index: number) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('step-click', {\n        detail: index,\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 StepsWrapper(props: React.ComponentProps<typeof Steps> & { _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(Steps, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    steps: 'json',\n    currentStep: 'number',\n    orientation: 'string',\n    shape: 'string',\n    bulletType: 'string',\n    className: 'string'\n};\n\nclass StepsWC 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      StepsWrapper,\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(StepsWC.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-steps')) {\n  customElements.define('hf-steps', StepsWC);\n}\n\nexport { StepsWC };\nexport default StepsWC;\n"],"mappings":"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"}

package/dist/wc-react/markdown-renderer.js

@@ -31846,7 +31846,7 @@ function gp(e, t) {
 }
 function Ol({ language: e, inverted: t, message: r }) {
   return /* @__PURE__ */ li("div", {
-    className: xe("my-4 p-4 rounded-lg", t ? "border border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground text-sm" : "border border-destructive bg-destructive/20 text-destructive text-sm"),
+    className: xe("my-4 p-4 rounded-lg", t ? "border border-primary-foreground/30 bg-background/10 text-primary-foreground text-sm" : "border border-destructive bg-destructive/20 text-destructive text-sm"),
     role: "alert",
     "data-slot": "ai-interactive-error",
     children: [
@@ -31875,7 +31875,7 @@ function vp({ code: e, language: t, inverted: r }) {
     })
   });
   return r ? /* @__PURE__ */ ae("div", {
-    className: "my-4 [&_[data-slot=ai-code-block]]:bg-primary-foreground/10 [&_[data-slot=ai-code-block]]:border-primary-foreground/20 [&_[data-slot=ai-code-block-header]]:bg-primary-foreground/5 [&_[data-slot=ai-code-block-header]]:border-primary-foreground/20 [&_[data-slot=ai-code-block-header]_span]:!text-primary-foreground/60 [&_[data-slot=ai-code-block-header]_button]:!text-primary-foreground/60",
+    className: "my-4 [&_[data-slot=ai-code-block]]:bg-background/10 [&_[data-slot=ai-code-block]]:border-primary-foreground/20 [&_[data-slot=ai-code-block-header]]:bg-background/5 [&_[data-slot=ai-code-block-header]]:border-primary-foreground/20 [&_[data-slot=ai-code-block-header]_span]:!text-primary-foreground/60 [&_[data-slot=ai-code-block-header]_button]:!text-primary-foreground/60",
     style: r0,
     children: n
   }) : n;
@@ -31884,7 +31884,7 @@ function yp(e = "default") {
   const t = e === "inverted";
   return function({ className: n, children: i }) {
     if (!n?.includes("language-")) return /* @__PURE__ */ ae("code", {
-      className: xe("px-1.5 py-0.5 rounded text-sm font-mono transition-colors", "break-words [overflow-wrap:anywhere]", t ? "bg-primary-foreground/15 text-primary-foreground" : "bg-accent text-foreground", n),
+      className: xe("px-1.5 py-0.5 rounded text-sm font-mono transition-colors", "break-words [overflow-wrap:anywhere]", t ? "bg-background/15 text-primary-foreground" : "bg-accent text-foreground", n),
       children: i
     });
     const a = /language-(\w+)/.exec(n || ""), l = a ? a[1] : "plaintext", o = String(i).replace(/\n$/, "");
@@ -31937,7 +31937,7 @@ var bp = [$5, ep], xp = [[Rm, { output: "mathml" }]], Ue = "min-w-0 max-w-full b
   },
   bgMuted: {
     default: "bg-muted",
-    inverted: "bg-primary-foreground/20"
+    inverted: "bg-background/20"
   }
 };
 function Ee(e, t) {