@pitchfork-ui/react 0.1.9

package/dist/index6.js

@@ -0,0 +1,182 @@
+import { cx } from "./index4.js";
+/* empty css       */
+import { faBarChart, faCalendar, faCircleCheck, faCircleQuestion, faCircleXmark, faCopy, faCreditCard, faSquareCaretLeft, faSquareCaretRight, faSquareCheck, faStar, faUser } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Icon/Icon.tsx
+var customIcons = {
+	"chevron-down": /* @__PURE__ */ jsx("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", { points: "5 9 12 18 19 9" })
+	}),
+	"chevron-up": /* @__PURE__ */ jsx("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", { points: "5 15 12 6 19 15" })
+	}),
+	"chevron-left": /* @__PURE__ */ jsx("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", { points: "15 5 6 12 15 19" })
+	}),
+	"chevron-right": /* @__PURE__ */ jsx("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", { points: "9 5 18 12 9 19" })
+	}),
+	"circle-info": /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	}),
+	"triangle-exclamation": /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
+	}),
+	"file-arrow-up": /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 12v6" }),
+			/* @__PURE__ */ jsx("path", { d: "m15 15-3-3-3 3" })
+		]
+	})
+};
+var regularIcons = {
+	calendar: faCalendar,
+	"chart-bar": faBarChart,
+	"circle-check": faCircleCheck,
+	"circle-question": faCircleQuestion,
+	"circle-xmark": faCircleXmark,
+	copy: faCopy,
+	"credit-card": faCreditCard,
+	"square-caret-left": faSquareCaretLeft,
+	"square-caret-right": faSquareCaretRight,
+	"square-check": faSquareCheck,
+	star: faStar,
+	user: faUser
+};
+var toAliasLookup = (icons) => {
+	const lookup = {};
+	Object.values(icons).forEach((icon) => {
+		const aliases = icon.icon?.[2];
+		if (!Array.isArray(aliases)) return;
+		aliases.forEach((alias) => {
+			if (typeof alias === "string") lookup[alias] = icon;
+		});
+	});
+	return lookup;
+};
+var regularAliases = toAliasLookup(regularIcons);
+var legacyAliases = {
+	circleCheck: "circle-check",
+	circleQuestion: "circle-question",
+	circleInfo: "circle-info"
+};
+var toKebabCase = (value) => {
+	return value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+};
+var normalizeName = (name) => {
+	return legacyAliases[name] ?? toKebabCase(name);
+};
+var getAvailableIconNames = () => {
+	return [...new Set([...Object.keys(regularIcons), ...Object.keys(customIcons)])].sort();
+};
+var getCustomIconNames = () => Object.keys(customIcons).sort();
+function Icon({ name, label, className, style, ...props }) {
+	const customIcon = customIcons[name];
+	if (customIcon !== void 0) return /* @__PURE__ */ jsx("span", {
+		className: cx("pf-icon", className),
+		"aria-hidden": label ? void 0 : true,
+		"aria-label": label,
+		style,
+		...props,
+		children: customIcon
+	});
+	const normalizedName = normalizeName(name);
+	const faIcon = regularIcons[normalizedName] ?? regularAliases[normalizedName];
+	if (!faIcon) return null;
+	return /* @__PURE__ */ jsx(FontAwesomeIcon, {
+		icon: faIcon,
+		className: cx("pf-icon", className),
+		"aria-hidden": label ? void 0 : true,
+		"aria-label": label,
+		style,
+		...props
+	});
+}
+Icon.displayName = "Icon";
+//#endregion
+export { Icon, getAvailableIconNames, getCustomIconNames };

package/dist/index60.js

@@ -0,0 +1,264 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/LineBarCharts/LineBarChart.tsx
+var CHART_COLORS = [
+	"var(--pf-chart-color-1)",
+	"var(--pf-chart-color-2)",
+	"var(--pf-chart-color-3)",
+	"var(--pf-chart-color-4)",
+	"var(--pf-chart-color-5)",
+	"var(--pf-chart-color-6)"
+];
+var PAD = {
+	top: 24,
+	right: 32,
+	bottom: 40,
+	left: 56
+};
+var VIEW_W = 560;
+var VIEW_H = 240;
+var PLOT_W = VIEW_W - PAD.left - PAD.right;
+var PLOT_H = VIEW_H - PAD.top - PAD.bottom;
+function resolveColor(series, index) {
+	return series.color ?? CHART_COLORS[index % CHART_COLORS.length];
+}
+function niceYTicks(maxVal, count = 5) {
+	if (maxVal <= 0) return [
+		0,
+		1,
+		2,
+		3,
+		4,
+		5
+	];
+	const rough = maxVal / count;
+	const mag = Math.pow(10, Math.floor(Math.log10(rough)));
+	const step = ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((s) => s * mag >= rough) ?? 10) * mag;
+	const ticks = [];
+	for (let v = 0; v <= maxVal * 1.001; v += step) ticks.push(v);
+	if (ticks[ticks.length - 1] < maxVal) ticks.push(ticks[ticks.length - 1] + step);
+	return ticks;
+}
+function formatTick(value, formatter) {
+	if (formatter) return formatter(value);
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(value % 1e3 === 0 ? 0 : 1)}k`;
+	return String(Math.round(value));
+}
+function toY(value, maxTick) {
+	return PAD.top + PLOT_H - value / maxTick * PLOT_H;
+}
+function toX(index, count) {
+	if (count <= 1) return PAD.left + PLOT_W / 2;
+	return PAD.left + index / (count - 1) * PLOT_W;
+}
+function smoothPath(points) {
+	if (points.length === 0) return "";
+	if (points.length === 1) return `M ${points[0].x},${points[0].y}`;
+	if (points.length === 2) return `M ${points[0].x},${points[0].y} L ${points[1].x},${points[1].y}`;
+	let d = `M ${points[0].x},${points[0].y}`;
+	for (let i = 0; i < points.length - 1; i++) {
+		const p0 = points[Math.max(0, i - 1)];
+		const p1 = points[i];
+		const p2 = points[i + 1];
+		const p3 = points[Math.min(points.length - 1, i + 2)];
+		const cp1x = p1.x + (p2.x - p0.x) / 6;
+		const cp1y = p1.y + (p2.y - p0.y) / 6;
+		const cp2x = p2.x - (p3.x - p1.x) / 6;
+		const cp2y = p2.y - (p3.y - p1.y) / 6;
+		d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x},${p2.y}`;
+	}
+	return d;
+}
+function ChartLegend({ series }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "pf-chart-legend",
+		children: series.map((s) => /* @__PURE__ */ jsxs("li", {
+			className: "pf-chart-legend__item",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "pf-chart-legend__swatch",
+				style: { background: s.color },
+				"aria-hidden": "true"
+			}), s.label]
+		}, s.key))
+	});
+}
+function Axes({ yTicks, xLabels, xPositions, maxTick, yAxisLabel, valueFormatter }) {
+	const n = xLabels.length;
+	const labelStep = Math.max(1, Math.ceil(n / 12));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		yTicks.map((tick) => {
+			const y = toY(tick, maxTick);
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: PAD.left,
+				y1: y,
+				x2: PAD.left + PLOT_W,
+				y2: y,
+				className: "pf-chart__grid"
+			}), /* @__PURE__ */ jsx("text", {
+				x: PAD.left - 8,
+				y,
+				className: "pf-chart__tick pf-chart__tick--y",
+				children: formatTick(tick, valueFormatter)
+			})] }, tick);
+		}),
+		xLabels.map((label, i) => i % labelStep !== 0 ? null : /* @__PURE__ */ jsx("text", {
+			x: xPositions ? xPositions[i] : toX(i, n),
+			y: PAD.top + PLOT_H + 20,
+			className: "pf-chart__tick pf-chart__tick--x",
+			children: label
+		}, i)),
+		yAxisLabel ? /* @__PURE__ */ jsx("text", {
+			x: -(PAD.top + PLOT_H / 2),
+			y: 14,
+			transform: "rotate(-90)",
+			className: "pf-chart__axis-label",
+			children: yAxisLabel
+		}) : null
+	] });
+}
+var LineChart = forwardRef(function LineChart({ className, data, series, yAxisLabel, showLegend = true, area = false, curved = true, valueFormatter, ...props }, ref) {
+	if (!data.length || !series.length) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-chart", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pf-chart__empty",
+			children: "No data"
+		})
+	});
+	const allValues = series.flatMap((s) => data.map((d) => Number(d[s.key] ?? 0)));
+	const yTicks = niceYTicks(Math.max(...allValues, 0));
+	const maxTick = yTicks[yTicks.length - 1];
+	const n = data.length;
+	const resolvedSeries = series.map((s, i) => ({
+		...s,
+		color: resolveColor(s, i)
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-chart", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+			className: "pf-chart__svg",
+			role: "img",
+			"aria-label": yAxisLabel ?? "Line chart",
+			children: [/* @__PURE__ */ jsx(Axes, {
+				yTicks,
+				xLabels: data.map((d) => d.label),
+				maxTick,
+				yAxisLabel,
+				valueFormatter
+			}), resolvedSeries.map((s) => {
+				const points = data.map((d, i) => ({
+					x: toX(i, n),
+					y: toY(Number(d[s.key] ?? 0), maxTick)
+				}));
+				const linePath = curved ? smoothPath(points) : `M ${points.map((p) => `${p.x},${p.y}`).join(" L ")}`;
+				const areaPath = area ? `${linePath} L ${points[n - 1].x},${PAD.top + PLOT_H} L ${points[0].x},${PAD.top + PLOT_H} Z` : null;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					areaPath ? /* @__PURE__ */ jsx("path", {
+						d: areaPath,
+						fill: s.color,
+						fillOpacity: .12,
+						stroke: "none"
+					}) : null,
+					/* @__PURE__ */ jsx("path", {
+						d: linePath,
+						fill: "none",
+						stroke: s.color,
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeDasharray: s.dashed ? "6 4" : void 0
+					}),
+					points.map((pt, i) => /* @__PURE__ */ jsx("circle", {
+						cx: pt.x,
+						cy: pt.y,
+						r: 3.5,
+						fill: s.color,
+						className: "pf-chart__dot",
+						children: /* @__PURE__ */ jsx("title", { children: `${data[i].label}: ${formatTick(Number(data[i][s.key] ?? 0), valueFormatter)}` })
+					}, i))
+				] }, s.key);
+			})]
+		}), showLegend && resolvedSeries.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { series: resolvedSeries }) : null]
+	});
+});
+LineChart.displayName = "LineChart";
+var BarChart = forwardRef(function BarChart({ className, data, series, yAxisLabel, showLegend = true, stacked = false, valueFormatter, ...props }, ref) {
+	if (!data.length || !series.length) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-chart", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pf-chart__empty",
+			children: "No data"
+		})
+	});
+	const n = data.length;
+	const m = series.length;
+	const groupMaxValues = stacked ? data.map((d) => series.reduce((sum, s) => sum + Number(d[s.key] ?? 0), 0)) : series.flatMap((s) => data.map((d) => Number(d[s.key] ?? 0)));
+	const yTicks = niceYTicks(Math.max(...groupMaxValues, 0));
+	const maxTick = yTicks[yTicks.length - 1];
+	const groupWidth = PLOT_W / n;
+	const totalBarW = groupWidth * .72;
+	const gap = Math.max(2, groupWidth * .06);
+	const barW = stacked ? totalBarW : (totalBarW - gap * (m - 1)) / m;
+	const barXPositions = data.map((_, i) => PAD.left + (i + .5) * groupWidth);
+	const resolvedSeries = series.map((s, i) => ({
+		...s,
+		color: resolveColor(s, i)
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-chart", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+			className: "pf-chart__svg",
+			role: "img",
+			"aria-label": yAxisLabel ?? "Bar chart",
+			children: [/* @__PURE__ */ jsx(Axes, {
+				yTicks,
+				xLabels: data.map((d) => d.label),
+				xPositions: barXPositions,
+				maxTick,
+				yAxisLabel,
+				valueFormatter
+			}), data.map((d, di) => {
+				const groupLeft = PAD.left + (di + .5) * groupWidth - totalBarW / 2;
+				let stackBase = 0;
+				return /* @__PURE__ */ jsx("g", { children: resolvedSeries.map((s, si) => {
+					const value = Math.max(0, Number(d[s.key] ?? 0));
+					const barH = value / maxTick * PLOT_H;
+					const barX = stacked ? groupLeft : groupLeft + si * (barW + gap);
+					const barY = stacked ? toY(stackBase + value, maxTick) : PAD.top + PLOT_H - barH;
+					if (stacked) stackBase += value;
+					return /* @__PURE__ */ jsx("rect", {
+						x: barX,
+						y: barY,
+						width: barW,
+						height: Math.max(0, barH),
+						fill: s.color,
+						rx: 2,
+						className: "pf-chart__bar",
+						children: /* @__PURE__ */ jsx("title", { children: `${d.label} — ${s.label}: ${formatTick(value, valueFormatter)}` })
+					}, s.key);
+				}) }, `group-${di}`);
+			})]
+		}), showLegend && resolvedSeries.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { series: resolvedSeries }) : null]
+	});
+});
+BarChart.displayName = "BarChart";
+//#endregion
+export { BarChart, LineChart };

package/dist/index62.js

@@ -0,0 +1,68 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/LoadingIndicators/LoadingIndicators.tsx
+var LoadingSpinner = forwardRef(function LoadingSpinner({ className, size = 24, label = "Loading", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-loading-spinner", className),
+		style: { "--pf-spinner-size": `${size}px` },
+		role: "status",
+		"aria-label": label,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "pf-sr-only",
+			children: label
+		})
+	});
+});
+LoadingSpinner.displayName = "LoadingSpinner";
+var LoadingDots = forwardRef(function LoadingDots({ className, size = "md", label = "Loading", ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-loading-dots", `pf-loading-dots--${size}`, className),
+		role: "status",
+		"aria-label": label,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pf-loading-dots__dot",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "pf-loading-dots__dot",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "pf-loading-dots__dot",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "pf-sr-only",
+				children: label
+			})
+		]
+	});
+});
+LoadingDots.displayName = "LoadingDots";
+var LoadingSkeleton = forwardRef(function LoadingSkeleton({ className, width = "100%", height = 16, rounded = false, label = "Loading content", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-loading-skeleton", rounded ? "pf-loading-skeleton--rounded" : void 0, className),
+		style: {
+			"--pf-skeleton-width": typeof width === "number" ? `${width}px` : width,
+			"--pf-skeleton-height": typeof height === "number" ? `${height}px` : height
+		},
+		role: "status",
+		"aria-label": label,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "pf-sr-only",
+			children: label
+		})
+	});
+});
+LoadingSkeleton.displayName = "LoadingSkeleton";
+//#endregion
+export { LoadingDots, LoadingSkeleton, LoadingSpinner };

package/dist/index64.js

@@ -0,0 +1,69 @@
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Metrics/Metrics.tsx
+var trendSymbol = {
+	positive: "+",
+	negative: "-",
+	neutral: "="
+};
+var MetricGrid = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cx("pf-metric-grid", className),
+	...props
+}));
+MetricGrid.displayName = "MetricGrid";
+var MetricCard = forwardRef(function MetricCard({ className, heading, value, description, trend = "neutral", trendLabel, icon, iconName, action, children, ...props }, ref) {
+	const resolvedIcon = icon ?? (iconName ? /* @__PURE__ */ jsx(Icon, {
+		name: iconName,
+		"aria-hidden": true
+	}) : null);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-metric-card", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "pf-metric-card__header",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pf-metric-card__heading-wrap",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "pf-metric-card__heading",
+						children: heading
+					}), resolvedIcon ? /* @__PURE__ */ jsx("span", {
+						className: "pf-metric-card__icon",
+						"aria-hidden": true,
+						children: resolvedIcon
+					}) : null]
+				}), action ? /* @__PURE__ */ jsx("div", {
+					className: "pf-metric-card__action",
+					children: action
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pf-metric-card__body",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "pf-metric-card__value",
+					children: value
+				}), trendLabel ? /* @__PURE__ */ jsxs("span", {
+					className: cx("pf-metric-card__trend", `pf-metric-card__trend--${trend}`),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "pf-metric-card__trend-symbol",
+						"aria-hidden": true,
+						children: trendSymbol[trend]
+					}), trendLabel]
+				}) : null]
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "pf-metric-card__description",
+				children: description
+			}) : null,
+			children
+		]
+	});
+});
+MetricCard.displayName = "MetricCard";
+//#endregion
+export { MetricCard, MetricGrid };

package/dist/index66.js

@@ -0,0 +1,95 @@
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+import { useFocusTrap } from "./index34.js";
+/* empty css        */
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Modal/Modal.tsx
+var ModalHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cx("pf-modal__header", className),
+	...props
+}));
+ModalHeader.displayName = "ModalHeader";
+var ModalBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cx("pf-modal__body", className),
+	...props
+}));
+ModalBody.displayName = "ModalBody";
+var ModalFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cx("pf-modal__footer", className),
+	...props
+}));
+ModalFooter.displayName = "ModalFooter";
+var Modal = forwardRef(function Modal({ className, open, onOpenChange, title, description, footer, size = "md", closeOnOverlayClick = true, showCloseButton = true, children, ...props }, ref) {
+	const titleId = useId();
+	const descriptionId = useId();
+	const dialogRef = useRef(null);
+	useImperativeHandle(ref, () => dialogRef.current, []);
+	useEffect(() => {
+		if (!open || typeof document === "undefined") return;
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	}, [open]);
+	useFocusTrap({
+		containerRef: dialogRef,
+		enabled: open,
+		onEscape: () => onOpenChange?.(false)
+	});
+	if (!open || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "pf-modal__portal",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pf-modal__overlay",
+			onClick: () => {
+				if (closeOnOverlayClick) onOpenChange?.(false);
+			}
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pf-modal__viewport",
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: dialogRef,
+				className: cx("pf-modal", `pf-modal--${size}`, className),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": title ? titleId : void 0,
+				"aria-describedby": description ? descriptionId : void 0,
+				tabIndex: -1,
+				...props,
+				children: [
+					title || description || showCloseButton ? /* @__PURE__ */ jsxs(ModalHeader, { children: [/* @__PURE__ */ jsxs("div", {
+						className: "pf-modal__heading-group",
+						children: [title ? /* @__PURE__ */ jsx("h2", {
+							className: "pf-modal__title",
+							id: titleId,
+							children: title
+						}) : null, description ? /* @__PURE__ */ jsx("p", {
+							className: "pf-modal__description",
+							id: descriptionId,
+							children: description
+						}) : null]
+					}), showCloseButton ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-modal__close",
+						"aria-label": "Close modal",
+						onClick: () => onOpenChange?.(false),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "circle-xmark",
+							"aria-hidden": true
+						})
+					}) : null] }) : null,
+					/* @__PURE__ */ jsx(ModalBody, { children }),
+					footer ? /* @__PURE__ */ jsx(ModalFooter, { children: footer }) : null
+				]
+			})
+		})]
+	}), document.body);
+});
+Modal.displayName = "Modal";
+//#endregion
+export { Modal, ModalBody, ModalFooter, ModalHeader };