@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.22

package/dist/ui/src/components/edyn/time-field/time-field.js

@@ -0,0 +1,337 @@
+import { cn } from "../../../lib/utils.js";
+import { InputGroup, InputGroupAddon } from "../../ui/input-group/input-group.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconClock } from "@tabler/icons-react";
+//#region ../ui/src/components/edyn/time-field/time-field.tsx
+var EMPTY_TIME = {
+	hour: null,
+	minute: null,
+	second: null,
+	period: null
+};
+var DEFAULT_TIME_FIELD_LABELS = {
+	hour: "Hours",
+	minute: "Minutes",
+	second: "Seconds",
+	period: "AM or PM",
+	empty: "Empty"
+};
+/** What an empty segment shows. Letters, as a DatePicker's pattern is, never a dash. */
+var SEGMENT_PLACEHOLDER = {
+	hour: "HH",
+	minute: "MM",
+	second: "SS",
+	period: "AM"
+};
+var TIME = /^(\d{2}):(\d{2})(?::(\d{2}))?$/;
+var two = (value) => String(value).padStart(2, "0");
+/** 12 where the reader's locale writes AM and PM, 24 where it does not. */
+var localeHourCycle = () => new Intl.DateTimeFormat(void 0, { hour: "numeric" }).resolvedOptions().hour12 ? 12 : 24;
+/** `HH:mm` or `HH:mm:ss` (24-hour, as `<input type="time">` writes it) to the segments; anything else is no time. */
+var parseTime = (value, hourCycle) => {
+	const match = TIME.exec(value);
+	if (match === null) return EMPTY_TIME;
+	const hour24 = Number(match[1]);
+	const minute = Number(match[2]);
+	const second = match[3] === void 0 ? 0 : Number(match[3]);
+	if (hour24 > 23 || minute > 59 || second > 59) return EMPTY_TIME;
+	if (hourCycle === 24) return {
+		hour: hour24,
+		minute,
+		second,
+		period: null
+	};
+	return {
+		hour: hour24 % 12 === 0 ? 12 : hour24 % 12,
+		minute,
+		second,
+		period: hour24 >= 12 ? "PM" : "AM"
+	};
+};
+/** The segments to `HH:mm` or `HH:mm:ss`, or '' until every segment the field shows is in. */
+var formatTime = (parts, hourCycle, granularity) => {
+	const { hour, minute, second, period } = parts;
+	if (hour === null || minute === null || granularity === "second" && second === null) return "";
+	let hour24 = hour;
+	if (hourCycle === 12) {
+		if (period === null || hour === 0) return "";
+		hour24 = hour % 12 + (period === "PM" ? 12 : 0);
+	}
+	return granularity === "second" ? `${two(hour24)}:${two(minute)}:${two(second ?? 0)}` : `${two(hour24)}:${two(minute)}`;
+};
+var rangeOf = (segment, hourCycle) => {
+	if (segment === "hour") return hourCycle === 12 ? {
+		min: 1,
+		max: 12
+	} : {
+		min: 0,
+		max: 23
+	};
+	return {
+		min: 0,
+		max: 59
+	};
+};
+/** One step up or down inside a range, wrapping at the ends. A segment with nothing in it starts at the end the step is heading away from. */
+var stepValue = (current, delta, { min, max }) => {
+	if (current === null) return delta > 0 ? min : max;
+	const size = max - min + 1;
+	return ((current - min + delta) % size + size) % size + min;
+};
+/**
+* Types a digit into a segment. The second digit joins the first when it makes a number the segment can hold; otherwise it starts
+* over. The segment is done, and focus moves on, at two digits or as soon as no second digit could fit (a 3 in the hours, a 6 in the
+* minutes).
+*/
+var typeDigit = (buffer, digit, { min, max }) => {
+	let text = buffer + digit;
+	if (text.length > 2 || Number(text) > max) text = digit;
+	const value = Number(text);
+	const done = text.length === 2 || value * 10 > max;
+	return {
+		value: done && value < min ? min : value,
+		buffer: done ? "" : text,
+		done
+	};
+};
+var PAGE_STEP = {
+	hour: 3,
+	minute: 10,
+	second: 10
+};
+var withSegment = (parts, segment, value) => ({
+	...parts,
+	[segment]: value
+});
+/** What a key does to a segment, or null when the key is not one the segment handles (Tab, a letter in the hours...). */
+var editSegment = (parts, segment, key, hourCycle, buffer) => {
+	if (segment === "period") {
+		const current = parts.period;
+		const set = (period) => ({
+			parts: {
+				...parts,
+				period
+			},
+			buffer: "",
+			advance: false
+		});
+		switch (key) {
+			case "a":
+			case "A": return {
+				...set("AM"),
+				advance: true
+			};
+			case "p":
+			case "P": return {
+				...set("PM"),
+				advance: true
+			};
+			case "ArrowUp":
+			case "ArrowDown": return set(current === null ? key === "ArrowUp" ? "AM" : "PM" : current === "AM" ? "PM" : "AM");
+			case "Home": return set("AM");
+			case "End": return set("PM");
+			case "Backspace":
+			case "Delete": return set(null);
+			default: return null;
+		}
+	}
+	const range = rangeOf(segment, hourCycle);
+	const current = parts[segment];
+	const set = (value, advance = false) => ({
+		parts: withSegment(parts, segment, value),
+		buffer: "",
+		advance
+	});
+	if (/^[0-9]$/.test(key)) {
+		const typed = typeDigit(buffer, key, range);
+		return {
+			parts: withSegment(parts, segment, typed.value),
+			buffer: typed.buffer,
+			advance: typed.done
+		};
+	}
+	switch (key) {
+		case "ArrowUp": return set(stepValue(current, 1, range));
+		case "ArrowDown": return set(stepValue(current, -1, range));
+		case "PageUp": return set(stepValue(current, PAGE_STEP[segment], range));
+		case "PageDown": return set(stepValue(current, -PAGE_STEP[segment], range));
+		case "Home": return set(range.min);
+		case "End": return set(range.max);
+		case "Backspace":
+		case "Delete": return set(null);
+		default: return null;
+	}
+};
+var SEGMENT_CLASS = "h-6 rounded-sm bg-transparent text-center text-sm tabular-nums caret-transparent outline-none selection:bg-transparent placeholder:text-muted-foreground focus:bg-foreground/10 disabled:cursor-not-allowed";
+/**
+* A time of day typed in segments, in the kit's field: hours, minutes, optional seconds, and AM/PM where the reader's locale uses it.
+* It exists so an app does not fall back to `<input type="time">`, whose look differs between browsers and from the rest of the kit.
+*
+* Each segment is a spinbutton: type digits (the focus moves on by itself), ArrowUp and ArrowDown step with wrap-around, PageUp and
+* PageDown step by more, Home and End jump to the ends, Backspace empties, ArrowLeft and ArrowRight move between segments, and A or P
+* set the period. The group is named by `aria-label` or `aria-labelledby`; a screen reader reads each segment by its own name and value.
+*/
+var TimeField = ({ value, defaultValue = "", onValueChange, granularity = "minute", hourCycle: hourCycleProp, min, max, disabled = false, readOnly = false, invalid = false, name, labels: labelOverrides, className, ...rest }) => {
+	const labels = useMemo(() => ({
+		...DEFAULT_TIME_FIELD_LABELS,
+		...labelOverrides
+	}), [labelOverrides]);
+	const hourCycle = useMemo(() => hourCycleProp ?? localeHourCycle(), [hourCycleProp]);
+	const [parts, setParts] = useState(() => parseTime(value ?? defaultValue, hourCycle));
+	const [seen, setSeen] = useState(value);
+	const refSegments = useRef([]);
+	const refBuffer = useRef({
+		segment: "hour",
+		text: ""
+	});
+	const formatted = formatTime(parts, hourCycle, granularity);
+	const refReported = useRef(formatted);
+	const refParts = useRef(parts);
+	refParts.current = parts;
+	if (value !== seen) {
+		setSeen(value);
+		if (value !== void 0 && value !== formatted) {
+			setParts(parseTime(value, hourCycle));
+			refReported.current = value;
+		}
+	}
+	const segments = [
+		"hour",
+		"minute",
+		...granularity === "second" ? ["second"] : [],
+		...hourCycle === 12 ? ["period"] : []
+	];
+	const focusSegment = (index) => {
+		const target = refSegments.current[index];
+		if (target !== null && target !== void 0) {
+			target.focus();
+			target.select();
+		}
+	};
+	const report = (next) => {
+		const text = formatTime(next, hourCycle, granularity);
+		if (text !== refReported.current) {
+			refReported.current = text;
+			onValueChange?.(text);
+		}
+	};
+	const edit = (segment, key) => {
+		const buffer = refBuffer.current.segment === segment ? refBuffer.current.text : "";
+		const result = editSegment(refParts.current, segment, key, hourCycle, buffer);
+		if (result === null) return false;
+		refBuffer.current = {
+			segment,
+			text: result.buffer
+		};
+		refParts.current = result.parts;
+		setParts(result.parts);
+		if (result.buffer === "") report(result.parts);
+		if (result.advance) focusSegment(segments.indexOf(segment) + 1);
+		return true;
+	};
+	const onKeyDown = (segment, event) => {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const index = segments.indexOf(segment);
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+			event.preventDefault();
+			focusSegment(index + (event.key === "ArrowRight" ? 1 : -1));
+			return;
+		}
+		if (disabled || readOnly) return;
+		if (edit(segment, event.key)) event.preventDefault();
+	};
+	const onBlur = (segment) => {
+		const unfinished = refBuffer.current.segment === segment && refBuffer.current.text !== "";
+		refBuffer.current = {
+			segment,
+			text: ""
+		};
+		let settled = refParts.current;
+		if (segment === "hour" && hourCycle === 12 && settled.hour === 0) {
+			settled = {
+				...settled,
+				hour: null
+			};
+			refParts.current = settled;
+			setParts(settled);
+		}
+		if (unfinished) report(settled);
+	};
+	const onChange = (segment, event) => {
+		if (disabled || readOnly) return;
+		const typed = event.target.value.slice(-1);
+		edit(segment, typed);
+	};
+	const outOfRange = formatted !== "" && (min !== void 0 && formatted.slice(0, min.length) < min || max !== void 0 && formatted.slice(0, max.length) > max);
+	const flagged = invalid || outOfRange;
+	const display = (segment) => {
+		if (segment === "period") return parts.period ?? "";
+		const current = parts[segment];
+		return current === null ? "" : two(current);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		role: "group",
+		className: cn("w-fit", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(IconClock, { "aria-hidden": "true" }) }),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-0.5 pr-2",
+				children: segments.map((segment, index) => {
+					const numeric = segment !== "period";
+					const range = numeric ? rangeOf(segment, hourCycle) : {
+						min: 0,
+						max: 1
+					};
+					const current = numeric ? parts[segment] : parts.period === null ? null : parts.period === "AM" ? 0 : 1;
+					return /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-0.5",
+						children: [index > 0 && segment !== "period" && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "text-muted-foreground",
+							children: ":"
+						}), /* @__PURE__ */ jsx("input", {
+							ref: (node) => {
+								refSegments.current[index] = node;
+							},
+							"data-slot": "input-group-control",
+							"data-segment": segment,
+							role: "spinbutton",
+							inputMode: numeric ? "numeric" : "text",
+							autoComplete: "off",
+							autoCorrect: "off",
+							spellCheck: false,
+							value: display(segment),
+							placeholder: SEGMENT_PLACEHOLDER[segment],
+							disabled,
+							readOnly,
+							"aria-label": labels[segment],
+							"aria-readonly": readOnly || void 0,
+							"aria-invalid": flagged || void 0,
+							"aria-valuemin": range.min,
+							"aria-valuemax": range.max,
+							"aria-valuenow": current ?? void 0,
+							"aria-valuetext": current === null ? labels.empty : segment === "period" ? parts.period ?? labels.empty : two(current),
+							className: cn(SEGMENT_CLASS, segment === "period" ? "w-7" : "w-5"),
+							onKeyDown: (event) => onKeyDown(segment, event),
+							onChange: (event) => onChange(segment, event),
+							onFocus: (event) => event.currentTarget.select(),
+							onBlur: () => onBlur(segment)
+						})]
+					}, segment);
+				})
+			}),
+			name !== void 0 && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: formatted,
+				disabled
+			})
+		]
+	});
+};
+//#endregion
+export { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit };
+
+//# sourceMappingURL=time-field.js.map

package/dist/ui/src/components/edyn/time-field/time-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/time-field/time-field.tsx"],"sourcesContent":["import { InputGroup, InputGroupAddon } from '@edyn/ui/components/ui/input-group';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconClock } from '@tabler/icons-react';\nimport { type ChangeEvent, type ComponentPropsWithoutRef, type KeyboardEvent, useMemo, useRef, useState } from 'react';\n\nexport type TTimeFieldGranularity = 'minute' | 'second';\n\nexport type TTimeFieldHourCycle = 12 | 24;\n\nexport type TTimeFieldSegment = 'hour' | 'minute' | 'second' | 'period';\n\nexport type TTimeFieldPeriod = 'AM' | 'PM';\n\n/** The segments as they are shown: the hour in the field's own cycle (0 to 23, or 1 to 12 beside a period), each empty until entered. */\nexport interface ITimeParts {\n  hour: number | null;\n  minute: number | null;\n  second: number | null;\n  period: TTimeFieldPeriod | null;\n}\n\nexport const EMPTY_TIME: ITimeParts = { hour: null, minute: null, second: null, period: null };\n\nexport interface ITimeFieldLabels {\n  hour: string;\n  minute: string;\n  second: string;\n  /** The AM/PM segment. */\n  period: string;\n  /** Read for a segment with nothing in it. */\n  empty: string;\n}\n\nexport const DEFAULT_TIME_FIELD_LABELS: ITimeFieldLabels = {\n  hour: 'Hours',\n  minute: 'Minutes',\n  second: 'Seconds',\n  period: 'AM or PM',\n  empty: 'Empty',\n};\n\n/** What an empty segment shows. Letters, as a DatePicker's pattern is, never a dash. */\nconst SEGMENT_PLACEHOLDER: Record<TTimeFieldSegment, string> = { hour: 'HH', minute: 'MM', second: 'SS', period: 'AM' };\n\nconst TIME = /^(\\d{2}):(\\d{2})(?::(\\d{2}))?$/;\n\nconst two = (value: number): string => String(value).padStart(2, '0');\n\n/** 12 where the reader's locale writes AM and PM, 24 where it does not. */\nexport const localeHourCycle = (): TTimeFieldHourCycle =>\n  new Intl.DateTimeFormat(undefined, { hour: 'numeric' }).resolvedOptions().hour12 ? 12 : 24;\n\n/** `HH:mm` or `HH:mm:ss` (24-hour, as `<input type=\"time\">` writes it) to the segments; anything else is no time. */\nexport const parseTime = (value: string, hourCycle: TTimeFieldHourCycle): ITimeParts => {\n  const match = TIME.exec(value);\n  if (match === null) {\n    return EMPTY_TIME;\n  }\n  const hour24 = Number(match[1]);\n  const minute = Number(match[2]);\n  const second = match[3] === undefined ? 0 : Number(match[3]);\n  if (hour24 > 23 || minute > 59 || second > 59) {\n    return EMPTY_TIME;\n  }\n  if (hourCycle === 24) {\n    return { hour: hour24, minute, second, period: null };\n  }\n  return { hour: hour24 % 12 === 0 ? 12 : hour24 % 12, minute, second, period: hour24 >= 12 ? 'PM' : 'AM' };\n};\n\n/** The segments to `HH:mm` or `HH:mm:ss`, or '' until every segment the field shows is in. */\nexport const formatTime = (parts: ITimeParts, hourCycle: TTimeFieldHourCycle, granularity: TTimeFieldGranularity): string => {\n  const { hour, minute, second, period } = parts;\n  if (hour === null || minute === null || (granularity === 'second' && second === null)) {\n    return '';\n  }\n  let hour24 = hour;\n  if (hourCycle === 12) {\n    // 0 is only ever a first digit still waiting for its second.\n    if (period === null || hour === 0) {\n      return '';\n    }\n    hour24 = (hour % 12) + (period === 'PM' ? 12 : 0);\n  }\n  return granularity === 'second' ? `${two(hour24)}:${two(minute)}:${two(second ?? 0)}` : `${two(hour24)}:${two(minute)}`;\n};\n\nexport interface IRange {\n  min: number;\n  max: number;\n}\n\nexport const rangeOf = (segment: Exclude<TTimeFieldSegment, 'period'>, hourCycle: TTimeFieldHourCycle): IRange => {\n  if (segment === 'hour') {\n    return hourCycle === 12 ? { min: 1, max: 12 } : { min: 0, max: 23 };\n  }\n  return { min: 0, max: 59 };\n};\n\n/** One step up or down inside a range, wrapping at the ends. A segment with nothing in it starts at the end the step is heading away from. */\nexport const stepValue = (current: number | null, delta: number, { min, max }: IRange): number => {\n  if (current === null) {\n    return delta > 0 ? min : max;\n  }\n  const size = max - min + 1;\n  return ((((current - min + delta) % size) + size) % size) + min;\n};\n\n/**\n * Types a digit into a segment. The second digit joins the first when it makes a number the segment can hold; otherwise it starts\n * over. The segment is done, and focus moves on, at two digits or as soon as no second digit could fit (a 3 in the hours, a 6 in the\n * minutes).\n */\nexport const typeDigit = (buffer: string, digit: string, { min, max }: IRange): { value: number; buffer: string; done: boolean } => {\n  let text = buffer + digit;\n  if (text.length > 2 || Number(text) > max) {\n    text = digit;\n  }\n  const value = Number(text);\n  const done = text.length === 2 || value * 10 > max;\n  return { value: done && value < min ? min : value, buffer: done ? '' : text, done };\n};\n\nconst PAGE_STEP: Record<Exclude<TTimeFieldSegment, 'period'>, number> = { hour: 3, minute: 10, second: 10 };\n\nexport interface IEdit {\n  parts: ITimeParts;\n  /** The digits typed so far into this segment and not yet complete. */\n  buffer: string;\n  /** Move to the next segment: this one is finished. */\n  advance: boolean;\n}\n\nconst withSegment = (parts: ITimeParts, segment: Exclude<TTimeFieldSegment, 'period'>, value: number | null): ITimeParts => ({\n  ...parts,\n  [segment]: value,\n});\n\n/** What a key does to a segment, or null when the key is not one the segment handles (Tab, a letter in the hours...). */\nexport const editSegment = (\n  parts: ITimeParts,\n  segment: TTimeFieldSegment,\n  key: string,\n  hourCycle: TTimeFieldHourCycle,\n  buffer: string,\n): IEdit | null => {\n  if (segment === 'period') {\n    const current = parts.period;\n    const set = (period: TTimeFieldPeriod | null): IEdit => ({ parts: { ...parts, period }, buffer: '', advance: false });\n    switch (key) {\n      case 'a':\n      case 'A':\n        return { ...set('AM'), advance: true };\n      case 'p':\n      case 'P':\n        return { ...set('PM'), advance: true };\n      case 'ArrowUp':\n      case 'ArrowDown':\n        return set(current === null ? (key === 'ArrowUp' ? 'AM' : 'PM') : current === 'AM' ? 'PM' : 'AM');\n      case 'Home':\n        return set('AM');\n      case 'End':\n        return set('PM');\n      case 'Backspace':\n      case 'Delete':\n        return set(null);\n      default:\n        return null;\n    }\n  }\n\n  const range = rangeOf(segment, hourCycle);\n  const current = parts[segment];\n  const set = (value: number | null, advance = false): IEdit => ({ parts: withSegment(parts, segment, value), buffer: '', advance });\n\n  if (/^[0-9]$/.test(key)) {\n    const typed = typeDigit(buffer, key, range);\n    return { parts: withSegment(parts, segment, typed.value), buffer: typed.buffer, advance: typed.done };\n  }\n  switch (key) {\n    case 'ArrowUp':\n      return set(stepValue(current, 1, range));\n    case 'ArrowDown':\n      return set(stepValue(current, -1, range));\n    case 'PageUp':\n      return set(stepValue(current, PAGE_STEP[segment], range));\n    case 'PageDown':\n      return set(stepValue(current, -PAGE_STEP[segment], range));\n    case 'Home':\n      return set(range.min);\n    case 'End':\n      return set(range.max);\n    case 'Backspace':\n    case 'Delete':\n      return set(null);\n    default:\n      return null;\n  }\n};\n\nexport interface ITimeFieldProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'children' | 'role'> {\n  /** The time as `HH:mm` or `HH:mm:ss`, 24-hour whatever the field shows, as `<input type=\"time\">` writes it. '' is no time. */\n  value?: string;\n  defaultValue?: string;\n  /** Called with the time as soon as every segment is in, and with '' when one of a full time is cleared. */\n  onValueChange?: (value: string) => void;\n  /** `second` adds a seconds segment and a `HH:mm:ss` value. */\n  granularity?: TTimeFieldGranularity;\n  /** 12 shows an AM/PM segment, 24 does not. The default is what the reader's locale writes. */\n  hourCycle?: TTimeFieldHourCycle;\n  /** The earliest and the latest time, `HH:mm`. A time outside them is marked invalid; it is not refused. */\n  min?: string;\n  max?: string;\n  disabled?: boolean;\n  /** Shown, focusable and readable, not changeable. */\n  readOnly?: boolean;\n  invalid?: boolean;\n  /** Submits the time with a form, under this name, as `HH:mm` or `HH:mm:ss`. */\n  name?: string;\n  labels?: Partial<ITimeFieldLabels>;\n}\n\nconst SEGMENT_CLASS =\n  'h-6 rounded-sm bg-transparent text-center text-sm tabular-nums caret-transparent outline-none selection:bg-transparent placeholder:text-muted-foreground focus:bg-foreground/10 disabled:cursor-not-allowed';\n\n/**\n * A time of day typed in segments, in the kit's field: hours, minutes, optional seconds, and AM/PM where the reader's locale uses it.\n * It exists so an app does not fall back to `<input type=\"time\">`, whose look differs between browsers and from the rest of the kit.\n *\n * Each segment is a spinbutton: type digits (the focus moves on by itself), ArrowUp and ArrowDown step with wrap-around, PageUp and\n * PageDown step by more, Home and End jump to the ends, Backspace empties, ArrowLeft and ArrowRight move between segments, and A or P\n * set the period. The group is named by `aria-label` or `aria-labelledby`; a screen reader reads each segment by its own name and value.\n */\nexport const TimeField = ({\n  value,\n  defaultValue = '',\n  onValueChange,\n  granularity = 'minute',\n  hourCycle: hourCycleProp,\n  min,\n  max,\n  disabled = false,\n  readOnly = false,\n  invalid = false,\n  name,\n  labels: labelOverrides,\n  className,\n  ...rest\n}: ITimeFieldProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_TIME_FIELD_LABELS, ...labelOverrides }), [labelOverrides]);\n  const hourCycle = useMemo(() => hourCycleProp ?? localeHourCycle(), [hourCycleProp]);\n  const [parts, setParts] = useState<ITimeParts>(() => parseTime(value ?? defaultValue, hourCycle));\n  const [seen, setSeen] = useState(value);\n  const refSegments = useRef<Array<HTMLInputElement | null>>([]);\n  const refBuffer = useRef<{ segment: TTimeFieldSegment; text: string }>({ segment: 'hour', text: '' });\n  const formatted = formatTime(parts, hourCycle, granularity);\n  // What the parent was last told, and the segments as the last key left them (state is a render behind inside one event).\n  const refReported = useRef(formatted);\n  const refParts = useRef(parts);\n  refParts.current = parts;\n  // A time handed in from outside replaces what is shown, unless it is the very time that is shown: clearing one segment of a full\n  // time reports '', and taking that back as a new value would wipe the segments still being edited.\n  if (value !== seen) {\n    setSeen(value);\n    if (value !== undefined && value !== formatted) {\n      setParts(parseTime(value, hourCycle));\n      refReported.current = value;\n    }\n  }\n\n  const segments: TTimeFieldSegment[] = [\n    'hour',\n    'minute',\n    ...(granularity === 'second' ? (['second'] as const) : []),\n    ...(hourCycle === 12 ? (['period'] as const) : []),\n  ];\n\n  const focusSegment = (index: number): void => {\n    const target = refSegments.current[index];\n    if (target !== null && target !== undefined) {\n      target.focus();\n      target.select();\n    }\n  };\n\n  const report = (next: ITimeParts): void => {\n    const text = formatTime(next, hourCycle, granularity);\n    if (text !== refReported.current) {\n      refReported.current = text;\n      onValueChange?.(text);\n    }\n  };\n\n  const edit = (segment: TTimeFieldSegment, key: string): boolean => {\n    const buffer = refBuffer.current.segment === segment ? refBuffer.current.text : '';\n    const result = editSegment(refParts.current, segment, key, hourCycle, buffer);\n    if (result === null) {\n      return false;\n    }\n    refBuffer.current = { segment, text: result.buffer };\n    refParts.current = result.parts;\n    setParts(result.parts);\n    // A segment still waiting for its second digit is not a time yet worth reporting (a 3 may become 30); it is reported when it is\n    // done, or when the focus leaves it.\n    if (result.buffer === '') {\n      report(result.parts);\n    }\n    if (result.advance) {\n      focusSegment(segments.indexOf(segment) + 1);\n    }\n    return true;\n  };\n\n  const onKeyDown = (segment: TTimeFieldSegment, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.altKey || event.ctrlKey || event.metaKey) {\n      return;\n    }\n    const index = segments.indexOf(segment);\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      focusSegment(index + (event.key === 'ArrowRight' ? 1 : -1));\n      return;\n    }\n    if (disabled || readOnly) {\n      return;\n    }\n    if (edit(segment, event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  // Leaving a segment ends what was being typed into it: coming back and typing a 2 must not make 12 of an old 1. A 0 left alone in a\n  // 12-hour hour is the start of a number that never came, so it is emptied.\n  const onBlur = (segment: TTimeFieldSegment): void => {\n    const unfinished = refBuffer.current.segment === segment && refBuffer.current.text !== '';\n    refBuffer.current = { segment, text: '' };\n    let settled = refParts.current;\n    if (segment === 'hour' && hourCycle === 12 && settled.hour === 0) {\n      settled = { ...settled, hour: null };\n      refParts.current = settled;\n      setParts(settled);\n    }\n    if (unfinished) {\n      report(settled);\n    }\n  };\n\n  // A phone's keyboard does not send key events a page can use; what it types arrives as a change to the input.\n  const onChange = (segment: TTimeFieldSegment, event: ChangeEvent<HTMLInputElement>): void => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const typed = event.target.value.slice(-1);\n    edit(segment, typed);\n  };\n\n  const outOfRange =\n    formatted !== '' && ((min !== undefined && formatted.slice(0, min.length) < min) || (max !== undefined && formatted.slice(0, max.length) > max));\n  const flagged = invalid || outOfRange;\n\n  const display = (segment: TTimeFieldSegment): string => {\n    if (segment === 'period') {\n      return parts.period ?? '';\n    }\n    const current = parts[segment];\n    return current === null ? '' : two(current);\n  };\n\n  return (\n    <InputGroup role=\"group\" className={cn('w-fit', className)} {...rest}>\n      <InputGroupAddon>\n        <IconClock aria-hidden=\"true\" />\n      </InputGroupAddon>\n      <div className=\"flex items-center gap-0.5 pr-2\">\n        {segments.map((segment, index) => {\n          const numeric = segment !== 'period';\n          const range = numeric ? rangeOf(segment, hourCycle) : { min: 0, max: 1 };\n          const current = numeric ? parts[segment] : parts.period === null ? null : parts.period === 'AM' ? 0 : 1;\n          return (\n            <span key={segment} className=\"flex items-center gap-0.5\">\n              {index > 0 && segment !== 'period' && (\n                <span aria-hidden=\"true\" className=\"text-muted-foreground\">\n                  :\n                </span>\n              )}\n              <input\n                ref={(node) => {\n                  refSegments.current[index] = node;\n                }}\n                data-slot=\"input-group-control\"\n                data-segment={segment}\n                role=\"spinbutton\"\n                inputMode={numeric ? 'numeric' : 'text'}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                spellCheck={false}\n                value={display(segment)}\n                placeholder={SEGMENT_PLACEHOLDER[segment]}\n                disabled={disabled}\n                readOnly={readOnly}\n                aria-label={labels[segment]}\n                aria-readonly={readOnly || undefined}\n                aria-invalid={flagged || undefined}\n                aria-valuemin={range.min}\n                aria-valuemax={range.max}\n                aria-valuenow={current ?? undefined}\n                aria-valuetext={current === null ? labels.empty : segment === 'period' ? (parts.period ?? labels.empty) : two(current)}\n                className={cn(SEGMENT_CLASS, segment === 'period' ? 'w-7' : 'w-5')}\n                onKeyDown={(event) => onKeyDown(segment, event)}\n                onChange={(event) => onChange(segment, event)}\n                onFocus={(event) => event.currentTarget.select()}\n                onBlur={() => onBlur(segment)}\n              />\n            </span>\n          );\n        })}\n      </div>\n      {name !== undefined && <input type=\"hidden\" name={name} value={formatted} disabled={disabled} />}\n    </InputGroup>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/time-field/time-field.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * TimeField: the arithmetic of a time typed in segments, and the keyboard on a mounted field.
+ *
+ * PATH TAKEN: parsing, formatting, stepping and the typing rules are plain functions and run in happy-dom, and so does a mounted field
+ * driven by key events, which is where the focus moving on, the value reported and the roles are checked. How it looks in the kit's
+ * field, and the browser's own handling of focus, is for e2e/a11y.spec.ts and the visual cells.
+ */
+export {};

package/dist/ui/src/components/edyn/video-player/video-player.d.ts

@@ -1,6 +1,6 @@
 import { TCssLength } from '../../../lib/utils';
 import * as React from 'react';
-export interface IVideoPlayerProps {
+export interface IVideoPlayerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'title' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate'> {
     /** Video source URL. */
     src?: string;
     /** Still frame shown before playback starts. */
@@ -52,4 +52,4 @@ export interface IVideoPlayerProps {
  * both themes. Video is dark, so the letterbox and controls must stay dark and
  * light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.
  */
-export declare const VideoPlayer: ({ src, poster, title, description, muted, loop, disabled, width, height, ratio, className, "aria-label": ariaLabel, onPlay, onPause, onEnded, onTimeUpdate, }: IVideoPlayerProps) => React.JSX.Element;
+export declare const VideoPlayer: ({ src, poster, title, description, muted, loop, disabled, width, height, ratio, className, "aria-label": ariaLabel, style, onPlay, onPause, onEnded, onTimeUpdate, ...props }: IVideoPlayerProps) => React.JSX.Element;

package/dist/ui/src/components/edyn/video-player/video-player.js

@@ -0,0 +1,132 @@
+import { cn, cssLength } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Slider } from "../../ui/slider/slider.js";
+import { formatMediaTime, useMediaPlayer } from "../../../hooks/use-media-player.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconMaximize, IconPlayerPauseFilled, IconPlayerPlayFilled, IconVolume, IconVolumeOff } from "@tabler/icons-react";
+//#region ../ui/src/components/edyn/video-player/video-player.tsx
+/**
+* Media surface with an overlaid control bar: title and description, elapsed and
+* total time, a seekable scrubber, play/pause, volume, and fullscreen.
+*
+* The root carries the `dark` class so its tokens resolve to the dark palette in
+* both themes. Video is dark, so the letterbox and controls must stay dark and
+* light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.
+*/
+var VideoPlayer = ({ src, poster, title, description, muted = false, loop = false, disabled = false, width, height, ratio = "auto", className, "aria-label": ariaLabel = "Video player", style, onPlay, onPause, onEnded, onTimeUpdate, ...props }) => {
+	const { refMedia, playing, currentTime, duration, muted: isMuted, toggle, seek, toggleMute } = useMediaPlayer({
+		onPlay,
+		onPause,
+		onEnded,
+		onTimeUpdate
+	});
+	const refContainer = React.useRef(null);
+	const PlaybackIcon = playing ? IconPlayerPauseFilled : IconPlayerPlayFilled;
+	const VolumeIcon = isMuted ? IconVolumeOff : IconVolume;
+	const isSizedBox = height != null || ratio !== "auto";
+	const requestFullscreen = () => {
+		const container = refContainer.current;
+		if (!container) return;
+		if (document.fullscreenElement) {
+			document.exitFullscreen().catch(() => void 0);
+			return;
+		}
+		container.requestFullscreen?.().catch(() => void 0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: refContainer,
+		"data-slot": "video-player",
+		...props,
+		"data-playing": playing || void 0,
+		style: {
+			width: cssLength(width),
+			height: cssLength(height),
+			aspectRatio: height == null && ratio !== "auto" ? ratio : void 0,
+			...style
+		},
+		className: cn("dark relative isolate w-full overflow-hidden rounded-lg bg-background", className),
+		children: [/* @__PURE__ */ jsx("video", {
+			ref: refMedia,
+			src,
+			poster,
+			muted,
+			loop,
+			playsInline: true,
+			preload: "metadata",
+			"aria-label": ariaLabel,
+			className: cn("w-full bg-background", isSizedBox ? "h-full object-contain" : "h-auto")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 bg-gradient-to-t from-background via-background/75 to-transparent px-3 pt-12 pb-2 text-foreground",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-auto flex items-end justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [title ? /* @__PURE__ */ jsx("p", {
+							className: "truncate text-sm font-medium text-foreground",
+							children: title
+						}) : null, description ? /* @__PURE__ */ jsx("p", {
+							className: "truncate text-xs text-foreground/70",
+							children: description
+						}) : null]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 text-xs tabular-nums text-foreground/70",
+						children: [
+							formatMediaTime(currentTime),
+							" / ",
+							formatMediaTime(duration)
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Slider, {
+					className: "pointer-events-auto [&_[data-slot=slider-control]]:py-1.5 [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1",
+					value: Math.min(currentTime, duration || 0),
+					min: 0,
+					max: duration || 0,
+					step: 1,
+					disabled: disabled || duration === 0,
+					"aria-label": "Seek",
+					onValueChange: (next) => {
+						seek(next);
+					}
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-auto flex items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							disabled,
+							"aria-label": playing ? "Pause" : "Play",
+							onClick: toggle,
+							children: /* @__PURE__ */ jsx(PlaybackIcon, {})
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							disabled,
+							"aria-label": isMuted ? "Unmute" : "Mute",
+							onClick: toggleMute,
+							children: /* @__PURE__ */ jsx(VolumeIcon, {})
+						})]
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						disabled,
+						"aria-label": "Fullscreen",
+						onClick: requestFullscreen,
+						children: /* @__PURE__ */ jsx(IconMaximize, {})
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { VideoPlayer };
+
+//# sourceMappingURL=video-player.js.map

package/dist/ui/src/components/edyn/video-player/video-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/video-player/video-player.tsx"],"sourcesContent":["import { Button } from '@edyn/ui/components/ui/button';\nimport { Slider } from '@edyn/ui/components/ui/slider';\nimport { formatMediaTime, useMediaPlayer } from '@edyn/ui/hooks/use-media-player';\nimport type { TCssLength } from '@edyn/ui/lib/utils';\nimport { cn, cssLength } from '@edyn/ui/lib/utils';\nimport { IconMaximize, IconPlayerPauseFilled, IconPlayerPlayFilled, IconVolume, IconVolumeOff } from '@tabler/icons-react';\nimport * as React from 'react';\n\nexport interface IVideoPlayerProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'title' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate'> {\n  /** Video source URL. */\n  src?: string;\n  /** Still frame shown before playback starts. */\n  poster?: string;\n  /** Primary label rendered in the control overlay. */\n  title?: string;\n  /** Secondary label rendered under the title. */\n  description?: string;\n  /** Start muted. Required by browsers for unattended autoplay. */\n  muted?: boolean;\n  /** Loop playback when the video ends. */\n  loop?: boolean;\n  /** Disable every control without hiding the player. */\n  disabled?: boolean;\n  /**\n   * Box width. A number is px, a string is any CSS length (`'100%'`, `'34rem'`).\n   * Omitted, the player fills the width it is given.\n   */\n  width?: TCssLength;\n  /**\n   * Box height. A number is px, a string is any CSS length. Omitted, the height\n   * comes from `ratio`. Setting this letterboxes a source that does not match.\n   */\n  height?: TCssLength;\n  /**\n   * Aspect ratio of the media box, as a CSS `aspect-ratio` value (`'16/9'`).\n   *\n   * Defaults to `auto`, so the height follows the source's own dimensions and a\n   * portrait or 4:3 clip is shown whole rather than letterboxed. Pair `auto`\n   * with a `poster`: a `<video>` reports a 300x150 intrinsic size until metadata\n   * arrives, and the poster's dimensions stand in for it, which is what stops\n   * the box from resizing when the first frame lands.\n   *\n   * Ignored when `height` is set.\n   */\n  ratio?: string;\n  className?: string;\n  'aria-label'?: string;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onEnded?: () => void;\n  onTimeUpdate?: (currentTime: number, duration: number) => void;\n}\n\n/**\n * Media surface with an overlaid control bar: title and description, elapsed and\n * total time, a seekable scrubber, play/pause, volume, and fullscreen.\n *\n * The root carries the `dark` class so its tokens resolve to the dark palette in\n * both themes. Video is dark, so the letterbox and controls must stay dark and\n * light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.\n */\nexport const VideoPlayer = ({\n  src,\n  poster,\n  title,\n  description,\n  muted = false,\n  loop = false,\n  disabled = false,\n  width,\n  height,\n  ratio = 'auto',\n  className,\n  'aria-label': ariaLabel = 'Video player',\n  style,\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  ...props\n}: IVideoPlayerProps) => {\n  const {\n    refMedia,\n    playing,\n    currentTime,\n    duration,\n    muted: isMuted,\n    toggle,\n    seek,\n    toggleMute,\n  } = useMediaPlayer<HTMLVideoElement>({ onPlay, onPause, onEnded, onTimeUpdate });\n  const refContainer = React.useRef<HTMLDivElement>(null);\n\n  const PlaybackIcon = playing ? IconPlayerPauseFilled : IconPlayerPlayFilled;\n  const VolumeIcon = isMuted ? IconVolumeOff : IconVolume;\n\n  // An explicit height wins over the ratio, and either one turns the root into\n  // the sized box with the media fitted inside it. Without both, the media is\n  // the only thing in flow and the root takes its height.\n  const isSizedBox = height != null || ratio !== 'auto';\n\n  const requestFullscreen = () => {\n    const container = refContainer.current;\n    if (!container) {\n      return;\n    }\n    if (document.fullscreenElement) {\n      void document.exitFullscreen().catch(() => undefined);\n      return;\n    }\n    void container.requestFullscreen?.().catch(() => undefined);\n  };\n\n  return (\n    <div\n      ref={refContainer}\n      data-slot=\"video-player\"\n      {...props}\n      data-playing={playing || undefined}\n      style={{\n        width: cssLength(width),\n        height: cssLength(height),\n        aspectRatio: height == null && ratio !== 'auto' ? ratio : undefined,\n        ...style,\n      }}\n      className={cn('dark relative isolate w-full overflow-hidden rounded-lg bg-background', className)}\n    >\n      <video\n        ref={refMedia}\n        src={src}\n        poster={poster}\n        muted={muted}\n        loop={loop}\n        playsInline\n        preload=\"metadata\"\n        aria-label={ariaLabel}\n        className={cn('w-full bg-background', isSizedBox ? 'h-full object-contain' : 'h-auto')}\n      />\n\n      {/* The scrim must carry the controls over arbitrarily bright footage, so it ramps to a solid base rather than fading to 90%. */}\n      {/* `text-foreground` is explicit: the `dark` class re-scopes the token VALUES, but `color` itself\n          still inherits from the surrounding page, so without this the controls stay page-dark on video. */}\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 bg-gradient-to-t from-background via-background/75 to-transparent px-3 pt-12 pb-2 text-foreground\">\n        <div className=\"pointer-events-auto flex items-end justify-between gap-4\">\n          <div className=\"min-w-0\">\n            {title ? <p className=\"truncate text-sm font-medium text-foreground\">{title}</p> : null}\n            {description ? <p className=\"truncate text-xs text-foreground/70\">{description}</p> : null}\n          </div>\n          <span className=\"shrink-0 text-xs tabular-nums text-foreground/70\">\n            {formatMediaTime(currentTime)} / {formatMediaTime(duration)}\n          </span>\n        </div>\n\n        {/* Scope the form-sized Slider down to a scrubber: thinner track, smaller thumb, less vertical padding. */}\n        <Slider\n          className=\"pointer-events-auto [&_[data-slot=slider-control]]:py-1.5 [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1\"\n          value={Math.min(currentTime, duration || 0)}\n          min={0}\n          max={duration || 0}\n          step={1}\n          disabled={disabled || duration === 0}\n          aria-label=\"Seek\"\n          onValueChange={(next) => {\n            seek(next);\n          }}\n        />\n\n        <div className=\"pointer-events-auto flex items-center justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label={playing ? 'Pause' : 'Play'} onClick={toggle}>\n              <PlaybackIcon />\n            </Button>\n            <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label={isMuted ? 'Unmute' : 'Mute'} onClick={toggleMute}>\n              <VolumeIcon />\n            </Button>\n          </div>\n          <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label=\"Fullscreen\" onClick={requestFullscreen}>\n            <IconMaximize />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8DA,IAAa,eAAe,EAC1B,KACA,QACA,OACA,aACA,QAAQ,OACR,OAAO,OACP,WAAW,OACX,OACA,QACA,QAAQ,QACR,WACA,cAAc,YAAY,gBAC1B,OACA,QACA,SACA,SACA,cACA,GAAG,YACoB;CACvB,MAAM,EACJ,UACA,SACA,aACA,UACA,OAAO,SACP,QACA,MACA,eACE,eAAiC;EAAE;EAAQ;EAAS;EAAS;CAAa,CAAC;CAC/E,MAAM,eAAe,MAAM,OAAuB,IAAI;CAEtD,MAAM,eAAe,UAAU,wBAAwB;CACvD,MAAM,aAAa,UAAU,gBAAgB;CAK7C,MAAM,aAAa,UAAU,QAAQ,UAAU;CAE/C,MAAM,0BAA0B;EAC9B,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WACH;EAEF,IAAI,SAAS,mBAAmB;GAC9B,SAAc,eAAe,CAAC,CAAC,YAAY,KAAA,CAAS;GACpD;EACF;EACA,UAAe,oBAAoB,CAAC,CAAC,YAAY,KAAA,CAAS;CAC5D;CAEA,OACE,qBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,GAAI;EACJ,gBAAc,WAAW,KAAA;EACzB,OAAO;GACL,OAAO,UAAU,KAAK;GACtB,QAAQ,UAAU,MAAM;GACxB,aAAa,UAAU,QAAQ,UAAU,SAAS,QAAQ,KAAA;GAC1D,GAAG;EACL;EACA,WAAW,GAAG,yEAAyE,SAAS;EAXlG,UAAA,CAaE,oBAAC,SAAD;GACE,KAAK;GACA;GACG;GACD;GACD;GACN,aAAA;GACA,SAAQ;GACR,cAAY;GACZ,WAAW,GAAG,wBAAwB,aAAa,0BAA0B,QAAQ;EACtF,CAAA,GAKD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,QAAQ,oBAAC,KAAD;OAAG,WAAU;OAAgD,UAAA;MAAS,CAAA,IAAI,MAClF,cAAc,oBAAC,KAAD;OAAG,WAAU;OAAuC,UAAA;MAAe,CAAA,IAAI,IACnF;KACL,CAAA,GAAA,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACG,gBAAgB,WAAW;OAAE;OAAI,gBAAgB,QAAQ;MACtD;KACH,CAAA,CAAA;;IAGL,oBAAC,QAAD;KACE,WAAU;KACV,OAAO,KAAK,IAAI,aAAa,YAAY,CAAC;KAC1C,KAAK;KACL,KAAK,YAAY;KACjB,MAAM;KACN,UAAU,YAAY,aAAa;KACnC,cAAW;KACX,gBAAgB,SAAS;MACvB,KAAK,IAAI;KACX;IACD,CAAA;IAED,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OAAQ,MAAK;OAAS,SAAQ;OAAQ,MAAK;OAAiB;OAAU,cAAY,UAAU,UAAU;OAAQ,SAAS;OACrH,UAAA,oBAAC,cAAD,CAAe,CAAA;MACT,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAS,SAAQ;OAAQ,MAAK;OAAiB;OAAU,cAAY,UAAU,WAAW;OAAQ,SAAS;OACtH,UAAA,oBAAC,YAAD,CAAa,CAAA;MACP,CAAA,CACL;KACL,CAAA,GAAA,oBAAC,QAAD;MAAQ,MAAK;MAAS,SAAQ;MAAQ,MAAK;MAAiB;MAAU,cAAW;MAAa,SAAS;MACrG,UAAA,oBAAC,cAAD,CAAe,CAAA;KACT,CAAA,CACL;;GACF;EACF,CAAA,CAAA;;AAET"}

package/dist/ui/src/components/forwarded-props.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Every exported component hands `aria-label`, `id` and `data-testid` to the element it documents as its root or main part.
+ * A component that took a closed list of props dropped the rest (Tabs' tablist had no accessible name even though the app
+ * passed `aria-label`), so this renders each one with the three and finds them again.
+ *
+ * Components that are not covered here, and why, are listed in INTENTIONAL_DROPS.
+ */
+export {};

package/dist/ui/src/components/ui/accordion/accordion.d.ts

@@ -1,5 +1,6 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import type * as React from 'react';
-export interface IAccordionProps {
+export interface IAccordionProps extends Omit<BaseAccordion.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'className' | 'children'> {
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
@@ -7,21 +8,21 @@ export interface IAccordionProps {
     className?: string;
     children: React.ReactNode;
 }
-export declare const Accordion: ({ value, defaultValue, onValueChange, multiple, className, children }: IAccordionProps) => React.JSX.Element;
-export interface IAccordionItemProps {
+export declare const Accordion: ({ value, defaultValue, onValueChange, multiple, className, children, ...props }: IAccordionProps) => React.JSX.Element;
+export interface IAccordionItemProps extends Omit<BaseAccordion.Item.Props, 'value' | 'disabled' | 'className' | 'children'> {
     value: string;
     disabled?: boolean;
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionItem: ({ value, disabled, className, children }: IAccordionItemProps) => React.JSX.Element;
-export interface IAccordionTriggerProps {
+export declare const AccordionItem: ({ value, disabled, className, children, ...props }: IAccordionItemProps) => React.JSX.Element;
+export interface IAccordionTriggerProps extends Omit<BaseAccordion.Trigger.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionTrigger: ({ className, children }: IAccordionTriggerProps) => React.JSX.Element;
-export interface IAccordionContentProps {
+export declare const AccordionTrigger: ({ className, children, ...props }: IAccordionTriggerProps) => React.JSX.Element;
+export interface IAccordionContentProps extends Omit<BaseAccordion.Panel.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionContent: ({ className, children }: IAccordionContentProps) => React.JSX.Element;
+export declare const AccordionContent: ({ className, children, ...props }: IAccordionContentProps) => React.JSX.Element;