@pitchfork-ui/react 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -449,6 +449,23 @@ var customIcons = {
 		"aria-hidden": "true",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })]
 	}),
+	clock: /* @__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: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 7v5l3 2" })]
+	}),
 	"magnifying-glass": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		width: "1em",
 		height: "1em",
@@ -968,6 +985,149 @@ function CommandPalette({ open, onOpenChange, items, placeholder = "Search comma
 	}), document.body);
 }
 //#endregion
+//#region src/components/ContextMenu/ContextMenu.tsx
+var isSeparator = (entry) => entry.separator === true;
+var VIEWPORT_PADDING = 8;
+var ContextMenu = (0, react.forwardRef)(function ContextMenu({ className, items, disabled = false, onOpenChange, children, onContextMenu, ...props }, ref) {
+	const menuId = (0, react.useId)();
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [point, setPoint] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const [coords, setCoords] = (0, react.useState)(null);
+	const rootRefs = useComposedRefs((0, react.useRef)(null), ref);
+	const menuRef = (0, react.useRef)(null);
+	const { isMounted, isExiting } = usePresence(isOpen, 140);
+	const actionable = items.filter((e) => !isSeparator(e));
+	const { activeIndex, move, setActiveIndex } = useListNavigation({
+		items: actionable,
+		isDisabled: (item) => Boolean(item.disabled)
+	});
+	const setOpen = (open) => {
+		setIsOpen(open);
+		onOpenChange?.(open);
+	};
+	useOutsideInteraction({
+		refs: [menuRef],
+		enabled: isOpen,
+		onInteractOutside: () => setOpen(false)
+	});
+	(0, react.useLayoutEffect)(() => {
+		if (!isMounted || !menuRef.current) return;
+		const rect = menuRef.current.getBoundingClientRect();
+		const maxLeft = window.innerWidth - rect.width - VIEWPORT_PADDING;
+		const maxTop = window.innerHeight - rect.height - VIEWPORT_PADDING;
+		setCoords({
+			left: Math.max(VIEWPORT_PADDING, Math.min(point.x, maxLeft)),
+			top: Math.max(VIEWPORT_PADDING, Math.min(point.y, maxTop))
+		});
+	}, [
+		isMounted,
+		point.x,
+		point.y
+	]);
+	const handleContextMenu = (event) => {
+		onContextMenu?.(event);
+		if (disabled || event.defaultPrevented) return;
+		event.preventDefault();
+		setPoint({
+			x: event.clientX,
+			y: event.clientY
+		});
+		setCoords(null);
+		setActiveIndex(actionable.findIndex((item) => !item.disabled));
+		setOpen(true);
+	};
+	const select = (item) => {
+		if (item.disabled) return;
+		item.onSelect?.();
+		setOpen(false);
+	};
+	const onMenuKeyDown = (event) => {
+		if (event.key === Keys.Escape) {
+			event.preventDefault();
+			setOpen(false);
+		} else if (event.key === Keys.ArrowDown) {
+			event.preventDefault();
+			move("next");
+		} else if (event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			move("previous");
+		} else if (event.key === Keys.Home) {
+			event.preventDefault();
+			move("first");
+		} else if (event.key === Keys.End) {
+			event.preventDefault();
+			move("last");
+		} else if (event.key === Keys.Enter || event.key === Keys.Space) {
+			event.preventDefault();
+			const item = actionable[activeIndex];
+			if (item) select(item);
+		}
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (isMounted && coords) menuRef.current?.focus();
+	}, [isMounted, coords]);
+	let actionableIndex = -1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRefs,
+		className: cx("pf-context-menu", className),
+		onContextMenu: handleContextMenu,
+		...props,
+		children: [children, isMounted && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: menuId,
+			ref: menuRef,
+			role: "menu",
+			"aria-label": "Context menu",
+			tabIndex: -1,
+			className: cx("pf-context-menu__menu", isExiting && "pf-context-menu__menu--exiting"),
+			style: {
+				position: "fixed",
+				left: coords?.left ?? point.x,
+				top: coords?.top ?? point.y,
+				visibility: coords ? "visible" : "hidden"
+			},
+			onKeyDown: onMenuKeyDown,
+			children: items.map((entry, index) => {
+				if (isSeparator(entry)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "separator",
+					className: "pf-context-menu__separator"
+				}, `sep-${index}`);
+				actionableIndex += 1;
+				const itemIndex = actionableIndex;
+				const isActive = itemIndex === activeIndex;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "menuitem",
+					disabled: entry.disabled,
+					className: cx("pf-context-menu__item", isActive && "pf-context-menu__item--active", entry.destructive && "pf-context-menu__item--destructive"),
+					onMouseEnter: () => {
+						if (!entry.disabled) setActiveIndex(itemIndex);
+					},
+					onClick: () => select(entry),
+					children: [
+						entry.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-context-menu__item-icon",
+							"aria-hidden": true,
+							children: entry.icon
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-context-menu__item-label",
+							children: entry.label
+						}),
+						entry.shortcut ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+							className: "pf-context-menu__item-shortcut",
+							children: entry.shortcut
+						}) : null
+					]
+				}, entry.id ?? `${entry.label}-${index}`);
+			})
+		}), document.body) : null]
+	});
+});
+ContextMenu.displayName = "ContextMenu";
+//#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", {
@@ -1652,16 +1812,16 @@ var Calendar = (0, react.forwardRef)(function Calendar({ className, value, defau
 Calendar.displayName = "Calendar";
 //#endregion
 //#region src/components/Carousel/Carousel.tsx
-var clamp$3 = (value, min, max) => {
+var clamp$4 = (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$3(initialIndex, 0, Math.max(totalSlides - 1, 0)));
-	const resolvedActiveIndex = clamp$3(activeIndex, 0, Math.max(totalSlides - 1, 0));
+	const [activeIndex, setActiveIndex] = (0, react.useState)(clamp$4(initialIndex, 0, Math.max(totalSlides - 1, 0)));
+	const resolvedActiveIndex = clamp$4(activeIndex, 0, Math.max(totalSlides - 1, 0));
 	const goToIndex = (nextIndex) => {
 		if (totalSlides === 0) return;
-		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp$3(nextIndex, 0, totalSlides - 1);
+		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp$4(nextIndex, 0, totalSlides - 1);
 		setActiveIndex(resolvedIndex);
 		onIndexChange?.(resolvedIndex);
 	};
@@ -1908,6 +2068,62 @@ var CodeSnippet = (0, react.forwardRef)(function CodeSnippet({ className, code,
 });
 CodeSnippet.displayName = "CodeSnippet";
 //#endregion
+//#region src/components/Collapsible/Collapsible.tsx
+var Collapsible = (0, react.forwardRef)(function Collapsible({ className, trigger, open, defaultOpen, onOpenChange, disabled = false, showChevron = true, children, ...props }, ref) {
+	const baseId = (0, react.useId)();
+	const triggerId = `${baseId}-trigger`;
+	const contentId = `${baseId}-content`;
+	const disclosure = useDisclosure({
+		open,
+		defaultOpen,
+		onOpenChange,
+		disabled
+	});
+	const isOpen = disclosure.isOpen ?? false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: cx("pf-collapsible", isOpen && "pf-collapsible--open", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			id: triggerId,
+			type: "button",
+			className: "pf-collapsible__trigger",
+			disabled,
+			"aria-expanded": isOpen,
+			"aria-controls": contentId,
+			onClick: () => disclosure.toggle(),
+			onKeyDown: (event) => {
+				if (event.key === Keys.Escape && isOpen) disclosure.close();
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "pf-collapsible__label",
+				children: trigger
+			}), showChevron ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "pf-collapsible__icon",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "chevron-down",
+					"aria-hidden": true
+				})
+			}) : null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": triggerId,
+			className: cx("pf-collapsible__panel", isOpen && "pf-collapsible__panel--open"),
+			...!isOpen ? { inert: true } : {},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pf-collapsible__content",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pf-collapsible__content-inner",
+					children
+				})
+			})
+		})]
+	});
+});
+Collapsible.displayName = "Collapsible";
+//#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)();
@@ -3901,7 +4117,7 @@ var decimalsOf = (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 clamp$3 = (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;
@@ -3934,7 +4150,7 @@ var NumberInput = (0, react.forwardRef)(function NumberInput({ id, value, defaul
 			setDraft("");
 			return;
 		}
-		const clamped = round(clamp$2(next, min, max));
+		const clamped = round(clamp$3(next, min, max));
 		setCurrentValue(clamped);
 		setDraft(focused ? String(clamped) : formatValue(clamped));
 	};
@@ -4014,7 +4230,7 @@ var NumberInput = (0, react.forwardRef)(function NumberInput({ id, value, defaul
 							return;
 						}
 						const parsed = Number(raw);
-						if (!Number.isNaN(parsed)) setCurrentValue(round(clamp$2(parsed, min, max)));
+						if (!Number.isNaN(parsed)) setCurrentValue(round(clamp$3(parsed, min, max)));
 					},
 					onBlur: () => {
 						setFocused(false);
@@ -4711,6 +4927,98 @@ var RatingBadge = (0, react.forwardRef)(function RatingBadge({ value, max = 5, r
 });
 RatingBadge.displayName = "RatingBadge";
 //#endregion
+//#region src/components/Resizable/Resizable.tsx
+var clamp$2 = (n, min, max) => Math.min(Math.max(n, min), max);
+var Resizable = (0, react.forwardRef)(function Resizable({ className, orientation = "horizontal", size, defaultSize = 50, onSizeChange, min = 10, max = 90, step = 2, handleLabel = "Resize panels", children, ...props }, ref) {
+	const handleId = (0, react.useId)();
+	const containerRef = (0, react.useRef)(null);
+	const containerRefs = useComposedRefs(containerRef, ref);
+	const draggingRef = (0, react.useRef)(false);
+	const [current, setCurrent] = useControllableState({
+		value: size,
+		defaultValue: defaultSize,
+		onChange: onSizeChange
+	});
+	const value = clamp$2(current ?? defaultSize, min, max);
+	const isHorizontal = orientation === "horizontal";
+	const panels = react.Children.toArray(children);
+	const first = panels[0] ?? null;
+	const second = panels[1] ?? null;
+	const setFromPointer = (clientX, clientY) => {
+		const el = containerRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const pct = isHorizontal ? (clientX - rect.left) / rect.width * 100 : (clientY - rect.top) / rect.height * 100;
+		setCurrent(clamp$2(Math.round(pct), min, max));
+	};
+	const onPointerDown = (event) => {
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		draggingRef.current = true;
+	};
+	const onPointerMove = (event) => {
+		if (!draggingRef.current) return;
+		setFromPointer(event.clientX, event.clientY);
+	};
+	const onPointerUp = (event) => {
+		draggingRef.current = false;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		const decKey = isHorizontal ? Keys.ArrowLeft : Keys.ArrowUp;
+		const incKey = isHorizontal ? Keys.ArrowRight : Keys.ArrowDown;
+		if (event.key === decKey) {
+			event.preventDefault();
+			setCurrent(clamp$2(value - step, min, max));
+		} else if (event.key === incKey) {
+			event.preventDefault();
+			setCurrent(clamp$2(value + step, min, max));
+		} else if (event.key === Keys.Home) {
+			event.preventDefault();
+			setCurrent(min);
+		} else if (event.key === Keys.End) {
+			event.preventDefault();
+			setCurrent(max);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRefs,
+		className: cx("pf-resizable", `pf-resizable--${orientation}`, className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pf-resizable__panel",
+				style: { flexBasis: `${value}%` },
+				children: first
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: handleId,
+				role: "separator",
+				tabIndex: 0,
+				"aria-orientation": isHorizontal ? "vertical" : "horizontal",
+				"aria-label": handleLabel,
+				"aria-valuenow": value,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				className: "pf-resizable__handle",
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onKeyDown,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pf-resizable__grip",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pf-resizable__panel pf-resizable__panel--fill",
+				children: second
+			})
+		]
+	});
+});
+Resizable.displayName = "Resizable";
+//#endregion
 //#region src/components/RichTextEditor/RichTextEditor.tsx
 var stripOuterPTags = (html) => {
 	if (!html) return "";
@@ -4871,6 +5179,18 @@ var RichTextEditor = (0, react.forwardRef)(({ id, label, description, error, val
 });
 RichTextEditor.displayName = "RichTextEditor";
 //#endregion
+//#region src/components/ScrollArea/ScrollArea.tsx
+var ScrollArea = (0, react.forwardRef)(function ScrollArea({ className, orientation = "vertical", focusable = true, tabIndex, children, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cx("pf-scroll-area", `pf-scroll-area--${orientation}`, className),
+		tabIndex: tabIndex ?? (focusable ? 0 : void 0),
+		...props,
+		children
+	});
+});
+ScrollArea.displayName = "ScrollArea";
+//#endregion
 //#region src/components/SectionFooter/SectionFooter.tsx
 var SectionFooter = (0, react.forwardRef)(function SectionFooter({ className, heading, description, actions, divider = true, align = "between", children, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
@@ -5592,6 +5912,111 @@ var Tag = (0, react.forwardRef)(({ className, variant = "neutral", dismissible =
 }));
 Tag.displayName = "Tag";
 //#endregion
+//#region src/components/TagInput/TagInput.tsx
+var TagInput = (0, react.forwardRef)(function TagInput({ id, value, defaultValue, onValueChange, label, description, error, placeholder = "Add a tag…", max, allowDuplicates = false, delimiters = [Keys.Enter, ","], validate, tagVariant = "neutral", name, required, disabled, className, "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 [tags, setTags] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
+	});
+	const currentTags = tags ?? [];
+	const [draft, setDraft] = (0, react.useState)("");
+	const inputRef = (0, react.useRef)(null);
+	const inputRefs = useComposedRefs(inputRef, ref);
+	const atMax = max !== void 0 && currentTags.length >= max;
+	const addTag = (raw) => {
+		const tag = raw.trim();
+		if (!tag) return;
+		if (atMax) return;
+		if (validate && !validate(tag)) return;
+		const exists = currentTags.some((t) => t.toLowerCase() === tag.toLowerCase());
+		if (!allowDuplicates && exists) {
+			setDraft("");
+			return;
+		}
+		setTags([...currentTags, tag]);
+		setDraft("");
+	};
+	const removeTag = (index) => {
+		setTags(currentTags.filter((_, i) => i !== index));
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (delimiters.includes(event.key)) {
+			if (draft.trim()) {
+				event.preventDefault();
+				addTag(draft);
+			} else if (event.key !== Keys.Enter) event.preventDefault();
+			return;
+		}
+		if (event.key === "Backspace" && draft === "" && currentTags.length > 0) {
+			event.preventDefault();
+			removeTag(currentTags.length - 1);
+		}
+	};
+	const onPaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		if (!/[,\n\t]/.test(text)) return;
+		event.preventDefault();
+		text.split(/[,\n\t]+/).map((t) => t.trim()).filter(Boolean).forEach((t) => addTag(t));
+	};
+	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-taginput", error && "pf-taginput--invalid", disabled && "pf-taginput--disabled"),
+			onClick: () => inputRef.current?.focus(),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+				className: "pf-taginput__tags",
+				children: [currentTags.map((tag, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: "pf-taginput__tag",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+						variant: tagVariant,
+						dismissible: !disabled,
+						onDismiss: () => removeTag(index),
+						children: tag
+					})
+				}, `${tag}-${index}`)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: "pf-taginput__field",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						...props,
+						id: fieldId,
+						ref: inputRefs,
+						type: "text",
+						className: cx("pf-taginput__input", className),
+						value: draft,
+						placeholder: currentTags.length === 0 ? placeholder : "",
+						disabled: disabled || atMax,
+						required: required && currentTags.length === 0,
+						autoComplete: "off",
+						"aria-invalid": error ? true : void 0,
+						"aria-describedby": describedBy,
+						onChange: (event) => setDraft(event.target.value),
+						onKeyDown,
+						onPaste,
+						onBlur: () => addTag(draft)
+					})
+				})]
+			}), name ? currentTags.map((tag, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: tag
+			}, index)) : null]
+		})
+	});
+});
+TagInput.displayName = "TagInput";
+//#endregion
 //#region src/components/Table/Table.tsx
 function Table({ className, columns, rows, caption, dense = false, striped = false, hoverable = true, stickyHeader = false, emptyState = "No data available.", defaultSortState, sortState, onSortStateChange, getRowKey, ...props }) {
 	const [internalSortState, setInternalSortState] = (0, react.useState)(defaultSortState);
@@ -5845,6 +6270,272 @@ var Textarea = (0, react.forwardRef)(({ id, label, description, error, className
 });
 Textarea.displayName = "Textarea";
 //#endregion
+//#region src/components/Timeline/Timeline.tsx
+var Timeline = (0, react.forwardRef)(function Timeline({ className, items, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		ref,
+		className: cx("pf-timeline", className),
+		...props,
+		children: items.map((item, index) => {
+			const tone = item.tone ?? "default";
+			const isLast = index === items.length - 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: cx("pf-timeline__item", isLast && "pf-timeline__item--last"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-timeline__rail",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cx("pf-timeline__marker", `pf-timeline__marker--${tone}`),
+						children: item.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-timeline__marker-icon",
+							children: item.icon
+						}) : null
+					}), !isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "pf-timeline__connector" }) : null]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-timeline__content",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pf-timeline__header",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "pf-timeline__title",
+							children: item.title
+						}), item.timestamp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-timeline__timestamp",
+							children: item.timestamp
+						}) : null]
+					}), item.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "pf-timeline__description",
+						children: item.description
+					}) : null]
+				})]
+			}, item.id ?? index);
+		})
+	});
+});
+Timeline.displayName = "Timeline";
+//#endregion
+//#region src/components/TimePicker/TimePicker.tsx
+var pad = (n) => String(n).padStart(2, "0");
+var parseValue = (value) => {
+	const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+	if (!match) return {
+		hour: null,
+		minute: null
+	};
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	if (hour > 23 || minute > 59) return {
+		hour: null,
+		minute: null
+	};
+	return {
+		hour,
+		minute
+	};
+};
+var formatDisplay = (parts, hourCycle) => {
+	if (parts.hour === null || parts.minute === null) return "";
+	if (hourCycle === 24) return `${pad(parts.hour)}:${pad(parts.minute)}`;
+	const meridiem = parts.hour < 12 ? "AM" : "PM";
+	return `${parts.hour % 12 === 0 ? 12 : parts.hour % 12}:${pad(parts.minute)} ${meridiem}`;
+};
+var range = (length, step = 1) => Array.from({ length: Math.ceil(length / step) }, (_, i) => i * step);
+var TimePicker = (0, react.forwardRef)(function TimePicker({ id, value, defaultValue, onValueChange, hourCycle = 24, minuteStep = 1, label, description, error, placeholder = "Select time", required, name, disabled, className, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const fieldId = id ?? generatedId;
+	const panelId = `${fieldId}-panel`;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const parts = parseValue(current ?? "");
+	const disclosure = useDisclosure({ disabled });
+	const isOpen = disclosure.isOpen ?? false;
+	const rootRef = (0, react.useRef)(null);
+	const triggerRefs = useComposedRefs((0, react.useRef)(null), ref);
+	const panelRef = (0, react.useRef)(null);
+	const { isMounted, isExiting } = usePresence(isOpen, 160);
+	const panelStyle = useAnchoredPosition({
+		anchorRef: rootRef,
+		floatingRef: panelRef,
+		enabled: isOpen,
+		matchAnchorWidth: false,
+		flip: true
+	});
+	useOutsideInteraction({
+		refs: [rootRef, panelRef],
+		enabled: isOpen,
+		onInteractOutside: () => disclosure.close()
+	});
+	const hours = hourCycle === 24 ? range(24) : range(12).map((h) => h + 1);
+	const minutes = range(60, minuteStep);
+	const meridiems = ["AM", "PM"];
+	const selectedMeridiem = parts.hour === null ? null : parts.hour < 12 ? "AM" : "PM";
+	const selectedHourDisplay = parts.hour === null ? null : hourCycle === 24 ? parts.hour : parts.hour % 12 === 0 ? 12 : parts.hour % 12;
+	const emit = (next) => {
+		if (next.hour === null || next.minute === null) return;
+		setCurrent(`${pad(next.hour)}:${pad(next.minute)}`);
+	};
+	const selectHour = (h) => {
+		let hour24;
+		if (hourCycle === 24) hour24 = h;
+		else {
+			const meridiem = selectedMeridiem ?? "AM";
+			const base = h % 12;
+			hour24 = meridiem === "PM" ? base + 12 : base;
+		}
+		emit({
+			hour: hour24,
+			minute: parts.minute ?? 0
+		});
+	};
+	const selectMinute = (m) => {
+		emit({
+			hour: parts.hour ?? (hourCycle === 12 ? 0 : 0),
+			minute: m
+		});
+	};
+	const selectMeridiem = (mer) => {
+		const base = (parts.hour ?? 0) % 12;
+		emit({
+			hour: mer === "PM" ? base + 12 : base,
+			minute: parts.minute ?? 0
+		});
+	};
+	const display = formatDisplay(parts, hourCycle);
+	(0, react.useEffect)(() => {
+		if (!isMounted) return;
+		const frame = requestAnimationFrame(() => {
+			panelRef.current?.querySelectorAll("[data-selected=\"true\"]").forEach((el) => el.scrollIntoView({ block: "center" }));
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [isMounted]);
+	const onColumnKeyDown = (event) => {
+		if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;
+		const buttons = Array.from(event.currentTarget.querySelectorAll("button:not(:disabled)"));
+		const index = buttons.indexOf(document.activeElement);
+		if (index === -1) return;
+		event.preventDefault();
+		buttons[event.key === Keys.ArrowDown ? Math.min(index + 1, buttons.length - 1) : Math.max(index - 1, 0)]?.focus();
+	};
+	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-timepicker",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					...props,
+					id: fieldId,
+					ref: triggerRefs,
+					type: "button",
+					className: cx("pf-timepicker__trigger", isOpen && "pf-timepicker__trigger--open", error && "pf-timepicker__trigger--invalid", className),
+					disabled,
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen,
+					"aria-required": required || void 0,
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": describedBy,
+					onClick: () => disclosure.toggle(),
+					onKeyDown: (event) => {
+						if (event.key === Keys.Escape) disclosure.close();
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cx("pf-timepicker__value", !display && "pf-timepicker__value--placeholder"),
+						children: display || placeholder
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "pf-timepicker__icon",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: "clock",
+							"aria-hidden": true
+						})
+					})]
+				}),
+				name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "hidden",
+					name,
+					value: current ?? ""
+				}) : null,
+				isMounted && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					id: panelId,
+					ref: panelRef,
+					role: "dialog",
+					"aria-label": label ? `${label} picker` : "Time picker",
+					className: cx("pf-timepicker__panel", isExiting && "pf-timepicker__panel--exiting"),
+					style: panelStyle,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-timepicker__column",
+							role: "listbox",
+							"aria-label": "Hour",
+							onKeyDown: onColumnKeyDown,
+							children: hours.map((h) => {
+								const isSel = selectedHourDisplay === h;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isSel,
+									"data-selected": isSel,
+									className: cx("pf-timepicker__option", isSel && "pf-timepicker__option--selected"),
+									onClick: () => selectHour(h),
+									children: pad(h)
+								}, h);
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-timepicker__column",
+							role: "listbox",
+							"aria-label": "Minute",
+							onKeyDown: onColumnKeyDown,
+							children: minutes.map((m) => {
+								const isSel = parts.minute === m;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isSel,
+									"data-selected": isSel,
+									className: cx("pf-timepicker__option", isSel && "pf-timepicker__option--selected"),
+									onClick: () => selectMinute(m),
+									children: pad(m)
+								}, m);
+							})
+						}),
+						hourCycle === 12 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-timepicker__column pf-timepicker__column--meridiem",
+							role: "listbox",
+							"aria-label": "AM or PM",
+							onKeyDown: onColumnKeyDown,
+							children: meridiems.map((mer) => {
+								const isSel = selectedMeridiem === mer;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isSel,
+									"data-selected": isSel,
+									className: cx("pf-timepicker__option", isSel && "pf-timepicker__option--selected"),
+									onClick: () => selectMeridiem(mer),
+									children: mer
+								}, mer);
+							})
+						}) : null
+					]
+				}), document.body) : null
+			]
+		})
+	});
+});
+TimePicker.displayName = "TimePicker";
+//#endregion
 //#region src/components/Toast/Toast.tsx
 var _emit = null;
 function ToastItem({ entry, onRemove }) {
@@ -5969,6 +6660,69 @@ toast.danger = (opts) => toast({
 	variant: "danger"
 });
 //#endregion
+//#region src/components/Toolbar/Toolbar.tsx
+var ITEM_SELECTOR = "button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [data-toolbar-item]:not([aria-disabled=\"true\"])";
+var Toolbar = (0, react.forwardRef)(function Toolbar({ className, orientation = "horizontal", onKeyDown, onFocus, children, ...props }, ref) {
+	const rootRef = (0, react.useRef)(null);
+	const refs = useComposedRefs(rootRef, ref);
+	const getItems = () => rootRef.current ? Array.from(rootRef.current.querySelectorAll(ITEM_SELECTOR)) : [];
+	(0, react.useEffect)(() => {
+		const items = getItems();
+		if (items.length === 0) return;
+		const current = items.find((el) => el.getAttribute("tabindex") === "0");
+		items.forEach((el, i) => {
+			el.tabIndex = (current ? el === current : i === 0) ? 0 : -1;
+		});
+	});
+	const handleFocus = (event) => {
+		const items = getItems();
+		const target = event.target;
+		if (items.includes(target)) items.forEach((el) => {
+			el.tabIndex = el === target ? 0 : -1;
+		});
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
+		const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
+		const items = getItems();
+		if (items.length === 0) return;
+		const currentIndex = items.indexOf(document.activeElement);
+		if (currentIndex === -1) return;
+		let nextIndex = -1;
+		if (event.key === nextKey) nextIndex = (currentIndex + 1) % items.length;
+		else if (event.key === prevKey) nextIndex = (currentIndex - 1 + items.length) % items.length;
+		else if (event.key === Keys.Home) nextIndex = 0;
+		else if (event.key === Keys.End) nextIndex = items.length - 1;
+		if (nextIndex >= 0) {
+			event.preventDefault();
+			items[nextIndex].focus();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: refs,
+		role: "toolbar",
+		"aria-orientation": orientation,
+		className: cx("pf-toolbar", `pf-toolbar--${orientation}`, className),
+		onKeyDown: handleKeyDown,
+		onFocus: handleFocus,
+		...props,
+		children
+	});
+});
+Toolbar.displayName = "Toolbar";
+var ToolbarSeparator = (0, react.forwardRef)(function ToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		role: "separator",
+		className: cx("pf-toolbar__separator", className),
+		...props
+	});
+});
+ToolbarSeparator.displayName = "ToolbarSeparator";
+//#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 var GAP = 10;
 var VIEWPORT_MARGIN = 8;
@@ -6388,6 +7142,21 @@ var VideoPlayer = (0, react.forwardRef)(({ id, label, description, error, aspect
 });
 VideoPlayer.displayName = "VideoPlayer";
 //#endregion
+//#region src/components/VisuallyHidden/VisuallyHidden.tsx
+/**
+* Hides content visually while keeping it available to screen readers and other
+* assistive technology. Use for labels, instructions, and status text that are
+* implied visually but need to be announced.
+*/
+var VisuallyHidden = (0, react.forwardRef)(function VisuallyHidden({ as = "span", focusable = false, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as, {
+		ref,
+		className: cx("pf-visually-hidden", focusable && "pf-visually-hidden--focusable", className),
+		...props
+	});
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+//#endregion
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AreaChart = AreaChart;
@@ -6407,9 +7176,11 @@ exports.CardHeader = CardHeader;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.CodeSnippet = CodeSnippet;
+exports.Collapsible = Collapsible;
 exports.Combobox = Combobox;
 exports.CommandPalette = CommandPalette;
 exports.ContentDivider = ContentDivider;
+exports.ContextMenu = ContextMenu;
 exports.CreditCard = CreditCard;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
@@ -6451,7 +7222,9 @@ exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup;
 exports.RatingBadge = RatingBadge;
 exports.RatingStars = RatingStars;
+exports.Resizable = Resizable;
 exports.RichTextEditor = RichTextEditor;
+exports.ScrollArea = ScrollArea;
 exports.SectionFooter = SectionFooter;
 exports.SectionHeader = SectionHeader;
 exports.Select = Select;
@@ -6463,12 +7236,18 @@ exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
+exports.TagInput = TagInput;
 exports.Textarea = Textarea;
+exports.TimePicker = TimePicker;
+exports.Timeline = Timeline;
 exports.ToastProvider = ToastProvider;
+exports.Toolbar = Toolbar;
+exports.ToolbarSeparator = ToolbarSeparator;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
 exports.UtilityButton = UtilityButton;
 exports.VideoPlayer = VideoPlayer;
+exports.VisuallyHidden = VisuallyHidden;
 exports.composeDescribedBy = composeDescribedBy;
 exports.getAvailableIconNames = getAvailableIconNames;
 exports.getCustomIconNames = getCustomIconNames;