@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/inputs/SwitchInput.d.ts

@@ -0,0 +1,109 @@
+import { type AriaAttributes, type ChangeEvent, type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
+/** Canonical rungs; SwitchInput supports all five. The rung sets the row height, the track, the label step and the spinner. */
+export declare enum SwitchInputSize {
+    /** 20px row, 24×14 track, 10px thumb, caption label. */
+    X_SMALL = "X_SMALL",
+    /** 24px row, 28×16 track, 12px thumb, body_sm label (the 1.x SMALL track). */
+    SMALL = "SMALL",
+    /** 32px row, 36×20 track, 16px thumb, body_md label. The default (1.x MEDIUM was 32×18). */
+    MEDIUM = "MEDIUM",
+    /** 36px row, 40×22 track, 18px thumb, body_lg label. */
+    LARGE = "LARGE",
+    /** 40px row, 44×24 track, 20px thumb, body_lg label. */
+    X_LARGE = "X_LARGE"
+}
+/**
+ * The surface the switch sits on (Constitution V-A surface set; 1.x `InputVariant` unchanged).
+ * The off track is always one neutral step stronger than that surface, so it never washes out. On
+ * an unknown or mixed surface keep the default: 1.x `TRANSPARENT` drew the same
+ * `background.tertiary` off track, so it was removed (color 2.1) with no `isGhost` replacement.
+ */
+export declare enum SwitchInputVariant {
+    /** On `background.base`: off track `background.hovered`. */
+    BASE = "BASE",
+    /** On `background.primary`: off track `background.pressed`. */
+    PRIMARY = "PRIMARY",
+    /** On `background.secondary`: off track `background.tertiary`. The default. */
+    SECONDARY = "SECONDARY",
+    /** On `background.tertiary`: off track `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/** Native `<input>` attributes, typed as React types them. */
+type NativeInputAttributes = InputHTMLAttributes<HTMLInputElement>;
+/** The native passthrough allowlist, each documented. */
+interface SwitchInputNativeProps {
+    /** Form field name; a checked switch submits `name=on` in a native form. */
+    name?: NativeInputAttributes["name"];
+    /** Focus the switch on mount. */
+    autoFocus?: NativeInputAttributes["autoFocus"];
+    /** Focus handler on the `<input>`. */
+    onFocus?: NativeInputAttributes["onFocus"];
+    /** Blur handler on the `<input>`. */
+    onBlur?: NativeInputAttributes["onBlur"];
+}
+export interface SwitchInputProps extends AriaAttributes, SwitchInputNativeProps {
+    /** Controlled on/off state. Pass it with `onChange`. */
+    isChecked?: boolean;
+    /**
+     * Initial on/off state while uncontrolled.
+     * @default false
+     */
+    defaultIsChecked?: boolean;
+    /** Called with the new state (and the change event) when the user toggles the switch. Not called while disabled, loading or read-only. */
+    onChange?: (isChecked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Visible name beside the track. Clicking it toggles the switch. */
+    label?: string;
+    /** Help copy under the label ("Pause without deleting."). Text and inline `Link`s only. */
+    description?: ReactNode;
+    /**
+     * Put the label and description after the track instead of before it.
+     * @default false
+     */
+    isLabelTrailing?: boolean;
+    /**
+     * Control rung: the row is 20 / 24 / 32 / 36 / 40px tall without a description.
+     * @default SwitchInputSize.MEDIUM
+     */
+    size?: SwitchInputSize;
+    /**
+     * The surface the switch sits on; the off track is one neutral step stronger.
+     * @default SwitchInputVariant.SECONDARY
+     */
+    variant?: SwitchInputVariant;
+    /**
+     * Not focusable and cannot be toggled. Shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * A change is in flight: the thumb shows a spinner, toggling is blocked, and the switch keeps focus.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Focusable and announced, but cannot be toggled. No hover change.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Stretch to the parent's width. With the label leading, the track sits at the end of the row.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name when there is no visible `label` and no labelled wrapping `Field`. */
+    ariaLabel?: string;
+    /**
+     * DOM id of the `<input>`. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<input>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** An on/off switch for a setting that applies immediately, with its own label and description. */
+declare const SwitchInput: import("react").ForwardRefExoticComponent<SwitchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default SwitchInput;

package/dist/inputs/SwitchInput.js

@@ -0,0 +1,248 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useField } from "../hooks/useField.js";
+import Spinner, { SpinnerSize, SpinnerVariant } from "../feedback/Spinner.js";
+import { hasContent, isFilled } from "./internal/predicates.js";
+import { joinIds } from "./internal/fieldWiring.js";
+import { useIsBareField } from "./internal/bareField.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/inputs/SwitchInput.tsx
+/**
+* The on/off control for a setting that takes effect immediately ("Enabled", "Send alerts", "Show
+* archived"). One native `<input type="checkbox" role="switch">` laid transparently over a pill
+* track with a sliding thumb, with its own `label` beside the track and an optional `description`
+* under it, so one component is a complete settings row. It holds a boolean with `isChecked` /
+* `defaultIsChecked` / `onChange(isChecked, event)`; `isLoading` shows a spinner in the thumb and blocks toggles
+* while keeping focus. On is the monochrome `solid.primary` fill.
+*
+* It never validates, submits or confirms. A choice applied on Save is `CheckboxInput`; a choice
+* between named options is `ToggleInput`. Wrap it in `Field` for an error or required mark.
+* Renamed from 1.x `ToggleInput` (Constitution XII.4): `InputSize` → `SwitchInputSize`,
+* `InputVariant` → `SwitchInputVariant`, `value` → `isChecked`, `labelTooltip` and `width` removed.
+*/
+/** Canonical rungs; SwitchInput supports all five. The rung sets the row height, the track, the label step and the spinner. */
+var SwitchInputSize = /* @__PURE__ */ function(SwitchInputSize) {
+	/** 20px row, 24×14 track, 10px thumb, caption label. */
+	SwitchInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px row, 28×16 track, 12px thumb, body_sm label (the 1.x SMALL track). */
+	SwitchInputSize["SMALL"] = "SMALL";
+	/** 32px row, 36×20 track, 16px thumb, body_md label. The default (1.x MEDIUM was 32×18). */
+	SwitchInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px row, 40×22 track, 18px thumb, body_lg label. */
+	SwitchInputSize["LARGE"] = "LARGE";
+	/** 40px row, 44×24 track, 20px thumb, body_lg label. */
+	SwitchInputSize["X_LARGE"] = "X_LARGE";
+	return SwitchInputSize;
+}({});
+/**
+* The surface the switch sits on (Constitution V-A surface set; 1.x `InputVariant` unchanged).
+* The off track is always one neutral step stronger than that surface, so it never washes out. On
+* an unknown or mixed surface keep the default: 1.x `TRANSPARENT` drew the same
+* `background.tertiary` off track, so it was removed (color 2.1) with no `isGhost` replacement.
+*/
+var SwitchInputVariant = /* @__PURE__ */ function(SwitchInputVariant) {
+	/** On `background.base`: off track `background.hovered`. */
+	SwitchInputVariant["BASE"] = "BASE";
+	/** On `background.primary`: off track `background.pressed`. */
+	SwitchInputVariant["PRIMARY"] = "PRIMARY";
+	/** On `background.secondary`: off track `background.tertiary`. The default. */
+	SwitchInputVariant["SECONDARY"] = "SECONDARY";
+	/** On `background.tertiary`: off track `background.tertiary`. */
+	SwitchInputVariant["TERTIARY"] = "TERTIARY";
+	return SwitchInputVariant;
+}({});
+/** The row: track then text in the DOM, exactly the rung's height without a description. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-SwitchInput-re1ivwu",
+	propsAsIs: false
+});
+/** The pill. The input covers it, so hover on the input is hover on the track. */
+var Track = /*#__PURE__*/ styled("span")({
+	name: "Track",
+	class: "gx-SwitchInput-Track-t5qpvv1",
+	propsAsIs: false
+});
+/** The sliding knob; holds the Spinner while loading. Positioned so its outer offset is 2px at every rung. */
+var Thumb = /*#__PURE__*/ styled("span")({
+	name: "Thumb",
+	class: "gx-SwitchInput-Thumb-t1jqwma5",
+	propsAsIs: false
+});
+/** The real control: a transparent native checkbox over the whole track. */
+var Control = /*#__PURE__*/ styled("input")({
+	name: "Control",
+	class: "gx-SwitchInput-Control-cjjj90p",
+	propsAsIs: false
+});
+/** Label over description; the label's first line centers on the track. */
+var TextBlock = /*#__PURE__*/ styled("span")({
+	name: "TextBlock",
+	class: "gx-SwitchInput-TextBlock-t1tkpa7t",
+	propsAsIs: false
+});
+/** The `<label>` around the label Text; clicking it toggles the switch. */
+var Label = /*#__PURE__*/ styled("label")({
+	name: "Label",
+	class: "gx-SwitchInput-Label-l1hm3zsx",
+	propsAsIs: false
+});
+/** Row height, track, thumb (= travel), gap and label line per rung. Track width = 2 × height − 4. */
+var SWITCH_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-SwitchInput-X_SMALL-xtbk4la",
+	["SMALL"]: "gx-SwitchInput-SMALL-sszeqx7",
+	["MEDIUM"]: "gx-SwitchInput-MEDIUM-m1esdh64",
+	["LARGE"]: "gx-SwitchInput-LARGE-ldceza6",
+	["X_LARGE"]: "gx-SwitchInput-X_LARGE-x1vx0934"
+};
+/** Off-track fill per surface: one neutral step stronger than the surface the switch sits on. */
+var SWITCH_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-SwitchInput-BASE-bachef7",
+	["PRIMARY"]: "gx-SwitchInput-PRIMARY-p1nnx17d",
+	["SECONDARY"]: "gx-SwitchInput-SECONDARY-s1hshoo0",
+	["TERTIARY"]: "gx-SwitchInput-TERTIARY-tdz2ykz"
+};
+/** Label and description before the track (the default); the DOM order stays track first. */
+var LABEL_LEADING_CSS = "gx-SwitchInput-LABEL_LEADING_CSS-l2i0zpv";
+/** Stretch to the parent's width; the text block takes the free space. */
+var FILL_WIDTH_CSS = "gx-SwitchInput-FILL_WIDTH_CSS-f8moo2b";
+/** `fillWidth` with the label leading: the label starts the row and the track ends it (the 1.x look). */
+var FILL_WIDTH_LABEL_LEADING_CSS = "gx-SwitchInput-FILL_WIDTH_LABEL_LEADING_CSS-fletk2z";
+/** Off: the variant's neutral step, a `border.secondary` hairline and an `text.secondary` thumb. */
+var OFF_CSS = "gx-SwitchInput-OFF_CSS-ow7nyud";
+/** On: the `solid.primary` track and an on-solid thumb, slid one thumb width. */
+var ON_CSS = "gx-SwitchInput-ON_CSS-ol1ilzg";
+/** Hover on an editable off switch: `border.hovered` (the field-frame hover) and a brighter thumb. */
+var OFF_HOVER_CSS = "gx-SwitchInput-OFF_HOVER_CSS-omhhgt3";
+/** Hover and press on an editable on switch. */
+var ON_HOVER_CSS = "gx-SwitchInput-ON_HOVER_CSS-ogtcfgw";
+/** Disabled: the disabled fill and thumb with the `border.primary` resting hairline (field-frame note). */
+var DISABLED_CSS = "gx-SwitchInput-DISABLED_CSS-dqj8tqw";
+/** Red hairline at rest and on hover, from a wrapping Field's error. */
+var ERROR_CSS = "gx-SwitchInput-ERROR_CSS-e11pamfu";
+/** Loading: the Spinner draws in the thumb's color on a transparent thumb. */
+var LOADING_CSS = "gx-SwitchInput-LOADING_CSS-li6rt8k";
+/** Cursor for the input and the label, per blocked state (on `Root`). */
+var DISABLED_CURSOR_CSS = "gx-SwitchInput-DISABLED_CURSOR_CSS-d1ub6p6x";
+var LOADING_CURSOR_CSS = "gx-SwitchInput-LOADING_CURSOR_CSS-lysofzb";
+var READ_ONLY_CURSOR_CSS = "gx-SwitchInput-READ_ONLY_CURSOR_CSS-r7de0fp";
+/** Label step per rung (the canonical control text). */
+var SWITCH_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
+};
+/** Description step per rung (Field's help steps). */
+var SWITCH_INPUT_SIZE_TO_DESCRIPTION_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_MD
+};
+/** The thumb's spinner per rung (identity). */
+var SWITCH_INPUT_SIZE_TO_SPINNER_SIZE_MAP = {
+	["X_SMALL"]: SpinnerSize.X_SMALL,
+	["SMALL"]: SpinnerSize.SMALL,
+	["MEDIUM"]: SpinnerSize.MEDIUM,
+	["LARGE"]: SpinnerSize.LARGE,
+	["X_LARGE"]: SpinnerSize.X_LARGE
+};
+/** An on/off switch for a setting that applies immediately, with its own label and description. */
+var SwitchInput = forwardRef(function SwitchInput(props, ref) {
+	const { isChecked, defaultIsChecked = false, onChange, label, description, isLabelTrailing = false, size = "MEDIUM", variant = "SECONDARY", isDisabled = false, isLoading = false, isReadOnly = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = props;
+	const field = useField();
+	const isBare = useIsBareField();
+	const generatedId = useId();
+	const inputId = field?.controlId ?? id ?? generatedId;
+	const descriptionId = `${inputId}-description`;
+	const [isOn, setIsOn] = useControlledState({
+		value: isChecked,
+		defaultValue: defaultIsChecked
+	});
+	const hasLabel = isFilled(label);
+	const hasDescription = hasContent(description);
+	const isInvalid = field?.isError === true;
+	const isBlocked = isLoading || isReadOnly;
+	const isEditable = !isDisabled && !isBlocked;
+	const describedBy = joinIds([
+		field?.describedBy,
+		hasDescription && descriptionId,
+		ariaDescribedBy
+	]);
+	const hasFieldLabel = field?.labelId !== void 0;
+	useDevWarning(!(hasLabel || hasFieldLabel || isFilled(ariaLabel) || isFilled(rest["aria-labelledby"]) || isFilled(rest["aria-label"])), "[@galaxy-io/dls] SwitchInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	useDevWarning(hasLabel && hasFieldLabel, "[@galaxy-io/dls] SwitchInput has both its own `label` and a labelled wrapping `Field`; both name it. Use one, and give the switch `ariaLabel` inside a Field.");
+	const handleChange = (event) => {
+		const next = event.currentTarget.checked;
+		setIsOn(next);
+		onChange?.(next, event);
+	};
+	/** Loading and read-only keep focus and block the native toggle, so no change event fires. */
+	const handleClick = (event) => {
+		if (isBlocked) event.preventDefault();
+	};
+	/** Enter toggles too (1.x), through the native click so blocking and `onChange` apply as for a mouse click. */
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		event.currentTarget.click();
+	};
+	return /* @__PURE__ */ jsxs(Root, {
+		className: cx(SWITCH_INPUT_SIZE_TO_CSS_MAP[size], SWITCH_INPUT_VARIANT_TO_CSS_MAP[variant], !isLabelTrailing && LABEL_LEADING_CSS, fillWidth && FILL_WIDTH_CSS, fillWidth && !isLabelTrailing && FILL_WIDTH_LABEL_LEADING_CSS, isDisabled && DISABLED_CURSOR_CSS, !isDisabled && isLoading && LOADING_CURSOR_CSS, !isDisabled && !isLoading && isReadOnly && READ_ONLY_CURSOR_CSS, className),
+		...style === void 0 ? {} : { style },
+		children: [/* @__PURE__ */ jsxs(Track, {
+			className: cx(isOn ? ON_CSS : OFF_CSS, isEditable && (isOn ? ON_HOVER_CSS : OFF_HOVER_CSS), isDisabled && DISABLED_CSS, isInvalid && ERROR_CSS, isLoading && LOADING_CSS, isBare && "gx-bareField-BARE_SWITCH_TRACK_CSS-b1rpy78w"),
+			children: [/* @__PURE__ */ jsx(Thumb, {
+				"aria-hidden": true,
+				children: isLoading && /* @__PURE__ */ jsx(Spinner, {
+					size: SWITCH_INPUT_SIZE_TO_SPINNER_SIZE_MAP[size],
+					variant: SpinnerVariant.INHERIT,
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ jsx(Control, {
+				ref,
+				type: "checkbox",
+				role: "switch",
+				id: inputId,
+				checked: isOn,
+				onChange: handleChange,
+				onClick: handleClick,
+				onKeyDown: handleKeyDown,
+				disabled: isDisabled,
+				"aria-label": ariaLabel,
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-required": field?.isRequired === true ? true : void 0,
+				"aria-disabled": !isDisabled && isLoading ? true : void 0,
+				"aria-busy": isLoading ? true : void 0,
+				"aria-readonly": !isDisabled && !isLoading && isReadOnly ? true : void 0,
+				...rest
+			})]
+		}), (hasLabel || hasDescription) && /* @__PURE__ */ jsxs(TextBlock, { children: [hasLabel && /* @__PURE__ */ jsx(Label, {
+			htmlFor: inputId,
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: SWITCH_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+				variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+				children: label
+			})
+		}), hasDescription && /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			id: descriptionId,
+			size: SWITCH_INPUT_SIZE_TO_DESCRIPTION_TEXT_SIZE_MAP[size],
+			variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+			children: description
+		})] })]
+	});
+});
+SwitchInput.displayName = "SwitchInput";
+//#endregion
+export { SwitchInputSize, SwitchInputVariant, SwitchInput as default };

package/dist/inputs/TagInput.d.ts

@@ -0,0 +1,117 @@
+import { type AriaAttributes, type CSSProperties, type InputHTMLAttributes } from "react";
+/** Canonical rungs; TagInput supports all five. One line of the field is the rung height. */
+export declare enum TagInputSize {
+    /** 20px line, 16px chips, caption text. */
+    X_SMALL = "X_SMALL",
+    /** 24px line, 16px chips, body_sm text. */
+    SMALL = "SMALL",
+    /** 32px line, 20px chips, body_md text. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px line, 24px chips, body_lg text. */
+    LARGE = "LARGE",
+    /** 40px line, 28px chips, body_lg text. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of the field (Constitution V-A surface set; the 1.x `InputVariant` members, unchanged). */
+export declare enum TagInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+/** Native `<input>` attributes, typed as React types them. */
+type NativeInputAttributes = InputHTMLAttributes<HTMLInputElement>;
+/** The native passthrough allowlist (`autoFocus`, `onFocus`, `onBlur`), each documented. */
+interface TagInputNativeProps {
+    /** Focus the text input on mount. */
+    autoFocus?: NativeInputAttributes["autoFocus"];
+    /** Focus handler on the text input. */
+    onFocus?: NativeInputAttributes["onFocus"];
+    /** Blur handler on the text input. TagInput commits the typed text first. */
+    onBlur?: NativeInputAttributes["onBlur"];
+}
+export interface TagInputProps extends AriaAttributes, TagInputNativeProps {
+    /** Controlled list of tags, in the order they were added. Pass it with `onChange`. */
+    value?: string[];
+    /**
+     * Initial tags while uncontrolled.
+     * @default []
+     */
+    defaultValue?: string[];
+    /** Called with the whole next list (not a delta) when tags are added or removed. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Single characters that commit the typed text as a tag, alongside Enter and blur. A paste is also split on newlines and tabs.
+     * @default [","]
+     */
+    separators?: string[];
+    /** The app's rule for one tag. Tags it returns `true` for render as error chips and mark the field invalid. TagInput never rejects a tag on its own. */
+    isTagInvalid?: (tag: string) => boolean;
+    /**
+     * Control rung: one line is 20 / 24 / 32 / 36 / 40px tall. Chips step down to fit inside it.
+     * @default TagInputSize.MEDIUM
+     */
+    size?: TagInputSize;
+    /**
+     * Resting fill, from the surface set. Ignored with `isGhost`.
+     * @default TagInputVariant.PRIMARY
+     */
+    variant?: TagInputVariant;
+    /**
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover and focus (1.x
+     * `TRANSPARENT`). For tag fields set into a toolbar or a table cell. Chips are `ChipVariant.SECONDARY`.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap it in `Field` instead. */
+    label?: string;
+    /** Hint shown while there are no tags and nothing is typed. It is never the label. */
+    placeholder?: string;
+    /** Message from the app, shown under the field through `Field`. It also turns the border red and sets `aria-invalid`. */
+    error?: string;
+    /**
+     * Error border and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Nothing can be typed or removed; chips show the disabled look and lose their ×.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Tags are shown and the field is focusable, but nothing can be typed or removed (chips have no ×).
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required`. It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Stretch to the parent's width. Without it, the field is 200px wide.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /**
+     * DOM id of the text input. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the text input. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when TagInput renders one, otherwise the frame. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A field of free-form tags: type and press Enter or a separator, paste a list, remove with × or Backspace. */
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TagInput;