@pitchfork-ui/react 0.9.0 → 0.11.0

package/dist/components/Badge/Badge.css

@@ -24,3 +24,7 @@
   background: var(--pf-badge-warning-background, var(--color-semantic-status-warning-background));
   color: var(--pf-badge-warning-foreground, var(--color-semantic-status-warning-foreground));
 }
+.pf-badge--danger {
+  background: var(--pf-badge-danger-background, var(--color-semantic-status-danger-background));
+  color: var(--pf-badge-danger-foreground, var(--color-semantic-status-danger-foreground));
+}

package/dist/components/Button/Button.css

@@ -70,6 +70,13 @@
 .pf-button--ghost:hover:not(:disabled) {
   background: var(--pf-button-ghost-bg-hover);
 }
+.pf-button--destructive {
+  background: var(--pf-button-destructive-bg);
+  color: var(--pf-button-destructive-text);
+}
+.pf-button--destructive:hover:not(:disabled) {
+  background: var(--pf-button-destructive-bg-hover);
+}
 
 .pf-button--loading:disabled {
   cursor: wait;

package/dist/components/Collapsible/Collapsible.css

@@ -0,0 +1,86 @@
+.pf-collapsible {
+  border: 1px solid var(--pf-collapsible-border);
+  border-radius: var(--radius-md);
+}
+
+.pf-collapsible__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--pf-collapsible-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-2);
+  justify-content: space-between;
+  padding: var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-collapsible__trigger:hover:not(:disabled) {
+  background: var(--pf-collapsible-trigger-hover-bg);
+}
+
+.pf-collapsible__trigger:focus-visible {
+  box-shadow: var(--pf-collapsible-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-collapsible__trigger:disabled {
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+}
+
+.pf-collapsible__label {
+  min-width: 0;
+}
+
+.pf-collapsible__icon {
+  align-items: center;
+  color: var(--pf-collapsible-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-collapsible__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-collapsible--open .pf-collapsible__icon {
+  transform: rotate(180deg);
+}
+
+/* Height animation via the grid-template-rows 0fr → 1fr technique. */
+.pf-collapsible__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+.pf-collapsible__panel--open {
+  grid-template-rows: 1fr;
+}
+
+.pf-collapsible__content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pf-collapsible__content-inner {
+  border-top: 1px solid var(--pf-collapsible-border);
+  color: var(--pf-collapsible-content-text);
+  padding: var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-collapsible__panel,
+  .pf-collapsible__icon {
+    transition: none;
+  }
+}

package/dist/components/Collapsible/Collapsible2.js

@@ -0,0 +1,65 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useDisclosure } from "../../hooks/useDisclosure.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Collapsible.css';/* empty css            */
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Collapsible/Collapsible.tsx
+var Collapsible = forwardRef(function Collapsible({ className, trigger, open, defaultOpen, onOpenChange, disabled = false, showChevron = true, children, ...props }, ref) {
+	const baseId = useId();
+	const triggerId = `${baseId}-trigger`;
+	const contentId = `${baseId}-content`;
+	const disclosure = useDisclosure({
+		open,
+		defaultOpen,
+		onOpenChange,
+		disabled
+	});
+	const isOpen = disclosure.isOpen ?? false;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-collapsible", isOpen && "pf-collapsible--open", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			id: triggerId,
+			type: "button",
+			className: "pf-collapsible__trigger",
+			disabled,
+			"aria-expanded": isOpen,
+			"aria-controls": contentId,
+			onClick: () => disclosure.toggle(),
+			onKeyDown: (event) => {
+				if (event.key === Keys.Escape && isOpen) disclosure.close();
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "pf-collapsible__label",
+				children: trigger
+			}), showChevron ? /* @__PURE__ */ jsx("span", {
+				className: "pf-collapsible__icon",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "chevron-down",
+					"aria-hidden": true
+				})
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": triggerId,
+			className: cx("pf-collapsible__panel", isOpen && "pf-collapsible__panel--open"),
+			...!isOpen ? { inert: true } : {},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pf-collapsible__content",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pf-collapsible__content-inner",
+					children
+				})
+			})
+		})]
+	});
+});
+Collapsible.displayName = "Collapsible";
+//#endregion
+export { Collapsible };

package/dist/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,122 @@
+.pf-context-menu {
+  display: contents;
+}
+
+.pf-context-menu__menu {
+  animation: pf-context-menu-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-contextmenu-bg);
+  border: 1px solid var(--pf-contextmenu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 180px;
+  outline: none;
+  padding: var(--space-1);
+  z-index: 1100;
+}
+
+.pf-context-menu__menu--exiting {
+  animation: pf-context-menu-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pf-context-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.pf-context-menu__item {
+  align-items: center;
+  background: var(--pf-contextmenu-bg);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-contextmenu-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-context-menu__item--active {
+  background: var(--pf-contextmenu-item-active-bg);
+  color: var(--pf-contextmenu-item-active-text);
+}
+
+.pf-context-menu__item:disabled {
+  color: var(--pf-contextmenu-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-context-menu__item--destructive {
+  color: var(--pf-contextmenu-text-danger);
+}
+
+.pf-context-menu__item--destructive.pf-context-menu__item--active {
+  background: var(--pf-contextmenu-danger-active-bg);
+  color: var(--pf-contextmenu-danger-active-text);
+}
+
+.pf-context-menu__item-icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 1rem;
+  justify-content: center;
+  width: 1rem;
+}
+
+.pf-context-menu__item-icon svg {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+}
+
+.pf-context-menu__item-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.pf-context-menu__item-shortcut {
+  color: var(--pf-contextmenu-text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: var(--font-size-xs);
+}
+
+.pf-context-menu__item--active .pf-context-menu__item-shortcut {
+  color: inherit;
+}
+
+.pf-context-menu__separator {
+  background: var(--pf-contextmenu-separator);
+  height: 1px;
+  margin: var(--space-1) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-context-menu__menu,
+  .pf-context-menu__menu--exiting {
+    animation: none;
+  }
+}

package/dist/components/ContextMenu/ContextMenu2.js

@@ -0,0 +1,155 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useListNavigation } from "../../hooks/useListNavigation.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { usePresence } from "../../hooks/usePresence.js";
+import { cx } from "../../utils/cx.js";
+import './ContextMenu.css';/* empty css            */
+import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/ContextMenu/ContextMenu.tsx
+var isSeparator = (entry) => entry.separator === true;
+var VIEWPORT_PADDING = 8;
+var ContextMenu = forwardRef(function ContextMenu({ className, items, disabled = false, onOpenChange, children, onContextMenu, ...props }, ref) {
+	const menuId = useId();
+	const [isOpen, setIsOpen] = useState(false);
+	const [point, setPoint] = useState({
+		x: 0,
+		y: 0
+	});
+	const [coords, setCoords] = useState(null);
+	const rootRefs = useComposedRefs(useRef(null), ref);
+	const menuRef = useRef(null);
+	const { isMounted, isExiting } = usePresence(isOpen, 140);
+	const actionable = items.filter((e) => !isSeparator(e));
+	const { activeIndex, move, setActiveIndex } = useListNavigation({
+		items: actionable,
+		isDisabled: (item) => Boolean(item.disabled)
+	});
+	const setOpen = (open) => {
+		setIsOpen(open);
+		onOpenChange?.(open);
+	};
+	useOutsideInteraction({
+		refs: [menuRef],
+		enabled: isOpen,
+		onInteractOutside: () => setOpen(false)
+	});
+	useLayoutEffect(() => {
+		if (!isMounted || !menuRef.current) return;
+		const rect = menuRef.current.getBoundingClientRect();
+		const maxLeft = window.innerWidth - rect.width - VIEWPORT_PADDING;
+		const maxTop = window.innerHeight - rect.height - VIEWPORT_PADDING;
+		setCoords({
+			left: Math.max(VIEWPORT_PADDING, Math.min(point.x, maxLeft)),
+			top: Math.max(VIEWPORT_PADDING, Math.min(point.y, maxTop))
+		});
+	}, [
+		isMounted,
+		point.x,
+		point.y
+	]);
+	const handleContextMenu = (event) => {
+		onContextMenu?.(event);
+		if (disabled || event.defaultPrevented) return;
+		event.preventDefault();
+		setPoint({
+			x: event.clientX,
+			y: event.clientY
+		});
+		setCoords(null);
+		setActiveIndex(actionable.findIndex((item) => !item.disabled));
+		setOpen(true);
+	};
+	const select = (item) => {
+		if (item.disabled) return;
+		item.onSelect?.();
+		setOpen(false);
+	};
+	const onMenuKeyDown = (event) => {
+		if (event.key === Keys.Escape) {
+			event.preventDefault();
+			setOpen(false);
+		} else if (event.key === Keys.ArrowDown) {
+			event.preventDefault();
+			move("next");
+		} else if (event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			move("previous");
+		} else if (event.key === Keys.Home) {
+			event.preventDefault();
+			move("first");
+		} else if (event.key === Keys.End) {
+			event.preventDefault();
+			move("last");
+		} else if (event.key === Keys.Enter || event.key === Keys.Space) {
+			event.preventDefault();
+			const item = actionable[activeIndex];
+			if (item) select(item);
+		}
+	};
+	useLayoutEffect(() => {
+		if (isMounted && coords) menuRef.current?.focus();
+	}, [isMounted, coords]);
+	let actionableIndex = -1;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRefs,
+		className: cx("pf-context-menu", className),
+		onContextMenu: handleContextMenu,
+		...props,
+		children: [children, isMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+			id: menuId,
+			ref: menuRef,
+			role: "menu",
+			"aria-label": "Context menu",
+			tabIndex: -1,
+			className: cx("pf-context-menu__menu", isExiting && "pf-context-menu__menu--exiting"),
+			style: {
+				position: "fixed",
+				left: coords?.left ?? point.x,
+				top: coords?.top ?? point.y,
+				visibility: coords ? "visible" : "hidden"
+			},
+			onKeyDown: onMenuKeyDown,
+			children: items.map((entry, index) => {
+				if (isSeparator(entry)) return /* @__PURE__ */ jsx("div", {
+					role: "separator",
+					className: "pf-context-menu__separator"
+				}, `sep-${index}`);
+				actionableIndex += 1;
+				const itemIndex = actionableIndex;
+				const isActive = itemIndex === activeIndex;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					disabled: entry.disabled,
+					className: cx("pf-context-menu__item", isActive && "pf-context-menu__item--active", entry.destructive && "pf-context-menu__item--destructive"),
+					onMouseEnter: () => {
+						if (!entry.disabled) setActiveIndex(itemIndex);
+					},
+					onClick: () => select(entry),
+					children: [
+						entry.icon ? /* @__PURE__ */ jsx("span", {
+							className: "pf-context-menu__item-icon",
+							"aria-hidden": true,
+							children: entry.icon
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "pf-context-menu__item-label",
+							children: entry.label
+						}),
+						entry.shortcut ? /* @__PURE__ */ jsx("kbd", {
+							className: "pf-context-menu__item-shortcut",
+							children: entry.shortcut
+						}) : null
+					]
+				}, entry.id ?? `${entry.label}-${index}`);
+			})
+		}), document.body) : null]
+	});
+});
+ContextMenu.displayName = "ContextMenu";
+//#endregion
+export { ContextMenu };

package/dist/components/Icon/Icon2.js

@@ -127,6 +127,23 @@ var customIcons = {
 		"aria-hidden": "true",
 		children: [/* @__PURE__ */ jsx("path", { d: "M12 5v14" }), /* @__PURE__ */ jsx("path", { d: "M5 12h14" })]
 	}),
+	clock: /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })]
+	}),
 	"magnifying-glass": /* @__PURE__ */ jsxs("svg", {
 		width: "1em",
 		height: "1em",

package/dist/components/InlineCTA/InlineCTA.css

@@ -142,3 +142,7 @@
   background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--color-base-white));
   border-color: var(--pf-inline-cta-warning-border);
 }
+.pf-inline-cta--danger {
+  background: color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--color-base-white));
+  border-color: var(--pf-inline-cta-danger-border);
+}

package/dist/components/Modal/Modal.css

@@ -15,7 +15,9 @@
   display: flex;
   inset: 0;
   justify-content: center;
-  overflow-y: auto;
+  /* visible so the modal's drop shadow isn't clipped; the modal self-caps its
+     height and scrolls internally, so the viewport never needs to scroll. */
+  overflow: visible;
   padding: var(--space-2);
   position: relative;
 }
@@ -35,7 +37,9 @@
   color: var(--pf-modal-text);
   display: flex;
   flex-direction: column;
+  /* dvh keeps the modal within the visible viewport on mobile (browser chrome). */
   max-height: 92vh;
+  max-height: 92dvh;
   overflow: hidden;
   width: 100%;
 }
@@ -43,6 +47,7 @@
 @media (min-width: 768px) {
   .pf-modal {
     max-height: min(90vh, 720px);
+    max-height: min(90dvh, 720px);
   }
 }
 

package/dist/components/Resizable/Resizable.css

@@ -0,0 +1,79 @@
+.pf-resizable {
+  display: flex;
+  overflow: hidden;
+}
+
+.pf-resizable--horizontal {
+  flex-direction: row;
+}
+
+.pf-resizable--vertical {
+  flex-direction: column;
+}
+
+.pf-resizable__panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.pf-resizable__panel--fill {
+  flex: 1 1 0;
+}
+
+/* ── Handle ───────────────────────────────────────────────────────────────── */
+
+.pf-resizable__handle {
+  align-items: center;
+  background: var(--pf-resizable-handle-bg);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  transition: background var(--pf-transition-fast);
+}
+
+.pf-resizable__handle:hover,
+.pf-resizable__handle:focus-visible {
+  background: var(--pf-resizable-handle-active-bg);
+}
+
+.pf-resizable__handle:focus-visible {
+  outline: none;
+  box-shadow: var(--pf-resizable-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-resizable--horizontal .pf-resizable__handle {
+  cursor: col-resize;
+  width: var(--pf-resizable-handle-size, 6px);
+}
+
+.pf-resizable--vertical .pf-resizable__handle {
+  cursor: row-resize;
+  height: var(--pf-resizable-handle-size, 6px);
+}
+
+/* Grip affordance (dots/line) centered in the handle. */
+.pf-resizable__grip {
+  background: var(--pf-resizable-grip);
+  border-radius: var(--radius-full);
+}
+
+.pf-resizable--horizontal .pf-resizable__grip {
+  height: 24px;
+  width: 2px;
+}
+
+.pf-resizable--vertical .pf-resizable__grip {
+  height: 2px;
+  width: 24px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-resizable__handle {
+    transition: none;
+  }
+}

package/dist/components/Resizable/Resizable2.js

@@ -0,0 +1,101 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import './Resizable.css';/* empty css          */
+import { Children, forwardRef, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Resizable/Resizable.tsx
+var clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+var Resizable = forwardRef(function Resizable({ className, orientation = "horizontal", size, defaultSize = 50, onSizeChange, min = 10, max = 90, step = 2, handleLabel = "Resize panels", children, ...props }, ref) {
+	const handleId = useId();
+	const containerRef = useRef(null);
+	const containerRefs = useComposedRefs(containerRef, ref);
+	const draggingRef = useRef(false);
+	const [current, setCurrent] = useControllableState({
+		value: size,
+		defaultValue: defaultSize,
+		onChange: onSizeChange
+	});
+	const value = clamp(current ?? defaultSize, min, max);
+	const isHorizontal = orientation === "horizontal";
+	const panels = Children.toArray(children);
+	const first = panels[0] ?? null;
+	const second = panels[1] ?? null;
+	const setFromPointer = (clientX, clientY) => {
+		const el = containerRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const pct = isHorizontal ? (clientX - rect.left) / rect.width * 100 : (clientY - rect.top) / rect.height * 100;
+		setCurrent(clamp(Math.round(pct), min, max));
+	};
+	const onPointerDown = (event) => {
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		draggingRef.current = true;
+	};
+	const onPointerMove = (event) => {
+		if (!draggingRef.current) return;
+		setFromPointer(event.clientX, event.clientY);
+	};
+	const onPointerUp = (event) => {
+		draggingRef.current = false;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		const decKey = isHorizontal ? Keys.ArrowLeft : Keys.ArrowUp;
+		const incKey = isHorizontal ? Keys.ArrowRight : Keys.ArrowDown;
+		if (event.key === decKey) {
+			event.preventDefault();
+			setCurrent(clamp(value - step, min, max));
+		} else if (event.key === incKey) {
+			event.preventDefault();
+			setCurrent(clamp(value + step, min, max));
+		} else if (event.key === Keys.Home) {
+			event.preventDefault();
+			setCurrent(min);
+		} else if (event.key === Keys.End) {
+			event.preventDefault();
+			setCurrent(max);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRefs,
+		className: cx("pf-resizable", `pf-resizable--${orientation}`, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "pf-resizable__panel",
+				style: { flexBasis: `${value}%` },
+				children: first
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: handleId,
+				role: "separator",
+				tabIndex: 0,
+				"aria-orientation": isHorizontal ? "vertical" : "horizontal",
+				"aria-label": handleLabel,
+				"aria-valuenow": value,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				className: "pf-resizable__handle",
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onKeyDown,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "pf-resizable__grip",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "pf-resizable__panel pf-resizable__panel--fill",
+				children: second
+			})
+		]
+	});
+});
+Resizable.displayName = "Resizable";
+//#endregion
+export { Resizable };