"use client";
import { cn } from "./index3.js";
import { jsx } from "react/jsx-runtime";
//#region src/components/ui/app-shell.tsx
/**
* AppShell provides a customizable background wrapper for connected sidebar layouts.
* It sets a fixed height and allows any CSS background value (gradient, solid color, image).
*
* Responsive padding is handled via CSS media queries (no JS hydration flash).
* Mobile padding applies below 768px, desktop padding at 768px and above.
*/
function AppShell({ background, height, padding, mobilePadding, gap, connected, className, style, children, ...props }) {
	const cssVars = {};
	if (background !== void 0) cssVars["--app-shell-background"] = background;
	if (height !== void 0) cssVars["--app-shell-height"] = height;
	if (padding !== void 0) cssVars["--app-shell-padding"] = typeof padding === "number" ? `${padding}px` : padding;
	if (mobilePadding !== void 0) cssVars["--app-shell-mobile-padding"] = typeof mobilePadding === "number" ? `${mobilePadding}px` : mobilePadding;
	if (gap !== void 0) cssVars["--app-shell-gap"] = typeof gap === "number" ? `${gap}px` : gap;
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "app-shell",
		"data-connected": connected ? "true" : void 0,
		style: {
			...cssVars,
			...style
		},
		className: cn("flex h-[var(--app-shell-height,100dvh)] w-full", "gap-[var(--app-shell-gap,0px)]", "p-[var(--app-shell-mobile-padding,0.5rem)] md:p-[var(--app-shell-padding,1rem)]", "bg-[var(--app-shell-background,var(--app-bg))]", className),
		...props,
		children
	});
}
AppShell.displayName = "AppShell";
//#endregion
export { AppShell };

//# sourceMappingURL=index469.js.map