@pitchfork-ui/react 0.1.9

package/dist/index40.js

@@ -0,0 +1,255 @@
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+import { Dropdown } from "./index38.js";
+/* empty css        */
+import { forwardRef, useEffect, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Calendar/Calendar.tsx
+var WEEKDAY_LABELS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+var MONTH_OPTIONS = Array.from({ length: 12 }, (_, month) => {
+	const date = new Date(2024, month, 1);
+	return {
+		value: month,
+		label: new Intl.DateTimeFormat("en-US", { month: "long" }).format(date)
+	};
+});
+var toMidday = (date) => {
+	const next = new Date(date);
+	next.setHours(12, 0, 0, 0);
+	return next;
+};
+var isSameDay = (a, b) => {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+};
+var startOfMonth = (date) => {
+	return new Date(date.getFullYear(), date.getMonth(), 1, 12);
+};
+var addMonths = (date, amount) => {
+	return new Date(date.getFullYear(), date.getMonth() + amount, 1, 12);
+};
+var buildCalendarDays = (monthDate) => {
+	const monthStart = startOfMonth(monthDate);
+	const firstWeekday = monthStart.getDay();
+	const gridStart = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate() - firstWeekday, 12);
+	return Array.from({ length: 42 }, (_, index) => {
+		const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + index, 12);
+		return {
+			date,
+			inCurrentMonth: date.getMonth() === monthDate.getMonth()
+		};
+	});
+};
+var Calendar = forwardRef(function Calendar({ className, value, defaultValue, onValueChange, autoSelectToday = true, label, description, error, disabledDates, showOutsideDays = true, startYear, endYear, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = useId();
+	const calendarId = props.id ?? generatedId;
+	const descriptionId = description ? `${calendarId}-description` : void 0;
+	const errorId = error ? `${calendarId}-error` : void 0;
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		errorId
+	].filter(Boolean).join(" ") || void 0;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue ? toMidday(defaultValue) : autoSelectToday ? toMidday(/* @__PURE__ */ new Date()) : void 0);
+	const selectedDate = isControlled ? value : internalValue;
+	const yearRange = useMemo(() => {
+		const fallbackStart = (/* @__PURE__ */ new Date()).getFullYear() - 50;
+		const fallbackEnd = (/* @__PURE__ */ new Date()).getFullYear() + 50;
+		const nextStart = startYear ?? fallbackStart;
+		const nextEnd = endYear ?? fallbackEnd;
+		return {
+			start: Math.min(nextStart, nextEnd),
+			end: Math.max(nextStart, nextEnd)
+		};
+	}, [endYear, startYear]);
+	const clampToYearRange = (date) => {
+		const year = date.getFullYear();
+		if (year < yearRange.start) return new Date(yearRange.start, 0, 1, 12);
+		if (year > yearRange.end) return new Date(yearRange.end, 11, 1, 12);
+		return date;
+	};
+	const [displayMonth, setDisplayMonth] = useState(() => {
+		return clampToYearRange(startOfMonth(selectedDate ?? /* @__PURE__ */ new Date()));
+	});
+	useEffect(() => {
+		if (!selectedDate) return;
+		setDisplayMonth(clampToYearRange(startOfMonth(selectedDate)));
+	}, [
+		selectedDate,
+		yearRange.end,
+		yearRange.start
+	]);
+	const monthLabel = useMemo(() => {
+		return new Intl.DateTimeFormat("en-US", {
+			month: "long",
+			year: "numeric"
+		}).format(displayMonth);
+	}, [displayMonth]);
+	const yearOptions = useMemo(() => {
+		const length = yearRange.end - yearRange.start + 1;
+		return Array.from({ length }, (_, index) => yearRange.start + index);
+	}, [yearRange.end, yearRange.start]);
+	const isPrevMonthDisabled = displayMonth.getFullYear() === yearRange.start && displayMonth.getMonth() === 0;
+	const isNextMonthDisabled = displayMonth.getFullYear() === yearRange.end && displayMonth.getMonth() === 11;
+	const dayItems = useMemo(() => {
+		return buildCalendarDays(displayMonth);
+	}, [displayMonth]);
+	const today = useMemo(() => toMidday(/* @__PURE__ */ new Date()), []);
+	const selectDate = (nextDate) => {
+		if (disabledDates?.(nextDate)) return;
+		if (!isControlled) setInternalValue(nextDate);
+		onValueChange?.(nextDate);
+		setDisplayMonth(clampToYearRange(startOfMonth(nextDate)));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-field",
+		children: [
+			label ? /* @__PURE__ */ jsx("label", {
+				className: "pf-field__label",
+				htmlFor: calendarId,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				ref,
+				...props,
+				id: calendarId,
+				className: cx("pf-calendar", error && "pf-calendar--invalid", className),
+				"aria-invalid": error ? true : void 0,
+				"aria-describedby": describedBy,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pf-calendar__header",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "pf-calendar__nav",
+							"aria-label": "Previous month",
+							disabled: isPrevMonthDisabled,
+							onClick: () => {
+								setDisplayMonth((current) => clampToYearRange(addMonths(current, -1)));
+							},
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "square-caret-left",
+								"aria-hidden": true
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "pf-calendar__month-controls",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									className: "pf-calendar__control-label",
+									children: "Month"
+								}),
+								/* @__PURE__ */ jsx(Dropdown, {
+									label: MONTH_OPTIONS[displayMonth.getMonth()].label,
+									items: MONTH_OPTIONS.map((month) => ({
+										id: String(month.value),
+										label: month.label,
+										onSelect: () => {
+											setDisplayMonth((current) => clampToYearRange(new Date(current.getFullYear(), month.value, 1, 12)));
+										},
+										disabled: false
+									})),
+									align: "start"
+								}),
+								/* @__PURE__ */ jsx("label", {
+									className: "pf-calendar__control-label",
+									children: "Year"
+								}),
+								/* @__PURE__ */ jsx(Dropdown, {
+									label: String(displayMonth.getFullYear()),
+									items: yearOptions.map((year) => ({
+										id: String(year),
+										label: String(year),
+										onSelect: () => {
+											setDisplayMonth((current) => clampToYearRange(new Date(year, current.getMonth(), 1, 12)));
+										},
+										disabled: false
+									})),
+									align: "start",
+									maxVisibleItems: 7
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "pf-calendar__nav",
+							"aria-label": "Next month",
+							disabled: isNextMonthDisabled,
+							onClick: () => {
+								setDisplayMonth((current) => clampToYearRange(addMonths(current, 1)));
+							},
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "square-caret-right",
+								"aria-hidden": true
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pf-calendar__grid",
+					role: "grid",
+					"aria-label": monthLabel,
+					children: [/* @__PURE__ */ jsx("div", {
+						role: "row",
+						style: { display: "contents" },
+						"aria-hidden": true,
+						children: WEEKDAY_LABELS.map((day) => /* @__PURE__ */ jsx("span", {
+							role: "columnheader",
+							className: "pf-calendar__weekday",
+							children: day
+						}, day))
+					}), Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ jsx("div", {
+						role: "row",
+						style: { display: "contents" },
+						children: dayItems.slice(week * 7, (week + 1) * 7).map(({ date, inCurrentMonth }) => {
+							const isSelected = selectedDate ? isSameDay(selectedDate, date) : false;
+							const isToday = isSameDay(today, date);
+							const isDisabled = Boolean(disabledDates?.(date));
+							if (!showOutsideDays && !inCurrentMonth) return /* @__PURE__ */ jsx("span", {
+								className: "pf-calendar__day-empty",
+								"aria-hidden": true
+							}, date.toISOString());
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								role: "gridcell",
+								className: cx("pf-calendar__day", !inCurrentMonth && "pf-calendar__day--outside", isToday && "pf-calendar__day--today", isSelected && "pf-calendar__day--selected"),
+								"aria-label": new Intl.DateTimeFormat("en-US", {
+									month: "long",
+									day: "numeric",
+									year: "numeric"
+								}).format(date),
+								"aria-selected": isSelected,
+								"aria-current": isToday ? "date" : void 0,
+								disabled: isDisabled,
+								onClick: () => {
+									selectDate(date);
+								},
+								children: date.getDate()
+							}, date.toISOString());
+						})
+					}, week))]
+				})]
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "pf-field__description",
+				id: descriptionId,
+				children: description
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "pf-field__error",
+				id: errorId,
+				children: error
+			}) : null
+		]
+	});
+});
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar };

package/dist/index42.js

@@ -0,0 +1,134 @@
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+/* empty css        */
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Carousel/Carousel.tsx
+var clamp = (value, min, max) => {
+	return Math.min(Math.max(value, min), max);
+};
+var Carousel = forwardRef(function Carousel({ className, slides, initialIndex = 0, loop = true, showIndicators = true, autoPlay = false, autoPlayInterval = 5e3, onIndexChange, "aria-label": ariaLabel = "Carousel", ...props }, ref) {
+	const totalSlides = slides.length;
+	const [activeIndex, setActiveIndex] = useState(clamp(initialIndex, 0, Math.max(totalSlides - 1, 0)));
+	const resolvedActiveIndex = clamp(activeIndex, 0, Math.max(totalSlides - 1, 0));
+	const goToIndex = (nextIndex) => {
+		if (totalSlides === 0) return;
+		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp(nextIndex, 0, totalSlides - 1);
+		setActiveIndex(resolvedIndex);
+		onIndexChange?.(resolvedIndex);
+	};
+	useEffect(() => {
+		if (!autoPlay || totalSlides < 2) return;
+		const interval = window.setInterval(() => {
+			setActiveIndex((current) => {
+				const next = loop ? (current + 1) % totalSlides : Math.min(current + 1, totalSlides - 1);
+				onIndexChange?.(next);
+				return next;
+			});
+		}, autoPlayInterval);
+		return () => {
+			window.clearInterval(interval);
+		};
+	}, [
+		autoPlay,
+		autoPlayInterval,
+		loop,
+		onIndexChange,
+		totalSlides
+	]);
+	const isPrevDisabled = !loop && resolvedActiveIndex <= 0;
+	const isNextDisabled = !loop && resolvedActiveIndex >= totalSlides - 1;
+	const slideLabel = useMemo(() => {
+		if (totalSlides === 0) return "No slides";
+		return `Slide ${resolvedActiveIndex + 1} of ${totalSlides}`;
+	}, [resolvedActiveIndex, totalSlides]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-carousel", className),
+		"aria-label": ariaLabel,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pf-carousel__viewport",
+			role: "region",
+			"aria-roledescription": "carousel",
+			"aria-label": slideLabel,
+			children: totalSlides === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "pf-carousel__empty",
+				role: "status",
+				children: "Add at least one slide."
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "pf-carousel__track",
+				style: { transform: `translateX(-${resolvedActiveIndex * 100}%)` },
+				children: slides.map((slide, index) => /* @__PURE__ */ jsx("div", {
+					className: "pf-carousel__slide",
+					role: "group",
+					"aria-roledescription": "slide",
+					"aria-label": `Slide ${index + 1} of ${totalSlides}`,
+					"aria-hidden": index !== resolvedActiveIndex,
+					children: slide
+				}, `slide-${index}`))
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pf-carousel__controls",
+			onKeyDown: (event) => {
+				if (event.key === "ArrowLeft") {
+					event.preventDefault();
+					goToIndex(resolvedActiveIndex - 1);
+				} else if (event.key === "ArrowRight") {
+					event.preventDefault();
+					goToIndex(resolvedActiveIndex + 1);
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "pf-carousel__nav",
+					"aria-label": "Previous slide",
+					disabled: isPrevDisabled || totalSlides < 2,
+					onClick: () => {
+						goToIndex(resolvedActiveIndex - 1);
+					},
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "square-caret-left",
+						"aria-hidden": true
+					})
+				}),
+				showIndicators && totalSlides > 1 ? /* @__PURE__ */ jsx("div", {
+					className: "pf-carousel__indicators",
+					"aria-label": "Slide indicators",
+					children: slides.map((_, index) => {
+						const isActive = index === resolvedActiveIndex;
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: cx("pf-carousel__indicator", isActive && "pf-carousel__indicator--active"),
+							"aria-label": `Go to slide ${index + 1}`,
+							"aria-current": isActive ? "true" : void 0,
+							onClick: () => {
+								goToIndex(index);
+							}
+						}, `indicator-${index}`);
+					})
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "pf-carousel__indicator-spacer",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "pf-carousel__nav",
+					"aria-label": "Next slide",
+					disabled: isNextDisabled || totalSlides < 2,
+					onClick: () => {
+						goToIndex(resolvedActiveIndex + 1);
+					},
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "square-caret-right",
+						"aria-hidden": true
+					})
+				})
+			]
+		})]
+	});
+});
+Carousel.displayName = "Carousel";
+//#endregion
+export { Carousel };

package/dist/index43.js

@@ -0,0 +1,16 @@
+//#region ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
+//#endregion
+export { clsx as default };