@pitchfork-ui/react 0.7.0 → 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leland Rangel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/a11y/index.js

@@ -1,3 +1,4 @@
+"use client";
 //#region src/a11y/index.ts
 var Keys = {
 	ArrowDown: "ArrowDown",

package/dist/components/Accordion/Accordion2.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys } from "../../a11y/index.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { cx } from "../../utils/cx.js";

package/dist/components/Alert/Alert2.js

@@ -1,3 +1,4 @@
+"use client";
 import { useExitAnimation } from "../../hooks/useExitAnimation.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";

package/dist/components/Avatar/Avatar2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Avatar.css';/* empty css       */
 import { forwardRef } from "react";

package/dist/components/AvatarGroup/AvatarGroup.css

@@ -0,0 +1,26 @@
+.pf-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  /* Overlap amount between avatars */
+  --pf-avatar-group-overlap: 8px;
+}
+
+.pf-avatar-group--lg,
+.pf-avatar-group--xl {
+  --pf-avatar-group-overlap: 12px;
+}
+
+.pf-avatar-group__item {
+  position: relative;
+  /* Ring in the surface color so overlapping avatars stay visually separated */
+  box-shadow: 0 0 0 2px var(--pf-avatar-group-ring);
+}
+
+.pf-avatar-group__item + .pf-avatar-group__item {
+  margin-inline-start: calc(-1 * var(--pf-avatar-group-overlap));
+}
+
+.pf-avatar-group__overflow {
+  background: var(--pf-avatar-group-overflow-bg);
+  color: var(--pf-avatar-group-overflow-text);
+}

package/dist/components/AvatarGroup/AvatarGroup2.js

@@ -0,0 +1,38 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { Avatar } from "../Avatar/Avatar2.js";
+import './AvatarGroup.css';/* empty css            */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AvatarGroup/AvatarGroup.tsx
+var AvatarGroup = forwardRef(function AvatarGroup({ className, avatars, max = 5, size = "md", total, label, ...props }, ref) {
+	const shown = avatars.slice(0, Math.max(0, max));
+	const overflow = (total ?? avatars.length) - shown.length;
+	const count = total ?? avatars.length;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-avatar-group", `pf-avatar-group--${size}`, className),
+		role: "group",
+		"aria-label": label ?? `${count} ${count === 1 ? "person" : "people"}`,
+		...props,
+		children: [shown.map((avatar, index) => /* @__PURE__ */ jsx(Avatar, {
+			size,
+			className: "pf-avatar-group__item",
+			style: { zIndex: shown.length - index },
+			...avatar
+		}, index)), overflow > 0 ? /* @__PURE__ */ jsx("span", {
+			className: cx("pf-avatar", `pf-avatar--${size}`, "pf-avatar-group__item", "pf-avatar-group__overflow"),
+			role: "img",
+			"aria-label": `${overflow} more`,
+			style: { zIndex: 0 },
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "pf-avatar__fallback",
+				"aria-hidden": true,
+				children: ["+", overflow]
+			})
+		}) : null]
+	});
+});
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
+export { AvatarGroup };

package/dist/components/Badge/Badge2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Badge.css';/* empty css      */
 import { forwardRef } from "react";

package/dist/components/BadgeGroup/BadgeGroup2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './BadgeGroup.css';/* empty css           */
 import { forwardRef } from "react";

package/dist/components/Breadcrumbs/Breadcrumbs2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Breadcrumbs.css';/* empty css            */
 import { forwardRef } from "react";

package/dist/components/Button/Button2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Button.css';/* empty css       */
 import { forwardRef } from "react";

package/dist/components/ButtonGroup/ButtonGroup2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './ButtonGroup.css';/* empty css            */
 import { forwardRef, useMemo, useState } from "react";

package/dist/components/Calendar/Calendar.css

@@ -117,7 +117,6 @@
 
 .pf-calendar__day--outside {
   color: var(--pf-calendar-text-muted);
-  opacity: 0.55;
 }
 
 .pf-calendar__day--today {

package/dist/components/Calendar/Calendar2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import { Dropdown } from "../Dropdown/Dropdown2.js";

package/dist/components/Card/Card2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Card.css';/* empty css     */
 import { jsx } from "react/jsx-runtime";

package/dist/components/Carousel/Carousel2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Carousel.css';/* empty css         */

package/dist/components/Checkbox/Checkbox2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Checkbox.css';/* empty css         */
 import { forwardRef, useId } from "react";

package/dist/components/CodeSnippet/CodeSnippet2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './CodeSnippet.css';/* empty css            */

package/dist/components/Combobox/Combobox.css

@@ -0,0 +1,155 @@
+.pf-combobox {
+  position: relative;
+}
+
+.pf-combobox__control {
+  align-items: center;
+  background: var(--pf-combobox-bg);
+  border: 1px solid var(--pf-combobox-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-2);
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-combobox__control:focus-within {
+  border-color: var(--pf-combobox-focus-border);
+  box-shadow: var(--pf-combobox-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-combobox__control--invalid {
+  border-color: var(--pf-combobox-invalid-border);
+}
+
+.pf-combobox__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-combobox-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0;
+}
+
+.pf-combobox__input::placeholder {
+  color: var(--pf-combobox-placeholder);
+}
+
+.pf-combobox__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-combobox__control:has(.pf-combobox__input:disabled) {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  opacity: 0.6;
+}
+
+.pf-combobox__icon {
+  align-items: center;
+  color: var(--pf-combobox-text);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 20px;
+  justify-content: center;
+  transform-origin: center;
+  transition: transform var(--pf-transition-fast);
+  width: 20px;
+}
+
+.pf-combobox__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-combobox__icon--open {
+  transform: rotate(180deg);
+}
+
+.pf-combobox__menu {
+  animation: pf-combobox-menu-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-combobox-menu-bg);
+  border: 1px solid var(--pf-combobox-menu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-combobox-elevation-popover-shadow, var(--pf-elevation-popover-shadow));
+  list-style: none;
+  margin: 0;
+  max-height: 220px;
+  overflow: auto;
+  padding: var(--space-1);
+  position: fixed;
+  transform-origin: top center;
+  z-index: 1000;
+}
+
+.pf-combobox__menu--exiting {
+  animation: pf-combobox-menu-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-combobox-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@keyframes pf-combobox-menu-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+}
+
+.pf-combobox__option {
+  border-radius: var(--radius-sm);
+  color: var(--pf-combobox-text);
+  cursor: pointer;
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-combobox__option--active {
+  background: var(--pf-combobox-option-active-bg);
+  color: var(--pf-combobox-option-active-text);
+}
+
+.pf-combobox__option--selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-combobox__option--disabled {
+  background: transparent;
+  color: var(--pf-combobox-placeholder);
+  cursor: not-allowed;
+}
+
+.pf-combobox__empty {
+  color: var(--pf-combobox-placeholder);
+  padding: var(--space-2) var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-combobox__control,
+  .pf-combobox__icon {
+    transition: none;
+  }
+
+  .pf-combobox__menu,
+  .pf-combobox__menu--exiting {
+    animation: none;
+  }
+}

package/dist/components/Combobox/Combobox2.js

@@ -0,0 +1,192 @@
+"use client";
+import { Keys, composeDescribedBy } 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 { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './Combobox.css';/* empty css         */
+import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Combobox/Combobox.tsx
+var Combobox = forwardRef(function Combobox({ id, options, value, defaultValue, onValueChange, label, description, error, placeholder = "Search…", emptyMessage = "No matches", name, required, className, disabled, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = useId();
+	const fieldId = id ?? generatedId;
+	const listboxId = `${fieldId}-listbox`;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const selectedOption = options.find((option) => option.value === selectedValue);
+	const [query, setQuery] = useState(() => selectedOption?.label ?? "");
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const rootRef = useRef(null);
+	const inputRef = useRef(null);
+	const listboxRef = useRef(null);
+	const inputRefs = useComposedRefs(inputRef, ref);
+	const { isMounted, isExiting } = usePresence(isOpen, 160);
+	const menuStyle = useAnchoredPosition({
+		anchorRef: rootRef,
+		floatingRef: listboxRef,
+		enabled: isOpen,
+		matchAnchorWidth: true,
+		flip: true
+	});
+	const filtered = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		const fromSelection = selectedOption && query === selectedOption.label;
+		if (!q || fromSelection) return options;
+		return options.filter((option) => option.label.toLowerCase().includes(q));
+	}, [
+		options,
+		query,
+		selectedOption
+	]);
+	useOutsideInteraction({
+		refs: [rootRef, listboxRef],
+		enabled: isOpen,
+		onInteractOutside: () => closeAndRevert()
+	});
+	const open = () => {
+		if (disabled) return;
+		setIsOpen(true);
+		setActiveIndex(0);
+	};
+	const closeAndRevert = () => {
+		setIsOpen(false);
+		setQuery(selectedOption?.label ?? "");
+	};
+	const selectOption = (option) => {
+		if (option.disabled) return;
+		setSelectedValue(option.value);
+		setQuery(option.label);
+		setIsOpen(false);
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === Keys.ArrowDown) {
+			event.preventDefault();
+			if (!isOpen) {
+				open();
+				return;
+			}
+			setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+			return;
+		}
+		if (event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			if (isOpen) setActiveIndex((index) => Math.max(index - 1, 0));
+			return;
+		}
+		if (event.key === Keys.Enter) {
+			if (isOpen && filtered[activeIndex]) {
+				event.preventDefault();
+				selectOption(filtered[activeIndex]);
+			}
+			return;
+		}
+		if (event.key === Keys.Escape) {
+			if (isOpen) {
+				event.preventDefault();
+				closeAndRevert();
+			}
+		}
+	};
+	const activeOptionId = isOpen && filtered[activeIndex] ? `${listboxId}-option-${activeIndex}` : void 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pf-combobox",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cx("pf-combobox__control", error && "pf-combobox__control--invalid"),
+					children: [/* @__PURE__ */ jsx("input", {
+						...props,
+						id: fieldId,
+						ref: inputRefs,
+						type: "text",
+						role: "combobox",
+						className: cx("pf-combobox__input", className),
+						value: query,
+						placeholder,
+						disabled,
+						required,
+						autoComplete: "off",
+						"aria-autocomplete": "list",
+						"aria-expanded": isOpen,
+						"aria-controls": listboxId,
+						"aria-activedescendant": activeOptionId,
+						"aria-describedby": describedBy,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setActiveIndex(0);
+							if (!isOpen) setIsOpen(true);
+						},
+						onClick: open,
+						onKeyDown
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cx("pf-combobox__icon", isOpen && "pf-combobox__icon--open"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "chevron-down",
+							"aria-hidden": true
+						})
+					})]
+				}),
+				name ? /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: selectedValue
+				}) : null,
+				isMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("ul", {
+					id: listboxId,
+					ref: listboxRef,
+					role: "listbox",
+					className: cx("pf-combobox__menu", isExiting && "pf-combobox__menu--exiting"),
+					style: menuStyle,
+					"aria-label": label,
+					children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", {
+						className: "pf-combobox__empty",
+						role: "presentation",
+						children: emptyMessage
+					}) : filtered.map((option, index) => {
+						const isSelected = option.value === selectedValue;
+						const isActive = index === activeIndex;
+						return /* @__PURE__ */ jsx("li", {
+							id: `${listboxId}-option-${index}`,
+							role: "option",
+							"aria-selected": isSelected,
+							"aria-disabled": option.disabled ? true : void 0,
+							className: cx("pf-combobox__option", isSelected && "pf-combobox__option--selected", isActive && "pf-combobox__option--active", option.disabled && "pf-combobox__option--disabled"),
+							onMouseEnter: () => {
+								if (!option.disabled) setActiveIndex(index);
+							},
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => selectOption(option),
+							children: option.label
+						}, option.value);
+					})
+				}), document.body) : null
+			]
+		})
+	});
+});
+Combobox.displayName = "Combobox";
+//#endregion
+export { Combobox };