@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/inputs/Field.js

@@ -0,0 +1,247 @@
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Orientation, Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import { FieldContext } from "../hooks/useField.js";
+import RequiredMarker from "../text/RequiredMarker.js";
+import { hasContent } from "./internal/predicates.js";
+import { joinIds } from "./internal/fieldWiring.js";
+/* empty css                */
+import { styled } from "@linaria/react";
+import { forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { InfoIcon } from "@phosphor-icons/react";
+//#region src/inputs/Field.tsx
+/**
+* The frame around one form control: the label above it (or beside it, `HORIZONTAL`), an optional
+* description, and the error and character counter under it. It wires them to the control through
+* `FieldContext` (read with `useField()` from `hooks/useField`): the label's `htmlFor` is the
+* Field's `id`, the description, counter and error ids go to `aria-describedby`, and `error` and
+* `isRequired` reach the control as `aria-invalid` and `aria-required`.
+*
+* Field does not validate, hold a value or draw a box around the control. Inputs that take `label`
+* directly render a Field internally; a control wrapped in a Field must not also take `label`.
+* Replaces 1.x `InputLabel` and the label and error lines every 1.x input drew for itself.
+*/
+/** Rung of the control the Field frames (Constitution III-A.4). Use the control's own size. */
+var FieldSize = /* @__PURE__ */ function(FieldSize) {
+	/** 20px control: caption label, caption help. */
+	FieldSize["X_SMALL"] = "X_SMALL";
+	/** 24px control: body_sm label, caption help. */
+	FieldSize["SMALL"] = "SMALL";
+	/** 32px control: body_md label, body_sm help. The default; matches 1.x. */
+	FieldSize["MEDIUM"] = "MEDIUM";
+	/** 36px control: body_lg label, body_sm help. */
+	FieldSize["LARGE"] = "LARGE";
+	/** 40px control: body_lg label, body_md help. */
+	FieldSize["X_LARGE"] = "X_LARGE";
+	return FieldSize;
+}({});
+/** The frame. Layout comes from the orientation map; the parts name their grid areas. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Field-rp2xtcu",
+	propsAsIs: false
+});
+/**
+* Label row and description. In `HORIZONTAL` it spans both rows of the label column and is pushed
+* down by `--gx-field-header-offset` so the label's line centers on the control's first row.
+*/
+var Header = /*#__PURE__*/ styled("div")({
+	name: "Header",
+	class: "gx-Field-Header-h1tweyt9",
+	propsAsIs: false
+});
+/** Label and info trigger at the start, `actions` at the end. */
+var LabelRow = /*#__PURE__*/ styled("div")({
+	name: "LabelRow",
+	class: "gx-Field-LabelRow-l1kmsddo",
+	propsAsIs: false
+});
+/** The label and its info trigger. */
+var LabelGroup = /*#__PURE__*/ styled("div")({
+	name: "LabelGroup",
+	class: "gx-Field-LabelGroup-lcak6xp",
+	propsAsIs: false
+});
+/** The `actions` slot at the end of the label row. */
+var ActionsGroup = /*#__PURE__*/ styled("div")({
+	name: "ActionsGroup",
+	class: "gx-Field-ActionsGroup-a1mil3ie",
+	propsAsIs: false
+});
+/** The `<label>`: the name (with the asterisk inside) and "(optional)". Wraps, never truncates. */
+var Label = /*#__PURE__*/ styled("label")({
+	name: "Label",
+	class: "gx-Field-Label-l1fpgi4g",
+	propsAsIs: false
+});
+/** The info icon button beside the label. Outside the `<label>`, so no interactive content nests in it. */
+var InfoTrigger = /*#__PURE__*/ styled("button")({
+	name: "InfoTrigger",
+	class: "gx-Field-InfoTrigger-i18ubaw",
+	propsAsIs: false
+});
+/** Holds the control at its own width; a control with `fillWidth` fills the Field. */
+var ControlSlot = /*#__PURE__*/ styled("div")({
+	name: "ControlSlot",
+	class: "gx-Field-ControlSlot-cb8lcf8",
+	propsAsIs: false
+});
+/** Error in column 1, counter right-aligned in column 2. */
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-Field-Footer-fuxw401",
+	propsAsIs: false
+});
+/** Keeps the counter in the right column when there is no error. */
+var COUNTER_CSS = "gx-Field-COUNTER_CSS-cgr2f4k";
+/** Stack (1.x 4px rhythm) or a `1fr : 2fr` label column beside the control. */
+var FIELD_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-Field-Orientation_VERTICAL-o2oy45q",
+	[Orientation.HORIZONTAL]: "gx-Field-Orientation_HORIZONTAL-o11kkysf"
+};
+/** `--gx-field-label-offset` = (control height − label line) / 2, read by the horizontal layout. */
+var FIELD_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Field-X_SMALL-x6a5r9b",
+	["SMALL"]: "gx-Field-SMALL-s1hxuzdf",
+	["MEDIUM"]: "gx-Field-MEDIUM-m1wgl2f1",
+	["LARGE"]: "gx-Field-LARGE-lnkg4jz",
+	["X_LARGE"]: "gx-Field-X_LARGE-x1qywk8g"
+};
+/** Stretch to the parent's width. */
+var FILL_WIDTH_CSS = "gx-Field-FILL_WIDTH_CSS-fc3vdiy";
+/** Label step per rung: the canonical control text (Constitution III-A.4). */
+var FIELD_SIZE_TO_LABEL_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, error and counter step per rung: one step quieter, floored at `caption`. */
+var FIELD_SIZE_TO_HELP_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_MD
+};
+/** Info icon px per rung. */
+var FIELD_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 12,
+	["LARGE"]: 14,
+	["X_LARGE"]: 14
+};
+/** Label, description, error and counter around one control, wired to it for assistive tech. */
+var Field = forwardRef(function Field({ children, label, description, error, isRequired = false, isOptional = false, labelTooltip, actions, maxLength, count = 0, orientation = Orientation.VERTICAL, size = "MEDIUM", fillWidth = false, id, className, style, ...rest }, ref) {
+	const generatedId = useId();
+	const controlId = id ?? generatedId;
+	const hasLabel = label !== void 0 && label !== "";
+	const hasTooltip = hasContent(labelTooltip);
+	const hasActions = hasContent(actions);
+	const hasDescription = hasContent(description);
+	const hasError = error !== void 0 && error !== "";
+	const hasCounter = maxLength !== void 0;
+	const labelId = hasLabel ? `${controlId}-label` : void 0;
+	const descriptionId = `${controlId}-description`;
+	const counterId = `${controlId}-counter`;
+	const errorId = `${controlId}-error`;
+	const describedBy = joinIds([
+		hasDescription && descriptionId,
+		hasCounter && counterId,
+		hasError && errorId
+	]);
+	const contextValue = useMemo(() => ({
+		controlId,
+		labelId,
+		describedBy,
+		isRequired,
+		isError: hasError
+	}), [
+		controlId,
+		labelId,
+		describedBy,
+		isRequired,
+		hasError
+	]);
+	const labelSize = FIELD_SIZE_TO_LABEL_TEXT_SIZE_MAP[size];
+	const helpSize = FIELD_SIZE_TO_HELP_TEXT_SIZE_MAP[size];
+	const hasLabelRow = hasLabel || hasTooltip || hasActions;
+	const hasHeader = hasLabelRow || hasDescription || orientation === Orientation.HORIZONTAL;
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		className: cx(FIELD_ORIENTATION_TO_CSS_MAP[orientation], FIELD_SIZE_TO_CSS_MAP[size], fillWidth && FILL_WIDTH_CSS, className),
+		style,
+		children: /* @__PURE__ */ jsxs(FieldContext.Provider, {
+			value: contextValue,
+			children: [
+				hasHeader && /* @__PURE__ */ jsxs(Header, { children: [hasLabelRow && /* @__PURE__ */ jsxs(LabelRow, { children: [/* @__PURE__ */ jsxs(LabelGroup, { children: [hasLabel && /* @__PURE__ */ jsxs(Label, {
+					htmlFor: controlId,
+					id: labelId,
+					children: [/* @__PURE__ */ jsxs(Text, {
+						as: "span",
+						size: labelSize,
+						variant: TextVariant.SECONDARY,
+						children: [label, isRequired && /* @__PURE__ */ jsx(RequiredMarker, {})]
+					}), isOptional && !isRequired && /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: labelSize,
+						variant: TextVariant.TERTIARY,
+						children: "(optional)"
+					})]
+				}), hasTooltip && /* @__PURE__ */ jsx(Tooltip, {
+					body: labelTooltip,
+					placement: Placement.RIGHT,
+					children: /* @__PURE__ */ jsx(InfoTrigger, {
+						type: "button",
+						"aria-label": "More information",
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: InfoIcon,
+							size: FIELD_SIZE_TO_ICON_PX_MAP[size],
+							variant: IconVariant.INHERIT
+						})
+					})
+				})] }), hasActions && /* @__PURE__ */ jsx(ActionsGroup, { children: actions })] }), hasDescription && /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					id: descriptionId,
+					size: helpSize,
+					variant: TextVariant.TERTIARY,
+					children: description
+				})] }),
+				/* @__PURE__ */ jsx(ControlSlot, { children }),
+				(hasError || hasCounter) && /* @__PURE__ */ jsxs(Footer, { children: [hasError && /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					id: errorId,
+					size: helpSize,
+					variant: TextVariant.ERROR,
+					children: error
+				}), hasCounter && /* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					id: counterId,
+					size: helpSize,
+					variant: count > maxLength ? TextVariant.ERROR : TextVariant.TERTIARY,
+					isTabular: true,
+					className: COUNTER_CSS,
+					children: [
+						count,
+						" / ",
+						maxLength,
+						/* @__PURE__ */ jsx(VisuallyHidden, {
+							as: "span",
+							children: " characters"
+						})
+					]
+				})] })
+			]
+		})
+	});
+});
+Field.displayName = "Field";
+//#endregion
+export { FieldSize, Field as default };

package/dist/inputs/Fieldset.d.ts

@@ -0,0 +1,53 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Rung of the controls the Fieldset groups (Constitution III-A.4). Use the controls' own size. */
+export declare enum FieldsetSize {
+    /** 20px controls: caption title and help, 8px between children. */
+    X_SMALL = "X_SMALL",
+    /** 24px controls: body_sm title, caption help, 12px between children. */
+    SMALL = "SMALL",
+    /** 32px controls: body_md title, body_sm help, 16px between children. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px controls: body_lg title, body_sm help, 16px between children. */
+    LARGE = "LARGE",
+    /** 40px controls: body_lg title, body_md help, 16px between children. */
+    X_LARGE = "X_LARGE"
+}
+export interface FieldsetProps extends AriaAttributes {
+    /** The grouped controls, usually `Field`s. Laid out in a column. */
+    children?: ReactNode;
+    /** The group's title, rendered as the `<legend>`. Required: it is the group's accessible name. */
+    label: string;
+    /** Help copy under the title. Text and inline `Link`s only. */
+    description?: ReactNode;
+    /** Group-level message under the controls ("Choose at least one"). */
+    error?: string;
+    /**
+     * Shows the red asterisk after the title. Mark each required control too.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Shows "(optional)" after the title. Ignored when `isRequired`.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * The rung of the controls inside. Sets the title and help type steps and the gap between children.
+     * @default FieldsetSize.MEDIUM
+     */
+    size?: FieldsetSize;
+    /**
+     * DOM id on the `<fieldset>`; the description and error ids derive from it.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<fieldset>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<fieldset>`. */
+    className?: string;
+    /** Inline style on the `<fieldset>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A titled group of controls: `<fieldset>` + `<legend>`, description, children and group error. */
+declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export default Fieldset;

package/dist/inputs/Fieldset.js

@@ -0,0 +1,149 @@
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import RequiredMarker from "../text/RequiredMarker.js";
+import { hasContent } from "./internal/predicates.js";
+import { joinIds } from "./internal/fieldWiring.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/Fieldset.tsx
+/**
+* Names a group of related controls: a section of a form ("Connection", "Notifications") or the
+* options that answer one question. It renders a native `<fieldset>` whose `<legend>` is the title
+* (`label`), so assistive tech announces the group's name when focus enters it. An optional
+* `description` sits under the title and an optional group-level `error` under the controls; both
+* are linked from the `<fieldset>` with `aria-describedby`. The children stack in a column with the
+* form's spacing for the rung (`size`).
+*
+* The legend is floated (`float: left; width: 100%`, every following part `clear: both`) so it lays
+* out like a normal block in every browser instead of being drawn in the fieldset's border area,
+* while still naming the group.
+*
+* Fieldset does not draw a box (a bordered panel is `Box`), validate, manage values or disable its
+* controls; one control's label is `Field`.
+*/
+/** Rung of the controls the Fieldset groups (Constitution III-A.4). Use the controls' own size. */
+var FieldsetSize = /* @__PURE__ */ function(FieldsetSize) {
+	/** 20px controls: caption title and help, 8px between children. */
+	FieldsetSize["X_SMALL"] = "X_SMALL";
+	/** 24px controls: body_sm title, caption help, 12px between children. */
+	FieldsetSize["SMALL"] = "SMALL";
+	/** 32px controls: body_md title, body_sm help, 16px between children. The default. */
+	FieldsetSize["MEDIUM"] = "MEDIUM";
+	/** 36px controls: body_lg title, body_sm help, 16px between children. */
+	FieldsetSize["LARGE"] = "LARGE";
+	/** 40px controls: body_lg title, body_md help, 16px between children. */
+	FieldsetSize["X_LARGE"] = "X_LARGE";
+	return FieldsetSize;
+}({});
+/** The `<fieldset>`, stripped to a plain block that may shrink in a flex or grid track. */
+var Root = /*#__PURE__*/ styled("fieldset")({
+	name: "Root",
+	class: "gx-Fieldset-r9krani",
+	propsAsIs: false
+});
+/** The floated `<legend>`: title, asterisk and "(optional)" on one wrapping line. */
+var Legend = /*#__PURE__*/ styled("legend")({
+	name: "Legend",
+	class: "gx-Fieldset-Legend-l1r8t67q",
+	propsAsIs: false
+});
+/** Help copy under the title. */
+var Description = /*#__PURE__*/ styled("div")({
+	name: "Description",
+	class: "gx-Fieldset-Description-d88yn2d",
+	propsAsIs: false
+});
+/** The grouped controls, in a column. The gap comes from the size map. */
+var Body = /*#__PURE__*/ styled("div")({
+	name: "Body",
+	class: "gx-Fieldset-Body-bm2zy39",
+	propsAsIs: false
+});
+/** The group-level error under the controls. */
+var ErrorRow = /*#__PURE__*/ styled("div")({
+	name: "ErrorRow",
+	class: "gx-Fieldset-ErrorRow-e9guo5n",
+	propsAsIs: false
+});
+/** Gap between children per rung (8 / 12 / 16 / 16 / 16px). */
+var FIELDSET_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Fieldset-X_SMALL-xj0pwmy",
+	["SMALL"]: "gx-Fieldset-SMALL-svpuxtn",
+	["MEDIUM"]: "gx-Fieldset-MEDIUM-mur66uc",
+	["LARGE"]: "gx-Fieldset-LARGE-ls5534t",
+	["X_LARGE"]: "gx-Fieldset-X_LARGE-x1s55kv3"
+};
+/** Title step per rung: the canonical control text, the same as Field's label. */
+var FIELDSET_SIZE_TO_LABEL_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 and error step per rung: the same as Field's help text. */
+var FIELDSET_SIZE_TO_HELP_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_MD
+};
+/** A titled group of controls: `<fieldset>` + `<legend>`, description, children and group error. */
+var Fieldset = forwardRef(function Fieldset({ children, label, description, error, isRequired = false, isOptional = false, size = "MEDIUM", id, "aria-describedby": ariaDescribedBy, className, style, ...rest }, ref) {
+	const generatedId = useId();
+	const rootId = id ?? generatedId;
+	const descriptionId = `${rootId}-description`;
+	const errorId = `${rootId}-error`;
+	const hasDescription = hasContent(description);
+	const hasError = error !== void 0 && error !== "";
+	const describedBy = joinIds([
+		hasDescription && descriptionId,
+		hasError && errorId,
+		ariaDescribedBy
+	]);
+	const labelSize = FIELDSET_SIZE_TO_LABEL_TEXT_SIZE_MAP[size];
+	const helpSize = FIELDSET_SIZE_TO_HELP_TEXT_SIZE_MAP[size];
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id: rootId,
+		"aria-describedby": describedBy,
+		className: cx(FIELDSET_SIZE_TO_CSS_MAP[size], className),
+		style,
+		children: [
+			/* @__PURE__ */ jsxs(Legend, { children: [/* @__PURE__ */ jsxs(Text, {
+				as: "span",
+				size: labelSize,
+				variant: TextVariant.PRIMARY,
+				weight: TextWeight.MEDIUM,
+				children: [label, isRequired && /* @__PURE__ */ jsx(RequiredMarker, {})]
+			}), isOptional && !isRequired && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: labelSize,
+				variant: TextVariant.TERTIARY,
+				children: "(optional)"
+			})] }),
+			hasDescription && /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				id: descriptionId,
+				size: helpSize,
+				variant: TextVariant.TERTIARY,
+				children: description
+			}) }),
+			/* @__PURE__ */ jsx(Body, { children }),
+			hasError && /* @__PURE__ */ jsx(ErrorRow, { children: /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				id: errorId,
+				size: helpSize,
+				variant: TextVariant.ERROR,
+				children: error
+			}) })
+		]
+	});
+});
+Fieldset.displayName = "Fieldset";
+//#endregion
+export { FieldsetSize, Fieldset as default };

package/dist/inputs/FileInput.d.ts

@@ -0,0 +1,110 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Canonical rungs; FileInput exposes three. Sets the button, the file rows, and the zone's padding and text. */
+export declare enum FileInputSize {
+    /** 24px button and rows, body_sm text, 16px zone padding. */
+    SMALL = "SMALL",
+    /** 32px button and rows, body_md text, 24px zone padding. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px button and rows, body_lg text, 32px zone padding. */
+    LARGE = "LARGE"
+}
+/** Resting fill of the drop zone (Constitution V-A surface set; the 1.x `InputVariant` members). */
+export declare enum FileInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+export interface FileInputProps extends AriaAttributes {
+    /** Controlled list of chosen files, in the order they were added. Pass it with `onChange`. */
+    value?: File[];
+    /**
+     * Initial files while uncontrolled.
+     * @default []
+     */
+    defaultValue?: File[];
+    /** Called with the whole next list when files are added or removed. */
+    onChange?: (value: File[]) => void;
+    /** Called with the files FileInput did not add: not matching `accept`, folders, or extras beyond one when not `isMultiple`. */
+    onReject?: (files: File[]) => void;
+    /** Allowed types in the native `accept` syntax: MIME types, `type/*` wildcards and `.ext` extensions, comma-separated. Applies to the picker and to drops. All files when unset. */
+    accept?: string;
+    /**
+     * Allow several files. Without it, choosing or dropping a file replaces the current one.
+     * @default false
+     */
+    isMultiple?: boolean;
+    /** Replaces a file row's remove button: upload progress, a status chip, or the app's own actions. Return `null` to leave the row without actions. */
+    renderFileActions?: (file: File, index: number) => ReactNode;
+    /**
+     * Rung of the button, the file rows and the zone's padding and text: 24 / 32 / 36px controls.
+     * @default FileInputSize.MEDIUM
+     */
+    size?: FileInputSize;
+    /**
+     * Resting fill of the drop zone, from the surface set. Ignored with `isGhost`.
+     * @default FileInputVariant.PRIMARY
+     */
+    variant?: FileInputVariant;
+    /**
+     * Ghost drop zone: no fill and no dashed hairline at rest; the dashed frame appears on hover, while
+     * the button inside has focus, and while files are dragged over it. For a zone set into a panel that
+     * already frames it.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the control, rendered through `Field`. For a description (the accepted types and limits), wrap it in `Field` instead. */
+    label?: string;
+    /**
+     * Text in the drop zone above the button.
+     * @default "Drop files here" ("Drop a file here" without isMultiple)
+     */
+    placeholder?: string;
+    /** Message from the app ("File is larger than 50 MB"), shown under the control through `Field` and linked to the button. It also turns the zone's border red. */
+    error?: string;
+    /**
+     * Error border without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Nothing can be dropped, chosen or removed. Shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Shows the file list without the drop zone and without remove buttons.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`). It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Stretch to the parent's width. Without it, the control is 320px wide.
+     * @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 group. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    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 FileInput renders one, otherwise the group. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A drop zone and a "Choose files" button over a hidden native file input, with the chosen files listed. */
+declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FileInput;