@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/textarea-field/textarea-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.d.ts","sourceRoot":"","sources":["../../../src/components/textarea-field/textarea-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEN,KAAK,aAAa,EAClB,MAAM,gBAAgB,CAAC;AAGxB,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACpC,kBAAkB,EAChB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,cAAc,GACd,aAAa,CACf,GACA,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEzC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,gMAmBvB,kBAAkB,KAAG,SAgCvB,CAAC"}

package/dist/components/textarea-field/textarea-field.js

@@ -0,0 +1,168 @@
+import { TextInput } from "../text-field/text-input.js";
+import { Textarea } from "./textarea.js";
+import textarea_field_module_default from "./textarea-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/textarea-field/textarea-field.tsx
+/**
+* A multi-line text field: `TextField`'s anatomy over a `<textarea>` that
+* autosizes with its content, with the counter and the pending spinner in a bar
+* along the bottom edge of the group.
+*
+* @example
+* <TextareaField
+* 	label="Note"
+* 	optionalLabel="optional"
+* 	value={note}
+* 	onValueChange={setNote}
+* 	maxLength={2000}
+* />
+*/
+var TextareaField = (t0) => {
+	const $ = c(48);
+	let className;
+	let controlProps;
+	let description;
+	let dirty;
+	let disabled;
+	let errors;
+	let label;
+	let maxLength;
+	let maxRows;
+	let onValueChange;
+	let optionalLabel;
+	let pending;
+	let readOnly;
+	let requiredness;
+	let rows;
+	let state;
+	let touched;
+	let value;
+	if ($[0] !== t0) {
+		({label, description, errors, requiredness, optionalLabel, rows, maxRows, value, onValueChange, disabled, readOnly, dirty, touched, pending, maxLength, state, className, ...controlProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = controlProps;
+		$[3] = description;
+		$[4] = dirty;
+		$[5] = disabled;
+		$[6] = errors;
+		$[7] = label;
+		$[8] = maxLength;
+		$[9] = maxRows;
+		$[10] = onValueChange;
+		$[11] = optionalLabel;
+		$[12] = pending;
+		$[13] = readOnly;
+		$[14] = requiredness;
+		$[15] = rows;
+		$[16] = state;
+		$[17] = touched;
+		$[18] = value;
+	} else {
+		className = $[1];
+		controlProps = $[2];
+		description = $[3];
+		dirty = $[4];
+		disabled = $[5];
+		errors = $[6];
+		label = $[7];
+		maxLength = $[8];
+		maxRows = $[9];
+		onValueChange = $[10];
+		optionalLabel = $[11];
+		pending = $[12];
+		readOnly = $[13];
+		requiredness = $[14];
+		rows = $[15];
+		state = $[16];
+		touched = $[17];
+		value = $[18];
+	}
+	let t1;
+	if ($[19] !== label) {
+		t1 = /* @__PURE__ */ jsx(TextInput.Label, { children: label });
+		$[19] = label;
+		$[20] = t1;
+	} else t1 = $[20];
+	let t2;
+	if ($[21] !== controlProps || $[22] !== maxRows || $[23] !== rows) {
+		t2 = /* @__PURE__ */ jsx(Textarea, {
+			rows,
+			maxRows,
+			...controlProps
+		});
+		$[21] = controlProps;
+		$[22] = maxRows;
+		$[23] = rows;
+		$[24] = t2;
+	} else t2 = $[24];
+	let t3;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(TextInput.Bar, { children: [/* @__PURE__ */ jsx(TextInput.Counter, {}), /* @__PURE__ */ jsx(TextInput.Pending, {})] });
+		$[25] = t3;
+	} else t3 = $[25];
+	let t4;
+	if ($[26] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(TextInput.Group, {
+			className: textarea_field_module_default.group,
+			children: [t2, t3]
+		});
+		$[26] = t2;
+		$[27] = t4;
+	} else t4 = $[27];
+	let t5;
+	if ($[28] !== description) {
+		t5 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[28] = description;
+		$[29] = t5;
+	} else t5 = $[29];
+	let t6;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[30] = t6;
+	} else t6 = $[30];
+	let t7;
+	if ($[31] !== className || $[32] !== dirty || $[33] !== disabled || $[34] !== errors || $[35] !== maxLength || $[36] !== onValueChange || $[37] !== optionalLabel || $[38] !== pending || $[39] !== readOnly || $[40] !== requiredness || $[41] !== state || $[42] !== t1 || $[43] !== t4 || $[44] !== t5 || $[45] !== touched || $[46] !== value) {
+		t7 = /* @__PURE__ */ jsxs(TextInput.Root, {
+			value,
+			onValueChange,
+			disabled,
+			readOnly,
+			requiredness,
+			optionalLabel,
+			errors,
+			dirty,
+			touched,
+			pending,
+			maxLength,
+			state,
+			className,
+			children: [
+				t1,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[31] = className;
+		$[32] = dirty;
+		$[33] = disabled;
+		$[34] = errors;
+		$[35] = maxLength;
+		$[36] = onValueChange;
+		$[37] = optionalLabel;
+		$[38] = pending;
+		$[39] = readOnly;
+		$[40] = requiredness;
+		$[41] = state;
+		$[42] = t1;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = touched;
+		$[46] = value;
+		$[47] = t7;
+	} else t7 = $[47];
+	return t7;
+};
+export { TextareaField };

package/dist/components/textarea-field/textarea-field.module.js

@@ -0,0 +1,8 @@
+import './textarea-field.css';// src/components/textarea-field/textarea-field.module.scss
+var group = "_group_1h5or_3";
+var textarea = "_textarea_1h5or_7";
+var textarea_field_module_default = {
+	group,
+	textarea
+};
+export { textarea_field_module_default as default, group, textarea };

package/dist/components/textarea-field/textarea.d.ts

@@ -0,0 +1,20 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type { ReactNode } from "react";
+export type TextareaProps = Omit<BaseField.Control.Props, "value" | "defaultValue" | "onValueChange" | "render"> & Readonly<{
+    /**
+     * Rows the control starts at, and never shrinks below. Two is the floor
+     * that tells a textarea apart from a single-line field. @default 3
+     */
+    rows?: number;
+    /** Rows it grows to before scrolling instead. */
+    maxRows?: number;
+}>;
+/**
+ * The bare `<textarea>` for a `TextInput.Group`, growing with its content
+ * between `rows` and `maxRows`.
+ *
+ * @example
+ * <TextInput.Group><Textarea rows={4} maxRows={12} /></TextInput.Group>
+ */
+export declare const Textarea: ({ rows, maxRows, className, ...props }: TextareaProps) => ReactNode;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea-field/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea-field/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,EACvB,OAAO,GAAG,cAAc,GAAG,eAAe,GAAG,QAAQ,CACrD,GACA,QAAQ,CAAC;IACR;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAIJ;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,2CAKlB,aAAa,KAAG,SAoClB,CAAC"}

package/dist/components/textarea-field/textarea.js

@@ -0,0 +1,108 @@
+import { Field } from "../field/field.js";
+import { useTextInputContext } from "../text-field/text-input-context.js";
+import text_field_module_default from "../text-field/text-field.module.js";
+import { useAutosize } from "./use-autosize.js";
+import textarea_field_module_default from "./textarea-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/textarea-field/textarea.tsx
+var MIN_ROWS = 2;
+/**
+* The bare `<textarea>` for a `TextInput.Group`, growing with its content
+* between `rows` and `maxRows`.
+*
+* @example
+* <TextInput.Group><Textarea rows={4} maxRows={12} /></TextInput.Group>
+*/
+var Textarea = (t0) => {
+	const $ = c(26);
+	let className;
+	let maxRows;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({rows: t1, maxRows, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = maxRows;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		maxRows = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const rows = t1 === void 0 ? 3 : t1;
+	const { value, setValue, state, setControl } = useTextInputContext();
+	const fit = useAutosize();
+	const minRows = Math.max(rows, MIN_ROWS);
+	let t2;
+	if ($[5] !== fit || $[6] !== setControl) {
+		t2 = (element) => {
+			setControl(element);
+			return fit(element);
+		};
+		$[5] = fit;
+		$[6] = setControl;
+		$[7] = t2;
+	} else t2 = $[7];
+	const t3 = `calc(${minRows} * 1lh)`;
+	const t4 = maxRows === void 0 ? void 0 : `calc(${maxRows} * 1lh)`;
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = {
+			minBlockSize: t3,
+			maxBlockSize: t4
+		};
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== minRows || $[12] !== t2 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx("textarea", {
+			ref: t2,
+			rows: minRows,
+			style: t5
+		});
+		$[11] = minRows;
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	const t7 = state.disabled;
+	const t8 = state.readonly;
+	const t9 = state.requiredness === "required";
+	let t10;
+	if ($[15] !== className) {
+		t10 = clsx(text_field_module_default.control, textarea_field_module_default.textarea, className);
+		$[15] = className;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== props || $[18] !== setValue || $[19] !== state.disabled || $[20] !== state.readonly || $[21] !== t10 || $[22] !== t6 || $[23] !== t9 || $[24] !== value) {
+		t11 = /* @__PURE__ */ jsx(Field.Control, {
+			render: t6,
+			value,
+			onValueChange: setValue,
+			disabled: t7,
+			readOnly: t8,
+			required: t9,
+			className: t10,
+			...props
+		});
+		$[17] = props;
+		$[18] = setValue;
+		$[19] = state.disabled;
+		$[20] = state.readonly;
+		$[21] = t10;
+		$[22] = t6;
+		$[23] = t9;
+		$[24] = value;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
+};
+export { Textarea };

package/dist/components/textarea-field/tsf-textarea-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type TextareaFieldProps } from "./textarea-field.tsx";
+export type TSFTextareaFieldProps = Omit<TextareaFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `TextareaField` bound to the TanStack Form field it renders in. Registered as
+ * `field.TextareaField`.
+ *
+ * @example
+ * <form.AppField name="note">
+ * 	{field => <field.TextareaField label="Note" optionalLabel="optional" maxLength={2000} />}
+ * </form.AppField>
+ */
+export declare const TSFTextareaField: (props: TSFTextareaFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-textarea-field.d.ts.map

package/dist/components/textarea-field/tsf-textarea-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-textarea-field.d.ts","sourceRoot":"","sources":["../../../src/components/textarea-field/tsf-textarea-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,kBAAkB,EAClB,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,UACrB,qBAAqB,KAC1B,SAWF,CAAC"}

package/dist/components/textarea-field/tsf-textarea-field.js

@@ -0,0 +1,34 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { TextareaField } from "./textarea-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/textarea-field/tsf-textarea-field.tsx
+/**
+* `TextareaField` bound to the TanStack Form field it renders in. Registered as
+* `field.TextareaField`.
+*
+* @example
+* <form.AppField name="note">
+* 	{field => <field.TextareaField label="Note" optionalLabel="optional" maxLength={2000} />}
+* </form.AppField>
+*/
+var TSFTextareaField = (props) => {
+	const $ = c(5);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(TextareaField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: field.handleChange
+		});
+		$[0] = connected;
+		$[1] = field.handleChange;
+		$[2] = field.state.value;
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+};
+export { TSFTextareaField };

package/dist/components/textarea-field/use-autosize.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Grows a `<textarea>` with its content, between the `min-block-size` and
+ * `max-block-size` the caller sets in CSS. Returns a ref callback for the
+ * element; refits after every render, so on every value change, and whenever
+ * the control's width changes.
+ *
+ * @example
+ * const fit = useAutosize();
+ * return <textarea ref={fit} />;
+ */
+export declare const useAutosize: () => ((element: HTMLTextAreaElement | null) => (() => void) | undefined);
+//# sourceMappingURL=use-autosize.d.ts.map

package/dist/components/textarea-field/use-autosize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-autosize.d.ts","sourceRoot":"","sources":["../../../src/components/textarea-field/use-autosize.ts"],"names":[],"mappings":"AAwCA;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,QAAO,CAAC,CAC/B,OAAO,EAAE,mBAAmB,GAAG,IAAI,KAC/B,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAe5B,CAAC"}

package/dist/components/textarea-field/use-autosize.js

@@ -0,0 +1,65 @@
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef } from "react";
+// src/components/textarea-field/use-autosize.ts
+/**
+* Sets the element's height to exactly its content's height. The control carries
+* no border or padding of its own, both live on the group around it, so
+* `scrollHeight` is the content height with nothing to compensate for.
+*
+* @example
+* fitToContent(textarea);
+*/
+var fitToContent = (element) => {
+	element.style.height = "0";
+	element.style.height = `${element.scrollHeight}px`;
+};
+/**
+* Fits the element now and again whenever its width changes, since rewrapped
+* text takes a different number of lines. Returns the cleanup.
+*
+* @example
+* const stop = followWidth(textarea);
+*/
+var followWidth = (element) => {
+	fitToContent(element);
+	let width = element.clientWidth;
+	const observer = new ResizeObserver(() => {
+		if (element.clientWidth === width) return;
+		width = element.clientWidth;
+		fitToContent(element);
+	});
+	observer.observe(element);
+	return () => observer.disconnect();
+};
+/**
+* Grows a `<textarea>` with its content, between the `min-block-size` and
+* `max-block-size` the caller sets in CSS. Returns a ref callback for the
+* element; refits after every render, so on every value change, and whenever
+* the control's width changes.
+*
+* @example
+* const fit = useAutosize();
+* return <textarea ref={fit} />;
+*/
+var useAutosize = () => {
+	const $ = c(2);
+	const control = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			if (control.current) fitToContent(control.current);
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	useLayoutEffect(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (element) => {
+			control.current = element;
+			return element === null ? void 0 : followWidth(element);
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+export { useAutosize };

package/dist/components/time-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./time-field.tsx";
+export * from "./time-input.tsx";
+export * from "./tsf-time-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/time-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/components/time-field/index.js

@@ -0,0 +1,4 @@
+import { TimeField } from "./time-field.js";
+import { TimeInput } from "./time-input.js";
+import { TSFTimeField } from "./tsf-time-field.js";
+export { TSFTimeField, TimeField, TimeInput };

package/dist/components/time-field/time-field.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { FieldProps } from "../field/index.ts";
+export type TimeFieldProps = FieldProps & Readonly<{
+    /** A time of day as `"HH:mm"`, such as `"09:30"`. */
+    value?: string | null;
+    /** The same, for an uncontrolled control. */
+    defaultValue?: string | null;
+    /** Called with the `"HH:mm"` typed, or `null` once cleared. */
+    onValueChange?: (value: string | null) => void;
+    onBlur?: () => void;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Applied to the field wrapper, so callers can size the control. */
+    className?: string;
+}>;
+/**
+ * A labelled time entry whose hour and minute segments follow the
+ * `LocaleProvider`'s locale, so Dutch reads as 24-hour. Its value is a
+ * `"HH:mm"` string.
+ *
+ * @example
+ * <TimeField label="Start time" optionalLabel="optional" value={startTime} onValueChange={setStartTime} />
+ */
+export declare const TimeField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly, className, }: TimeFieldProps) => ReactNode;
+//# sourceMappingURL=time-field.d.ts.map

package/dist/components/time-field/time-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/time-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EACX,UAAU,EAEV,MAAM,mBAAmB,CAAC;AAI3B,MAAM,MAAM,cAAc,GAAG,UAAU,GACtC,QAAQ,CAAC;IACR,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE/C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,2KAiBnB,cAAc,KAAG,SAwDnB,CAAC"}

package/dist/components/time-field/time-field.js

@@ -0,0 +1,136 @@
+import { isoToTimeOfDay, timeOfDayToIso } from "../../lib/calendar/temporal-value.js";
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { useFormDisabled } from "../form/form-context.js";
+import { TimeInput } from "./time-input.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/time-field/time-field.tsx
+/**
+* A labelled time entry whose hour and minute segments follow the
+* `LocaleProvider`'s locale, so Dutch reads as 24-hour. Its value is a
+* `"HH:mm"` string.
+*
+* @example
+* <TimeField label="Start time" optionalLabel="optional" value={startTime} onValueChange={setStartTime} />
+*/
+var TimeField = (t0) => {
+	const $ = c(39);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly, className } = t0;
+	let t1;
+	if ($[0] !== value) {
+		t1 = isoToTimeOfDay(value);
+		$[0] = value;
+		$[1] = t1;
+	} else t1 = $[1];
+	const time = t1;
+	const formDisabled = useFormDisabled();
+	const t2 = pending === true;
+	let t3;
+	if ($[2] !== t2) {
+		t3 = { busy: t2 };
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const phase = useBusyPhase(t3);
+	let t4;
+	if ($[4] !== errors) {
+		t4 = normalizeFieldErrors(errors);
+		$[4] = errors;
+		$[5] = t4;
+	} else t4 = $[5];
+	const invalid = t4.length > 0;
+	const t5 = disabled === true || formDisabled;
+	const t6 = touched === true && !invalid;
+	const t7 = phase !== "fresh";
+	const t8 = time !== null;
+	let t9;
+	if ($[6] !== dirty || $[7] !== invalid || $[8] !== readOnly || $[9] !== requiredness || $[10] !== t5 || $[11] !== t6 || $[12] !== t7 || $[13] !== t8 || $[14] !== touched) {
+		t9 = {
+			disabled: t5,
+			readonly: readOnly,
+			requiredness,
+			invalid,
+			valid: t6,
+			dirty,
+			touched,
+			pending: t7,
+			filled: t8
+		};
+		$[6] = dirty;
+		$[7] = invalid;
+		$[8] = readOnly;
+		$[9] = requiredness;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = touched;
+		$[15] = t9;
+	} else t9 = $[15];
+	const fieldState = t9;
+	let t10;
+	if ($[16] !== defaultValue || $[17] !== disabled || $[18] !== fieldState || $[19] !== invalid || $[20] !== name || $[21] !== onBlur || $[22] !== onValueChange || $[23] !== phase || $[24] !== readOnly || $[25] !== requiredness || $[26] !== time || $[27] !== value) {
+		t10 = (t11) => {
+			const { labelId, describedBy, controlId } = t11;
+			return /* @__PURE__ */ jsx(TimeInput.Root, {
+				state: fieldState,
+				"aria-labelledby": labelId,
+				"aria-describedby": describedBy,
+				value: value === void 0 ? void 0 : time,
+				defaultValue: isoToTimeOfDay(defaultValue) ?? void 0,
+				onChange: (next) => onValueChange?.(timeOfDayToIso(next)),
+				onBlur,
+				name: name ?? controlId,
+				isDisabled: disabled,
+				isReadOnly: readOnly,
+				isRequired: requiredness === "required",
+				isInvalid: invalid,
+				children: /* @__PURE__ */ jsxs(TimeInput.Group, {
+					role: "presentation",
+					state: fieldState,
+					children: [/* @__PURE__ */ jsx(TimeInput.Input, {}), phase !== "fresh" && /* @__PURE__ */ jsx(TimeInput.Pending, {})]
+				})
+			});
+		};
+		$[16] = defaultValue;
+		$[17] = disabled;
+		$[18] = fieldState;
+		$[19] = invalid;
+		$[20] = name;
+		$[21] = onBlur;
+		$[22] = onValueChange;
+		$[23] = phase;
+		$[24] = readOnly;
+		$[25] = requiredness;
+		$[26] = time;
+		$[27] = value;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[29] !== className || $[30] !== description || $[31] !== dirty || $[32] !== errors || $[33] !== label || $[34] !== optionalLabel || $[35] !== requiredness || $[36] !== t10 || $[37] !== touched) {
+		t11 = /* @__PURE__ */ jsx(TimeInput.Frame, {
+			label,
+			description,
+			errors,
+			requiredness,
+			optionalLabel,
+			dirty,
+			touched,
+			className,
+			children: t10
+		});
+		$[29] = className;
+		$[30] = description;
+		$[31] = dirty;
+		$[32] = errors;
+		$[33] = label;
+		$[34] = optionalLabel;
+		$[35] = requiredness;
+		$[36] = t10;
+		$[37] = touched;
+		$[38] = t11;
+	} else t11 = $[38];
+	return t11;
+};
+export { TimeField };

package/dist/components/time-field/time-input.d.ts

@@ -0,0 +1,31 @@
+import type { Time } from "@internationalized/date";
+import type { ReactNode } from "react";
+import { type TimeFieldProps as AriaTimeFieldProps } from "react-aria-components";
+import { TemporalFrame, TemporalGroup, TemporalInput, TemporalSegment, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
+import { Field } from "../field/index.ts";
+export type TimeInputRootProps = AriaTimeFieldProps<Time> & TemporalStateProps;
+declare const TimeInputRoot: ({ state, ...props }: TimeInputRootProps) => ReactNode;
+/** The parts of a time input. */
+export type TimeInputParts = Readonly<{
+    Frame: typeof TemporalFrame;
+    Root: typeof TimeInputRoot;
+    Group: typeof TemporalGroup;
+    Input: typeof TemporalInput;
+    Segment: typeof TemporalSegment;
+    Pending: typeof Field.Pending;
+}>;
+/**
+ * The styled parts of a react-aria `TimeField`, carrying the field frame's ids
+ * rather than a label of their own. Its `Group` is the bordered box the
+ * segments and any inlay share. For the ordinary case, use `TimeField`.
+ *
+ * @example
+ * <TimeInput.Root aria-labelledby={labelId}>
+ * 	<TimeInput.Group state={{ requiredness: "optional" }}>
+ * 		<TimeInput.Input />
+ * 	</TimeInput.Group>
+ * </TimeInput.Root>
+ */
+export declare const TimeInput: TimeInputParts;
+export {};
+//# sourceMappingURL=time-input.d.ts.map

package/dist/components/time-field/time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/time-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,cAAc,IAAI,kBAAkB,EACzC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACN,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,kBAAkB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,KAAK,EAEL,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,GACxD,kBAAkB,CAAC;AAEpB,QAAA,MAAM,aAAa,wBAGhB,kBAAkB,KAAG,SAMvB,CAAC;AAEF,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACrC,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,OAAO,EAAE,OAAO,eAAe,CAAC;IAChC,OAAO,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC;CAC9B,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,EAAE,cAOvB,CAAC"}