@humain/ui 2.1.62 → 2.1.65

package/dist/index194.js

@@ -1,153 +1,546 @@
-"use client";
 import { cn } from "./index2.js";
-import { Popover, PopoverPopup, PopoverTrigger } from "./index102.js";
-import { Tag as Tag$1 } from "./index109.js";
-import { Command as CommandNamespace, CommandEmpty, CommandGroup, CommandItem, CommandList } from "./index120.js";
-import { Check, ChevronDown, Plus } from "lucide-react";
+import { Button } from "./index5.js";
+import { FeaturedIcon } from "./index104.js";
+import { FileTypeIcon } from "./index115.js";
+import { cva } from "class-variance-authority";
+import { Heart, Search } from "lucide-react";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/content/GroupingControls/GroupingControls.tsx
-function GroupingControls({ table, groupableColumns: groupableColumnsProp, placeholder = "Group by...", maxLevels, variant, size = "md", className }) {
-	const [open, setOpen] = React.useState(false);
-	const grouping = table.getState().grouping;
-	const allGroupableColumns = React.useMemo(() => {
-		return table.getAllColumns().filter((col) => {
-			if (groupableColumnsProp) return groupableColumnsProp.includes(col.id);
-			return col.getCanGroup();
-		}).map((col) => ({
-			id: col.id,
-			label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id.charAt(0).toUpperCase() + col.id.slice(1)
-		}));
-	}, [table, groupableColumnsProp]);
-	const isMaxLevelsReached = maxLevels !== void 0 && grouping.length >= maxLevels;
-	const displayLabel = React.useMemo(() => {
-		if (grouping.length === 0) return placeholder;
-		return grouping.map((id) => {
-			return allGroupableColumns.find((c) => c.id === id)?.label || id;
-		}).join(", ");
-	}, [
-		grouping,
-		allGroupableColumns,
-		placeholder
-	]);
-	const handleSelect = React.useCallback((columnId) => {
-		if (grouping.indexOf(columnId) >= 0) {
-			const newGrouping = grouping.filter((id) => id !== columnId);
-			table.setGrouping(newGrouping);
-		} else {
-			if (maxLevels !== void 0 && grouping.length >= maxLevels) return;
-			const newGrouping = [...grouping, columnId];
-			table.setGrouping(newGrouping);
-		}
-	}, [
-		grouping,
-		table,
-		maxLevels
-	]);
-	const getSelectionOrder = (columnId) => {
-		const index = grouping.indexOf(columnId);
-		return index >= 0 ? index + 1 : null;
-	};
-	const availableColumns = React.useMemo(() => {
-		return allGroupableColumns.filter((col) => !grouping.includes(col.id));
-	}, [allGroupableColumns, grouping]);
-	const handleRemove = React.useCallback((columnId) => {
-		const newGrouping = grouping.filter((id) => id !== columnId);
-		table.setGrouping(newGrouping);
-	}, [grouping, table]);
-	const handleAddColumn = React.useCallback((columnId) => {
-		if (maxLevels !== void 0 && grouping.length >= maxLevels) return;
-		const newGrouping = [...grouping, columnId];
-		table.setGrouping(newGrouping);
-		setOpen(false);
-	}, [
-		grouping,
-		table,
-		maxLevels
-	]);
-	if (variant === "chips") {
-		const addColumnPopover = availableColumns.length > 0 && !isMaxLevelsReached ? /* @__PURE__ */ jsxs(Popover, {
-			open,
-			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-				className: cn("inline-flex items-center justify-center rounded-md", "border border-dashed border-input bg-background", "hover:bg-accent hover:border-solid", "transition-[background-color,border-color] duration-150 ease-out motion-reduce:transition-none", size === "sm" ? "h-6 px-2 text-xs" : "h-7 px-2 text-sm"),
-				"aria-label": "Add grouping",
-				children: /* @__PURE__ */ jsx(Plus, { className: cn("size-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-45") })
-			}), /* @__PURE__ */ jsx(PopoverPopup, {
-				side: "bottom",
-				align: "start",
-				className: "min-w-[180px] w-max max-w-[280px] p-0",
-				children: /* @__PURE__ */ jsx(CommandNamespace, { children: /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No columns available" }), /* @__PURE__ */ jsx(CommandGroup, { children: availableColumns.map((column) => /* @__PURE__ */ jsx(CommandItem, {
-					value: column.id,
-					onSelect: () => handleAddColumn(column.id),
-					className: "cursor-pointer",
-					children: column.label
-				}, column.id)) })] }) })
-			})]
-		}) : null;
-		return /* @__PURE__ */ jsxs("div", {
-			"data-slot": "grouping-controls",
-			role: "toolbar",
-			"aria-label": "Grouping controls",
-			className: cn("flex flex-wrap items-center gap-2", className),
-			children: [grouping.length === 0 ? /* @__PURE__ */ jsx("span", {
-				className: "text-sm text-muted-foreground",
-				children: placeholder
-			}) : grouping.map((columnId) => {
-				const column = allGroupableColumns.find((c) => c.id === columnId);
-				if (!column) return null;
-				return /* @__PURE__ */ jsx(Tag$1, {
-					size: size === "sm" ? "sm" : "md",
-					removable: true,
-					onRemove: () => handleRemove(columnId),
-					children: column.label
-				}, columnId);
-			}), addColumnPopover]
-		});
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/content/EmptyState/EmptyState.tsx
+var patternSizeClass = {
+	sm: "size-[336px]",
+	md: "size-[480px]",
+	lg: "size-[768px]"
+};
+var patternGridSize = {
+	sm: "24px 24px",
+	md: "32px 32px",
+	lg: "48px 48px"
+};
+var illustrationSizeClass = {
+	sm: {
+		cloud: "h-[118px] w-[152px]",
+		box: "h-[124px] w-[152px]",
+		documents: "h-[118px] w-[152px]",
+		"credit-card": "h-[118px] w-[152px]"
+	},
+	md: {
+		cloud: "h-32 w-[172px]",
+		box: "h-[136px] w-[172px]",
+		documents: "h-32 w-[172px]",
+		"credit-card": "h-[134px] w-[172px]"
+	},
+	lg: {
+		cloud: "h-40 w-[220px]",
+		box: "h-[168px] w-[220px]",
+		documents: "h-40 w-[220px]",
+		"credit-card": "h-40 w-[220px]"
 	}
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-			"data-slot": "grouping-controls",
-			"aria-label": "Group by column",
-			className: cn("inline-flex items-center justify-between gap-2 whitespace-nowrap", "border border-input bg-background hover:bg-accent hover:text-accent-foreground", "rounded-md font-medium", "transition-[color,background-color,border-color,transform] duration-150 ease-out motion-reduce:transition-none", "active:translate-y-px", size === "sm" ? "h-8 px-3 text-sm" : "h-9 px-3.5 py-2.5 text-sm", className),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: cn("truncate", grouping.length === 0 && "text-muted-foreground"),
-				children: displayLabel
-			}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4 shrink-0 opacity-50 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-180") })]
-		}), /* @__PURE__ */ jsx(PopoverPopup, {
-			side: "bottom",
-			align: "start",
-			className: "min-w-[200px] w-max max-w-[300px] p-0",
-			children: /* @__PURE__ */ jsx(CommandNamespace, { children: /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No groupable columns" }), /* @__PURE__ */ jsx(CommandGroup, { children: allGroupableColumns.map((column) => {
-				const isSelected = grouping.includes(column.id);
-				const order = getSelectionOrder(column.id);
-				const isDisabled = !isSelected && isMaxLevelsReached;
-				return /* @__PURE__ */ jsxs(CommandItem, {
-					value: column.id,
-					onSelect: () => handleSelect(column.id),
-					disabled: isDisabled,
-					"data-disabled": isDisabled,
-					"data-slot": "combobox-item",
-					className: cn("flex items-center justify-between gap-2 px-2 py-1.5 cursor-pointer", isSelected && "bg-accent"),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [isSelected && /* @__PURE__ */ jsx(Check, {
-							className: "size-4 text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ jsx("span", { children: column.label })]
-					}), order !== null && /* @__PURE__ */ jsx("span", {
-						className: "inline-flex size-5 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
-						children: order
-					})]
-				}, column.id);
-			}) })] }) })
+};
+var illustrationIconSizeClass = {
+	sm: "p-2",
+	md: "p-2.5",
+	lg: "p-2.5"
+};
+var iconGlyphSizeClass = {
+	sm: "size-4",
+	md: "size-4",
+	lg: "size-5"
+};
+var illustrationIconCenterClass = {
+	cloud: "top-[58%]",
+	box: "top-[58%]",
+	documents: "top-[60%]",
+	"credit-card": "top-[60%]"
+};
+var illustrationCircleSizeClass = {
+	sm: "size-[104px]",
+	md: "size-32",
+	lg: "size-40"
+};
+var fileIconWrapSizeClass = {
+	sm: "size-20",
+	md: "size-24",
+	lg: "size-28"
+};
+var textGapClass = {
+	sm: "gap-1",
+	md: "gap-2",
+	lg: "gap-2"
+};
+var mediaGapClass = {
+	sm: "gap-4",
+	md: "gap-5",
+	lg: "gap-5"
+};
+var contentGapClass = {
+	sm: "gap-6",
+	md: "gap-8",
+	lg: "gap-8"
+};
+var featuredIconSize = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+var fileIconSize = {
+	sm: "md",
+	md: "md",
+	lg: "md"
+};
+var headingTag = {
+	2: "h2",
+	3: "h3",
+	4: "h4"
+};
+function EmptyStateIconGlyph({ icon, size }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "empty-state-icon-glyph",
+		"data-testid": "empty-state-icon-glyph",
+		"data-centered": "true",
+		"aria-hidden": "true",
+		className: cn("inline-flex shrink-0 items-center justify-center leading-none [line-height:0] [&>svg]:block [&>svg]:size-full [&>svg]:shrink-0", iconGlyphSizeClass[size]),
+		children: icon
+	});
+}
+var gridPatternStyle = (size, dot = false) => ({
+	backgroundImage: dot ? "radial-gradient(circle, color-mix(in oklch, var(--border) 70%, transparent) 1px, transparent 1px)" : ["linear-gradient(to right, color-mix(in oklch, var(--border) 54%, transparent) 1px, transparent 1px)", "linear-gradient(to bottom, color-mix(in oklch, var(--border) 54%, transparent) 1px, transparent 1px)"].join(", "),
+	backgroundSize: patternGridSize[size]
+});
+var squaresBySize = {
+	sm: [
+		96,
+		144,
+		192,
+		240,
+		288,
+		336
+	],
+	md: [
+		96,
+		160,
+		224,
+		288,
+		352,
+		416,
+		480
+	],
+	lg: [
+		96,
+		192,
+		288,
+		384,
+		480,
+		576,
+		672,
+		768
+	]
+};
+var EmptyStateBackgroundPattern = React.forwardRef(({ className, size = "sm", variant = "circles", style, ...props }, ref) => {
+	if (variant === "none") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "empty-state-background-pattern",
+		"data-testid": "empty-state-pattern",
+		"data-size": size,
+		"data-variant": variant,
+		"aria-hidden": "true",
+		className: cn("pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden opacity-75", patternSizeClass[size], className),
+		style,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,var(--background)_0%,transparent_68%)]" }),
+			variant === "circles" && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				children: Array.from({ length: 7 }, (_, index) => /* @__PURE__ */ jsx("span", {
+					className: "absolute left-1/2 top-1/2 rounded-full border border-border/60",
+					style: {
+						width: `${(index + 1) * 14}%`,
+						height: `${(index + 1) * 14}%`,
+						transform: "translate(-50%, -50%)"
+					}
+				}, index))
+			}),
+			(variant === "grid" || variant === "grid-dot") && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 opacity-70 [mask-image:radial-gradient(circle_at_center,black_0%,black_48%,transparent_76%)]",
+				style: gridPatternStyle(size, variant === "grid-dot")
+			}),
+			variant === "squares" && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				children: squaresBySize[size].map((squareSize) => /* @__PURE__ */ jsx("span", {
+					className: "absolute left-1/2 top-1/2 rounded-xl border border-border/55",
+					style: {
+						width: squareSize,
+						height: squareSize,
+						transform: "translate(-50%, -50%) rotate(-12.5deg)"
+					}
+				}, squareSize))
+			})
+		]
+	});
+});
+EmptyStateBackgroundPattern.displayName = "EmptyStateBackgroundPattern";
+function DecorativeDots({ tone }) {
+	const dotClassName = tone === "primary" ? "bg-primary/70" : "bg-muted-foreground/10";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", { className: cn("absolute left-[7%] top-[8%] size-2 rounded-full", dotClassName) }),
+		/* @__PURE__ */ jsx("span", { className: cn("absolute right-[6%] top-[18%] size-3 rounded-full", dotClassName) }),
+		/* @__PURE__ */ jsx("span", { className: cn("absolute bottom-[10%] left-[8%] size-3 rounded-full", dotClassName) }),
+		/* @__PURE__ */ jsx("span", { className: cn("absolute bottom-[18%] right-[13%] size-2 rounded-full", dotClassName) })
+	] });
+}
+function CloudShape({ accentId, shadeId, tone }) {
+	return /* @__PURE__ */ jsxs("g", {
+		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M54 110c-21 0-38-14-38-32 0-16 14-30 33-32 8-19 27-31 49-31 27 0 50 19 55 43 17 3 30 16 30 32 0 19-18 34-40 34H55c-1 0-1-14-1-14Z",
+			fill: `url(#${shadeId})`
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M68 106c-18 0-32-12-32-27 0-13 11-24 27-26 7-16 23-26 42-26 23 0 42 16 46 36 15 3 26 14 26 28 0 16-15 29-34 29H68v-14Z",
+			fill: `url(#${accentId})`,
+			opacity: tone === "primary" ? .78 : .36
 		})]
 	});
 }
-GroupingControls.displayName = "GroupingControls";
+function BoxShape({ accentId, shadeId }) {
+	return /* @__PURE__ */ jsxs("g", {
+		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M72 42 132 20l55 31-62 24-53-33Z",
+				fill: `url(#${accentId})`
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M72 42v72l53 34V75L72 42Z",
+				fill: `url(#${shadeId})`
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M125 75v73l62-35V51l-62 24Z",
+				fill: "var(--card)"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M132 20v33l24 14V34l-24-14Z",
+				fill: "currentColor",
+				opacity: "0.34"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M72 42 132 20l55 31-62 24-53-33Z",
+				fill: "none",
+				stroke: "var(--border)"
+			})
+		]
+	});
+}
+function DocumentsShape({ accentId, shadeId }) {
+	return /* @__PURE__ */ jsxs("g", {
+		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
+		children: [
+			/* @__PURE__ */ jsxs("g", {
+				transform: "translate(44 48) rotate(-18)",
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "58",
+					height: "78",
+					rx: "7",
+					fill: `url(#${shadeId})`,
+					stroke: "var(--border)"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M15 21h28M15 35h21M15 49h28",
+					stroke: "currentColor",
+					strokeOpacity: "0.28"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				transform: "translate(83 32)",
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "58",
+					height: "88",
+					rx: "7",
+					fill: "var(--card)",
+					stroke: "var(--border)"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M16 26h28M16 41h22M16 56h28",
+					stroke: "currentColor",
+					strokeOpacity: "0.32"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				transform: "translate(121 47) rotate(18)",
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "58",
+					height: "78",
+					rx: "7",
+					fill: `url(#${accentId})`,
+					stroke: "var(--border)"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M15 21h28M15 35h21M15 49h28",
+					stroke: "currentColor",
+					strokeOpacity: "0.32"
+				})]
+			})
+		]
+	});
+}
+function CreditCardShape({ accentId, shadeId }) {
+	return /* @__PURE__ */ jsxs("g", {
+		className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "42",
+				y: "48",
+				width: "136",
+				height: "82",
+				rx: "12",
+				fill: `url(#${shadeId})`,
+				stroke: "var(--border)"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "42",
+				y: "70",
+				width: "136",
+				height: "16",
+				fill: `url(#${accentId})`,
+				opacity: "0.72"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "58",
+				y: "104",
+				width: "28",
+				height: "8",
+				rx: "2",
+				fill: "currentColor",
+				opacity: "0.28"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "58",
+				y: "116",
+				width: "58",
+				height: "5",
+				rx: "2.5",
+				fill: "currentColor",
+				opacity: "0.18"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "146",
+				cy: "112",
+				r: "10",
+				fill: "currentColor",
+				opacity: "0.24"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "158",
+				cy: "112",
+				r: "10",
+				fill: "currentColor",
+				opacity: "0.38"
+			})
+		]
+	});
+}
+var EmptyStateIllustration = React.forwardRef(({ className, size = "sm", variant = "cloud", tone = "primary", icon = /* @__PURE__ */ jsx(Heart, { "aria-hidden": "true" }), ...props }, ref) => {
+	const accentId = React.useId();
+	const shadeId = React.useId();
+	const isPrimary = tone === "primary";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "empty-state-illustration",
+		"data-testid": "empty-state-illustration",
+		"data-size": size,
+		"data-variant": variant,
+		"data-tone": tone,
+		"aria-hidden": "true",
+		className: cn("relative shrink-0 text-primary", !isPrimary && "text-muted-foreground", illustrationSizeClass[size][variant], className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-illustration-background",
+				"data-testid": "empty-state-illustration-background",
+				"data-centered": "true",
+				className: cn("absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", isPrimary ? "bg-primary/20" : "bg-muted/80", illustrationCircleSizeClass[size], illustrationIconCenterClass[variant])
+			}),
+			/* @__PURE__ */ jsx(DecorativeDots, { tone }),
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 220 168",
+				className: "absolute inset-0 size-full overflow-visible",
+				fill: "none",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+						id: accentId,
+						x1: "25",
+						y1: "12",
+						x2: "190",
+						y2: "148",
+						children: [/* @__PURE__ */ jsx("stop", {
+							stopColor: isPrimary ? "var(--primary)" : "var(--muted)",
+							stopOpacity: isPrimary ? .34 : .74
+						}), /* @__PURE__ */ jsx("stop", {
+							stopColor: "var(--card)",
+							stopOpacity: .95
+						})]
+					}), /* @__PURE__ */ jsxs("linearGradient", {
+						id: shadeId,
+						x1: "54",
+						y1: "18",
+						x2: "165",
+						y2: "140",
+						children: [/* @__PURE__ */ jsx("stop", { stopColor: "var(--card)" }), /* @__PURE__ */ jsx("stop", {
+							stopColor: isPrimary ? "var(--primary)" : "var(--muted-foreground)",
+							stopOpacity: isPrimary ? .18 : .14
+						})]
+					})] }),
+					variant === "cloud" && /* @__PURE__ */ jsx(CloudShape, {
+						accentId,
+						shadeId,
+						tone
+					}),
+					variant === "box" && /* @__PURE__ */ jsx(BoxShape, {
+						accentId,
+						shadeId
+					}),
+					variant === "documents" && /* @__PURE__ */ jsx(DocumentsShape, {
+						accentId,
+						shadeId
+					}),
+					variant === "credit-card" && /* @__PURE__ */ jsx(CreditCardShape, {
+						accentId,
+						shadeId
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-illustration-icon",
+				"data-testid": "empty-state-illustration-icon",
+				"data-centered": "true",
+				className: cn("absolute left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-xs backdrop-blur-md supports-backdrop-filter:backdrop-blur-md [&>svg]:shrink-0", !isPrimary && "bg-muted text-muted-foreground", illustrationIconSizeClass[size], illustrationIconCenterClass[variant]),
+				children: /* @__PURE__ */ jsx(EmptyStateIconGlyph, {
+					icon,
+					size
+				})
+			})
+		]
+	});
+});
+EmptyStateIllustration.displayName = "EmptyStateIllustration";
+var emptyStateVariants = cva("relative isolate mx-auto flex w-full max-w-[512px] items-center justify-center overflow-visible py-8 text-center", {
+	variants: { size: {
+		sm: "min-h-[212px]",
+		md: "min-h-[280px]",
+		lg: "min-h-[360px]"
+	} },
+	defaultVariants: { size: "sm" }
+});
+function resolvePattern(pattern, media) {
+	if (!pattern || pattern === "auto") {
+		if (media === "illustration") return "grid";
+		if (media === "none") return "none";
+		return "circles";
+	}
+	return pattern;
+}
+function renderEmptyStateAction(action, intent) {
+	const { label, onClick, startIcon, disabled, loading, "aria-label": ariaLabel } = action;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: intent === "primary" ? "solid" : "outline",
+		variant: intent === "primary" ? "primary" : "secondary",
+		size: "sm",
+		shape: "rounded",
+		onClick,
+		disabled,
+		loading,
+		startIcon,
+		"aria-label": ariaLabel,
+		type: "button",
+		children: label
+	});
+}
+var EmptyState = React.forwardRef(({ className, title, description, size = "sm", media = "featured-icon", pattern = "auto", icon, iconLabel, illustrationVariant = "cloud", illustrationTone = "gray", fileExtension, fileType = "document", primaryAction, secondaryAction, actions, headingLevel = 3, ...props }, ref) => {
+	const Heading = headingTag[headingLevel];
+	const resolvedPattern = resolvePattern(pattern, media);
+	const defaultIcon = icon ?? /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" });
+	const hasActions = actions || primaryAction || secondaryAction;
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "empty-state",
+		"aria-label": typeof title === "string" ? title : "Empty state",
+		className: cn(emptyStateVariants({ size }), className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "empty-state-content",
+			className: cn("relative z-10 flex min-w-0 flex-1 flex-col items-center", contentGapClass[size]),
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-slot": "empty-state-body",
+				className: cn("flex w-full flex-col items-center", mediaGapClass[size]),
+				children: [media !== "none" && /* @__PURE__ */ jsxs("div", {
+					"data-slot": "empty-state-media",
+					"data-testid": "empty-state-media",
+					"data-media": media,
+					"data-centered": "true",
+					className: "relative flex w-full min-w-0 justify-center",
+					children: [
+						/* @__PURE__ */ jsx(EmptyStateBackgroundPattern, {
+							size,
+							variant: resolvedPattern,
+							"data-centered": "true",
+							className: "z-0"
+						}),
+						media === "featured-icon" && /* @__PURE__ */ jsx(FeaturedIcon, {
+							"data-slot": "empty-state-featured-icon",
+							size: featuredIconSize[size],
+							shape: "rounded",
+							intent: "default",
+							icon: /* @__PURE__ */ jsx(EmptyStateIconGlyph, {
+								icon: defaultIcon,
+								size
+							}),
+							"aria-label": iconLabel,
+							className: "relative z-10 delight-stagger motion-reduce:animate-none"
+						}),
+						media === "illustration" && /* @__PURE__ */ jsx(EmptyStateIllustration, {
+							size,
+							variant: illustrationVariant,
+							tone: illustrationTone,
+							icon: defaultIcon,
+							className: "relative z-10 delight-stagger motion-reduce:animate-none"
+						}),
+						media === "file-type-icon" && /* @__PURE__ */ jsx("div", {
+							"data-slot": "empty-state-file-icon-wrap",
+							"data-testid": "empty-state-file-icon-wrap",
+							"data-centered": "true",
+							className: cn("relative z-10 flex items-center justify-center rounded-full bg-linear-[104deg,color-mix(in_oklch,var(--card)_60%,transparent),color-mix(in_oklch,var(--muted)_55%,transparent)] delight-stagger motion-reduce:animate-none", fileIconWrapSizeClass[size]),
+							children: /* @__PURE__ */ jsx("div", {
+								"data-slot": "empty-state-file-icon-optical-center",
+								"data-testid": "empty-state-file-icon-optical-center",
+								"data-centered": "true",
+								children: /* @__PURE__ */ jsx(FileTypeIcon, {
+									extension: fileExtension,
+									fileType: fileExtension ? void 0 : fileType,
+									size: fileIconSize[size],
+									className: "drop-shadow-[0_1px_2px_var(--shadow-xs-1-color)]"
+								})
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					"data-slot": "empty-state-text",
+					className: cn("flex w-full max-w-[352px] flex-col items-center text-center", textGapClass[size]),
+					children: [/* @__PURE__ */ jsx(Heading, {
+						className: "w-full text-base font-semibold leading-6 text-foreground",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "w-full text-sm leading-5 text-secondary-foreground",
+						children: description
+					})]
+				})]
+			}), hasActions && /* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-actions",
+				className: "flex flex-wrap items-center justify-center gap-3",
+				children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [secondaryAction && renderEmptyStateAction(secondaryAction, "secondary"), primaryAction && renderEmptyStateAction(primaryAction, "primary")] })
+			})]
+		})
+	});
+});
+EmptyState.displayName = "EmptyState";
 //#endregion
-export { GroupingControls };
+export { EmptyState, EmptyStateBackgroundPattern, EmptyStateIllustration };
 
 //# sourceMappingURL=index194.js.map