@pitchfork-ui/react 0.1.9

package/dist/index114.js

@@ -0,0 +1,155 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Tooltip/Tooltip.tsx
+var GAP = 10;
+var VIEWPORT_MARGIN = 8;
+var placementFallbacks = {
+	top: [
+		"top",
+		"bottom",
+		"right",
+		"left"
+	],
+	bottom: [
+		"bottom",
+		"top",
+		"right",
+		"left"
+	],
+	left: [
+		"left",
+		"right",
+		"top",
+		"bottom"
+	],
+	right: [
+		"right",
+		"left",
+		"top",
+		"bottom"
+	]
+};
+var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+var getViewportSize = () => ({
+	width: window.innerWidth || document.documentElement.clientWidth,
+	height: window.innerHeight || document.documentElement.clientHeight
+});
+var getTooltipCoordinates = (triggerRect, tooltipRect, placement) => {
+	const centerX = triggerRect.left + triggerRect.width / 2;
+	const centerY = triggerRect.top + triggerRect.height / 2;
+	if (placement === "bottom") return {
+		left: centerX - tooltipRect.width / 2,
+		top: triggerRect.bottom + GAP
+	};
+	if (placement === "left") return {
+		left: triggerRect.left - tooltipRect.width - GAP,
+		top: centerY - tooltipRect.height / 2
+	};
+	if (placement === "right") return {
+		left: triggerRect.right + GAP,
+		top: centerY - tooltipRect.height / 2
+	};
+	return {
+		left: centerX - tooltipRect.width / 2,
+		top: triggerRect.top - tooltipRect.height - GAP
+	};
+};
+var getOverflow = (coordinates, tooltipRect) => {
+	const viewport = getViewportSize();
+	return Math.max(VIEWPORT_MARGIN - coordinates.left, 0) + Math.max(VIEWPORT_MARGIN - coordinates.top, 0) + Math.max(coordinates.left + tooltipRect.width - viewport.width + VIEWPORT_MARGIN, 0) + Math.max(coordinates.top + tooltipRect.height - viewport.height + VIEWPORT_MARGIN, 0);
+};
+var getTooltipPosition = (triggerRect, tooltipRect, placement) => {
+	const bestPlacement = placementFallbacks[placement].map((candidatePlacement) => ({
+		placement: candidatePlacement,
+		coordinates: getTooltipCoordinates(triggerRect, tooltipRect, candidatePlacement)
+	})).reduce((best, candidate) => getOverflow(candidate.coordinates, tooltipRect) < getOverflow(best.coordinates, tooltipRect) ? candidate : best);
+	const viewport = getViewportSize();
+	return {
+		placement: bestPlacement.placement,
+		style: {
+			left: clamp(bestPlacement.coordinates.left, VIEWPORT_MARGIN, viewport.width - tooltipRect.width - VIEWPORT_MARGIN),
+			top: clamp(bestPlacement.coordinates.top, VIEWPORT_MARGIN, viewport.height - tooltipRect.height - VIEWPORT_MARGIN),
+			visibility: "visible"
+		}
+	};
+};
+var Tooltip = forwardRef(function Tooltip({ content, children, open, placement = "top", delay = 120, disabled = false, className }, ref) {
+	const tooltipId = useId();
+	const triggerRef = useRef(null);
+	useImperativeHandle(ref, () => triggerRef.current, []);
+	const tooltipRef = useRef(null);
+	const showTimerRef = useRef(void 0);
+	const [isOpen, setIsOpen] = useState(false);
+	const [style, setStyle] = useState({ visibility: "hidden" });
+	const [resolvedPlacement, setResolvedPlacement] = useState(placement);
+	const isControlled = open !== void 0;
+	const isVisible = !disabled && (isControlled ? open : isOpen);
+	const clearShowTimer = () => {
+		if (showTimerRef.current !== void 0) {
+			window.clearTimeout(showTimerRef.current);
+			showTimerRef.current = void 0;
+		}
+	};
+	const openTooltip = () => {
+		if (disabled) return;
+		if (isControlled) return;
+		clearShowTimer();
+		showTimerRef.current = window.setTimeout(() => {
+			setIsOpen(true);
+		}, delay);
+	};
+	const closeTooltip = () => {
+		clearShowTimer();
+		if (isControlled) return;
+		setIsOpen(false);
+		setStyle({ visibility: "hidden" });
+		setResolvedPlacement(placement);
+	};
+	useEffect(() => {
+		return () => {
+			clearShowTimer();
+		};
+	}, []);
+	useLayoutEffect(() => {
+		if (!isVisible) return;
+		const updatePosition = () => {
+			if (!triggerRef.current || !tooltipRef.current) return;
+			const position = getTooltipPosition(triggerRef.current.getBoundingClientRect(), tooltipRef.current.getBoundingClientRect(), placement);
+			setStyle(position.style);
+			setResolvedPlacement(position.placement);
+		};
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [isVisible, placement]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		ref: triggerRef,
+		className: "pf-tooltip__trigger",
+		onMouseEnter: openTooltip,
+		onMouseLeave: closeTooltip,
+		onFocus: openTooltip,
+		onBlur: closeTooltip,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") closeTooltip();
+		},
+		"aria-describedby": isVisible ? tooltipId : void 0,
+		children: children ?? /* @__PURE__ */ jsx("span", {})
+	}), isVisible && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+		id: tooltipId,
+		ref: tooltipRef,
+		role: "tooltip",
+		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, className),
+		style,
+		children: content
+	}), document.body) : null] });
+});
+Tooltip.displayName = "Tooltip";
+//#endregion
+export { Tooltip };

package/dist/index116.js

@@ -0,0 +1,193 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TreeView/TreeView.tsx
+function flattenVisibleNodes(nodes, expandedSet, level = 1, parentValue) {
+	const flattened = [];
+	for (const node of nodes) {
+		flattened.push({
+			node,
+			level,
+			parentValue
+		});
+		if (node.children && node.children.length > 0 && expandedSet.has(node.value)) flattened.push(...flattenVisibleNodes(node.children, expandedSet, level + 1, node.value));
+	}
+	return flattened;
+}
+function findFirstEnabledValue(nodes) {
+	for (const node of nodes) {
+		if (!node.disabled) return node.value;
+		if (node.children && node.children.length > 0) {
+			const childValue = findFirstEnabledValue(node.children);
+			if (childValue) return childValue;
+		}
+	}
+}
+function collectExpandableNodeValues(nodes) {
+	const values = [];
+	for (const node of nodes) if (node.children && node.children.length > 0) {
+		values.push(node.value);
+		values.push(...collectExpandableNodeValues(node.children));
+	}
+	return values;
+}
+var TreeView = forwardRef(function TreeView({ className, nodes, selectedValue, defaultSelectedValue, onSelectedValueChange, expandedValues, defaultExpandedValues = [], onExpandedValuesChange, ...props }, ref) {
+	const isSelectedControlled = selectedValue !== void 0;
+	const isExpandedControlled = expandedValues !== void 0;
+	const [internalSelectedValue, setInternalSelectedValue] = useState(defaultSelectedValue ?? findFirstEnabledValue(nodes));
+	const [internalExpandedValues, setInternalExpandedValues] = useState(defaultExpandedValues);
+	const resolvedSelectedValue = isSelectedControlled ? selectedValue : internalSelectedValue;
+	const resolvedExpandedValues = isExpandedControlled ? expandedValues : internalExpandedValues;
+	const expandedSet = useMemo(() => new Set(resolvedExpandedValues), [resolvedExpandedValues]);
+	const flattenedNodes = useMemo(() => flattenVisibleNodes(nodes, expandedSet), [expandedSet, nodes]);
+	const itemRefs = useRef({});
+	const updateExpandedValues = useCallback((nextValues) => {
+		if (!isExpandedControlled) setInternalExpandedValues(nextValues);
+		onExpandedValuesChange?.(nextValues);
+	}, [isExpandedControlled, onExpandedValuesChange]);
+	const expandAll = useCallback(() => {
+		updateExpandedValues(collectExpandableNodeValues(nodes));
+	}, [nodes, updateExpandedValues]);
+	const collapseAll = useCallback(() => {
+		updateExpandedValues([]);
+	}, [updateExpandedValues]);
+	useImperativeHandle(ref, () => ({
+		expandAll,
+		collapseAll
+	}), [collapseAll, expandAll]);
+	const setExpandedState = (value, expanded) => {
+		const nextSet = new Set(resolvedExpandedValues);
+		if (expanded) nextSet.add(value);
+		else nextSet.delete(value);
+		updateExpandedValues(Array.from(nextSet));
+	};
+	const toggleExpanded = (value) => {
+		setExpandedState(value, !expandedSet.has(value));
+	};
+	const setSelectedValue = (value) => {
+		if (!isSelectedControlled) setInternalSelectedValue(value);
+		onSelectedValueChange?.(value);
+	};
+	const focusNodeByValue = (value) => {
+		if (!value) return;
+		itemRefs.current[value]?.focus();
+	};
+	const onItemKeyDown = (current, event) => {
+		const currentIndex = flattenedNodes.findIndex((item) => item.node.value === current.node.value);
+		if (currentIndex === -1) return;
+		const hasChildren = !!(current.node.children && current.node.children.length > 0);
+		const isExpanded = expandedSet.has(current.node.value);
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			focusNodeByValue(flattenedNodes[currentIndex + 1]?.node.value);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			focusNodeByValue(flattenedNodes[currentIndex - 1]?.node.value);
+			return;
+		}
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			if (hasChildren && !isExpanded) {
+				setExpandedState(current.node.value, true);
+				return;
+			}
+			if (hasChildren && isExpanded) {
+				const nextNode = flattenedNodes[currentIndex + 1];
+				if (nextNode && nextNode.parentValue === current.node.value) focusNodeByValue(nextNode.node.value);
+			}
+			return;
+		}
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			if (hasChildren && isExpanded) {
+				setExpandedState(current.node.value, false);
+				return;
+			}
+			focusNodeByValue(current.parentValue);
+			return;
+		}
+		if (event.key === "Home") {
+			event.preventDefault();
+			focusNodeByValue(flattenedNodes[0]?.node.value);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			focusNodeByValue(flattenedNodes[flattenedNodes.length - 1]?.node.value);
+			return;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			if (!current.node.disabled) setSelectedValue(current.node.value);
+			if (hasChildren) toggleExpanded(current.node.value);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("pf-tree-view", className),
+		role: "tree",
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "pf-tree-view__list",
+			role: "presentation",
+			children: flattenedNodes.map((item) => {
+				const hasChildren = !!(item.node.children && item.node.children.length > 0);
+				const isExpanded = expandedSet.has(item.node.value);
+				const isSelected = resolvedSelectedValue === item.node.value;
+				return /* @__PURE__ */ jsx("li", {
+					className: "pf-tree-view__item",
+					role: "presentation",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cx("pf-tree-view__row", isSelected && "pf-tree-view__row--selected", item.node.disabled && "pf-tree-view__row--disabled"),
+						style: { "--pf-tree-level": String(item.level - 1) },
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "pf-tree-view__toggle-wrap",
+							"aria-hidden": true,
+							children: hasChildren ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "pf-tree-view__toggle",
+								onClick: () => toggleExpanded(item.node.value),
+								tabIndex: -1,
+								children: isExpanded ? "▾" : "▸"
+							}) : /* @__PURE__ */ jsx("span", { className: "pf-tree-view__spacer" })
+						}), /* @__PURE__ */ jsxs("button", {
+							ref: (element) => {
+								itemRefs.current[item.node.value] = element;
+							},
+							type: "button",
+							role: "treeitem",
+							className: "pf-tree-view__node",
+							"aria-level": item.level,
+							"aria-expanded": hasChildren ? isExpanded : void 0,
+							"aria-selected": isSelected,
+							disabled: item.node.disabled,
+							onClick: () => {
+								if (!item.node.disabled) setSelectedValue(item.node.value);
+							},
+							onKeyDown: (event) => onItemKeyDown(item, event),
+							children: [
+								item.node.icon ? /* @__PURE__ */ jsx("span", {
+									className: "pf-tree-view__icon",
+									children: item.node.icon
+								}) : null,
+								/* @__PURE__ */ jsx("span", {
+									className: "pf-tree-view__label",
+									children: item.node.label
+								}),
+								item.node.badge ? /* @__PURE__ */ jsx("span", {
+									className: "pf-tree-view__badge",
+									children: item.node.badge
+								}) : null
+							]
+						})]
+					})
+				}, item.node.value);
+			})
+		})
+	});
+});
+TreeView.displayName = "TreeView";
+//#endregion
+export { TreeView };

package/dist/index118.js

@@ -0,0 +1,24 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/UtilityButton/UtilityButton.tsx
+var UtilityButton = forwardRef(({ className, variant = "neutral", size = "md", type = "button", icon, children, tooltip, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		className: cx("pf-utility-button", `pf-utility-button--${variant}`, `pf-utility-button--${size}`, className),
+		title: tooltip,
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: "pf-utility-button__icon",
+			children: icon
+		}) : null, children ? /* @__PURE__ */ jsx("span", {
+			className: "pf-utility-button__label",
+			children
+		}) : null]
+	});
+});
+UtilityButton.displayName = "UtilityButton";
+//#endregion
+export { UtilityButton };

package/dist/index12.js

@@ -0,0 +1,38 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+var Spinner = () => /* @__PURE__ */ jsx("svg", {
+	className: "pf-button__spinner",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeDasharray: "32",
+		strokeDashoffset: "8"
+	})
+});
+var Button = forwardRef(({ className, variant = "primary", size = "md", fullWidth = false, loading = false, type = "button", disabled, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: cx("pf-button", `pf-button--${variant}`, `pf-button--${size}`, fullWidth && "pf-button--full", loading && "pf-button--loading", className),
+		...props,
+		children: [loading && /* @__PURE__ */ jsx(Spinner, {}), children]
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button };

package/dist/index120.js

@@ -0,0 +1,69 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/VideoPlayer/VideoPlayer.tsx
+var VideoPlayer = forwardRef(({ id, label, description, error, aspectRatio = "16/9", sources, tracks, className, src, controls = true, preload = "metadata", "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+	const generatedId = useId();
+	const videoId = id ?? generatedId;
+	const descriptionId = description ? `${videoId}-description` : void 0;
+	const errorId = error ? `${videoId}-error` : void 0;
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		errorId
+	].filter(Boolean).join(" ") || void 0;
+	const hasSource = Boolean(src) || Boolean(sources?.length);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-field",
+		children: [
+			label ? /* @__PURE__ */ jsx("label", {
+				className: "pf-field__label",
+				htmlFor: videoId,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: cx("pf-video-player", `pf-video-player--ratio-${aspectRatio.replace("/", "-")}`, error && "pf-video-player--invalid", className),
+				children: hasSource ? /* @__PURE__ */ jsxs("video", {
+					...props,
+					ref,
+					id: videoId,
+					className: "pf-video-player__video",
+					controls,
+					preload,
+					src,
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": describedBy,
+					children: [sources?.map((source) => /* @__PURE__ */ jsx("source", {
+						src: source.src,
+						type: source.type
+					}, `${source.src}-${source.type ?? "default"}`)), tracks?.map((track) => /* @__PURE__ */ jsx("track", {
+						src: track.src,
+						kind: track.kind,
+						srcLang: track.srcLang,
+						label: track.label,
+						default: track.default
+					}, `${track.src}-${track.kind}-${track.srcLang}`))]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "pf-video-player__empty",
+					role: "note",
+					id: videoId,
+					children: "Add a video src to display playback."
+				})
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "pf-field__description",
+				id: descriptionId,
+				children: description
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "pf-field__error",
+				id: errorId,
+				children: error
+			}) : null
+		]
+	});
+});
+VideoPlayer.displayName = "VideoPlayer";
+//#endregion
+export { VideoPlayer };

package/dist/index14.js

@@ -0,0 +1,24 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/BadgeGroup/BadgeGroup.tsx
+var BadgeGroup = forwardRef(({ label, message, color = "gray", appearance = "pill", badgePosition = "leading", className, ...props }, ref) => {
+	const badge = /* @__PURE__ */ jsx("span", {
+		className: cx("pf-badge-group__badge", `pf-badge-group__badge--${color}`),
+		children: label
+	});
+	const text = /* @__PURE__ */ jsx("span", {
+		className: cx("pf-badge-group__text", `pf-badge-group__text--${appearance}`, `pf-badge-group__text--${color}`),
+		children: message
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-badge-group", `pf-badge-group--${appearance}`, `pf-badge-group--${badgePosition}`, className),
+		...props,
+		children: badgePosition === "leading" ? /* @__PURE__ */ jsxs(Fragment, { children: [badge, text] }) : /* @__PURE__ */ jsxs(Fragment, { children: [text, badge] })
+	});
+});
+BadgeGroup.displayName = "BadgeGroup";
+//#endregion
+export { BadgeGroup };

package/dist/index16.js

@@ -0,0 +1,64 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ButtonGroup/ButtonGroup.tsx
+var isSelected = (currentValue, itemValue, multiple) => {
+	if (multiple) return Array.isArray(currentValue) ? currentValue.includes(itemValue) : false;
+	return currentValue === itemValue;
+};
+var ButtonGroup = forwardRef(({ items, value, defaultValue, multiple = false, onValueChange, disabled = false, className, ...props }, ref) => {
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const selectedValue = isControlled ? value : internalValue;
+	const selectedSet = useMemo(() => {
+		if (!multiple) return new Set(typeof selectedValue === "string" ? [selectedValue] : []);
+		return new Set(Array.isArray(selectedValue) ? selectedValue : []);
+	}, [multiple, selectedValue]);
+	const handleSelect = (itemValue) => {
+		if (disabled) return;
+		if (multiple) {
+			const nextValue = selectedSet.has(itemValue) ? [...selectedSet].filter((currentItem) => currentItem !== itemValue) : [...selectedSet, itemValue];
+			if (!isControlled) setInternalValue(nextValue);
+			onValueChange?.(nextValue);
+			return;
+		}
+		if (!isControlled) setInternalValue(itemValue);
+		onValueChange?.(itemValue);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-button-group", className),
+		role: "group",
+		...props,
+		children: items.map((item) => {
+			const selected = isSelected(selectedValue, item.value, multiple);
+			const isDisabled = disabled || item.disabled;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: cx("pf-button-group__button", selected && "pf-button-group__button--selected"),
+				"aria-pressed": selected,
+				disabled: isDisabled,
+				onClick: () => handleSelect(item.value),
+				children: [
+					item.icon ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "pf-button-group__icon",
+						children: item.icon
+					}) : null,
+					item.dot ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "pf-button-group__dot"
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "pf-button-group__label",
+						children: item.label
+					})
+				]
+			}, item.value);
+		})
+	});
+});
+ButtonGroup.displayName = "ButtonGroup";
+//#endregion
+export { ButtonGroup };

package/dist/index18.js

@@ -0,0 +1,39 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Breadcrumbs/Breadcrumbs.tsx
+var Breadcrumbs = forwardRef(({ className, items, separator = "/", "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+	ref,
+	className: cx("pf-breadcrumbs", className),
+	"aria-label": ariaLabel,
+	...props,
+	children: /* @__PURE__ */ jsx("ol", {
+		className: "pf-breadcrumbs__list",
+		children: items.map((item, index) => {
+			const isLast = index === items.length - 1;
+			const isCurrent = item.current ?? isLast;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "pf-breadcrumbs__item",
+				children: [item.href ? /* @__PURE__ */ jsx("a", {
+					href: item.href,
+					onClick: item.onClick,
+					className: cx("pf-breadcrumbs__link", isCurrent && "pf-breadcrumbs__link--current"),
+					"aria-current": isCurrent ? "page" : void 0,
+					children: item.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: cx("pf-breadcrumbs__link", isCurrent && "pf-breadcrumbs__link--current"),
+					"aria-current": isCurrent ? "page" : void 0,
+					children: item.label
+				}), !isLast ? /* @__PURE__ */ jsx("span", {
+					className: "pf-breadcrumbs__separator",
+					"aria-hidden": true,
+					children: separator
+				}) : null]
+			}, `${index}-${typeof item.label === "string" ? item.label : "item"}`);
+		})
+	})
+}));
+Breadcrumbs.displayName = "Breadcrumbs";
+//#endregion
+export { Breadcrumbs };

package/dist/index19.js

@@ -0,0 +1,35 @@
+import { cx } from "./index4.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/utils/FieldWrapper.tsx
+var FieldWrapper = forwardRef(({ labelFor, label, description, descriptionId, error, errorId, required, children, footer, className }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cx("pf-field", className),
+	children: [
+		label ? /* @__PURE__ */ jsxs("label", {
+			className: "pf-field__label",
+			id: `${labelFor}-label`,
+			htmlFor: labelFor,
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "pf-field__required",
+				"aria-hidden": "true",
+				children: "*"
+			})]
+		}) : null,
+		children,
+		description ? /* @__PURE__ */ jsx("p", {
+			className: "pf-field__description",
+			id: descriptionId,
+			children: description
+		}) : null,
+		error ? /* @__PURE__ */ jsx("p", {
+			className: "pf-field__error",
+			id: errorId,
+			children: error
+		}) : null,
+		footer
+	]
+}));
+FieldWrapper.displayName = "FieldWrapper";
+//#endregion
+export { FieldWrapper };

package/dist/index21.js

@@ -0,0 +1,37 @@
+import { cx } from "./index4.js";
+import { FieldWrapper } from "./index19.js";
+/* empty css        */
+import { forwardRef, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+var Input = forwardRef(({ id, label, description, error, className, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const descriptionId = description ? `${inputId}-description` : void 0;
+	const errorId = error ? `${inputId}-error` : void 0;
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		errorId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: inputId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required: props.required,
+		children: /* @__PURE__ */ jsx("input", {
+			...props,
+			ref,
+			id: inputId,
+			className: cx("pf-input", error && "pf-input--invalid", className),
+			"aria-invalid": error ? true : void 0,
+			"aria-describedby": describedBy
+		})
+	});
+});
+Input.displayName = "Input";
+//#endregion
+export { Input };