"use client";
import { cn } from "./index3.js";
import { Separator } from "./index7.js";
import { Badge } from "./index13.js";
import { Avatar } from "./index15.js";
import { BrandIcon } from "./index55.js";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./index436.js";
import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./index467.js";
import "./index471.js";
import { SidebarAccountSkeleton, SidebarCompound, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, useSidebar } from "./index472.js";
import { cva } from "class-variance-authority";
import { ChevronRight, MessageCircle, PanelLeftClose, PanelLeftOpen } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, 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-muted";
}
function useSlotChildren(children, config) {
	return React.useMemo(() => {
		const result = {
			header: [],
			content: [],
			footer: [],
			explicitHeader: null,
			explicitContent: null,
			explicitFooter: null
		};
		React.Children.forEach(children, (child) => {
			if (!React.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;
			}
			if (config.header.some((type) => childType === type)) result.header.push(child);
			else if (config.content.some((type) => childType === type)) result.content.push(child);
			else if (config.footer.some((type) => childType === type)) result.footer.push(child);
			else result.content.push(child);
		});
		return result;
	}, [children, config]);
}
var DEFAULT_COMPACTED_LOGO = /* @__PURE__ */ jsx(BrandIcon, {
	icon: "mark",
	size: "lg"
});
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,
		children: /* @__PURE__ */ jsxs("button", {
			type: "button",
			onClick: toggleSidebar,
			className: "group/logo relative flex min-h-11 min-w-11 items-center justify-center rounded-md p-1 transition-colors duration-200 ease-smooth hover:bg-background 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 items-center justify-between px-3", className),
		...props,
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-0",
			children: [/* @__PURE__ */ jsx("div", {
				className: "flex items-center gap-2",
				children: logo || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BrandIcon, {
					icon: "mark",
					size: "lg"
				}), /* @__PURE__ */ jsx("span", {
					className: "text-lg font-semibold tracking-tight text-foreground",
					children: "HUMAIN"
				})] })
			}), subtext && /* @__PURE__ */ jsx("p", {
				className: "text-sm text-sidebar-foreground",
				children: subtext
			})]
		}), /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: toggleSidebar,
			className: "relative flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none after:absolute after:-inset-2",
			"aria-label": "Collapse sidebar",
			children: /* @__PURE__ */ jsx(PanelLeftClose, {
				"aria-hidden": "true",
				className: "size-4"
			})
		})]
	});
}
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": "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-2",
		children: React.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";
function AppSidebarNavSection({ label, className }) {
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "app-sidebar-nav-section",
		role: "separator",
		"aria-label": label,
		className: cn("py-2", 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-8" })]
		})]
	});
}
AppSidebarNavSection.displayName = "AppSidebar.NavSection";
var navItemVariants = cva("relative flex w-full items-center gap-1.5 rounded-md 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-background",
		active: "bg-primary/10 text-sidebar-foreground"
	} },
	defaultVariants: { state: "default" }
});
function AppSidebarNavItem({ icon, label, isActive = false, badge, onClick, href, className, children }) {
	const { state } = useSidebar();
	const isCollapsed = state === "collapsed";
	const hasChildren = React.Children.count(children) > 0;
	const [isOpen, setIsOpen] = React.useState(isActive && hasChildren);
	const subNavId = React.useId();
	React.useEffect(() => {
		if (isActive && hasChildren) setIsOpen(true);
	}, [isActive, 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: isActive ? "secondary" : "primary",
		className: "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", isActive && isOpen && "text-primary")
	});
	const itemClassName = cn(navItemVariants({ state: isActive ? "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: "right",
				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: "right",
			sideOffset: 0,
			className: cn("w-56 max-w-[calc(100vw-2rem)] rounded-none rounded-r-xl border-0 p-0", "bg-popover", "supports-backdrop-filter:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--popover)_87%,transparent)_0%,color-mix(in_srgb,var(--popover)_75%,transparent)_100%)]", "supports-backdrop-filter:backdrop-blur-[30px]", "shadow-[0px_4px_24px_color-mix(in_srgb,var(--foreground)_6%,transparent)]"),
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-0.5 p-3 delight-tooltip-stagger",
				role: "group",
				"aria-label": label,
				children: [/* @__PURE__ */ jsx("p", {
					className: "px-2 pb-2 pt-1 text-xs font-semibold text-primary/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$1, { children: [mainElement, isOpen && /* @__PURE__ */ jsx("ul", {
		id: subNavId,
		role: "group",
		"aria-label": `${label} sub-navigation`,
		className: "flex flex-col items-start py-1 pl-6",
		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$1, { children: [/* @__PURE__ */ jsx("span", {
		className: "flex-1 text-start",
		children: label
	}), badge != null && /* @__PURE__ */ jsx(Badge, {
		size: "sm",
		variant: "soft",
		color: isActive ? "secondary" : "primary",
		"aria-hidden": "true",
		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 }) {
	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: count }).map((_, i) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarNavSkeleton, {}) }, `nav-skeleton-${i}`))
		}) })
	});
}
AppSidebarNavSkeleton.displayName = "AppSidebar.NavSkeleton";
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";
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();
	if (state === "collapsed") {
		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: "right",
			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 }) {
	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: count }).map((_, i) => /* @__PURE__ */ jsx(SidebarMenuSkeleton, {}, `chat-skeleton-${i}`))
			})
		})]
	});
}
AppSidebarChatListSkeleton.displayName = "AppSidebar.ChatListSkeleton";
function AppSidebarAccount({ name, subtitle, avatarSrc, isOnline = false, onExpand, className }) {
	const { state } = useSidebar();
	if (state === "collapsed") {
		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 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",
				indicator: isOnline ? "online" : void 0
			})
		});
		if (!name && !subtitle) return avatarButton;
		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: avatarButton }), /* @__PURE__ */ jsx(TooltipPopup, {
			side: "right",
			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-2 rounded-md p-2 transition-colors duration-200 ease-smooth hover:bg-background 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",
				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
				})]
			}),
			/* @__PURE__ */ jsx(ChevronRight, {
				"aria-hidden": "true",
				className: "size-4 shrink-0 text-muted-foreground"
			})
		]
	});
}
AppSidebarAccount.displayName = "AppSidebar.Account";
function AppSidebarAccountSkeleton({ className }) {
	return /* @__PURE__ */ jsx(SidebarAccountSkeleton, { className });
}
AppSidebarAccountSkeleton.displayName = "AppSidebar.AccountSkeleton";
function AppSidebarSkeleton({ navCount = 4, chatCount = 5, logo, compactedLogo, collapsible = "icon", side = "left", rounded = false, sidebarBgColor, className }) {
	const { state } = useSidebar();
	return /* @__PURE__ */ jsxs(SidebarCompound, {
		collapsible,
		side,
		rounded,
		className: cn(getSidebarBgClass(state === "collapsed", sidebarBgColor), className),
		children: [
			/* @__PURE__ */ jsx(SidebarHeader, {
				className: "gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4",
				children: /* @__PURE__ */ jsx(AppSidebarLogo, {
					logo,
					compactedLogo
				})
			}),
			/* @__PURE__ */ jsxs(SidebarContent, {
				className: "flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
				children: [/* @__PURE__ */ jsx(AppSidebarNavSkeleton, { count: navCount }), /* @__PURE__ */ jsx(AppSidebarChatListSkeleton, { count: chatCount })]
			}),
			/* @__PURE__ */ jsx(SidebarFooter, {
				className: "gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
				children: /* @__PURE__ */ jsx(AppSidebarAccountSkeleton, {})
			})
		]
	});
}
AppSidebarSkeleton.displayName = "AppSidebar.Skeleton";
var slotConfig = {
	header: [],
	content: [
		AppSidebarNav,
		AppSidebarChatList,
		AppSidebarNavSkeleton,
		AppSidebarChatListSkeleton
	],
	footer: [AppSidebarAccount, AppSidebarAccountSkeleton]
};
/**
* 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 = "left", rounded = false, sidebarBgColor, className, children, ...props }) {
	const { state } = useSidebar();
	const bgClass = getSidebarBgClass(state === "collapsed", sidebarBgColor);
	const slots = useSlotChildren(children, slotConfig);
	return /* @__PURE__ */ jsxs(SidebarCompound, {
		collapsible,
		side,
		rounded,
		className: cn(bgClass, className),
		...props,
		children: [
			/* @__PURE__ */ jsx(SidebarHeader, {
				className: "gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4",
				children: /* @__PURE__ */ jsx(AppSidebarLogo, {
					logo,
					compactedLogo,
					subtext: logoSubtext
				})
			}),
			/* @__PURE__ */ jsx(SidebarContent, {
				className: "flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
				children: slots.explicitContent ? slots.explicitContent.props.children : slots.content
			}),
			/* @__PURE__ */ jsx(SidebarFooter, {
				className: "gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
				children: slots.explicitFooter ? slots.explicitFooter.props.children : slots.footer
			})
		]
	});
}
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 { AppSidebar, chatItemVariants, navItemVariants };

//# sourceMappingURL=index479.js.map