@humain/ui 2.2.2 → 2.2.3

package/dist/index225.js

@@ -1,70 +1,786 @@
+"use client";
 import { cn } from "./index2.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/templates/PageBackground/PageBackground.tsx
-/** Grid pattern: 17 vertical + 17 horizontal lines at 48px spacing */
-function GridPattern() {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "stroke-border",
-		strokeWidth: "1",
-		children: [Array.from({ length: 17 }).map((_, i) => /* @__PURE__ */ jsx("line", {
-			x1: i * 48,
-			y1: "0",
-			x2: i * 48,
-			y2: "768"
-		}, `v-${i}`)), Array.from({ length: 17 }).map((_, i) => /* @__PURE__ */ jsx("line", {
-			x1: "0",
-			y1: i * 48,
-			x2: "768",
-			y2: i * 48
-		}, `h-${i}`))]
-	});
-}
-/** Circular pattern: 8 concentric circles at 48px radius increments */
-function CircularPattern() {
-	return /* @__PURE__ */ jsx("g", {
-		className: "stroke-border",
-		strokeWidth: "1",
-		fill: "none",
-		children: [
-			48,
-			96,
-			144,
-			192,
-			240,
-			288,
-			336,
-			384
-		].map((radius) => /* @__PURE__ */ jsx("circle", {
-			cx: "384",
-			cy: "384",
-			r: radius
-		}, radius))
-	});
-}
-var FADE_MASK = "radial-gradient(circle at center, black 0%, transparent 70%)";
-function PageBackground({ pattern, offset = "top", className }) {
-	const isIconCenter = offset === "icon-center";
-	const topOffset = isIconCenter ? void 0 : offset === "top" ? -260 : offset === "center" ? -384 : offset;
+import { Badge } from "./index11.js";
+import { Separator } from "./index48.js";
+import { Avatar } from "./index72.js";
+import { BrandIcon } from "./index73.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./index121.js";
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./index211.js";
+import { MOBILE_BREAKPOINT, useIsMobile } from "./index215.js";
+import { Sidebar as SidebarCompound, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, useSidebar } from "./index216.js";
+import { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH } from "./index217.js";
+import { cva } from "class-variance-authority";
+import { ChevronRight, MessageCircle, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/templates/AppSidebar/AppSidebar.tsx
+/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: ChatList uses tabIndex on scrollable div for keyboard scrolling */
+/** biome-ignore-all lint/a11y/useSemanticElements: NavSection uses role="separator" on inner <div>; ChatList uses role="list" on scrollable div */
+/** biome-ignore-all lint/a11y/useFocusableInteractive: Non-focusable separator per WAI-ARIA spec for decorative separators */
+/** biome-ignore-all lint/a11y/useAriaPropsForRole: Non-focusable separators don't require aria-valuenow per WAI-ARIA spec */
+/** biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: role="separator" on <div> inside list items for semantic section boundaries */
+function formatAccessibleLabel(label, badge) {
+	if (badge == null) return label;
+	return `${label}, ${typeof badge === "number" ? `${badge} ${badge === 1 ? "item" : "items"}` : badge}`;
+}
+function getSidebarBgClass(isCollapsed, sidebarBgColor) {
+	return isCollapsed ? "bg-transparent" : sidebarBgColor ?? "bg-[var(--sidebar)]";
+}
+function getSidebarSurfaceClass({ isCollapsed, side, rounded, backgroundClass }) {
+	return cn("flex h-full min-h-0 flex-col items-center pb-4 pt-6", isCollapsed ? "w-full px-6" : ["w-[calc(100%-0.75rem)] px-3", side === "left" ? "mr-3 self-start" : "ml-3 self-end"], backgroundClass, rounded && (side === "left" ? "rounded-r-lg" : "rounded-l-lg"));
+}
+function getSkeletonCount(count, fallback) {
+	return typeof count === "number" && Number.isFinite(count) && count >= 0 ? Math.floor(count) : fallback;
+}
+var APP_SIDEBAR_IMPLICIT_SLOT = Symbol("AppSidebarImplicitSlot");
+function markAppSidebarImplicitSlot(component, slot) {
+	const slottedComponent = component;
+	slottedComponent[APP_SIDEBAR_IMPLICIT_SLOT] = slot;
+	return slottedComponent;
+}
+function isAppSidebarImplicitSlotComponent(value) {
+	return (typeof value === "function" || typeof value === "object" && value !== null) && APP_SIDEBAR_IMPLICIT_SLOT in value;
+}
+function getAppSidebarImplicitSlot(childType) {
+	if (isAppSidebarImplicitSlotComponent(childType)) return childType[APP_SIDEBAR_IMPLICIT_SLOT];
+	if (typeof childType === "object" && childType !== null) {
+		const wrappedComponent = childType;
+		return getAppSidebarImplicitSlot(wrappedComponent.type) ?? getAppSidebarImplicitSlot(wrappedComponent.render);
+	}
+}
+function useSlotChildren(children) {
+	return React$1.useMemo(() => {
+		const result = {
+			header: [],
+			content: [],
+			footer: [],
+			explicitHeader: null,
+			explicitContent: null,
+			explicitFooter: null
+		};
+		React$1.Children.forEach(children, (child) => {
+			if (!React$1.isValidElement(child)) return;
+			const childType = child.type;
+			if (childType === AppSidebarHeader) {
+				result.explicitHeader = child;
+				return;
+			}
+			if (childType === AppSidebarContent) {
+				result.explicitContent = child;
+				return;
+			}
+			if (childType === AppSidebarFooter) {
+				result.explicitFooter = child;
+				return;
+			}
+			const implicitSlot = getAppSidebarImplicitSlot(childType);
+			if (implicitSlot === "header") result.header.push(child);
+			else if (implicitSlot === "content") result.content.push(child);
+			else if (implicitSlot === "footer") result.footer.push(child);
+			else result.content.push(child);
+		});
+		return result;
+	}, [children]);
+}
+var AppSidebarLayoutContext = React$1.createContext({ side: "left" });
+function useAppSidebarLayout() {
+	return React$1.useContext(AppSidebarLayoutContext);
+}
+function getAppSidebarDirection(element) {
+	const win = element?.ownerDocument.defaultView;
+	if (!element || !win) return "ltr";
+	return win.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
+function normalizeAppSidebarDirection(dir) {
+	return dir === "rtl" || dir === "ltr" ? dir : void 0;
+}
+function getAppSidebarSideFromDirection(direction) {
+	return direction === "rtl" ? "right" : "left";
+}
+function getAppSidebarDirectionTargets(element) {
+	const targets = /* @__PURE__ */ new Set();
+	let current = element;
+	while (current) {
+		targets.add(current);
+		if (current === element.ownerDocument.documentElement) break;
+		current = current.parentElement;
+	}
+	targets.add(element.ownerDocument.documentElement);
+	if (element.ownerDocument.body) targets.add(element.ownerDocument.body);
+	return Array.from(targets);
+}
+function useResolvedAppSidebarSide({ containerRef, explicitDir, explicitSide }) {
+	const [detectedDirection, setDetectedDirection] = React$1.useState(() => normalizeAppSidebarDirection(explicitDir) ?? "ltr");
+	React$1.useEffect(() => {
+		if (explicitSide) return;
+		const normalizedExplicitDir = normalizeAppSidebarDirection(explicitDir);
+		if (normalizedExplicitDir) {
+			setDetectedDirection((current) => current === normalizedExplicitDir ? current : normalizedExplicitDir);
+			return;
+		}
+		const container = containerRef.current;
+		const win = container?.ownerDocument.defaultView;
+		if (!container || !win) return;
+		const detectDirection = () => {
+			const nextDirection = getAppSidebarDirection(container);
+			setDetectedDirection((current) => current === nextDirection ? current : nextDirection);
+		};
+		detectDirection();
+		const Observer = win.MutationObserver;
+		if (!Observer) return;
+		const observer = new Observer(detectDirection);
+		for (const target of getAppSidebarDirectionTargets(container)) observer.observe(target, {
+			attributes: true,
+			attributeFilter: [
+				"dir",
+				"class",
+				"style"
+			]
+		});
+		return () => observer.disconnect();
+	}, [
+		containerRef,
+		explicitDir,
+		explicitSide
+	]);
+	return explicitSide ?? getAppSidebarSideFromDirection(detectedDirection);
+}
+var DEFAULT_COMPACTED_LOGO = /* @__PURE__ */ jsx("span", {
+	className: "flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground",
+	children: /* @__PURE__ */ jsx(BrandIcon, {
+		icon: "mark",
+		size: "sm"
+	})
+});
+function AppSidebarLogo({ logo, compactedLogo, subtext, className, ...props }) {
+	const { state, toggleSidebar } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	const effectiveCompactedLogo = compactedLogo ?? DEFAULT_COMPACTED_LOGO;
+	if (isCollapsed) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-sidebar-logo",
+		className: cn("flex items-center justify-center", className),
+		...props,
+		dir: "ltr",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: toggleSidebar,
+			className: "group/logo relative flex size-[52px] items-center justify-center rounded-md p-2 transition-colors duration-200 ease-smooth hover:bg-sidebar-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
+			"aria-label": "Expand sidebar",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "transition-opacity duration-200 ease-smooth group-hover/logo:opacity-0 motion-reduce:transition-none",
+				children: effectiveCompactedLogo
+			}), /* @__PURE__ */ jsx(PanelLeftOpen, { className: "absolute size-5 opacity-0 transition-opacity duration-200 ease-smooth group-hover/logo:opacity-100 motion-reduce:transition-none" })]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "app-sidebar-logo",
+		className: cn("flex h-[52px] items-center justify-between gap-2 rounded-md p-2", className),
+		...props,
+		dir: "ltr",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: logo || /* @__PURE__ */ jsxs(Fragment, { children: [DEFAULT_COMPACTED_LOGO, /* @__PURE__ */ jsx("span", {
+					className: "text-lg font-semibold tracking-tight text-foreground",
+					children: "HUMAIN"
+				})] })
+			}), subtext && /* @__PURE__ */ jsx("p", {
+				className: "ps-11 text-sm text-sidebar-foreground",
+				children: /* @__PURE__ */ jsx("span", {
+					"data-slot": "app-sidebar-logo-subtext",
+					children: subtext
+				})
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: toggleSidebar,
+			className: "relative flex size-9 items-center justify-center rounded-lg text-sidebar-foreground transition-colors duration-200 ease-smooth hover:bg-sidebar-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none after:absolute after:-inset-1",
+			"aria-label": "Collapse sidebar",
+			children: /* @__PURE__ */ jsx(PanelLeftClose, {
+				"aria-hidden": "true",
+				className: "size-5"
+			})
+		})]
+	});
+}
+AppSidebarLogo.displayName = "AppSidebar.Logo";
+function AppSidebarHeader({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-sidebar-header",
+		className,
+		children
+	});
+}
+AppSidebarHeader.displayName = "AppSidebar.Header";
+function AppSidebarContent({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-sidebar-content",
+		className,
+		children
+	});
+}
+AppSidebarContent.displayName = "AppSidebar.Content";
+function AppSidebarFooter({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "page-background",
-		className: cn("pointer-events-none absolute left-1/2 -translate-x-1/2 size-[768px]", isIconCenter && "top-1/2 -translate-y-1/2", className),
-		style: {
-			...topOffset !== void 0 ? { top: topOffset } : {},
-			maskImage: FADE_MASK,
-			WebkitMaskImage: FADE_MASK
-		},
+		"data-slot": "app-sidebar-footer",
+		className,
+		children
+	});
+}
+AppSidebarFooter.displayName = "AppSidebar.Footer";
+function AppSidebarNav({ children, "aria-label": ariaLabel = "Sidebar navigation", className }) {
+	const menuContent = /* @__PURE__ */ jsx(SidebarMenu, {
+		className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-1",
+		children: React$1.Children.map(children, (child) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: child }))
+	});
+	return /* @__PURE__ */ jsx(SidebarGroup, {
+		"data-slot": "app-sidebar-nav",
+		className: cn("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", className),
+		children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": ariaLabel,
+			children: menuContent
+		}) })
+	});
+}
+AppSidebarNav.displayName = "AppSidebar.Nav";
+markAppSidebarImplicitSlot(AppSidebarNav, "content");
+function AppSidebarNavSection({ label, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "app-sidebar-nav-section",
+		role: "separator",
+		"aria-label": label,
+		className: cn("py-2 group-data-[collapsible=icon]:w-[52px]", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-sidebar-foreground/80",
+				children: label
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "hidden py-2 group-data-[collapsible=icon]:block",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			}), /* @__PURE__ */ jsx(Separator, { className: "mx-auto w-full" })]
+		})]
+	});
+}
+AppSidebarNavSection.displayName = "AppSidebar.NavSection";
+var navItemVariants = cva("relative flex w-full items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-normal transition-[color,background-color] duration-200 ease-smooth motion-reduce:transition-none", {
+	variants: { state: {
+		default: "text-sidebar-foreground hover:bg-sidebar-accent",
+		active: "bg-primary/10 text-sidebar-foreground"
+	} },
+	defaultVariants: { state: "default" }
+});
+function AppSidebarNavItem({ icon, label, isActive = false, badge, onClick, href, className, children }) {
+	const { state, containerRef } = useSidebar();
+	const { side: sidebarSide } = useAppSidebarLayout();
+	const isCollapsed = state === "collapsed";
+	const hasChildren = React$1.Children.count(children) > 0;
+	const hasActiveChild = React$1.Children.toArray(children).some((child) => React$1.isValidElement(child) && child.props.isActive === true);
+	const isHighlighted = isActive || hasActiveChild;
+	const [isOpen, setIsOpen] = React$1.useState(isHighlighted && hasChildren);
+	const subNavId = React$1.useId();
+	const floatingSide = sidebarSide === "right" ? "left" : "right";
+	const flyoutPanelBackground = "linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)";
+	const flyoutFrameEdgeClassName = sidebarSide === "right" ? "justify-end rounded-l-xl rounded-r-none" : "justify-start rounded-r-xl rounded-l-none";
+	const flyoutPanelEdgeClassName = sidebarSide === "right" ? "rounded-l-xl" : "rounded-r-xl";
+	const flyoutAnchor = React$1.useMemo(() => ({ getBoundingClientRect: () => {
+		const container = containerRef.current;
+		const rect = container?.getBoundingClientRect();
+		const viewportHeight = (container?.ownerDocument.defaultView)?.innerHeight ?? rect?.height ?? 0;
+		const x = rect ? sidebarSide === "right" ? rect.left : rect.right : 0;
+		return {
+			x,
+			y: 0,
+			top: 0,
+			right: x,
+			bottom: viewportHeight,
+			left: x,
+			width: 0,
+			height: viewportHeight
+		};
+	} }), [containerRef, sidebarSide]);
+	React$1.useEffect(() => {
+		if (isHighlighted && hasChildren) setIsOpen(true);
+	}, [isHighlighted, hasChildren]);
+	const accessibleLabel = formatAccessibleLabel(label, badge);
+	const iconElement = /* @__PURE__ */ jsx("span", {
+		"data-slot": "nav-icon",
+		className: "flex shrink-0 items-center p-0.5 [&>svg]:size-4",
+		children: icon
+	});
+	const labelElement = /* @__PURE__ */ jsx("span", {
+		className: "flex-1 text-start group-data-[collapsible=icon]:hidden",
+		children: label
+	});
+	const badgeElement = badge != null && /* @__PURE__ */ jsx(Badge, {
+		size: "sm",
+		variant: "soft",
+		color: "primary",
+		className: "px-1.5 group-data-[collapsible=icon]:hidden",
+		"aria-hidden": "true",
+		children: badge
+	});
+	const chevronElement = hasChildren && /* @__PURE__ */ jsx(ChevronRight, {
+		"aria-hidden": "true",
+		className: cn("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth group-data-[collapsible=icon]:hidden motion-reduce:transition-none", isOpen ? "rotate-90" : "rtl:rotate-180", isHighlighted && isOpen && "text-primary")
+	});
+	const itemClassName = cn(navItemVariants({ state: isHighlighted ? "active" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "min-h-11 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-2 group-data-[collapsible=icon]:w-11 group-data-[collapsible=icon]:h-11", className);
+	const ariaProps = isActive ? { "aria-current": "page" } : {};
+	if (isCollapsed) {
+		const collapsedIconElement = /* @__PURE__ */ jsx("span", {
+			"data-slot": "nav-icon",
+			className: "flex shrink-0 items-center justify-center p-0.5 [&>svg]:size-4",
+			children: icon
+		});
+		const triggerElement = href ? /* @__PURE__ */ jsx("a", {
+			href,
+			className: cn(itemClassName),
+			"aria-label": accessibleLabel,
+			...ariaProps,
+			"data-slot": "app-sidebar-nav-item",
+			children: collapsedIconElement
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: hasChildren ? () => setIsOpen(!isOpen) : onClick,
+			className: cn(itemClassName, "cursor-pointer"),
+			"aria-label": accessibleLabel,
+			...ariaProps,
+			"data-slot": "app-sidebar-nav-item",
+			children: collapsedIconElement
+		});
+		if (!hasChildren) {
+			if (!label) return triggerElement;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: triggerElement }), /* @__PURE__ */ jsx(TooltipPopup, {
+				side: floatingSide,
+				sideOffset: 8,
+				children: label
+			})] });
+		}
+		return /* @__PURE__ */ jsxs(PopoverRoot, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			className: cn(itemClassName, "cursor-pointer"),
+			"aria-label": accessibleLabel,
+			"data-slot": "app-sidebar-nav-item",
+			children: collapsedIconElement
+		}), /* @__PURE__ */ jsx(PopoverPopup, {
+			side: floatingSide,
+			align: "start",
+			sideOffset: 0,
+			alignOffset: 0,
+			anchor: flyoutAnchor,
+			collisionAvoidance: {
+				side: "none",
+				align: "none",
+				fallbackAxisSide: "none"
+			},
+			positionMethod: "fixed",
+			"aria-label": `${label} sub-navigation`,
+			style: { "--app-sidebar-flyout-panel-bg": flyoutPanelBackground },
+			className: cn("flex h-[var(--anchor-height)] w-[276px] border-0 bg-transparent p-0 ring-0 shadow-none", "overflow-clip", flyoutFrameEdgeClassName),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex h-full w-64 flex-col gap-0.5 overflow-y-auto p-3 shadow-[var(--shadow-hover-card)]", "supports-backdrop-filter:backdrop-blur-[60px] [background-image:var(--app-sidebar-flyout-panel-bg)] delight-tooltip-stagger", flyoutPanelEdgeClassName),
+				"data-slot": "app-sidebar-nav-flyout-panel",
+				role: "group",
+				"aria-label": label,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "px-2 pb-2 pt-1 text-xs font-semibold text-primary opacity-70",
+					"aria-hidden": "true",
+					children: label
+				}), children]
+			})
+		})] });
+	}
+	const handleClick = () => {
+		if (hasChildren) setIsOpen(!isOpen);
+		onClick?.();
+	};
+	const mainElement = href && !hasChildren ? /* @__PURE__ */ jsxs("a", {
+		href,
+		className: itemClassName,
+		"aria-label": accessibleLabel,
+		...ariaProps,
+		"data-slot": "app-sidebar-nav-item",
+		children: [
+			iconElement,
+			labelElement,
+			badgeElement,
+			chevronElement
+		]
+	}) : /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleClick,
+		className: cn(itemClassName, "cursor-pointer"),
+		"aria-label": accessibleLabel,
+		"aria-expanded": hasChildren ? isOpen : void 0,
+		"aria-controls": hasChildren ? subNavId : void 0,
+		...ariaProps,
+		"data-slot": "app-sidebar-nav-item",
+		children: [
+			iconElement,
+			labelElement,
+			badgeElement,
+			chevronElement
+		]
+	});
+	if (!hasChildren) return mainElement;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [mainElement, isOpen && /* @__PURE__ */ jsx("ul", {
+		id: subNavId,
+		role: "group",
+		"aria-label": `${label} sub-navigation`,
+		className: "ms-4 flex flex-col items-start border-s border-sidebar-border py-1 ps-2",
+		children
+	})] });
+}
+AppSidebarNavItem.displayName = "AppSidebar.NavItem";
+function AppSidebarNavSub({ label, badge, isActive = false, href, onClick, className }) {
+	const accessibleLabel = formatAccessibleLabel(label, badge);
+	const itemClassName = cn(navItemVariants({ state: isActive ? "active" : "default" }), "min-h-11 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "transition-[color,background-color,transform] ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", className);
+	const ariaProps = isActive ? { "aria-current": "page" } : {};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "flex-1 text-start",
+		children: label
+	}), badge != null && /* @__PURE__ */ jsx(Badge, {
+		size: "sm",
+		variant: "soft",
+		color: "primary",
+		className: "px-1.5",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("svg", {
-			className: "absolute inset-0 size-[768px]",
-			viewBox: "0 0 768 768",
-			fill: "none",
-			focusable: "false",
-			children: pattern === "grid" ? /* @__PURE__ */ jsx(GridPattern, {}) : /* @__PURE__ */ jsx(CircularPattern, {})
+		children: badge
+	})] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		href,
+		className: itemClassName,
+		"aria-label": accessibleLabel,
+		...ariaProps,
+		"data-slot": "app-sidebar-nav-sub",
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: cn(itemClassName, "cursor-pointer delight-selection-press"),
+		"aria-label": accessibleLabel,
+		...ariaProps,
+		"data-slot": "app-sidebar-nav-sub",
+		children: content
+	});
+}
+AppSidebarNavSub.displayName = "AppSidebar.NavSub";
+function AppSidebarNavSkeleton({ count = 3, className }) {
+	const skeletonCount = getSkeletonCount(count, 3);
+	return /* @__PURE__ */ jsx(SidebarGroup, {
+		className: cn("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", className),
+		children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
+			className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
+			children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarNavSkeleton, {}) }, `nav-skeleton-${i}`))
+		}) })
+	});
+}
+AppSidebarNavSkeleton.displayName = "AppSidebar.NavSkeleton";
+markAppSidebarImplicitSlot(AppSidebarNavSkeleton, "content");
+function AppSidebarChatList({ label = "Recent Chats", children, className }) {
+	const { state } = useSidebar();
+	if (state === "collapsed") return null;
+	return /* @__PURE__ */ jsxs(SidebarGroup, {
+		"data-slot": "app-sidebar-chat-list",
+		className: cn("mt-4 flex min-h-0 flex-1 flex-col p-0", className),
+		children: [/* @__PURE__ */ jsx(SidebarGroupLabel, {
+			className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx(SidebarGroupContent, {
+			className: "flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-full flex-col overflow-y-auto pb-5 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+				tabIndex: 0,
+				role: "list",
+				"aria-label": label,
+				children
+			})
+		})]
+	});
+}
+AppSidebarChatList.displayName = "AppSidebar.ChatList";
+markAppSidebarImplicitSlot(AppSidebarChatList, "content");
+var chatItemVariants = cva("flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 min-h-11 transition-[color,background-color,transform] duration-200 ease-smooth cursor-pointer motion-reduce:transition-none ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", {
+	variants: { state: {
+		default: "hover:bg-muted",
+		hover: "bg-muted",
+		selected: "bg-primary/10"
+	} },
+	defaultVariants: { state: "default" }
+});
+function AppSidebarChatItem({ title, time, icon, isSelected = false, onClick, onContextMenu, className }) {
+	const { state } = useSidebar();
+	const { side: sidebarSide } = useAppSidebarLayout();
+	const isCollapsed = state === "collapsed";
+	const tooltipSide = sidebarSide === "right" ? "left" : "right";
+	if (isCollapsed) {
+		const collapsedButton = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick,
+			onContextMenu,
+			"data-slot": "app-sidebar-chat-item",
+			"aria-label": title || void 0,
+			className: cn("flex size-11 items-center justify-center rounded-md transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", isSelected ? "bg-primary/10" : "hover:bg-muted", className),
+			children: icon || /* @__PURE__ */ jsx(MessageCircle, { className: "size-5 text-secondary-foreground" })
+		});
+		if (!title && !time) return collapsedButton;
+		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: collapsedButton }), /* @__PURE__ */ jsx(TooltipPopup, {
+			side: tooltipSide,
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: title
+				}), time && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: time
+				})]
+			})
+		})] });
+	}
+	return /* @__PURE__ */ jsx("div", {
+		role: "listitem",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick,
+			onContextMenu,
+			"data-slot": "app-sidebar-chat-item",
+			"aria-label": title,
+			className: cn(chatItemVariants({ state: isSelected ? "selected" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-base font-semibold text-secondary-foreground truncate",
+				children: title
+			}), time && /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-normal text-muted-foreground shrink-0",
+				children: time
+			})]
+		})
+	});
+}
+AppSidebarChatItem.displayName = "AppSidebar.ChatItem";
+function AppSidebarChatListSkeleton({ count = 5, label = "Recent Chats", className }) {
+	const skeletonCount = getSkeletonCount(count, 5);
+	return /* @__PURE__ */ jsxs(SidebarGroup, {
+		className: cn("mt-4 flex min-h-0 flex-1 flex-col p-0 group-data-[collapsible=icon]:hidden", className),
+		children: [/* @__PURE__ */ jsx(SidebarGroupLabel, {
+			className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx(SidebarGroupContent, {
+			className: "flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-full flex-col overflow-y-auto pb-5",
+				children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx(SidebarMenuSkeleton, {}, `chat-skeleton-${i}`))
+			})
+		})]
+	});
+}
+AppSidebarChatListSkeleton.displayName = "AppSidebar.ChatListSkeleton";
+markAppSidebarImplicitSlot(AppSidebarChatListSkeleton, "content");
+function AppSidebarAccount({ name, subtitle, avatarSrc, isOnline = false, onExpand, className }) {
+	const { state } = useSidebar();
+	const { side: sidebarSide } = useAppSidebarLayout();
+	const isCollapsed = state === "collapsed";
+	const tooltipSide = sidebarSide === "right" ? "left" : "right";
+	if (isCollapsed) {
+		const avatarButton = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onExpand,
+			"data-slot": "app-sidebar-account",
+			"aria-label": name ? `${name} account menu` : "Account menu",
+			"aria-haspopup": "true",
+			className: cn("flex min-h-11 min-w-11 items-center justify-center rounded-lg transition-opacity duration-200 ease-smooth hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", className),
+			children: /* @__PURE__ */ jsx(Avatar, {
+				src: avatarSrc,
+				alt: name,
+				fallback: name,
+				size: "sm",
+				className: "size-[42px]",
+				indicator: isOnline ? "online" : void 0
+			})
+		});
+		if (!name && !subtitle) return avatarButton;
+		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: avatarButton }), /* @__PURE__ */ jsx(TooltipPopup, {
+			side: tooltipSide,
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [name && /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: name
+				}), subtitle && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: subtitle
+				})]
+			})
+		})] });
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onExpand,
+		"data-slot": "app-sidebar-account",
+		"aria-label": name ? `${name} account menu` : "Account menu",
+		"aria-haspopup": "true",
+		className: cn("flex w-full items-center gap-1.5 rounded-lg px-1 py-2 transition-colors duration-200 ease-smooth hover:bg-sidebar-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", className),
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			src: avatarSrc,
+			alt: name,
+			fallback: name,
+			size: "sm",
+			className: "size-[42px]",
+			indicator: isOnline ? "online" : void 0
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col items-start overflow-hidden",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "w-full truncate text-start text-sm font-medium text-sidebar-foreground",
+				children: name
+			}), subtitle && /* @__PURE__ */ jsx("span", {
+				className: "w-full truncate text-start text-xs font-light text-sidebar-foreground",
+				children: subtitle
+			})]
+		})]
+	});
+}
+AppSidebarAccount.displayName = "AppSidebar.Account";
+markAppSidebarImplicitSlot(AppSidebarAccount, "footer");
+function AppSidebarAccountSkeleton({ className }) {
+	return /* @__PURE__ */ jsx(SidebarAccountSkeleton, { className });
+}
+AppSidebarAccountSkeleton.displayName = "AppSidebar.AccountSkeleton";
+markAppSidebarImplicitSlot(AppSidebarAccountSkeleton, "footer");
+function AppSidebarSkeleton({ navCount = 4, chatCount = 5, logo, compactedLogo, collapsible = "icon", side, rounded = false, sidebarBgColor, className }) {
+	const { state, containerRef } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	const resolvedSide = useResolvedAppSidebarSide({
+		containerRef,
+		explicitSide: side
+	});
+	const bgClass = getSidebarBgClass(isCollapsed, sidebarBgColor);
+	return /* @__PURE__ */ jsx(SidebarCompound, {
+		collapsible,
+		side: resolvedSide,
+		width: APP_SIDEBAR_EXPANDED_WIDTH,
+		collapsedWidth: APP_SIDEBAR_COLLAPSED_WIDTH,
+		className: cn("bg-transparent", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "app-sidebar-surface",
+			className: getSidebarSurfaceClass({
+				isCollapsed,
+				side: resolvedSide,
+				rounded,
+				backgroundClass: bgClass
+			}),
+			children: [
+				/* @__PURE__ */ jsx(SidebarHeader, {
+					className: "h-[68px] w-full p-2",
+					children: /* @__PURE__ */ jsx(AppSidebarLogo, {
+						logo,
+						compactedLogo
+					})
+				}),
+				/* @__PURE__ */ jsxs(SidebarContent, {
+					className: "flex w-full flex-col gap-0 overflow-hidden pt-3 group-data-[collapsible=icon]:items-center",
+					children: [/* @__PURE__ */ jsx(AppSidebarNavSkeleton, { count: navCount }), /* @__PURE__ */ jsx(AppSidebarChatListSkeleton, { count: chatCount })]
+				}),
+				/* @__PURE__ */ jsx(SidebarFooter, {
+					className: "w-full gap-0 p-0 group-data-[collapsible=icon]:items-center",
+					children: /* @__PURE__ */ jsx(AppSidebarAccountSkeleton, {})
+				})
+			]
+		})
+	});
+}
+AppSidebarSkeleton.displayName = "AppSidebar.Skeleton";
+/**
+* AppSidebar is a full-featured application sidebar with navigation, chat list, and account sections.
+* Supports collapsible modes with a unified logo toggle and loading skeletons.
+*
+* @llms Full-featured app sidebar with nav, chat list, account, collapsible modes
+* @example
+* ```tsx
+* <AppSidebar logo={<Logo />} collapsible="icon">
+*   <AppSidebar.Nav>
+*     <AppSidebar.NavItem icon={<Home />} label="Home" isActive />
+*   </AppSidebar.Nav>
+*   <AppSidebar.ChatList>
+*     <AppSidebar.ChatItem title="Chat 1" />
+*   </AppSidebar.ChatList>
+*   <AppSidebar.Account name="User" subtitle="user@example.com" />
+* </AppSidebar>
+* ```
+*/
+function AppSidebarRoot({ logo, compactedLogo, logoSubtext, collapsible = "icon", side, rounded = false, sidebarBgColor, className, children, dir, ...props }) {
+	const { state, containerRef } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	const resolvedSide = useResolvedAppSidebarSide({
+		containerRef,
+		explicitDir: dir,
+		explicitSide: side
+	});
+	const bgClass = getSidebarBgClass(isCollapsed, sidebarBgColor);
+	const slots = useSlotChildren(children);
+	return /* @__PURE__ */ jsx(AppSidebarLayoutContext.Provider, {
+		value: { side: resolvedSide },
+		children: /* @__PURE__ */ jsx(SidebarCompound, {
+			collapsible,
+			side: resolvedSide,
+			width: APP_SIDEBAR_EXPANDED_WIDTH,
+			collapsedWidth: APP_SIDEBAR_COLLAPSED_WIDTH,
+			dir,
+			className: cn("bg-transparent", className),
+			...props,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "app-sidebar-surface",
+				className: getSidebarSurfaceClass({
+					isCollapsed,
+					side: resolvedSide,
+					rounded,
+					backgroundClass: bgClass
+				}),
+				children: [
+					/* @__PURE__ */ jsx(SidebarHeader, {
+						className: "h-[68px] w-full p-2",
+						children: /* @__PURE__ */ jsx(AppSidebarLogo, {
+							logo,
+							compactedLogo,
+							subtext: logoSubtext
+						})
+					}),
+					/* @__PURE__ */ jsx(SidebarContent, {
+						className: "flex w-full flex-col gap-0 overflow-hidden pt-3 group-data-[collapsible=icon]:items-center",
+						children: slots.explicitContent ? slots.explicitContent.props.children : slots.content
+					}),
+					/* @__PURE__ */ jsx(SidebarFooter, {
+						className: "w-full gap-0 p-0 group-data-[collapsible=icon]:items-center",
+						children: slots.explicitFooter ? slots.explicitFooter.props.children : slots.footer
+					})
+				]
+			})
 		})
 	});
 }
-PageBackground.displayName = "PageBackground";
+AppSidebarRoot.displayName = "AppSidebar";
+var AppSidebar = Object.assign(AppSidebarRoot, {
+	Header: AppSidebarHeader,
+	Content: AppSidebarContent,
+	Footer: AppSidebarFooter,
+	Nav: AppSidebarNav,
+	NavSection: AppSidebarNavSection,
+	NavItem: AppSidebarNavItem,
+	NavSub: AppSidebarNavSub,
+	NavSkeleton: AppSidebarNavSkeleton,
+	ChatList: AppSidebarChatList,
+	ChatItem: AppSidebarChatItem,
+	ChatListSkeleton: AppSidebarChatListSkeleton,
+	Account: AppSidebarAccount,
+	AccountSkeleton: AppSidebarAccountSkeleton,
+	Skeleton: AppSidebarSkeleton
+});
 //#endregion
-export { PageBackground };
+export { AppSidebar, MOBILE_BREAKPOINT, SidebarCompound as Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, chatItemVariants, navItemVariants, useIsMobile, useSidebar };
 
 //# sourceMappingURL=index225.js.map