import { cn } from "./cva.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/DashboardShell.tsx
const DASHBOARD_MAIN_ID = "dashboard-main";
const DASHBOARD_SIDEBAR_ID = "dashboard-sidebar";
function DashboardShell({ sidebar, topbar, children, sidebarCollapsed = false, onSidebarToggle }) {
	return /* @__PURE__ */ jsxs("div", {
		className: "flex min-h-screen flex-col bg-bg text-fg md:flex-row",
		children: [
			/* @__PURE__ */ jsx("a", {
				href: `#${DASHBOARD_MAIN_ID}`,
				className: "sr-only focus:not-sr-only focus:absolute focus:left-0 focus:top-0 focus:z-50 focus:bg-surface focus:text-fg focus:outline focus:outline-accent focus:p-2",
				children: "Skip to main content"
			}),
			/* @__PURE__ */ jsxs("nav", {
				id: DASHBOARD_SIDEBAR_ID,
				"aria-label": "Sidebar",
				className: cn("border-b border-border bg-surface md:border-b-0 md:border-r", sidebarCollapsed ? "hidden md:block" : "block"),
				children: [onSidebarToggle ? /* @__PURE__ */ jsx("button", {
					type: "button",
					className: "w-full border-b border-border bg-surface-raised px-3 py-2 text-left text-sm font-medium text-fg focus-visible:outline focus-visible:outline-accent md:hidden",
					"aria-expanded": !sidebarCollapsed,
					"aria-controls": DASHBOARD_SIDEBAR_ID,
					onClick: onSidebarToggle,
					children: "Toggle sidebar"
				}) : null, sidebar]
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex min-w-0 flex-1 flex-col",
				children: [topbar ? /* @__PURE__ */ jsx("header", {
					role: "banner",
					children: topbar
				}) : null, /* @__PURE__ */ jsx("main", {
					id: DASHBOARD_MAIN_ID,
					className: "flex-1 p-4",
					children
				})]
			})
		]
	});
}
//#endregion
export { DASHBOARD_MAIN_ID, DASHBOARD_SIDEBAR_ID, DashboardShell };
