@pitchfork-ui/react 0.7.0 → 0.9.0

package/dist/components/NumberInput/NumberInput.css

@@ -0,0 +1,98 @@
+.pf-numberinput {
+  align-items: stretch;
+  background: var(--pf-numberinput-bg);
+  border: 1px solid var(--pf-numberinput-border);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  min-height: 40px;
+  overflow: hidden;
+  width: 100%;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-numberinput:focus-within {
+  border-color: var(--pf-numberinput-focus-border);
+  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-numberinput--invalid {
+  border-color: var(--pf-numberinput-invalid-border);
+}
+
+.pf-numberinput__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-numberinput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0 var(--space-3);
+  text-align: center;
+  width: 100%;
+}
+
+.pf-numberinput__input::placeholder {
+  color: var(--pf-numberinput-placeholder);
+}
+
+.pf-numberinput__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-numberinput:has(.pf-numberinput__input:disabled) {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  opacity: 0.6;
+}
+
+.pf-numberinput__step {
+  align-items: center;
+  align-self: stretch;
+  background: var(--pf-numberinput-step-bg);
+  border: none;
+  color: var(--pf-numberinput-step-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: 0;
+  width: 40px;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.pf-numberinput__step:hover:not(:disabled) {
+  background: var(--pf-numberinput-step-hover-bg);
+  color: var(--pf-numberinput-step-hover-text);
+}
+
+.pf-numberinput__step:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-numberinput__step--decrement {
+  border-inline-end: 1px solid var(--pf-numberinput-border);
+}
+
+.pf-numberinput__step--increment {
+  border-inline-start: 1px solid var(--pf-numberinput-border);
+}
+
+.pf-numberinput__step svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-numberinput,
+  .pf-numberinput__step {
+    transition: none;
+  }
+}

package/dist/components/NumberInput/NumberInput2.js

@@ -0,0 +1,166 @@
+"use client";
+import { Keys, composeDescribedBy } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './NumberInput.css';/* empty css            */
+import { forwardRef, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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 = (n, min, max) => Math.min(Math.max(n, min), max);
+var NumberInput = 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 = 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(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] = useState(false);
+	const [draft, setDraft] = useState(() => formatValue(currentValue));
+	const displayValue = focused ? draft : formatValue(currentValue);
+	const commit = (next) => {
+		if (next === null) {
+			setCurrentValue(null);
+			setDraft("");
+			return;
+		}
+		const clamped = round(clamp(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__ */ jsx(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("pf-numberinput", error && "pf-numberinput--invalid"),
+			children: [
+				/* @__PURE__ */ 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__ */ jsx(Icon, {
+						name: "minus",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ 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(parsed, min, max)));
+					},
+					onBlur: () => {
+						setFocused(false);
+						if (draft.trim() === "") commit(null);
+						else {
+							const parsed = Number(draft);
+							commit(Number.isNaN(parsed) ? currentValue : parsed);
+						}
+					},
+					onKeyDown
+				}),
+				/* @__PURE__ */ 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__ */ jsx(Icon, {
+						name: "plus",
+						"aria-hidden": true
+					})
+				}),
+				name ? /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: currentValue ?? ""
+				}) : null
+			]
+		})
+	});
+});
+NumberInput.displayName = "NumberInput";
+//#endregion
+export { NumberInput };

package/dist/components/PageHeader/PageHeader2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs2.js";
 import './PageHeader.css';/* empty css           */

package/dist/components/Pagination/Pagination2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Pagination.css';/* empty css           */
 import * as React from "react";

package/dist/components/PieChart/PieChart2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './PieChart.css';/* empty css         */
 import { forwardRef } from "react";

package/dist/components/Popover/Popover.css

@@ -0,0 +1,46 @@
+.pf-popover {
+  position: fixed;
+  z-index: 1100;
+  max-width: min(360px, calc(100vw - 16px));
+  background: var(--pf-popover-bg);
+  border: 1px solid var(--pf-popover-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-popover-elevation-popover-shadow, var(--pf-elevation-popover-shadow));
+  color: var(--pf-popover-text);
+  padding: var(--space-4);
+  transform-origin: top center;
+  animation: pf-popover-in var(--duration-fast) var(--easing-decelerate);
+}
+
+.pf-popover:focus-visible {
+  outline: none;
+}
+
+@keyframes pf-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.pf-popover--exiting {
+  animation: pf-popover-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-popover-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-popover,
+  .pf-popover--exiting {
+    animation: none;
+  }
+}

package/dist/components/Popover/Popover2.js

@@ -0,0 +1,77 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { usePresence } from "../../hooks/usePresence.js";
+import { cx } from "../../utils/cx.js";
+import './Popover.css';/* empty css        */
+import { cloneElement, useEffect, useId, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#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 = useId();
+	const triggerRef = useRef(null);
+	const contentRef = 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 = useRef(false);
+	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__ */ jsxs(Fragment, { children: [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" ? createPortal(/* @__PURE__ */ 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
+export { Popover };

package/dist/components/ProgressIndicators/ProgressIndicators2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './ProgressIndicators.css';/* empty css                   */
 import { forwardRef } from "react";

package/dist/components/ProgressSteps/ProgressSteps2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './ProgressSteps.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/RadarChart/RadarChart2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './RadarChart.css';/* empty css           */
 import { forwardRef } from "react";

package/dist/components/RadioButton/RadioButton2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './RadioButton.css';/* empty css            */
 import { forwardRef, useId } from "react";

package/dist/components/RadioGroup/RadioGroup2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './RadioGroup.css';/* empty css           */
 import { forwardRef, useId, useState } from "react";

package/dist/components/Rating/Rating2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Rating.css';/* empty css       */

package/dist/components/RichTextEditor/RichTextEditor2.js

@@ -1,3 +1,4 @@
+"use client";
 import { composeDescribedBy } from "../../a11y/index.js";
 import { cx } from "../../utils/cx.js";
 import { FieldWrapper } from "../../utils/FieldWrapper.js";

package/dist/components/SectionFooter/SectionFooter2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './SectionFooter.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/SectionHeader/SectionHeader2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './SectionHeader.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/Select/Select2.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";

package/dist/components/SidebarNavigation/SidebarNavigation2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './SidebarNavigation.css';/* empty css                  */
 import { forwardRef } from "react";

package/dist/components/SlideoutMenu/SlideoutMenu2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './SlideoutMenu.css';/* empty css             */

package/dist/components/Slider/Slider2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Slider.css';/* empty css       */
 import { forwardRef, useId, useMemo, useState } from "react";

package/dist/components/Sparkline/Sparkline2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Sparkline.css';/* empty css          */
 import { forwardRef, useMemo } from "react";

package/dist/components/Switch/Switch2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Switch.css';/* empty css       */
 import { forwardRef, useId } from "react";

package/dist/components/Table/Table2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Table.css';/* empty css      */
 import { useMemo, useState } from "react";

package/dist/components/Tabs/Tabs2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Tabs.css';/* empty css     */
 import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/components/Tag/Tag2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Tag.css';/* empty css    */

package/dist/components/Textarea/Textarea2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { FieldWrapper } from "../../utils/FieldWrapper.js";
 import './Textarea.css';/* empty css         */

package/dist/components/Toast/Toast.js

@@ -0,0 +1,130 @@
+"use client";
+import { Notification, NotificationStack } from "../Notification/Notification2.js";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Toast/Toast.tsx
+var _emit = null;
+function ToastItem({ entry, onRemove }) {
+	const { id, shouldExit } = entry;
+	const handleRemove = useCallback(() => onRemove(id), [onRemove, id]);
+	useEffect(() => {
+		if (!shouldExit) return;
+		const t = setTimeout(handleRemove, 270);
+		return () => clearTimeout(t);
+	}, [shouldExit, handleRemove]);
+	return /* @__PURE__ */ 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] = useState([]);
+	const timers = useRef(/* @__PURE__ */ new Map());
+	const remove = useCallback((id) => {
+		timers.current.delete(id);
+		setEntries((prev) => prev.filter((e) => e.id !== id));
+	}, []);
+	const signalExit = useCallback((id) => {
+		timers.current.delete(id);
+		setEntries((prev) => prev.map((e) => e.id === id ? {
+			...e,
+			shouldExit: true
+		} : e));
+	}, []);
+	const toast = 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 = useCallback((id) => {
+		const t = timers.current.get(id);
+		if (t) clearTimeout(t);
+		signalExit(id);
+	}, [signalExit]);
+	const dismissAll = useCallback(() => {
+		timers.current.forEach(clearTimeout);
+		timers.current.clear();
+		setEntries((prev) => prev.map((e) => ({
+			...e,
+			shouldExit: true
+		})));
+	}, []);
+	useEffect(() => {
+		_emit = toast;
+		return () => {
+			if (_emit === toast) _emit = null;
+		};
+	}, [toast]);
+	useEffect(() => {
+		const map = timers.current;
+		return () => map.forEach(clearTimeout);
+	}, []);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: {
+			toast,
+			dismiss,
+			dismissAll
+		},
+		children: [children, typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx(NotificationStack, {
+			placement,
+			children: entries.map((entry) => /* @__PURE__ */ jsx(ToastItem, {
+				entry,
+				onRemove: remove
+			}, entry.id))
+		}), document.body) : null]
+	});
+}
+var ToastContext = createContext(null);
+function useToast() {
+	const ctx = 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
+export { ToastProvider, toast, useToast };

package/dist/components/Tooltip/Tooltip2.js

@@ -1,3 +1,4 @@
+"use client";
 import { usePresence } from "../../hooks/usePresence.js";
 import { cx } from "../../utils/cx.js";
 import './Tooltip.css';/* empty css        */

package/dist/components/TreeView/TreeView2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './TreeView.css';/* empty css         */
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";

package/dist/components/UtilityButton/UtilityButton2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './UtilityButton.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/VideoPlayer/VideoPlayer2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './VideoPlayer.css';/* empty css            */
 import { forwardRef, useId } from "react";