@pitchfork-ui/react 0.1.9

package/dist/index23.js

@@ -0,0 +1,13 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Badge/Badge.tsx
+var Badge = forwardRef(({ className, variant = "neutral", ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cx("pf-badge", `pf-badge--${variant}`, className),
+	...props
+}));
+Badge.displayName = "Badge";
+//#endregion
+export { Badge };

package/dist/index25.js

@@ -0,0 +1,38 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/Card.tsx
+function Card({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-card", className),
+		...props
+	});
+}
+Card.displayName = "Card";
+function CardHeader({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-card__header", className),
+		...props
+	});
+}
+CardHeader.displayName = "CardHeader";
+function CardContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-card__content", className),
+		...props
+	});
+}
+CardContent.displayName = "CardContent";
+function CardFooter({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-card__footer", className),
+		...props
+	});
+}
+CardFooter.displayName = "CardFooter";
+//#endregion
+export { Card, CardContent, CardFooter, CardHeader };

package/dist/index27.js

@@ -0,0 +1,68 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CreditCard/CreditCard.tsx
+var maskCardNumber = (value) => {
+	const digits = value.replace(/\D+/g, "");
+	if (digits.length <= 4) return digits;
+	const visible = digits.slice(-4);
+	const hiddenLength = digits.length - 4;
+	return `${"*".repeat(hiddenLength)}${visible}`.replace(/(.{4})/g, "$1 ").trim();
+};
+var formatCardNumber = (value) => {
+	return value.replace(/\D+/g, "").replace(/(.{4})/g, "$1 ").trim();
+};
+var CreditCard = forwardRef(({ brand = "generic", cardNumber, cardholderName, expiry, cvc, masked = true, className, ...props }, ref) => {
+	const displayNumber = masked ? maskCardNumber(cardNumber) : formatCardNumber(cardNumber);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-credit-card", `is-${brand}`, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "top-row",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "chip",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "brand",
+					children: brand.toUpperCase()
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "number",
+				children: displayNumber
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "meta",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "label",
+						children: "Card holder"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "value",
+						children: cardholderName
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "label",
+						children: "Expires"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "value",
+						children: expiry
+					})] }),
+					cvc ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "label",
+						children: "CVC"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "value",
+						children: masked ? "***" : cvc
+					})] }) : null
+				]
+			})
+		]
+	});
+});
+CreditCard.displayName = "CreditCard";
+//#endregion
+export { CreditCard };

package/dist/index29.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/Checkbox/Checkbox.tsx
+var Checkbox = forwardRef(({ id, label, className, ...props }, ref) => {
+	const generatedId = useId();
+	const checkboxId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-checkbox-field",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			id: checkboxId,
+			type: "checkbox",
+			className: cx("pf-checkbox", className),
+			...props
+		}), label ? /* @__PURE__ */ jsx("label", {
+			htmlFor: checkboxId,
+			children: label
+		}) : null]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };

package/dist/index3.js

@@ -0,0 +1,32 @@
+//#region src/a11y/index.ts
+var Keys = {
+	ArrowDown: "ArrowDown",
+	ArrowLeft: "ArrowLeft",
+	ArrowRight: "ArrowRight",
+	ArrowUp: "ArrowUp",
+	End: "End",
+	Enter: "Enter",
+	Escape: "Escape",
+	Home: "Home",
+	Space: " ",
+	Tab: "Tab"
+};
+var isActivationKey = (key) => key === Keys.Enter || key === Keys.Space;
+var composeDescribedBy = (...ids) => ids.filter(Boolean).join(" ") || void 0;
+var getFocusableElements = (container) => {
+	const selector = [
+		"a[href]",
+		"button:not([disabled])",
+		"input:not([disabled])",
+		"select:not([disabled])",
+		"textarea:not([disabled])",
+		"[contenteditable=\"true\"]",
+		"[tabindex]:not([tabindex=\"-1\"])"
+	].join(",");
+	return Array.from(container.querySelectorAll(selector)).filter((element) => {
+		if (element.hasAttribute("disabled") || element.getAttribute("aria-hidden") === "true") return false;
+		return element.offsetParent !== null;
+	});
+};
+//#endregion
+export { Keys, composeDescribedBy, getFocusableElements, isActivationKey };

package/dist/index30.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/useAnchoredPosition.ts
+function useAnchoredPosition({ anchorRef, floatingRef, enabled = true, align = "start", offset = 8, viewportPadding = 8, minWidth, matchAnchorWidth = true, flip = false }) {
+	const [style, setStyle] = useState({});
+	useEffect(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const updatePosition = () => {
+			const anchor = anchorRef.current;
+			if (!anchor) return;
+			const anchorRect = anchor.getBoundingClientRect();
+			const floatingRect = floatingRef?.current?.getBoundingClientRect();
+			const width = Math.max(matchAnchorWidth ? anchorRect.width : 0, minWidth ?? 0, floatingRect?.width ?? 0);
+			const maxLeft = window.innerWidth - viewportPadding - width;
+			const alignedLeft = align === "end" ? anchorRect.right - width : anchorRect.left;
+			const left = maxLeft >= viewportPadding ? Math.min(Math.max(alignedLeft, viewportPadding), maxLeft) : viewportPadding;
+			const floatingHeight = floatingRect?.height ?? 0;
+			const belowTop = anchorRect.bottom + offset;
+			const aboveTop = anchorRect.top - floatingHeight - offset;
+			const rawTop = flip && floatingHeight > 0 && window.innerHeight - anchorRect.bottom < floatingHeight + offset + viewportPadding ? aboveTop : belowTop;
+			const maxTop = window.innerHeight - viewportPadding - floatingHeight;
+			setStyle({
+				left,
+				top: floatingHeight > 0 && maxTop >= viewportPadding ? Math.min(Math.max(rawTop, viewportPadding), maxTop) : rawTop,
+				width: matchAnchorWidth ? width : void 0,
+				minWidth: matchAnchorWidth ? void 0 : width
+			});
+		};
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [
+		align,
+		anchorRef,
+		enabled,
+		floatingRef,
+		flip,
+		matchAnchorWidth,
+		minWidth,
+		offset,
+		viewportPadding
+	]);
+	return style;
+}
+//#endregion
+export { useAnchoredPosition };

package/dist/index31.js

@@ -0,0 +1,15 @@
+//#region src/hooks/useComposedRefs.ts
+function useComposedRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") {
+				ref(node);
+				return;
+			}
+			ref.current = node;
+		});
+	};
+}
+//#endregion
+export { useComposedRefs };

package/dist/index32.js

@@ -0,0 +1,22 @@
+import { useCallback, useState } from "react";
+//#region src/hooks/useControllableState.ts
+function useControllableState({ value, defaultValue, onChange }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? value : internalValue;
+	return [
+		currentValue,
+		useCallback((nextValue) => {
+			const resolvedValue = typeof nextValue === "function" ? nextValue(currentValue) : nextValue;
+			if (!isControlled) setInternalValue(resolvedValue);
+			onChange?.(resolvedValue);
+		}, [
+			currentValue,
+			isControlled,
+			onChange
+		]),
+		isControlled
+	];
+}
+//#endregion
+export { useControllableState };

package/dist/index33.js

@@ -0,0 +1,25 @@
+import { useControllableState } from "./index32.js";
+import { useCallback } from "react";
+//#region src/hooks/useDisclosure.ts
+function useDisclosure({ open, defaultOpen = false, onOpenChange, disabled = false } = {}) {
+	const [isOpen, setIsOpen] = useControllableState({
+		value: open,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	return {
+		isOpen,
+		setIsOpen,
+		open: useCallback(() => {
+			if (!disabled) setIsOpen(true);
+		}, [disabled, setIsOpen]),
+		close: useCallback(() => {
+			setIsOpen(false);
+		}, [setIsOpen]),
+		toggle: useCallback(() => {
+			if (!disabled) setIsOpen((current) => !current);
+		}, [disabled, setIsOpen])
+	};
+}
+//#endregion
+export { useDisclosure };

package/dist/index34.js

@@ -0,0 +1,55 @@
+import { Keys, getFocusableElements } from "./index3.js";
+import { useEffect } from "react";
+//#region src/hooks/useFocusTrap.ts
+function useFocusTrap({ containerRef, enabled = true, onEscape, restoreFocus = true }) {
+	useEffect(() => {
+		if (!enabled || typeof document === "undefined") return;
+		const container = containerRef.current;
+		const previousActiveElement = document.activeElement;
+		const initialFocusable = container ? getFocusableElements(container)[0] : void 0;
+		if (initialFocusable) initialFocusable.focus();
+		else container?.focus();
+		const onKeyDown = (event) => {
+			if (event.key === Keys.Escape) {
+				onEscape?.();
+				return;
+			}
+			if (event.key !== Keys.Tab || !containerRef.current) return;
+			const focusableElements = getFocusableElements(containerRef.current);
+			if (focusableElements.length === 0) {
+				event.preventDefault();
+				containerRef.current.focus();
+				return;
+			}
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+			const activeElement = document.activeElement;
+			if (!(activeElement ? containerRef.current.contains(activeElement) : false)) {
+				event.preventDefault();
+				(event.shiftKey ? lastElement : firstElement).focus();
+				return;
+			}
+			if (event.shiftKey && activeElement === firstElement) {
+				event.preventDefault();
+				lastElement.focus();
+				return;
+			}
+			if (!event.shiftKey && activeElement === lastElement) {
+				event.preventDefault();
+				firstElement.focus();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			if (restoreFocus) previousActiveElement?.focus?.();
+		};
+	}, [
+		containerRef,
+		enabled,
+		onEscape,
+		restoreFocus
+	]);
+}
+//#endregion
+export { useFocusTrap };

package/dist/index35.js

@@ -0,0 +1,36 @@
+import { useCallback, useMemo, useState } from "react";
+//#region src/hooks/useListNavigation.ts
+function useListNavigation({ items, isDisabled = () => false, initialIndex }) {
+	const enabledIndexes = useMemo(() => items.map((item, index) => ({
+		item,
+		index
+	})).filter(({ item, index }) => !isDisabled(item, index)).map(({ index }) => index), [isDisabled, items]);
+	const firstEnabledIndex = enabledIndexes[0] ?? -1;
+	const lastEnabledIndex = enabledIndexes[enabledIndexes.length - 1] ?? -1;
+	const [activeIndex, setActiveIndex] = useState(initialIndex ?? firstEnabledIndex);
+	const getNextEnabledIndex = useCallback((startIndex, direction) => {
+		if (enabledIndexes.length === 0) return -1;
+		const currentEnabledPosition = enabledIndexes.indexOf(startIndex);
+		return enabledIndexes[((currentEnabledPosition === -1 ? direction === 1 ? -1 : 0 : currentEnabledPosition) + direction + enabledIndexes.length) % enabledIndexes.length] ?? -1;
+	}, [enabledIndexes]);
+	return {
+		activeIndex,
+		enabledIndexes,
+		firstEnabledIndex,
+		lastEnabledIndex,
+		getNextEnabledIndex,
+		move: useCallback((action, currentIndex = activeIndex) => {
+			const nextIndex = action === "first" ? firstEnabledIndex : action === "last" ? lastEnabledIndex : getNextEnabledIndex(currentIndex, action === "next" ? 1 : -1);
+			if (nextIndex >= 0) setActiveIndex(nextIndex);
+			return nextIndex;
+		}, [
+			activeIndex,
+			firstEnabledIndex,
+			getNextEnabledIndex,
+			lastEnabledIndex
+		]),
+		setActiveIndex
+	};
+}
+//#endregion
+export { useListNavigation };

package/dist/index36.js

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+//#region src/hooks/useOutsideInteraction.ts
+function useOutsideInteraction({ refs, enabled = true, onInteractOutside, eventName = "pointerdown" }) {
+	useEffect(() => {
+		if (!enabled || typeof document === "undefined") return;
+		const handleEvent = (event) => {
+			const target = event.target;
+			if (!refs.some((ref) => ref.current?.contains(target))) onInteractOutside(event);
+		};
+		document.addEventListener(eventName, handleEvent);
+		return () => {
+			document.removeEventListener(eventName, handleEvent);
+		};
+	}, [
+		enabled,
+		eventName,
+		onInteractOutside,
+		refs
+	]);
+}
+//#endregion
+export { useOutsideInteraction };

package/dist/index38.js

@@ -0,0 +1,149 @@
+import { Keys, isActivationKey } from "./index3.js";
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+import { useAnchoredPosition } from "./index30.js";
+import { useDisclosure } from "./index33.js";
+import { useListNavigation } from "./index35.js";
+import { useOutsideInteraction } from "./index36.js";
+/* empty css        */
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Dropdown/Dropdown.tsx
+var Dropdown = forwardRef(({ label = "Actions", items, align = "start", disabled, className, maxVisibleItems, ...props }, ref) => {
+	const menuId = useId();
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const menuRef = useRef(null);
+	const disclosure = useDisclosure({ disabled });
+	const { isOpen } = disclosure;
+	const { activeIndex, firstEnabledIndex, move, setActiveIndex } = useListNavigation({
+		items,
+		isDisabled: (item) => Boolean(item.disabled)
+	});
+	const menuStyle = useAnchoredPosition({
+		anchorRef: triggerRef,
+		align,
+		enabled: isOpen,
+		matchAnchorWidth: false,
+		minWidth: 200
+	});
+	useOutsideInteraction({
+		refs: [rootRef, menuRef],
+		enabled: isOpen,
+		onInteractOutside: disclosure.close
+	});
+	useEffect(() => {
+		if (!isOpen) return;
+		setActiveIndex(firstEnabledIndex);
+	}, [
+		firstEnabledIndex,
+		isOpen,
+		setActiveIndex
+	]);
+	useEffect(() => {
+		const handleEscape = (event) => {
+			if (event.key === Keys.Escape) {
+				disclosure.close();
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [disclosure]);
+	const onTriggerKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === Keys.ArrowDown || event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			if (!isOpen) {
+				disclosure.open();
+				return;
+			}
+			const startIndex = activeIndex >= 0 ? activeIndex : 0;
+			move(event.key === Keys.ArrowDown ? "next" : "previous", startIndex);
+		}
+		if (isActivationKey(event.key)) {
+			event.preventDefault();
+			disclosure.toggle();
+		}
+	};
+	let menuMaxHeight;
+	if (maxVisibleItems && items.length > 0) menuMaxHeight = `calc(${maxVisibleItems} * 36px)`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cx("pf-dropdown", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: (node) => {
+				triggerRef.current = node;
+				if (typeof ref === "function") ref(node);
+				else if (ref) ref.current = node;
+			},
+			type: "button",
+			className: "pf-dropdown__trigger",
+			"aria-haspopup": "menu",
+			"aria-expanded": isOpen,
+			"aria-controls": isOpen ? menuId : void 0,
+			onClick: () => {
+				disclosure.toggle();
+			},
+			onKeyDown: onTriggerKeyDown,
+			disabled,
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+				className: cx("pf-dropdown__chevron", isOpen && "pf-dropdown__chevron--open"),
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "chevron-down",
+					"aria-hidden": true
+				})
+			})]
+		}), isOpen && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+			id: menuId,
+			ref: menuRef,
+			className: "pf-dropdown__menu",
+			role: "menu",
+			style: {
+				...menuStyle,
+				...menuMaxHeight ? {
+					maxHeight: menuMaxHeight,
+					overflowY: "auto"
+				} : {}
+			},
+			children: items.map((item, index) => {
+				const isActive = index === activeIndex;
+				return /* @__PURE__ */ jsxs("button", {
+					id: `${menuId}-item-${index}`,
+					type: "button",
+					role: "menuitem",
+					disabled: item.disabled,
+					className: cx("pf-dropdown__item", isActive && "pf-dropdown__item--active", item.destructive && "pf-dropdown__item--destructive"),
+					onMouseEnter: () => {
+						if (!item.disabled) setActiveIndex(index);
+					},
+					onClick: () => {
+						if (item.disabled) return;
+						item.onSelect?.();
+						disclosure.close();
+						triggerRef.current?.focus();
+					},
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "pf-dropdown__item-left",
+						children: [item.icon ? /* @__PURE__ */ jsx("span", {
+							className: "pf-dropdown__item-icon",
+							"aria-hidden": true,
+							children: item.icon
+						}) : null, /* @__PURE__ */ jsx("span", { children: item.label })]
+					}), item.shortcut ? /* @__PURE__ */ jsx("span", {
+						className: "pf-dropdown__item-shortcut",
+						children: item.shortcut
+					}) : null]
+				}, item.id ?? `${item.label}-${index}`);
+			})
+		}), document.body) : null]
+	});
+});
+Dropdown.displayName = "Dropdown";
+//#endregion
+export { Dropdown };

package/dist/index4.js

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };