@od-oneapp/uni-ui 2026.1.1301

package/dist/nav-app-switcher-V7aJAC18.mjs

@@ -0,0 +1,235 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { a as DropdownMenuItem, h as DropdownMenuTrigger, i as DropdownMenuGroup, o as DropdownMenuLabel, r as DropdownMenuContent, t as DropdownMenu } from "./dropdown-menu-91g1g_Cl.mjs";
+import { t as Separator } from "./separator-veJJBul5.mjs";
+import { d as SidebarMenu, h as SidebarMenuItem, m as SidebarMenuButton } from "./sidebar-CdWE7H3R.mjs";
+import * as React$1 from "react";
+import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/nav-app-switcher/nav-app-switcher.tsx
+/**
+* @fileoverview NavAppSwitcher Component - Premium Harmony V2
+*
+* A sidebar component for switching between different applications or products.
+* Displays the current application with a dropdown menu to select others,
+* featuring Premium Harmony V2 motion standards and accessibility enhancements.
+*
+* Features:
+* - Premium Harmony V2 spring physics for smooth animations
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility compliance
+* - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices
+* - Semantic focus styles with ring indicators
+* - Animated chevron rotation on open/close
+* - Support for custom Link component (e.g., Next.js Link)
+*
+* @module @od-oneapp/uni-ui/components/layout/nav-app-switcher
+* @component NavAppSwitcher
+*
+* @useCases
+* - Multi-app navigation: Switching between different products in a suite
+* - Organizational context: Moving between different business units or departments
+* - Admin dashboards: Quick access to system-wide administration tools
+* - User portal: Navigating between personal, team, and enterprise contexts
+*
+* @example
+* const apps = [
+*   { id: 'app1', name: 'App One', icon: Home, url: '/' },
+*   { id: 'app2', name: 'App Two', icon: Settings, url: '/settings' },
+* ];
+* <NavAppSwitcher currentApp={apps[0]} apps={apps} onAppSelect={(app) => console.log('Selected:', app.name)} />
+*/
+/**
+* Navigation application switcher component
+*
+* Provides a dropdown interface in the sidebar to switch between different
+* products or organizational units. Applies Premium Harmony V2 patterns
+* including touch detection and spring-based animations.
+*
+* @param {NavAppSwitcherProps} props - Component props
+* @returns {JSX.Element} Rendered app switcher
+*/
+function NavAppSwitcher({ currentApp, apps, onAppSelect, LinkComponent = "a" }) {
+	const [mounted, setMounted] = React$1.useState(false);
+	const [opened, { open, close }] = useDisclosure(false);
+	const closeTimeoutRef = React$1.useRef(null);
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const touchActive = mounted && isTouch;
+	const handleMouseEnter = React$1.useCallback(() => {
+		if (touchActive) return;
+		if (closeTimeoutRef.current) {
+			clearTimeout(closeTimeoutRef.current);
+			closeTimeoutRef.current = null;
+		}
+		open();
+	}, [touchActive, open]);
+	const handleMouseLeave = React$1.useCallback(() => {
+		if (touchActive) return;
+		if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+		closeTimeoutRef.current = setTimeout(() => {
+			close();
+			closeTimeoutRef.current = null;
+		}, 150);
+	}, [touchActive, close]);
+	React$1.useEffect(() => {
+		return () => {
+			if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+		"data-touch": touchActive ? "true" : void 0,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsxs(DropdownMenu, {
+			open: opened,
+			onOpenChange: (v) => v ? open() : close(),
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+					size: "lg",
+					className: "transition-none",
+					style: touchActive ? {
+						minHeight: "44px",
+						minWidth: "44px"
+					} : void 0,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg",
+							children: /* @__PURE__ */ jsx(currentApp.icon, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid flex-1 text-left text-sm leading-tight",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate font-semibold",
+								children: currentApp.name
+							}), currentApp.subtitle ? /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground truncate text-xs",
+								children: currentApp.subtitle
+							}) : null]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "ml-auto flex items-center justify-center",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50" })
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-md p-0 shadow-xl",
+				side: "bottom",
+				align: "start",
+				sideOffset: -49,
+				animate: false,
+				onMouseEnter: handleMouseEnter,
+				onMouseLeave: handleMouseLeave,
+				children: [
+					/* @__PURE__ */ jsx(DropdownMenuLabel, {
+						className: "p-0 font-normal",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 p-2 text-left text-sm",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg",
+								children: /* @__PURE__ */ jsx(currentApp.icon, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "grid flex-1 text-left text-sm leading-tight",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate font-semibold",
+									children: currentApp.name
+								}), currentApp.subtitle ? /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground truncate text-xs",
+									children: currentApp.subtitle
+								}) : null]
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(Separator, { className: "bg-border h-px" }),
+					/* @__PURE__ */ jsxs(DropdownMenuGroup, {
+						className: "p-1",
+						children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+							className: "text-muted-foreground px-2 py-1.5 text-xs font-medium",
+							children: "Switch Application"
+						}), apps.filter((app) => app.id !== currentApp.id).map((app) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+							onClick: () => onAppSelect?.(app),
+							className: cn("p-2", touchActive && "min-h-[44px]"),
+							asChild: true,
+							animate: false,
+							children: /* @__PURE__ */ jsxs(LinkComponent, {
+								href: app.url,
+								prefetch: false,
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "border-sidebar-border flex size-8 items-center justify-center rounded-sm border",
+										children: /* @__PURE__ */ jsx(app.icon, {
+											className: "size-4 shrink-0",
+											"aria-hidden": "true"
+										})
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex flex-1 flex-col text-sm",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "font-medium",
+											children: app.name
+										}), app.subtitle ? /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground text-xs",
+											children: app.subtitle
+										}) : null]
+									}),
+									app.isActive ? /* @__PURE__ */ jsx(Check, { className: "ml-auto size-4 shrink-0 opacity-100" }) : null
+								]
+							})
+						}, app.id))]
+					}),
+					/* @__PURE__ */ jsx(Separator, { className: "bg-border h-px" }),
+					/* @__PURE__ */ jsx("div", {
+						className: "p-1",
+						children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+							className: "p-2",
+							asChild: true,
+							animate: false,
+							children: /* @__PURE__ */ jsxs(LinkComponent, {
+								href: "/apps",
+								prefetch: false,
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "border-sidebar-border bg-background flex size-8 items-center justify-center rounded-sm border",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "text-xs font-bold",
+										children: "+"
+									})
+								}), /* @__PURE__ */ jsx("div", {
+									className: "font-medium",
+									children: "Explore all apps"
+								})]
+							})
+						})
+					})
+				]
+			})]
+		})
+	}) });
+}
+/**
+* OneDigital Brand Logo component for use in the app switcher
+*/
+const OneDigitalLogo = ({ className, ...props }) => /* @__PURE__ */ jsx("img", {
+	src: "/cropped-Triad_2022.png",
+	alt: "OneDigital",
+	className: cn("object-contain", className),
+	...props
+});
+
+//#endregion
+export { OneDigitalLogo as n, NavAppSwitcher as t };
+//# sourceMappingURL=nav-app-switcher-V7aJAC18.mjs.map

package/dist/nav-app-switcher-V7aJAC18.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-app-switcher-V7aJAC18.mjs","names":["React"],"sources":["../src/components/layout/nav-app-switcher/nav-app-switcher.tsx"],"sourcesContent":["/**\n * @fileoverview NavAppSwitcher Component - Premium Harmony V2\n *\n * A sidebar component for switching between different applications or products.\n * Displays the current application with a dropdown menu to select others,\n * featuring Premium Harmony V2 motion standards and accessibility enhancements.\n *\n * Features:\n * - Premium Harmony V2 spring physics for smooth animations\n * - Touch detection with automatic sizing for mobile devices\n * - Reduced motion support for accessibility compliance\n * - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices\n * - Semantic focus styles with ring indicators\n * - Animated chevron rotation on open/close\n * - Support for custom Link component (e.g., Next.js Link)\n *\n * @module @od-oneapp/uni-ui/components/layout/nav-app-switcher\n * @component NavAppSwitcher\n *\n * @useCases\n * - Multi-app navigation: Switching between different products in a suite\n * - Organizational context: Moving between different business units or departments\n * - Admin dashboards: Quick access to system-wide administration tools\n * - User portal: Navigating between personal, team, and enterprise contexts\n *\n * @example\n * const apps = [\n *   { id: 'app1', name: 'App One', icon: Home, url: '/' },\n *   { id: 'app2', name: 'App Two', icon: Settings, url: '/settings' },\n * ];\n * <NavAppSwitcher currentApp={apps[0]} apps={apps} onAppSelect={(app) => console.log('Selected:', app.name)} />\n */\n\n'use client';\n\nimport * as React from 'react';\n\nimport { useDisclosure, useMediaQuery } from '@mantine/hooks';\nimport { Check, ChevronsUpDown } from 'lucide-react';\n\nimport { cn } from '../../../lib/utils';\nimport { Separator } from '../../elements/atoms/separator/separator';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '../../elements/organisms/dropdown-menu';\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../sidebar';\n\n/**\n * Application definition for the switcher\n */\nexport interface App {\n  /** Unique identifier for the app */\n  id: string;\n  /** Display name of the application */\n  name: string;\n  /** Optional subtitle or description */\n  subtitle?: string;\n  /** Icon component to display for the app (Lucide icon or custom component) */\n  icon: React.ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>;\n  /** URL for the application */\n  url: string;\n  /** Whether this app is currently active */\n  isActive?: boolean;\n}\n\n/**\n * Props for NavAppSwitcher component\n */\nexport interface NavAppSwitcherProps {\n  /** Current active app information */\n  currentApp: App;\n  /** List of available apps to switch between */\n  apps: App[];\n  /** Callback triggered when an app is selected */\n  onAppSelect?: (app: App) => void;\n  /** Custom link component for navigation */\n  LinkComponent?: React.ElementType<{\n    href: string;\n    children: React.ReactNode;\n    className?: string;\n    prefetch?: boolean;\n  }>;\n}\n\n/**\n * Navigation application switcher component\n *\n * Provides a dropdown interface in the sidebar to switch between different\n * products or organizational units. Applies Premium Harmony V2 patterns\n * including touch detection and spring-based animations.\n *\n * @param {NavAppSwitcherProps} props - Component props\n * @returns {JSX.Element} Rendered app switcher\n */\nexport function NavAppSwitcher({\n  currentApp,\n  apps,\n  onAppSelect,\n  LinkComponent = 'a',\n}: NavAppSwitcherProps) {\n  const [mounted, setMounted] = React.useState(false);\n  const [opened, { open, close }] = useDisclosure(false);\n  const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Premium Harmony V2: Touch detection for mobile devices\n  const isTouch = useMediaQuery('(pointer: coarse)');\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Avoid hydration mismatch by only applying touch-specific attributes on the client\n  const touchActive = mounted && isTouch;\n\n  // Unified hover handlers for both trigger and content\n  const handleMouseEnter = React.useCallback(() => {\n    if (touchActive) return;\n    if (closeTimeoutRef.current) {\n      clearTimeout(closeTimeoutRef.current);\n      closeTimeoutRef.current = null;\n    }\n    open();\n  }, [touchActive, open]);\n\n  const handleMouseLeave = React.useCallback(() => {\n    if (touchActive) return;\n    if (closeTimeoutRef.current) {\n      clearTimeout(closeTimeoutRef.current);\n    }\n    closeTimeoutRef.current = setTimeout(() => {\n      close();\n      closeTimeoutRef.current = null;\n    }, 150);\n  }, [touchActive, close]);\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem\n        data-touch={touchActive ? 'true' : undefined}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        <DropdownMenu open={opened} onOpenChange={v => (v ? open() : close())}>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"transition-none\"\n              // WCAG 2.5.5: Ensure 44px minimum touch target on touch devices\n              style={\n                touchActive\n                  ? {\n                      minHeight: '44px',\n                      minWidth: '44px',\n                    }\n                  : undefined\n              }\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <currentApp.icon className=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{currentApp.name}</span>\n                {currentApp.subtitle ? (\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {currentApp.subtitle}\n                  </span>\n                ) : null}\n              </div>\n              <div className=\"ml-auto flex items-center justify-center\" aria-hidden=\"true\">\n                <ChevronsUpDown className=\"size-4 opacity-50\" />\n              </div>\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-md p-0 shadow-xl\"\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={-49}\n            animate={false}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 p-2 text-left text-sm\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <currentApp.icon className=\"size-4\" aria-hidden=\"true\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{currentApp.name}</span>\n                  {currentApp.subtitle ? (\n                    <span className=\"text-muted-foreground truncate text-xs\">\n                      {currentApp.subtitle}\n                    </span>\n                  ) : null}\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <Separator className=\"bg-border h-px\" />\n            <DropdownMenuGroup className=\"p-1\">\n              <DropdownMenuLabel className=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\">\n                Switch Application\n              </DropdownMenuLabel>\n              {apps\n                .filter(app => app.id !== currentApp.id)\n                .map(app => (\n                  <DropdownMenuItem\n                    key={app.id}\n                    onClick={() => onAppSelect?.(app)}\n                    className={cn('p-2', touchActive && 'min-h-[44px]')}\n                    asChild\n                    animate={false}\n                  >\n                    <LinkComponent\n                      href={app.url}\n                      prefetch={false}\n                      className=\"flex items-center gap-2\"\n                    >\n                      <div className=\"border-sidebar-border flex size-8 items-center justify-center rounded-sm border\">\n                        <app.icon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n                      </div>\n                      <div className=\"flex flex-1 flex-col text-sm\">\n                        <span className=\"font-medium\">{app.name}</span>\n                        {app.subtitle ? (\n                          <span className=\"text-muted-foreground text-xs\">{app.subtitle}</span>\n                        ) : null}\n                      </div>\n                      {app.isActive ? (\n                        <Check className=\"ml-auto size-4 shrink-0 opacity-100\" />\n                      ) : null}\n                    </LinkComponent>\n                  </DropdownMenuItem>\n                ))}\n            </DropdownMenuGroup>\n            <Separator className=\"bg-border h-px\" />\n            <div className=\"p-1\">\n              <DropdownMenuItem className=\"p-2\" asChild animate={false}>\n                <LinkComponent href=\"/apps\" prefetch={false} className=\"flex items-center gap-2\">\n                  <div className=\"border-sidebar-border bg-background flex size-8 items-center justify-center rounded-sm border\">\n                    <span className=\"text-xs font-bold\">+</span>\n                  </div>\n                  <div className=\"font-medium\">Explore all apps</div>\n                </LinkComponent>\n              </DropdownMenuItem>\n            </div>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n\n/**\n * OneDigital Brand Logo component for use in the app switcher\n */\nexport const OneDigitalLogo = ({\n  className,\n  ...props\n}: {\n  className?: string;\n  [key: string]: any;\n}) => (\n  <img\n    src=\"/cropped-Triad_2022.png\"\n    alt=\"OneDigital\"\n    className={cn('object-contain', className)}\n    {...props}\n  />\n);\n"],"mappings":"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"}

package/dist/nav-main-BscfzNoi.mjs

@@ -0,0 +1,105 @@
+'use client';
+import { r as SPRING_FLUID, t as AI_FOCUS } from "./motion-zelaDelJ.mjs";
+import { _ as SidebarMenuSub, d as SidebarMenu, h as SidebarMenuItem, i as SidebarGroup, m as SidebarMenuButton, s as SidebarGroupLabel, v as SidebarMenuSubButton, y as SidebarMenuSubItem } from "./sidebar-CdWE7H3R.mjs";
+import { i as CollapsibleTrigger, n as CollapsibleContent, t as Collapsible } from "./collapsible-CXy4T04n.mjs";
+import * as React$1 from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { ChevronRight } from "lucide-react";
+import { motion } from "motion/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/nav-main/nav-main.tsx
+/**
+* Individual navigation menu item with collapsible sub-items
+* Applies Premium Harmony V2 patterns for touch and motion
+*/
+function NavMenuItem({ item, LinkComponent = "a" }) {
+	const [open, setOpen] = React$1.useState(item.isActive ?? false);
+	const [mounted, setMounted] = React$1.useState(false);
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	const prefersReducedMotion = useReducedMotion();
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const touchActive = mounted && isTouch;
+	const chevronTransition = React$1.useMemo(() => prefersReducedMotion ? { duration: .2 } : SPRING_FLUID, [prefersReducedMotion]);
+	return /* @__PURE__ */ jsx(Collapsible, {
+		asChild: true,
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+			"data-touch": touchActive ? "true" : void 0,
+			children: item.items?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+					tooltip: item.title,
+					className: AI_FOCUS.ring,
+					"data-state": open ? "open" : "closed",
+					style: touchActive ? {
+						minHeight: "44px",
+						minWidth: "44px"
+					} : void 0,
+					children: [
+						/* @__PURE__ */ jsx(item.icon, { "aria-hidden": "true" }),
+						/* @__PURE__ */ jsx("span", { children: item.title }),
+						/* @__PURE__ */ jsx(motion.div, {
+							animate: { rotate: open ? 90 : 0 },
+							transition: chevronTransition,
+							className: "ml-auto flex items-center justify-center",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
+				asChild: true,
+				className: AI_FOCUS.ring,
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				style: touchActive ? {
+					minHeight: "44px",
+					minWidth: "44px"
+				} : void 0,
+				children: /* @__PURE__ */ jsx(LinkComponent, {
+					href: subItem.url,
+					prefetch: false,
+					children: /* @__PURE__ */ jsx("span", { children: subItem.title })
+				})
+			}) }, subItem.title)) }) })] }) : /* @__PURE__ */ jsx(SidebarMenuButton, {
+				asChild: true,
+				tooltip: item.title,
+				className: AI_FOCUS.ring,
+				style: touchActive ? {
+					minHeight: "44px",
+					minWidth: "44px"
+				} : void 0,
+				children: /* @__PURE__ */ jsxs(LinkComponent, {
+					href: item.url,
+					prefetch: false,
+					children: [/* @__PURE__ */ jsx(item.icon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: item.title })]
+				})
+			})
+		})
+	});
+}
+/**
+* Main navigation component for sidebar menus
+*
+* Renders a labeled navigation group with collapsible sub-items.
+* Applies Premium Harmony V2 patterns including touch detection,
+* reduced motion support, and 44px minimum touch targets.
+*
+* @param {NavMainProps} props - Component props
+* @returns {JSX.Element} Rendered navigation group
+*/
+function NavMain({ items, label = "Platform", LinkComponent = "a" }) {
+	return /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }), /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(NavMenuItem, {
+		item,
+		LinkComponent
+	}, item.title)) })] });
+}
+
+//#endregion
+export { NavMain as t };
+//# sourceMappingURL=nav-main-BscfzNoi.mjs.map

package/dist/nav-main-BscfzNoi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-main-BscfzNoi.mjs","names":["React"],"sources":["../src/components/layout/nav-main/nav-main.tsx"],"sourcesContent":["'use client';\n\n/**\n * @fileoverview NavMain Component - Premium Harmony V2\n *\n * Main navigation component for sidebar menus with collapsible sub-items.\n * Supports nested navigation structures with icons, active state tracking,\n * and Premium Harmony V2 motion standards.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Premium Harmony V2 spring physics for smooth chevron rotation\n * - Touch detection with automatic sizing for mobile devices\n * - Reduced motion support for accessibility\n * - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices\n * - Semantic focus styles from design tokens\n * - Collapsible sub-navigation with spring animations\n * - Active state tracking and persistence\n * - Polymorphic link rendering for framework integration\n * - Data attributes for state management\n *\n * @module @od-oneapp/uni-ui/components/layout/nav-main\n * @component NavMain, NavMenuItem\n *\n * @useCases\n * - Application sidebar navigation with hierarchical menu structure\n * - Dashboard layouts with categorized navigation sections\n * - Admin panels with nested settings and configuration menus\n * - Multi-tenant applications with organization/team navigation\n * - Content management systems with section-based navigation\n * - Mobile-responsive navigation with touch-optimized targets\n * - Accessibility-compliant navigation for keyboard and screen reader users\n * - Framework-agnostic navigation (Next.js, React Router, etc.)\n *\n * @example\n *   import { NavMain } from '@od-oneapp/uni-ui/components/layout/nav-main';\n *   import { Home, Settings, Users } from 'lucide-react';\n *   import Link from 'next/link';\n *   const items = [\n *     { title: 'Home', url: '/', icon: Home, isActive: true },\n *     { title: 'Settings', url: '/settings', icon: Settings,\n *       items: [{ title: 'Profile', url: '/settings/profile' }] },\n *   ];\n *   <NavMain items={items} label=\"Platform\" LinkComponent={Link} />\n *\n * @example\n *   <NavMain items={navigationItems} label=\"Dashboard\" LinkComponent={RouterLink} />\n */\n\nimport type { ComponentType } from 'react';\nimport * as React from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { ChevronRight, type LucideIcon } from 'lucide-react';\nimport { motion } from 'motion/react';\n\nimport { AI_FOCUS, SPRING_FLUID } from '../../../constants/motion';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../../elements/molecules/collapsible';\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '../sidebar';\n\n/**\n * Navigation item configuration\n * Supports both flat and nested navigation structures\n */\ninterface NavItem {\n  /** Display title for the navigation item */\n  title: string;\n  /** URL/path for the navigation item */\n  url: string;\n  /** Icon component (Lucide or custom React component) */\n  icon: LucideIcon | ComponentType<any>;\n  /** Whether this item is currently active (controls default open state for collapsibles) */\n  isActive?: boolean;\n  /** Optional nested sub-items (creates collapsible navigation group) */\n  items?: {\n    /** Display title for the sub-item */\n    title: string;\n    /** URL/path for the sub-item */\n    url: string;\n  }[];\n}\n\n/**\n * Individual navigation menu item with collapsible sub-items\n * Applies Premium Harmony V2 patterns for touch and motion\n */\nfunction NavMenuItem({\n  item,\n  LinkComponent = 'a',\n}: {\n  item: NavItem;\n  LinkComponent?: React.ElementType;\n}) {\n  const [open, setOpen] = React.useState(item.isActive ?? false);\n  const [mounted, setMounted] = React.useState(false);\n\n  // Premium Harmony V2: Touch detection for mobile devices\n  const isTouch = useMediaQuery('(pointer: coarse)');\n\n  // Premium Harmony V2: Reduced motion support\n  const prefersReducedMotion = useReducedMotion();\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Avoid hydration mismatch by only applying touch-specific attributes on the client\n  const touchActive = mounted && isTouch;\n\n  // Calculate spring transition based on motion preferences\n  const chevronTransition = React.useMemo(\n    () =>\n      prefersReducedMotion\n        ? { duration: 0.2 } // Faster, simpler animation for reduced motion\n        : SPRING_FLUID, // Premium spring physics for normal motion\n    [prefersReducedMotion],\n  );\n\n  return (\n    <Collapsible asChild open={open} onOpenChange={setOpen}>\n      <SidebarMenuItem data-touch={touchActive ? 'true' : undefined}>\n        {item.items?.length ? (\n          <>\n            <CollapsibleTrigger asChild>\n              <SidebarMenuButton\n                tooltip={item.title}\n                className={AI_FOCUS.ring}\n                data-state={open ? 'open' : 'closed'}\n                // WCAG 2.5.5: Ensure 44px minimum touch target on touch devices\n                style={\n                  touchActive\n                    ? {\n                        minHeight: '44px',\n                        minWidth: '44px',\n                      }\n                    : undefined\n                }\n              >\n                <item.icon aria-hidden=\"true\" />\n                <span>{item.title}</span>\n                <motion.div\n                  animate={{ rotate: open ? 90 : 0 }}\n                  transition={chevronTransition}\n                  className=\"ml-auto flex items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  <ChevronRight className=\"size-4\" />\n                </motion.div>\n              </SidebarMenuButton>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                {item.items.map(subItem => (\n                  <SidebarMenuSubItem key={subItem.title}>\n                    <SidebarMenuSubButton\n                      asChild\n                      className={AI_FOCUS.ring}\n                      onClick={e => {\n                        // Prevent closing the group when clicking sub-items\n                        e.stopPropagation();\n                      }}\n                      // WCAG 2.5.5: Ensure 44px minimum touch target on touch devices\n                      style={\n                        touchActive\n                          ? {\n                              minHeight: '44px',\n                              minWidth: '44px',\n                            }\n                          : undefined\n                      }\n                    >\n                      <LinkComponent href={subItem.url} prefetch={false}>\n                        <span>{subItem.title}</span>\n                      </LinkComponent>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                ))}\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </>\n        ) : (\n          <SidebarMenuButton\n            asChild\n            tooltip={item.title}\n            className={AI_FOCUS.ring}\n            // WCAG 2.5.5: Ensure 44px minimum touch target on touch devices\n            style={\n              touchActive\n                ? {\n                    minHeight: '44px',\n                    minWidth: '44px',\n                  }\n                : undefined\n            }\n          >\n            <LinkComponent href={item.url} prefetch={false}>\n              <item.icon aria-hidden=\"true\" />\n              <span>{item.title}</span>\n            </LinkComponent>\n          </SidebarMenuButton>\n        )}\n      </SidebarMenuItem>\n    </Collapsible>\n  );\n}\n\n/**\n * Props for NavMain component\n */\ninterface NavMainProps {\n  /** Array of navigation items to render */\n  items: NavItem[];\n  /** Label for the navigation group (e.g., \"Platform\", \"Dashboard\") */\n  label?: string;\n  /**\n   * Custom link component for navigation.\n   * Use `Link` from `next/link` or `@vercel/microfrontends/next/client` for Next.js apps.\n   * Use `Link` from `react-router-dom` for React Router apps.\n   * @default 'a' - Regular anchor element\n   */\n  LinkComponent?: React.ElementType;\n}\n\n/**\n * Main navigation component for sidebar menus\n *\n * Renders a labeled navigation group with collapsible sub-items.\n * Applies Premium Harmony V2 patterns including touch detection,\n * reduced motion support, and 44px minimum touch targets.\n *\n * @param {NavMainProps} props - Component props\n * @returns {JSX.Element} Rendered navigation group\n */\nexport function NavMain({ items, label = 'Platform', LinkComponent = 'a' }: NavMainProps) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>{label}</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map(item => (\n          <NavMenuItem key={item.title} item={item} LinkComponent={LinkComponent} />\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoGA,SAAS,YAAY,EACnB,MACA,gBAAgB,OAIf;CACD,MAAM,CAAC,MAAM,WAAWA,QAAM,SAAS,KAAK,YAAY,MAAM;CAC9D,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,MAAM;CAGnD,MAAM,UAAU,cAAc,oBAAoB;CAGlD,MAAM,uBAAuB,kBAAkB;AAE/C,SAAM,gBAAgB;AACpB,aAAW,KAAK;IACf,EAAE,CAAC;CAGN,MAAM,cAAc,WAAW;CAG/B,MAAM,oBAAoBA,QAAM,cAE5B,uBACI,EAAE,UAAU,IAAK,GACjB,cACN,CAAC,qBAAqB,CACvB;AAED,QACE,oBAAC;EAAY;EAAc;EAAM,cAAc;YAC7C,oBAAC;GAAgB,cAAY,cAAc,SAAS;aACjD,KAAK,OAAO,SACX,8CACE,oBAAC;IAAmB;cAClB,qBAAC;KACC,SAAS,KAAK;KACd,WAAW,SAAS;KACpB,cAAY,OAAO,SAAS;KAE5B,OACE,cACI;MACE,WAAW;MACX,UAAU;MACX,GACD;;MAGN,oBAAC,KAAK,QAAK,eAAY,SAAS;MAChC,oBAAC,oBAAM,KAAK,QAAa;MACzB,oBAAC,OAAO;OACN,SAAS,EAAE,QAAQ,OAAO,KAAK,GAAG;OAClC,YAAY;OACZ,WAAU;OACV,eAAY;iBAEZ,oBAAC,gBAAa,WAAU,WAAW;QACxB;;MACK;KACD,EACrB,oBAAC,gCACC,oBAAC,4BACE,KAAK,MAAM,KAAI,YACd,oBAAC,gCACC,oBAAC;IACC;IACA,WAAW,SAAS;IACpB,UAAS,MAAK;AAEZ,OAAE,iBAAiB;;IAGrB,OACE,cACI;KACE,WAAW;KACX,UAAU;KACX,GACD;cAGN,oBAAC;KAAc,MAAM,QAAQ;KAAK,UAAU;eAC1C,oBAAC,oBAAM,QAAQ,QAAa;MACd;KACK,IArBA,QAAQ,MAsBZ,CACrB,GACa,GACE,IACpB,GAEH,oBAAC;IACC;IACA,SAAS,KAAK;IACd,WAAW,SAAS;IAEpB,OACE,cACI;KACE,WAAW;KACX,UAAU;KACX,GACD;cAGN,qBAAC;KAAc,MAAM,KAAK;KAAK,UAAU;gBACvC,oBAAC,KAAK,QAAK,eAAY,SAAS,EAChC,oBAAC,oBAAM,KAAK,QAAa;MACX;KACE;IAEN;GACN;;;;;;;;;;;;AA+BlB,SAAgB,QAAQ,EAAE,OAAO,QAAQ,YAAY,gBAAgB,OAAqB;AACxF,QACE,qBAAC,2BACC,oBAAC,+BAAmB,QAA0B,EAC9C,oBAAC,yBACE,MAAM,KAAI,SACT,oBAAC;EAAmC;EAAqB;IAAvC,KAAK,MAAmD,CAC1E,GACU,IACD"}

package/dist/nav-secondary-t-xeA0I4.mjs

@@ -0,0 +1,51 @@
+'use client';
+import { AI_FOCUS } from "./components-ai-elements-constants.mjs";
+import { d as SidebarMenu, h as SidebarMenuItem, i as SidebarGroup, m as SidebarMenuButton, o as SidebarGroupContent } from "./sidebar-CdWE7H3R.mjs";
+import * as React$1 from "react";
+import { useMediaQuery } from "@mantine/hooks";
+import "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/nav-secondary/nav-secondary.tsx
+/**
+* Secondary navigation component for sidebar menus
+*
+* Renders a simple list of navigation links for secondary/utility actions.
+* Applies Premium Harmony V2 patterns including touch detection,
+* reduced motion support, and 44px minimum touch targets.
+*
+* @param {NavSecondaryProps} props - Component props
+* @returns {JSX.Element} Rendered navigation group
+*/
+function NavSecondary({ items, LinkComponent = "a", ...props }) {
+	const [mounted, setMounted] = React$1.useState(false);
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const touchActive = mounted && isTouch;
+	return /* @__PURE__ */ jsx(SidebarGroup, {
+		...props,
+		children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, {
+			"data-touch": touchActive ? "true" : void 0,
+			children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+				asChild: true,
+				size: "sm",
+				className: AI_FOCUS.ring,
+				style: touchActive ? {
+					minHeight: "44px",
+					minWidth: "44px"
+				} : void 0,
+				children: /* @__PURE__ */ jsxs(LinkComponent, {
+					href: item.url,
+					prefetch: false,
+					children: [/* @__PURE__ */ jsx(item.icon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: item.title })]
+				})
+			})
+		}, item.title)) }) })
+	});
+}
+
+//#endregion
+export { NavSecondary as t };
+//# sourceMappingURL=nav-secondary-t-xeA0I4.mjs.map

package/dist/nav-secondary-t-xeA0I4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-secondary-t-xeA0I4.mjs","names":["React"],"sources":["../src/components/layout/nav-secondary/nav-secondary.tsx"],"sourcesContent":["'use client';\n\n/**\n * @fileoverview NavSecondary Component - Premium Harmony V2\n *\n * A sidebar navigation component for displaying secondary navigation items.\n * Used for external links, supplementary navigation options, and utility actions.\n * Implements Premium Harmony V2 patterns for enhanced touch and accessibility support.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Touch detection with automatic sizing for mobile devices\n * - Reduced motion support for accessibility\n * - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices\n * - Semantic focus styles from design tokens\n * - Polymorphic link rendering for framework integration\n * - Data attributes for state management\n *\n * @module @od-oneapp/uni-ui/components/layout/nav-secondary\n * @component NavSecondary\n *\n * @useCases\n * - Secondary navigation for help, support, and documentation links\n * - Utility links in application sidebars (Settings, Profile, Logout)\n * - External resource links in admin panels\n * - Footer navigation in sidebar layouts\n * - Social media and community links in app navigation\n * - Quick access to feedback and contact options\n * - Mobile-responsive navigation with touch-optimized targets\n * - Accessibility-compliant navigation for keyboard and screen reader users\n * - Framework-agnostic navigation (Next.js, React Router, etc.)\n *\n * @example\n * // Basic usage with Next.js Link\n * import { NavSecondary } from '@od-oneapp/uni-ui/components/layout/nav-secondary';\n * import { HelpCircle, Settings, Mail } from 'lucide-react';\n * import Link from 'next/link';\n * const items = [{ title: 'Help', url: '/help', icon: HelpCircle }];\n * <NavSecondary items={items} LinkComponent={Link} />\n *\n * @example\n * // External links in sidebar footer\n * <SidebarFooter><NavSecondary items={externalLinks} /></SidebarFooter>\n *\n * @example\n * // With custom link component\n * <NavSecondary items={items} LinkComponent={RouterLink} className=\"mt-auto\" />\n */\n\nimport type { ComponentType } from 'react';\nimport * as React from 'react';\n\nimport { useMediaQuery } from '@mantine/hooks';\nimport { type LucideIcon } from 'lucide-react';\n\nimport { AI_FOCUS } from '../../ai-elements/ai-elements.constants';\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '../sidebar';\n\n/**\n * Navigation item configuration for secondary navigation\n */\ninterface NavSecondaryItem {\n  /** Display title for the navigation item */\n  title: string;\n  /** URL/path for the navigation item */\n  url: string;\n  /** Icon component (Lucide or custom React component) */\n  icon: LucideIcon | ComponentType<any>;\n}\n\n/**\n * Props for NavSecondary component\n */\nexport interface NavSecondaryProps extends React.ComponentPropsWithoutRef<typeof SidebarGroup> {\n  /** Navigation items to display */\n  items: NavSecondaryItem[];\n  /**\n   * Custom link component for navigation.\n   * Use `Link` from `next/link` or `@vercel/microfrontends/next/client` for Next.js apps.\n   * @default 'a' - Regular anchor element\n   */\n  LinkComponent?: React.ElementType | ComponentType<any>;\n}\n\n/**\n * Secondary navigation component for sidebar menus\n *\n * Renders a simple list of navigation links for secondary/utility actions.\n * Applies Premium Harmony V2 patterns including touch detection,\n * reduced motion support, and 44px minimum touch targets.\n *\n * @param {NavSecondaryProps} props - Component props\n * @returns {JSX.Element} Rendered navigation group\n */\nexport function NavSecondary({ items, LinkComponent = 'a', ...props }: NavSecondaryProps) {\n  // Premium Harmony V2: Touch detection for mobile devices\n  const [mounted, setMounted] = React.useState(false);\n  const isTouch = useMediaQuery('(pointer: coarse)');\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Avoid hydration mismatch by only applying touch-specific attributes on the client\n  const touchActive = mounted && isTouch;\n\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map(item => (\n            <SidebarMenuItem key={item.title} data-touch={touchActive ? 'true' : undefined}>\n              <SidebarMenuButton\n                asChild\n                size=\"sm\"\n                className={AI_FOCUS.ring}\n                // WCAG 2.5.5: Ensure 44px minimum touch target on touch devices\n                style={\n                  touchActive\n                    ? {\n                        minHeight: '44px',\n                        minWidth: '44px',\n                      }\n                    : undefined\n                }\n              >\n                <LinkComponent href={item.url} prefetch={false}>\n                  <item.icon aria-hidden=\"true\" />\n                  <span>{item.title}</span>\n                </LinkComponent>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqGA,SAAgB,aAAa,EAAE,OAAO,gBAAgB,KAAK,GAAG,SAA4B;CAExF,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,MAAM;CACnD,MAAM,UAAU,cAAc,oBAAoB;AAElD,SAAM,gBAAgB;AACpB,aAAW,KAAK;IACf,EAAE,CAAC;CAGN,MAAM,cAAc,WAAW;AAE/B,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC,iCACC,oBAAC,yBACE,MAAM,KAAI,SACT,oBAAC;GAAiC,cAAY,cAAc,SAAS;aACnE,oBAAC;IACC;IACA,MAAK;IACL,WAAW,SAAS;IAEpB,OACE,cACI;KACE,WAAW;KACX,UAAU;KACX,GACD;cAGN,qBAAC;KAAc,MAAM,KAAK;KAAK,UAAU;gBACvC,oBAAC,KAAK,QAAK,eAAY,SAAS,EAChC,oBAAC,oBAAM,KAAK,QAAa;MACX;KACE;KAnBA,KAAK,MAoBT,CAClB,GACU,GACM;GACT"}

package/dist/nav-user-A4YHm3-O.mjs

@@ -0,0 +1,193 @@
+'use client';
+import { r as SPRING_FLUID } from "./motion-zelaDelJ.mjs";
+import { AI_FOCUS } from "./components-ai-elements-constants.mjs";
+import { n as AvatarFallback, r as AvatarImage, t as Avatar } from "./avatar-DjiX7nT8.mjs";
+import { a as DropdownMenuItem, h as DropdownMenuTrigger, i as DropdownMenuGroup, o as DropdownMenuLabel, r as DropdownMenuContent, t as DropdownMenu, u as DropdownMenuSeparator } from "./dropdown-menu-91g1g_Cl.mjs";
+import { d as SidebarMenu, h as SidebarMenuItem, m as SidebarMenuButton, w as useSidebar } from "./sidebar-CdWE7H3R.mjs";
+import * as React$1 from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Moon, Sparkles, Sun } from "lucide-react";
+import { motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+
+//#region src/components/layout/nav-user/nav-user.tsx
+/**
+* @fileoverview NavUser Component - Premium Harmony V2
+*
+* User menu component for sidebar navigation. Displays user avatar, name, email,
+* and provides dropdown menu with user account actions and theme toggle.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 spring physics for smooth animations
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility
+* - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices
+* - Semantic focus styles from design tokens
+* - Theme toggle integration (light/dark mode)
+* - Data attributes for state management
+* - Responsive dropdown positioning (mobile vs desktop)
+*
+* @module @od-oneapp/uni-ui/components/layout/nav-user
+* @component NavUser
+*
+* @useCases
+* - Application sidebar user profile menu with account settings
+* - Dashboard layouts with quick access to user preferences
+* - Admin panels with user-specific actions and theme controls
+* - Multi-tenant applications with organization/account switching
+* - Mobile-responsive navigation with touch-optimized user menu
+* - Accessibility-compliant user menu for keyboard and screen reader users
+* - Settings access with theme toggle, billing, and notification preferences
+* - Quick logout and account management from any page
+*
+* @example
+* // Basic usage
+* import { NavUser } from '@od-oneapp/uni-ui/components/layout/nav-user';
+* const user = { name: 'Jane Doe', email: 'jane@example.com', avatar: '/avatar.jpg' };
+* <NavUser user={user} />
+*
+* @example
+* // With dynamic user data from auth hook
+* const { user } = useAuth();
+* <NavUser user={{ name: user.displayName, email: user.email, avatar: user.photoURL }} />
+*/
+/**
+* Navigation user component with dropdown menu
+*
+* Displays user profile information and provides access to account settings,
+* theme toggle, and user actions. Applies Premium Harmony V2 patterns including
+* touch detection, reduced motion support, and 44px minimum touch targets.
+*
+* @param {NavUserProps} props - Component props
+* @returns {JSX.Element} Rendered user navigation menu
+*/
+function NavUser({ user }) {
+	const { isMobile } = useSidebar();
+	const { setTheme } = useTheme();
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	const prefersReducedMotion = useReducedMotion();
+	const chevronTransition = React$1.useMemo(() => prefersReducedMotion ? { duration: .2 } : SPRING_FLUID, [prefersReducedMotion]);
+	const [open, setOpen] = React$1.useState(false);
+	return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+		"data-touch": isTouch ? "true" : void 0,
+		children: /* @__PURE__ */ jsxs(DropdownMenu, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+					size: "lg",
+					className: `data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground ${AI_FOCUS.ring}`,
+					"data-state": open ? "open" : "closed",
+					style: isTouch ? {
+						minHeight: "44px",
+						minWidth: "44px"
+					} : void 0,
+					children: [
+						/* @__PURE__ */ jsxs(Avatar, {
+							className: "h-8 w-8 rounded-lg",
+							children: [/* @__PURE__ */ jsx(AvatarImage, {
+								src: user.avatar,
+								alt: user.name
+							}), /* @__PURE__ */ jsx(AvatarFallback, {
+								className: "rounded-lg",
+								children: "CN"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid flex-1 text-left text-sm leading-tight",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate font-medium",
+								children: user.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate text-xs",
+								children: user.email
+							})]
+						}),
+						/* @__PURE__ */ jsx(motion.div, {
+							animate: { rotate: open ? 180 : 0 },
+							transition: chevronTransition,
+							className: "ml-auto flex items-center justify-center",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4" })
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+				side: isMobile ? "bottom" : "right",
+				align: "end",
+				sideOffset: 4,
+				children: [
+					/* @__PURE__ */ jsx(DropdownMenuLabel, {
+						className: "p-0 font-normal",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
+							children: [/* @__PURE__ */ jsxs(Avatar, {
+								className: "h-8 w-8 rounded-lg",
+								children: [/* @__PURE__ */ jsx(AvatarImage, {
+									src: user.avatar,
+									alt: user.name
+								}), /* @__PURE__ */ jsx(AvatarFallback, {
+									className: "rounded-lg",
+									children: "CN"
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "grid flex-1 text-left text-sm leading-tight",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate font-medium",
+									children: user.name
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate text-xs",
+									children: user.email
+								})]
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						size: isTouch ? "touch" : "default",
+						children: [/* @__PURE__ */ jsx(Sparkles, {}), "Upgrade to Pro"]
+					}) }),
+					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							size: isTouch ? "touch" : "default",
+							children: [/* @__PURE__ */ jsx(BadgeCheck, {}), "Account"]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							size: isTouch ? "touch" : "default",
+							children: [/* @__PURE__ */ jsx(CreditCard, {}), "Billing"]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							size: isTouch ? "touch" : "default",
+							children: [/* @__PURE__ */ jsx(Bell, {}), "Notifications"]
+						})
+					] }),
+					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						size: isTouch ? "touch" : "default",
+						onClick: () => setTheme("light"),
+						children: [/* @__PURE__ */ jsx(Sun, {}), "Light"]
+					}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						size: isTouch ? "touch" : "default",
+						onClick: () => setTheme("dark"),
+						children: [/* @__PURE__ */ jsx(Moon, {}), "Dark"]
+					})] }),
+					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						size: isTouch ? "touch" : "default",
+						children: [/* @__PURE__ */ jsx(LogOut, {}), "Log out"]
+					})
+				]
+			})]
+		})
+	}) });
+}
+
+//#endregion
+export { NavUser as t };
+//# sourceMappingURL=nav-user-A4YHm3-O.mjs.map