@pitchfork-ui/react 0.6.0 → 0.8.0

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,37 @@
+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/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/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,191 @@
+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 };

package/dist/components/CommandPalette/CommandPalette.css

@@ -0,0 +1,225 @@
+/* ── Backdrop ─────────────────────────────────────────────────────────────── */
+
+.pf-command__backdrop {
+  animation: pf-command-backdrop-in var(--pf-transition-fast);
+  background: var(--pf-overlay-backdrop);
+  inset: 0;
+  position: fixed;
+  z-index: 1100;
+}
+
+.pf-command__backdrop--exiting {
+  animation: pf-command-backdrop-out var(--pf-transition-fast) forwards;
+}
+
+@keyframes pf-command-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pf-command-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ── Dialog ───────────────────────────────────────────────────────────────── */
+
+.pf-command {
+  animation: pf-command-in var(--pf-transition-fast) var(--easing-decelerate);
+  background: var(--pf-command-bg);
+  border: 1px solid var(--pf-command-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--pf-elevation-overlay-shadow);
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  max-height: min(560px, 80vh);
+  max-width: 560px;
+  overflow: hidden;
+  position: fixed;
+  top: 12%;
+  transform: translateX(-50%);
+  width: calc(100vw - var(--space-8));
+  z-index: 1101;
+}
+
+.pf-command--exiting {
+  animation: pf-command-out var(--pf-transition-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-command-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes pf-command-out {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.97);
+  }
+}
+
+/* ── Search bar ───────────────────────────────────────────────────────────── */
+
+.pf-command__search {
+  align-items: center;
+  border-block-end: 1px solid var(--pf-command-border);
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+}
+
+.pf-command__search-icon {
+  color: var(--pf-command-text-muted);
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+
+.pf-command__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-command-text);
+  flex: 1;
+  font-size: var(--font-size-md);
+  min-width: 0;
+  outline: none;
+}
+
+.pf-command__input::placeholder {
+  color: var(--pf-command-text-muted);
+}
+
+.pf-command__esc-hint {
+  background: var(--pf-command-shortcut-bg);
+  border: 1px solid var(--pf-command-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  color: var(--pf-command-text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  padding: 1px 6px;
+}
+
+/* ── Results list ─────────────────────────────────────────────────────────── */
+
+.pf-command__list {
+  overflow-y: auto;
+  padding: var(--space-2);
+}
+
+.pf-command__empty {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+}
+
+.pf-command__group-label {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  text-transform: uppercase;
+}
+
+/* ── Items ────────────────────────────────────────────────────────────────── */
+
+.pf-command__item {
+  align-items: center;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  transition: background 0.1s;
+}
+
+.pf-command__item--active {
+  background: var(--pf-command-item-active-bg);
+}
+
+.pf-command__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-command__item-icon {
+  align-items: center;
+  color: var(--pf-command-text-muted);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 1rem;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+}
+
+.pf-command__item--active .pf-command__item-icon {
+  color: var(--pf-command-item-active-text);
+}
+
+.pf-command__item-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.pf-command__item-label {
+  color: var(--pf-command-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-command__item--active .pf-command__item-label {
+  color: var(--pf-command-item-active-text);
+}
+
+.pf-command__item-description {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-command__item--active .pf-command__item-description {
+  color: var(--pf-command-item-active-text);
+  opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-command__backdrop,
+  .pf-command__backdrop--exiting,
+  .pf-command,
+  .pf-command--exiting {
+    animation: none;
+  }
+}