@chayns-ui/core 0.9.4 → 0.11.0

package/dist/components/date-time-picker/hooks/useDateTimePickerValue.js

@@ -0,0 +1,175 @@
+import { clampDate, dateAtMidnight, normalizeMinute } from "../date-time-picker-utils.js";
+import { useMemo } from "react";
+//#region src/components/date-time-picker/hooks/useDateTimePickerValue.ts
+function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, placeholder, wheelLabels, minuteStep, mode }) {
+	const { hourFormatter, monthFormatter, timeFormatter, dateFormatter, dateOrderFormatter } = useMemo(() => ({
+		hourFormatter: new Intl.DateTimeFormat(locale, { hour: "numeric" }),
+		monthFormatter: new Intl.DateTimeFormat(locale, { month: "long" }),
+		timeFormatter: new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			minute: "2-digit"
+		}),
+		dateFormatter: new Intl.DateTimeFormat(locale, {
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		}),
+		dateOrderFormatter: new Intl.DateTimeFormat(locale, {
+			day: "numeric",
+			month: "numeric",
+			year: "numeric"
+		})
+	}), [locale]);
+	let displayValue = value;
+	if (value !== null) displayValue = mode === "date" ? clampDate(value, minDate, maxDate) : normalizeMinute(value, minuteStep);
+	const activeValue = displayValue ?? /* @__PURE__ */ new Date();
+	const isTwelveHour = hourFormatter.resolvedOptions().hour12 === true;
+	const years = useMemo(() => {
+		const today = (/* @__PURE__ */ new Date()).getFullYear();
+		const first = minDate?.getFullYear() ?? today - 100;
+		const last = maxDate?.getFullYear() ?? today + 100;
+		return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+	}, [maxDate, minDate]);
+	function emit(nextValue) {
+		onChange(mode === "date" ? clampDate(nextValue, minDate, maxDate) : nextValue);
+	}
+	function updateTime(part, nextValue) {
+		const next = new Date(activeValue);
+		if (part === "hours") {
+			const hour = isTwelveHour ? nextValue % 12 + (next.getHours() >= 12 ? 12 : 0) : nextValue;
+			next.setHours(hour);
+		} else next.setMinutes(nextValue);
+		emit(next);
+	}
+	function updatePeriod(period) {
+		const next = new Date(activeValue);
+		next.setHours(next.getHours() % 12 + period * 12);
+		emit(next);
+	}
+	function updateDate(part, nextValue) {
+		const next = new Date(activeValue);
+		const originalDay = next.getDate();
+		next.setDate(1);
+		if (part === "fullYear") next.setFullYear(nextValue);
+		if (part === "month") next.setMonth(nextValue);
+		if (part === "date") next.setDate(nextValue);
+		if (part !== "date") next.setDate(Math.min(originalDay, new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()));
+		emit(next);
+	}
+	let formattedValue = placeholder;
+	if (displayValue !== null) {
+		if (mode === "time") formattedValue = `${timeFormatter.format(displayValue)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}`;
+		else formattedValue = dateFormatter.format(displayValue);
+	}
+	const timeSizingValues = useMemo(() => {
+		if (mode !== "time") return [];
+		return Array.from({ length: 24 * (60 / minuteStep) }, (_, index) => {
+			const candidate = new Date(2026, 0, 1);
+			candidate.setHours(Math.floor(index / (60 / minuteStep)));
+			candidate.setMinutes(index % (60 / minuteStep) * minuteStep);
+			return `${timeFormatter.format(candidate)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}`;
+		});
+	}, [
+		locale,
+		minuteStep,
+		mode,
+		timeFormatter
+	]);
+	const dateSizingValues = useMemo(() => {
+		if (mode !== "date") return [];
+		return years.flatMap((year) => {
+			return Array.from({ length: 12 }, (_, month) => {
+				const first = new Date(year, month, 1);
+				const last = new Date(year, month + 1, 0);
+				if (minDate !== void 0 && last < dateAtMidnight(minDate) || maxDate !== void 0 && first > dateAtMidnight(maxDate)) return;
+				const candidate = new Date(last);
+				if (minDate !== void 0 && candidate < dateAtMidnight(minDate)) candidate.setDate(minDate.getDate());
+				if (maxDate !== void 0 && candidate > dateAtMidnight(maxDate)) candidate.setDate(maxDate.getDate());
+				return dateFormatter.format(candidate);
+			}).filter((value) => value !== void 0);
+		});
+	}, [
+		dateFormatter,
+		maxDate,
+		minDate,
+		mode,
+		years
+	]);
+	const sizingValues = mode === "time" ? timeSizingValues : dateSizingValues;
+	const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) => isTwelveHour ? index + 1 : index).map((hour) => ({
+		label: String(hour).padStart(2, "0"),
+		value: hour
+	}));
+	const minutes = Array.from({ length: 60 / minuteStep }, (_, index) => {
+		const minute = index * minuteStep;
+		return {
+			label: String(minute).padStart(2, "0"),
+			value: minute
+		};
+	});
+	const months = Array.from({ length: 12 }, (_, month) => ({
+		label: monthFormatter.format(new Date(2026, month, 1)),
+		value: month
+	})).filter((month) => {
+		const first = new Date(activeValue.getFullYear(), month.value, 1);
+		const last = new Date(activeValue.getFullYear(), month.value + 1, 0);
+		return (minDate === void 0 || last >= dateAtMidnight(minDate)) && (maxDate === void 0 || first <= dateAtMidnight(maxDate));
+	});
+	const days = Array.from({ length: new Date(activeValue.getFullYear(), activeValue.getMonth() + 1, 0).getDate() }, (_, index) => ({
+		label: String(index + 1).padStart(2, "0"),
+		value: index + 1
+	})).filter((day) => {
+		const candidate = new Date(activeValue.getFullYear(), activeValue.getMonth(), day.value);
+		return (minDate === void 0 || candidate >= dateAtMidnight(minDate)) && (maxDate === void 0 || candidate <= dateAtMidnight(maxDate));
+	});
+	const datePartOrder = dateOrderFormatter.formatToParts(activeValue).flatMap((part) => {
+		if (part.type === "day") return ["date"];
+		if (part.type === "month") return ["month"];
+		if (part.type === "year") return ["fullYear"];
+		return [];
+	});
+	const yearOptions = years.map((year) => ({
+		label: String(year),
+		value: year
+	}));
+	function dateOptions(part) {
+		if (part === "date") return days;
+		if (part === "month") return months;
+		return yearOptions;
+	}
+	function dateValue(part) {
+		if (part === "date") return activeValue.getDate();
+		if (part === "month") return activeValue.getMonth();
+		return activeValue.getFullYear();
+	}
+	const dayPeriods = [0, 1].map((period) => ({
+		label: hourFormatter.formatToParts(new Date(2026, 0, 1, period === 0 ? 1 : 13)).find((part) => part.type === "dayPeriod")?.value ?? (period === 0 ? "AM" : "PM"),
+		value: period
+	}));
+	function dateLabel(part) {
+		if (part === "date") return wheelLabels.day;
+		if (part === "month") return wheelLabels.month;
+		return wheelLabels.year;
+	}
+	return {
+		displayValue,
+		sizingValues,
+		formattedValue,
+		activeValue,
+		isTwelveHour,
+		hours,
+		minutes,
+		dayPeriods,
+		datePartOrder,
+		dateOptions,
+		dateValue,
+		dateLabel,
+		updateDate,
+		updateTime,
+		updatePeriod
+	};
+}
+//#endregion
+export { useDateTimePickerValue };
+
+//# sourceMappingURL=useDateTimePickerValue.js.map

package/dist/components/date-time-picker/hooks/useDateTimePickerValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateTimePickerValue.js","names":[],"sources":["../../../../src/components/date-time-picker/hooks/useDateTimePickerValue.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { clampDate, dateAtMidnight, normalizeMinute } from '../date-time-picker-utils.js';\nimport type { DateTimePickerProps } from '../DateTimePicker.types.js';\ntype DatePart = 'date' | 'fullYear' | 'month';\ntype ValueProps = Pick<\n  DateTimePickerProps,\n  'value' | 'locale' | 'onChange' | 'placeholder' | 'wheelLabels'\n> &\n  Required<Pick<DateTimePickerProps, 'minuteStep' | 'mode'>> & {\n    minDate: Date | undefined;\n    maxDate: Date | undefined;\n  };\n\nexport function useDateTimePickerValue({\n  value,\n  locale,\n  maxDate,\n  minDate,\n  onChange,\n  placeholder,\n  wheelLabels,\n  minuteStep,\n  mode,\n}: ValueProps) {\n  const { hourFormatter, monthFormatter, timeFormatter, dateFormatter, dateOrderFormatter } =\n    useMemo(\n      () => ({\n        hourFormatter: new Intl.DateTimeFormat(locale, { hour: 'numeric' }),\n        monthFormatter: new Intl.DateTimeFormat(locale, { month: 'long' }),\n        timeFormatter: new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }),\n        dateFormatter: new Intl.DateTimeFormat(locale, {\n          day: 'numeric',\n          month: 'long',\n          year: 'numeric',\n        }),\n        dateOrderFormatter: new Intl.DateTimeFormat(locale, {\n          day: 'numeric',\n          month: 'numeric',\n          year: 'numeric',\n        }),\n      }),\n      [locale],\n    );\n  let displayValue = value;\n  if (value !== null) {\n    displayValue =\n      mode === 'date' ? clampDate(value, minDate, maxDate) : normalizeMinute(value, minuteStep);\n  }\n  const activeValue = displayValue ?? new Date();\n  const isTwelveHour = hourFormatter.resolvedOptions().hour12 === true;\n\n  const years = useMemo(() => {\n    const today = new Date().getFullYear();\n    const first = minDate?.getFullYear() ?? today - 100;\n    const last = maxDate?.getFullYear() ?? today + 100;\n    return Array.from({ length: last - first + 1 }, (_, index) => first + index);\n  }, [maxDate, minDate]);\n\n  function emit(nextValue: Date) {\n    onChange(mode === 'date' ? clampDate(nextValue, minDate, maxDate) : nextValue);\n  }\n\n  function updateTime(part: 'hours' | 'minutes', nextValue: number) {\n    const next = new Date(activeValue);\n    if (part === 'hours') {\n      const hour = isTwelveHour ? (nextValue % 12) + (next.getHours() >= 12 ? 12 : 0) : nextValue;\n      next.setHours(hour);\n    } else {\n      next.setMinutes(nextValue);\n    }\n    emit(next);\n  }\n\n  function updatePeriod(period: number) {\n    const next = new Date(activeValue);\n    next.setHours((next.getHours() % 12) + period * 12);\n    emit(next);\n  }\n\n  function updateDate(part: DatePart, nextValue: number) {\n    const next = new Date(activeValue);\n    const originalDay = next.getDate();\n    next.setDate(1);\n    if (part === 'fullYear') next.setFullYear(nextValue);\n    if (part === 'month') next.setMonth(nextValue);\n    if (part === 'date') next.setDate(nextValue);\n    if (part !== 'date') {\n      next.setDate(\n        Math.min(originalDay, new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()),\n      );\n    }\n    emit(next);\n  }\n\n  let formattedValue = placeholder;\n  if (displayValue !== null) {\n    if (mode === 'time')\n      formattedValue = `${timeFormatter.format(displayValue)}${locale.toLowerCase().startsWith('de') ? ' Uhr' : ''}`;\n    else formattedValue = dateFormatter.format(displayValue);\n  }\n  const timeSizingValues = useMemo(() => {\n    if (mode !== 'time') return [];\n    return Array.from({ length: 24 * (60 / minuteStep) }, (_, index) => {\n      const candidate = new Date(2026, 0, 1);\n      candidate.setHours(Math.floor(index / (60 / minuteStep)));\n      candidate.setMinutes((index % (60 / minuteStep)) * minuteStep);\n      return `${timeFormatter.format(candidate)}${locale.toLowerCase().startsWith('de') ? ' Uhr' : ''}`;\n    });\n  }, [locale, minuteStep, mode, timeFormatter]);\n  const dateSizingValues = useMemo(() => {\n    if (mode !== 'date') return [];\n\n    return years.flatMap((year) => {\n      const values = Array.from({ length: 12 }, (_, month) => {\n        const first = new Date(year, month, 1);\n        const last = new Date(year, month + 1, 0);\n        if (\n          (minDate !== undefined && last < dateAtMidnight(minDate)) ||\n          (maxDate !== undefined && first > dateAtMidnight(maxDate))\n        ) {\n          return undefined;\n        }\n\n        const candidate = new Date(last);\n        if (minDate !== undefined && candidate < dateAtMidnight(minDate)) {\n          candidate.setDate(minDate.getDate());\n        }\n        if (maxDate !== undefined && candidate > dateAtMidnight(maxDate)) {\n          candidate.setDate(maxDate.getDate());\n        }\n        return dateFormatter.format(candidate);\n      });\n      return values.filter((value): value is string => value !== undefined);\n    });\n  }, [dateFormatter, maxDate, minDate, mode, years]);\n  const sizingValues = mode === 'time' ? timeSizingValues : dateSizingValues;\n\n  const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) =>\n    isTwelveHour ? index + 1 : index,\n  ).map((hour) => ({ label: String(hour).padStart(2, '0'), value: hour }));\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, index) => {\n    const minute = index * minuteStep;\n    return { label: String(minute).padStart(2, '0'), value: minute };\n  });\n  const months = Array.from({ length: 12 }, (_, month) => ({\n    label: monthFormatter.format(new Date(2026, month, 1)),\n    value: month,\n  })).filter((month) => {\n    const first = new Date(activeValue.getFullYear(), month.value, 1);\n    const last = new Date(activeValue.getFullYear(), month.value + 1, 0);\n    return (\n      (minDate === undefined || last >= dateAtMidnight(minDate)) &&\n      (maxDate === undefined || first <= dateAtMidnight(maxDate))\n    );\n  });\n  const days = Array.from(\n    { length: new Date(activeValue.getFullYear(), activeValue.getMonth() + 1, 0).getDate() },\n    (_, index) => ({ label: String(index + 1).padStart(2, '0'), value: index + 1 }),\n  ).filter((day) => {\n    const candidate = new Date(activeValue.getFullYear(), activeValue.getMonth(), day.value);\n    return (\n      (minDate === undefined || candidate >= dateAtMidnight(minDate)) &&\n      (maxDate === undefined || candidate <= dateAtMidnight(maxDate))\n    );\n  });\n  const datePartOrder = dateOrderFormatter.formatToParts(activeValue).flatMap<DatePart>((part) => {\n    if (part.type === 'day') return ['date'];\n    if (part.type === 'month') return ['month'];\n    if (part.type === 'year') return ['fullYear'];\n    return [];\n  });\n  const yearOptions = years.map((year) => ({ label: String(year), value: year }));\n\n  function dateOptions(part: DatePart) {\n    if (part === 'date') return days;\n    if (part === 'month') return months;\n    return yearOptions;\n  }\n\n  function dateValue(part: DatePart) {\n    if (part === 'date') return activeValue.getDate();\n    if (part === 'month') return activeValue.getMonth();\n    return activeValue.getFullYear();\n  }\n  const dayPeriods = [0, 1].map((period) => ({\n    label:\n      hourFormatter\n        .formatToParts(new Date(2026, 0, 1, period === 0 ? 1 : 13))\n        .find((part) => part.type === 'dayPeriod')?.value ?? (period === 0 ? 'AM' : 'PM'),\n    value: period,\n  }));\n  function dateLabel(part: DatePart) {\n    if (part === 'date') return wheelLabels.day;\n    if (part === 'month') return wheelLabels.month;\n    return wheelLabels.year;\n  }\n  return {\n    displayValue,\n    sizingValues,\n    formattedValue,\n    activeValue,\n    isTwelveHour,\n    hours,\n    minutes,\n    dayPeriods,\n    datePartOrder,\n    dateOptions,\n    dateValue,\n    dateLabel,\n    updateDate,\n    updateTime,\n    updatePeriod,\n  };\n}\n"],"mappings":"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"}

package/dist/components/date-time-picker/sizer/PickerSizer.d.ts

@@ -0,0 +1,7 @@
+interface PickerSizerProps {
+    values: readonly string[];
+    placeholder: string | null;
+}
+declare const PickerSizer: import("react").MemoExoticComponent<({ values, placeholder }: PickerSizerProps) => import("react").JSX.Element>;
+export default PickerSizer;
+//# sourceMappingURL=PickerSizer.d.ts.map

package/dist/components/date-time-picker/sizer/PickerSizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSizer.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/sizer/PickerSizer.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,WAAW,gEAAsD,gBAAgB,iCASrF,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/components/date-time-picker/sizer/PickerSizer.js

@@ -0,0 +1,15 @@
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-time-picker/sizer/PickerSizer.tsx
+var PickerSizer = memo(function PickerSizer({ values, placeholder }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": "true",
+		className: "chayns-date-time-picker__sizer",
+		children: [placeholder === null ? null : /* @__PURE__ */ jsx("span", { children: placeholder }), values.map((value) => /* @__PURE__ */ jsx("span", { children: value }, value))]
+	});
+});
+PickerSizer.displayName = "DateTimePicker.Sizer";
+//#endregion
+export { PickerSizer as default };
+
+//# sourceMappingURL=PickerSizer.js.map

package/dist/components/date-time-picker/sizer/PickerSizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSizer.js","names":[],"sources":["../../../../src/components/date-time-picker/sizer/PickerSizer.tsx"],"sourcesContent":["import { memo } from 'react';\n\ninterface PickerSizerProps {\n  values: readonly string[];\n  placeholder: string | null;\n}\n\nconst PickerSizer = memo(function PickerSizer({ values, placeholder }: PickerSizerProps) {\n  return (\n    <span aria-hidden=\"true\" className=\"chayns-date-time-picker__sizer\">\n      {placeholder === null ? null : <span>{placeholder}</span>}\n      {values.map((value) => (\n        <span key={value}>{value}</span>\n      ))}\n    </span>\n  );\n});\nPickerSizer.displayName = 'DateTimePicker.Sizer';\nexport default PickerSizer;\n"],"mappings":";;;AAOA,IAAM,cAAc,KAAK,SAAS,YAAY,EAAE,QAAQ,eAAiC;CACvF,OACE,qBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAnC,UAAA,CACG,gBAAgB,OAAO,OAAO,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,GACvD,OAAO,KAAK,UACX,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB,CAChC,CACG;;AAEV,CAAC;AACD,YAAY,cAAc"}

package/dist/components/date-time-picker/wheel/Wheel.d.ts

@@ -0,0 +1,14 @@
+interface WheelOption {
+    label: string;
+    value: number;
+}
+interface WheelProps {
+    ariaLabel: string;
+    onEscape: () => void;
+    onSelect: (value: number) => void;
+    options: readonly WheelOption[];
+    selected: number;
+}
+declare function Wheel({ ariaLabel, onEscape, onSelect, options, selected }: WheelProps): import("react").JSX.Element;
+export default Wheel;
+//# sourceMappingURL=Wheel.d.ts.map

package/dist/components/date-time-picker/wheel/Wheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/wheel/Wheel.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,UAAU;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,UAAU,+BA0K9E;AAGD,eAAe,KAAK,CAAC"}

package/dist/components/date-time-picker/wheel/Wheel.js

@@ -0,0 +1,143 @@
+import { useId, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-time-picker/wheel/Wheel.tsx
+var WHEEL_LOOP_CYCLES = 11;
+var WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);
+function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
+	const wheelId = useId();
+	const wheelRef = useRef(null);
+	const selectedRef = useRef(null);
+	const dragRef = useRef(void 0);
+	const ignoreClickRef = useRef(false);
+	useLayoutEffect(() => {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		const selectedIndex = options.findIndex((option) => option.value === selected);
+		if (!wheel || !itemHeight || selectedIndex < 0) return;
+		wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + selectedIndex) * itemHeight;
+		applyPerspective();
+	}, [options, selected]);
+	function applyPerspective() {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		if (!wheel || !itemHeight) return;
+		const position = wheel.scrollTop / itemHeight;
+		for (const option of wheel.querySelectorAll(".chayns-date-time-picker__wheel-option")) {
+			const index = Number(option.dataset.wheelIndex);
+			const distance = Math.max(-2.5, Math.min(2.5, index - position));
+			const progress = Math.min(1, Math.abs(distance) / 2.5);
+			option.style.color = progress < .2 ? "var(--text)" : "var(--text-3)";
+			option.style.fontWeight = progress < .2 ? "600" : "400";
+			option.style.opacity = String(1 - progress * .7);
+			option.style.transform = `rotateX(${distance * 22}deg) scale(${1 - progress * .24})`;
+		}
+	}
+	function selectCenteredValue() {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		if (!wheel || !itemHeight) return;
+		const option = options[(Math.round(wheel.scrollTop / itemHeight) % options.length + options.length) % options.length];
+		if (option !== void 0 && option.value !== selected) onSelect(option.value);
+	}
+	function handleScroll() {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		if (!wheel || !itemHeight) return;
+		const index = Math.round(wheel.scrollTop / itemHeight);
+		const normalizedIndex = (index % options.length + options.length) % options.length;
+		if (index < options.length * 2 || index >= options.length * 9) wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + normalizedIndex) * itemHeight;
+		applyPerspective();
+		selectCenteredValue();
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onEscape();
+			return;
+		}
+		const index = options.findIndex((option) => option.value === selected);
+		let nextIndex = index;
+		if (event.key === "ArrowDown") nextIndex = Math.min(index + 1, options.length - 1);
+		if (event.key === "ArrowUp") nextIndex = Math.max(index - 1, 0);
+		if (event.key === "Home") nextIndex = 0;
+		if (event.key === "End") nextIndex = options.length - 1;
+		const nextOption = options[nextIndex];
+		if (nextIndex !== index && nextOption !== void 0) {
+			event.preventDefault();
+			onSelect(nextOption.value);
+		}
+	}
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+		dragRef.current = {
+			pointerId: event.pointerId,
+			scrollTop: event.currentTarget.scrollTop,
+			startY: event.clientY
+		};
+		ignoreClickRef.current = false;
+	}
+	function handlePointerMove(event) {
+		const drag = dragRef.current;
+		if (drag?.pointerId !== event.pointerId) return;
+		const distance = event.clientY - drag.startY;
+		if (Math.abs(distance) > 3) {
+			ignoreClickRef.current = true;
+			event.currentTarget.scrollTop = drag.scrollTop - distance;
+		}
+	}
+	function handlePointerUp(event) {
+		if (dragRef.current?.pointerId !== event.pointerId) return;
+		dragRef.current = void 0;
+		if (typeof event.currentTarget.releasePointerCapture === "function") event.currentTarget.releasePointerCapture(event.pointerId);
+		selectCenteredValue();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-activedescendant": `${wheelId}-${selected}`,
+		"aria-label": ariaLabel,
+		className: "chayns-date-time-picker__wheel",
+		onKeyDown: handleKeyDown,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerCancel: handlePointerUp,
+		onPointerUp: handlePointerUp,
+		onScroll: handleScroll,
+		ref: wheelRef,
+		role: "listbox",
+		tabIndex: 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "chayns-date-time-picker__wheel-sizer",
+			children: options.map((option) => /* @__PURE__ */ jsx("span", {
+				className: "chayns-date-time-picker__wheel-sizer-option",
+				children: option.label
+			}, option.value))
+		}), Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) => options.map((option, optionIndex) => /* @__PURE__ */ jsx("button", {
+			"aria-hidden": cycle !== WHEEL_CENTER_CYCLE || void 0,
+			"aria-selected": option.value === selected,
+			id: cycle === WHEEL_CENTER_CYCLE ? `${wheelId}-${option.value}` : void 0,
+			className: "chayns-date-time-picker__wheel-option",
+			"data-wheel-index": cycle * options.length + optionIndex,
+			onClick: (event) => {
+				if (ignoreClickRef.current) {
+					event.preventDefault();
+					event.stopPropagation();
+					ignoreClickRef.current = false;
+					return;
+				}
+				onSelect(option.value);
+			},
+			ref: cycle === WHEEL_CENTER_CYCLE && option.value === selected ? selectedRef : void 0,
+			role: "option",
+			tabIndex: -1,
+			type: "button",
+			children: option.label
+		}, `${cycle}-${option.value}`)))]
+	});
+}
+Object.assign(Wheel, { displayName: "DateTimePicker.Wheel" });
+//#endregion
+export { Wheel as default };
+
+//# sourceMappingURL=Wheel.js.map

package/dist/components/date-time-picker/wheel/Wheel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.js","names":[],"sources":["../../../../src/components/date-time-picker/wheel/Wheel.tsx"],"sourcesContent":["import { useLayoutEffect, useId, useRef } from 'react';\nimport type { KeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';\n\nconst WHEEL_LOOP_CYCLES = 11;\nconst WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);\n\ninterface WheelOption {\n  label: string;\n  value: number;\n}\n\ninterface WheelProps {\n  ariaLabel: string;\n  onEscape: () => void;\n  onSelect: (value: number) => void;\n  options: readonly WheelOption[];\n  selected: number;\n}\n\nfunction Wheel({ ariaLabel, onEscape, onSelect, options, selected }: WheelProps) {\n  const wheelId = useId();\n  const wheelRef = useRef<HTMLDivElement>(null);\n  const selectedRef = useRef<HTMLButtonElement>(null);\n  const dragRef = useRef<{ pointerId: number; scrollTop: number; startY: number } | undefined>(\n    undefined,\n  );\n  const ignoreClickRef = useRef(false);\n\n  useLayoutEffect(() => {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    const selectedIndex = options.findIndex((option) => option.value === selected);\n    if (!wheel || !itemHeight || selectedIndex < 0) return;\n\n    wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + selectedIndex) * itemHeight;\n    applyPerspective();\n  }, [options, selected]);\n\n  function applyPerspective() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const position = wheel.scrollTop / itemHeight;\n    for (const option of wheel.querySelectorAll<HTMLButtonElement>(\n      '.chayns-date-time-picker__wheel-option',\n    )) {\n      const index = Number(option.dataset.wheelIndex);\n      const distance = Math.max(-2.5, Math.min(2.5, index - position));\n      const progress = Math.min(1, Math.abs(distance) / 2.5);\n\n      option.style.color = progress < 0.2 ? 'var(--text)' : 'var(--text-3)';\n      option.style.fontWeight = progress < 0.2 ? '600' : '400';\n      option.style.opacity = String(1 - progress * 0.7);\n      option.style.transform = `rotateX(${distance * 22}deg) scale(${1 - progress * 0.24})`;\n    }\n  }\n\n  function selectCenteredValue() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const index = Math.round(wheel.scrollTop / itemHeight);\n    const option = options[((index % options.length) + options.length) % options.length];\n    if (option !== undefined && option.value !== selected) onSelect(option.value);\n  }\n\n  function handleScroll() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const index = Math.round(wheel.scrollTop / itemHeight);\n    const normalizedIndex = ((index % options.length) + options.length) % options.length;\n    if (index < options.length * 2 || index >= options.length * (WHEEL_LOOP_CYCLES - 2)) {\n      wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + normalizedIndex) * itemHeight;\n    }\n\n    applyPerspective();\n    selectCenteredValue();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      onEscape();\n      return;\n    }\n\n    const index = options.findIndex((option) => option.value === selected);\n    let nextIndex = index;\n    if (event.key === 'ArrowDown') nextIndex = Math.min(index + 1, options.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(index - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = options.length - 1;\n    const nextOption = options[nextIndex];\n    if (nextIndex !== index && nextOption !== undefined) {\n      event.preventDefault();\n      onSelect(nextOption.value);\n    }\n  }\n\n  function handlePointerDown(event: ReactPointerEvent<HTMLDivElement>) {\n    if (event.button !== 0) return;\n    event.preventDefault();\n    if (typeof event.currentTarget.setPointerCapture === 'function') {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    }\n    dragRef.current = {\n      pointerId: event.pointerId,\n      scrollTop: event.currentTarget.scrollTop,\n      startY: event.clientY,\n    };\n    ignoreClickRef.current = false;\n  }\n\n  function handlePointerMove(event: ReactPointerEvent<HTMLDivElement>) {\n    const drag = dragRef.current;\n    if (drag?.pointerId !== event.pointerId) return;\n    const distance = event.clientY - drag.startY;\n    if (Math.abs(distance) > 3) {\n      ignoreClickRef.current = true;\n      event.currentTarget.scrollTop = drag.scrollTop - distance;\n    }\n  }\n\n  function handlePointerUp(event: ReactPointerEvent<HTMLDivElement>) {\n    if (dragRef.current?.pointerId !== event.pointerId) return;\n    dragRef.current = undefined;\n    if (typeof event.currentTarget.releasePointerCapture === 'function') {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    selectCenteredValue();\n  }\n\n  return (\n    <div\n      aria-activedescendant={`${wheelId}-${selected}`}\n      aria-label={ariaLabel}\n      className=\"chayns-date-time-picker__wheel\"\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerCancel={handlePointerUp}\n      onPointerUp={handlePointerUp}\n      onScroll={handleScroll}\n      ref={wheelRef}\n      role=\"listbox\"\n      tabIndex={0}\n    >\n      <span aria-hidden=\"true\" className=\"chayns-date-time-picker__wheel-sizer\">\n        {options.map((option) => (\n          <span className=\"chayns-date-time-picker__wheel-sizer-option\" key={option.value}>\n            {option.label}\n          </span>\n        ))}\n      </span>\n      {Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) =>\n        options.map((option, optionIndex) => (\n          <button\n            aria-hidden={cycle !== WHEEL_CENTER_CYCLE || undefined}\n            aria-selected={option.value === selected}\n            id={cycle === WHEEL_CENTER_CYCLE ? `${wheelId}-${option.value}` : undefined}\n            className=\"chayns-date-time-picker__wheel-option\"\n            data-wheel-index={cycle * options.length + optionIndex}\n            key={`${cycle}-${option.value}`}\n            onClick={(event) => {\n              if (ignoreClickRef.current) {\n                event.preventDefault();\n                event.stopPropagation();\n                ignoreClickRef.current = false;\n                return;\n              }\n              onSelect(option.value);\n            }}\n            ref={\n              cycle === WHEEL_CENTER_CYCLE && option.value === selected ? selectedRef : undefined\n            }\n            role=\"option\"\n            tabIndex={-1}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        )),\n      )}\n    </div>\n  );\n}\n\nObject.assign(Wheel, { displayName: 'DateTimePicker.Wheel' });\nexport default Wheel;\n"],"mappings":"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"}

package/dist/components/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;;;;8DAkCd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;;;;8DAkCd,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/dist/components/icon-button/IconButton.js

@@ -19,6 +19,7 @@ var IconButton = forwardRef(function IconButton({ "aria-busy": ariaBusy, classNa
 		children: /* @__PURE__ */ jsx(ButtonIcon, { icon: loading ? "fa-spinner" : icon })
 	});
 });
+IconButton.displayName = "IconButton";
 //#endregion
 export { IconButton as default };
 

package/dist/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { IconButtonProps } from './IconButton.types.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    'aria-busy': ariaBusy,\n    className,\n    disabled,\n    icon,\n    loading = false,\n    type = 'button',\n    variant,\n    ...buttonProps\n  },\n  ref,\n) {\n  const resolvedClassName = [\n    'chayns-icon-button',\n    `chayns-icon-button--${variant}`,\n    loading ? 'chayns-icon-button--loading' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      {...buttonProps}\n      aria-busy={loading ? true : ariaBusy}\n      className={resolvedClassName}\n      disabled={loading || disabled}\n      ref={ref}\n      type={type}\n    >\n      <ButtonIcon icon={loading ? 'fa-spinner' : icon} />\n    </button>\n  );\n});\n\nexport default IconButton;\n"],"mappings":";;;;AAKA,IAAM,aAAa,WAA+C,SAAS,WACzE,EACE,aAAa,UACb,WACA,UACA,MACA,UAAU,OACV,OAAO,UACP,SACA,GAAG,eAEL,KACA;CACA,MAAM,oBAAoB;EACxB;EACA,uBAAuB;EACvB,UAAU,gCAAgC;EAC1C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,UAAU,OAAO;EAC5B,WAAW;EACX,UAAU,WAAW;EAChB;EACC;EAEN,UAAA,oBAAC,YAAD,EAAY,MAAM,UAAU,eAAe,KAAO,CAAA;CAC5C,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { IconButtonProps } from './IconButton.types.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    'aria-busy': ariaBusy,\n    className,\n    disabled,\n    icon,\n    loading = false,\n    type = 'button',\n    variant,\n    ...buttonProps\n  },\n  ref,\n) {\n  const resolvedClassName = [\n    'chayns-icon-button',\n    `chayns-icon-button--${variant}`,\n    loading ? 'chayns-icon-button--loading' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      {...buttonProps}\n      aria-busy={loading ? true : ariaBusy}\n      className={resolvedClassName}\n      disabled={loading || disabled}\n      ref={ref}\n      type={type}\n    >\n      <ButtonIcon icon={loading ? 'fa-spinner' : icon} />\n    </button>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"mappings":";;;;AAKA,IAAM,aAAa,WAA+C,SAAS,WACzE,EACE,aAAa,UACb,WACA,UACA,MACA,UAAU,OACV,OAAO,UACP,SACA,GAAG,eAEL,KACA;CACA,MAAM,oBAAoB;EACxB;EACA,uBAAuB;EACvB,UAAU,gCAAgC;EAC1C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,UAAU,OAAO;EAC5B,WAAW;EACX,UAAU,WAAW;EAChB;EACC;EAEN,UAAA,oBAAC,YAAD,EAAY,MAAM,UAAU,eAAe,KAAO,CAAA;CAC5C,CAAA;AAEZ,CAAC;AAED,WAAW,cAAc"}

package/dist/components/list/List.d.ts

@@ -1,15 +1,20 @@
-import type { ListItemActionProps, ListItemPartProps, ListItemStatusProps } from './List.types.js';
-declare function Action(props: ListItemActionProps): import("react").JSX.Element;
-declare function Status({ label }: ListItemStatusProps): import("react").JSX.Element;
+import type { ListItemPartProps, ListItemStatusProps } from './List.types.js';
 declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>> & {
     Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>> & {
-        Action: typeof Action;
-        Body: ({ children, className: consumerClassName }: ListItemPartProps) => import("react").JSX.Element;
-        Description: ({ children, className: consumerClassName }: ListItemPartProps) => import("react").JSX.Element;
-        Leading: ({ children, className: consumerClassName }: ListItemPartProps) => import("react").JSX.Element;
-        Status: typeof Status;
-        Title: ({ children, className: consumerClassName }: ListItemPartProps) => import("react").JSX.Element;
-        Trailing: ({ children, className: consumerClassName }: ListItemPartProps) => import("react").JSX.Element;
+        Action: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children"> & {
+            children: import("react").ReactNode;
+            href: string;
+        }, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "type"> & {
+            children: import("react").ReactNode;
+            href?: never;
+            type?: never;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+        Body: import("react").ForwardRefExoticComponent<Omit<ListItemPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Description: import("react").ForwardRefExoticComponent<Omit<ListItemPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Leading: import("react").ForwardRefExoticComponent<Omit<ListItemPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Status: import("react").ForwardRefExoticComponent<Omit<ListItemStatusProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Title: import("react").ForwardRefExoticComponent<Omit<ListItemPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Trailing: import("react").ForwardRefExoticComponent<Omit<ListItemPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     };
 };
 export default List;

package/dist/components/list/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/list/List.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAEjB,mBAAmB,EAEpB,MAAM,iBAAiB,CAAC;AAkBzB,iBAAS,MAAM,CAAC,KAAK,EAAE,mBAAmB,+BAsBzC;AAaD,iBAAS,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BAS7C;AAiBD,QAAA,MAAM,IAAI;;;2DAlCiE,iBAAiB;kEAAjB,iBAAiB;8DAAjB,iBAAiB;;4DAAjB,iBAAiB;+DAAjB,iBAAiB;;CA4C1F,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/list/List.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,mBAAmB,EAEpB,MAAM,iBAAiB,CAAC;AA4GzB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAUR,CAAC;AAOH,eAAe,IAAI,CAAC"}

package/dist/components/list/List.js

@@ -15,7 +15,7 @@ var Item = forwardRef(function Item({ children, className, ...itemProps }, ref)
 		})
 	});
 });
-function Action(props) {
+var Action = forwardRef(function Action(props, ref) {
 	useListItemContext("Action");
 	if (props.href !== void 0) {
 		const { children, className, href, ...anchorProps } = props;
@@ -24,6 +24,7 @@ function Action(props) {
 			...anchorProps,
 			className: resolvedClassName,
 			href,
+			ref,
 			children
 		});
 	}
@@ -32,25 +33,32 @@ function Action(props) {
 	return /* @__PURE__ */ jsx("button", {
 		...buttonProps,
 		className: resolvedClassName,
+		ref,
 		type: "button",
 		children
 	});
-}
+});
 function createPart(name) {
 	const className = `chayns-list-item__${name.toLowerCase()}`;
-	return function ListItemPart({ children, className: consumerClassName }) {
+	const ListItemPart = forwardRef(function ListItemPart({ children, className: consumerClassName, ...spanProps }, ref) {
 		useListItemContext(name);
 		const resolvedClassName = [className, consumerClassName].filter(Boolean).join(" ");
 		return /* @__PURE__ */ jsx("span", {
+			...spanProps,
 			className: resolvedClassName,
+			ref,
 			children
 		});
-	};
+	});
+	ListItemPart.displayName = `List.Item.${name}`;
+	return ListItemPart;
 }
-function Status({ label }) {
+var Status = forwardRef(function Status({ label, className, ...spanProps }, ref) {
 	useListItemContext("Status");
 	return /* @__PURE__ */ jsxs("span", {
-		className: "chayns-list-item__status",
+		...spanProps,
+		className: ["chayns-list-item__status", className].filter(Boolean).join(" "),
+		ref,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "chayns-list-item__status-dot"
@@ -59,7 +67,7 @@ function Status({ label }) {
 			children: label
 		})]
 	});
-}
+});
 var ListRoot = forwardRef(function List({ children, className, ...listProps }, ref) {
 	const resolvedClassName = ["chayns-list", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ListContext.Provider, {
@@ -81,6 +89,10 @@ var List = Object.assign(ListRoot, { Item: Object.assign(Item, {
 	Title: createPart("Title"),
 	Trailing: createPart("Trailing")
 }) });
+Item.displayName = "List.Item";
+Object.assign(Action, { displayName: "List.Item.Action" });
+Object.assign(Status, { displayName: "List.Item.Status" });
+ListRoot.displayName = "List";
 //#endregion
 export { List as default };
 

package/dist/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { ListContext, ListItemContext, useListContext, useListItemContext } from './ListContext.js';\nimport type {\n  ListItemActionProps,\n  ListItemPartProps,\n  ListItemProps,\n  ListItemStatusProps,\n  ListProps,\n} from './List.types.js';\n\nconst Item = forwardRef<HTMLLIElement, ListItemProps>(function Item(\n  { children, className, ...itemProps },\n  ref,\n) {\n  useListContext();\n  const resolvedClassName = ['chayns-list-item', className].filter(Boolean).join(' ');\n\n  return (\n    <ListItemContext.Provider value>\n      <li {...itemProps} className={resolvedClassName} ref={ref}>\n        {children}\n      </li>\n    </ListItemContext.Provider>\n  );\n});\n\nfunction Action(props: ListItemActionProps) {\n  useListItemContext('Action');\n\n  if (props.href !== undefined) {\n    const { children, className, href, ...anchorProps } = props;\n    const resolvedClassName = ['chayns-list-item__action', className].filter(Boolean).join(' ');\n\n    return (\n      <a {...anchorProps} className={resolvedClassName} href={href}>\n        {children}\n      </a>\n    );\n  }\n\n  const { children, className, ...buttonProps } = props;\n  const resolvedClassName = ['chayns-list-item__action', className].filter(Boolean).join(' ');\n\n  return (\n    <button {...buttonProps} className={resolvedClassName} type=\"button\">\n      {children}\n    </button>\n  );\n}\n\nfunction createPart(name: 'Leading' | 'Body' | 'Title' | 'Description' | 'Trailing') {\n  const className = `chayns-list-item__${name.toLowerCase()}`;\n\n  return function ListItemPart({ children, className: consumerClassName }: ListItemPartProps) {\n    useListItemContext(name);\n    const resolvedClassName = [className, consumerClassName].filter(Boolean).join(' ');\n\n    return <span className={resolvedClassName}>{children}</span>;\n  };\n}\n\nfunction Status({ label }: ListItemStatusProps) {\n  useListItemContext('Status');\n\n  return (\n    <span className=\"chayns-list-item__status\">\n      <span aria-hidden=\"true\" className=\"chayns-list-item__status-dot\" />\n      <span className=\"chayns-visually-hidden\">{label}</span>\n    </span>\n  );\n}\n\nconst ListRoot = forwardRef<HTMLUListElement, ListProps>(function List(\n  { children, className, ...listProps },\n  ref,\n) {\n  const resolvedClassName = ['chayns-list', className].filter(Boolean).join(' ');\n\n  return (\n    <ListContext.Provider value>\n      <ul {...listProps} className={resolvedClassName} ref={ref}>\n        {children}\n      </ul>\n    </ListContext.Provider>\n  );\n});\n\nconst List = Object.assign(ListRoot, {\n  Item: Object.assign(Item, {\n    Action,\n    Body: createPart('Body'),\n    Description: createPart('Description'),\n    Leading: createPart('Leading'),\n    Status,\n    Title: createPart('Title'),\n    Trailing: createPart('Trailing'),\n  }),\n});\n\nexport default List;\n"],"mappings":";;;;AAWA,IAAM,OAAO,WAAyC,SAAS,KAC7D,EAAE,UAAU,WAAW,GAAG,aAC1B,KACA;CACA,eAAe;CACf,MAAM,oBAAoB,CAAC,oBAAoB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAElF,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAA;EACxB,UAAA,oBAAC,MAAD;GAAI,GAAI;GAAW,WAAW;GAAwB;GACnD;EACC,CAAA;CACoB,CAAA;AAE9B,CAAC;AAED,SAAS,OAAO,OAA4B;CAC1C,mBAAmB,QAAQ;CAE3B,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,gBAAgB;EACtD,MAAM,oBAAoB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAE1F,OACE,oBAAC,KAAD;GAAG,GAAI;GAAa,WAAW;GAAyB;GACrD;EACA,CAAA;CAEP;CAEA,MAAM,EAAE,UAAU,WAAW,GAAG,gBAAgB;CAChD,MAAM,oBAAoB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1F,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAmB,MAAK;EACzD;CACK,CAAA;AAEZ;AAEA,SAAS,WAAW,MAAiE;CACnF,MAAM,YAAY,qBAAqB,KAAK,YAAY;CAExD,OAAO,SAAS,aAAa,EAAE,UAAU,WAAW,qBAAwC;EAC1F,mBAAmB,IAAI;EACvB,MAAM,oBAAoB,CAAC,WAAW,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAEjF,OAAO,oBAAC,QAAD;GAAM,WAAW;GAAoB;EAAe,CAAA;CAC7D;AACF;AAEA,SAAS,OAAO,EAAE,SAA8B;CAC9C,mBAAmB,QAAQ;CAE3B,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAAgC,CAAA,GACnE,oBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAY,CAAA,CAClD;;AAEV;AAEA,IAAM,WAAW,WAAwC,SAAS,KAChE,EAAE,UAAU,WAAW,GAAG,aAC1B,KACA;CACA,MAAM,oBAAoB,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE7E,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAA;EACpB,UAAA,oBAAC,MAAD;GAAI,GAAI;GAAW,WAAW;GAAwB;GACnD;EACC,CAAA;CACgB,CAAA;AAE1B,CAAC;AAED,IAAM,OAAO,OAAO,OAAO,UAAU,EACnC,MAAM,OAAO,OAAO,MAAM;CACxB;CACA,MAAM,WAAW,MAAM;CACvB,aAAa,WAAW,aAAa;CACrC,SAAS,WAAW,SAAS;CAC7B;CACA,OAAO,WAAW,OAAO;CACzB,UAAU,WAAW,UAAU;AACjC,CAAC,EACH,CAAC"}
+{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import { forwardRef, type Ref } from 'react';\n\nimport { ListContext, ListItemContext, useListContext, useListItemContext } from './ListContext.js';\nimport type {\n  ListItemActionProps,\n  ListItemPartProps,\n  ListItemProps,\n  ListItemStatusProps,\n  ListProps,\n} from './List.types.js';\n\nconst Item = forwardRef<HTMLLIElement, ListItemProps>(function Item(\n  { children, className, ...itemProps },\n  ref,\n) {\n  useListContext();\n  const resolvedClassName = ['chayns-list-item', className].filter(Boolean).join(' ');\n\n  return (\n    <ListItemContext.Provider value>\n      <li {...itemProps} className={resolvedClassName} ref={ref}>\n        {children}\n      </li>\n    </ListItemContext.Provider>\n  );\n});\n\nconst Action = forwardRef<HTMLAnchorElement | HTMLButtonElement, ListItemActionProps>(\n  function Action(props, ref) {\n    useListItemContext('Action');\n\n    if (props.href !== undefined) {\n      const { children, className, href, ...anchorProps } = props;\n      const resolvedClassName = ['chayns-list-item__action', className].filter(Boolean).join(' ');\n\n      return (\n        <a\n          {...anchorProps}\n          className={resolvedClassName}\n          href={href}\n          ref={ref as Ref<HTMLAnchorElement>}\n        >\n          {children}\n        </a>\n      );\n    }\n\n    const { children, className, ...buttonProps } = props;\n    const resolvedClassName = ['chayns-list-item__action', className].filter(Boolean).join(' ');\n\n    return (\n      <button\n        {...buttonProps}\n        className={resolvedClassName}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nfunction createPart(name: 'Leading' | 'Body' | 'Title' | 'Description' | 'Trailing') {\n  const className = `chayns-list-item__${name.toLowerCase()}`;\n\n  const ListItemPart = forwardRef<HTMLSpanElement, ListItemPartProps>(function ListItemPart(\n    { children, className: consumerClassName, ...spanProps },\n    ref,\n  ) {\n    useListItemContext(name);\n    const resolvedClassName = [className, consumerClassName].filter(Boolean).join(' ');\n\n    return (\n      <span {...spanProps} className={resolvedClassName} ref={ref}>\n        {children}\n      </span>\n    );\n  });\n\n  ListItemPart.displayName = `List.Item.${name}`;\n  return ListItemPart;\n}\n\nconst Status = forwardRef<HTMLSpanElement, ListItemStatusProps>(function Status(\n  { label, className, ...spanProps },\n  ref,\n) {\n  useListItemContext('Status');\n\n  return (\n    <span\n      {...spanProps}\n      className={['chayns-list-item__status', className].filter(Boolean).join(' ')}\n      ref={ref}\n    >\n      <span aria-hidden=\"true\" className=\"chayns-list-item__status-dot\" />\n      <span className=\"chayns-visually-hidden\">{label}</span>\n    </span>\n  );\n});\n\nconst ListRoot = forwardRef<HTMLUListElement, ListProps>(function List(\n  { children, className, ...listProps },\n  ref,\n) {\n  const resolvedClassName = ['chayns-list', className].filter(Boolean).join(' ');\n\n  return (\n    <ListContext.Provider value>\n      <ul {...listProps} className={resolvedClassName} ref={ref}>\n        {children}\n      </ul>\n    </ListContext.Provider>\n  );\n});\n\nconst List = Object.assign(ListRoot, {\n  Item: Object.assign(Item, {\n    Action,\n    Body: createPart('Body'),\n    Description: createPart('Description'),\n    Leading: createPart('Leading'),\n    Status,\n    Title: createPart('Title'),\n    Trailing: createPart('Trailing'),\n  }),\n});\n\nItem.displayName = 'List.Item';\nObject.assign(Action, { displayName: 'List.Item.Action' });\nObject.assign(Status, { displayName: 'List.Item.Status' });\nListRoot.displayName = 'List';\n\nexport default List;\n"],"mappings":";;;;AAWA,IAAM,OAAO,WAAyC,SAAS,KAC7D,EAAE,UAAU,WAAW,GAAG,aAC1B,KACA;CACA,eAAe;CACf,MAAM,oBAAoB,CAAC,oBAAoB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAElF,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAA;EACxB,UAAA,oBAAC,MAAD;GAAI,GAAI;GAAW,WAAW;GAAwB;GACnD;EACC,CAAA;CACoB,CAAA;AAE9B,CAAC;AAED,IAAM,SAAS,WACb,SAAS,OAAO,OAAO,KAAK;CAC1B,mBAAmB,QAAQ;CAE3B,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,gBAAgB;EACtD,MAAM,oBAAoB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAE1F,OACE,oBAAC,KAAD;GACE,GAAI;GACJ,WAAW;GACL;GACD;GAEJ;EACA,CAAA;CAEP;CAEA,MAAM,EAAE,UAAU,WAAW,GAAG,gBAAgB;CAChD,MAAM,oBAAoB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1F,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW;EACN;EACL,MAAK;EAEJ;CACK,CAAA;AAEZ,CACF;AAEA,SAAS,WAAW,MAAiE;CACnF,MAAM,YAAY,qBAAqB,KAAK,YAAY;CAExD,MAAM,eAAe,WAA+C,SAAS,aAC3E,EAAE,UAAU,WAAW,mBAAmB,GAAG,aAC7C,KACA;EACA,mBAAmB,IAAI;EACvB,MAAM,oBAAoB,CAAC,WAAW,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAEjF,OACE,oBAAC,QAAD;GAAM,GAAI;GAAW,WAAW;GAAwB;GACrD;EACG,CAAA;CAEV,CAAC;CAED,aAAa,cAAc,aAAa;CACxC,OAAO;AACT;AAEA,IAAM,SAAS,WAAiD,SAAS,OACvE,EAAE,OAAO,WAAW,GAAG,aACvB,KACA;CACA,mBAAmB,QAAQ;CAE3B,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,WAAW,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACtE;EAHP,UAAA,CAKE,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAAgC,CAAA,GACnE,oBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAY,CAAA,CAClD;;AAEV,CAAC;AAED,IAAM,WAAW,WAAwC,SAAS,KAChE,EAAE,UAAU,WAAW,GAAG,aAC1B,KACA;CACA,MAAM,oBAAoB,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE7E,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAA;EACpB,UAAA,oBAAC,MAAD;GAAI,GAAI;GAAW,WAAW;GAAwB;GACnD;EACC,CAAA;CACgB,CAAA;AAE1B,CAAC;AAED,IAAM,OAAO,OAAO,OAAO,UAAU,EACnC,MAAM,OAAO,OAAO,MAAM;CACxB;CACA,MAAM,WAAW,MAAM;CACvB,aAAa,WAAW,aAAa;CACrC,SAAS,WAAW,SAAS;CAC7B;CACA,OAAO,WAAW,OAAO;CACzB,UAAU,WAAW,UAAU;AACjC,CAAC,EACH,CAAC;AAED,KAAK,cAAc;AACnB,OAAO,OAAO,QAAQ,EAAE,aAAa,mBAAmB,CAAC;AACzD,OAAO,OAAO,QAAQ,EAAE,aAAa,mBAAmB,CAAC;AACzD,SAAS,cAAc"}

package/dist/components/list/List.types.d.ts

@@ -9,11 +9,11 @@ export type ListItemActionProps = (Omit<ComponentPropsWithRef<'a'>, 'children'>
     href?: never;
     type?: never;
 });
-export interface ListItemPartProps {
+export interface ListItemPartProps extends ComponentPropsWithRef<'span'> {
     children: ReactNode;
     className?: string;
 }
-export interface ListItemStatusProps {
+export interface ListItemStatusProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
     /** Localized description of the otherwise colour-only status dot. */
     label: Exclude<ReactNode, boolean | null | undefined>;
 }

package/dist/components/list/List.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.types.d.ts","sourceRoot":"","sources":["../../../src/components/list/List.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAExD,MAAM,MAAM,mBAAmB,GAC3B,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GACtF,CAAC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEP,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,qEAAqE;IACrE,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACvD"}
+{"version":3,"file":"List.types.d.ts","sourceRoot":"","sources":["../../../src/components/list/List.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAExD,MAAM,MAAM,mBAAmB,GAC3B,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GACtF,CAAC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEP,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IACtE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC1F,qEAAqE;IACrE,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACvD"}

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationProps } from './Pagination.types.js';
+declare const Pagination: import("react").ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export default Pagination;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,QAAA,MAAM,UAAU,sHA0Ed,CAAC;AAEH,eAAe,UAAU,CAAC"}