@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/inputs/DurationInput.d.ts

@@ -0,0 +1,101 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Canonical rungs; DurationInput supports all five (the Input rung table). */
+export declare enum DurationInputSize {
+    /** 20px field, caption text. */
+    X_SMALL = "X_SMALL",
+    /** 24px field, body_sm text. */
+    SMALL = "SMALL",
+    /** 32px field, body_md text. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px field, body_lg text. */
+    LARGE = "LARGE",
+    /** 40px field, body_lg text. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of the field (Constitution V-A surface set; the InputVariant members). */
+export declare enum DurationInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+export interface DurationInputProps extends AriaAttributes {
+    /** Controlled duration in milliseconds. `null` is an empty field. Pass it with `onChange`. */
+    value?: number | null;
+    /**
+     * Initial duration while uncontrolled.
+     * @default null
+     */
+    defaultValue?: number | null;
+    /** Called when an edit is committed (focus leaves the field, Enter, or an arrow step), with whole seconds in milliseconds, clamped to `min` / `max`, and only if it changed. `null` when every segment is empty. */
+    onChange?: (value: number | null) => void;
+    /**
+     * Shortest allowed duration, in milliseconds. Commits and steps clamp to it. Never below `0`.
+     * @default 0
+     */
+    min?: number;
+    /** Longest allowed duration, in milliseconds. Commits and steps clamp to it. */
+    max?: number;
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall.
+     * @default DurationInputSize.MEDIUM
+     */
+    size?: DurationInputSize;
+    /**
+     * Resting fill, from the surface set. Ignored with `isGhost`.
+     * @default DurationInputVariant.PRIMARY
+     */
+    variant?: DurationInputVariant;
+    /**
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover and focus (1.x
+     * `TRANSPARENT`). For durations set into a toolbar or a table cell.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    label?: string;
+    /** Message from the app, shown under the field through `Field`. Also turns the border red and sets `aria-invalid` on each segment. */
+    error?: string;
+    /**
+     * Error border and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * No segment is focusable or editable. Shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Segments are focusable and selectable but cannot change; no stepping.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required` on each segment. No validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Stretch the frame to the parent's width; the segments stay at the start.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name of the group when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /** DOM id of the hours segment, so a `Field` label focuses it. A wrapping `Field`'s id wins. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the group element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when DurationInput renders one, otherwise the frame. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A length of time in hours, minutes and seconds; the value is milliseconds. */
+declare const DurationInput: import("react").ForwardRefExoticComponent<DurationInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DurationInput;

package/dist/inputs/DurationInput.js

@@ -0,0 +1,441 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { forwardRef, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+//#region src/inputs/DurationInput.tsx
+/**
+* The form control for a length of time (a timeout, a retention window, a sync interval): one
+* field with three numeric segments, hours, minutes and seconds, each followed by its unit
+* ("1 h 30 m 0 s"), like a native time field. Each segment is a `spinbutton`: type into it, or
+* step it with the arrow keys (stepping past 59 carries into the next unit).
+*
+* The value is a number of milliseconds (`number | null`), reported when the edit is committed
+* (focus leaves the field, Enter, or a step) and normalized (`90 m` becomes `1 h 30 m`), clamped
+* to `min` / `max`. DurationInput never validates (`error` comes from the app) and shows neither
+* days nor milliseconds. New in 2.0 (1.x apps used a `NumberInput` with a unit suffix).
+*/
+/** Canonical rungs; DurationInput supports all five (the Input rung table). */
+var DurationInputSize = /* @__PURE__ */ function(DurationInputSize) {
+	/** 20px field, caption text. */
+	DurationInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px field, body_sm text. */
+	DurationInputSize["SMALL"] = "SMALL";
+	/** 32px field, body_md text. The default. */
+	DurationInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px field, body_lg text. */
+	DurationInputSize["LARGE"] = "LARGE";
+	/** 40px field, body_lg text. */
+	DurationInputSize["X_LARGE"] = "X_LARGE";
+	return DurationInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; the InputVariant members). */
+var DurationInputVariant = /* @__PURE__ */ function(DurationInputVariant) {
+	/** `background.base` fill. */
+	DurationInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	DurationInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	DurationInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	DurationInputVariant["TERTIARY"] = "TERTIARY";
+	return DurationInputVariant;
+}({});
+/** The three units, largest first. */
+var DURATION_SEGMENTS = [
+	{
+		ms: 36e5,
+		unit: "h",
+		name: "Hours",
+		singular: "hour",
+		plural: "hours",
+		maxLength: 4
+	},
+	{
+		ms: 6e4,
+		unit: "m",
+		name: "Minutes",
+		singular: "minute",
+		plural: "minutes",
+		maxLength: 2
+	},
+	{
+		ms: 1e3,
+		unit: "s",
+		name: "Seconds",
+		singular: "second",
+		plural: "seconds",
+		maxLength: 2
+	}
+];
+var SEGMENT_INDEXES = [
+	0,
+	1,
+	2
+];
+/** Splits milliseconds into whole hours, minutes (0–59) and seconds (0–59); `null` is all empty. */
+function split(value) {
+	if (value === null || !Number.isFinite(value)) return [
+		"",
+		"",
+		""
+	];
+	const seconds = Math.floor(Math.max(0, value) / 1e3);
+	return [
+		String(Math.floor(seconds / 3600)),
+		String(Math.floor(seconds % 3600 / 60)),
+		String(seconds % 60)
+	];
+}
+/** The drafts' total in milliseconds; every segment empty is `null`. */
+function total(drafts) {
+	if (drafts.every((draft) => draft === "")) return null;
+	return drafts.reduce((sum, draft, index) => sum + (draft === "" ? 0 : Number(draft)) * DURATION_SEGMENTS[index].ms, 0);
+}
+/** True when two draft sets show the same thing. */
+function isSameDrafts(a, b) {
+	return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
+}
+/** The visual box. Focus is drawn here as `FIELD_FOCUS` (`border.focused` at 1px inside) while a segment has focus. */
+var Frame = /*#__PURE__*/ styled("div")({
+	name: "Frame",
+	class: "gx-DurationInput-Frame-f8uo2tx",
+	propsAsIs: false
+});
+/** One number and its unit, 2px apart. */
+var Segment = /*#__PURE__*/ styled("span")({
+	name: "Segment",
+	class: "gx-DurationInput-Segment-s1o0yt82",
+	propsAsIs: false
+});
+/** The unit letter; not selectable. */
+var Unit = /*#__PURE__*/ styled("span")({
+	name: "Unit",
+	class: "gx-DurationInput-Unit-ud4u3t1",
+	propsAsIs: false
+});
+/** A segment's `<input>`: no chrome of its own; as wide as its digits (at least two). */
+var SegmentInput = /*#__PURE__*/ styled("input")({
+	name: "SegmentInput",
+	class: "gx-DurationInput-SegmentInput-s1bd1xmt",
+	propsAsIs: false
+});
+/** Rest look per variant: fill and hairline color. */
+var DURATION_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-DurationInput-BASE-buxhc7z",
+	["PRIMARY"]: "gx-DurationInput-PRIMARY-pstsbv2",
+	["SECONDARY"]: "gx-DurationInput-SECONDARY-s1b09kps",
+	["TERTIARY"]: "gx-DurationInput-TERTIARY-tmzngkt"
+};
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-DurationInput-GHOST_CSS-guqgngu";
+/**
+* Hover on an editable field: `border.hovered` (stronger than `border.primary` in both themes,
+* Constitution III.6).
+*/
+var DURATION_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-DurationInput-BASE-b1myver4",
+	["PRIMARY"]: "gx-DurationInput-PRIMARY-p1rczld6",
+	["SECONDARY"]: "gx-DurationInput-SECONDARY-s89p30c",
+	["TERTIARY"]: "gx-DurationInput-TERTIARY-tztmk6y"
+};
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-DurationInput-GHOST_HOVER_CSS-g62uime";
+/** Height, horizontal padding and the gap between segments per rung (Constitution III-A.4). */
+var DURATION_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-DurationInput-X_SMALL-x6ryfhj",
+	["SMALL"]: "gx-DurationInput-SMALL-s1o5x9ig",
+	["MEDIUM"]: "gx-DurationInput-MEDIUM-m7cvvc6",
+	["LARGE"]: "gx-DurationInput-LARGE-lsbk442",
+	["X_LARGE"]: "gx-DurationInput-X_LARGE-xe3nwhm"
+};
+/** The segment's type at the rung's text step; its height is the line height (whole pixels). */
+var DURATION_INPUT_SIZE_TO_FONT_CSS_MAP = {
+	["X_SMALL"]: "gx-DurationInput-X_SMALL-xdfukzq",
+	["SMALL"]: "gx-DurationInput-SMALL-s1yweir4",
+	["MEDIUM"]: "gx-DurationInput-MEDIUM-ma156iy",
+	["LARGE"]: "gx-DurationInput-LARGE-l53elg5",
+	["X_LARGE"]: "gx-DurationInput-X_LARGE-x1atqgs0"
+};
+/** The unit's text step: the rung's control text. */
+var DURATION_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** The `Field` a DurationInput renders for its own `label` / `error` uses the same rung. */
+var DURATION_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** Error border at rest, on hover and with focus (the 1px inset focus line is red too). */
+var ERROR_CSS = "gx-DurationInput-ERROR_CSS-e6b5wkm";
+/**
+* Disabled: the variant's resting fill and hairline are kept (`border.disabled` is not used on
+* frames); the field reads as disabled through `text.disabled` and the cursor.
+*/
+var DISABLED_CSS = "gx-DurationInput-DISABLED_CSS-d1j9h77i";
+/** Stretch to the parent's width (frame, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-DurationInput-FILL_WIDTH_CSS-f4chal5";
+/** The frame and its three segments, wired to the nearest Field (the input's own or the app's). */
+function DurationFrame({ durationProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = null, onChange, min = 0, max, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = durationProps;
+	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const segmentIds = [
+		controlId,
+		`${controlId}-minutes`,
+		`${controlId}-seconds`
+	];
+	const frameRef = useRef(null);
+	const mergedRef = useMergeRefs([frameRef, forwardedRef]);
+	const inputRefs = useRef([
+		null,
+		null,
+		null
+	]);
+	const segmentRefs = useRef([
+		null,
+		null,
+		null
+	]);
+	const [current, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const [drafts, setDrafts] = useState(() => split(current));
+	const hasFocusRef = useRef(false);
+	const [lastValue, setLastValue] = useState(current);
+	if (lastValue !== current) {
+		setLastValue(current);
+		if (!(hasFocusRef.current && !isSameDrafts(drafts, split(lastValue)))) setDrafts(split(current));
+	}
+	const isEditable = !isDisabled && !isReadOnly;
+	const lowest = Math.max(min, 0);
+	const clamp = (ms) => {
+		const raised = Math.max(ms, lowest);
+		return max === void 0 ? raised : Math.min(raised, Math.max(max, lowest));
+	};
+	/** Reports `next` (clamped) if it changed and shows it normalized. */
+	const commitTotal = (next) => {
+		const committed = next === null ? null : clamp(next);
+		if (committed !== current) setValue(committed);
+		setDrafts(split(committed));
+	};
+	/** Commits the drafts when they differ from the value (an untouched value is never rewritten). */
+	const commit = () => {
+		if (!isEditable || isSameDrafts(drafts, split(current))) return;
+		commitTotal(total(drafts));
+	};
+	const focusSegment = (index) => {
+		const input = inputRefs.current[index];
+		if (input === null || input === void 0) return;
+		input.focus();
+	};
+	const step = (index, direction, times) => {
+		if (!isEditable) return;
+		commitTotal((total(drafts) ?? 0) + direction * times * DURATION_SEGMENTS[index].ms);
+	};
+	const handleChange = (index) => (event) => {
+		if (!isEditable) return;
+		const digits = event.target.value.replace(/\D/g, "").slice(0, DURATION_SEGMENTS[index].maxLength);
+		const next = [...drafts];
+		next[index] = digits;
+		setDrafts(next);
+		const native = event.nativeEvent;
+		if (index === 1 && digits.length === 2 && native.inputType?.startsWith("insert")) focusSegment(2);
+	};
+	const handleKeyDown = (index) => (event) => {
+		if (event.nativeEvent.isComposing) return;
+		const input = event.currentTarget;
+		const { key } = event;
+		const caretStart = input.selectionStart ?? 0;
+		const caretEnd = input.selectionEnd ?? 0;
+		switch (key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				step(index, key === "ArrowUp" ? 1 : -1, 1);
+				return;
+			case "PageUp":
+			case "PageDown":
+				event.preventDefault();
+				step(index, key === "PageUp" ? 1 : -1, 10);
+				return;
+			case "ArrowRight":
+				if (index < 2 && caretStart === caretEnd && caretEnd === input.value.length) {
+					event.preventDefault();
+					focusSegment(index + 1);
+				}
+				return;
+			case "ArrowLeft":
+				if (index > 0 && caretStart === caretEnd && caretStart === 0) {
+					event.preventDefault();
+					focusSegment(index - 1);
+				}
+				return;
+			case "Backspace":
+				if (index > 0 && input.value === "") {
+					event.preventDefault();
+					focusSegment(index - 1);
+				}
+				return;
+			case "Enter":
+				commit();
+				return;
+			default: break;
+		}
+		if ((key === ":" || key === " " || DURATION_SEGMENTS.some((segment) => segment.unit === key.toLowerCase())) && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			event.preventDefault();
+			if (index < 2) focusSegment(index + 1);
+		}
+	};
+	const handleFocus = (event) => {
+		hasFocusRef.current = true;
+		event.currentTarget.select();
+	};
+	/** Focus leaving the frame commits the edit. */
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (next !== null && frameRef.current?.contains(next)) return;
+		hasFocusRef.current = false;
+		commit();
+	};
+	/** A press on a unit focuses its segment; elsewhere in the frame, the nearest segment. */
+	const handleFrameMouseDown = (event) => {
+		const target = event.target;
+		if (inputRefs.current.some((input) => input !== null && input === target)) return;
+		if (isDisabled) return;
+		event.preventDefault();
+		const owner = segmentRefs.current.findIndex((segment) => segment?.contains(target) === true);
+		if (owner !== -1) {
+			focusSegment(owner);
+			return;
+		}
+		let nearest = 2;
+		let distance = Number.POSITIVE_INFINITY;
+		inputRefs.current.forEach((input, index) => {
+			if (input === null) return;
+			const box = input.getBoundingClientRect();
+			const delta = event.clientX < box.left ? box.left - event.clientX : event.clientX > box.right ? event.clientX - box.right : 0;
+			if (delta < distance) {
+				distance = delta;
+				nearest = index;
+			}
+		});
+		focusSegment(nearest);
+	};
+	useDevWarning(!hasName, "[@galaxy-io/dls] DurationInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const maxHours = max === void 0 ? void 0 : Math.floor(Math.max(max, lowest) / 36e5);
+	const textSize = DURATION_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	return /* @__PURE__ */ jsx(Frame, {
+		ref: mergedRef,
+		role: "group",
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		onMouseDown: handleFrameMouseDown,
+		onBlur: handleBlur,
+		...rest,
+		className: cx(isGhost ? GHOST_CSS : DURATION_INPUT_VARIANT_TO_CSS_MAP[variant], DURATION_INPUT_SIZE_TO_CSS_MAP[size], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : DURATION_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: SEGMENT_INDEXES.map((index) => {
+			const segment = DURATION_SEGMENTS[index];
+			const draft = drafts[index];
+			const number = draft === "" ? void 0 : Number(draft);
+			return /* @__PURE__ */ jsxs(Segment, {
+				ref: (element) => {
+					segmentRefs.current[index] = element;
+				},
+				children: [/* @__PURE__ */ jsx(SegmentInput, {
+					ref: (element) => {
+						inputRefs.current[index] = element;
+					},
+					id: segmentIds[index],
+					type: "text",
+					role: "spinbutton",
+					inputMode: "numeric",
+					autoComplete: "off",
+					autoCorrect: "off",
+					spellCheck: false,
+					maxLength: segment.maxLength,
+					placeholder: "0",
+					value: draft,
+					disabled: isDisabled,
+					readOnly: isReadOnly,
+					"aria-label": segment.name,
+					"aria-valuenow": number,
+					"aria-valuetext": number === void 0 ? void 0 : `${number} ${number === 1 ? segment.singular : segment.plural}`,
+					"aria-valuemin": 0,
+					"aria-valuemax": index === 0 ? maxHours : 59,
+					"aria-invalid": isInvalid ? true : void 0,
+					"aria-required": isRequiredState ? true : void 0,
+					onChange: handleChange(index),
+					onKeyDown: handleKeyDown(index),
+					onFocus: handleFocus,
+					className: DURATION_INPUT_SIZE_TO_FONT_CSS_MAP[size],
+					style: { "--gx-duration-input-chars": Math.max(2, draft.length) }
+				}), /* @__PURE__ */ jsx(Unit, { children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: textSize,
+					variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+					"aria-hidden": true,
+					children: segment.unit
+				}) })]
+			}, segment.unit);
+		})
+	});
+}
+/** A length of time in hours, minutes and seconds; the value is milliseconds. */
+var DurationInput = forwardRef(function DurationInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "DurationInput",
+		label,
+		error,
+		isRequired,
+		size: DURATION_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(DurationFrame, {
+			durationProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(DurationFrame, {
+		durationProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+DurationInput.displayName = "DurationInput";
+//#endregion
+export { DurationInputSize, DurationInputVariant, DurationInput as default };

package/dist/inputs/Field.d.ts

@@ -0,0 +1,75 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import { Orientation } from "../theme/enums.js";
+/** Rung of the control the Field frames (Constitution III-A.4). Use the control's own size. */
+export declare enum FieldSize {
+    /** 20px control: caption label, caption help. */
+    X_SMALL = "X_SMALL",
+    /** 24px control: body_sm label, caption help. */
+    SMALL = "SMALL",
+    /** 32px control: body_md label, body_sm help. The default; matches 1.x. */
+    MEDIUM = "MEDIUM",
+    /** 36px control: body_lg label, body_sm help. */
+    LARGE = "LARGE",
+    /** 40px control: body_lg label, body_md help. */
+    X_LARGE = "X_LARGE"
+}
+export interface FieldProps extends AriaAttributes {
+    /** The control. A DLS input, or any control wired with `useField()` or the Field's `id`. */
+    children?: ReactNode;
+    /** Visible name of the control. Omit only when the control renders its own label. */
+    label?: string;
+    /** Help copy under the label. Text and inline `Link`s only. */
+    description?: ReactNode;
+    /** Message under the control. Also marks the control invalid (`aria-invalid`, error border). */
+    error?: string;
+    /**
+     * Shows the red asterisk and marks the control `aria-required`.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Shows "(optional)" after the label. Ignored when `isRequired`.
+     * @default false
+     */
+    isOptional?: boolean;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip`. */
+    labelTooltip?: string | ReactNode;
+    /** Right end of the label row: a `Link` ("Forgot password?") or a small `Button`. */
+    actions?: ReactNode;
+    /** Shows a `count / maxLength` counter under the control. Display only; Field never blocks input. */
+    maxLength?: number;
+    /**
+     * Current length for the counter. Read only when `maxLength` is set.
+     * @default 0
+     */
+    count?: number;
+    /**
+     * `VERTICAL` stacks label over control; `HORIZONTAL` puts the label in a left column.
+     * @default Orientation.VERTICAL
+     */
+    orientation?: Orientation;
+    /**
+     * The control's rung. Sets the label and help type steps and aligns a horizontal label with the control.
+     * @default FieldSize.MEDIUM
+     */
+    size?: FieldSize;
+    /**
+     * Stretch to the parent's width.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * The control's id. The label's `htmlFor` points here; all other part ids derive from it.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Label, description, error and counter around one control, wired to it for assistive tech. */
+declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Field;