@pitchfork-ui/react 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -434,6 +434,49 @@ var customIcons = {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 12v6" }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 15-3-3-3 3" })
 		]
+	}),
+	plus: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })]
+	}),
+	"magnifying-glass": /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21 21-4.35-4.35" })]
+	}),
+	minus: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })
 	})
 };
 var regularIcons = {
@@ -676,6 +719,37 @@ var Avatar = (0, react.forwardRef)(({ src, alt, name, size = "md", status, class
 });
 Avatar.displayName = "Avatar";
 //#endregion
+//#region src/components/AvatarGroup/AvatarGroup.tsx
+var AvatarGroup = (0, react.forwardRef)(function AvatarGroup({ className, avatars, max = 5, size = "md", total, label, ...props }, ref) {
+	const shown = avatars.slice(0, Math.max(0, max));
+	const overflow = (total ?? avatars.length) - shown.length;
+	const count = total ?? avatars.length;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: cx("pf-avatar-group", `pf-avatar-group--${size}`, className),
+		role: "group",
+		"aria-label": label ?? `${count} ${count === 1 ? "person" : "people"}`,
+		...props,
+		children: [shown.map((avatar, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+			size,
+			className: "pf-avatar-group__item",
+			style: { zIndex: shown.length - index },
+			...avatar
+		}, index)), overflow > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cx("pf-avatar", `pf-avatar--${size}`, "pf-avatar-group__item", "pf-avatar-group__overflow"),
+			role: "img",
+			"aria-label": `${overflow} more`,
+			style: { zIndex: 0 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "pf-avatar__fallback",
+				"aria-hidden": true,
+				children: ["+", overflow]
+			})
+		}) : null]
+	});
+});
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
 //#region src/components/Button/Button.tsx
 var Spinner = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	className: "pf-button__spinner",
@@ -709,6 +783,190 @@ var Button = (0, react.forwardRef)(({ className, variant = "primary", size = "md
 });
 Button.displayName = "Button";
 //#endregion
+//#region src/components/CommandPalette/CommandPalette.tsx
+function CommandPalette({ open, onOpenChange, items, placeholder = "Search commands…", emptyMessage = "No results found." }) {
+	const inputId = (0, react.useId)();
+	const listId = (0, react.useId)();
+	const [query, setQuery] = (0, react.useState)("");
+	const dialogRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const { isMounted, isExiting } = usePresence(open, 180);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const frame = requestAnimationFrame(() => {
+			setQuery("");
+			inputRef.current?.focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!isMounted || typeof document === "undefined") return;
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = prev;
+		};
+	}, [isMounted]);
+	useFocusTrap({
+		containerRef: dialogRef,
+		enabled: open,
+		onEscape: () => onOpenChange(false)
+	});
+	const filtered = (0, react.useMemo)(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return items;
+		return items.filter((item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q) || item.group?.toLowerCase().includes(q));
+	}, [items, query]);
+	const { activeIndex, move, setActiveIndex } = useListNavigation({
+		items: filtered,
+		isDisabled: (item) => !!item.disabled
+	});
+	(0, react.useEffect)(() => {
+		setActiveIndex(0);
+	}, [query, setActiveIndex]);
+	const selectActive = () => {
+		const item = filtered[activeIndex];
+		if (item && !item.disabled) {
+			item.onSelect();
+			onOpenChange(false);
+		}
+	};
+	const onKeyDown = (e) => {
+		if (e.key === Keys.ArrowDown) {
+			e.preventDefault();
+			move("next");
+		} else if (e.key === Keys.ArrowUp) {
+			e.preventDefault();
+			move("previous");
+		} else if (e.key === Keys.Home) {
+			e.preventDefault();
+			move("first");
+		} else if (e.key === Keys.End) {
+			e.preventDefault();
+			move("last");
+		} else if (e.key === Keys.Enter) {
+			e.preventDefault();
+			selectActive();
+		}
+	};
+	const groupedItems = (0, react.useMemo)(() => {
+		const groups = [];
+		const seen = /* @__PURE__ */ new Map();
+		filtered.forEach((item, index) => {
+			const g = item.group;
+			if (!seen.has(g)) {
+				seen.set(g, groups.length);
+				groups.push({
+					group: g,
+					items: []
+				});
+			}
+			groups[seen.get(g)].items.push({
+				item,
+				index
+			});
+		});
+		return groups;
+	}, [filtered]);
+	const activeOptionId = filtered[activeIndex] ? `${listId}-option-${activeIndex}` : void 0;
+	if (!isMounted || typeof document === "undefined") return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cx("pf-command__backdrop", isExiting && "pf-command__backdrop--exiting"),
+		onClick: () => onOpenChange(false),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: dialogRef,
+			className: cx("pf-command", isExiting && "pf-command--exiting"),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Command palette",
+			tabIndex: -1,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pf-command__search",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "magnifying-glass",
+						"aria-hidden": true,
+						className: "pf-command__search-icon"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: inputRef,
+						id: inputId,
+						type: "text",
+						className: "pf-command__input",
+						value: query,
+						placeholder,
+						autoComplete: "off",
+						spellCheck: false,
+						role: "combobox",
+						"aria-autocomplete": "list",
+						"aria-expanded": true,
+						"aria-controls": listId,
+						"aria-activedescendant": activeOptionId,
+						onChange: (e) => setQuery(e.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+						className: "pf-command__esc-hint",
+						"aria-hidden": true,
+						children: "esc"
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Commands",
+				className: "pf-command__list",
+				children: filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "pf-command__empty",
+					role: "presentation",
+					children: emptyMessage
+				}) : groupedItems.map(({ group, items: groupItems }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "presentation",
+					children: [group ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "pf-command__group-label",
+						role: "presentation",
+						children: group
+					}) : null, groupItems.map(({ item, index }) => {
+						const isActive = index === activeIndex;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							id: `${listId}-option-${index}`,
+							role: "option",
+							"aria-selected": isActive,
+							"aria-disabled": item.disabled ? true : void 0,
+							className: cx("pf-command__item", isActive && "pf-command__item--active", item.disabled && "pf-command__item--disabled"),
+							onMouseEnter: () => {
+								if (!item.disabled) setActiveIndex(index);
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => {
+								if (!item.disabled) {
+									item.onSelect();
+									onOpenChange(false);
+								}
+							},
+							children: [item.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pf-command__item-icon",
+								"aria-hidden": true,
+								children: item.icon
+							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "pf-command__item-content",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "pf-command__item-label",
+									children: item.label
+								}), item.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "pf-command__item-description",
+									children: item.description
+								}) : null]
+							})]
+						}, item.id);
+					})]
+				}, group ?? "__ungrouped"))
+			})]
+		})
+	}), document.body);
+}
+//#endregion
 //#region src/components/BadgeGroup/BadgeGroup.tsx
 var BadgeGroup = (0, react.forwardRef)(({ label, message, color = "gray", appearance = "pill", badgePosition = "leading", className, ...props }, ref) => {
 	const badge = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1145,7 +1403,7 @@ var Dropdown = (0, react.forwardRef)(({ label = "Actions", items, align = "start
 Dropdown.displayName = "Dropdown";
 //#endregion
 //#region src/components/Calendar/Calendar.tsx
-var WEEKDAY_LABELS = [
+var WEEKDAY_LABELS$1 = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -1161,22 +1419,22 @@ var MONTH_OPTIONS = Array.from({ length: 12 }, (_, month) => {
 		label: new Intl.DateTimeFormat("en-US", { month: "long" }).format(date)
 	};
 });
-var toMidday$1 = (date) => {
+var toMidday$2 = (date) => {
 	const next = new Date(date);
 	next.setHours(12, 0, 0, 0);
 	return next;
 };
-var isSameDay = (a, b) => {
+var isSameDay$1 = (a, b) => {
 	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 };
-var startOfMonth = (date) => {
+var startOfMonth$1 = (date) => {
 	return new Date(date.getFullYear(), date.getMonth(), 1, 12);
 };
-var addMonths = (date, amount) => {
+var addMonths$1 = (date, amount) => {
 	return new Date(date.getFullYear(), date.getMonth() + amount, 1, 12);
 };
 var buildCalendarDays = (monthDate) => {
-	const monthStart = startOfMonth(monthDate);
+	const monthStart = startOfMonth$1(monthDate);
 	const firstWeekday = monthStart.getDay();
 	const gridStart = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate() - firstWeekday, 12);
 	return Array.from({ length: 42 }, (_, index) => {
@@ -1198,7 +1456,7 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 		errorId
 	].filter(Boolean).join(" ") || void 0;
 	const isControlled = value !== void 0;
-	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ? toMidday$1(defaultValue) : autoSelectToday ? toMidday$1(/* @__PURE__ */ new Date()) : void 0);
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ? toMidday$2(defaultValue) : autoSelectToday ? toMidday$2(/* @__PURE__ */ new Date()) : void 0);
 	const selectedDate = isControlled ? value : internalValue;
 	const yearRange = (0, react.useMemo)(() => {
 		const fallbackStart = (/* @__PURE__ */ new Date()).getFullYear() - 50;
@@ -1217,11 +1475,11 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 		return date;
 	};
 	const [displayMonth, setDisplayMonth] = (0, react.useState)(() => {
-		return clampToYearRange(startOfMonth(selectedDate ?? /* @__PURE__ */ new Date()));
+		return clampToYearRange(startOfMonth$1(selectedDate ?? /* @__PURE__ */ new Date()));
 	});
 	(0, react.useEffect)(() => {
 		if (!selectedDate) return;
-		setDisplayMonth(clampToYearRange(startOfMonth(selectedDate)));
+		setDisplayMonth(clampToYearRange(startOfMonth$1(selectedDate)));
 	}, [
 		selectedDate,
 		yearRange.end,
@@ -1242,12 +1500,12 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 	const dayItems = (0, react.useMemo)(() => {
 		return buildCalendarDays(displayMonth);
 	}, [displayMonth]);
-	const today = (0, react.useMemo)(() => toMidday$1(/* @__PURE__ */ new Date()), []);
+	const today = (0, react.useMemo)(() => toMidday$2(/* @__PURE__ */ new Date()), []);
 	const selectDate = (nextDate) => {
 		if (disabledDates?.(nextDate)) return;
 		if (!isControlled) setInternalValue(nextDate);
 		onValueChange?.(nextDate);
-		setDisplayMonth(clampToYearRange(startOfMonth(nextDate)));
+		setDisplayMonth(clampToYearRange(startOfMonth$1(nextDate)));
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "pf-field",
@@ -1273,7 +1531,7 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 							"aria-label": "Previous month",
 							disabled: isPrevMonthDisabled,
 							onClick: () => {
-								setDisplayMonth((current) => clampToYearRange(addMonths(current, -1)));
+								setDisplayMonth((current) => clampToYearRange(addMonths$1(current, -1)));
 							},
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 								name: "square-caret-left",
@@ -1324,7 +1582,7 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 							"aria-label": "Next month",
 							disabled: isNextMonthDisabled,
 							onClick: () => {
-								setDisplayMonth((current) => clampToYearRange(addMonths(current, 1)));
+								setDisplayMonth((current) => clampToYearRange(addMonths$1(current, 1)));
 							},
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 								name: "square-caret-right",
@@ -1340,7 +1598,7 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 						role: "row",
 						style: { display: "contents" },
 						"aria-hidden": true,
-						children: WEEKDAY_LABELS.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						children: WEEKDAY_LABELS$1.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							role: "columnheader",
 							className: "pf-calendar__weekday",
 							children: day
@@ -1349,8 +1607,8 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 						role: "row",
 						style: { display: "contents" },
 						children: dayItems.slice(week * 7, (week + 1) * 7).map(({ date, inCurrentMonth }) => {
-							const isSelected = selectedDate ? isSameDay(selectedDate, date) : false;
-							const isToday = isSameDay(today, date);
+							const isSelected = selectedDate ? isSameDay$1(selectedDate, date) : false;
+							const isToday = isSameDay$1(today, date);
 							const isDisabled = Boolean(disabledDates?.(date));
 							if (!showOutsideDays && !inCurrentMonth) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "pf-calendar__day-empty",
@@ -1393,16 +1651,16 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 Calendar.displayName = "Calendar";
 //#endregion
 //#region src/components/Carousel/Carousel.tsx
-var clamp$2 = (value, min, max) => {
+var clamp$3 = (value, min, max) => {
 	return Math.min(Math.max(value, min), max);
 };
 var Carousel = (0, react.forwardRef)(function Carousel({ className, slides, initialIndex = 0, loop = true, showIndicators = true, autoPlay = false, autoPlayInterval = 5e3, onIndexChange, "aria-label": ariaLabel = "Carousel", ...props }, ref) {
 	const totalSlides = slides.length;
-	const [activeIndex, setActiveIndex] = (0, react.useState)(clamp$2(initialIndex, 0, Math.max(totalSlides - 1, 0)));
-	const resolvedActiveIndex = clamp$2(activeIndex, 0, Math.max(totalSlides - 1, 0));
+	const [activeIndex, setActiveIndex] = (0, react.useState)(clamp$3(initialIndex, 0, Math.max(totalSlides - 1, 0)));
+	const resolvedActiveIndex = clamp$3(activeIndex, 0, Math.max(totalSlides - 1, 0));
 	const goToIndex = (nextIndex) => {
 		if (totalSlides === 0) return;
-		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp$2(nextIndex, 0, totalSlides - 1);
+		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp$3(nextIndex, 0, totalSlides - 1);
 		setActiveIndex(resolvedIndex);
 		onIndexChange?.(resolvedIndex);
 	};
@@ -1649,6 +1907,183 @@ var CodeSnippet = (0, react.forwardRef)(function CodeSnippet({ className, code,
 });
 CodeSnippet.displayName = "CodeSnippet";
 //#endregion
+//#region src/components/Combobox/Combobox.tsx
+var Combobox = (0, react.forwardRef)(function Combobox({ id, options, value, defaultValue, onValueChange, label, description, error, placeholder = "Search…", emptyMessage = "No matches", name, required, className, disabled, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const fieldId = id ?? generatedId;
+	const listboxId = `${fieldId}-listbox`;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const selectedOption = options.find((option) => option.value === selectedValue);
+	const [query, setQuery] = (0, react.useState)(() => selectedOption?.label ?? "");
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const rootRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const listboxRef = (0, react.useRef)(null);
+	const inputRefs = useComposedRefs(inputRef, ref);
+	const { isMounted, isExiting } = usePresence(isOpen, 160);
+	const menuStyle = useAnchoredPosition({
+		anchorRef: rootRef,
+		floatingRef: listboxRef,
+		enabled: isOpen,
+		matchAnchorWidth: true,
+		flip: true
+	});
+	const filtered = (0, react.useMemo)(() => {
+		const q = query.trim().toLowerCase();
+		const fromSelection = selectedOption && query === selectedOption.label;
+		if (!q || fromSelection) return options;
+		return options.filter((option) => option.label.toLowerCase().includes(q));
+	}, [
+		options,
+		query,
+		selectedOption
+	]);
+	useOutsideInteraction({
+		refs: [rootRef, listboxRef],
+		enabled: isOpen,
+		onInteractOutside: () => closeAndRevert()
+	});
+	const open = () => {
+		if (disabled) return;
+		setIsOpen(true);
+		setActiveIndex(0);
+	};
+	const closeAndRevert = () => {
+		setIsOpen(false);
+		setQuery(selectedOption?.label ?? "");
+	};
+	const selectOption = (option) => {
+		if (option.disabled) return;
+		setSelectedValue(option.value);
+		setQuery(option.label);
+		setIsOpen(false);
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === Keys.ArrowDown) {
+			event.preventDefault();
+			if (!isOpen) {
+				open();
+				return;
+			}
+			setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+			return;
+		}
+		if (event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			if (isOpen) setActiveIndex((index) => Math.max(index - 1, 0));
+			return;
+		}
+		if (event.key === Keys.Enter) {
+			if (isOpen && filtered[activeIndex]) {
+				event.preventDefault();
+				selectOption(filtered[activeIndex]);
+			}
+			return;
+		}
+		if (event.key === Keys.Escape) {
+			if (isOpen) {
+				event.preventDefault();
+				closeAndRevert();
+			}
+		}
+	};
+	const activeOptionId = isOpen && filtered[activeIndex] ? `${listboxId}-option-${activeIndex}` : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pf-combobox",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cx("pf-combobox__control", error && "pf-combobox__control--invalid"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						...props,
+						id: fieldId,
+						ref: inputRefs,
+						type: "text",
+						role: "combobox",
+						className: cx("pf-combobox__input", className),
+						value: query,
+						placeholder,
+						disabled,
+						required,
+						autoComplete: "off",
+						"aria-autocomplete": "list",
+						"aria-expanded": isOpen,
+						"aria-controls": listboxId,
+						"aria-activedescendant": activeOptionId,
+						"aria-describedby": describedBy,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setActiveIndex(0);
+							if (!isOpen) setIsOpen(true);
+						},
+						onClick: open,
+						onKeyDown
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: cx("pf-combobox__icon", isOpen && "pf-combobox__icon--open"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: "chevron-down",
+							"aria-hidden": true
+						})
+					})]
+				}),
+				name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "hidden",
+					name,
+					value: selectedValue
+				}) : null,
+				isMounted && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					id: listboxId,
+					ref: listboxRef,
+					role: "listbox",
+					className: cx("pf-combobox__menu", isExiting && "pf-combobox__menu--exiting"),
+					style: menuStyle,
+					"aria-label": label,
+					children: filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						className: "pf-combobox__empty",
+						role: "presentation",
+						children: emptyMessage
+					}) : filtered.map((option, index) => {
+						const isSelected = option.value === selectedValue;
+						const isActive = index === activeIndex;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+							id: `${listboxId}-option-${index}`,
+							role: "option",
+							"aria-selected": isSelected,
+							"aria-disabled": option.disabled ? true : void 0,
+							className: cx("pf-combobox__option", isSelected && "pf-combobox__option--selected", isActive && "pf-combobox__option--active", option.disabled && "pf-combobox__option--disabled"),
+							onMouseEnter: () => {
+								if (!option.disabled) setActiveIndex(index);
+							},
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => selectOption(option),
+							children: option.label
+						}, option.value);
+					})
+				}), document.body) : null
+			]
+		})
+	});
+});
+Combobox.displayName = "Combobox";
+//#endregion
 //#region src/components/ContentDivider/ContentDivider.tsx
 var ContentDivider = (0, react.forwardRef)(({ className, label, orientation = "horizontal", inset = false, ...props }, ref) => {
 	if (orientation === "vertical") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1686,7 +2121,7 @@ var ContentDivider = (0, react.forwardRef)(({ className, label, orientation = "h
 ContentDivider.displayName = "ContentDivider";
 //#endregion
 //#region src/components/DatePicker/DatePicker.tsx
-var toMidday = (date) => {
+var toMidday$1 = (date) => {
 	const next = new Date(date);
 	next.setHours(12, 0, 0, 0);
 	return next;
@@ -1698,8 +2133,8 @@ var DatePicker = (0, react.forwardRef)(function DatePicker({ id, className, valu
 	const errorId = error ? `${pickerId}-error` : void 0;
 	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
 	const isControlled = value !== void 0;
-	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ? toMidday(defaultValue) : void 0);
-	const selectedDate = isControlled ? value ? toMidday(value) : void 0 : internalValue;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ? toMidday$1(defaultValue) : void 0);
+	const selectedDate = isControlled ? value ? toMidday$1(value) : void 0 : internalValue;
 	const disclosure = useDisclosure({ disabled });
 	const { isOpen } = disclosure;
 	const rootRef = (0, react.useRef)(null);
@@ -1727,7 +2162,7 @@ var DatePicker = (0, react.forwardRef)(function DatePicker({ id, className, valu
 		}).format(selectedDate);
 	}, [selectedDate]);
 	const selectDate = (nextDate) => {
-		const normalized = toMidday(nextDate);
+		const normalized = toMidday$1(nextDate);
 		if (!isControlled) setInternalValue(normalized);
 		onValueChange?.(normalized);
 		disclosure.close();
@@ -1807,6 +2242,372 @@ var DatePicker = (0, react.forwardRef)(function DatePicker({ id, className, valu
 });
 DatePicker.displayName = "DatePicker";
 //#endregion
+//#region src/components/DateRangePicker/DateRangePicker.tsx
+var WEEKDAY_LABELS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+var toMidday = (d) => {
+	const n = new Date(d);
+	n.setHours(12, 0, 0, 0);
+	return n;
+};
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1, 12);
+var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1, 12);
+var buildDays = (monthDate) => {
+	const ms = startOfMonth(monthDate);
+	const firstDay = ms.getDay();
+	return Array.from({ length: 42 }, (_, i) => {
+		const date = new Date(ms.getFullYear(), ms.getMonth(), ms.getDate() - firstDay + i, 12);
+		return {
+			date,
+			inCurrentMonth: date.getMonth() === monthDate.getMonth()
+		};
+	});
+};
+var formatDate = (d) => {
+	if (!d) return "";
+	return new Intl.DateTimeFormat("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	}).format(d);
+};
+function RangeCalendar({ monthDate, rangeStart, rangeEnd, hoverDate, onDayClick, onDayHover, disabledDates, showOutsideDays = true, isPrevDisabled, isNextDisabled, onPrev, onNext, hideNavDesktop = false }) {
+	const days = (0, react.useMemo)(() => buildDays(monthDate), [monthDate]);
+	const today = (0, react.useMemo)(() => toMidday(/* @__PURE__ */ new Date()), []);
+	const monthLabel = new Intl.DateTimeFormat("en-US", {
+		month: "long",
+		year: "numeric"
+	}).format(monthDate);
+	const effectiveEnd = rangeEnd ?? hoverDate;
+	const isInRange = (0, react.useCallback)((date) => {
+		if (!rangeStart || !effectiveEnd) return false;
+		return date > (rangeStart <= effectiveEnd ? rangeStart : effectiveEnd) && date < (rangeStart <= effectiveEnd ? effectiveEnd : rangeStart);
+	}, [rangeStart, effectiveEnd]);
+	const isRangeStart = (date) => !!rangeStart && isSameDay(date, rangeStart);
+	const isRangeEnd = (date) => {
+		const end = rangeEnd ?? (hoverDate && rangeStart ? hoverDate : null);
+		return !!end && isSameDay(date, end);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "pf-daterange__calendar",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cx("pf-daterange__cal-header", hideNavDesktop && "pf-daterange__cal-header--hide-nav-desktop"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "pf-daterange__nav",
+					"aria-label": "Previous month",
+					disabled: isPrevDisabled,
+					onClick: onPrev,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "chevron-left",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pf-daterange__cal-title",
+					children: monthLabel
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "pf-daterange__nav",
+					"aria-label": "Next month",
+					disabled: isNextDisabled,
+					onClick: onNext,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "chevron-right",
+						"aria-hidden": true
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pf-daterange__grid",
+			role: "grid",
+			"aria-label": monthLabel,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "row",
+				style: { display: "contents" },
+				"aria-hidden": true,
+				children: WEEKDAY_LABELS.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					role: "columnheader",
+					className: "pf-daterange__weekday",
+					children: d
+				}, d))
+			}), Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "row",
+				style: { display: "contents" },
+				children: days.slice(week * 7, (week + 1) * 7).map(({ date, inCurrentMonth }) => {
+					const isToday = isSameDay(today, date);
+					const isStart = isRangeStart(date);
+					const isEnd = isRangeEnd(date);
+					const inRng = isInRange(date);
+					const isDisabled = Boolean(disabledDates?.(date));
+					if (!showOutsideDays && !inCurrentMonth) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "pf-daterange__day-empty",
+						"aria-hidden": true
+					}, date.toISOString());
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						role: "gridcell",
+						className: cx("pf-daterange__day", !inCurrentMonth && "pf-daterange__day--outside", isToday && "pf-daterange__day--today", (isStart || isEnd) && "pf-daterange__day--selected", isStart && "pf-daterange__day--range-start", isEnd && "pf-daterange__day--range-end", inRng && "pf-daterange__day--in-range"),
+						"aria-label": new Intl.DateTimeFormat("en-US", {
+							month: "long",
+							day: "numeric",
+							year: "numeric"
+						}).format(date),
+						"aria-selected": isStart || isEnd || inRng,
+						"aria-current": isToday ? "date" : void 0,
+						disabled: isDisabled,
+						onClick: () => onDayClick(date),
+						onMouseEnter: () => onDayHover(date),
+						onMouseLeave: () => onDayHover(null),
+						children: date.getDate()
+					}, date.toISOString());
+				})
+			}, week))]
+		})]
+	});
+}
+var DateRangePicker = (0, react.forwardRef)(function DateRangePicker({ id, className, value, defaultValue, onValueChange, label, description, error, startPlaceholder = "Start date", endPlaceholder = "End date", required, disabled, disabledDates, showOutsideDays = true, startYear, endYear, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const pickerId = id ?? generatedId;
+	const descriptionId = description ? `${pickerId}-description` : void 0;
+	const errorId = error ? `${pickerId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const isControlled = value !== void 0;
+	const [internalRange, setInternalRange] = (0, react.useState)(defaultValue ?? {
+		start: null,
+		end: null
+	});
+	const range = isControlled ? value : internalRange;
+	const setRange = (next) => {
+		if (!isControlled) setInternalRange(next);
+		onValueChange?.(next);
+	};
+	const [selecting, setSelecting] = (0, react.useState)(null);
+	const [hoverDate, setHoverDate] = (0, react.useState)(null);
+	const yearRange = (0, react.useMemo)(() => {
+		const fallbackStart = (/* @__PURE__ */ new Date()).getFullYear() - 50;
+		const fallbackEnd = (/* @__PURE__ */ new Date()).getFullYear() + 50;
+		return {
+			start: startYear ?? fallbackStart,
+			end: endYear ?? fallbackEnd
+		};
+	}, [startYear, endYear]);
+	const clampMonth = (d) => {
+		const y = d.getFullYear();
+		if (y < yearRange.start) return new Date(yearRange.start, 0, 1, 12);
+		if (y > yearRange.end) return new Date(yearRange.end, 11, 1, 12);
+		return d;
+	};
+	const [leftMonth, setLeftMonth] = (0, react.useState)(() => clampMonth(startOfMonth(range.start ?? /* @__PURE__ */ new Date())));
+	const rightMonth = addMonths(leftMonth, 1);
+	const disclosure = useDisclosure({ disabled });
+	const { isOpen } = disclosure;
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const popoverRef = (0, react.useRef)(null);
+	const popoverStyle = useAnchoredPosition({
+		anchorRef: rootRef,
+		floatingRef: popoverRef,
+		enabled: isOpen,
+		flip: true,
+		matchAnchorWidth: false
+	});
+	useOutsideInteraction({
+		refs: [rootRef, popoverRef],
+		enabled: isOpen,
+		eventName: "mousedown",
+		onInteractOutside: () => {
+			setSelecting(null);
+			setHoverDate(null);
+			disclosure.close();
+		}
+	});
+	const handleDayClick = (date) => {
+		if (selecting === null) {
+			setRange({
+				start: toMidday(date),
+				end: null
+			});
+			setSelecting("start");
+		} else {
+			const start = range.start;
+			const end = toMidday(date);
+			if (isSameDay(start, end)) setRange({
+				start: toMidday(date),
+				end: null
+			});
+			else if (end < start) setRange({
+				start: end,
+				end: start
+			});
+			else setRange({
+				start,
+				end
+			});
+			setSelecting(null);
+			setHoverDate(null);
+			disclosure.close();
+		}
+	};
+	const clearRange = () => {
+		setRange({
+			start: null,
+			end: null
+		});
+		setSelecting(null);
+		setHoverDate(null);
+	};
+	const isPrevDisabled = leftMonth.getFullYear() === yearRange.start && leftMonth.getMonth() === 0;
+	const isNextDisabled = rightMonth.getFullYear() === yearRange.end && rightMonth.getMonth() === 11;
+	const hasValue = range.start !== null || range.end !== null;
+	const displayStart = formatDate(range.start);
+	const displayEnd = formatDate(range.end);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
+		labelFor: `${pickerId}-trigger`,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref,
+			...props,
+			id: pickerId,
+			className: cx("pf-daterange", className),
+			"aria-describedby": describedBy,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pf-daterange__control-row",
+				ref: rootRef,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					ref: triggerRef,
+					id: `${pickerId}-trigger`,
+					type: "button",
+					className: cx("pf-daterange__trigger", error && "pf-daterange__trigger--invalid"),
+					disabled,
+					"aria-invalid": error ? true : void 0,
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen,
+					"aria-required": required || void 0,
+					onClick: () => {
+						if (!isOpen) setSelecting(null);
+						disclosure.toggle();
+					},
+					onKeyDown: (e) => {
+						if (e.key === Keys.Escape) disclosure.close();
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "pf-daterange__value",
+						children: displayStart ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: displayStart }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "pf-daterange__separator",
+								"aria-hidden": true,
+								children: "–"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: cx(!displayEnd && "pf-daterange__value--placeholder"),
+								children: displayEnd || endPlaceholder
+							})
+						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "pf-daterange__value--placeholder",
+							children: [
+								startPlaceholder,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "pf-daterange__separator",
+									"aria-hidden": true,
+									children: [
+										" ",
+										"–",
+										" "
+									]
+								}),
+								endPlaceholder
+							]
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "calendar",
+						"aria-hidden": true
+					})]
+				}), hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "pf-date-picker__icon-button",
+					"aria-label": "Clear date range",
+					disabled,
+					onClick: clearRange,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "circle-xmark",
+						"aria-hidden": true
+					})
+				}) : null]
+			}), isOpen && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: popoverRef,
+				className: "pf-daterange__popover",
+				role: "dialog",
+				"aria-label": "Date range picker",
+				style: popoverStyle,
+				onKeyDown: (e) => {
+					if (e.key === Keys.Escape) {
+						setSelecting(null);
+						setHoverDate(null);
+						disclosure.close();
+					}
+				},
+				children: [selecting === "start" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "pf-daterange__hint",
+					"aria-live": "polite",
+					children: "Select an end date"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "pf-daterange__hint",
+					"aria-live": "polite",
+					children: "Select a start date"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-daterange__months",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeCalendar, {
+						monthDate: leftMonth,
+						rangeStart: range.start,
+						rangeEnd: range.end,
+						hoverDate: selecting === "start" ? hoverDate : null,
+						onDayClick: handleDayClick,
+						onDayHover: (d) => selecting === "start" && setHoverDate(d),
+						disabledDates,
+						showOutsideDays,
+						isPrevDisabled,
+						isNextDisabled: false,
+						onPrev: () => setLeftMonth((m) => clampMonth(addMonths(m, -1))),
+						onNext: () => setLeftMonth((m) => clampMonth(addMonths(m, 1)))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeCalendar, {
+						monthDate: rightMonth,
+						rangeStart: range.start,
+						rangeEnd: range.end,
+						hoverDate: selecting === "start" ? hoverDate : null,
+						onDayClick: handleDayClick,
+						onDayHover: (d) => selecting === "start" && setHoverDate(d),
+						disabledDates,
+						showOutsideDays,
+						isPrevDisabled: false,
+						isNextDisabled,
+						onPrev: () => setLeftMonth((m) => clampMonth(addMonths(m, -1))),
+						onNext: () => setLeftMonth((m) => clampMonth(addMonths(m, 1))),
+						hideNavDesktop: true
+					})]
+				})]
+			}), document.body) : null]
+		})
+	});
+});
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
 //#region src/components/EmptyState/EmptyState.tsx
 var EmptyState = (0, react.forwardRef)(function EmptyState({ className, heading, description, icon, iconName, action, size = "md", ...props }, ref) {
 	const resolvedIcon = icon ?? (iconName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
@@ -2127,6 +2928,18 @@ var InlineCTA = (0, react.forwardRef)(function InlineCTA({ className, heading, d
 });
 InlineCTA.displayName = "InlineCTA";
 //#endregion
+//#region src/components/Kbd/Kbd.tsx
+var Kbd = (0, react.forwardRef)(function Kbd({ className, keys, size = "md", separator = "+", children, ...props }, ref) {
+	const content = keys && keys.length > 0 ? keys.join(` ${separator} `) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+		ref,
+		className: cx("pf-kbd", `pf-kbd--${size}`, className),
+		...props,
+		children: content
+	});
+});
+Kbd.displayName = "Kbd";
+//#endregion
 //#region src/components/GaugeChart/GaugeChart.tsx
 var GaugeChart = (0, react.forwardRef)(function GaugeChart({ className, value, max = 100, centerLabel, subLabel, size = 200, strokeWidth = 16, color, style, ...props }, ref) {
 	const progress = max > 0 ? Math.min(Math.max(value, 0), max) / max : 0;
@@ -3081,6 +3894,161 @@ var Notification = (0, react.forwardRef)(({ className, variant = "info", heading
 });
 Notification.displayName = "Notification";
 //#endregion
+//#region src/components/NumberInput/NumberInput.tsx
+var decimalsOf = (n) => {
+	const str = String(n);
+	const dot = str.indexOf(".");
+	return dot === -1 ? 0 : str.length - dot - 1;
+};
+var clamp$2 = (n, min, max) => Math.min(Math.max(n, min), max);
+var NumberInput = (0, react.forwardRef)(function NumberInput({ id, value, defaultValue, onValueChange, min = -Infinity, max = Infinity, step = 1, label, description, error, formatOptions, locale, decrementLabel = "Decrease", incrementLabel = "Increase", name, required, disabled, className, placeholder, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const fieldId = id ?? generatedId;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [rawValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? null,
+		onChange: onValueChange
+	});
+	const currentValue = rawValue ?? null;
+	const inputRefs = useComposedRefs((0, react.useRef)(null), ref);
+	const stepDecimals = decimalsOf(step);
+	const round = (n) => {
+		const factor = 10 ** stepDecimals;
+		return Math.round(n * factor) / factor;
+	};
+	const formatValue = (n) => {
+		if (n === null) return "";
+		if (formatOptions) return new Intl.NumberFormat(locale, formatOptions).format(n);
+		return String(n);
+	};
+	const [focused, setFocused] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(() => formatValue(currentValue));
+	const displayValue = focused ? draft : formatValue(currentValue);
+	const commit = (next) => {
+		if (next === null) {
+			setCurrentValue(null);
+			setDraft("");
+			return;
+		}
+		const clamped = round(clamp$2(next, min, max));
+		setCurrentValue(clamped);
+		setDraft(focused ? String(clamped) : formatValue(clamped));
+	};
+	const stepBy = (direction) => {
+		if (disabled) return;
+		commit((currentValue ?? (Number.isFinite(min) ? min : Number.isFinite(max) ? max : 0)) + direction * step);
+	};
+	const atMin = currentValue !== null && currentValue <= min;
+	const atMax = currentValue !== null && currentValue >= max;
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			stepBy(1);
+		} else if (event.key === Keys.ArrowDown) {
+			event.preventDefault();
+			stepBy(-1);
+		} else if (event.key === Keys.Home && Number.isFinite(min)) {
+			event.preventDefault();
+			commit(min);
+		} else if (event.key === Keys.End && Number.isFinite(max)) {
+			event.preventDefault();
+			commit(max);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cx("pf-numberinput", error && "pf-numberinput--invalid"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "pf-numberinput__step pf-numberinput__step--decrement",
+					"aria-label": decrementLabel,
+					disabled: disabled || atMin,
+					tabIndex: -1,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => stepBy(-1),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "minus",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					...props,
+					id: fieldId,
+					ref: inputRefs,
+					type: "text",
+					inputMode: "decimal",
+					role: "spinbutton",
+					className: cx("pf-numberinput__input", className),
+					value: displayValue,
+					placeholder,
+					disabled,
+					required,
+					autoComplete: "off",
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": describedBy,
+					"aria-valuenow": currentValue ?? void 0,
+					"aria-valuemin": Number.isFinite(min) ? min : void 0,
+					"aria-valuemax": Number.isFinite(max) ? max : void 0,
+					onFocus: () => {
+						setFocused(true);
+						setDraft(currentValue === null ? "" : String(currentValue));
+					},
+					onChange: (event) => {
+						const raw = event.target.value;
+						setDraft(raw);
+						if (raw.trim() === "") {
+							setCurrentValue(null);
+							return;
+						}
+						const parsed = Number(raw);
+						if (!Number.isNaN(parsed)) setCurrentValue(round(clamp$2(parsed, min, max)));
+					},
+					onBlur: () => {
+						setFocused(false);
+						if (draft.trim() === "") commit(null);
+						else {
+							const parsed = Number(draft);
+							commit(Number.isNaN(parsed) ? currentValue : parsed);
+						}
+					},
+					onKeyDown
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "pf-numberinput__step pf-numberinput__step--increment",
+					"aria-label": incrementLabel,
+					disabled: disabled || atMax,
+					tabIndex: -1,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => stepBy(1),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "plus",
+						"aria-hidden": true
+					})
+				}),
+				name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "hidden",
+					name,
+					value: currentValue ?? ""
+				}) : null
+			]
+		})
+	});
+});
+NumberInput.displayName = "NumberInput";
+//#endregion
 //#region src/components/PageHeader/PageHeader.tsx
 var PageHeaderMeta = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
@@ -3295,6 +4263,70 @@ var PieChart = (0, react.forwardRef)(function PieChart({ className, data, size =
 });
 PieChart.displayName = "PieChart";
 //#endregion
+//#region src/components/Popover/Popover.tsx
+function Popover({ trigger, children, open, defaultOpen, onOpenChange, align = "start", label, closeOnOutsideClick = true, className }) {
+	const [isOpen = false, setOpen] = useControllableState({
+		value: open,
+		defaultValue: defaultOpen ?? false,
+		onChange: onOpenChange
+	});
+	const contentId = (0, react.useId)();
+	const triggerRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	const { isMounted, isExiting } = usePresence(isOpen, 160);
+	const style = useAnchoredPosition({
+		anchorRef: triggerRef,
+		floatingRef: contentRef,
+		enabled: isOpen,
+		align,
+		matchAnchorWidth: false,
+		flip: true
+	});
+	useOutsideInteraction({
+		refs: [triggerRef, contentRef],
+		enabled: isOpen,
+		onInteractOutside: () => {
+			if (closeOnOutsideClick) setOpen(false);
+		}
+	});
+	const wasOpen = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (isOpen) {
+			wasOpen.current = true;
+			contentRef.current?.focus();
+		} else if (wasOpen.current) {
+			wasOpen.current = false;
+			triggerRef.current?.focus();
+		}
+	}, [isOpen]);
+	const triggerProps = trigger.props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.cloneElement)(trigger, {
+		ref: useComposedRefs(triggerRef, trigger.ref ?? triggerProps.ref),
+		"aria-haspopup": "dialog",
+		"aria-expanded": isOpen,
+		onClick: (event) => {
+			triggerProps.onClick?.(event);
+			setOpen(!isOpen);
+		}
+	}), isMounted && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: contentRef,
+		id: contentId,
+		role: "dialog",
+		"aria-label": label,
+		tabIndex: -1,
+		className: cx("pf-popover", isExiting && "pf-popover--exiting", className),
+		style,
+		onKeyDown: (event) => {
+			if (event.key === Keys.Escape) {
+				event.stopPropagation();
+				setOpen(false);
+			}
+		},
+		children
+	}), document.body) : null] });
+}
+Popover.displayName = "Popover";
+//#endregion
 //#region src/components/ProgressIndicators/ProgressIndicators.tsx
 var clampPercent = (value, max) => {
 	if (max <= 0) return 0;
@@ -4812,6 +5844,130 @@ var Textarea = (0, react.forwardRef)(({ id, label, description, error, className
 });
 Textarea.displayName = "Textarea";
 //#endregion
+//#region src/components/Toast/Toast.tsx
+var _emit = null;
+function ToastItem({ entry, onRemove }) {
+	const { id, shouldExit } = entry;
+	const handleRemove = (0, react.useCallback)(() => onRemove(id), [onRemove, id]);
+	(0, react.useEffect)(() => {
+		if (!shouldExit) return;
+		const t = setTimeout(handleRemove, 270);
+		return () => clearTimeout(t);
+	}, [shouldExit, handleRemove]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notification, {
+		variant: entry.variant,
+		heading: entry.heading,
+		description: entry.description,
+		action: entry.action,
+		dismissible: entry.dismissible,
+		onDismiss: handleRemove,
+		className: shouldExit ? "pf-notification--exiting" : void 0,
+		onAnimationEnd: (e) => {
+			if (shouldExit && e.currentTarget === e.target) handleRemove();
+		}
+	});
+}
+function ToastProvider({ children, placement = "top-right", defaultDuration = 4e3 }) {
+	const [entries, setEntries] = (0, react.useState)([]);
+	const timers = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const remove = (0, react.useCallback)((id) => {
+		timers.current.delete(id);
+		setEntries((prev) => prev.filter((e) => e.id !== id));
+	}, []);
+	const signalExit = (0, react.useCallback)((id) => {
+		timers.current.delete(id);
+		setEntries((prev) => prev.map((e) => e.id === id ? {
+			...e,
+			shouldExit: true
+		} : e));
+	}, []);
+	const toast = (0, react.useCallback)((options) => {
+		const id = `t-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+		const duration = options.duration !== void 0 ? options.duration : defaultDuration;
+		setEntries((prev) => [{
+			...options,
+			id,
+			shouldExit: false,
+			dismissible: options.dismissible ?? true
+		}, ...prev]);
+		if (typeof duration === "number" && duration > 0) {
+			const t = setTimeout(() => signalExit(id), duration);
+			timers.current.set(id, t);
+		}
+		return id;
+	}, [defaultDuration, signalExit]);
+	const dismiss = (0, react.useCallback)((id) => {
+		const t = timers.current.get(id);
+		if (t) clearTimeout(t);
+		signalExit(id);
+	}, [signalExit]);
+	const dismissAll = (0, react.useCallback)(() => {
+		timers.current.forEach(clearTimeout);
+		timers.current.clear();
+		setEntries((prev) => prev.map((e) => ({
+			...e,
+			shouldExit: true
+		})));
+	}, []);
+	(0, react.useEffect)(() => {
+		_emit = toast;
+		return () => {
+			if (_emit === toast) _emit = null;
+		};
+	}, [toast]);
+	(0, react.useEffect)(() => {
+		const map = timers.current;
+		return () => map.forEach(clearTimeout);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastContext.Provider, {
+		value: {
+			toast,
+			dismiss,
+			dismissAll
+		},
+		children: [children, typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotificationStack, {
+			placement,
+			children: entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastItem, {
+				entry,
+				onRemove: remove
+			}, entry.id))
+		}), document.body) : null]
+	});
+}
+var ToastContext = (0, react.createContext)(null);
+function useToast() {
+	const ctx = (0, react.useContext)(ToastContext);
+	if (!ctx) throw new Error("useToast must be used inside <ToastProvider>.");
+	return ctx;
+}
+/**
+* Fire a toast imperatively from anywhere — no hook needed.
+* Requires a `<ToastProvider>` to be mounted somewhere in the tree.
+*/
+function toast(options) {
+	if (!_emit) {
+		console.warn("[pitchfork-ui] toast() called before <ToastProvider> is mounted.");
+		return "";
+	}
+	return _emit(options);
+}
+toast.info = (opts) => toast({
+	...opts,
+	variant: "info"
+});
+toast.success = (opts) => toast({
+	...opts,
+	variant: "success"
+});
+toast.warning = (opts) => toast({
+	...opts,
+	variant: "warning"
+});
+toast.danger = (opts) => toast({
+	...opts,
+	variant: "danger"
+});
+//#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 var GAP = 10;
 var VIEWPORT_MARGIN = 8;
@@ -5235,6 +6391,7 @@ exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AreaChart = AreaChart;
 exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BadgeGroup = BadgeGroup;
 exports.BarChart = BarChart;
@@ -5249,9 +6406,12 @@ exports.CardHeader = CardHeader;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.CodeSnippet = CodeSnippet;
+exports.Combobox = Combobox;
+exports.CommandPalette = CommandPalette;
 exports.ContentDivider = ContentDivider;
 exports.CreditCard = CreditCard;
 exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
 exports.Dropdown = Dropdown;
 exports.EmptyState = EmptyState;
 exports.FileUploader = FileUploader;
@@ -5261,6 +6421,7 @@ exports.Heatmap = Heatmap;
 exports.Icon = Icon;
 exports.InlineCTA = InlineCTA;
 exports.Input = Input;
+exports.Kbd = Kbd;
 exports.Keys = Keys;
 exports.LineChart = LineChart;
 exports.LoadingDots = LoadingDots;
@@ -5275,10 +6436,12 @@ exports.ModalHeader = ModalHeader;
 exports.MultiSelect = MultiSelect;
 exports.Notification = Notification;
 exports.NotificationStack = NotificationStack;
+exports.NumberInput = NumberInput;
 exports.PageHeader = PageHeader;
 exports.PageHeaderMeta = PageHeaderMeta;
 exports.Pagination = Pagination;
 exports.PieChart = PieChart;
+exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;
 exports.ProgressSteps = ProgressSteps;
@@ -5300,6 +6463,7 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Textarea = Textarea;
+exports.ToastProvider = ToastProvider;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
 exports.UtilityButton = UtilityButton;
@@ -5309,6 +6473,7 @@ exports.getAvailableIconNames = getAvailableIconNames;
 exports.getCustomIconNames = getCustomIconNames;
 exports.getFocusableElements = getFocusableElements;
 exports.isActivationKey = isActivationKey;
+exports.toast = toast;
 exports.useAnchoredPosition = useAnchoredPosition;
 exports.useComposedRefs = useComposedRefs;
 exports.useControllableState = useControllableState;
@@ -5318,3 +6483,4 @@ exports.useFocusTrap = useFocusTrap;
 exports.useListNavigation = useListNavigation;
 exports.useOutsideInteraction = useOutsideInteraction;
 exports.usePresence = usePresence;
+exports.useToast = useToast;