@pitchfork-ui/react 0.8.0 → 0.10.0

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

package/dist/components/Timeline/Timeline.css

@@ -0,0 +1,128 @@
+.pf-timeline {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-timeline__item {
+  /* Shared line height for the title; markers center themselves on it. */
+  --pf-timeline-line: 1.375rem;
+  --pf-timeline-marker-size: 16px;
+  column-gap: var(--space-3);
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+/* ── Rail (marker + connector) ────────────────────────────────────────────── */
+
+.pf-timeline__rail {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-timeline__marker {
+  align-items: center;
+  background: var(--pf-timeline-marker-bg);
+  border: 2px solid var(--pf-timeline-marker-border);
+  border-radius: var(--radius-full);
+  color: var(--pf-timeline-marker-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--pf-timeline-marker-size);
+  justify-content: center;
+  /* Vertically center the marker on the title's first line. */
+  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);
+  width: var(--pf-timeline-marker-size);
+}
+
+/* Markers carrying an icon are larger to fit it. */
+.pf-timeline__marker:has(.pf-timeline__marker-icon) {
+  --pf-timeline-marker-size: 28px;
+}
+
+.pf-timeline__marker-icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.8rem;
+  justify-content: center;
+}
+
+.pf-timeline__marker-icon svg {
+  display: block;
+  height: 14px;
+  width: 14px;
+}
+
+.pf-timeline__marker--default {
+  background: var(--pf-timeline-default-bg);
+  border-color: var(--pf-timeline-default-border);
+  color: var(--pf-timeline-default-icon);
+}
+
+.pf-timeline__marker--success {
+  background: var(--pf-timeline-success-bg);
+  border-color: var(--pf-timeline-success-border);
+  color: var(--pf-timeline-success-icon);
+}
+
+.pf-timeline__marker--warning {
+  background: var(--pf-timeline-warning-bg);
+  border-color: var(--pf-timeline-warning-border);
+  color: var(--pf-timeline-warning-icon);
+}
+
+.pf-timeline__marker--danger {
+  background: var(--pf-timeline-danger-bg);
+  border-color: var(--pf-timeline-danger-border);
+  color: var(--pf-timeline-danger-icon);
+}
+
+.pf-timeline__connector {
+  background: var(--pf-timeline-connector);
+  flex: 1;
+  margin: var(--space-1) 0;
+  min-height: var(--space-4);
+  width: 2px;
+}
+
+/* ── Content ──────────────────────────────────────────────────────────────── */
+
+.pf-timeline__content {
+  padding-bottom: var(--space-5);
+}
+
+.pf-timeline__item--last .pf-timeline__content {
+  padding-bottom: 0;
+}
+
+.pf-timeline__header {
+  align-items: baseline;
+  column-gap: var(--space-2);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.pf-timeline__title {
+  color: var(--pf-timeline-title);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--pf-timeline-line);
+  margin: 0;
+}
+
+.pf-timeline__timestamp {
+  color: var(--pf-timeline-timestamp);
+  font-size: var(--font-size-xs);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.pf-timeline__description {
+  color: var(--pf-timeline-description);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-1);
+}

package/dist/components/Timeline/Timeline2.js

@@ -0,0 +1,49 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import './Timeline.css';/* empty css         */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Timeline/Timeline.tsx
+var Timeline = forwardRef(function Timeline({ className, items, ...props }, ref) {
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		className: cx("pf-timeline", className),
+		...props,
+		children: items.map((item, index) => {
+			const tone = item.tone ?? "default";
+			const isLast = index === items.length - 1;
+			return /* @__PURE__ */ jsxs("li", {
+				className: cx("pf-timeline__item", isLast && "pf-timeline__item--last"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pf-timeline__rail",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("pf-timeline__marker", `pf-timeline__marker--${tone}`),
+						children: item.icon ? /* @__PURE__ */ jsx("span", {
+							className: "pf-timeline__marker-icon",
+							children: item.icon
+						}) : null
+					}), !isLast ? /* @__PURE__ */ jsx("span", { className: "pf-timeline__connector" }) : null]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pf-timeline__content",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "pf-timeline__header",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "pf-timeline__title",
+							children: item.title
+						}), item.timestamp ? /* @__PURE__ */ jsx("span", {
+							className: "pf-timeline__timestamp",
+							children: item.timestamp
+						}) : null]
+					}), item.description ? /* @__PURE__ */ jsx("div", {
+						className: "pf-timeline__description",
+						children: item.description
+					}) : null]
+				})]
+			}, item.id ?? index);
+		})
+	});
+});
+Timeline.displayName = "Timeline";
+//#endregion
+export { Timeline };

package/dist/components/Toast/Toast.js

@@ -1,3 +1,4 @@
+"use client";
 import { Notification, NotificationStack } from "../Notification/Notification2.js";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Toolbar/Toolbar.css

@@ -0,0 +1,37 @@
+.pf-toolbar {
+  align-items: center;
+  background: var(--pf-toolbar-bg);
+  border: 1px solid var(--pf-toolbar-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+.pf-toolbar--horizontal {
+  flex-direction: row;
+}
+
+.pf-toolbar--vertical {
+  align-items: stretch;
+  flex-direction: column;
+  width: fit-content;
+}
+
+/* ── Separator ────────────────────────────────────────────────────────────── */
+
+.pf-toolbar__separator {
+  background: var(--pf-toolbar-separator);
+  flex-shrink: 0;
+}
+
+.pf-toolbar--horizontal .pf-toolbar__separator {
+  align-self: stretch;
+  margin: var(--space-1) var(--space-1);
+  width: 1px;
+}
+
+.pf-toolbar--vertical .pf-toolbar__separator {
+  height: 1px;
+  margin: var(--space-1) var(--space-1);
+}