@pitchfork-ui/react 0.9.0 → 0.11.0

package/dist/components/ScrollArea/ScrollArea.css

@@ -0,0 +1,54 @@
+.pf-scroll-area {
+  /* Standard scrollbar styling (Firefox + modern browsers). */
+  scrollbar-color: var(--pf-scrollarea-thumb) transparent;
+  scrollbar-width: thin;
+  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */
+  scrollbar-gutter: stable;
+}
+
+.pf-scroll-area:focus-visible {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-scroll-area--vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pf-scroll-area--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.pf-scroll-area--both {
+  overflow: auto;
+}
+
+/* WebKit / Blink scrollbar styling. */
+.pf-scroll-area::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+.pf-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pf-scroll-area::-webkit-scrollbar-thumb {
+  background: var(--pf-scrollarea-thumb);
+  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: var(--radius-full);
+}
+
+.pf-scroll-area::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-scrollarea-thumb-hover);
+  background-clip: padding-box;
+}
+
+.pf-scroll-area::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/dist/components/ScrollArea/ScrollArea2.js

@@ -0,0 +1,18 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import './ScrollArea.css';/* empty css           */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ScrollArea/ScrollArea.tsx
+var ScrollArea = forwardRef(function ScrollArea({ className, orientation = "vertical", focusable = true, tabIndex, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-scroll-area", `pf-scroll-area--${orientation}`, className),
+		tabIndex: tabIndex ?? (focusable ? 0 : void 0),
+		...props,
+		children
+	});
+});
+ScrollArea.displayName = "ScrollArea";
+//#endregion
+export { ScrollArea };

package/dist/components/Tag/Tag.css

@@ -32,6 +32,10 @@
   background: var(--pf-tag-warning-bg);
   color: var(--pf-tag-warning-text);
 }
+.pf-tag--danger {
+  background: var(--pf-tag-danger-bg);
+  color: var(--pf-tag-danger-text);
+}
 
 .pf-tag__dismiss {
   align-items: center;

package/dist/components/TagInput/TagInput.css

@@ -0,0 +1,72 @@
+.pf-taginput {
+  background: var(--pf-taginput-bg);
+  border: 1px solid var(--pf-taginput-border);
+  border-radius: var(--radius-md);
+  cursor: text;
+  min-height: 40px;
+  padding: var(--space-1);
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-taginput:focus-within {
+  border-color: var(--pf-taginput-focus-border);
+  box-shadow: var(--pf-taginput-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-taginput--invalid {
+  border-color: var(--pf-taginput-invalid-border);
+}
+
+.pf-taginput--disabled {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-taginput__tags {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-taginput__tag {
+  display: inline-flex;
+}
+
+.pf-taginput__field {
+  display: inline-flex;
+  flex: 1;
+  min-width: 8ch;
+}
+
+.pf-taginput__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-taginput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: var(--space-1) var(--space-2);
+}
+
+.pf-taginput__input::placeholder {
+  color: var(--pf-taginput-placeholder);
+}
+
+.pf-taginput__input:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-taginput {
+    transition: none;
+  }
+}

package/dist/components/TagInput/TagInput2.js

@@ -0,0 +1,116 @@
+"use client";
+import { Keys, composeDescribedBy } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import { Tag } from "../Tag/Tag2.js";
+import './TagInput.css';/* empty css         */
+import { forwardRef, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TagInput/TagInput.tsx
+var TagInput = forwardRef(function TagInput({ id, value, defaultValue, onValueChange, label, description, error, placeholder = "Add a tag…", max, allowDuplicates = false, delimiters = [Keys.Enter, ","], validate, tagVariant = "neutral", name, required, disabled, className, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = useId();
+	const fieldId = id ?? generatedId;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [tags, setTags] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
+	});
+	const currentTags = tags ?? [];
+	const [draft, setDraft] = useState("");
+	const inputRef = useRef(null);
+	const inputRefs = useComposedRefs(inputRef, ref);
+	const atMax = max !== void 0 && currentTags.length >= max;
+	const addTag = (raw) => {
+		const tag = raw.trim();
+		if (!tag) return;
+		if (atMax) return;
+		if (validate && !validate(tag)) return;
+		const exists = currentTags.some((t) => t.toLowerCase() === tag.toLowerCase());
+		if (!allowDuplicates && exists) {
+			setDraft("");
+			return;
+		}
+		setTags([...currentTags, tag]);
+		setDraft("");
+	};
+	const removeTag = (index) => {
+		setTags(currentTags.filter((_, i) => i !== index));
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (delimiters.includes(event.key)) {
+			if (draft.trim()) {
+				event.preventDefault();
+				addTag(draft);
+			} else if (event.key !== Keys.Enter) event.preventDefault();
+			return;
+		}
+		if (event.key === "Backspace" && draft === "" && currentTags.length > 0) {
+			event.preventDefault();
+			removeTag(currentTags.length - 1);
+		}
+	};
+	const onPaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		if (!/[,\n\t]/.test(text)) return;
+		event.preventDefault();
+		text.split(/[,\n\t]+/).map((t) => t.trim()).filter(Boolean).forEach((t) => addTag(t));
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("pf-taginput", error && "pf-taginput--invalid", disabled && "pf-taginput--disabled"),
+			onClick: () => inputRef.current?.focus(),
+			children: [/* @__PURE__ */ jsxs("ul", {
+				className: "pf-taginput__tags",
+				children: [currentTags.map((tag, index) => /* @__PURE__ */ jsx("li", {
+					className: "pf-taginput__tag",
+					children: /* @__PURE__ */ jsx(Tag, {
+						variant: tagVariant,
+						dismissible: !disabled,
+						onDismiss: () => removeTag(index),
+						children: tag
+					})
+				}, `${tag}-${index}`)), /* @__PURE__ */ jsx("li", {
+					className: "pf-taginput__field",
+					children: /* @__PURE__ */ jsx("input", {
+						...props,
+						id: fieldId,
+						ref: inputRefs,
+						type: "text",
+						className: cx("pf-taginput__input", className),
+						value: draft,
+						placeholder: currentTags.length === 0 ? placeholder : "",
+						disabled: disabled || atMax,
+						required: required && currentTags.length === 0,
+						autoComplete: "off",
+						"aria-invalid": error ? true : void 0,
+						"aria-describedby": describedBy,
+						onChange: (event) => setDraft(event.target.value),
+						onKeyDown,
+						onPaste,
+						onBlur: () => addTag(draft)
+					})
+				})]
+			}), name ? currentTags.map((tag, index) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: tag
+			}, index)) : null]
+		})
+	});
+});
+TagInput.displayName = "TagInput";
+//#endregion
+export { TagInput };

package/dist/components/TimePicker/TimePicker.css

@@ -0,0 +1,179 @@
+.pf-timepicker {
+  position: relative;
+}
+
+/* ── Trigger ──────────────────────────────────────────────────────────────── */
+
+.pf-timepicker__trigger {
+  align-items: center;
+  background: var(--pf-timepicker-bg);
+  border: 1px solid var(--pf-timepicker-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-timepicker-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  text-align: start;
+  width: 100%;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-timepicker__trigger:focus {
+  outline: none;
+}
+
+.pf-timepicker__trigger:focus-visible,
+.pf-timepicker__trigger--open {
+  border-color: var(--pf-timepicker-focus-border);
+  box-shadow: var(--pf-timepicker-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-timepicker__trigger--invalid {
+  border-color: var(--pf-timepicker-invalid-border);
+}
+
+.pf-timepicker__trigger:disabled {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-timepicker__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-timepicker__value--placeholder {
+  color: var(--pf-timepicker-placeholder);
+}
+
+.pf-timepicker__icon {
+  align-items: center;
+  color: var(--pf-timepicker-text-muted);
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.pf-timepicker__icon svg {
+  display: block;
+  height: 18px;
+  width: 18px;
+}
+
+/* ── Panel ────────────────────────────────────────────────────────────────── */
+
+.pf-timepicker__panel {
+  animation: pf-timepicker-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-timepicker-menu-bg);
+  border: 1px solid var(--pf-timepicker-menu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-timepicker__panel--exiting {
+  animation: pf-timepicker-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-timepicker-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pf-timepicker-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* ── Columns ──────────────────────────────────────────────────────────────── */
+
+.pf-timepicker__column {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 220px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
+}
+
+.pf-timepicker__column--meridiem {
+  overflow-y: visible;
+}
+
+.pf-timepicker__option {
+  appearance: none;
+  /* Explicit opaque background (matching the panel) so axe can determine the
+     contrast background directly on each option, even when it's partially
+     clipped by the scrolling column. */
+  background: var(--pf-timepicker-menu-bg);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-timepicker-text);
+  cursor: pointer;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  min-width: 3ch;
+  padding: var(--space-2) var(--space-3);
+  text-align: center;
+}
+
+.pf-timepicker__option:hover {
+  background: var(--pf-timepicker-option-hover-bg);
+}
+
+.pf-timepicker__option:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--pf-timepicker-focus-border);
+}
+
+.pf-timepicker__option--selected {
+  background: var(--pf-timepicker-option-active-bg);
+  color: var(--pf-timepicker-option-active-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-timepicker__option--selected:hover {
+  background: var(--pf-timepicker-option-active-bg);
+  color: var(--pf-timepicker-option-active-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-timepicker__trigger {
+    transition: none;
+  }
+
+  .pf-timepicker__panel,
+  .pf-timepicker__panel--exiting {
+    animation: none;
+  }
+
+  .pf-timepicker__column {
+    scroll-behavior: auto;
+  }
+}

package/dist/components/TimePicker/TimePicker2.js

@@ -0,0 +1,239 @@
+"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 { useDisclosure } from "../../hooks/useDisclosure.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 './TimePicker.css';/* empty css           */
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/TimePicker/TimePicker.tsx
+var pad = (n) => String(n).padStart(2, "0");
+var parseValue = (value) => {
+	const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+	if (!match) return {
+		hour: null,
+		minute: null
+	};
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	if (hour > 23 || minute > 59) return {
+		hour: null,
+		minute: null
+	};
+	return {
+		hour,
+		minute
+	};
+};
+var formatDisplay = (parts, hourCycle) => {
+	if (parts.hour === null || parts.minute === null) return "";
+	if (hourCycle === 24) return `${pad(parts.hour)}:${pad(parts.minute)}`;
+	const meridiem = parts.hour < 12 ? "AM" : "PM";
+	return `${parts.hour % 12 === 0 ? 12 : parts.hour % 12}:${pad(parts.minute)} ${meridiem}`;
+};
+var range = (length, step = 1) => Array.from({ length: Math.ceil(length / step) }, (_, i) => i * step);
+var TimePicker = forwardRef(function TimePicker({ id, value, defaultValue, onValueChange, hourCycle = 24, minuteStep = 1, label, description, error, placeholder = "Select time", required, name, disabled, className, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = useId();
+	const fieldId = id ?? generatedId;
+	const panelId = `${fieldId}-panel`;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const parts = parseValue(current ?? "");
+	const disclosure = useDisclosure({ disabled });
+	const isOpen = disclosure.isOpen ?? false;
+	const rootRef = useRef(null);
+	const triggerRefs = useComposedRefs(useRef(null), ref);
+	const panelRef = useRef(null);
+	const { isMounted, isExiting } = usePresence(isOpen, 160);
+	const panelStyle = useAnchoredPosition({
+		anchorRef: rootRef,
+		floatingRef: panelRef,
+		enabled: isOpen,
+		matchAnchorWidth: false,
+		flip: true
+	});
+	useOutsideInteraction({
+		refs: [rootRef, panelRef],
+		enabled: isOpen,
+		onInteractOutside: () => disclosure.close()
+	});
+	const hours = hourCycle === 24 ? range(24) : range(12).map((h) => h + 1);
+	const minutes = range(60, minuteStep);
+	const meridiems = ["AM", "PM"];
+	const selectedMeridiem = parts.hour === null ? null : parts.hour < 12 ? "AM" : "PM";
+	const selectedHourDisplay = parts.hour === null ? null : hourCycle === 24 ? parts.hour : parts.hour % 12 === 0 ? 12 : parts.hour % 12;
+	const emit = (next) => {
+		if (next.hour === null || next.minute === null) return;
+		setCurrent(`${pad(next.hour)}:${pad(next.minute)}`);
+	};
+	const selectHour = (h) => {
+		let hour24;
+		if (hourCycle === 24) hour24 = h;
+		else {
+			const meridiem = selectedMeridiem ?? "AM";
+			const base = h % 12;
+			hour24 = meridiem === "PM" ? base + 12 : base;
+		}
+		emit({
+			hour: hour24,
+			minute: parts.minute ?? 0
+		});
+	};
+	const selectMinute = (m) => {
+		emit({
+			hour: parts.hour ?? (hourCycle === 12 ? 0 : 0),
+			minute: m
+		});
+	};
+	const selectMeridiem = (mer) => {
+		const base = (parts.hour ?? 0) % 12;
+		emit({
+			hour: mer === "PM" ? base + 12 : base,
+			minute: parts.minute ?? 0
+		});
+	};
+	const display = formatDisplay(parts, hourCycle);
+	useEffect(() => {
+		if (!isMounted) return;
+		const frame = requestAnimationFrame(() => {
+			panelRef.current?.querySelectorAll("[data-selected=\"true\"]").forEach((el) => el.scrollIntoView({ block: "center" }));
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [isMounted]);
+	const onColumnKeyDown = (event) => {
+		if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;
+		const buttons = Array.from(event.currentTarget.querySelectorAll("button:not(:disabled)"));
+		const index = buttons.indexOf(document.activeElement);
+		if (index === -1) return;
+		event.preventDefault();
+		buttons[event.key === Keys.ArrowDown ? Math.min(index + 1, buttons.length - 1) : Math.max(index - 1, 0)]?.focus();
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pf-timepicker",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					...props,
+					id: fieldId,
+					ref: triggerRefs,
+					type: "button",
+					className: cx("pf-timepicker__trigger", isOpen && "pf-timepicker__trigger--open", error && "pf-timepicker__trigger--invalid", className),
+					disabled,
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen,
+					"aria-required": required || void 0,
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": describedBy,
+					onClick: () => disclosure.toggle(),
+					onKeyDown: (event) => {
+						if (event.key === Keys.Escape) disclosure.close();
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("pf-timepicker__value", !display && "pf-timepicker__value--placeholder"),
+						children: display || placeholder
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "pf-timepicker__icon",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "clock",
+							"aria-hidden": true
+						})
+					})]
+				}),
+				name ? /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: current ?? ""
+				}) : null,
+				isMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsxs("div", {
+					id: panelId,
+					ref: panelRef,
+					role: "dialog",
+					"aria-label": label ? `${label} picker` : "Time picker",
+					className: cx("pf-timepicker__panel", isExiting && "pf-timepicker__panel--exiting"),
+					style: panelStyle,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "pf-timepicker__column",
+							role: "listbox",
+							"aria-label": "Hour",
+							onKeyDown: onColumnKeyDown,
+							children: hours.map((h) => {
+								const isSel = selectedHourDisplay === h;
+								return /* @__PURE__ */ jsx("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isSel,
+									"data-selected": isSel,
+									className: cx("pf-timepicker__option", isSel && "pf-timepicker__option--selected"),
+									onClick: () => selectHour(h),
+									children: pad(h)
+								}, h);
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "pf-timepicker__column",
+							role: "listbox",
+							"aria-label": "Minute",
+							onKeyDown: onColumnKeyDown,
+							children: minutes.map((m) => {
+								const isSel = parts.minute === m;
+								return /* @__PURE__ */ jsx("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isSel,
+									"data-selected": isSel,
+									className: cx("pf-timepicker__option", isSel && "pf-timepicker__option--selected"),
+									onClick: () => selectMinute(m),
+									children: pad(m)
+								}, m);
+							})
+						}),
+						hourCycle === 12 ? /* @__PURE__ */ jsx("div", {
+							className: "pf-timepicker__column pf-timepicker__column--meridiem",
+							role: "listbox",
+							"aria-label": "AM or PM",
+							onKeyDown: onColumnKeyDown,
+							children: meridiems.map((mer) => {
+								const isSel = selectedMeridiem === mer;
+								return /* @__PURE__ */ jsx("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isSel,
+									"data-selected": isSel,
+									className: cx("pf-timepicker__option", isSel && "pf-timepicker__option--selected"),
+									onClick: () => selectMeridiem(mer),
+									children: mer
+								}, mer);
+							})
+						}) : null
+					]
+				}), document.body) : null
+			]
+		})
+	});
+});
+TimePicker.displayName = "TimePicker";
+//#endregion
+export { TimePicker };