@pitchfork-ui/react 0.6.0 → 0.8.0

package/dist/components/NumberInput/NumberInput2.js

@@ -0,0 +1,165 @@
+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/Pagination/Pagination.css

@@ -1,6 +1,7 @@
 .pf-pagination {
   align-items: center;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--space-2);
 }
 
@@ -16,7 +17,9 @@
 
 .pf-pagination__list {
   align-items: center;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-2);
   list-style: none;
   margin: 0;

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,76 @@
+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/Toast/Toast.js

@@ -0,0 +1,129 @@
+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 };