@pitchfork-ui/react 0.6.0 → 0.8.0

package/dist/components/DateRangePicker/DateRangePicker2.js

@@ -0,0 +1,378 @@
+import { Keys, composeDescribedBy } from "../../a11y/index.js";
+import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
+import { useDisclosure } from "../../hooks/useDisclosure.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './DateRangePicker.css';/* empty css                */
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/DateRangePicker/DateRangePicker.tsx
+var WEEKDAY_LABELS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+var toMidday = (d) => {
+	const n = new Date(d);
+	n.setHours(12, 0, 0, 0);
+	return n;
+};
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1, 12);
+var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1, 12);
+var buildDays = (monthDate) => {
+	const ms = startOfMonth(monthDate);
+	const firstDay = ms.getDay();
+	return Array.from({ length: 42 }, (_, i) => {
+		const date = new Date(ms.getFullYear(), ms.getMonth(), ms.getDate() - firstDay + i, 12);
+		return {
+			date,
+			inCurrentMonth: date.getMonth() === monthDate.getMonth()
+		};
+	});
+};
+var formatDate = (d) => {
+	if (!d) return "";
+	return new Intl.DateTimeFormat("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	}).format(d);
+};
+function RangeCalendar({ monthDate, rangeStart, rangeEnd, hoverDate, onDayClick, onDayHover, disabledDates, showOutsideDays = true, isPrevDisabled, isNextDisabled, onPrev, onNext, hideNavDesktop = false }) {
+	const days = useMemo(() => buildDays(monthDate), [monthDate]);
+	const today = useMemo(() => toMidday(/* @__PURE__ */ new Date()), []);
+	const monthLabel = new Intl.DateTimeFormat("en-US", {
+		month: "long",
+		year: "numeric"
+	}).format(monthDate);
+	const effectiveEnd = rangeEnd ?? hoverDate;
+	const isInRange = useCallback((date) => {
+		if (!rangeStart || !effectiveEnd) return false;
+		return date > (rangeStart <= effectiveEnd ? rangeStart : effectiveEnd) && date < (rangeStart <= effectiveEnd ? effectiveEnd : rangeStart);
+	}, [rangeStart, effectiveEnd]);
+	const isRangeStart = (date) => !!rangeStart && isSameDay(date, rangeStart);
+	const isRangeEnd = (date) => {
+		const end = rangeEnd ?? (hoverDate && rangeStart ? hoverDate : null);
+		return !!end && isSameDay(date, end);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-daterange__calendar",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("pf-daterange__cal-header", hideNavDesktop && "pf-daterange__cal-header--hide-nav-desktop"),
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "pf-daterange__nav",
+					"aria-label": "Previous month",
+					disabled: isPrevDisabled,
+					onClick: onPrev,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevron-left",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pf-daterange__cal-title",
+					children: monthLabel
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "pf-daterange__nav",
+					"aria-label": "Next month",
+					disabled: isNextDisabled,
+					onClick: onNext,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevron-right",
+						"aria-hidden": true
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pf-daterange__grid",
+			role: "grid",
+			"aria-label": monthLabel,
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "row",
+				style: { display: "contents" },
+				"aria-hidden": true,
+				children: WEEKDAY_LABELS.map((d) => /* @__PURE__ */ jsx("span", {
+					role: "columnheader",
+					className: "pf-daterange__weekday",
+					children: d
+				}, d))
+			}), Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ jsx("div", {
+				role: "row",
+				style: { display: "contents" },
+				children: days.slice(week * 7, (week + 1) * 7).map(({ date, inCurrentMonth }) => {
+					const isToday = isSameDay(today, date);
+					const isStart = isRangeStart(date);
+					const isEnd = isRangeEnd(date);
+					const inRng = isInRange(date);
+					const isDisabled = Boolean(disabledDates?.(date));
+					if (!showOutsideDays && !inCurrentMonth) return /* @__PURE__ */ jsx("span", {
+						className: "pf-daterange__day-empty",
+						"aria-hidden": true
+					}, date.toISOString());
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "gridcell",
+						className: cx("pf-daterange__day", !inCurrentMonth && "pf-daterange__day--outside", isToday && "pf-daterange__day--today", (isStart || isEnd) && "pf-daterange__day--selected", isStart && "pf-daterange__day--range-start", isEnd && "pf-daterange__day--range-end", inRng && "pf-daterange__day--in-range"),
+						"aria-label": new Intl.DateTimeFormat("en-US", {
+							month: "long",
+							day: "numeric",
+							year: "numeric"
+						}).format(date),
+						"aria-selected": isStart || isEnd || inRng,
+						"aria-current": isToday ? "date" : void 0,
+						disabled: isDisabled,
+						onClick: () => onDayClick(date),
+						onMouseEnter: () => onDayHover(date),
+						onMouseLeave: () => onDayHover(null),
+						children: date.getDate()
+					}, date.toISOString());
+				})
+			}, week))]
+		})]
+	});
+}
+var DateRangePicker = forwardRef(function DateRangePicker({ id, className, value, defaultValue, onValueChange, label, description, error, startPlaceholder = "Start date", endPlaceholder = "End date", required, disabled, disabledDates, showOutsideDays = true, startYear, endYear, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = useId();
+	const pickerId = id ?? generatedId;
+	const descriptionId = description ? `${pickerId}-description` : void 0;
+	const errorId = error ? `${pickerId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const isControlled = value !== void 0;
+	const [internalRange, setInternalRange] = useState(defaultValue ?? {
+		start: null,
+		end: null
+	});
+	const range = isControlled ? value : internalRange;
+	const setRange = (next) => {
+		if (!isControlled) setInternalRange(next);
+		onValueChange?.(next);
+	};
+	const [selecting, setSelecting] = useState(null);
+	const [hoverDate, setHoverDate] = useState(null);
+	const yearRange = useMemo(() => {
+		const fallbackStart = (/* @__PURE__ */ new Date()).getFullYear() - 50;
+		const fallbackEnd = (/* @__PURE__ */ new Date()).getFullYear() + 50;
+		return {
+			start: startYear ?? fallbackStart,
+			end: endYear ?? fallbackEnd
+		};
+	}, [startYear, endYear]);
+	const clampMonth = (d) => {
+		const y = d.getFullYear();
+		if (y < yearRange.start) return new Date(yearRange.start, 0, 1, 12);
+		if (y > yearRange.end) return new Date(yearRange.end, 11, 1, 12);
+		return d;
+	};
+	const [leftMonth, setLeftMonth] = useState(() => clampMonth(startOfMonth(range.start ?? /* @__PURE__ */ new Date())));
+	const rightMonth = addMonths(leftMonth, 1);
+	const disclosure = useDisclosure({ disabled });
+	const { isOpen } = disclosure;
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const popoverRef = useRef(null);
+	const popoverStyle = useAnchoredPosition({
+		anchorRef: rootRef,
+		floatingRef: popoverRef,
+		enabled: isOpen,
+		flip: true,
+		matchAnchorWidth: false
+	});
+	useOutsideInteraction({
+		refs: [rootRef, popoverRef],
+		enabled: isOpen,
+		eventName: "mousedown",
+		onInteractOutside: () => {
+			setSelecting(null);
+			setHoverDate(null);
+			disclosure.close();
+		}
+	});
+	const handleDayClick = (date) => {
+		if (selecting === null) {
+			setRange({
+				start: toMidday(date),
+				end: null
+			});
+			setSelecting("start");
+		} else {
+			const start = range.start;
+			const end = toMidday(date);
+			if (isSameDay(start, end)) setRange({
+				start: toMidday(date),
+				end: null
+			});
+			else if (end < start) setRange({
+				start: end,
+				end: start
+			});
+			else setRange({
+				start,
+				end
+			});
+			setSelecting(null);
+			setHoverDate(null);
+			disclosure.close();
+		}
+	};
+	const clearRange = () => {
+		setRange({
+			start: null,
+			end: null
+		});
+		setSelecting(null);
+		setHoverDate(null);
+	};
+	const isPrevDisabled = leftMonth.getFullYear() === yearRange.start && leftMonth.getMonth() === 0;
+	const isNextDisabled = rightMonth.getFullYear() === yearRange.end && rightMonth.getMonth() === 11;
+	const hasValue = range.start !== null || range.end !== null;
+	const displayStart = formatDate(range.start);
+	const displayEnd = formatDate(range.end);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: `${pickerId}-trigger`,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			...props,
+			id: pickerId,
+			className: cx("pf-daterange", className),
+			"aria-describedby": describedBy,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pf-daterange__control-row",
+				ref: rootRef,
+				children: [/* @__PURE__ */ jsxs("button", {
+					ref: triggerRef,
+					id: `${pickerId}-trigger`,
+					type: "button",
+					className: cx("pf-daterange__trigger", error && "pf-daterange__trigger--invalid"),
+					disabled,
+					"aria-invalid": error ? true : void 0,
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen,
+					"aria-required": required || void 0,
+					onClick: () => {
+						if (!isOpen) setSelecting(null);
+						disclosure.toggle();
+					},
+					onKeyDown: (e) => {
+						if (e.key === Keys.Escape) disclosure.close();
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "pf-daterange__value",
+						children: displayStart ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("span", { children: displayStart }),
+							/* @__PURE__ */ jsx("span", {
+								className: "pf-daterange__separator",
+								"aria-hidden": true,
+								children: "–"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: cx(!displayEnd && "pf-daterange__value--placeholder"),
+								children: displayEnd || endPlaceholder
+							})
+						] }) : /* @__PURE__ */ jsxs("span", {
+							className: "pf-daterange__value--placeholder",
+							children: [
+								startPlaceholder,
+								/* @__PURE__ */ jsxs("span", {
+									className: "pf-daterange__separator",
+									"aria-hidden": true,
+									children: [
+										" ",
+										"–",
+										" "
+									]
+								}),
+								endPlaceholder
+							]
+						})
+					}), /* @__PURE__ */ jsx(Icon, {
+						name: "calendar",
+						"aria-hidden": true
+					})]
+				}), hasValue ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "pf-date-picker__icon-button",
+					"aria-label": "Clear date range",
+					disabled,
+					onClick: clearRange,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "circle-xmark",
+						"aria-hidden": true
+					})
+				}) : null]
+			}), isOpen && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsxs("div", {
+				ref: popoverRef,
+				className: "pf-daterange__popover",
+				role: "dialog",
+				"aria-label": "Date range picker",
+				style: popoverStyle,
+				onKeyDown: (e) => {
+					if (e.key === Keys.Escape) {
+						setSelecting(null);
+						setHoverDate(null);
+						disclosure.close();
+					}
+				},
+				children: [selecting === "start" ? /* @__PURE__ */ jsx("p", {
+					className: "pf-daterange__hint",
+					"aria-live": "polite",
+					children: "Select an end date"
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "pf-daterange__hint",
+					"aria-live": "polite",
+					children: "Select a start date"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pf-daterange__months",
+					children: [/* @__PURE__ */ jsx(RangeCalendar, {
+						monthDate: leftMonth,
+						rangeStart: range.start,
+						rangeEnd: range.end,
+						hoverDate: selecting === "start" ? hoverDate : null,
+						onDayClick: handleDayClick,
+						onDayHover: (d) => selecting === "start" && setHoverDate(d),
+						disabledDates,
+						showOutsideDays,
+						isPrevDisabled,
+						isNextDisabled: false,
+						onPrev: () => setLeftMonth((m) => clampMonth(addMonths(m, -1))),
+						onNext: () => setLeftMonth((m) => clampMonth(addMonths(m, 1)))
+					}), /* @__PURE__ */ jsx(RangeCalendar, {
+						monthDate: rightMonth,
+						rangeStart: range.start,
+						rangeEnd: range.end,
+						hoverDate: selecting === "start" ? hoverDate : null,
+						onDayClick: handleDayClick,
+						onDayHover: (d) => selecting === "start" && setHoverDate(d),
+						disabledDates,
+						showOutsideDays,
+						isPrevDisabled: false,
+						isNextDisabled,
+						onPrev: () => setLeftMonth((m) => clampMonth(addMonths(m, -1))),
+						onNext: () => setLeftMonth((m) => clampMonth(addMonths(m, 1))),
+						hideNavDesktop: true
+					})]
+				})]
+			}), document.body) : null]
+		})
+	});
+});
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+export { DateRangePicker };

package/dist/components/Heatmap/Heatmap.css

@@ -1,5 +1,9 @@
 .pf-heatmap {
   display: inline-block;
+  max-width: 100%;
+  /* A full year is wider than small screens — scroll horizontally instead of
+     overflowing the page. */
+  overflow-x: auto;
   font-family: var(--font-family-sans);
 }
 

package/dist/components/Icon/Icon2.js

@@ -112,6 +112,49 @@ var customIcons = {
 			/* @__PURE__ */ jsx("path", { d: "M12 12v6" }),
 			/* @__PURE__ */ jsx("path", { d: "m15 15-3-3-3 3" })
 		]
+	}),
+	plus: /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M12 5v14" }), /* @__PURE__ */ jsx("path", { d: "M5 12h14" })]
+	}),
+	"magnifying-glass": /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })]
+	}),
+	minus: /* @__PURE__ */ jsx("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
 	})
 };
 var regularIcons = {

package/dist/components/Kbd/Kbd.css

@@ -0,0 +1,25 @@
+.pf-kbd {
+  align-items: center;
+  background: var(--pf-kbd-bg);
+  border: 1px solid var(--pf-kbd-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  color: var(--pf-kbd-text);
+  display: inline-flex;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.pf-kbd--md {
+  font-size: var(--font-size-xs);
+  min-width: 1.5em;
+  padding: 3px 6px;
+}
+
+.pf-kbd--sm {
+  font-size: var(--font-size-2xs);
+  min-width: 1.35em;
+  padding: 2px 5px;
+}

package/dist/components/Kbd/Kbd2.js

@@ -0,0 +1,17 @@
+import { cx } from "../../utils/cx.js";
+import './Kbd.css';/* empty css    */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Kbd/Kbd.tsx
+var Kbd = forwardRef(function Kbd({ className, keys, size = "md", separator = "+", children, ...props }, ref) {
+	const content = keys && keys.length > 0 ? keys.join(` ${separator} `) : children;
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		className: cx("pf-kbd", `pf-kbd--${size}`, className),
+		...props,
+		children: content
+	});
+});
+Kbd.displayName = "Kbd";
+//#endregion
+export { Kbd };

package/dist/components/NumberInput/NumberInput.css

@@ -0,0 +1,98 @@
+.pf-numberinput {
+  align-items: stretch;
+  background: var(--pf-numberinput-bg);
+  border: 1px solid var(--pf-numberinput-border);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  min-height: 40px;
+  overflow: hidden;
+  width: 100%;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-numberinput:focus-within {
+  border-color: var(--pf-numberinput-focus-border);
+  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-numberinput--invalid {
+  border-color: var(--pf-numberinput-invalid-border);
+}
+
+.pf-numberinput__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-numberinput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0 var(--space-3);
+  text-align: center;
+  width: 100%;
+}
+
+.pf-numberinput__input::placeholder {
+  color: var(--pf-numberinput-placeholder);
+}
+
+.pf-numberinput__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-numberinput:has(.pf-numberinput__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-numberinput__step {
+  align-items: center;
+  align-self: stretch;
+  background: var(--pf-numberinput-step-bg);
+  border: none;
+  color: var(--pf-numberinput-step-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: 0;
+  width: 40px;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.pf-numberinput__step:hover:not(:disabled) {
+  background: var(--pf-numberinput-step-hover-bg);
+  color: var(--pf-numberinput-step-hover-text);
+}
+
+.pf-numberinput__step:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-numberinput__step--decrement {
+  border-inline-end: 1px solid var(--pf-numberinput-border);
+}
+
+.pf-numberinput__step--increment {
+  border-inline-start: 1px solid var(--pf-numberinput-border);
+}
+
+.pf-numberinput__step svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-numberinput,
+  .pf-numberinput__step {
+    transition: none;
+  }
+}