@pitchfork-ui/react 0.1.9

package/dist/index68.js

@@ -0,0 +1,202 @@
+import { Keys, composeDescribedBy, isActivationKey } from "./index3.js";
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+import { FieldWrapper } from "./index19.js";
+import { useAnchoredPosition } from "./index30.js";
+import { useComposedRefs } from "./index31.js";
+import { useControllableState } from "./index32.js";
+import { useDisclosure } from "./index33.js";
+import { useListNavigation } from "./index35.js";
+import { useOutsideInteraction } from "./index36.js";
+/* empty css        */
+import { forwardRef, useEffect, useId, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/MultiSelect/MultiSelect.tsx
+var MultiSelect = forwardRef(({ id, options, value, defaultValue, onValueChange, placeholder = "Select options", name, label, description, error, className, disabled, required, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+	const generatedId = useId();
+	const selectId = id ?? generatedId;
+	const descriptionId = description ? `${selectId}-description` : void 0;
+	const errorId = error ? `${selectId}-error` : void 0;
+	const listboxId = `${selectId}-listbox`;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [controllableSelectedValues, setSelectedValues] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
+	});
+	const selectedValues = useMemo(() => controllableSelectedValues ?? [], [controllableSelectedValues]);
+	const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+	const selectedOptions = useMemo(() => options.filter((option) => selectedSet.has(option.value)), [options, selectedSet]);
+	const selectedIndex = options.findIndex((option) => selectedSet.has(option.value) && !option.disabled);
+	const disclosure = useDisclosure({ disabled });
+	const { isOpen } = disclosure;
+	const { activeIndex, firstEnabledIndex, lastEnabledIndex, move, setActiveIndex } = useListNavigation({
+		items: options,
+		isDisabled: (option) => Boolean(option.disabled),
+		initialIndex: selectedIndex >= 0 ? selectedIndex : void 0
+	});
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const menuRef = useRef(null);
+	const triggerRefs = useComposedRefs(triggerRef, ref);
+	const menuStyle = useAnchoredPosition({
+		anchorRef: triggerRef,
+		enabled: isOpen,
+		matchAnchorWidth: true
+	});
+	useOutsideInteraction({
+		refs: [rootRef, menuRef],
+		enabled: isOpen,
+		onInteractOutside: disclosure.close
+	});
+	useEffect(() => {
+		if (!isOpen) return;
+		setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex);
+	}, [
+		firstEnabledIndex,
+		isOpen,
+		selectedIndex,
+		setActiveIndex
+	]);
+	const updateValue = (nextValue) => {
+		setSelectedValues(nextValue);
+	};
+	const toggleValue = (nextValue) => {
+		if (selectedSet.has(nextValue)) {
+			updateValue(selectedValues.filter((valueItem) => valueItem !== nextValue));
+			return;
+		}
+		updateValue([...selectedValues, nextValue]);
+	};
+	const onTriggerKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === Keys.ArrowDown || event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			if (!isOpen) {
+				disclosure.open();
+				return;
+			}
+			const startIndex = activeIndex >= 0 ? activeIndex : 0;
+			move(event.key === Keys.ArrowDown ? "next" : "previous", startIndex);
+			return;
+		}
+		if (event.key === Keys.Home) {
+			event.preventDefault();
+			if (firstEnabledIndex >= 0) setActiveIndex(firstEnabledIndex);
+			return;
+		}
+		if (event.key === Keys.End) {
+			event.preventDefault();
+			if (lastEnabledIndex >= 0) setActiveIndex(lastEnabledIndex);
+			return;
+		}
+		if (isActivationKey(event.key)) {
+			event.preventDefault();
+			if (!isOpen) {
+				disclosure.open();
+				return;
+			}
+			const activeOption = options[activeIndex];
+			if (activeOption && !activeOption.disabled) toggleValue(activeOption.value);
+			return;
+		}
+		if (event.key === Keys.Escape) disclosure.close();
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: selectId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pf-multi-select",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					...props,
+					id: selectId,
+					ref: triggerRefs,
+					type: "button",
+					className: cx("pf-multi-select__trigger", isOpen && "pf-multi-select__trigger--open", error && "pf-multi-select__trigger--invalid", className),
+					disabled,
+					"aria-haspopup": "listbox",
+					"aria-expanded": isOpen,
+					"aria-required": required || void 0,
+					"aria-controls": isOpen ? listboxId : void 0,
+					"aria-describedby": describedBy,
+					onClick: () => {
+						disclosure.toggle();
+					},
+					onKeyDown: onTriggerKeyDown,
+					children: [selectedOptions.length > 0 ? /* @__PURE__ */ jsx("span", {
+						className: "pf-multi-select__chips",
+						children: selectedOptions.map((option) => /* @__PURE__ */ jsx("span", {
+							className: "pf-multi-select__chip",
+							children: option.label
+						}, option.value))
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "pf-multi-select__placeholder",
+						children: placeholder
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cx("pf-multi-select__icon", isOpen && "pf-multi-select__icon--open"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "chevron-down",
+							"aria-hidden": true
+						})
+					})]
+				}),
+				name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: selectedValue
+				}, selectedValue)) : null,
+				isOpen && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("ul", {
+					id: listboxId,
+					ref: menuRef,
+					className: "pf-multi-select__menu",
+					style: menuStyle,
+					role: "listbox",
+					"aria-multiselectable": "true",
+					"aria-labelledby": label ? selectId : void 0,
+					children: options.map((option, index) => {
+						const isSelected = selectedSet.has(option.value);
+						const isActive = index === activeIndex;
+						return /* @__PURE__ */ jsxs("li", {
+							id: `${listboxId}-option-${index}`,
+							role: "option",
+							"aria-selected": isSelected,
+							"aria-disabled": option.disabled ? true : void 0,
+							className: cx("pf-multi-select__option", isSelected && "pf-multi-select__option--selected", isActive && "pf-multi-select__option--active", option.disabled && "pf-multi-select__option--disabled"),
+							onMouseEnter: () => {
+								if (!option.disabled) setActiveIndex(index);
+							},
+							onMouseDown: (event) => {
+								event.preventDefault();
+							},
+							onClick: () => {
+								if (option.disabled) return;
+								toggleValue(option.value);
+								triggerRef.current?.focus();
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: option.label }), isSelected ? /* @__PURE__ */ jsx("span", {
+								className: "pf-multi-select__check",
+								"aria-hidden": true,
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "square-check",
+									"aria-hidden": true
+								})
+							}) : null]
+						}, option.value);
+					})
+				}), document.body) : null
+			]
+		})
+	});
+});
+MultiSelect.displayName = "MultiSelect";
+//#endregion
+export { MultiSelect };

package/dist/index70.js

@@ -0,0 +1,68 @@
+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/Notification/Notification.tsx
+var variantIcon = {
+	info: "circle-info",
+	success: "circle-check",
+	warning: "triangle-exclamation",
+	danger: "circle-xmark"
+};
+var NotificationStack = forwardRef(({ className, placement = "top-right", ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cx("pf-notification-stack", `pf-notification-stack--${placement}`, className),
+	...props
+}));
+NotificationStack.displayName = "NotificationStack";
+var Notification = forwardRef(({ className, variant = "info", heading, description, icon, action, dismissible = false, onDismiss, children, ...props }, ref) => {
+	const resolvedIcon = icon ?? /* @__PURE__ */ jsx(Icon, {
+		name: variantIcon[variant],
+		"aria-hidden": true
+	});
+	const body = children ?? description;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-notification", `pf-notification--${variant}`, className),
+		role: "status",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pf-notification__icon",
+				"aria-hidden": true,
+				children: resolvedIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pf-notification__content",
+				children: [
+					heading ? /* @__PURE__ */ jsx("p", {
+						className: "pf-notification__title",
+						children: heading
+					}) : null,
+					body ? /* @__PURE__ */ jsx("div", {
+						className: "pf-notification__description",
+						children: body
+					}) : null,
+					action ? /* @__PURE__ */ jsx("div", {
+						className: "pf-notification__action",
+						children: action
+					}) : null
+				]
+			}),
+			dismissible ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pf-notification__dismiss",
+				"aria-label": "Dismiss notification",
+				onClick: () => onDismiss?.(),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "circle-xmark",
+					"aria-hidden": true
+				})
+			}) : null
+		]
+	});
+});
+Notification.displayName = "Notification";
+//#endregion
+export { Notification, NotificationStack };

package/dist/index72.js

@@ -0,0 +1,50 @@
+import { cx } from "./index4.js";
+import { Breadcrumbs } from "./index18.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PageHeader/PageHeader.tsx
+var PageHeaderMeta = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cx("pf-page-header__meta", className),
+	...props
+}));
+PageHeaderMeta.displayName = "PageHeaderMeta";
+var PageHeader = forwardRef(function PageHeader({ className, eyebrow, heading, description, breadcrumbs, metadata, actions, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		className: cx("pf-page-header", className),
+		...props,
+		children: [breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, {
+			items: breadcrumbs,
+			className: "pf-page-header__breadcrumbs"
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "pf-page-header__row",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pf-page-header__content",
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx("p", {
+						className: "pf-page-header__eyebrow",
+						children: eyebrow
+					}) : null,
+					/* @__PURE__ */ jsx("h1", {
+						className: "pf-page-header__heading",
+						children: heading
+					}),
+					description ? /* @__PURE__ */ jsx("p", {
+						className: "pf-page-header__description",
+						children: description
+					}) : null,
+					metadata ? /* @__PURE__ */ jsx(PageHeaderMeta, { children: metadata }) : null,
+					children
+				]
+			}), actions ? /* @__PURE__ */ jsx("div", {
+				className: "pf-page-header__actions",
+				children: actions
+			}) : null]
+		})]
+	});
+});
+PageHeader.displayName = "PageHeader";
+//#endregion
+export { PageHeader, PageHeaderMeta };

package/dist/index74.js

@@ -0,0 +1,88 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Pagination/Pagination.tsx
+function clampPage(page, totalPages) {
+	if (totalPages <= 0) return 1;
+	return Math.min(Math.max(page, 1), totalPages);
+}
+function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
+	const safeTotal = Math.max(totalPages, 1);
+	const safeCurrent = clampPage(currentPage, safeTotal);
+	const safeSiblingCount = Math.max(siblingCount, 0);
+	const safeBoundaryCount = Math.max(boundaryCount, 0);
+	const leftBoundaryEnd = Math.min(safeBoundaryCount, safeTotal);
+	const rightBoundaryStart = Math.max(safeTotal - safeBoundaryCount + 1, 1);
+	const start = Math.max(safeCurrent - safeSiblingCount, leftBoundaryEnd + 1);
+	const end = Math.min(safeCurrent + safeSiblingCount, rightBoundaryStart - 1);
+	const items = [];
+	for (let page = 1; page <= leftBoundaryEnd; page += 1) items.push(page);
+	if (start > leftBoundaryEnd + 1) items.push("ellipsis-left");
+	for (let page = start; page <= end; page += 1) items.push(page);
+	if (end < rightBoundaryStart - 1) items.push("ellipsis-right");
+	for (let page = rightBoundaryStart; page <= safeTotal; page += 1) if (page > leftBoundaryEnd) items.push(page);
+	if (!items.length) return [1];
+	return items;
+}
+var Pagination = React.forwardRef(function Pagination({ className, page, defaultPage = 1, totalPages, siblingCount = 1, boundaryCount = 1, showPrevNext = true, disabled = false, onPageChange, prevLabel = "Previous", nextLabel = "Next", "aria-label": ariaLabel = "Pagination", ...props }, ref) {
+	const safeTotalPages = Math.max(totalPages, 1);
+	const [internalPage, setInternalPage] = React.useState(() => clampPage(defaultPage, safeTotalPages));
+	const currentPage = clampPage(page ?? internalPage, safeTotalPages);
+	const items = getPaginationItems(currentPage, safeTotalPages, siblingCount, boundaryCount);
+	const canGoPrev = currentPage > 1;
+	const canGoNext = currentPage < safeTotalPages;
+	const setPage = React.useCallback((nextPage) => {
+		const clamped = clampPage(nextPage, safeTotalPages);
+		if (page === void 0) setInternalPage(clamped);
+		onPageChange?.(clamped);
+	}, [
+		onPageChange,
+		page,
+		safeTotalPages
+	]);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		className: cx("pf-pagination", disabled && "pf-pagination--disabled", className),
+		"aria-label": ariaLabel,
+		...props,
+		children: [
+			showPrevNext ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pf-pagination__nav",
+				onClick: () => setPage(currentPage - 1),
+				disabled: disabled || !canGoPrev,
+				children: prevLabel
+			}) : null,
+			/* @__PURE__ */ jsx("ol", {
+				className: "pf-pagination__list",
+				children: items.map((item, index) => {
+					if (typeof item !== "number") return /* @__PURE__ */ jsx("li", {
+						className: "pf-pagination__ellipsis",
+						"aria-hidden": true,
+						children: "..."
+					}, `${item}-${index}`);
+					const isCurrent = item === currentPage;
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cx("pf-pagination__page", isCurrent && "pf-pagination__page--active"),
+						onClick: () => setPage(item),
+						disabled,
+						"aria-current": isCurrent ? "page" : void 0,
+						children: item
+					}) }, item);
+				})
+			}),
+			showPrevNext ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pf-pagination__nav",
+				onClick: () => setPage(currentPage + 1),
+				disabled: disabled || !canGoNext,
+				children: nextLabel
+			}) : null
+		]
+	});
+});
+Pagination.displayName = "Pagination";
+//#endregion
+export { Pagination };

package/dist/index76.js

@@ -0,0 +1,92 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PieChart/PieChart.tsx
+var fallbackColors = [
+	"var(--color-brand-600)",
+	"var(--color-brand-500)",
+	"var(--color-gray-500)",
+	"#06b6d4",
+	"#22c55e",
+	"var(--color-gray-500)"
+];
+function clampCutout(value) {
+	return Math.min(Math.max(value, 0), .88);
+}
+function prepareSegments(data) {
+	const normalized = data.map((item, index) => ({
+		...item,
+		value: Math.max(item.value, 0),
+		color: item.color ?? fallbackColors[index % fallbackColors.length]
+	}));
+	const total = normalized.reduce((sum, item) => sum + item.value, 0);
+	if (total <= 0) return [];
+	return normalized.filter((item) => item.value > 0).map((item) => ({
+		...item,
+		percentage: item.value / total * 100
+	}));
+}
+function toConicGradient(segments) {
+	let cursor = 0;
+	return `conic-gradient(${segments.map((segment) => {
+		const start = cursor;
+		const end = cursor + segment.percentage;
+		cursor = end;
+		return `${segment.color} ${start}% ${end}%`;
+	}).join(", ")})`;
+}
+var PieChart = forwardRef(function PieChart({ className, data, size = 192, cutout = .58, showLegend = true, centerLabel, emptyLabel = "No data", ...props }, ref) {
+	const segments = prepareSegments(data);
+	const hasData = segments.length > 0;
+	const chartSize = Math.max(size, 120);
+	const safeCutout = clampCutout(cutout);
+	const centerSize = Math.round(chartSize * safeCutout);
+	const conicGradient = hasData ? toConicGradient(segments) : "conic-gradient(var(--color-semantic-background-subtle) 0% 100%)";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-pie-chart", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("pf-pie-chart__visual", !hasData && "pf-pie-chart__visual--empty"),
+			style: {
+				width: chartSize,
+				height: chartSize,
+				backgroundImage: conicGradient
+			},
+			role: "img",
+			"aria-label": "Pie chart",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pf-pie-chart__center",
+				style: {
+					width: centerSize,
+					height: centerSize
+				},
+				children: hasData ? centerLabel : emptyLabel
+			})
+		}), showLegend && hasData ? /* @__PURE__ */ jsx("ul", {
+			className: "pf-pie-chart__legend",
+			children: segments.map((segment, index) => /* @__PURE__ */ jsxs("li", {
+				className: "pf-pie-chart__legend-item",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "pf-pie-chart__legend-dot",
+						style: { background: segment.color },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "pf-pie-chart__legend-label",
+						children: segment.label
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "pf-pie-chart__legend-value",
+						children: [Math.round(segment.percentage), "%"]
+					})
+				]
+			}, `${index}-${segment.value}`))
+		}) : null]
+	});
+});
+PieChart.displayName = "PieChart";
+//#endregion
+export { PieChart };

package/dist/index78.js

@@ -0,0 +1,76 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ProgressIndicators/ProgressIndicators.tsx
+var clampPercent = (value, max) => {
+	if (max <= 0) return 0;
+	return Math.max(0, Math.min(100, value / max * 100));
+};
+var ProgressBar = forwardRef(function ProgressBar({ value, max = 100, showValue = true, label, className, ...props }, ref) {
+	const percent = clampPercent(value, max);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-progress-bar", className),
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": Math.round(percent / 100 * max),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pf-progress-bar__track",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pf-progress-bar__fill",
+				style: { "--pf-progress-fill": `${percent}%` }
+			})
+		}), showValue ? /* @__PURE__ */ jsxs("span", {
+			className: "pf-progress-bar__value",
+			children: [Math.round(percent), "%"]
+		}) : null]
+	});
+});
+ProgressBar.displayName = "ProgressBar";
+var ProgressCircle = forwardRef(function ProgressCircle({ value, max = 100, size = 64, strokeWidth = 6, showValue = true, label, className, ...props }, ref) {
+	const percent = clampPercent(value, max);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const dashOffset = circumference * (1 - percent / 100);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-progress-circle", className),
+		style: { "--pf-progress-circle-size": `${size}px` },
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": Math.round(percent / 100 * max),
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${size} ${size}`,
+			className: "pf-progress-circle__svg",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "pf-progress-circle__track",
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				strokeWidth
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "pf-progress-circle__fill",
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				strokeWidth,
+				strokeDasharray: circumference,
+				strokeDashoffset: dashOffset
+			})]
+		}), showValue ? /* @__PURE__ */ jsxs("span", {
+			className: "pf-progress-circle__value",
+			children: [Math.round(percent), "%"]
+		}) : null]
+	});
+});
+ProgressCircle.displayName = "ProgressCircle";
+//#endregion
+export { ProgressBar, ProgressCircle };

package/dist/index8.js

@@ -0,0 +1,61 @@
+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/Alert/Alert.tsx
+var variantIcon = {
+	info: "circle-info",
+	success: "circle-check",
+	warning: "triangle-exclamation",
+	danger: "circle-xmark"
+};
+var variantRole = {
+	info: "status",
+	success: "status",
+	warning: "alert",
+	danger: "alert"
+};
+var Alert = forwardRef(({ className, variant = "info", heading, description, dismissible = false, onDismiss, icon, children, ...props }, ref) => {
+	const resolvedIcon = icon ?? /* @__PURE__ */ jsx(Icon, {
+		name: variantIcon[variant],
+		"aria-hidden": true
+	});
+	const body = children ?? description;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-alert", `pf-alert--${variant}`, className),
+		role: variantRole[variant],
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pf-alert__icon",
+				"aria-hidden": true,
+				children: resolvedIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pf-alert__content",
+				children: [heading ? /* @__PURE__ */ jsx("p", {
+					className: "pf-alert__title",
+					children: heading
+				}) : null, body ? /* @__PURE__ */ jsx("div", {
+					className: "pf-alert__description",
+					children: body
+				}) : null]
+			}),
+			dismissible ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pf-alert__dismiss",
+				"aria-label": "Dismiss alert",
+				onClick: () => onDismiss?.(),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "circle-xmark",
+					"aria-hidden": true
+				})
+			}) : null
+		]
+	});
+});
+Alert.displayName = "Alert";
+//#endregion
+export { Alert };

package/dist/index80.js

@@ -0,0 +1,44 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ProgressSteps/ProgressSteps.tsx
+function inferStatus(index, steps) {
+	const firstCurrent = steps.findIndex((step) => step.status === "current");
+	if (steps[index]?.status) return steps[index].status;
+	if (firstCurrent === -1) return index === 0 ? "current" : "upcoming";
+	if (index < firstCurrent) return "complete";
+	return index === firstCurrent ? "current" : "upcoming";
+}
+var ProgressSteps = forwardRef(function ProgressSteps({ className, steps, orientation = "horizontal", ...props }, ref) {
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		className: cx("pf-progress-steps", `pf-progress-steps--${orientation}`, className),
+		...props,
+		children: steps.map((step, index) => {
+			return /* @__PURE__ */ jsxs("li", {
+				className: cx("pf-progress-steps__item", `pf-progress-steps__item--${inferStatus(index, steps)}`),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pf-progress-steps__marker-wrap",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "pf-progress-steps__marker",
+						children: index + 1
+					}), index < steps.length - 1 ? /* @__PURE__ */ jsx("span", { className: "pf-progress-steps__connector" }) : null]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pf-progress-steps__content",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "pf-progress-steps__title",
+						children: step.title
+					}), step.description ? /* @__PURE__ */ jsx("p", {
+						className: "pf-progress-steps__description",
+						children: step.description
+					}) : null]
+				})]
+			}, step.id ?? `step-${index}`);
+		})
+	});
+});
+ProgressSteps.displayName = "ProgressSteps";
+//#endregion
+export { ProgressSteps };