ropav 0.2.0 → 0.3.0

package/dist/composables/use-table-column-layout.d.ts

@@ -0,0 +1,86 @@
+import type { CollectionKey } from "./use-collection";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/** A column width: pixels as a number, a percentage of the table, or a fraction of what is left. */
+export type TableColumnSize = number | string;
+export interface TableColumnDefinition {
+    key: CollectionKey;
+    /** A width the caller controls. Set, it is never changed by a resize. */
+    width?: TableColumnSize | null;
+    /** The width the column starts at, when the caller is not controlling it. */
+    defaultWidth?: TableColumnSize | null;
+    minWidth?: TableColumnSize | null;
+    maxWidth?: TableColumnSize | null;
+}
+/** Pixels and percentages are fixed; `fr` units and anything unrecognised flex. */
+export declare const isStaticWidth: (width?: TableColumnSize | null) => boolean;
+/** The number in front of `fr`. Anything else counts as `1fr`, as React Aria has it. */
+export declare const parseFractionalUnit: (width?: TableColumnSize | null) => number;
+export declare const parseStaticWidth: (width: TableColumnSize, tableWidth: number) => number;
+export declare const getMaxWidth: (maxWidth: TableColumnSize | null | undefined, tableWidth: number) => number;
+/**
+ * A minimum cannot be given in `fr`: knowing what a fraction comes to would need every other
+ * column's width, which is the very thing being solved for.
+ */
+export declare const getMinWidth: (minWidth: TableColumnSize | null | undefined, tableWidth: number) => number;
+/**
+ * Column widths for one table width, ported from react-stately's `calculateColumnSizes`.
+ *
+ * This is the CSS flexbox layout algorithm, cut down to the shape a table needs: one row, a flex
+ * basis of zero unless the column asked for a static width, and grow and shrink both equal to the
+ * column's `fr`. It is deliberately **not** plain pixel sizing — `1fr` columns have to share what
+ * the static and percentage columns leave over, and a minimum or maximum on any one of them
+ * redistributes the rest.
+ */
+export declare const calculateColumnSizes: (availableWidth: number, columns: TableColumnDefinition[], changedColumns: Map<CollectionKey, TableColumnSize>, getDefaultWidth?: (index: number) => TableColumnSize | null | undefined, getDefaultMinWidth?: (index: number) => TableColumnSize | null | undefined) => number[];
+export interface BuildColumnWidthsOptions {
+    /** @default "1fr" */
+    getDefaultWidth?: (column: TableColumnDefinition) => TableColumnSize | null | undefined;
+    /** @default 75 */
+    getDefaultMinWidth?: (column: TableColumnDefinition) => TableColumnSize | null | undefined;
+}
+/**
+ * Every column's width in pixels, keyed by column, ported from react-stately's
+ * `TableColumnLayout.buildColumnWidths`.
+ *
+ * The sizing itself is `calculateColumnSizes` above; what this adds is the pair of defaults a
+ * table falls back to — `1fr` for a width nobody declared, and a 75px floor — and the mapping back
+ * onto keys. Both the resizable container and the virtualizer's table layout need exactly that,
+ * and the two must agree: a column laid out at one width by the browser and at another by the
+ * layout would put every cell in the wrong place.
+ *
+ * @param changedWidths Widths that override what the columns declare, as a resize in flight does.
+ */
+export declare const buildColumnWidths: (availableWidth: number, columns: TableColumnDefinition[], changedWidths?: Map<CollectionKey, TableColumnSize>, options?: BuildColumnWidthsOptions) => Map<CollectionKey, number>;
+export interface UseTableColumnLayoutOptions {
+    /** The table's columns, in document order. */
+    columns: () => TableColumnDefinition[];
+    /** The width the columns are laid out against — the scrollable box, not the table element. */
+    tableWidth: MaybeRefOrGetter<number>;
+    /** @default "1fr" */
+    getDefaultWidth?: (column: TableColumnDefinition) => TableColumnSize | null | undefined;
+    /** @default 75 */
+    getDefaultMinWidth?: (column: TableColumnDefinition) => TableColumnSize | null | undefined;
+}
+export interface UseTableColumnLayoutReturn {
+    columnWidths: ComputedRef<Map<CollectionKey, number>>;
+    getColumnWidth: (key: CollectionKey) => number;
+    getColumnMinWidth: (key: CollectionKey) => number;
+    getColumnMaxWidth: (key: CollectionKey) => number;
+    /** The column being dragged, or `null` while none is. */
+    resizingColumn: ComputedRef<CollectionKey | null>;
+    startResize: (key: CollectionKey) => void;
+    endResize: () => void;
+    /** Apply a new width to one column and return every column's resulting size. */
+    updateResizedColumns: (key: CollectionKey, width: number) => Map<CollectionKey, TableColumnSize>;
+}
+/**
+ * Column widths for a resizable table, ported from react-stately's `TableColumnLayout` and
+ * `useTableColumnResizeState`.
+ *
+ * Two things are worth knowing before changing any of it. A column whose `width` the caller set is
+ * **controlled**: a resize never writes to it. And dragging one column's edge freezes every column
+ * to its **left** at the pixel width it currently has, which is what stops the whole table from
+ * reflowing while the pointer moves — the columns to the right keep their declared sizes and
+ * absorb the difference.
+ */
+export declare const useTableColumnLayout: (options: UseTableColumnLayoutOptions) => UseTableColumnLayoutReturn;

package/dist/composables/use-table-column-layout.js

@@ -0,0 +1,214 @@
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-table-column-layout.ts
+/** Pixels and percentages are fixed; `fr` units and anything unrecognised flex. */
+var isStaticWidth = (width) => width != null && (!isNaN(width) || /^(\d+)(?=%$)/.test(String(width)));
+/** The number in front of `fr`. Anything else counts as `1fr`, as React Aria has it. */
+var parseFractionalUnit = (width) => {
+	if (!width || typeof width === "number") return 1;
+	const match = /^(.+)(?=fr$)/.exec(width);
+	return match ? parseFloat(match[0]) : 1;
+};
+var parseStaticWidth = (width, tableWidth) => {
+	if (typeof width === "number") return width;
+	const match = /^(\d+)(?=%$)/.exec(width);
+	if (!match) throw new Error("Only percentages or numbers are supported for static column widths");
+	return tableWidth * (parseFloat(match[0]) / 100);
+};
+var getMaxWidth = (maxWidth, tableWidth) => maxWidth != null ? parseStaticWidth(maxWidth, tableWidth) : Number.MAX_SAFE_INTEGER;
+/**
+* A minimum cannot be given in `fr`: knowing what a fraction comes to would need every other
+* column's width, which is the very thing being solved for.
+*/
+var getMinWidth = (minWidth, tableWidth) => minWidth != null ? parseStaticWidth(minWidth, tableWidth) : 0;
+/**
+* Round an array of floats that sums to an integer, keeping the sum.
+*
+* Each column has to come out a whole number of pixels, and rounding them one by one would drift:
+* the remainder is carried forward instead, so the total is preserved.
+*/
+var cascadeRounding = (items) => {
+	let floatTotal = 0;
+	let intTotal = 0;
+	return items.map((item) => {
+		const rounded = Math.round(item.targetMainSize + floatTotal) - intTotal;
+		floatTotal += item.targetMainSize;
+		intTotal += rounded;
+		return rounded;
+	});
+};
+/**
+* Column widths for one table width, ported from react-stately's `calculateColumnSizes`.
+*
+* This is the CSS flexbox layout algorithm, cut down to the shape a table needs: one row, a flex
+* basis of zero unless the column asked for a static width, and grow and shrink both equal to the
+* column's `fr`. It is deliberately **not** plain pixel sizing — `1fr` columns have to share what
+* the static and percentage columns leave over, and a minimum or maximum on any one of them
+* redistributes the rest.
+*/
+var calculateColumnSizes = (availableWidth, columns, changedColumns, getDefaultWidth, getDefaultMinWidth) => {
+	const originalWidth = availableWidth;
+	const flooredWidth = Math.floor(availableWidth);
+	const hasFractionalWidth = availableWidth - flooredWidth > 0;
+	availableWidth = flooredWidth;
+	let hasNonFrozenItems = false;
+	const items = columns.map((column, index) => {
+		const width = changedColumns.get(column.key) ?? column.width ?? column.defaultWidth ?? getDefaultWidth?.(index) ?? "1fr";
+		let frozen = false;
+		let baseSize = 0;
+		let flex = 0;
+		let targetMainSize = 0;
+		if (isStaticWidth(width)) {
+			baseSize = parseStaticWidth(width, availableWidth);
+			frozen = true;
+		} else {
+			flex = parseFractionalUnit(width);
+			if (flex <= 0) frozen = true;
+		}
+		const min = getMinWidth(column.minWidth ?? getDefaultMinWidth?.(index) ?? 0, availableWidth);
+		const max = getMaxWidth(column.maxWidth, availableWidth);
+		const hypotheticalMainSize = Math.max(min, Math.min(baseSize, max));
+		if (frozen) targetMainSize = hypotheticalMainSize;
+		else if (baseSize > hypotheticalMainSize) {
+			frozen = true;
+			targetMainSize = hypotheticalMainSize;
+		}
+		if (!frozen) hasNonFrozenItems = true;
+		return {
+			baseSize,
+			flex,
+			frozen,
+			hypotheticalMainSize,
+			max,
+			min,
+			targetMainSize,
+			violation: 0
+		};
+	});
+	while (hasNonFrozenItems) {
+		let usedWidth = 0;
+		let flexFactors = 0;
+		for (const item of items) if (item.frozen) usedWidth += item.targetMainSize;
+		else {
+			usedWidth += item.baseSize;
+			flexFactors += item.flex;
+		}
+		const remainingFreeSpace = availableWidth - usedWidth;
+		if (remainingFreeSpace > 0) {
+			for (const item of items) if (!item.frozen) item.targetMainSize = item.baseSize + item.flex / flexFactors * remainingFreeSpace;
+		}
+		let totalViolation = 0;
+		for (const item of items) {
+			item.violation = 0;
+			if (item.frozen) continue;
+			const unclamped = item.targetMainSize;
+			item.targetMainSize = Math.max(item.min, Math.min(unclamped, item.max));
+			item.violation = item.targetMainSize - unclamped;
+			totalViolation += item.violation;
+		}
+		hasNonFrozenItems = false;
+		for (const item of items) if (totalViolation === 0 || Math.sign(totalViolation) === Math.sign(item.violation)) item.frozen = true;
+		else if (!item.frozen) hasNonFrozenItems = true;
+	}
+	const sizes = cascadeRounding(items);
+	if (hasFractionalWidth && sizes.length > 0) {
+		const fraction = originalWidth.toString().split(".")[1];
+		sizes[sizes.length - 1] = Number(`${sizes.at(-1)}.${fraction}`);
+	}
+	return sizes;
+};
+/**
+* Every column's width in pixels, keyed by column, ported from react-stately's
+* `TableColumnLayout.buildColumnWidths`.
+*
+* The sizing itself is `calculateColumnSizes` above; what this adds is the pair of defaults a
+* table falls back to — `1fr` for a width nobody declared, and a 75px floor — and the mapping back
+* onto keys. Both the resizable container and the virtualizer's table layout need exactly that,
+* and the two must agree: a column laid out at one width by the browser and at another by the
+* layout would put every cell in the wrong place.
+*
+* @param changedWidths Widths that override what the columns declare, as a resize in flight does.
+*/
+var buildColumnWidths = (availableWidth, columns, changedWidths = /* @__PURE__ */ new Map(), options = {}) => {
+	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
+	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
+	const sizes = calculateColumnSizes(availableWidth, columns, changedWidths, (index) => getDefaultWidth(columns[index]), (index) => getDefaultMinWidth(columns[index]));
+	return new Map(columns.map((column, index) => [column.key, sizes[index] ?? 0]));
+};
+/**
+* Column widths for a resizable table, ported from react-stately's `TableColumnLayout` and
+* `useTableColumnResizeState`.
+*
+* Two things are worth knowing before changing any of it. A column whose `width` the caller set is
+* **controlled**: a resize never writes to it. And dragging one column's edge freezes every column
+* to its **left** at the pixel width it currently has, which is what stops the whole table from
+* reflowing while the pointer moves — the columns to the right keep their declared sizes and
+* absorb the difference.
+*/
+var useTableColumnLayout = (options) => {
+	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
+	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
+	const resizingColumn = shallowRef(null);
+	const uncontrolledColumns = () => options.columns().filter((column) => column.width == null);
+	const initialUncontrolledWidths = () => new Map(uncontrolledColumns().map((column) => [column.key, column.defaultWidth ?? getDefaultWidth(column) ?? "1fr"]));
+	const uncontrolledWidths = shallowRef(initialUncontrolledWidths());
+	watch(() => options.columns().map((column) => column.key).join(" "), () => {
+		uncontrolledWidths.value = initialUncontrolledWidths();
+	});
+	/** The declared width of every column, with the uncontrolled ones taken from state. */
+	const combinedWidths = () => new Map(options.columns().map((column) => [column.key, uncontrolledWidths.value.get(column.key) ?? column.width ?? "1fr"]));
+	const layout = computed(() => {
+		const columns = options.columns();
+		const tableWidth = toValue(options.tableWidth);
+		const widths = buildColumnWidths(tableWidth, columns, combinedWidths(), {
+			getDefaultMinWidth,
+			getDefaultWidth
+		});
+		const minWidths = /* @__PURE__ */ new Map();
+		const maxWidths = /* @__PURE__ */ new Map();
+		for (const column of columns) {
+			minWidths.set(column.key, getMinWidth(column.minWidth ?? getDefaultMinWidth(column), tableWidth));
+			maxWidths.set(column.key, getMaxWidth(column.maxWidth, tableWidth));
+		}
+		return {
+			maxWidths,
+			minWidths,
+			widths
+		};
+	});
+	const getColumnWidth = (key) => layout.value.widths.get(key) ?? 0;
+	const getColumnMinWidth = (key) => layout.value.minWidths.get(key) ?? 0;
+	const getColumnMaxWidth = (key) => layout.value.maxWidths.get(key) ?? 0;
+	const updateResizedColumns = (key, width) => {
+		const previous = layout.value.widths;
+		const declared = combinedWidths();
+		const clamped = Math.max(getColumnMinWidth(key), Math.min(getColumnMaxWidth(key), Math.floor(width)));
+		const next = /* @__PURE__ */ new Map();
+		let freeze = true;
+		for (const column of options.columns()) if (column.key === key) {
+			next.set(column.key, clamped);
+			freeze = false;
+		} else if (freeze) next.set(column.key, previous.get(column.key) ?? 0);
+		else next.set(column.key, column.width ?? declared.get(column.key) ?? "1fr");
+		const committed = /* @__PURE__ */ new Map();
+		for (const column of uncontrolledColumns()) committed.set(column.key, next.get(column.key) ?? "1fr");
+		committed.set(key, clamped);
+		uncontrolledWidths.value = committed;
+		return next;
+	};
+	return {
+		columnWidths: computed(() => layout.value.widths),
+		endResize: () => {
+			resizingColumn.value = null;
+		},
+		getColumnMaxWidth,
+		getColumnMinWidth,
+		getColumnWidth,
+		resizingColumn: computed(() => resizingColumn.value),
+		startResize: (key) => {
+			resizingColumn.value = key;
+		},
+		updateResizedColumns
+	};
+};
+//#endregion
+export { buildColumnWidths, calculateColumnSizes, getMaxWidth, getMinWidth, isStaticWidth, parseFractionalUnit, parseStaticWidth, useTableColumnLayout };

package/dist/composables/use-text-field.d.ts

@@ -0,0 +1,152 @@
+import type { FieldIdsContext } from "./use-field-ids";
+import type { FormValidationState, ValidationBehavior, ValidationFunction } from "./use-form-validation-state";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/** The two elements a text field can render its control as. */
+export type TextFieldElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * Listeners the control wires one by one with `@event`.
+ *
+ * Kept apart from the attributes on purpose. Vapor re-applies every `on*` key arriving
+ * through `v-bind` on each render and drops the previous listener as the render effect
+ * cleans up — which loses a handler mid-dispatch on exactly the element that re-renders in
+ * response to the events it is listening for.
+ */
+export interface TextFieldHandlers {
+    onInput: (event: Event) => void;
+    onFocus: (event: FocusEvent) => void;
+    onBlur: (event: FocusEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    onKeyup: (event: KeyboardEvent) => void;
+}
+/**
+ * What a field root hands down to whichever control renders inside it.
+ *
+ * Lives with the composable rather than with a component, because both `TextField` and
+ * `SearchField` provide it and `Input`, `TextArea` and `InputGroup` all consume it — routing
+ * that through a component directory would make those depend on each other.
+ *
+ * Loose: a bare `<Input>` outside any field is legal, exactly as it is in React.
+ */
+export interface TextFieldControlContext {
+    /** Spread with `v-bind`. Never carries an `on*` key. */
+    attrs: ComputedRef<Record<string, unknown>>;
+    /** Wire with `@event`, never with `v-bind`. */
+    handlers: TextFieldHandlers;
+    /** The control reports its element, which the browser wiring hangs off. */
+    registerElement: (element: TextFieldElement | null) => void;
+    /**
+     * Declared by a control that supplies its own `value`, which makes the caller the owner of it.
+     * The field then stops writing the element at all — the live text *and* the reset source — because
+     * two owners of one value fight over it, and the control's prop is the one that wins by design.
+     */
+    setValueOwned: (owned: boolean) => void;
+    isDisabled: ComputedRef<boolean>;
+    isInvalid: ComputedRef<boolean>;
+    isReadOnly: ComputedRef<boolean>;
+    isRequired: ComputedRef<boolean>;
+}
+export declare const useTextFieldControlContext: () => TextFieldControlContext | null, provideTextFieldControlContext: (value: TextFieldControlContext | null) => TextFieldControlContext | null;
+export interface UseTextFieldOptions {
+    /** Controlled value. Present at all puts the caller in charge of it. */
+    value?: MaybeRefOrGetter<string | undefined>;
+    /** Value the field starts with, and goes back to when the form is reset. */
+    defaultValue?: MaybeRefOrGetter<string | undefined>;
+    onChange?: (value: string) => void;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    isReadOnly?: MaybeRefOrGetter<boolean | undefined>;
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Controlled validity. Present at all — `true` *or* `false` — pins the field and shadows
+     * `validate`, server errors and the browser alike.
+     */
+    isInvalid?: MaybeRefOrGetter<boolean | undefined>;
+    validate?: MaybeRefOrGetter<ValidationFunction<string> | undefined>;
+    validationBehavior?: MaybeRefOrGetter<ValidationBehavior | undefined>;
+    /**
+     * Validation built elsewhere, for a field whose value is not really a string. A number
+     * field validates the number it parsed, so letting this composable start a second state
+     * over the text would give the same field two verdicts that disagree.
+     */
+    validationState?: FormValidationState;
+    /**
+     * Whether leaving the field reveals its errors. Off for a text field, matching react-aria:
+     * `useFormValidation` there commits on `invalid` and `change` only.
+     * @default false
+     */
+    commitOnBlur?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Skip restoring the value on a form reset, for a field that runs its own restore over a
+     * value this composable cannot represent.
+     */
+    skipFormReset?: boolean;
+    /** Lands on the control, which is the text field as far as assistive technology is concerned. */
+    id?: MaybeRefOrGetter<string | undefined>;
+    name?: MaybeRefOrGetter<string | undefined>;
+    form?: MaybeRefOrGetter<string | undefined>;
+    /** Ignored once a `<textarea>` registers, which has no `type`. @default "text" */
+    type?: MaybeRefOrGetter<string | undefined>;
+    /** Ignored once a `<textarea>` registers. */
+    pattern?: MaybeRefOrGetter<string | undefined>;
+    placeholder?: MaybeRefOrGetter<string | undefined>;
+    autoComplete?: MaybeRefOrGetter<string | undefined>;
+    autoCapitalize?: MaybeRefOrGetter<string | undefined>;
+    autoCorrect?: MaybeRefOrGetter<string | undefined>;
+    spellCheck?: MaybeRefOrGetter<string | boolean | undefined>;
+    inputMode?: MaybeRefOrGetter<string | undefined>;
+    enterKeyHint?: MaybeRefOrGetter<string | undefined>;
+    maxLength?: MaybeRefOrGetter<number | undefined>;
+    minLength?: MaybeRefOrGetter<number | undefined>;
+    autoFocus?: MaybeRefOrGetter<boolean | undefined>;
+    /** Overrides the `role` the control would otherwise carry. `null` removes it. */
+    role?: MaybeRefOrGetter<string | null | undefined>;
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
+    ariaDescribedby?: MaybeRefOrGetter<string | undefined>;
+    ariaErrormessage?: MaybeRefOrGetter<string | undefined>;
+    ariaActivedescendant?: MaybeRefOrGetter<string | undefined>;
+    ariaAutocomplete?: MaybeRefOrGetter<string | undefined>;
+    ariaHaspopup?: MaybeRefOrGetter<string | boolean | undefined>;
+    ariaControls?: MaybeRefOrGetter<string | undefined>;
+    /** Whether what this control controls is showing. For a control that is itself a combobox. */
+    ariaExpanded?: MaybeRefOrGetter<boolean | undefined>;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeydown?: (event: KeyboardEvent) => void;
+    onKeyup?: (event: KeyboardEvent) => void;
+}
+export interface UseTextFieldReturn extends TextFieldControlContext {
+    /** Pass to `provideFieldIdsContext`. */
+    fieldIds: FieldIdsContext;
+    labelId: ComputedRef<string | undefined>;
+    describedBy: ComputedRef<string | undefined>;
+    /** Id the control renders, which the label points `for` at. */
+    inputId: ComputedRef<string>;
+    value: ComputedRef<string>;
+    setValue: (value: string) => void;
+    /** Pass to `provideFieldErrorContext`. */
+    validation: FormValidationState;
+    /** The control, once it has registered. */
+    element: ComputedRef<TextFieldElement | null>;
+    /**
+     * Put the control's text back to what the field holds. Public because a field that layers
+     * its own input handling on top has to re-assert after it commits.
+     */
+    reassert: () => void;
+}
+/**
+ * Behaviour and accessibility for a text field, ported from React Aria's
+ * `packages/react-aria/src/textfield/useTextField.ts` (react-aria 3.51.0), which composes
+ * `useField` → `useLabel` on top of `useFormValidationState` and `useFormValidation`.
+ *
+ * The label wiring goes both ways, as it does there: the control points `aria-labelledby`
+ * back at the label so assistive technology reads a name, and the label points `for` at the
+ * control so a pointer click moves focus into it.
+ *
+ * @example
+ * ```ts
+ * const field = useTextField({value: () => props.value, onChange: (v) => emit("change", v)});
+ *
+ * provideFieldIdsContext(field.fieldIds);
+ * provideTextFieldControlContext(field);
+ * ```
+ */
+export declare const useTextField: (options?: UseTextFieldOptions) => UseTextFieldReturn;

package/dist/composables/use-text-field.js

@@ -0,0 +1,185 @@
+import { createContext } from "../utils/create-context.js";
+import { useId as useId$1 } from "./use-id.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { useFieldIds } from "./use-field-ids.js";
+import { useFormValidationState } from "./use-form-validation-state.js";
+import { useFormReset } from "./use-form-reset.js";
+import { useFormValidation } from "./use-form-validation.js";
+import { setFormValue } from "../utils/form-value.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-text-field.ts
+var [useTextFieldControlContext, provideTextFieldControlContext] = createContext({
+	defaultValue: null,
+	name: "TextFieldControlContext",
+	strict: false
+});
+/**
+* Behaviour and accessibility for a text field, ported from React Aria's
+* `packages/react-aria/src/textfield/useTextField.ts` (react-aria 3.51.0), which composes
+* `useField` → `useLabel` on top of `useFormValidationState` and `useFormValidation`.
+*
+* The label wiring goes both ways, as it does there: the control points `aria-labelledby`
+* back at the label so assistive technology reads a name, and the label points `for` at the
+* control so a pointer click moves focus into it.
+*
+* @example
+* ```ts
+* const field = useTextField({value: () => props.value, onChange: (v) => emit("change", v)});
+*
+* provideFieldIdsContext(field.fieldIds);
+* provideTextFieldControlContext(field);
+* ```
+*/
+var useTextField = (options = {}) => {
+	const element = shallowRef(null);
+	const registerElement = (next) => {
+		element.value = next;
+	};
+	const isTextArea = computed(() => element.value instanceof HTMLTextAreaElement);
+	const { setState, state: value } = useControllableState({
+		defaultValue: toValue(options.defaultValue) ?? "",
+		onValueChange: options.onChange,
+		value: () => toValue(options.value)
+	});
+	const inputId = useId$1(() => toValue(options.id));
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)));
+	const isReadOnly = computed(() => Boolean(toValue(options.isReadOnly)));
+	const isRequired = computed(() => Boolean(toValue(options.isRequired)));
+	const validation = options.validationState ?? useFormValidationState({
+		isInvalid: () => toValue(options.isInvalid),
+		name: () => toValue(options.name),
+		validate: () => toValue(options.validate),
+		validationBehavior: () => toValue(options.validationBehavior),
+		value: () => value.value
+	});
+	const isInvalid = computed(() => validation.displayValidation.value.isInvalid);
+	const { context: fieldIds, describedBy, labelId } = useFieldIds({
+		labelFor: inputId,
+		slots: [
+			"label",
+			"description",
+			"errorMessage"
+		]
+	});
+	/** Whether a control has taken the value over, in which case the field writes nothing. */
+	const isValueOwned = shallowRef(false);
+	const setValueOwned = (owned) => {
+		isValueOwned.value = owned;
+	};
+	/**
+	* Vapor skips writing `value` when the bound value has not changed, and the browser has
+	* already moved the text by then. So a controlled field whose owner declines the change
+	* would keep the rejected text on screen, with nothing left to re-render and put it back.
+	*
+	* This also keeps the control's *reset source* in step — the half a binding never writes, and
+	* the half a form reset restores from. See {@link setFormValue}.
+	*/
+	const reassert = () => {
+		if (isValueOwned.value) return;
+		setFormValue(element.value, value.value);
+	};
+	watch([
+		element,
+		value,
+		isValueOwned
+	], reassert, {
+		flush: "post",
+		immediate: true
+	});
+	const setValue = (next) => {
+		setState(next);
+		reassert();
+	};
+	const initialValue = value.value;
+	if (!options.skipFormReset) useFormReset(element, () => toValue(options.defaultValue) ?? initialValue, setState);
+	useFormValidation(element, validation, { commitOnBlur: () => toValue(options.commitOnBlur) });
+	watch(element, (control, previous) => {
+		if (control && !previous && toValue(options.autoFocus)) control.focus();
+	}, { flush: "post" });
+	const isNativeBehavior = computed(() => validation.validationBehavior.value === "native");
+	const resolvedLabelledby = computed(() => {
+		const ariaLabel = toValue(options.ariaLabel);
+		const own = [labelId.value, toValue(options.ariaLabelledby)].filter(Boolean).join(" ");
+		if (!own) return void 0;
+		return ariaLabel ? [inputId.value, own].join(" ") : own;
+	});
+	const resolvedDescribedby = computed(() => {
+		const ids = [describedBy.value, toValue(options.ariaDescribedby)].filter(Boolean);
+		return ids.length > 0 ? ids.join(" ") : void 0;
+	});
+	return {
+		attrs: computed(() => {
+			const role = toValue(options.role);
+			const all = {
+				"aria-activedescendant": toValue(options.ariaActivedescendant),
+				"aria-autocomplete": toValue(options.ariaAutocomplete),
+				"aria-controls": toValue(options.ariaControls),
+				"aria-describedby": resolvedDescribedby.value,
+				"aria-errormessage": toValue(options.ariaErrormessage),
+				"aria-expanded": toValue(options.ariaExpanded),
+				"aria-haspopup": toValue(options.ariaHaspopup),
+				"aria-invalid": isInvalid.value || void 0,
+				"aria-label": toValue(options.ariaLabel),
+				"aria-labelledby": resolvedLabelledby.value,
+				"aria-required": isRequired.value && !isNativeBehavior.value || void 0,
+				autocapitalize: toValue(options.autoCapitalize),
+				autocomplete: toValue(options.autoComplete),
+				autocorrect: toValue(options.autoCorrect),
+				disabled: isDisabled.value || void 0,
+				enterkeyhint: toValue(options.enterKeyHint),
+				form: toValue(options.form),
+				id: inputId.value,
+				inputmode: toValue(options.inputMode),
+				maxlength: toValue(options.maxLength),
+				minlength: toValue(options.minLength),
+				name: toValue(options.name),
+				pattern: isTextArea.value ? void 0 : toValue(options.pattern),
+				placeholder: toValue(options.placeholder),
+				readonly: isReadOnly.value || void 0,
+				required: isRequired.value && isNativeBehavior.value || void 0,
+				role: role === null ? void 0 : role,
+				spellcheck: toValue(options.spellCheck),
+				tabindex: isDisabled.value ? void 0 : 0,
+				type: isTextArea.value ? void 0 : toValue(options.type) ?? "text",
+				value: value.value
+			};
+			for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
+			return all;
+		}),
+		describedBy,
+		element: computed(() => element.value),
+		fieldIds,
+		handlers: {
+			onBlur: () => {
+				options.onFocusChange?.(false);
+			},
+			onFocus: () => {
+				options.onFocusChange?.(true);
+			},
+			onInput: (event) => {
+				const target = event.target;
+				if (target) setValue(target.value);
+			},
+			onKeydown: (event) => {
+				options.onKeydown?.(event);
+			},
+			onKeyup: (event) => {
+				options.onKeyup?.(event);
+			}
+		},
+		inputId,
+		isDisabled,
+		isInvalid,
+		isReadOnly,
+		isRequired,
+		labelId,
+		reassert,
+		registerElement,
+		setValue,
+		setValueOwned,
+		validation,
+		value: computed(() => value.value)
+	};
+};
+//#endregion
+export { provideTextFieldControlContext, useTextField, useTextFieldControlContext };