import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { FeaturedIcon } from "./index81.js";
import { PageBackground } from "./index481.js";
import { cva } from "class-variance-authority";
import { FileText, Search } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/pages/EmptyStatePage/EmptyStatePage.tsx
var DOT_STYLES = {
	first: {
		insetInlineStart: "10%",
		top: "12%",
		"--delight-duration": "3s"
	},
	second: {
		insetInlineEnd: "5%",
		top: "24%",
		"--delight-duration": "3.5s",
		"--delight-delay": "0.5s"
	},
	third: {
		insetInlineEnd: "12%",
		top: "3%",
		"--delight-duration": "4s",
		"--delight-delay": "1s"
	}
};
var STAGGER_DELAY = {
	title: { "--delight-delay": "100ms" },
	description: { "--delight-delay": "200ms" },
	actions: { "--delight-delay": "300ms" }
};
var emptyStateVariants = cva("relative flex w-full items-center justify-center", {
	variants: { size: {
		sm: "",
		md: "",
		lg: ""
	} },
	defaultVariants: { size: "sm" }
});
function FileTypeIconWrapper(_props) {
	return /* @__PURE__ */ jsx("div", {
		className: "flex items-start rounded-[200px] bg-gradient-to-b from-secondary to-muted p-8",
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative size-10 rounded-sm bg-background shadow-sm",
			children: [/* @__PURE__ */ jsxs("svg", {
				viewBox: "0 0 40 40",
				fill: "none",
				className: "size-full",
				"aria-hidden": "true",
				children: [/* @__PURE__ */ jsx("path", {
					d: "M4 4C4 1.79086 5.79086 0 8 0H24L36 12V36C36 38.2091 34.2091 40 32 40H8C5.79086 40 4 38.2091 4 36V4Z",
					className: "fill-background"
				}), /* @__PURE__ */ jsx("path", {
					d: "M24 0L36 12H28C25.7909 12 24 10.2091 24 8V0Z",
					className: "fill-border"
				})]
			}), /* @__PURE__ */ jsx("div", {
				className: "absolute inset-0 flex items-center justify-center pt-3",
				children: /* @__PURE__ */ jsx(FileText, {
					width: 16,
					height: 16,
					className: "text-primary"
				})
			})]
		})
	});
}
function IllustrationIcon({ size, color = "gray" }) {
	const config = {
		sm: {
			width: 152,
			height: 118,
			circle: 104,
			searchIcon: 48
		},
		md: {
			width: 172,
			height: 128,
			circle: 128,
			searchIcon: 56
		},
		lg: {
			width: 220,
			height: 160,
			circle: 160,
			searchIcon: 56
		}
	}[size];
	const isPrimary = color === "primary";
	const circleColor = isPrimary ? "bg-primary/20" : "bg-surface-2";
	const dotColor = isPrimary ? "bg-primary/20" : "bg-accent";
	const searchBg = isPrimary ? "bg-primary/90/40" : "bg-muted/40";
	return /* @__PURE__ */ jsxs("div", {
		className: "relative",
		style: {
			width: config.width,
			height: config.height
		},
		children: [
			/* @__PURE__ */ jsx("div", {
				className: cn("absolute rounded-full", circleColor),
				style: {
					width: config.circle,
					height: config.circle,
					insetInlineStart: "50%",
					top: 0,
					transform: "translateX(-50%)"
				}
			}),
			/* @__PURE__ */ jsx("div", {
				className: cn("absolute size-2.5 rounded-full delight-float", dotColor),
				style: DOT_STYLES.first
			}),
			/* @__PURE__ */ jsx("div", {
				className: cn("absolute size-3.5 rounded-full delight-float", dotColor),
				style: DOT_STYLES.second
			}),
			/* @__PURE__ */ jsx("div", {
				className: cn("absolute size-2 rounded-full delight-float", dotColor),
				style: DOT_STYLES.third
			}),
			/* @__PURE__ */ jsx("div", {
				className: cn("absolute flex items-center justify-center rounded-full supports-backdrop-filter:backdrop-blur-sm", searchBg),
				style: {
					width: config.searchIcon,
					height: config.searchIcon,
					insetInlineStart: "50%",
					bottom: 0,
					transform: "translateX(-50%)"
				},
				children: /* @__PURE__ */ jsx(Search, {
					width: config.searchIcon * .43,
					height: config.searchIcon * .43,
					className: "text-primary-foreground"
				})
			})
		]
	});
}
var EmptyStatePage = React.forwardRef(({ title, description, iconType = "featured", icon = Search, size, primaryAction, secondaryAction, children, className, illustrationColor = "gray" }, ref) => {
	const resolvedSize = size ?? "sm";
	const titleClasses = {
		sm: "text-md font-semibold leading-6",
		md: "text-lg font-semibold leading-7",
		lg: "text-xl font-semibold leading-[30px]"
	};
	const descriptionClasses = {
		sm: "text-sm leading-5 max-w-prose",
		md: "text-sm leading-5 max-w-prose",
		lg: "text-md leading-6 max-w-prose"
	};
	const iconContentGap = {
		sm: "gap-4",
		md: "gap-5",
		lg: iconType === "illustration" ? "gap-6" : "gap-5"
	};
	const textGap = {
		sm: "gap-1",
		md: "gap-2",
		lg: "gap-2"
	};
	const containerGap = {
		sm: "gap-6",
		md: "gap-8",
		lg: "gap-8"
	};
	const renderIcon = () => {
		const Icon = icon;
		switch (iconType) {
			case "illustration": return /* @__PURE__ */ jsx(IllustrationIcon, {
				size: resolvedSize,
				color: illustrationColor
			});
			case "file": return /* @__PURE__ */ jsx(FileTypeIconWrapper, { size: resolvedSize });
			default: return /* @__PURE__ */ jsx(FeaturedIcon, {
				icon: /* @__PURE__ */ jsx(Icon, {}),
				size: "lg"
			});
		}
	};
	const hasActions = primaryAction || secondaryAction || children;
	return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "empty-state-page",
		className: cn(emptyStateVariants({ size: resolvedSize }), className),
		children: /* @__PURE__ */ jsxs("div", {
			className: cn("flex min-h-px min-w-px flex-1 flex-col items-center", containerGap[resolvedSize]),
			children: [/* @__PURE__ */ jsxs("div", {
				className: cn("flex w-full flex-col items-center", iconContentGap[resolvedSize]),
				children: [/* @__PURE__ */ jsxs("div", {
					className: "relative delight-stagger",
					"aria-hidden": "true",
					children: [/* @__PURE__ */ jsx(PageBackground, {
						pattern: iconType === "illustration" ? "grid" : "circular",
						offset: "icon-center"
					}), /* @__PURE__ */ jsx("div", {
						className: "relative z-10",
						children: renderIcon()
					})]
				}), /* @__PURE__ */ jsxs("div", {
					className: cn("relative z-10 flex w-full max-w-[352px] flex-col items-center text-center", textGap[resolvedSize]),
					children: [/* @__PURE__ */ jsx("h2", {
						className: cn("text-foreground delight-stagger", titleClasses[resolvedSize]),
						style: STAGGER_DELAY.title,
						children: title
					}), description && /* @__PURE__ */ jsx("p", {
						className: cn("text-muted-foreground delight-stagger", descriptionClasses[resolvedSize]),
						style: STAGGER_DELAY.description,
						children: description
					})]
				})]
			}), hasActions && /* @__PURE__ */ jsx("div", {
				className: "relative z-10 flex shrink-0 items-start gap-3 delight-stagger",
				style: STAGGER_DELAY.actions,
				children: children || /* @__PURE__ */ jsxs(Fragment$1, { children: [secondaryAction && /* @__PURE__ */ jsx(Button, {
					variant: "secondary",
					size: "default",
					onClick: secondaryAction.onClick,
					children: secondaryAction.label
				}), primaryAction && /* @__PURE__ */ jsx(Button, {
					variant: "primary",
					size: "default",
					onClick: primaryAction.onClick,
					startIcon: primaryAction.icon ? /* @__PURE__ */ jsx(primaryAction.icon, {
						width: 20,
						height: 20
					}) : void 0,
					children: primaryAction.label
				})] })
			})]
		})
	});
});
EmptyStatePage.displayName = "EmptyStatePage";
//#endregion
export { EmptyStatePage, emptyStateVariants };

//# sourceMappingURL=index482.js.map