@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/NumberInput.d.ts

@@ -1,10 +1,66 @@
-import { type InputProps } from "./Input";
-/** Every `InputProps` field except `type` and `parse`, which are fixed to number. */
-export type NumberInputProps = Omit<InputProps<number>, "type" | "parse">;
-/**
- * A numeric field. `min`/`max` are a real numeric range here (unlike `TextInput`,
- * where they bound character count) and values outside it are clamped, not
- * rejected — `onChange` only ever sees an in-range number.
- */
-declare const NumberInput: ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isError, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace, }: NumberInputProps) => import("react").JSX.Element;
+import { type InputProps } from "./Input.js";
+/** Every `Input` prop except the string value quartet and what NumberInput fixes, plus its own. */
+export type NumberInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "onEnter" | "isClearable" | "inputMode" | "maxLength" | "spellCheck"> & {
+    /** Controlled committed value. `null` is an empty field. */
+    value?: number | null;
+    /**
+     * Initial value while uncontrolled.
+     * @default null
+     */
+    defaultValue?: number | null;
+    /** Called when a value is committed (blur, Enter or a step), clamped and rounded, and only if it changed. `null` when cleared. */
+    onChange?: (value: number | null) => void;
+    /** Called after Enter commits, with the committed value. Enter still submits a surrounding form. */
+    onEnter?: (value: number | null) => void;
+    /** Lowest allowed value. Commits and steps clamp to it. */
+    min?: number;
+    /** Highest allowed value. Commits and steps clamp to it. */
+    max?: number;
+    /**
+     * Amount the arrow keys and steppers add or subtract. PageUp / PageDown use ten steps.
+     * @default 1
+     */
+    step?: number;
+    /** Maximum fraction digits; commits round to it. `0` allows integers only. Unset keeps what was typed. */
+    precision?: number;
+    /** Display text while the field is not focused, e.g. `formatNumber`. The raw number shows while editing. */
+    format?: (value: number) => string;
+    /**
+     * Shows `−` / `+` buttons at the end of the field.
+     * @default false
+     */
+    hasSteppers?: boolean;
+};
+/** A single-line number field: `Input` with `type="text"`, parsing, clamping and stepping at its edge. */
+declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "value" | "defaultValue" | "onChange" | "spellCheck" | "inputMode" | "type" | "onEnter" | "maxLength" | "isClearable"> & {
+    /** Controlled committed value. `null` is an empty field. */
+    value?: number | null;
+    /**
+     * Initial value while uncontrolled.
+     * @default null
+     */
+    defaultValue?: number | null;
+    /** Called when a value is committed (blur, Enter or a step), clamped and rounded, and only if it changed. `null` when cleared. */
+    onChange?: (value: number | null) => void;
+    /** Called after Enter commits, with the committed value. Enter still submits a surrounding form. */
+    onEnter?: (value: number | null) => void;
+    /** Lowest allowed value. Commits and steps clamp to it. */
+    min?: number;
+    /** Highest allowed value. Commits and steps clamp to it. */
+    max?: number;
+    /**
+     * Amount the arrow keys and steppers add or subtract. PageUp / PageDown use ten steps.
+     * @default 1
+     */
+    step?: number;
+    /** Maximum fraction digits; commits round to it. `0` allows integers only. Unset keeps what was typed. */
+    precision?: number;
+    /** Display text while the field is not focused, e.g. `formatNumber`. The raw number shows while editing. */
+    format?: (value: number) => string;
+    /**
+     * Shows `−` / `+` buttons at the end of the field.
+     * @default false
+     */
+    hasSteppers?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -1,49 +1,206 @@
-import Input from "./Input.js";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Button, { ButtonVariant } from "../buttons/Button.js";
+import "./internal/innerButton.js";
+import Input, { INPUT_SIZE_TO_BUTTON_SIZE_MAP, InputSize } from "./Input.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { MinusIcon, PlusIcon } from "@phosphor-icons/react";
 //#region src/inputs/NumberInput.tsx
 /**
-* A numeric field. `min`/`max` are a real numeric range here (unlike `TextInput`,
-* where they bound character count) and values outside it are clamped, not
-* rejected — `onChange` only ever sees an in-range number.
+* A single-line field for one number. The user types it, or steps it with the arrow keys
+* (`ArrowUp` / `ArrowDown`, `PageUp` / `PageDown` ×10, `Home` / `End` to the bounds) or the
+* optional `−` / `+` buttons (`hasSteppers`). Its value is a `number`, or `null` when empty.
+*
+* A preset over `Input` (base): Input holds the text being typed, and NumberInput converts at its
+* edge. `onChange` fires on **commit** (blur, Enter or a step) with the value clamped to
+* `min` / `max` and rounded to `precision`, never per keystroke. While not focused the field can
+* show `format(value)` (`formatNumber`, `formatBytes`, …); the raw number shows while editing.
+* Units are Input's `suffix` / `prefix`. `InputSize` / `InputVariant` are imported from
+* `inputs/Input`. It never validates: out-of-range values are clamped, not rejected.
+*
+* Replaces 1.x `NumberInput` (`type="number"` and per-keystroke clamping are gone; `width` →
+* `fillWidth`, `isMonospace` → `family`, `labelTooltip` → wrap in `Field`).
 */
-var NumberInput = ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isError, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }) => {
-	return /* @__PURE__ */ jsx(Input, {
-		type: "number",
+/** Tabular digits, so the value keeps its width while stepping (lands on Input's root). */
+var NUMBER_INPUT_CSS = "gx-NumberInput-NUMBER_INPUT_CSS-n19kajw4";
+/** The `−` / `+` group (and any `trailing`), 2px apart. */
+var Steppers = /*#__PURE__*/ styled("span")({
+	name: "Steppers",
+	class: "gx-NumberInput-Steppers-s1qkbe08",
+	propsAsIs: false
+});
+/** Drafts that commit `null`: nothing, or a sign / point with no digits. */
+var EMPTY_DRAFTS = new Set([
+	"",
+	"-",
+	".",
+	"-."
+]);
+/** Separators removed from typed or pasted text (`1,204` → `1204`). */
+var SEPARATORS = /[\s,_]/g;
+/** The most fraction digits `toFixed` accepts. */
+var MAX_FRACTION_DIGITS = 100;
+/** Fraction digits of a finite number, exponent notation included (`1e-7` → 7). */
+function countFractionDigits(n) {
+	if (!Number.isFinite(n)) return 0;
+	const [mantissa = "", exponent] = String(n).split("e");
+	const fraction = mantissa.split(".")[1]?.length ?? 0;
+	return Math.max(0, fraction - (exponent === void 0 ? 0 : Number(exponent)));
+}
+/** Rounds to at most `digits` fraction digits. */
+function roundTo(n, digits) {
+	return Number(n.toFixed(Math.min(Math.max(digits, 0), MAX_FRACTION_DIGITS)));
+}
+/** The raw text of a committed value, shown while editing. */
+function toRawText(value) {
+	return value === null ? "" : String(value);
+}
+/** A single-line number field: `Input` with `type="text"`, parsing, clamping and stepping at its edge. */
+var NumberInput = forwardRef(function NumberInput(props, ref) {
+	const { value, defaultValue, onChange, onEnter, min, max, step = 1, precision, format, hasSteppers = false, trailing, size = InputSize.MEDIUM, isDisabled = false, isReadOnly = false, onFocus, onBlur, onKeyDown, className, style, ...rest } = props;
+	const [committed, setCommitted] = useControlledState({
 		value,
-		placeholder,
-		label,
-		labelTooltip,
-		variant,
+		defaultValue: defaultValue ?? null,
+		onChange
+	});
+	const [isFocused, setIsFocused] = useState(false);
+	/** The text being edited, or `null` when the field shows the committed value. */
+	const [draft, setDraft] = useState(null);
+	const [seenValue, setSeenValue] = useState(committed);
+	if (!Object.is(seenValue, committed)) {
+		setSeenValue(committed);
+		setDraft(null);
+	}
+	const isBlocked = isDisabled || isReadOnly;
+	const allowsNegative = min === void 0 || min < 0;
+	const allowsFraction = precision !== 0;
+	const inputMode = allowsNegative ? "text" : precision === 0 ? "numeric" : "decimal";
+	const shownText = draft ?? (committed === null ? "" : isFocused || format === void 0 ? String(committed) : format(committed));
+	const clamp = (n) => {
+		if (min !== void 0 && n < min) return min;
+		if (max !== void 0 && n > max) return max;
+		return n;
+	};
+	/** Sets the committed value if it differs from `current`, and shows it. */
+	const commitValue = (next, current = committed) => {
+		if (!Object.is(next, current)) setCommitted(next);
+		setDraft(null);
+		return next;
+	};
+	/** Parses the draft (if any), rounds and clamps it, and commits. Returns the committed value. */
+	const commit = () => {
+		if (draft === null) return committed;
+		if (EMPTY_DRAFTS.has(draft)) return commitValue(null);
+		const parsed = Number(draft);
+		if (Number.isNaN(parsed)) return commitValue(committed);
+		return commitValue(clamp(precision === void 0 ? parsed : roundTo(parsed, precision)));
+	};
+	/** Commits, then adds `amount` (or starts at `min ?? 0` from empty). */
+	const stepBy = (amount) => {
+		if (isBlocked) return;
+		const base = commit();
+		if (base === null) {
+			commitValue(clamp(min ?? 0), base);
+			return;
+		}
+		const digits = Math.max(countFractionDigits(base), countFractionDigits(step));
+		let next = roundTo(base + amount, digits);
+		if (precision !== void 0) next = roundTo(next, precision);
+		commitValue(clamp(next), base);
+	};
+	const handleDraft = (next) => {
+		const cleaned = next.replace(SEPARATORS, "");
+		if (new RegExp(`^${allowsNegative ? "-?" : ""}\\d*${allowsFraction ? "(\\.\\d*)?" : ""}$`).test(cleaned)) setDraft(cleaned);
+	};
+	const handleEnter = () => {
+		const result = commit();
+		onEnter?.(result);
+	};
+	const handleFocus = (event) => {
+		onFocus?.(event);
+		setIsFocused(true);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+		commit();
+		setIsFocused(false);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+			case "PageUp":
+			case "PageDown": {
+				if (isBlocked) return;
+				event.preventDefault();
+				const amount = event.key === "PageUp" || event.key === "PageDown" ? step * 10 : step;
+				stepBy(event.key === "ArrowUp" || event.key === "PageUp" ? amount : -amount);
+				return;
+			}
+			case "Home":
+			case "End": {
+				const bound = event.key === "Home" ? min : max;
+				if (bound === void 0 || isBlocked) return;
+				event.preventDefault();
+				commitValue(bound);
+				return;
+			}
+			case "Escape":
+				if (draft === null || draft === toRawText(committed)) return;
+				event.stopPropagation();
+				setDraft(null);
+				return;
+			default: return;
+		}
+	};
+	const showsSteppers = hasSteppers && !isReadOnly;
+	const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false;
+	const trailingNode = showsSteppers ? /* @__PURE__ */ jsxs(Steppers, { children: [
+		hasTrailing && trailing,
+		/* @__PURE__ */ jsx(Button, {
+			variant: ButtonVariant.TERTIARY,
+			size: INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+			icon: MinusIcon,
+			ariaLabel: "Decrease",
+			isDisabled: isDisabled || committed !== null && min !== void 0 && committed <= min,
+			onClick: () => stepBy(-step),
+			className: cx(size === InputSize.X_SMALL && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: ButtonVariant.TERTIARY,
+			size: INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+			icon: PlusIcon,
+			ariaLabel: "Increase",
+			isDisabled: isDisabled || committed !== null && max !== void 0 && committed >= max,
+			onClick: () => stepBy(step),
+			className: cx(size === InputSize.X_SMALL && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+		})
+	] }) : hasTrailing ? trailing : void 0;
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		...rest,
 		size,
-		leading,
-		trailing,
-		error,
-		isError,
-		isRequired,
 		isDisabled,
-		autoFocus,
-		min,
-		max,
-		step,
-		onChange: useCallback((newValue) => {
-			if (newValue === null) return min ?? void 0;
-			if (min !== void 0 && newValue < min) return min;
-			if (max !== void 0 && newValue > max) return max;
-			onChange(newValue);
-		}, [
-			min,
-			max,
-			onChange
-		]),
-		onFocus,
-		onBlur,
-		onKeyDown,
-		parse: Number,
-		width,
-		fillWidth,
-		isMonospace
+		isReadOnly,
+		type: "text",
+		inputMode,
+		spellCheck: false,
+		value: shownText,
+		onChange: handleDraft,
+		onEnter: handleEnter,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+		trailing: trailingNode,
+		className: cx(NUMBER_INPUT_CSS, className),
+		...style === void 0 ? {} : { style }
 	});
-};
+});
+NumberInput.displayName = "NumberInput";
 //#endregion
 export { NumberInput as default };

package/dist/inputs/PasswordInput.d.ts

@@ -1,13 +1,18 @@
-import { type InputProps } from "./Input";
-/**
- * Every `InputProps` field except `type` and `parse`, which are fixed. `trailing`
- * is omitted because the reveal toggle owns that slot, and `min`/`max`/`step` are
- * numeric-only.
- */
-export type PasswordInputProps = Omit<InputProps<string>, "type" | "parse" | "trailing" | "min" | "max" | "step">;
-/**
- * A masked text field with a built-in reveal toggle in the trailing slot.
- * Toggling only flips the DOM `type` — the value is never transformed.
- */
-declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+import { type InputProps } from "./Input.js";
+/** Every `Input` prop except those the password field fixes or owns, with its own `autoComplete` default. */
+export type PasswordInputProps = Omit<InputProps, "type" | "trailing" | "isClearable" | "prefix" | "suffix" | "inputMode" | "spellCheck" | "autoComplete"> & {
+    /**
+     * Password-manager hint. Use `"new-password"` on sign-up and change-password forms.
+     * @default "current-password"
+     */
+    autoComplete?: InputProps["autoComplete"];
+};
+/** A masked single-line field with a "Show password" toggle: `Input` with `type="password"`. */
+declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "spellCheck" | "prefix" | "inputMode" | "type" | "trailing" | "autoComplete" | "suffix" | "isClearable"> & {
+    /**
+     * Password-manager hint. Use `"new-password"` on sign-up and change-password forms.
+     * @default "current-password"
+     */
+    autoComplete?: InputProps["autoComplete"];
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default PasswordInput;

package/dist/inputs/PasswordInput.js

@@ -1,46 +1,46 @@
-import Input from "./Input.js";
+import Button, { ButtonVariant } from "../buttons/Button.js";
+import "./internal/innerButton.js";
+import Input, { INPUT_SIZE_TO_BUTTON_SIZE_MAP, InputSize } from "./Input.js";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 //#region src/inputs/PasswordInput.tsx
-var DEFAULT_STATE = { showPassword: false };
 /**
-* A masked text field with a built-in reveal toggle in the trailing slot.
-* Toggling only flips the DOM `type` — the value is never transformed.
+* A single-line field whose value is masked, with a reveal toggle at its end. A preset over `Input`
+* (base), like `TextInput`: it renders a real `Input` with `type="password"` (`"text"` while
+* revealed), puts the toggle in Input's `trailing` slot using Input's in-field action pattern (a
+* `TERTIARY` icon-only `Button` at the rung's in-field button size), and sets password-friendly
+* defaults (`autoComplete="current-password"`, spell-check off). Every other prop is Input's;
+* `InputSize` / `InputVariant` are imported from `inputs/Input`.
+*
+* PasswordInput holds no strength or matching rules: the app validates and passes `error`.
+* Replaces 1.x `PasswordInput` (its unnamed bare toggle is now a named `aria-pressed` Button;
+* `width` → `fillWidth`, `isMonospace` → `family`, `labelTooltip` → wrap in `Field`).
 */
-var PasswordInput = forwardRef(({ variant, size, value, placeholder, label, labelTooltip, leading, error, isError, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus, isMonospace }, ref) => {
-	const [state, setState] = useState(DEFAULT_STATE);
+/** A masked single-line field with a "Show password" toggle: `Input` with `type="password"`. */
+var PasswordInput = forwardRef(function PasswordInput(props, ref) {
+	const { autoComplete = "current-password", size = InputSize.MEDIUM, isDisabled = false, ...rest } = props;
+	const [isRevealed, setIsRevealed] = useState(false);
+	const toggle = /* @__PURE__ */ jsx(Button, {
+		variant: ButtonVariant.TERTIARY,
+		size: INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+		icon: isRevealed ? EyeSlashIcon : EyeIcon,
+		ariaLabel: "Show password",
+		"aria-pressed": isRevealed,
+		isDisabled,
+		onClick: () => setIsRevealed(!isRevealed),
+		className: cx(size === InputSize.X_SMALL && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+	});
 	return /* @__PURE__ */ jsx(Input, {
 		ref,
-		parse: String,
-		onChange,
-		variant,
+		...rest,
 		size,
-		type: state.showPassword ? "text" : "password",
-		value,
-		placeholder,
-		label,
-		labelTooltip,
-		leading,
-		trailing: {
-			icon: state.showPassword ? EyeSlashIcon : EyeIcon,
-			onClick: () => setState({
-				...state,
-				showPassword: !state.showPassword
-			}),
-			isDisabled
-		},
-		error,
-		isError,
-		isRequired,
 		isDisabled,
-		autoFocus,
-		onKeyDown,
-		onBlur,
-		onFocus,
-		width,
-		fillWidth,
-		isMonospace
+		type: isRevealed ? "text" : "password",
+		autoComplete,
+		spellCheck: false,
+		trailing: toggle
 	});
 });
 PasswordInput.displayName = "PasswordInput";

package/dist/inputs/PinInput.d.ts

@@ -0,0 +1,117 @@
+import { type AriaAttributes, type CSSProperties, type InputHTMLAttributes } from "react";
+/** Canonical rungs; PinInput exposes three (EXAMPLES §14). Boxes are squares of the rung height. */
+export declare enum PinInputSize {
+    /** 24px boxes, body_md mono characters. */
+    SMALL = "SMALL",
+    /** 32px boxes, body_lg mono characters. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px boxes, heading_sm mono characters. */
+    LARGE = "LARGE"
+}
+/** Resting fill of each box (Constitution V-A surface set; the 1.x InputVariant members). */
+export declare enum PinInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+/** Which characters a box accepts (EXAMPLES §14). */
+export declare enum PinInputType {
+    /** 0–9; the numeric keypad on mobile. The default. */
+    NUMERIC = "NUMERIC",
+    /** A–Z, a–z, 0–9, kept in the case typed; the text keyboard. */
+    ALPHANUMERIC = "ALPHANUMERIC"
+}
+/** The one native attribute PinInput passes through (kept out of the lint-checked props list). */
+interface PinInputNativeProps {
+    /**
+     * Focus the first empty box on mount.
+     * @default false
+     */
+    autoFocus?: InputHTMLAttributes<HTMLInputElement>["autoFocus"];
+}
+export interface PinInputProps extends AriaAttributes, PinInputNativeProps {
+    /**
+     * Number of boxes. Floored; values below 1 render 1.
+     * @default 6
+     */
+    length?: number;
+    /** Controlled code: the characters typed so far, from the first box, with no gaps. Pass it with `onChange`. */
+    value?: string;
+    /**
+     * Initial code while uncontrolled.
+     * @default ""
+     */
+    defaultValue?: string;
+    /** Called with the whole code (possibly partial) after every edit, paste or deletion. */
+    onChange?: (value: string) => void;
+    /** Called once, after `onChange`, each time an edit makes the code `length` characters long. */
+    onComplete?: (value: string) => void;
+    /**
+     * Which characters are accepted. Others are ignored when typed or pasted. Also sets the mobile keyboard.
+     * @default PinInputType.NUMERIC
+     */
+    type?: PinInputType;
+    /**
+     * Show dots instead of characters, for codes that should not be read over a shoulder.
+     * @default false
+     */
+    isMasked?: boolean;
+    /**
+     * Box rung: 24 / 32 / 36px squares.
+     * @default PinInputSize.MEDIUM
+     */
+    size?: PinInputSize;
+    /**
+     * Resting fill of each box, from the surface set. Ignored with `isGhost`.
+     * @default PinInputVariant.PRIMARY
+     */
+    variant?: PinInputVariant;
+    /**
+     * Ghost boxes: no fill and no hairline at rest; a box shows its frame on hover and focus (1.x
+     * `TRANSPARENT`).
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the boxes, rendered through `Field`. For a description, wrap the PinInput in `Field` instead. */
+    label?: string;
+    /** Message from the app ("Code is incorrect"), shown under the boxes through `Field`. Also turns every box's border red and sets `aria-invalid`. */
+    error?: string;
+    /**
+     * Error borders and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * No box is focusable or editable. Shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Boxes are focusable and the code is readable, but nothing can be typed, deleted or pasted.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required` on every box. No validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /** Accessible name of the group when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /** DOM id of the first box. A wrapping `Field`'s label points to it, and the other boxes derive their ids from it. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the group root. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when PinInput renders one, otherwise the group. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** One box per character, for OTP and confirmation codes. */
+declare const PinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default PinInput;