@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Tag/Tag.css

@@ -0,0 +1,64 @@
+.pf-tag {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  gap: var(--space-1);
+  min-height: 26px;
+  padding: 0 var(--space-2);
+}
+
+.pf-tag__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.pf-tag--neutral {
+  background: var(--pf-tag-neutral-bg);
+  color: var(--pf-tag-neutral-text);
+}
+
+.pf-tag--brand {
+  background: var(--pf-tag-brand-bg);
+  color: var(--pf-tag-brand-text);
+}
+
+.pf-tag--success {
+  background: var(--pf-tag-success-bg);
+  color: var(--pf-tag-success-text);
+}
+
+.pf-tag--warning {
+  background: var(--pf-tag-warning-bg);
+  color: var(--pf-tag-warning-text);
+}
+
+.pf-tag__dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: currentColor;
+  cursor: pointer;
+  display: inline-flex;
+  height: 18px;
+  justify-content: center;
+  margin-inline-end: -2px;
+  padding: 0;
+  width: 18px;
+}
+
+.pf-tag__dismiss:hover {
+  background: var(--pf-tag-subtle-hover-overlay, var(--pf-subtle-hover-overlay));
+}
+
+.pf-tag__dismiss:focus-visible {
+  box-shadow: var(--pf-tag-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-tag__dismiss svg {
+  display: block;
+  height: 12px;
+  width: 12px;
+}

package/dist/{index106.js → components/Tag/Tag2.js}

@@ -1,6 +1,6 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css         */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Tag.css';/* empty css    */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tag/Tag.tsx

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1,52 @@
+.pf-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.pf-field__label {
+  color: var(--pf-field-label);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-field__description {
+  color: var(--pf-field-description);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-field__error {
+  color: var(--pf-field-error);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-textarea {
+  background: var(--pf-textarea-bg);
+  border: 1px solid var(--pf-textarea-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-textarea-text);
+  font: inherit;
+  line-height: 1.45;
+  min-height: 96px;
+  padding: var(--space-2) var(--space-3);
+  resize: vertical;
+  width: 100%;
+}
+
+.pf-textarea:focus {
+  outline: none;
+}
+
+.pf-textarea:focus-visible {
+  border-color: var(--pf-textarea-focus-border);
+  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-textarea::placeholder {
+  color: var(--pf-textarea-text-muted);
+}
+
+.pf-textarea--invalid {
+  border-color: var(--pf-textarea-invalid-border);
+}

package/dist/{index112.js → components/Textarea/Textarea2.js}

@@ -1,6 +1,6 @@
-import { cx } from "./index4.js";
-import { FieldWrapper } from "./index19.js";
-/* empty css         */
+import { cx } from "../../utils/cx.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './Textarea.css';/* empty css         */
 import { forwardRef, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Textarea/Textarea.tsx

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1,61 @@
+.pf-tooltip__trigger {
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+}
+
+.pf-tooltip__trigger:has(:focus-visible) {
+  outline: var(--pf-focus-ring);
+  outline-offset: 2px;
+}
+
+.pf-tooltip {
+  background: var(--pf-tooltip-bg);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-tooltip-elevation-tooltip-shadow, var(--pf-elevation-tooltip-shadow));
+  color: var(--pf-tooltip-text);
+  font-size: var(--font-size-sm);
+  line-height: 1.35;
+  max-height: calc(100vh - 16px);
+  max-width: min(260px, calc(100vw - 16px));
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  padding: var(--space-2) var(--pf-tooltip-padding-x);
+  pointer-events: none;
+  position: fixed;
+  z-index: 1100;
+}
+
+/* Entrance animation — uses motion tokens via theme aliases */
+@keyframes pf-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pf-tooltip {
+  animation: pf-tooltip-in var(--pf-transition-fast);
+}
+
+/* Exit fade — plays while the tooltip is dismissed (presence handling) */
+@keyframes pf-tooltip-out {
+  to {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+}
+
+.pf-tooltip--exiting {
+  animation: pf-tooltip-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-tooltip,
+  .pf-tooltip--exiting {
+    animation: none;
+  }
+}

package/dist/{index114.js → components/Tooltip/Tooltip2.js}

@@ -1,5 +1,6 @@
-import { cx } from "./index4.js";
-/* empty css         */
+import { usePresence } from "../../hooks/usePresence.js";
+import { cx } from "../../utils/cx.js";
+import './Tooltip.css';/* empty css        */
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -87,6 +88,7 @@ var Tooltip = forwardRef(function Tooltip({ content, children, open, placement =
 	const [resolvedPlacement, setResolvedPlacement] = useState(placement);
 	const isControlled = open !== void 0;
 	const isVisible = !disabled && (isControlled ? open : isOpen);
+	const { isMounted, isExiting } = usePresence(Boolean(isVisible), 160);
 	const clearShowTimer = () => {
 		if (showTimerRef.current !== void 0) {
 			window.clearTimeout(showTimerRef.current);
@@ -105,8 +107,6 @@ var Tooltip = forwardRef(function Tooltip({ content, children, open, placement =
 		clearShowTimer();
 		if (isControlled) return;
 		setIsOpen(false);
-		setStyle({ visibility: "hidden" });
-		setResolvedPlacement(placement);
 	};
 	useEffect(() => {
 		return () => {
@@ -141,11 +141,11 @@ var Tooltip = forwardRef(function Tooltip({ content, children, open, placement =
 		},
 		"aria-describedby": isVisible ? tooltipId : void 0,
 		children: children ?? /* @__PURE__ */ jsx("span", {})
-	}), isVisible && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+	}), isMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
 		id: tooltipId,
 		ref: tooltipRef,
 		role: "tooltip",
-		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, className),
+		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, isExiting && "pf-tooltip--exiting", className),
 		style,
 		children: content
 	}), document.body) : null] });

package/dist/components/TreeView/TreeView.css

@@ -0,0 +1,109 @@
+.pf-tree-view {
+  background: var(--pf-treeview-bg);
+  border: 1px solid var(--pf-treeview-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-2);
+}
+
+.pf-tree-view__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-tree-view__item {
+  min-width: 0;
+}
+
+.pf-tree-view__row {
+  align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  min-width: 0;
+  padding-inline-start: calc(var(--pf-tree-level, 0) * var(--space-4));
+}
+
+.pf-tree-view__toggle-wrap {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 24px;
+}
+
+.pf-tree-view__toggle,
+.pf-tree-view__spacer {
+  align-items: center;
+  color: var(--pf-treeview-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.pf-tree-view__toggle {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 0;
+}
+
+.pf-tree-view__toggle:hover {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+}
+
+.pf-tree-view__node {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-treeview-text-muted);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--space-2);
+  grid-template-columns: auto 1fr auto;
+  justify-items: start;
+  min-height: 34px;
+  min-width: 0;
+  padding: 0 var(--space-2);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-tree-view__node:hover {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+}
+
+.pf-tree-view__node:focus-visible {
+  box-shadow: var(--pf-treeview-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-tree-view__row--selected .pf-tree-view__node {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-tree-view__row--disabled .pf-tree-view__node {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-tree-view__icon,
+.pf-tree-view__badge {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.pf-tree-view__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/{index116.js → components/TreeView/TreeView2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css         */
+import { cx } from "../../utils/cx.js";
+import './TreeView.css';/* empty css         */
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TreeView/TreeView.tsx

package/dist/components/UtilityButton/UtilityButton.css

@@ -0,0 +1,90 @@
+.pf-utility-button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-1);
+  justify-content: center;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pf-utility-button:focus-visible {
+  box-shadow: var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-utility-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-utility-button--sm {
+  font-size: var(--font-size-sm);
+  min-height: 32px;
+  padding: 0 var(--space-2);
+}
+
+.pf-utility-button--md {
+  font-size: var(--font-size-sm);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+
+.pf-utility-button--neutral {
+  background: var(--pf-utility-btn-neutral-bg);
+  border-color: var(--pf-utility-btn-neutral-border);
+  color: var(--pf-utility-btn-neutral-text);
+}
+
+.pf-utility-button--neutral:hover:not(:disabled) {
+  background: var(--pf-utility-btn-neutral-bg-hover);
+  border-color: var(--pf-utility-btn-neutral-border-hover);
+}
+
+.pf-utility-button--brand {
+  background: var(--pf-utility-btn-brand-bg);
+  border-color: var(--pf-utility-btn-brand-border);
+  color: var(--pf-utility-btn-brand-text);
+}
+
+.pf-utility-button--brand:hover:not(:disabled) {
+  background: var(--pf-utility-btn-brand-bg-hover);
+}
+
+.pf-utility-button--danger {
+  background: var(--pf-utility-btn-danger-bg);
+  border-color: var(--pf-utility-btn-danger-border);
+  color: var(--pf-utility-btn-danger-text);
+}
+
+.pf-utility-button--danger:hover:not(:disabled) {
+  background: var(--pf-utility-btn-danger-bg-hover);
+}
+
+.pf-utility-button__icon {
+  display: inline-flex;
+}
+
+.pf-utility-button__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-utility-button__label {
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-utility-button {
+    transition: none;
+  }
+}

package/dist/{index118.js → components/UtilityButton/UtilityButton2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css         */
+import { cx } from "../../utils/cx.js";
+import './UtilityButton.css';/* empty css              */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/UtilityButton/UtilityButton.tsx

package/dist/components/VideoPlayer/VideoPlayer.css

@@ -0,0 +1,41 @@
+.pf-video-player {
+  background: var(--pf-videoplayer-bg);
+  border: 1px solid var(--pf-videoplayer-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  width: 100%;
+}
+
+.pf-video-player--ratio-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.pf-video-player--ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.pf-video-player--ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.pf-video-player--invalid {
+  border-color: var(--pf-videoplayer-invalid-border);
+}
+
+.pf-video-player__video {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.pf-video-player__empty {
+  align-items: center;
+  color: var(--pf-videoplayer-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  height: 100%;
+  justify-content: center;
+  padding: var(--space-4);
+  text-align: center;
+}

package/dist/{index120.js → components/VideoPlayer/VideoPlayer2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css         */
+import { cx } from "../../utils/cx.js";
+import './VideoPlayer.css';/* empty css            */
 import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/VideoPlayer/VideoPlayer.tsx

package/dist/{index33.js → hooks/useDisclosure.js}

@@ -1,4 +1,4 @@
-import { useControllableState } from "./index32.js";
+import { useControllableState } from "./useControllableState.js";
 import { useCallback } from "react";
 //#region src/hooks/useDisclosure.ts
 function useDisclosure({ open, defaultOpen = false, onOpenChange, disabled = false } = {}) {

package/dist/hooks/useExitAnimation.js

@@ -0,0 +1,25 @@
+import { useState } from "react";
+//#region src/hooks/useExitAnimation.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Plays an exit animation before signalling removal. Apply `isExiting` to a CSS
+* class that runs the exit keyframes; `onExited` fires after `duration`. When the
+* user prefers reduced motion, `onExited` fires immediately with no animation.
+*/
+function useExitAnimation({ onExited, duration = 220 } = {}) {
+	const [isExiting, setIsExiting] = useState(false);
+	const startExit = () => {
+		if (prefersReducedMotion()) {
+			onExited?.();
+			return;
+		}
+		setIsExiting(true);
+		window.setTimeout(() => onExited?.(), duration);
+	};
+	return {
+		isExiting,
+		startExit
+	};
+}
+//#endregion
+export { useExitAnimation };

package/dist/{index34.js → hooks/useFocusTrap.js}

@@ -1,4 +1,4 @@
-import { Keys, getFocusableElements } from "./index3.js";
+import { Keys, getFocusableElements } from "../a11y/index.js";
 import { useEffect } from "react";
 //#region src/hooks/useFocusTrap.ts
 function useFocusTrap({ containerRef, enabled = true, onEscape, restoreFocus = true }) {

package/dist/hooks/usePresence.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/usePresence.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Keeps a conditionally-rendered element mounted long enough to play an exit
+* animation. Drive it with the `present` prop (e.g. a Modal's `open`): when it
+* flips to false, the element stays mounted with `isExiting` true for `duration`
+* ms, then unmounts. Reduced motion unmounts immediately.
+*/
+function usePresence(present, duration = 200) {
+	const [isExiting, setIsExiting] = useState(false);
+	const wasPresent = useRef(false);
+	useEffect(() => {
+		if (present) {
+			wasPresent.current = true;
+			return;
+		}
+		if (!wasPresent.current || prefersReducedMotion()) return;
+		wasPresent.current = false;
+		setIsExiting(true);
+		const timer = window.setTimeout(() => setIsExiting(false), duration);
+		return () => window.clearTimeout(timer);
+	}, [present, duration]);
+	const exiting = !present && isExiting;
+	return {
+		isMounted: present || exiting,
+		isExiting: exiting
+	};
+}
+//#endregion
+export { usePresence };