@pitchfork-ui/react 0.8.0 → 0.10.0

package/dist/components/Toolbar/Toolbar2.js

@@ -0,0 +1,71 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { cx } from "../../utils/cx.js";
+import './Toolbar.css';/* empty css        */
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Toolbar/Toolbar.tsx
+var ITEM_SELECTOR = "button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [data-toolbar-item]:not([aria-disabled=\"true\"])";
+var Toolbar = forwardRef(function Toolbar({ className, orientation = "horizontal", onKeyDown, onFocus, children, ...props }, ref) {
+	const rootRef = useRef(null);
+	const refs = useComposedRefs(rootRef, ref);
+	const getItems = () => rootRef.current ? Array.from(rootRef.current.querySelectorAll(ITEM_SELECTOR)) : [];
+	useEffect(() => {
+		const items = getItems();
+		if (items.length === 0) return;
+		const current = items.find((el) => el.getAttribute("tabindex") === "0");
+		items.forEach((el, i) => {
+			el.tabIndex = (current ? el === current : i === 0) ? 0 : -1;
+		});
+	});
+	const handleFocus = (event) => {
+		const items = getItems();
+		const target = event.target;
+		if (items.includes(target)) items.forEach((el) => {
+			el.tabIndex = el === target ? 0 : -1;
+		});
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
+		const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
+		const items = getItems();
+		if (items.length === 0) return;
+		const currentIndex = items.indexOf(document.activeElement);
+		if (currentIndex === -1) return;
+		let nextIndex = -1;
+		if (event.key === nextKey) nextIndex = (currentIndex + 1) % items.length;
+		else if (event.key === prevKey) nextIndex = (currentIndex - 1 + items.length) % items.length;
+		else if (event.key === Keys.Home) nextIndex = 0;
+		else if (event.key === Keys.End) nextIndex = items.length - 1;
+		if (nextIndex >= 0) {
+			event.preventDefault();
+			items[nextIndex].focus();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: refs,
+		role: "toolbar",
+		"aria-orientation": orientation,
+		className: cx("pf-toolbar", `pf-toolbar--${orientation}`, className),
+		onKeyDown: handleKeyDown,
+		onFocus: handleFocus,
+		...props,
+		children
+	});
+});
+Toolbar.displayName = "Toolbar";
+var ToolbarSeparator = forwardRef(function ToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		role: "separator",
+		className: cx("pf-toolbar__separator", className),
+		...props
+	});
+});
+ToolbarSeparator.displayName = "ToolbarSeparator";
+//#endregion
+export { Toolbar, ToolbarSeparator };

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";

package/dist/components/VisuallyHidden/VisuallyHidden.css

@@ -0,0 +1,26 @@
+.pf-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* Reveal on keyboard focus (skip-link pattern). */
+.pf-visually-hidden--focusable:focus,
+.pf-visually-hidden--focusable:focus-within {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  /* Flow back into layout so the revealed content doesn't overlap siblings. */
+  position: static;
+  white-space: normal;
+  width: auto;
+}

package/dist/components/VisuallyHidden/VisuallyHidden2.js

@@ -0,0 +1,21 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import './VisuallyHidden.css';/* empty css               */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/VisuallyHidden/VisuallyHidden.tsx
+/**
+* Hides content visually while keeping it available to screen readers and other
+* assistive technology. Use for labels, instructions, and status text that are
+* implied visually but need to be announced.
+*/
+var VisuallyHidden = forwardRef(function VisuallyHidden({ as = "span", focusable = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(as, {
+		ref,
+		className: cx("pf-visually-hidden", focusable && "pf-visually-hidden--focusable", className),
+		...props
+	});
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+//#endregion
+export { VisuallyHidden };

package/dist/hooks/useAnchoredPosition.js

@@ -1,3 +1,4 @@
+"use client";
 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 }) {

package/dist/hooks/useComposedRefs.js

@@ -1,3 +1,4 @@
+"use client";
 //#region src/hooks/useComposedRefs.ts
 function useComposedRefs(...refs) {
 	return (node) => {

package/dist/hooks/useControllableState.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useState } from "react";
 //#region src/hooks/useControllableState.ts
 function useControllableState({ value, defaultValue, onChange }) {

package/dist/hooks/useDisclosure.js

@@ -1,3 +1,4 @@
+"use client";
 import { useControllableState } from "./useControllableState.js";
 import { useCallback } from "react";
 //#region src/hooks/useDisclosure.ts

package/dist/hooks/useExitAnimation.js

@@ -1,3 +1,4 @@
+"use client";
 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;

package/dist/hooks/useFocusTrap.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys, getFocusableElements } from "../a11y/index.js";
 import { useEffect } from "react";
 //#region src/hooks/useFocusTrap.ts

package/dist/hooks/useListNavigation.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useMemo, useState } from "react";
 //#region src/hooks/useListNavigation.ts
 function useListNavigation({ items, isDisabled = () => false, initialIndex }) {

package/dist/hooks/useOutsideInteraction.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 //#region src/hooks/useOutsideInteraction.ts
 function useOutsideInteraction({ refs, enabled = true, onInteractOutside, eventName = "pointerdown" }) {

package/dist/hooks/usePresence.js

@@ -1,3 +1,4 @@
+"use client";
 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;