"use client";
import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { DropdownMenu } from "./index461.js";
import { usePanelExpansion } from "./index473.js";
import { AppShellContent } from "./index474.js";
import { EllipsisVertical, Maximize2, Minimize2 } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/templates/AppShellCard/AppShellCard.tsx
var HEADER_TYPE = "AppShellCard.Header";
var ACTIONS_TYPE = "AppShellCard.Actions";
var MENU_TYPE = "AppShellCard.Menu";
var AppShellCardRoot = React.forwardRef(function AppShellCardRoot({ className, bodyClassName, children, ...props }, ref) {
	const expansion = usePanelExpansion();
	const menuId = React.useId();
	const bodyRef = React.useRef(null);
	React.useEffect(() => {
		const el = bodyRef.current;
		if (!el) return;
		const update = () => {
			const hasOverflow = el.scrollHeight > el.clientHeight;
			const top = hasOverflow && el.scrollTop > 0 ? "1" : "0";
			const bottom = hasOverflow && el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "1" : "0";
			if (el.style.getPropertyValue("--scroll-t") !== top) el.style.setProperty("--scroll-t", top);
			if (el.style.getPropertyValue("--scroll-b") !== bottom) el.style.setProperty("--scroll-b", bottom);
		};
		el.addEventListener("scroll", update, { passive: true });
		const observer = new ResizeObserver(update);
		observer.observe(el);
		update();
		return () => {
			el.removeEventListener("scroll", update);
			observer.disconnect();
		};
	}, []);
	let headerSlot = null;
	let actionsSlot = null;
	let menuSlot = null;
	const bodyChildren = [];
	React.Children.forEach(children, (child) => {
		if (!React.isValidElement(child)) {
			bodyChildren.push(child);
			return;
		}
		const type = child.type?.__appShellCardType;
		if (type === HEADER_TYPE) headerSlot = child;
		else if (type === ACTIONS_TYPE) actionsSlot = child;
		else if (type === MENU_TYPE) menuSlot = child;
		else bodyChildren.push(child);
	});
	const hasToolbar = headerSlot || actionsSlot || menuSlot || expansion?.onExpandedChange;
	return /* @__PURE__ */ jsxs(AppShellContent, {
		ref,
		"data-slot": "app-shell-card",
		className: cn("shadow-lg transition-[margin] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", expansion?.expanded ? "m-0" : "mx-5 my-10", className),
		...props,
		children: [hasToolbar && /* @__PURE__ */ jsxs("div", {
			"data-slot": "app-shell-card-toolbar",
			role: "toolbar",
			"aria-label": "Card actions",
			className: "flex shrink-0 items-center gap-4 overflow-hidden border-b border-border px-4 py-3 sm:gap-6 sm:p-6",
			children: [
				headerSlot,
				actionsSlot,
				menuSlot && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
					appearance: "ghost",
					size: "icon",
					"aria-label": "More options",
					children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "size-5" })
				}) }), /* @__PURE__ */ jsx(DropdownMenu.Popup, {
					id: `${menuId}-popup`,
					align: "end",
					sideOffset: 4,
					children: menuSlot.props.children
				})] }),
				expansion?.onExpandedChange && /* @__PURE__ */ jsx(Button, {
					appearance: "ghost",
					size: "icon",
					onClick: () => expansion.onExpandedChange?.(!expansion.expanded),
					"aria-label": expansion.expanded ? "Minimize panel" : "Maximize panel",
					children: /* @__PURE__ */ jsx("span", {
						className: "delight-fade-in inline-flex",
						children: expansion.expanded ? /* @__PURE__ */ jsx(Minimize2, { className: "size-5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "size-5" })
					}, String(expansion.expanded))
				})
			]
		}), /* @__PURE__ */ jsx("div", {
			ref: bodyRef,
			"data-slot": "app-shell-card-body",
			role: "region",
			"aria-label": "Card content",
			tabIndex: 0,
			className: cn("delight-scroll-shadow flex-1 min-h-0 overflow-auto p-4 sm:p-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring rounded-b-[inherit]", bodyClassName),
			children: bodyChildren
		})]
	});
});
AppShellCardRoot.displayName = "AppShellCard";
function AppShellCardHeader({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "app-shell-card-header",
		className: cn("flex min-w-0 flex-1 flex-col justify-center", className),
		...props,
		children
	});
}
AppShellCardHeader.displayName = "AppShellCard.Header";
AppShellCardHeader.__appShellCardType = HEADER_TYPE;
function AppShellCardTitle({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("h3", {
		"data-slot": "app-shell-card-title",
		className: cn("text-lg font-semibold leading-7 text-foreground", className),
		...props,
		children
	});
}
AppShellCardTitle.displayName = "AppShellCard.Title";
function AppShellCardSubtitle({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("p", {
		"data-slot": "app-shell-card-subtitle",
		className: cn("text-sm leading-5 text-muted-foreground", className),
		...props,
		children
	});
}
AppShellCardSubtitle.displayName = "AppShellCard.Subtitle";
function AppShellCardActions({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "app-shell-card-actions",
		className: cn("flex shrink-0 items-center gap-2", className),
		...props,
		children
	});
}
AppShellCardActions.displayName = "AppShellCard.Actions";
AppShellCardActions.__appShellCardType = ACTIONS_TYPE;
function AppShellCardMenu({ children }) {
	return children;
}
AppShellCardMenu.displayName = "AppShellCard.Menu";
AppShellCardMenu.__appShellCardType = MENU_TYPE;
var AppShellCard = Object.assign(AppShellCardRoot, {
	Header: AppShellCardHeader,
	Title: AppShellCardTitle,
	Subtitle: AppShellCardSubtitle,
	Actions: AppShellCardActions,
	Menu: AppShellCardMenu
});
//#endregion
export { AppShellCard };

//# sourceMappingURL=index478.js.map