@pitchfork-ui/react 0.1.9

package/dist/index82.js

@@ -0,0 +1,116 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/RadarChart/RadarChart.tsx
+function polarToCartesian(cx, cy, radius, angle) {
+	return {
+		x: cx + radius * Math.cos(angle),
+		y: cy + radius * Math.sin(angle)
+	};
+}
+function toPointsString(points) {
+	return points.map((point) => `${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(" ");
+}
+var RadarChart = forwardRef(function RadarChart({ className, data, size = 280, max, levels = 4, showAxes = true, showLegend = true, strokeColor = "var(--color-semantic-action-primary)", fillColor = "rgb(249 115 22 / 0.18)", ...props }, ref) {
+	const safeData = data.filter((item) => item.value >= 0);
+	const count = safeData.length;
+	const safeSize = Math.max(size, 180);
+	const safeLevels = Math.max(2, levels);
+	if (count < 3) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-radar-chart", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pf-radar-chart__empty",
+			children: "RadarChart needs at least 3 data points."
+		})
+	});
+	const center = safeSize / 2;
+	const outerRadius = center - 36;
+	const computedMax = max ?? Math.max(...safeData.map((item) => item.value), 1);
+	const safeMax = computedMax > 0 ? computedMax : 1;
+	const baseAngle = -Math.PI / 2;
+	const angleStep = 2 * Math.PI / count;
+	const axes = safeData.map((item, index) => {
+		const angle = baseAngle + index * angleStep;
+		return {
+			item,
+			angle,
+			end: polarToCartesian(center, center, outerRadius, angle)
+		};
+	});
+	const gridPolygons = Array.from({ length: safeLevels }, (_, levelIndex) => {
+		const ratio = (levelIndex + 1) / safeLevels;
+		return toPointsString(axes.map((axis) => polarToCartesian(center, center, outerRadius * ratio, axis.angle)));
+	});
+	const valuePoints = axes.map((axis) => {
+		return polarToCartesian(center, center, outerRadius * Math.max(0, Math.min(1, axis.item.value / safeMax)), axis.angle);
+	});
+	const valuePolygon = toPointsString(valuePoints);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-radar-chart", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			className: "pf-radar-chart__svg",
+			viewBox: `0 0 ${safeSize} ${safeSize}`,
+			role: "img",
+			"aria-label": "Radar chart",
+			children: [
+				gridPolygons.map((points, index) => /* @__PURE__ */ jsx("polygon", {
+					className: "pf-radar-chart__grid",
+					points
+				}, `grid-${index}`)),
+				showAxes ? axes.map((axis, index) => /* @__PURE__ */ jsx("line", {
+					className: "pf-radar-chart__axis",
+					x1: center,
+					y1: center,
+					x2: axis.end.x,
+					y2: axis.end.y
+				}, `axis-${index}`)) : null,
+				/* @__PURE__ */ jsx("polygon", {
+					className: "pf-radar-chart__area",
+					points: valuePolygon,
+					style: {
+						fill: fillColor,
+						stroke: strokeColor
+					}
+				}),
+				valuePoints.map((point, index) => /* @__PURE__ */ jsx("circle", {
+					className: "pf-radar-chart__point",
+					cx: point.x,
+					cy: point.y,
+					r: 3,
+					style: { fill: strokeColor }
+				}, `point-${index}`)),
+				axes.map((axis, index) => {
+					const labelPoint = polarToCartesian(center, center, outerRadius + 18, axis.angle);
+					return /* @__PURE__ */ jsx("text", {
+						className: "pf-radar-chart__label",
+						x: labelPoint.x,
+						y: labelPoint.y,
+						textAnchor: "middle",
+						dominantBaseline: "middle",
+						children: axis.item.label
+					}, `label-${index}`);
+				})
+			]
+		}), showLegend ? /* @__PURE__ */ jsx("ul", {
+			className: "pf-radar-chart__legend",
+			children: safeData.map((item, index) => /* @__PURE__ */ jsxs("li", {
+				className: "pf-radar-chart__legend-item",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "pf-radar-chart__legend-label",
+					children: item.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "pf-radar-chart__legend-value",
+					children: item.value
+				})]
+			}, `${index}-${item.value}`))
+		}) : null]
+	});
+});
+RadarChart.displayName = "RadarChart";
+//#endregion
+export { RadarChart };

package/dist/index84.js

@@ -0,0 +1,25 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/RadioButton/RadioButton.tsx
+var RadioButton = forwardRef(({ id, label, className, ...props }, ref) => {
+	const generatedId = useId();
+	const radioId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-radio-field",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			id: radioId,
+			type: "radio",
+			className: cx("pf-radio", className),
+			...props
+		}), label ? /* @__PURE__ */ jsx("label", {
+			htmlFor: radioId,
+			children: label
+		}) : null]
+	});
+});
+RadioButton.displayName = "RadioButton";
+//#endregion
+export { RadioButton };

package/dist/index86.js

@@ -0,0 +1,56 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/RadioGroup/RadioGroup.tsx
+var RadioGroup = forwardRef(({ name, legend, options, value, defaultValue, onValueChange, disabled = false, orientation = "vertical", className, ...props }, ref) => {
+	const generatedName = useId();
+	const groupName = name ?? generatedName;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const selectedValue = isControlled ? value : internalValue;
+	const handleChange = (nextValue) => {
+		if (!isControlled) setInternalValue(nextValue);
+		onValueChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		ref,
+		className: cx("pf-radio-group", orientation === "horizontal" && "pf-radio-group--horizontal", className),
+		disabled,
+		...props,
+		children: [legend ? /* @__PURE__ */ jsx("legend", {
+			className: "pf-radio-group__legend",
+			children: legend
+		}) : null, options.map((option) => {
+			const optionId = `${groupName}-${option.value}`;
+			const checked = selectedValue === option.value;
+			const optionDisabled = disabled || option.disabled;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "pf-radio-group__item",
+				children: [/* @__PURE__ */ jsx("input", {
+					id: optionId,
+					className: "pf-radio-group__input",
+					type: "radio",
+					name: groupName,
+					value: option.value,
+					checked,
+					disabled: optionDisabled,
+					onChange: () => handleChange(option.value)
+				}), /* @__PURE__ */ jsxs("label", {
+					htmlFor: optionId,
+					className: "pf-radio-group__label",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "pf-radio-group__label-text",
+						children: option.label
+					}), option.description ? /* @__PURE__ */ jsx("span", {
+						className: "pf-radio-group__description",
+						children: option.description
+					}) : null]
+				})]
+			}, option.value);
+		})]
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+//#endregion
+export { RadioGroup };

package/dist/index88.js

@@ -0,0 +1,88 @@
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Rating/Rating.tsx
+var clampRating = (value, max) => Math.min(Math.max(value, 0), max);
+var getStarFillPercent = (value, index) => {
+	if (value >= index + 1) return 100;
+	if (value > index) return Math.round((value - index) * 100);
+	return 0;
+};
+var RatingStars = forwardRef(function RatingStars({ value, max = 5, size = 18, showValue = false, ariaLabel, className, ...props }, ref) {
+	const clampedValue = clampRating(value, max);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-rating-stars", className),
+		role: "img",
+		"aria-label": ariaLabel ?? `Rating ${clampedValue} out of ${max}`,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pf-rating-stars__track",
+			"aria-hidden": true,
+			children: Array.from({ length: max }, (_, index) => {
+				return /* @__PURE__ */ jsxs("span", {
+					className: "pf-rating-stars__star",
+					style: {
+						"--pf-rating-fill": `${getStarFillPercent(clampedValue, index)}%`,
+						"--pf-rating-size": `${size}px`
+					},
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "star",
+						"aria-hidden": true,
+						className: "pf-rating-stars__star-icon pf-rating-stars__star-icon--base"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "pf-rating-stars__star-fill",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "star",
+							className: "pf-rating-stars__star-icon pf-rating-stars__star-icon--fill"
+						})
+					})]
+				}, index);
+			})
+		}), showValue ? /* @__PURE__ */ jsx("span", {
+			className: "pf-rating-stars__value",
+			children: clampedValue.toFixed(1)
+		}) : null]
+	});
+});
+RatingStars.displayName = "RatingStars";
+var RatingBadge = forwardRef(function RatingBadge({ value, max = 5, reviews, size = "md", className, ...props }, ref) {
+	const clampedValue = clampRating(value, max);
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("pf-rating-badge", `pf-rating-badge--${size}`, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "star",
+				"aria-hidden": true,
+				className: "pf-rating-badge__icon"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "pf-rating-badge__value",
+				children: [
+					clampedValue.toFixed(1),
+					/* @__PURE__ */ jsx("span", {
+						className: "pf-rating-badge__separator",
+						children: "/"
+					}),
+					max.toFixed(1)
+				]
+			}),
+			typeof reviews === "number" ? /* @__PURE__ */ jsxs("span", {
+				className: "pf-rating-badge__reviews",
+				children: [
+					"(",
+					reviews.toLocaleString(),
+					")"
+				]
+			}) : null
+		]
+	});
+});
+RatingBadge.displayName = "RatingBadge";
+//#endregion
+export { RatingBadge, RatingStars };

package/dist/index90.js

@@ -0,0 +1,167 @@
+import { composeDescribedBy } from "./index3.js";
+import { cx } from "./index4.js";
+import { FieldWrapper } from "./index19.js";
+/* empty css        */
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/RichTextEditor/RichTextEditor.tsx
+var stripOuterPTags = (html) => {
+	if (!html) return "";
+	const trimmed = html.trim();
+	if (trimmed.startsWith("<p>") && trimmed.endsWith("</p>") && trimmed.indexOf("<p>") === 0 && trimmed.lastIndexOf("</p>") === trimmed.length - 4) return trimmed.slice(3, -4);
+	return html;
+};
+var normalizeHtml = (value) => stripOuterPTags(value ?? "");
+var getTextLength = (element) => element.textContent?.length ?? 0;
+var RichTextEditor = forwardRef(({ id, label, description, error, value, defaultValue, onChange, placeholder = "Start typing...", minHeight = 140, characterMax, required = false, disabled = false, className, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+	const generatedId = useId();
+	const editorId = id ?? generatedId;
+	const descriptionId = description ? `${editorId}-description` : void 0;
+	const errorId = error ? `${editorId}-error` : void 0;
+	const countId = typeof characterMax === "number" ? `${editorId}-count` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId, countId);
+	const editorRef = useRef(null);
+	const lastValidHtmlRef = useRef("");
+	const [characterCount, setCharacterCount] = useState(0);
+	const isControlled = value !== void 0;
+	useImperativeHandle(ref, () => editorRef.current, []);
+	useEffect(() => {
+		if (!editorRef.current) return;
+		const nextValue = normalizeHtml(isControlled ? value : defaultValue);
+		if (editorRef.current.innerHTML !== nextValue) editorRef.current.innerHTML = nextValue;
+		lastValidHtmlRef.current = nextValue;
+		setCharacterCount(getTextLength(editorRef.current));
+	}, [
+		defaultValue,
+		isControlled,
+		value
+	]);
+	const emitChange = () => {
+		if (!editorRef.current) return;
+		onChange?.(editorRef.current.innerHTML);
+	};
+	const enforceLimitAndEmit = () => {
+		if (!editorRef.current) return;
+		const nextLength = getTextLength(editorRef.current);
+		if (typeof characterMax === "number" && nextLength > characterMax) {
+			editorRef.current.innerHTML = lastValidHtmlRef.current;
+			setCharacterCount(getTextLength(editorRef.current));
+			return;
+		}
+		lastValidHtmlRef.current = editorRef.current.innerHTML;
+		setCharacterCount(nextLength);
+		emitChange();
+	};
+	const handleCommand = (command) => {
+		if (!editorRef.current || disabled) return;
+		editorRef.current.focus();
+		document.execCommand(command);
+		enforceLimitAndEmit();
+	};
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		labelFor: editorId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("pf-rte", error && "pf-rte--invalid", disabled && "pf-rte--disabled", className),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pf-rte__toolbar",
+				role: "toolbar",
+				"aria-label": "Formatting options",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-rte__tool",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => handleCommand("bold"),
+						disabled,
+						"aria-label": "Bold",
+						children: "B"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-rte__tool",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => handleCommand("italic"),
+						disabled,
+						"aria-label": "Italic",
+						children: "I"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-rte__tool",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => handleCommand("underline"),
+						disabled,
+						"aria-label": "Underline",
+						children: "U"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "pf-rte__divider",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-rte__tool",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => handleCommand("insertUnorderedList"),
+						disabled,
+						"aria-label": "Bulleted list",
+						children: "• List"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-rte__tool",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => handleCommand("insertOrderedList"),
+						disabled,
+						"aria-label": "Numbered list",
+						children: "1. List"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-rte__tool",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => handleCommand("removeFormat"),
+						disabled,
+						"aria-label": "Clear formatting",
+						children: "Clear"
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				id: editorId,
+				ref: editorRef,
+				className: "pf-rte__editor",
+				contentEditable: !disabled,
+				role: "textbox",
+				"aria-multiline": "true",
+				"aria-labelledby": label ? `${editorId}-label` : void 0,
+				"aria-required": required || void 0,
+				"aria-invalid": error ? true : void 0,
+				"aria-describedby": describedBy,
+				"aria-disabled": disabled ? true : void 0,
+				"data-placeholder": placeholder,
+				suppressContentEditableWarning: true,
+				onInput: enforceLimitAndEmit,
+				style: { "--pf-rte-min-height": `${minHeight}px` },
+				...props
+			})]
+		}), typeof characterMax === "number" ? /* @__PURE__ */ jsxs("p", {
+			className: "pf-rte__count",
+			id: countId,
+			"aria-live": "polite",
+			children: [
+				characterCount,
+				"/",
+				characterMax
+			]
+		}) : null]
+	});
+});
+RichTextEditor.displayName = "RichTextEditor";
+//#endregion
+export { RichTextEditor };

package/dist/index92.js

@@ -0,0 +1,32 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SectionFooter/SectionFooter.tsx
+var SectionFooter = forwardRef(function SectionFooter({ className, heading, description, actions, divider = true, align = "between", children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("footer", {
+		ref,
+		className: cx("pf-section-footer", divider && "pf-section-footer--divider", `pf-section-footer--${align}`, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pf-section-footer__content",
+			children: [
+				heading ? /* @__PURE__ */ jsx("h3", {
+					className: "pf-section-footer__heading",
+					children: heading
+				}) : null,
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "pf-section-footer__description",
+					children: description
+				}) : null,
+				children
+			]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "pf-section-footer__actions",
+			children: actions
+		}) : null]
+	});
+});
+SectionFooter.displayName = "SectionFooter";
+//#endregion
+export { SectionFooter };

package/dist/index94.js

@@ -0,0 +1,40 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SectionHeader/SectionHeader.tsx
+var SectionHeader = forwardRef(function SectionHeader({ className, eyebrow, heading, description, metadata, actions, divider = false, align = "between", children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		className: cx("pf-section-header", divider && "pf-section-header--divider", `pf-section-header--${align}`, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pf-section-header__content",
+			children: [
+				eyebrow ? /* @__PURE__ */ jsx("p", {
+					className: "pf-section-header__eyebrow",
+					children: eyebrow
+				}) : null,
+				/* @__PURE__ */ jsx("h2", {
+					className: "pf-section-header__heading",
+					children: heading
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "pf-section-header__description",
+					children: description
+				}) : null,
+				metadata ? /* @__PURE__ */ jsx("div", {
+					className: "pf-section-header__metadata",
+					children: metadata
+				}) : null,
+				children
+			]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "pf-section-header__actions",
+			children: actions
+		}) : null]
+	});
+});
+SectionHeader.displayName = "SectionHeader";
+//#endregion
+export { SectionHeader };

package/dist/index96.js

@@ -0,0 +1,87 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SidebarNavigation/SidebarNavigation.tsx
+function renderItem(item, key) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		item.icon ? /* @__PURE__ */ jsx("span", {
+			className: "pf-sidebar-navigation__icon",
+			children: item.icon
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: "pf-sidebar-navigation__label",
+			children: item.label
+		}),
+		item.badge ? /* @__PURE__ */ jsx("span", {
+			className: "pf-sidebar-navigation__badge",
+			children: item.badge
+		}) : null
+	] });
+	const className = cx("pf-sidebar-navigation__link", item.active && "pf-sidebar-navigation__link--active", item.disabled && "pf-sidebar-navigation__link--disabled");
+	if (item.href && !item.disabled) return /* @__PURE__ */ jsx("li", {
+		className: "pf-sidebar-navigation__item",
+		children: /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			onClick: item.onClick,
+			className,
+			"aria-current": item.active ? "page" : void 0,
+			children: content
+		})
+	}, key);
+	if (item.onClick) return /* @__PURE__ */ jsx("li", {
+		className: "pf-sidebar-navigation__item",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: item.onClick,
+			className,
+			disabled: item.disabled,
+			"aria-current": item.active ? "page" : void 0,
+			children: content
+		})
+	}, key);
+	return /* @__PURE__ */ jsx("li", {
+		className: "pf-sidebar-navigation__item",
+		children: /* @__PURE__ */ jsx("span", {
+			className,
+			"aria-current": item.active ? "page" : void 0,
+			children: content
+		})
+	}, key);
+}
+var SidebarNavigation = forwardRef(function SidebarNavigation({ className, sections, header, footer, "aria-label": ariaLabel = "Sidebar navigation", ...props }, ref) {
+	return /* @__PURE__ */ jsxs("aside", {
+		ref,
+		className: cx("pf-sidebar-navigation", className),
+		...props,
+		children: [
+			header ? /* @__PURE__ */ jsx("div", {
+				className: "pf-sidebar-navigation__header",
+				children: header
+			}) : null,
+			/* @__PURE__ */ jsx("nav", {
+				className: "pf-sidebar-navigation__nav",
+				"aria-label": ariaLabel,
+				children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", {
+					className: "pf-sidebar-navigation__section",
+					children: [section.title ? /* @__PURE__ */ jsx("p", {
+						className: "pf-sidebar-navigation__section-title",
+						children: section.title
+					}) : null, /* @__PURE__ */ jsx("ul", {
+						className: "pf-sidebar-navigation__list",
+						children: section.items.map((item, itemIndex) => {
+							return renderItem(item, `${sectionIndex}-${itemIndex}-${typeof item.label === "string" ? item.label : "item"}`);
+						})
+					})]
+				}, `section-${sectionIndex}`))
+			}),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: "pf-sidebar-navigation__footer",
+				children: footer
+			}) : null
+		]
+	});
+});
+SidebarNavigation.displayName = "SidebarNavigation";
+//#endregion
+export { SidebarNavigation };