"use client";
import { cn } from "./index3.js";
import { Menu } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/templates/AppShell/AppShellMobileTabBar.tsx
/**
* Internal mobile tab bar for switching between panels on small viewports.
* Implements the ARIA Tabs pattern with roving tabIndex and arrow key navigation.
* Renders only when there are 2+ panels.
*/
function AppShellMobileTabBar({ panels, activeIndex, onActiveChange, onSidebarOpen, baseId }) {
	const tabListRef = React.useRef(null);
	const handleKeyDown = React.useCallback((e) => {
		let nextIndex = null;
		switch (e.key) {
			case "ArrowRight":
				nextIndex = (activeIndex + 1) % panels.length;
				break;
			case "ArrowLeft":
				nextIndex = (activeIndex - 1 + panels.length) % panels.length;
				break;
			case "Home":
				nextIndex = 0;
				break;
			case "End":
				nextIndex = panels.length - 1;
				break;
			default: return;
		}
		e.preventDefault();
		onActiveChange(nextIndex);
		const tabList = tabListRef.current;
		if (tabList) tabList.querySelectorAll("[role=\"tab\"]")[nextIndex]?.focus();
	}, [
		activeIndex,
		panels.length,
		onActiveChange
	]);
	const [indicator, setIndicator] = React.useState(null);
	React.useEffect(() => {
		const tabList = tabListRef.current;
		if (!tabList || panels.length <= 1) return;
		const activeBtn = tabList.querySelectorAll("[role=\"tab\"]")[activeIndex];
		if (!activeBtn) return;
		const left = activeBtn.offsetLeft;
		const width = activeBtn.offsetWidth;
		setIndicator((prev) => prev && prev.left === left && prev.width === width ? prev : {
			left,
			width
		});
	}, [activeIndex, panels.length]);
	const sidebarTrigger = onSidebarOpen ? /* @__PURE__ */ jsx("button", {
		type: "button",
		onClick: onSidebarOpen,
		className: cn("flex min-h-11 min-w-11 items-center justify-center rounded-lg", "text-secondary-foreground hover:bg-accent", "active:scale-[0.95]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-colors motion-reduce:transition-none"),
		"aria-label": "Open sidebar",
		children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
	}) : null;
	if (panels.length <= 1) return sidebarTrigger ? /* @__PURE__ */ jsx("div", {
		className: "flex h-12 shrink-0 items-center border-b border-border px-3",
		children: sidebarTrigger
	}) : null;
	return /* @__PURE__ */ jsxs("div", {
		className: "flex h-12 shrink-0 items-center gap-1 border-b border-border px-3",
		children: [sidebarTrigger, /* @__PURE__ */ jsxs("div", {
			ref: tabListRef,
			role: "tablist",
			className: "relative flex gap-1",
			onKeyDown: handleKeyDown,
			children: [indicator && /* @__PURE__ */ jsx("div", {
				className: cn("absolute top-1/2 -translate-y-1/2 h-9 rounded-lg bg-accent", "transition-[left,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none"),
				style: {
					left: indicator.left,
					width: indicator.width
				},
				"aria-hidden": "true"
			}), panels.map((panel, index) => {
				const label = panel.label || `Panel ${index + 1}`;
				const isActive = index === activeIndex;
				return /* @__PURE__ */ jsx("button", {
					id: baseId ? `${baseId}-tab-${index}` : void 0,
					type: "button",
					role: "tab",
					"aria-selected": isActive,
					"aria-controls": baseId ? `${baseId}-tabpanel-${index}` : void 0,
					tabIndex: isActive ? 0 : -1,
					onClick: () => onActiveChange(index),
					className: cn("relative z-10 rounded-lg px-3 min-h-9 text-sm font-medium", "transition-colors duration-150 motion-reduce:transition-none", "active:scale-[0.97]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive ? "text-foreground" : "text-secondary-foreground hover:text-foreground"),
					children: label
				}, index);
			})]
		})]
	});
}
AppShellMobileTabBar.displayName = "AppShellMobileTabBar";
//#endregion
export { AppShellMobileTabBar };

//# sourceMappingURL=index475.js.map