@torpor/ui 1.0.1 → 1.1.0

package/dist/TimePicker/TimePicker.torp

@@ -7,6 +7,13 @@ import {
 } from "../Form/FormTypes";
 import FormValues from "../Form/FormValues.torp";
 import createFormField from "../utils/formField";
+import TimePickerPart from "./TimePickerPart.torp";
+import TimePickerPeriod from "./TimePickerPeriod.torp";
+import {
+	type Part,
+	type TimePickerContext,
+	TimePickerContextName,
+} from "./TimePickerTypes";
 
 interface TimePickerProps {
 	/** An ID for the root element */
@@ -40,8 +47,6 @@ interface TimePickerProps {
 	onchange?: (value: string | undefined) => void;
 }
 
-type Part = "hour" | "minute" | "second";
-
 const PAD = [2, 2, 2];
 
 /**
@@ -52,12 +57,23 @@ const PAD = [2, 2, 2];
  *
  * The value is always the canonical 24-hour form ("HH:mm" or "HH:mm:ss"),
  * regardless of display format.
+ *
+ * The structure of a TimePicker is:
+ *
+ * ```
+ * <TimePicker>
+ * 	<TimePickerPart part="hour" />
+ * 	<TimePickerPart part="minute" />
+ * 	<TimePickerPart part="second" /> (optional)
+ * 	<TimePickerPeriod /> (in 12-hour mode)
+ * </TimePicker>
+ * ```
+ *
+ * With no children, the segments are rendered automatically.
  */
 export default function TimePicker($props: TimePickerProps | undefined) {
-	let hourInput: HTMLInputElement;
-	let minuteInput: HTMLInputElement;
-	let secondInput: HTMLInputElement;
-	let periodButton: HTMLButtonElement;
+	const partInputs = new Map<Part, HTMLInputElement>();
+	let periodButton: HTMLButtonElement | undefined;
 
 	// Wire up the enclosing Form and Field, if any
 	const form = createFormField(
@@ -106,7 +122,9 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 	let $state = $watch({
 		value: undefined as string | undefined,
 
-		// The text being typed in each segment; committed on completion
+		// The text being typed in each segment; committed on completion.
+		// Cleared by every commit, so a non-empty buffer always means
+		// uncommitted typing that sync must not overwrite.
 		hourText: "",
 		minuteText: "",
 		secondText: "",
@@ -168,6 +186,13 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 		return format(n);
 	}
 
+	function getPartLabel(part: Part): string {
+		if (part === "hour") {
+			return $props?.hour12 ? "Hour (12-hour)" : "Hour";
+		}
+		return part === "minute" ? "Minute" : "Second";
+	}
+
 	function isPM(): boolean {
 		return parts().h >= 12;
 	}
@@ -224,17 +249,22 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 		if (sync) syncInputs();
 	}
 
-	// Keep segment inputs showing the committed values unless typing there
+	// Keep segment inputs showing the committed values. A segment with
+	// uncommitted typing keeps its text; the rest always sync, even when
+	// focused -- so moving between segments never freezes their display.
 	function syncInputs() {
+		const hourInput = partInputs.get("hour");
+		const minuteInput = partInputs.get("minute");
 		if (!hourInput || !minuteInput) return;
 		const editing = (el: HTMLInputElement, buffer: string) =>
-			document.activeElement === el && el.value !== buffer;
+			document.activeElement === el && buffer !== "";
 		if (!editing(hourInput, $state.hourText)) {
 			hourInput.value = partDisplay("hour");
 		}
 		if (!editing(minuteInput, $state.minuteText)) {
 			minuteInput.value = partDisplay("minute");
 		}
+		const secondInput = partInputs.get("second");
 		if (secondInput && !editing(secondInput, $state.secondText)) {
 			secondInput.value = partDisplay("second");
 		}
@@ -257,6 +287,7 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 		// Two digits fills the segment; move on to the next one
 		if (text.length >= (PAD[partIndex(part)] ?? 2)) {
 			commitBuffer(part, text);
+			setBuffer(part, "");
 			focusNextSegment(part);
 		}
 	}
@@ -333,9 +364,9 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 
 	function focusNextSegment(part: Part) {
 		if (part === "hour") {
-			minuteInput?.focus();
+			partInputs.get("minute")?.focus();
 		} else if (part === "minute" && getSeconds()) {
-			secondInput?.focus();
+			partInputs.get("second")?.focus();
 		} else if (part === "minute" && $props?.hour12) {
 			periodButton?.focus();
 		}
@@ -361,18 +392,50 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 		}
 	}
 
-	function ariaNow(part: Part): number {
+	function getPartValue(part: Part): number {
 		const p = parts();
 		return part === "hour" ? p.h : part === "minute" ? p.m : p.s;
 	}
 
-	function ariaText(part: Part): string {
+	function getPartText(part: Part): string {
 		if (part === "hour" && $props?.hour12) {
 			return `${partDisplay("hour")} ${isPM() ? "PM" : "AM"}`;
 		}
-		return String(ariaNow(part));
+		return String(getPartValue(part));
 	}
 
+	// Set the context to pass down to the segments and the period toggle
+	let context: TimePickerContext = {
+		getDisabled,
+		getPartLabel,
+		getPartValue,
+		getPartText,
+		partDisplay,
+		handleInput,
+		handleBlur,
+		handleSegmentKey,
+		registerPart: (part, el) => {
+			partInputs.set(part, el);
+		},
+		unregisterPart: (part, el) => {
+			if (partInputs.get(part) === el) {
+				partInputs.delete(part);
+			}
+		},
+		isPM,
+		togglePeriod,
+		handlePeriodKey,
+		registerPeriod: (el) => {
+			periodButton = el;
+		},
+		unregisterPeriod: (el) => {
+			if (periodButton === el) {
+				periodButton = undefined;
+			}
+		},
+	};
+	$context[TimePickerContextName] = context;
+
 	@render {
 		<div
 			id={$props?.id}
@@ -383,78 +446,18 @@ export default function TimePicker($props: TimePickerProps | undefined) {
 			data-valid={form.valid ? "valid" : "invalid"}
 			aria-describedby={form.messageId}
 		>
-			<input
-				&ref={hourInput}
-				class="torp-time-picker-part"
-				type="text"
-				inputmode="numeric"
-				role="spinbutton"
-				value={partDisplay("hour")}
-				aria-label={$props?.hour12 ? "Hour (12-hour)" : "Hour"}
-				aria-valuemin={0}
-				aria-valuemax={23}
-				aria-valuenow={ariaNow("hour")}
-				aria-valuetext={ariaText("hour")}
-				disabled={getDisabled()}
-				tabindex={getDisabled() ? -1 : 0}
-				oninput={(e: Event) => handleInput("hour", e)}
-				onblur={(e: FocusEvent) => handleBlur("hour", e)}
-				onkeydown={(e: KeyboardEvent) => handleSegmentKey("hour", e)}
-			/>
-			<span class="torp-time-picker-separator">:</span>
-			<input
-				&ref={minuteInput}
-				class="torp-time-picker-part"
-				type="text"
-				inputmode="numeric"
-				role="spinbutton"
-				value={partDisplay("minute")}
-				aria-label="Minute"
-				aria-valuemin={0}
-				aria-valuemax={59}
-				aria-valuenow={ariaNow("minute")}
-				aria-valuetext={ariaText("minute")}
-				disabled={getDisabled()}
-				tabindex={getDisabled() ? -1 : 0}
-				oninput={(e: Event) => handleInput("minute", e)}
-				onblur={(e: FocusEvent) => handleBlur("minute", e)}
-				onkeydown={(e: KeyboardEvent) => handleSegmentKey("minute", e)}
-			/>
-			@if (getSeconds()) {
+			<slot>
+				<TimePickerPart part="hour" />
 				<span class="torp-time-picker-separator">:</span>
-				<input
-					&ref={secondInput}
-					class="torp-time-picker-part"
-					type="text"
-					inputmode="numeric"
-					role="spinbutton"
-					value={partDisplay("second")}
-					aria-label="Second"
-					aria-valuemin={0}
-					aria-valuemax={59}
-					aria-valuenow={ariaNow("second")}
-					aria-valuetext={ariaText("second")}
-					disabled={getDisabled()}
-					tabindex={getDisabled() ? -1 : 0}
-					oninput={(e: Event) => handleInput("second", e)}
-					onblur={(e: FocusEvent) => handleBlur("second", e)}
-					onkeydown={(e: KeyboardEvent) => handleSegmentKey("second", e)}
-				/>
-			}
-			@if ($props?.hour12) {
-				<button
-					&ref={periodButton}
-					type="button"
-					class="torp-time-picker-period"
-					disabled={getDisabled()}
-					tabindex={getDisabled() ? -1 : 0}
-					aria-label={isPM() ? "PM" : "AM"}
-					onclick={togglePeriod}
-					onkeydown={handlePeriodKey}
-				>
-					{isPM() ? "PM" : "AM"}
-				</button>
-			}
+				<TimePickerPart part="minute" />
+				@if (getSeconds()) {
+					<span class="torp-time-picker-separator">:</span>
+					<TimePickerPart part="second" />
+				}
+				@if ($props?.hour12) {
+					<TimePickerPeriod />
+				}
+			</slot>
 		</div>
 
 		<FormValues name={form.name} value={$state.value} />

package/dist/TimePicker/TimePickerPart.torp

@@ -0,0 +1,61 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type Part, type TimePickerContext, TimePickerContextName } from "./TimePickerTypes";
+
+interface TimePickerPartProps {
+	/** An ID for the segment element */
+	id?: string;
+	/** Classes for the segment element */
+	class?: ClassValue;
+	/** Styles for the segment element */
+	style?: StyleValue;
+	/** Which segment this is: the hour, minute or second field */
+	part: Part;
+}
+
+/**
+ * One spinbutton segment of a TimePicker -- the hour, minute or second
+ * field. Each segment can be typed into or stepped with the arrow keys.
+ */
+export default function TimePickerPart($props: TimePickerPartProps | undefined) {
+	// Get stuff out of the TimePicker context
+	const context = $context[TimePickerContextName] as TimePickerContext;
+	if (!context) {
+		throw new Error("TimePickerPart must be contained within a TimePicker");
+	}
+
+	function getPart(): Part {
+		return $props?.part ?? "hour";
+	}
+
+	function getDisabled(): boolean {
+		return context.getDisabled();
+	}
+
+	@render {
+		<input
+			{$props?.id}
+			class={["torp-time-picker-part", $props?.class]}
+			{$props?.style}
+			type="text"
+			inputmode="numeric"
+			role="spinbutton"
+			value={context.partDisplay(getPart())}
+			aria-label={context.getPartLabel(getPart())}
+			aria-valuemin={0}
+			aria-valuemax={getPart() === "hour" ? 23 : 59}
+			aria-valuenow={context.getPartValue(getPart())}
+			aria-valuetext={context.getPartText(getPart())}
+			disabled={getDisabled()}
+			tabindex={getDisabled() ? -1 : 0}
+			oninput={(e: Event) => context.handleInput(getPart(), e)}
+			onblur={(e: FocusEvent) => context.handleBlur(getPart(), e)}
+			onkeydown={(e: KeyboardEvent) => context.handleSegmentKey(getPart(), e)}
+			onmount={(el) => {
+				context.registerPart(getPart(), el);
+				return () => {
+					context.unregisterPart(getPart(), el);
+				};
+			}}
+		/>
+	}
+}

package/dist/TimePicker/TimePickerPeriod.torp

@@ -0,0 +1,48 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type TimePickerContext, TimePickerContextName } from "./TimePickerTypes";
+
+interface TimePickerPeriodProps {
+	/** An ID for the period element */
+	id?: string;
+	/** Classes for the period element */
+	class?: ClassValue;
+	/** Styles for the period element */
+	style?: StyleValue;
+}
+
+/**
+ * The AM/PM toggle of a TimePicker, shown in 12-hour mode.
+ */
+export default function TimePickerPeriod($props: TimePickerPeriodProps | undefined) {
+	// Get stuff out of the TimePicker context
+	const context = $context[TimePickerContextName] as TimePickerContext;
+	if (!context) {
+		throw new Error("TimePickerPeriod must be contained within a TimePicker");
+	}
+
+	function getDisabled(): boolean {
+		return context.getDisabled();
+	}
+
+	@render {
+		<button
+			{$props?.id}
+			type="button"
+			class={["torp-time-picker-period", $props?.class]}
+			{$props?.style}
+			disabled={getDisabled()}
+			tabindex={getDisabled() ? -1 : 0}
+			aria-label={context.isPM() ? "PM" : "AM"}
+			onclick={() => context.togglePeriod()}
+			onkeydown={context.handlePeriodKey}
+			onmount={(el) => {
+				context.registerPeriod(el);
+				return () => {
+					context.unregisterPeriod(el);
+				};
+			}}
+		>
+			{context.isPM() ? "PM" : "AM"}
+		</button>
+	}
+}

package/dist/TimePicker/TimePickerTypes.ts

@@ -0,0 +1,37 @@
+export const TimePickerContextName: unique symbol = Symbol.for("torp.TimePicker");
+
+/** One of the spinbutton segments of a TimePicker */
+export type Part = "hour" | "minute" | "second";
+
+export interface TimePickerContext {
+	/** Whether the user cannot interact with the time picker */
+	getDisabled: () => boolean;
+	/** The accessible name for a segment */
+	getPartLabel: (part: Part) => string;
+	/** A segment's value, for aria-valuenow */
+	getPartValue: (part: Part) => number;
+	/** A segment's value as announced, for aria-valuetext */
+	getPartText: (part: Part) => string;
+	/** The text displayed in a segment */
+	partDisplay: (part: Part) => string;
+	/** Handles typing in a segment */
+	handleInput: (part: Part, e: Event) => void;
+	/** Handles a segment losing focus */
+	handleBlur: (part: Part, e: FocusEvent) => void;
+	/** Handles arrow/Home/End/Enter keys in a segment */
+	handleSegmentKey: (part: Part, e: KeyboardEvent) => void;
+	/** Called from a segment when it is added */
+	registerPart: (part: Part, el: HTMLInputElement) => void;
+	/** Called from a segment when it is removed */
+	unregisterPart: (part: Part, el: HTMLInputElement) => void;
+	/** Whether the current time is in the PM half of the day */
+	isPM: () => boolean;
+	/** Toggles between AM and PM */
+	togglePeriod: () => void;
+	/** Handles arrow keys on the period toggle */
+	handlePeriodKey: (e: KeyboardEvent) => void;
+	/** Called from the period toggle when it is added */
+	registerPeriod: (el: HTMLButtonElement) => void;
+	/** Called from the period toggle when it is removed */
+	unregisterPeriod: (el: HTMLButtonElement) => void;
+}

package/dist/TimePicker/index.d.ts

@@ -41,6 +41,19 @@ interface TimePickerProps {
  *
  * The value is always the canonical 24-hour form ("HH:mm" or "HH:mm:ss"),
  * regardless of display format.
+ *
+ * The structure of a TimePicker is:
+ *
+ * ```
+ * <TimePicker>
+ * 	<TimePickerPart part="hour" />
+ * 	<TimePickerPart part="minute" />
+ * 	<TimePickerPart part="second" /> (optional)
+ * 	<TimePickerPeriod /> (in 12-hour mode)
+ * </TimePicker>
+ * ```
+ *
+ * With no children, the segments are rendered automatically.
  */
 declare function TimePicker(
 	$parent: ParentNode,
@@ -50,4 +63,51 @@ declare function TimePicker(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { TimePicker };
+
+
+interface TimePickerPartProps {
+	/** An ID for the segment element */
+	id?: string;
+	/** Classes for the segment element */
+	class?: ClassValue;
+	/** Styles for the segment element */
+	style?: StyleValue;
+	/** Which segment this is: the hour, minute or second field */
+	part: Part;
+}
+
+/**
+ * One spinbutton segment of a TimePicker -- the hour, minute or second
+ * field. Each segment can be typed into or stepped with the arrow keys.
+ */
+declare function TimePickerPart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TimePickerPartProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TimePickerPeriodProps {
+	/** An ID for the period element */
+	id?: string;
+	/** Classes for the period element */
+	class?: ClassValue;
+	/** Styles for the period element */
+	style?: StyleValue;
+}
+
+/**
+ * The AM/PM toggle of a TimePicker, shown in 12-hour mode.
+ */
+declare function TimePickerPeriod(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TimePickerPeriodProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { TimePicker, TimePickerPart, TimePickerPeriod };

package/dist/TimePicker/index.js

@@ -1,2 +1,4 @@
 import TimePicker from "./TimePicker.torp";
-export { TimePicker };
+import TimePickerPart from "./TimePickerPart.torp";
+import TimePickerPeriod from "./TimePickerPeriod.torp";
+export { TimePicker, TimePickerPart, TimePickerPeriod };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
   "exports": {
@@ -179,8 +179,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@torpor/unplugin": "^1.0.1",
-    "@torpor/view": "^1.0.1"
+    "@torpor/view": "^1.0.3",
+    "@torpor/unplugin": "^1.0.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -193,11 +193,11 @@
     "jsdom": "^30.0.1",
     "tsx": "^4.23.5",
     "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.7",
-    "vite-plus": "0.2.7",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plus": "0.3.0",
     "zod": "^4.4.3",
-    "@torpor/prettier": "^1.0.1",
-    "@torpor/check": "^1.0.1"
+    "@torpor/prettier": "^1.0.3",
+    "@torpor/check": "^1.0.3"
   },
   "scripts": {
     "build": "tsgo --noEmit && vp pack",