@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,468 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/Calendar/Calendar.tsx
+function isSameDay(a, b) {
+	return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+/** Day-precision comparator; ignores time-of-day. */
+function compareDays(a, b) {
+	return a.getFullYear() - b.getFullYear() || a.getMonth() - b.getMonth() || a.getDate() - b.getDate();
+}
+function isSameMonth(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function toDayStart(date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addDays(date, amount) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function daysInMonth(year, monthIndex) {
+	return new Date(year, monthIndex + 1, 0).getDate();
+}
+/** Month arithmetic that clamps the day-of-month (Jan 31 + 1 month = Feb 28/29). */
+function addMonths(date, amount) {
+	const year = date.getFullYear();
+	const month = date.getMonth() + amount;
+	const target = new Date(year, month, 1);
+	return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), daysInMonth(target.getFullYear(), target.getMonth())));
+}
+function dayKey(date) {
+	return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+function orderRange(a, b) {
+	return compareDays(a, b) <= 0 ? {
+		start: a,
+		end: b
+	} : {
+		start: b,
+		end: a
+	};
+}
+/** A Sunday, used to render weekday names for any `weekStartsOn`. */
+const REFERENCE_SUNDAY = new Date(2026, 0, 4);
+function buildWeeks(month, weekStartsOn, fixedWeeks) {
+	const first = startOfMonth(month);
+	const lead = (first.getDay() - weekStartsOn + 7) % 7;
+	const gridStart = addDays(first, -lead);
+	const total = lead + daysInMonth(month.getFullYear(), month.getMonth());
+	const weekCount = fixedWeeks ? 6 : Math.ceil(total / 7);
+	return Array.from({ length: weekCount }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(gridStart, week * 7 + day)));
+}
+/** First day of week for a BCP-47 locale (0 = Sunday), when the runtime knows it. */
+function localeWeekStart(locale) {
+	try {
+		const asAny = new Intl.Locale(locale ?? new Intl.DateTimeFormat().resolvedOptions().locale);
+		const firstDay = (asAny.getWeekInfo?.() ?? asAny.weekInfo)?.firstDay;
+		if (typeof firstDay === "number") return firstDay % 7;
+	} catch {}
+	return 0;
+}
+function createFormatter(locale, options) {
+	try {
+		return new Intl.DateTimeFormat(locale, options);
+	} catch {
+		return new Intl.DateTimeFormat(void 0, options);
+	}
+}
+/** Minimal controllable-state pair: `undefined` = uncontrolled, `null` = controlled-empty. */
+function useControlled(controlled, initial) {
+	const [internal, setInternal] = useState(initial);
+	return [controlled !== void 0 ? controlled : internal, setInternal];
+}
+const dayButtonClasses = "relative inline-flex size-9 cursor-pointer select-none items-center justify-center rounded-full font-sans text-sm text-foreground duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-today:border data-today:border-primary-500 data-outside:text-muted-foreground data-hidden:invisible data-unavailable:cursor-default data-unavailable:text-muted-foreground data-unavailable:line-through data-unavailable:hover:bg-transparent data-unavailable:active:bg-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary-700 data-selected:active:bg-primary-800 data-range-middle:rounded-none data-range-middle:bg-primary-100 data-range-middle:text-foreground data-range-middle:data-today:rounded-full data-range-middle:hover:bg-primary-200 data-range-middle:active:bg-primary-200";
+const navButtonClasses = "inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground transition-colors duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const captionClasses = "font-sans text-sm font-semibold text-foreground";
+const weekdayClasses = "size-9 p-0 text-center align-middle font-sans text-xs font-medium text-muted-foreground";
+function ChevronLeftIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+	});
+}
+function ChevronRightIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+	});
+}
+const Calendar = forwardRef((props, forwardedRef) => {
+	const { mode = "single", value: valueProp, defaultValue, onValueChange, allowDeselect = false, month: monthProp, defaultMonth, onMonthChange, numberOfMonths: numberOfMonthsProp = 1, minDate, maxDate, isDateUnavailable, disabled = false, readOnly = false, locale, weekStartsOn: weekStartsOnProp, showOutsideDays = true, fixedWeeks = false, today: todayProp, autoFocus = false, previousMonthLabel = "Previous month", nextMonthLabel = "Next month", "aria-label": ariaLabel, className, render, ...rest } = props;
+	const numberOfMonths = Math.max(1, Math.floor(numberOfMonthsProp));
+	const weekStartsOn = weekStartsOnProp ?? localeWeekStart(locale);
+	const [fallbackToday] = useState(() => toDayStart(/* @__PURE__ */ new Date()));
+	const today = todayProp ? toDayStart(todayProp) : fallbackToday;
+	const minDay = minDate ? toDayStart(minDate) : null;
+	const maxDay = maxDate ? toDayStart(maxDate) : null;
+	const [rawValue, setRawValue] = useControlled(valueProp, defaultValue ?? (mode === "multiple" ? [] : null));
+	const singleValue = mode === "single" && rawValue ? rawValue : null;
+	const multipleValue = useMemo(() => mode === "multiple" && Array.isArray(rawValue) ? rawValue : [], [mode, rawValue]);
+	const committedRange = mode === "range" && rawValue ? rawValue : null;
+	const [anchor, setAnchor] = useState(null);
+	const [previewDate, setPreviewDate] = useState(null);
+	const displayRange = anchor ? orderRange(anchor, previewDate ?? anchor) : committedRange ? orderRange(committedRange.start, committedRange.end) : null;
+	const firstSelected = mode === "single" ? singleValue : mode === "multiple" ? multipleValue[0] ?? null : committedRange?.start ?? null;
+	const initialMonth = () => startOfMonth(defaultMonth ?? firstSelected ?? today);
+	const [firstMonthRaw, setFirstMonthState] = useControlled(monthProp ? startOfMonth(monthProp) : void 0, initialMonth());
+	const firstMonth = startOfMonth(firstMonthRaw);
+	const visibleMonths = useMemo(() => Array.from({ length: numberOfMonths }, (_, i) => addMonths(firstMonth, i)), [firstMonth, numberOfMonths]);
+	const lastMonth = visibleMonths[visibleMonths.length - 1];
+	const [focusedDate, setFocusedDate] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const dayRefs = useRef(/* @__PURE__ */ new Map());
+	const shouldFocusRef = useRef(false);
+	const pagedDayRef = useRef(null);
+	const navRescueRef = useRef(null);
+	const formatters = useMemo(() => ({
+		caption: createFormatter(locale, {
+			month: "long",
+			year: "numeric"
+		}),
+		weekday: createFormatter(locale, { weekday: "short" }),
+		day: createFormatter(locale, { day: "numeric" }),
+		dayLabel: createFormatter(locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		})
+	}), [locale]);
+	const weekdayLabels = useMemo(() => Array.from({ length: 7 }, (_, i) => formatters.weekday.format(addDays(REFERENCE_SUNDAY, weekStartsOn + i))), [formatters, weekStartsOn]);
+	const isOutOfBounds = (day) => minDay !== null && compareDays(day, minDay) < 0 || maxDay !== null && compareDays(day, maxDay) > 0;
+	const clampToBounds = (day) => {
+		if (minDay && compareDays(day, minDay) < 0) return minDay;
+		if (maxDay && compareDays(day, maxDay) > 0) return maxDay;
+		return day;
+	};
+	const contiguousBounds = useMemo(() => {
+		if (mode !== "range" || !anchor || !isDateUnavailable) return null;
+		const SCAN_LIMIT = 400;
+		let low = anchor;
+		for (let i = 0; i < SCAN_LIMIT; i++) {
+			const previous = addDays(low, -1);
+			if (minDay && compareDays(previous, minDay) < 0 || isDateUnavailable(previous)) break;
+			low = previous;
+		}
+		let high = anchor;
+		for (let i = 0; i < SCAN_LIMIT; i++) {
+			const next = addDays(high, 1);
+			if (maxDay && compareDays(next, maxDay) > 0 || isDateUnavailable(next)) break;
+			high = next;
+		}
+		return {
+			low,
+			high
+		};
+	}, [
+		mode,
+		anchor,
+		isDateUnavailable,
+		minDay,
+		maxDay
+	]);
+	const isUnavailable = (day) => isDateUnavailable?.(day) === true || contiguousBounds !== null && (compareDays(day, contiguousBounds.low) < 0 || compareDays(day, contiguousBounds.high) > 0);
+	const focusTarget = useMemo(() => {
+		const visible = (day) => day !== null && visibleMonths.some((m) => isSameMonth(m, day)) && !isOutOfBounds(day);
+		if (visible(focusedDate)) return focusedDate;
+		if (mode === "range" && visible(anchor)) return anchor;
+		if (visible(firstSelected)) return firstSelected;
+		if (visible(today)) return today;
+		const first = visibleMonths[0];
+		return minDay && compareDays(minDay, first) > 0 ? minDay : first;
+	}, [
+		focusedDate,
+		anchor,
+		firstSelected,
+		today,
+		visibleMonths,
+		minDay,
+		maxDay,
+		mode
+	]);
+	const commitValue = (next) => {
+		setRawValue(next);
+		onValueChange?.(next);
+	};
+	const setMonthWindow = (next) => {
+		let clamped = startOfMonth(next);
+		if (maxDay) {
+			const maxMonth = startOfMonth(maxDay);
+			if (compareDays(addMonths(clamped, numberOfMonths - 1), maxMonth) > 0) clamped = addMonths(maxMonth, -(numberOfMonths - 1));
+		}
+		if (minDay) {
+			const minMonth = startOfMonth(minDay);
+			if (compareDays(clamped, minMonth) < 0) clamped = minMonth;
+		}
+		if (!isSameMonth(clamped, firstMonth)) {
+			setFirstMonthState(clamped);
+			onMonthChange?.(clamped);
+		}
+		return clamped;
+	};
+	/** Move the roving focus to a day, shifting the visible window if needed. */
+	const focusDay = (target) => {
+		const day = clampToBounds(target);
+		const monthsFromFirst = (day.getFullYear() - firstMonth.getFullYear()) * 12 + (day.getMonth() - firstMonth.getMonth());
+		if (monthsFromFirst < 0) setMonthWindow(day);
+		else if (monthsFromFirst >= numberOfMonths) setMonthWindow(addMonths(startOfMonth(day), -(numberOfMonths - 1)));
+		shouldFocusRef.current = true;
+		setFocusedDate(day);
+		if (anchor) setPreviewDate(day);
+	};
+	const handleDaySelect = (day) => {
+		if (disabled || readOnly || isUnavailable(day)) return;
+		pagedDayRef.current = null;
+		if (mode === "single") {
+			if (allowDeselect && isSameDay(singleValue, day)) commitValue(null);
+			else commitValue(day);
+			setFocusedDate(day);
+		} else if (mode === "multiple") {
+			const next = multipleValue.some((d) => isSameDay(d, day)) ? multipleValue.filter((d) => !isSameDay(d, day)) : [...multipleValue, day].sort(compareDays);
+			commitValue(next);
+			setFocusedDate(day);
+		} else if (!anchor) {
+			setAnchor(day);
+			setPreviewDate(day);
+			focusDay(addDays(day, 1));
+		} else {
+			commitValue(orderRange(anchor, day));
+			setAnchor(null);
+			setPreviewDate(null);
+			setFocusedDate(day);
+		}
+	};
+	const handleGridKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === "Escape") {
+			if (mode === "range" && anchor) {
+				setAnchor(null);
+				setPreviewDate(null);
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return;
+		}
+		const focused = focusTarget;
+		const weekOffset = (focused.getDay() - weekStartsOn + 7) % 7;
+		let next = null;
+		let paging = false;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowLeft": {
+				const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+				next = addDays(focused, event.key === "ArrowRight" !== rtl ? 1 : -1);
+				break;
+			}
+			case "ArrowDown":
+				next = addDays(focused, 7);
+				break;
+			case "ArrowUp":
+				next = addDays(focused, -7);
+				break;
+			case "Home":
+				next = addDays(focused, -weekOffset);
+				break;
+			case "End":
+				next = addDays(focused, 6 - weekOffset);
+				break;
+			case "PageUp":
+			case "PageDown": {
+				const monthDelta = (event.key === "PageDown" ? 1 : -1) * (event.shiftKey ? 12 : numberOfMonths);
+				pagedDayRef.current ??= focused.getDate();
+				const targetMonth = addMonths(startOfMonth(focused), monthDelta);
+				next = new Date(targetMonth.getFullYear(), targetMonth.getMonth(), Math.min(pagedDayRef.current, daysInMonth(targetMonth.getFullYear(), targetMonth.getMonth())));
+				paging = true;
+				break;
+			}
+			default: return;
+		}
+		event.preventDefault();
+		if (!paging) pagedDayRef.current = null;
+		focusDay(next);
+	};
+	const previousDisabled = disabled || minDay !== null && compareDays(firstMonth, startOfMonth(minDay)) <= 0;
+	const nextDisabled = disabled || maxDay !== null && compareDays(lastMonth, startOfMonth(maxDay)) >= 0;
+	const handleNavigate = (direction) => {
+		navRescueRef.current = direction === -1 ? "previous" : "next";
+		const landed = setMonthWindow(addMonths(firstMonth, direction * numberOfMonths));
+		const from = formatters.caption.format(landed);
+		const to = formatters.caption.format(addMonths(landed, numberOfMonths - 1));
+		setAnnouncement(numberOfMonths > 1 ? `${from} – ${to}` : from);
+	};
+	useEffect(() => {
+		if (shouldFocusRef.current && focusedDate) {
+			shouldFocusRef.current = false;
+			dayRefs.current.get(dayKey(focusedDate))?.focus();
+		}
+	}, [focusedDate]);
+	useEffect(() => {
+		if (!navRescueRef.current) return;
+		const which = navRescueRef.current;
+		navRescueRef.current = null;
+		if (which === "previous" && previousDisabled || which === "next" && nextDisabled) dayRefs.current.get(dayKey(focusTarget))?.focus();
+	});
+	useEffect(() => {
+		if (autoFocus) dayRefs.current.get(dayKey(focusTarget))?.focus();
+	}, []);
+	const renderDay = (day, month) => {
+		const key = dayKey(day);
+		const outside = !isSameMonth(day, month);
+		const duplicate = outside && visibleMonths.some((m) => isSameMonth(m, day));
+		const hidden = outside && (!showOutsideDays || duplicate);
+		const hardDisabled = disabled || outside || isOutOfBounds(day);
+		const unavailable = !outside && !hardDisabled && isUnavailable(day);
+		const inRange = displayRange !== null && compareDays(day, displayRange.start) >= 0 && compareDays(day, displayRange.end) <= 0;
+		const rangeStart = mode === "range" && inRange && isSameDay(day, displayRange.start);
+		const rangeEnd = mode === "range" && inRange && isSameDay(day, displayRange.end);
+		const rangeMiddle = mode === "range" && inRange && !rangeStart && !rangeEnd;
+		const columnIndex = (day.getDay() - weekStartsOn + 7) % 7;
+		const rangeConnectorClass = !outside && rangeStart && !rangeEnd && columnIndex < 6 ? "end-0" : !outside && rangeEnd && !rangeStart && columnIndex > 0 ? "start-0" : null;
+		const selected = mode === "single" ? isSameDay(singleValue, day) : mode === "multiple" ? multipleValue.some((d) => isSameDay(d, day)) : rangeStart || rangeEnd;
+		const ariaSelected = mode === "range" ? inRange : selected;
+		const dataAttributes = {};
+		if (selected) dataAttributes["data-selected"] = "";
+		if (rangeMiddle) dataAttributes["data-range-middle"] = "";
+		if (rangeStart) dataAttributes["data-range-start"] = "";
+		if (rangeEnd) dataAttributes["data-range-end"] = "";
+		if (isSameDay(today, day)) dataAttributes["data-today"] = "";
+		if (outside) dataAttributes["data-outside"] = "";
+		if (hidden) dataAttributes["data-hidden"] = "";
+		if (unavailable) dataAttributes["data-unavailable"] = "";
+		if (hardDisabled) dataAttributes["data-disabled"] = "";
+		return /* @__PURE__ */ jsxs("td", {
+			role: "gridcell",
+			"aria-selected": !outside && ariaSelected ? true : void 0,
+			"aria-hidden": outside || void 0,
+			className: cn("relative p-0", !outside && rangeMiddle && "bg-primary-100"),
+			children: [rangeConnectorClass && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("pointer-events-none absolute inset-y-0 w-1/2 bg-primary-100", rangeConnectorClass)
+			}), /* @__PURE__ */ jsx("button", {
+				ref: (node) => {
+					if (node) dayRefs.current.set(key, node);
+					else dayRefs.current.delete(key);
+				},
+				type: "button",
+				tabIndex: !outside && isSameDay(day, focusTarget) ? 0 : -1,
+				disabled: hardDisabled || void 0,
+				"aria-disabled": unavailable || void 0,
+				"aria-label": formatters.dayLabel.format(day),
+				"aria-current": isSameDay(today, day) ? "date" : void 0,
+				onClick: () => handleDaySelect(day),
+				onFocus: () => {
+					if (!isSameDay(focusedDate, day)) setFocusedDate(day);
+					if (anchor) setPreviewDate(day);
+				},
+				onPointerEnter: anchor ? () => setPreviewDate(day) : void 0,
+				className: cn(dayButtonClasses, mode === "range" ? "transition-[color,border-color]" : "transition-colors", readOnly && "pointer-events-none"),
+				...dataAttributes,
+				children: formatters.day.format(day)
+			})]
+		}, key);
+	};
+	const renderMonth = (month, index) => {
+		const caption = formatters.caption.format(month);
+		const spacer = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-9"
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [
+					index === 0 ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": previousMonthLabel,
+						disabled: previousDisabled || void 0,
+						onClick: () => handleNavigate(-1),
+						className: navButtonClasses,
+						children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "rtl:-scale-x-100" })
+					}) : spacer,
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: captionClasses,
+						children: caption
+					}),
+					index === numberOfMonths - 1 ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": nextMonthLabel,
+						disabled: nextDisabled || void 0,
+						onClick: () => handleNavigate(1),
+						className: navButtonClasses,
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:-scale-x-100" })
+					}) : spacer
+				]
+			}), /* @__PURE__ */ jsxs("table", {
+				role: "grid",
+				"aria-label": ariaLabel ? `${ariaLabel}, ${caption}` : caption,
+				"aria-multiselectable": mode !== "single" || void 0,
+				"aria-readonly": readOnly || void 0,
+				"aria-disabled": disabled || void 0,
+				onKeyDown: handleGridKeyDown,
+				className: "border-collapse",
+				children: [/* @__PURE__ */ jsx("thead", {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("tr", { children: weekdayLabels.map((label, i) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: weekdayClasses,
+						children: label
+					}, i)) })
+				}), /* @__PURE__ */ jsx("tbody", { children: buildWeeks(month, weekStartsOn, fixedWeeks).map((week, w) => /* @__PURE__ */ jsx("tr", { children: week.map((day) => renderDay(day, month)) }, w)) })]
+			})]
+		}, dayKey(month));
+	};
+	const state = {
+		mode,
+		disabled,
+		readOnly
+	};
+	const defaultProps = {
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("inline-flex flex-col p-3 font-sans", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: announcement
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-start gap-8",
+			children: visibleMonths.map(renderMonth)
+		})] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		state,
+		stateAttributesMapping: {
+			mode: (value) => ({ "data-mode": value }),
+			disabled: (value) => value ? { "data-disabled": "" } : null,
+			readOnly: (value) => value ? { "data-readonly": "" } : null
+		},
+		ref: [forwardedRef],
+		props: mergeProps(defaultProps, rest)
+	});
+});
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar };

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { Calendar, CalendarDateRange, CalendarMode, CalendarProps, CalendarState } from "./Calendar.js";
+export { Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState };

package/dist/components/Calendar/index.js

@@ -0,0 +1,2 @@
+import { Calendar } from "./Calendar.js";
+export { Calendar };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,60 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/Checkbox/Checkbox.d.ts
+type CheckboxSize = "sm" | "md" | "lg";
+interface CheckboxVariantsOptions {
+  size?: CheckboxSize;
+  className?: string;
+}
+/**
+ * Class list for the checkbox box itself. State styling hangs off Base UI's
+ * data-attributes (`data-checked`, `data-indeterminate`, `data-disabled`,
+ * `data-readonly`, `data-invalid`) plus `aria-invalid`.
+ */
+declare function checkboxVariants({ size, className }?: CheckboxVariantsOptions): string;
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof Checkbox.Root>, "className"> {
+  /**
+   * Box size. The 24px `lg` box meets the WCAG 2.5.8 target-size floor on its
+   * own; `sm`/`md` rely on the clickable `label` (or surrounding spacing) to
+   * extend the target. Prefer `md`+ with a label on touch-first surfaces.
+   */
+  size?: CheckboxSize;
+  /**
+   * Visible label rendered in an enclosing `<label>`, so clicking it toggles
+   * the checkbox and it names the control. Without it, provide an accessible
+   * name another way: `aria-label`, `aria-labelledby`, or an external
+   * `<label>`. When `required` is set, the label shows a decorative asterisk.
+   */
+  label?: ReactNode;
+  /**
+   * Supporting copy below the label, linked via `aria-describedby`. Rendered
+   * outside the `<label>` element so screen readers announce it as the
+   * description instead of reading it into the accessible name.
+   */
+  description?: ReactNode;
+  /** Applied to the checkbox box itself, also when `label`/`description` wrap it. */
+  className?: string;
+}
+/**
+ * Binary/mixed-state control built on Base UI's Checkbox. The indicator is
+ * built in: a check mark, or a minus while `indeterminate` — so a `parent`
+ * checkbox inside a controlled `CheckboxGroup` with `allValues` needs no
+ * extra wiring. `ref` and `className` always target the box element, whether
+ * or not the labelled layout wraps it.
+ */
+declare const Checkbox$1: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxGroup>, "className"> {
+  className?: string;
+}
+/**
+ * Shares ticked-value state (`value`/`defaultValue`/`onValueChange`) across
+ * child checkboxes matched by their `value` prop, and drives a `parent`
+ * checkbox's indeterminate state when `allValues` is set. Lays the items out
+ * as a vertical stack — pass `className="flex-row"` for a horizontal row.
+ * The group needs an accessible name: `aria-labelledby` pointing at a caption,
+ * or `aria-label`.
+ */
+declare const CheckboxGroup$1: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariantsOptions, checkboxVariants };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,129 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/Checkbox/Checkbox.tsx
+const boxClasses = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md border border-border bg-background text-primary-foreground transition-colors duration-150 hover:border-slate-300 data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 hover:data-indeterminate:border-primary-700 hover:data-indeterminate:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const boxSizeClasses = {
+	sm: "size-4 [&_svg]:size-3",
+	md: "size-5 [&_svg]:size-3.5",
+	lg: "size-6 [&_svg]:size-4"
+};
+const boxOffsetClasses = {
+	sm: "mt-0.5",
+	md: "",
+	lg: ""
+};
+const labelTextClasses = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const descriptionTextClasses = {
+	sm: "text-xs ps-6",
+	md: "text-xs ps-7",
+	lg: "text-sm ps-8"
+};
+/**
+* Class list for the checkbox box itself. State styling hangs off Base UI's
+* data-attributes (`data-checked`, `data-indeterminate`, `data-disabled`,
+* `data-readonly`, `data-invalid`) plus `aria-invalid`.
+*/
+function checkboxVariants({ size = "md", className } = {}) {
+	return cn(boxClasses, boxSizeClasses[size], className);
+}
+const glyphDrawClasses = "[stroke-dasharray:1] motion-safe:transition-[stroke-dashoffset,opacity] motion-safe:duration-200 motion-safe:ease-out motion-safe:in-data-starting-style:[stroke-dashoffset:1] motion-safe:in-data-starting-style:opacity-0";
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 3,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m5 13 4 4L19 7",
+			pathLength: 1,
+			className: glyphDrawClasses
+		})
+	});
+}
+function MinusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 3,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6 12h12",
+			pathLength: 1,
+			className: glyphDrawClasses
+		})
+	});
+}
+/**
+* Binary/mixed-state control built on Base UI's Checkbox. The indicator is
+* built in: a check mark, or a minus while `indeterminate` — so a `parent`
+* checkbox inside a controlled `CheckboxGroup` with `allValues` needs no
+* extra wiring. `ref` and `className` always target the box element, whether
+* or not the labelled layout wraps it.
+*/
+const Checkbox$1 = forwardRef(({ size = "md", label, description, required, className, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+	const descriptionId = useId();
+	const hasLabel = label != null;
+	const hasText = hasLabel || description != null;
+	const control = /* @__PURE__ */ jsx(Checkbox.Root, {
+		ref,
+		required,
+		"aria-describedby": [ariaDescribedBy, description != null ? descriptionId : void 0].filter(Boolean).join(" ") || void 0,
+		className: cn(checkboxVariants({ size }), hasText && "data-disabled:opacity-100", hasLabel && boxOffsetClasses[size], className),
+		...rest,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: cn("flex", "motion-safe:transition-[scale,opacity] motion-safe:duration-200 motion-safe:ease-out", "motion-safe:data-ending-style:scale-75 motion-safe:data-ending-style:opacity-0", "motion-safe:data-ending-style:duration-100 motion-safe:data-ending-style:ease-in"),
+			render: (props, state) => /* @__PURE__ */ jsx("span", {
+				...props,
+				children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+			})
+		})
+	});
+	if (!hasText) return control;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
+		children: [hasLabel ? /* @__PURE__ */ jsxs("label", {
+			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default"),
+			children: [control, /* @__PURE__ */ jsxs("span", {
+				className: cn("font-medium text-foreground select-none", labelTextClasses[size]),
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "ms-0.5 text-destructive",
+					children: "*"
+				})]
+			})]
+		}) : control, description != null && /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: cn("text-muted-foreground", descriptionTextClasses[size]),
+			children: description
+		})]
+	});
+});
+Checkbox$1.displayName = "Checkbox";
+/**
+* Shares ticked-value state (`value`/`defaultValue`/`onValueChange`) across
+* child checkboxes matched by their `value` prop, and drives a `parent`
+* checkbox's indeterminate state when `allValues` is set. Lays the items out
+* as a vertical stack — pass `className="flex-row"` for a horizontal row.
+* The group needs an accessible name: `aria-labelledby` pointing at a caption,
+* or `aria-label`.
+*/
+const CheckboxGroup$1 = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(CheckboxGroup, {
+	ref,
+	className: cn("flex flex-col items-start gap-3", className),
+	...rest
+}));
+CheckboxGroup$1.displayName = "CheckboxGroup";
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup, checkboxVariants };

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariantsOptions, checkboxVariants } from "./Checkbox.js";
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, checkboxVariants };

package/dist/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxGroup, checkboxVariants } from "./Checkbox.js";
+export { Checkbox, CheckboxGroup, checkboxVariants };