@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/timepicker/use-timepicker.d.ts

@@ -0,0 +1,111 @@
+import { type ComputedRef, type MaybeRefOrGetter, type WritableComputedRef } from 'vue';
+import type { Align, Side } from '../../shared/use-positioning';
+/** `period` is the AM/PM segment and column, shown with `hourCycle: 12`. */
+export type TimeUnit = 'hour' | 'minute' | 'second' | 'period';
+export type HourCycle = 12 | 24;
+export interface TimepickerState {
+    /** The value, `HH:mm` or `HH:mm:ss`; `null` while any segment is empty. */
+    value: string | null;
+    /**
+     * Whether every segment is empty.
+     * @attribute `data-empty`
+     */
+    empty: boolean;
+    /**
+     * Whether the popup is open.
+     * @attribute `data-open`
+     */
+    open: boolean;
+    /** @attribute `data-disabled` */
+    disabled: boolean;
+    /** @attribute `data-readonly` */
+    readOnly: boolean;
+    /** @attribute `data-required` */
+    required: boolean;
+    /** @attribute `data-invalid` */
+    invalid: boolean;
+}
+export interface UseTimepickerOptions {
+    value?: MaybeRefOrGetter<string | null | undefined>;
+    defaultValue?: MaybeRefOrGetter<string | null | undefined>;
+    /** Adds a second segment and column, and writes `HH:mm:ss`. */
+    seconds?: MaybeRefOrGetter<boolean | undefined>;
+    /** The earliest time that can be stepped to or picked, `HH:mm(:ss)`. */
+    min?: MaybeRefOrGetter<string | null | undefined>;
+    /** The latest time that can be stepped to or picked, `HH:mm(:ss)`. */
+    max?: MaybeRefOrGetter<string | null | undefined>;
+    /** `12` shows the hour as 12, 01–11 with an AM/PM segment; the value stays 24-hour. @default 24 */
+    hourCycle?: MaybeRefOrGetter<HourCycle | undefined>;
+    /** The AM/PM segment's text. @default ['AM', 'PM'] */
+    periodLabels?: MaybeRefOrGetter<readonly [string, string] | undefined>;
+    open?: MaybeRefOrGetter<boolean | undefined>;
+    /** Opens the popup when focus enters the segments, leaving it there. @default true */
+    openOnFocus?: MaybeRefOrGetter<boolean | undefined>;
+    side?: MaybeRefOrGetter<Side | undefined>;
+    align?: MaybeRefOrGetter<Align | undefined>;
+    sideOffset?: MaybeRefOrGetter<number | undefined>;
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    readOnly?: MaybeRefOrGetter<boolean | undefined>;
+    required?: MaybeRefOrGetter<boolean | undefined>;
+    invalid?: MaybeRefOrGetter<boolean | undefined>;
+    name?: MaybeRefOrGetter<string | undefined>;
+    form?: MaybeRefOrGetter<string | undefined>;
+    onChange?: (value: string | null) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface TimepickerOption {
+    /** The hour 0–23 even in 12-hour, the minute or second, or `0`/`1` for AM/PM. */
+    value: number;
+    /** As the segment shows it: `'07'`, `'12'`, `'PM'`. */
+    label: string;
+    selected: boolean;
+    /** Outside `min`/`max`. */
+    disabled: boolean;
+    props: Record<string, unknown>;
+}
+export interface UseTimepickerReturn {
+    value: WritableComputedRef<string | null>;
+    open: WritableComputedRef<boolean>;
+    state: ComputedRef<TimepickerState>;
+    hooks: ComputedRef<Record<string, string>>;
+    /** The units shown, in order. */
+    units: ComputedRef<TimeUnit[]>;
+    /** What each segment holds, `null` while empty. `hour` is 0–23 in either cycle; `period` is `0` (AM) or `1` (PM). */
+    parts: Record<TimeUnit, number | null>;
+    /** A unit's value as its segment shows it: `'07'`, `'12'`, `'PM'`. */
+    display: (unit: TimeUnit, value: number) => string;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    inputProps: ComputedRef<Record<string, unknown>>;
+    triggerProps: ComputedRef<Record<string, unknown>>;
+    clearProps: ComputedRef<Record<string, unknown>>;
+    getSegmentProps: (unit: TimeUnit) => Record<string, unknown>;
+    /** The hidden input's value: the value, or `''`. */
+    hiddenValue: ComputedRef<string>;
+    name: () => string | undefined;
+    form: () => string | undefined;
+    clear: () => void;
+    /** @internal For `useTimepickerColumn`. */
+    pick: (unit: TimeUnit, value: number) => void;
+    /** @internal A column's values, in order. */
+    values: (unit: TimeUnit) => number[];
+    /** @internal Whether a value can be picked within `min`/`max`. */
+    allowed: (unit: TimeUnit, value: number) => boolean;
+    /** @internal The next value allowed `delta` away, wrapping; from `null`, the first (or last) one. */
+    seek: (unit: TimeUnit, from: number | null, delta: number) => number | undefined;
+    /** @internal */
+    columns: Map<TimeUnit, HTMLElement>;
+}
+export declare const MAX: Record<TimeUnit, number>;
+/** `'9:5'` → `{ hour: 9, minute: 5, second: 0 }`; `null` for anything out of range or unreadable. */
+export declare function parseTime(input: string | null | undefined): Record<'hour' | 'minute' | 'second', number> | null;
+export declare function useTimepicker(options?: UseTimepickerOptions): UseTimepickerReturn;
+export declare const provideTimepickerContext: (value: UseTimepickerReturn) => UseTimepickerReturn, useTimepickerContext: () => UseTimepickerReturn;
+export interface UseTimepickerColumnReturn {
+    /** Whether the column is drawn: a `second` column needs `seconds`. */
+    shown: ComputedRef<boolean>;
+    columnProps: ComputedRef<Record<string, unknown>>;
+    options: ComputedRef<TimepickerOption[]>;
+    state: ComputedRef<TimepickerState>;
+}
+/** One unit's column in the popup: its options, its keys, and the scroll that keeps the pick in view. */
+export declare function useTimepickerColumn(unit: MaybeRefOrGetter<TimeUnit>): UseTimepickerColumnReturn;

package/dist/components/timepicker/use-timepicker.js

@@ -0,0 +1,545 @@
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { useFieldValue, useOptionalFieldContext } from "../../shared/use-field.js";
+import { provideSurface } from "../../shared/surface.js";
+import { usePopover } from "../popover/use-popover.js";
+import { computed, nextTick, onMounted, reactive, ref, toValue, useId, watch } from "vue";
+//#region src/components/timepicker/use-timepicker.ts
+var MAX = {
+	hour: 23,
+	minute: 59,
+	second: 59,
+	period: 1
+};
+var LABELS = {
+	hour: "Hours",
+	minute: "Minutes",
+	second: "Seconds",
+	period: "AM/PM"
+};
+var TIME = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
+var pad = (value) => String(value).padStart(2, "0");
+/** `'9:5'` → `{ hour: 9, minute: 5, second: 0 }`; `null` for anything out of range or unreadable. */
+function parseTime(input) {
+	const match = TIME.exec(input?.trim() ?? "");
+	if (!match) return null;
+	const time = {
+		hour: Number(match[1]),
+		minute: Number(match[2]),
+		second: Number(match[3] ?? 0)
+	};
+	return time.hour <= MAX.hour && time.minute <= MAX.minute && time.second <= MAX.second ? time : null;
+}
+var range = (length, from = 0) => Array.from({ length }, (_, i) => from + i);
+var wrap = (value, size) => (value % size + size) % size;
+function useTimepicker(options = {}) {
+	const field = useOptionalFieldContext();
+	const segmentBaseId = useId();
+	const seconds = () => toValue(options.seconds) ?? false;
+	const twelve = () => toValue(options.hourCycle) === 12;
+	const units = computed(() => [
+		"hour",
+		"minute",
+		...seconds() ? ["second"] : [],
+		...twelve() ? ["period"] : []
+	]);
+	const disabled = () => (toValue(options.disabled) ?? false) || (field?.state.value.disabled ?? false);
+	const readOnly = () => (toValue(options.readOnly) ?? false) || (field?.state.value.readOnly ?? false);
+	const required = () => (toValue(options.required) ?? false) || (field?.required() ?? false);
+	const invalid = () => (toValue(options.invalid) ?? false) || (field?.state.value.invalid ?? false) || outOfRange.value;
+	const locked = () => disabled() || readOnly();
+	const value = useControlled({
+		value: () => toValue(options.value),
+		defaultValue: () => toValue(options.defaultValue) ?? null,
+		empty: null,
+		prop: "modelValue",
+		onChange: (next) => options.onChange?.(next),
+		name: "TimepickerRoot",
+		label: "modelValue"
+	});
+	const parts = reactive({
+		hour: null,
+		minute: null,
+		second: null,
+		period: null
+	});
+	const filled = () => units.value.every((unit) => parts[unit] !== null);
+	function format() {
+		if (!filled()) return null;
+		return [
+			parts.hour,
+			parts.minute,
+			...seconds() ? [parts.second] : []
+		].map(pad).join(":");
+	}
+	/** Seconds since midnight, once every segment is filled. */
+	function time() {
+		return filled() ? parts.hour * 3600 + parts.minute * 60 + (seconds() ? parts.second : 0) : null;
+	}
+	let published;
+	function publish() {
+		const next = format();
+		if (next === value.value) return;
+		published = next;
+		value.value = next;
+	}
+	function read(input) {
+		const time = parseTime(input);
+		for (const unit of [
+			"hour",
+			"minute",
+			"second"
+		]) parts[unit] = time ? time[unit] : null;
+		parts.period = time ? Number(time.hour >= 12) : null;
+	}
+	watch(() => value.value, (next) => {
+		if (published !== void 0 && next === published) return;
+		published = void 0;
+		read(next);
+	}, { immediate: true });
+	watch(units, () => {
+		if (seconds() && parts.second === null && parts.hour !== null && parts.minute !== null) parts.second = 0;
+		if (twelve() && parts.period === null && parts.hour !== null) parts.period = Number(parts.hour >= 12);
+		publish();
+	});
+	const bounds = computed(() => {
+		const min = parseTime(toValue(options.min));
+		const max = parseTime(toValue(options.max));
+		if (!min && !max) return null;
+		const seconds_ = ({ hour, minute, second }) => hour * 3600 + minute * 60 + second;
+		let lo = min ? seconds_(min) : 0;
+		let hi = max ? seconds_(max) : 86399;
+		if (!seconds()) {
+			lo = Math.ceil(lo / 60) * 60;
+			hi = Math.floor(hi / 60) * 60;
+		}
+		return lo <= hi ? {
+			lo,
+			hi
+		} : null;
+	});
+	const outOfRange = computed(() => {
+		const at = parseTime(value.value);
+		const limit = bounds.value;
+		if (!at || !limit) return false;
+		const t = at.hour * 3600 + at.minute * 60 + (seconds() ? at.second : 0);
+		return t < limit.lo || t > limit.hi;
+	});
+	function allowed(unit, next) {
+		const limit = bounds.value;
+		if (!limit) return true;
+		const halves = (hour) => !twelve() ? [hour] : parts.period === null ? [hour % 12, hour % 12 + 12] : [hour % 12 + parts.period * 12];
+		let hours;
+		if (unit === "period") hours = parts.hour === null ? range(12, next * 12) : [parts.hour % 12 + next * 12];
+		else if (unit === "hour") hours = halves(next);
+		else if (parts.hour !== null) hours = halves(parts.hour);
+		else hours = twelve() && parts.period !== null ? range(12, parts.period * 12) : range(24);
+		let minutes = [null];
+		if (unit === "minute") minutes = [next];
+		else if (unit === "second") minutes = parts.minute === null ? range(60) : [parts.minute];
+		const second = unit === "second" ? next : null;
+		const lastSecond = seconds() ? 59 : 0;
+		return hours.some((hour) => minutes.some((minute) => {
+			const start = hour * 3600 + (minute ?? 0) * 60 + (second ?? 0);
+			const end = hour * 3600 + (minute ?? 59) * 60 + (second ?? lastSecond);
+			return start <= limit.hi && end >= limit.lo;
+		}));
+	}
+	function clampIntoRange() {
+		const t = time();
+		const limit = bounds.value;
+		if (t === null || !limit || t >= limit.lo && t <= limit.hi) return;
+		const next = t < limit.lo ? limit.lo : limit.hi;
+		parts.hour = Math.floor(next / 3600);
+		parts.minute = Math.floor(next / 60) % 60;
+		if (seconds()) parts.second = next % 60;
+		if (twelve()) parts.period = Number(parts.hour >= 12);
+	}
+	/** A column's values in order: in 12-hour, the hours of the period shown, 12 first. */
+	function values(unit) {
+		if (unit === "period") return [0, 1];
+		if (unit === "hour" && twelve()) return range(12, (parts.period ?? 0) * 12);
+		return range(MAX[unit] + 1);
+	}
+	function seek(unit, from, delta) {
+		const list = values(unit);
+		const direction = Math.sign(delta);
+		const index = from === null ? -1 : list.indexOf(from);
+		let at = index === -1 ? direction > 0 ? 0 : list.length - 1 : wrap(index + delta, list.length);
+		for (let tries = 0; tries < list.length; tries += 1) {
+			if (allowed(unit, list[at])) return list[at];
+			at = wrap(at + direction, list.length);
+		}
+	}
+	function display(unit, next) {
+		if (unit === "period") return (toValue(options.periodLabels) ?? ["AM", "PM"])[next];
+		if (unit === "hour" && twelve()) return pad(next % 12 || 12);
+		return pad(next);
+	}
+	const empty = computed(() => units.value.every((unit) => parts[unit] === null));
+	useFieldValue(field, () => value.value);
+	watch(() => !empty.value, (filled) => field?.setFilled(filled), { immediate: true });
+	const focusPopup = ref(true);
+	const popover = usePopover({
+		open: () => toValue(options.open),
+		autoFocus: () => focusPopup.value,
+		side: () => toValue(options.side) ?? "bottom",
+		align: () => toValue(options.align) ?? "start",
+		sideOffset: () => toValue(options.sideOffset) ?? 8,
+		onChange: (open) => options.onOpenChange?.(open)
+	});
+	const state = computed(() => ({
+		value: value.value,
+		empty: empty.value,
+		open: popover.open.value,
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required(),
+		invalid: invalid()
+	}));
+	const hooks = computed(() => dataAttrs(state.value, { value: () => null }));
+	const segments = /* @__PURE__ */ new Map();
+	const columns = /* @__PURE__ */ new Map();
+	const rootEl = ref(null);
+	const popupEl = ref(null);
+	function focusSegment(unit) {
+		if (unit) segments.get(unit)?.focus();
+	}
+	function neighbor(unit, step) {
+		return units.value[units.value.indexOf(unit) + step];
+	}
+	function assign(unit, next) {
+		parts[unit] = next;
+		if (!twelve() || next === null) return;
+		if (unit === "period" && parts.hour !== null) parts.hour = parts.hour % 12 + next * 12;
+		if (unit === "hour") parts.hour = next % 12 + (parts.period ?? 0) * 12;
+	}
+	function set(unit, next, clamp = false) {
+		assign(unit, next);
+		if (clamp) clampIntoRange();
+		publish();
+	}
+	function step(unit, delta, from = parts[unit]) {
+		const next = seek(unit, from, delta);
+		if (next !== void 0) set(unit, next, true);
+	}
+	let typing = null;
+	function type(unit, digit) {
+		const hour12 = unit === "hour" && twelve();
+		const max = hour12 ? 12 : MAX[unit];
+		let digits = (typing?.unit === unit ? typing.digits : "") + digit;
+		if (Number(digits) > max || hour12 && digits === "00") digits = digit;
+		if (!(hour12 && digits === "0")) set(unit, Number(digits));
+		const done = digits.length === 2 || Number(digits) * 10 > max;
+		typing = done ? null : {
+			unit,
+			digits
+		};
+		if (done) focusSegment(neighbor(unit, 1));
+	}
+	function typePeriod(letter) {
+		const index = (toValue(options.periodLabels) ?? ["AM", "PM"]).findIndex((label) => label[0]?.toLowerCase() === letter.toLowerCase());
+		if (index === -1) return false;
+		set("period", index, true);
+		return true;
+	}
+	function onSegmentKeydown(unit, event) {
+		if (disabled()) return;
+		const moves = {
+			ArrowLeft: () => focusSegment(neighbor(unit, -1)),
+			ArrowRight: () => focusSegment(neighbor(unit, 1)),
+			":": () => focusSegment(neighbor(unit, 1)),
+			".": () => focusSegment(neighbor(unit, 1)),
+			" ": () => focusSegment(neighbor(unit, 1))
+		};
+		const big = unit === "minute" || unit === "second" ? 10 : 1;
+		const edits = {
+			ArrowUp: () => step(unit, 1),
+			ArrowDown: () => step(unit, -1),
+			PageUp: () => step(unit, big),
+			PageDown: () => step(unit, -big),
+			Home: () => step(unit, 1, null),
+			End: () => step(unit, -1, null),
+			Backspace: () => set(unit, null),
+			Delete: () => set(unit, null)
+		};
+		const move = moves[event.key];
+		const edit = edits[event.key];
+		const digit = unit !== "period" && /^\d$/.test(event.key);
+		const letter = unit === "period" && /^\p{L}$/u.test(event.key);
+		if (!move && !edit && !digit && !letter) return;
+		event.preventDefault();
+		if (move) return move();
+		if (readOnly()) return;
+		if (digit) return type(unit, event.key);
+		if (letter) {
+			typing = null;
+			if (typePeriod(event.key)) focusSegment(neighbor(unit, 1));
+			return;
+		}
+		typing = null;
+		edit();
+	}
+	function onFocusout(event) {
+		const next = event.relatedTarget;
+		if (next instanceof Node && (rootEl.value?.contains(next) || popupEl.value?.contains(next))) return;
+		field?.setFocused(false);
+		field?.setTouched(true);
+		if (next instanceof Node) popover.open.value = false;
+	}
+	function show(focusInside) {
+		if (locked() || popover.open.value) return;
+		focusPopup.value = focusInside;
+		popover.open.value = true;
+	}
+	const inputEl = ref(null);
+	const openOnFocus = () => toValue(options.openOnFocus) ?? true;
+	function onInputFocusin(event) {
+		if (!openOnFocus()) return;
+		const from = event.relatedTarget;
+		if (from instanceof Node && (inputEl.value?.contains(from) || popupEl.value?.contains(from))) return;
+		show(false);
+	}
+	const rootProps = computed(() => ({
+		...hooks.value,
+		"data-part": "timepicker",
+		ref: (el) => {
+			rootEl.value = el ?? null;
+			popover.anchorRef.value = rootEl.value;
+		},
+		onFocusin: () => field?.setFocused(true),
+		onFocusout
+	}));
+	const inputProps = computed(() => ({
+		...hooks.value,
+		"data-part": "input",
+		role: "group",
+		"aria-labelledby": field?.labelledBy.value,
+		"aria-describedby": field?.describedBy.value,
+		ref: (el) => {
+			inputEl.value = el ?? null;
+		},
+		onFocusin: onInputFocusin,
+		onPointerdown: () => openOnFocus() && show(false)
+	}));
+	function getSegmentProps(unit) {
+		const current = parts[unit];
+		const first = unit === units.value[0];
+		const hour12 = unit === "hour" && twelve();
+		return {
+			...hooks.value,
+			"data-part": "segment",
+			"data-unit": unit,
+			"data-placeholder": current === null ? "" : void 0,
+			id: first ? field?.controlId.value ?? `${segmentBaseId}-${unit}` : `${segmentBaseId}-${unit}`,
+			role: "spinbutton",
+			tabindex: disabled() ? void 0 : 0,
+			"aria-label": LABELS[unit],
+			"aria-valuemin": hour12 ? 1 : 0,
+			"aria-valuemax": hour12 ? 12 : MAX[unit],
+			"aria-valuenow": current === null ? void 0 : hour12 ? current % 12 || 12 : current,
+			"aria-valuetext": current === null ? "Empty" : display(unit, current),
+			"aria-disabled": disabled() || void 0,
+			"aria-readonly": readOnly() || void 0,
+			"aria-required": required() || void 0,
+			"aria-invalid": invalid() || void 0,
+			inputmode: unit === "period" ? "text" : "numeric",
+			ref: (el) => {
+				if (el) segments.set(unit, el);
+				else segments.delete(unit);
+				if (first) field?.setControl(el ?? null);
+			},
+			onKeydown: (event) => onSegmentKeydown(unit, event),
+			onFocusout: () => {
+				if (typing?.unit === unit) typing = null;
+			}
+		};
+	}
+	const triggerProps = computed(() => {
+		const { ref: _ref, onClick: _onClick, onPointerenter: _enter, onPointerleave: _leave, ...base } = popover.triggerProps.value;
+		return {
+			...base,
+			...hooks.value,
+			"data-part": "trigger",
+			"aria-label": "Choose time",
+			disabled: disabled() || void 0,
+			onClick() {
+				if (popover.open.value) popover.open.value = false;
+				else show(true);
+			}
+		};
+	});
+	const popupProps = computed(() => {
+		const base = popover.popupProps.value;
+		const baseRef = base.ref;
+		return {
+			...base,
+			"aria-labelledby": base["aria-labelledby"] ?? field?.labelledBy.value,
+			ref(el) {
+				baseRef(el);
+				popupEl.value = el ?? null;
+			},
+			onFocusin: () => field?.setFocused(true),
+			onFocusout
+		};
+	});
+	provideSurface({
+		present: popover.present,
+		state: popover.state,
+		popupProps,
+		positionerProps: popover.positionerProps,
+		arrowProps: popover.arrowProps
+	});
+	function clear() {
+		for (const unit of [
+			"hour",
+			"minute",
+			"second",
+			"period"
+		]) parts[unit] = null;
+		typing = null;
+		publish();
+	}
+	const clearProps = computed(() => ({
+		...hooks.value,
+		"data-part": "clear",
+		type: "button",
+		"aria-label": "Clear",
+		onClick() {
+			if (locked()) return;
+			clear();
+			focusSegment(units.value[0]);
+		}
+	}));
+	function pick(unit, next) {
+		if (locked() || !allowed(unit, next)) return;
+		if (twelve() && unit !== "period" && parts.period === null) {
+			parts.period = 0;
+			if (!allowed(unit, next)) parts.period = 1;
+		}
+		for (const other of units.value) if (parts[other] === null) parts[other] = 0;
+		if (twelve()) assign("hour", parts.hour);
+		set(unit, next, true);
+	}
+	const hiddenValue = computed(() => value.value ?? "");
+	return {
+		value,
+		open: popover.open,
+		state,
+		hooks,
+		units,
+		parts,
+		rootProps,
+		inputProps,
+		triggerProps,
+		clearProps,
+		getSegmentProps,
+		hiddenValue,
+		name: () => toValue(options.name) ?? field?.name(),
+		form: () => toValue(options.form),
+		clear,
+		pick,
+		values,
+		allowed,
+		seek,
+		display,
+		columns
+	};
+}
+var { provideContext: provideTimepickerContext, useContext: useTimepickerContext } = createContext("Timepicker");
+/** One unit's column in the popup: its options, its keys, and the scroll that keeps the pick in view. */
+function useTimepickerColumn(unit) {
+	const picker = useTimepickerContext();
+	const baseId = useId();
+	const element = ref(null);
+	const current = () => toValue(unit);
+	const shown = computed(() => picker.units.value.includes(current()));
+	const selected = computed(() => picker.parts[current()]);
+	const optionId = (value) => `${baseId}-${value}`;
+	function reveal(behavior) {
+		const column = element.value;
+		const option = column?.querySelector("[data-selected]");
+		if (!column || !option) return;
+		const columnRect = column.getBoundingClientRect();
+		const optionRect = option.getBoundingClientRect();
+		const scale = columnRect.height ? column.offsetHeight / columnRect.height : 1;
+		const offset = (optionRect.top - columnRect.top) * scale - column.clientTop;
+		const top = column.scrollTop + offset - (column.clientHeight - option.offsetHeight) / 2;
+		if (typeof column.scrollTo === "function") column.scrollTo({
+			top,
+			behavior
+		});
+		else column.scrollTop = top;
+	}
+	onMounted(() => nextTick(() => reveal("instant")));
+	watch(selected, () => nextTick(() => reveal("smooth")));
+	function move(step) {
+		const order = picker.units.value;
+		const next = order[order.indexOf(current()) + step];
+		if (next) picker.columns.get(next)?.focus();
+	}
+	function pickNext(delta, from = selected.value) {
+		const next = picker.seek(current(), from, delta);
+		if (next !== void 0) picker.pick(current(), next);
+	}
+	function onKeydown(event) {
+		const action = {
+			ArrowUp: () => pickNext(-1),
+			ArrowDown: () => pickNext(1),
+			Home: () => pickNext(1, null),
+			End: () => pickNext(-1, null),
+			ArrowLeft: () => move(-1),
+			ArrowRight: () => move(1),
+			Enter: () => {
+				picker.open.value = false;
+			}
+		}[event.key];
+		if (!action) return;
+		event.preventDefault();
+		action();
+	}
+	return {
+		shown,
+		columnProps: computed(() => ({
+			...picker.hooks.value,
+			"data-part": "column",
+			"data-unit": current(),
+			role: "listbox",
+			tabindex: picker.state.value.disabled ? void 0 : 0,
+			"aria-label": LABELS[current()],
+			"aria-activedescendant": selected.value === null ? void 0 : optionId(selected.value),
+			ref: (el) => {
+				element.value = el ?? null;
+				if (element.value) picker.columns.set(current(), element.value);
+				else picker.columns.delete(current());
+			},
+			onKeydown
+		})),
+		options: computed(() => picker.values(current()).map((value) => {
+			const isSelected = value === selected.value;
+			const disabled = !picker.allowed(current(), value);
+			const label = picker.display(current(), value);
+			return {
+				value,
+				label,
+				selected: isSelected,
+				disabled,
+				props: {
+					"data-part": "option",
+					"data-value": label,
+					"data-selected": isSelected ? "" : void 0,
+					"data-disabled": disabled ? "" : void 0,
+					id: optionId(value),
+					role: "option",
+					"aria-selected": isSelected,
+					"aria-disabled": disabled || void 0,
+					onClick: () => picker.pick(current(), value)
+				}
+			};
+		})),
+		state: picker.state
+	};
+}
+//#endregion
+export { MAX, parseTime, provideTimepickerContext, useTimepicker, useTimepickerColumn, useTimepickerContext };

package/dist/components/toast/ToastAction.js

@@ -0,0 +1,5 @@
+import ToastAction_vue_vue_type_script_setup_true_lang_default from "./ToastAction.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/toast/ToastAction.vue
+var ToastAction_default = ToastAction_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ToastAction_default as default };

package/dist/components/toast/ToastAction.vue.d.ts

@@ -0,0 +1,20 @@
+import { type ToastSlotProps } from '../../composables/use-toast';
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /** @slotOnly The element carries only `data-part="action"`. */
+    default(props: ToastSlotProps): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};