@leabankab/component-library 7.3.0 → 8.1.0

package/dist/components/feedback/alert.d.ts

@@ -11,7 +11,7 @@ export type { AlertColor, AlertProps, AlertSeverity, AlertSize, AlertVariant, }
  * name — override it per-instance with `closeLabel`.
  *
  * ```tsx
- * <Alert color="purple" size="sm">
+ * <Alert color="primary" size="sm">
  *   Lånet forutsetter at du løser skulder for totalt 80 000 kr.
  * </Alert>
  * ```

package/dist/components/feedback/simple-dialog.d.ts

@@ -33,7 +33,7 @@ export type SimpleDialogProps = Omit<Dialog.RootProps, "children"> & {
  *   title="Update your details"
  *   description="Keep your contact information up to date."
  * >
- *   <TextField label="Phone" />
+ *   <Input label="Phone" />
  * </SimpleDialog>
  * ```
  */

package/dist/components/form/amount-slider.d.ts

@@ -0,0 +1,68 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type AmountSliderProps = Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "onChange"> & {
+    /**
+     * The question above the amount, e.g. "Hur mycket vill du låna?". It labels
+     * the amount field and names the slider, so it is required.
+     */
+    label: ReactNode;
+    /** The lowest amount that can be chosen. */
+    min: number;
+    /** The highest amount that can be chosen. */
+    max: number;
+    /**
+     * How far the slider, and the arrow keys in the amount field, move the
+     * amount. A typed amount is kept as typed, also between two steps.
+     * @default 1
+     */
+    step?: number;
+    /** The amount. Use with `onValueChange` to control the component. */
+    value?: number;
+    /**
+     * The amount when first rendered, for uncontrolled use.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Called with the new amount when the slider moves, and when an amount
+     * within `min` and `max` is typed.
+     */
+    onValueChange?: (value: number) => void;
+    /** How the amount, `min` and `max` are written, e.g. as a currency. */
+    format?: Intl.NumberFormatOptions;
+    /** The locale the amount is written and typed in. Defaults to the runtime locale. */
+    locale?: Intl.LocalesArgument;
+    /** Submits the amount under this name when inside a form. */
+    name?: string;
+    /** Disables both the amount field and the slider. */
+    disabled?: boolean;
+    /** Helper / error text shown below the slider and linked via `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Puts the amount field, the slider and the helper text into the error state. */
+    error?: boolean;
+};
+/**
+ * An amount chosen by dragging a slider or by typing it, for questions like
+ * "how much do you want to borrow?". The amount field and the slider share one
+ * value: moving the slider rewrites the amount, and typing moves the thumb.
+ *
+ * The `label` is a real `<label>` for the amount field and also names the
+ * slider, and the helper text describes both. A typed amount outside `min`
+ * and `max` is brought back into range when the field loses focus, and an
+ * emptied field goes back to the last amount.
+ *
+ * Use `Slider` instead when the value does not need to be typed.
+ *
+ * ```tsx
+ * <AmountSlider
+ *   label="Hur mycket vill du låna?"
+ *   min={20000}
+ *   max={600000}
+ *   step={5000}
+ *   defaultValue={200000}
+ *   locale="sv-SE"
+ *   format={{ style: "currency", currency: "SEK", maximumFractionDigits: 0 }}
+ *   onValueChange={(amount) => setAmount(amount)}
+ * />
+ * ```
+ */
+export declare function AmountSlider({ label, min, max, step, value: valueProp, defaultValue, onValueChange, format, locale, name, disabled, helperText, error, className, ...rest }: AmountSliderProps): import("react").JSX.Element;

package/dist/components/form/autocomplete.d.ts

@@ -1,71 +1,68 @@
-import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
-import { ReactNode } from 'react';
-import { SelectOption } from './select';
-type AutocompleteOption = SelectOption | string;
-/** MUI props we forward untouched (free-solo so both modes type-check). */
-type ForwardedMuiProps = Omit<MuiAutocompleteProps<AutocompleteOption, false, false, true>, "ref" | "renderInput" | "renderValue" | "options" | "value" | "defaultValue" | "onChange" | "onInputChange" | "inputValue" | "freeSolo" | "multiple" | "getOptionLabel" | "getOptionDisabled" | "isOptionEqualToValue" | "filterOptions">;
-type AutocompleteBaseProps = ForwardedMuiProps & {
-    /** Floating label. Rendered as an `InputLabel` and linked automatically. */
-    label?: ReactNode;
-    /** Helper / error text shown below the control and linked via `aria-describedby`. */
-    helperText?: ReactNode;
-    /** Searchable options. Ignored in `email` mode, where suggestions are derived from the input. */
-    options?: SelectOption[];
-    /** Puts the control in an error state. */
-    error?: boolean;
-    /** Marks the control as required. */
-    required?: boolean;
-    /** Placeholder shown in the text input. */
-    placeholder?: string;
-};
-type AutocompleteSingleProps = {
-    /** Enable selecting multiple values. Omit (or `false`) for single-select. */
-    multiple?: false;
-    /** Selected value (controlled). */
-    value?: string;
-    /** Initial value (uncontrolled). */
-    defaultValue?: string;
-    /** Called with the next string value. */
-    onChange?: (value: string) => void;
+import { ReactElement, ReactNode } from 'react';
+import { ComboFieldBaseProps } from './combo-field';
+import { SelectOption } from './select-field';
+type AutocompleteBaseProps<Value extends string> = ComboFieldBaseProps & {
+    /** The choices. Typing filters them by their label. */
+    options: readonly SelectOption<Value>[];
+    /** Shown in the list when nothing matches. Translated by default. */
+    noOptionsText?: ReactNode;
     /**
-     * Email mode: lets the user type freely and, once they type `@`, suggests
-     * completions from common providers (gmail, outlook, …).
+     * Whether the options are on their way. While there are none to show, the
+     * list says so instead of "no options".
      */
-    email?: boolean;
-    /** Domains offered in `email` mode. @default COMMON_EMAIL_DOMAINS */
-    domains?: readonly string[];
-    /** Maximum number of email suggestions to show. @default 6 */
-    maxSuggestions?: number;
+    loading?: boolean;
 };
-type AutocompleteMultipleProps = {
-    /** Enable selecting multiple values, rendered as removable chips. */
+type SingleValueProps<Value extends string> = {
+    /** Choose several values, shown as chips. */
+    multiple?: false;
+    /** The chosen value (controlled). `""` means nothing is chosen. */
+    value?: Value | "";
+    /** The chosen value when first rendered, for uncontrolled use. */
+    defaultValue?: Value | "";
+    /** Called with the chosen value, or `""` when the control is emptied. */
+    onValueChange?: (value: Value | "") => void;
+};
+type MultipleValueProps<Value extends string> = {
+    /** Choose several values, shown as chips. */
     multiple: true;
-    /** Currently selected values (controlled). */
-    value?: string[];
-    /** Initially selected values (uncontrolled). */
-    defaultValue?: string[];
-    /** Called with the next array of selected values. */
-    onChange?: (value: string[]) => void;
-    /** Minimum number of values that must stay selected. @default 1 */
+    /** The chosen values (controlled). */
+    value?: Value[];
+    /** The chosen values when first rendered, for uncontrolled use. */
+    defaultValue?: Value[];
+    /** Called with the next array of chosen values. */
+    onValueChange?: (value: Value[]) => void;
+    /** Fewest values that must stay chosen. @default 1 */
     min?: number;
-    /** Maximum number of values that can be selected. Unlimited when omitted. */
+    /** Most values that can be chosen. Unlimited when omitted. */
     max?: number;
 };
-export type AutocompleteProps = AutocompleteBaseProps & (AutocompleteSingleProps | AutocompleteMultipleProps);
+type AutocompleteSingleProps<Value extends string = string> = AutocompleteBaseProps<Value> & SingleValueProps<Value>;
+type AutocompleteMultipleProps<Value extends string = string> = AutocompleteBaseProps<Value> & MultipleValueProps<Value>;
+export type AutocompleteProps<Value extends string = string> = AutocompleteSingleProps<Value> | AutocompleteMultipleProps<Value>;
 /**
- * Searchable select built on MUI's `Autocomplete`.
+ * A select to search in, on Base UI's `Combobox`, in the same box as `Input`.
+ * Typing filters the options. The label, the helper text and the ids that
+ * link them to the input are all rendered and wired for you.
+ *
+ * ```tsx
+ * <Autocomplete
+ *   label="Land"
+ *   options={[
+ *     { value: "no", label: "Norge" },
+ *     { value: "se", label: "Sverige" },
+ *   ]}
+ *   value={country}
+ *   onValueChange={setCountry}
+ * />
+ * ```
  *
- * Works two ways:
- * - **Standalone (all-in-one):** pass `label` / `helperText` and `options` and
- *   it renders its own `FormControl`, label and helper text, generating and
- *   wiring all ids for you.
- * - **Composed:** drop it inside a `FormControl` next to `InputLabel` /
- *   `FormHelperText` and it picks up the shared ids from context.
+ * Values are strings, typed from the options as in `Select`, and `""` means
+ * nothing is chosen. Pass `multiple` to choose several: they show as chips
+ * inside the field, bounded by `min` (default 1) and `max`.
  *
- * Pass `multiple` to select several values at once, shown as removable chips and
- * bounded by `min` (default 1) and `max`. Pass `email` (single mode only) to
- * turn it into an email field that suggests common domains once the user types
- * `@` — the same autocomplete behaviour, driven by free text.
+ * For an email address with suggested domains, use `EmailInput`.
  */
-export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function Autocomplete<Value extends string = string>(props: AutocompleteMultipleProps<Value>): ReactElement;
+export declare function Autocomplete<Value extends string = string>(props: AutocompleteSingleProps<Value>): ReactElement;
+export declare function Autocomplete<Value extends string = string>(props: AutocompleteProps<Value>): ReactElement;
 export {};

package/dist/components/form/checkbox-box.d.ts

@@ -0,0 +1,11 @@
+/** The tick. It is drawn in by a transition when its box becomes checked. */
+export declare const checkboxTick: import("react").JSX.Element;
+/**
+ * Internal. The checkbox box as a picture only, for places where something
+ * else is the control: `MultiSelect` shows it inside each option, and the
+ * option is what gets picked. It looks exactly like `Checkbox`, which uses
+ * the same class on the real control.
+ */
+export declare const CheckboxBox: ({ checked }: {
+    checked: boolean;
+}) => import("react").JSX.Element;

package/dist/components/form/checkbox.d.ts

@@ -1,12 +1,72 @@
-import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
-export type CheckboxProps = Omit<MuiCheckboxProps, "color" | "size">;
+import { CSSProperties, FocusEventHandler, ReactNode, Ref } from 'react';
 /**
- * Checkbox built on MUI's `Checkbox`, styled by the global theme
- * (`checkbox.theme.tsx`). Kept composite — pair it with `FormControlLabel` for a
- * label instead of forwarding label / typography props:
+ * Requires an accessible name so the checkbox is never nameless. Provide a
+ * visible `label`, or an `aria-label` / `aria-labelledby` when the design has
+ * none (a row in a table, say).
+ */
+type CheckboxAccessibleName = {
+    label: ReactNode;
+    "aria-label"?: never;
+    "aria-labelledby"?: never;
+} | {
+    label?: never;
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    label?: never;
+    "aria-label"?: never;
+    "aria-labelledby": string;
+};
+export type CheckboxProps = CheckboxAccessibleName & {
+    /** Whether the box is ticked (controlled). Pair with `onCheckedChange`. */
+    checked?: boolean;
+    /** Whether the box is ticked when first rendered, for uncontrolled use. */
+    defaultChecked?: boolean;
+    /** Called with the new state when the box is ticked or cleared. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Helper / error text shown below the checkbox and linked via `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Puts the checkbox and its helper text into the error state. */
+    error?: boolean;
+    /** Submits the checkbox under this name when inside a form. */
+    name?: string;
+    /** The value submitted when ticked. The browser default is `"on"`. */
+    value?: string;
+    /** Disables the checkbox. */
+    disabled?: boolean;
+    /** Marks the checkbox as required and adds the asterisk to the label. */
+    required?: boolean;
+    /** Id of the checkbox itself, the element with the `checkbox` role. */
+    id?: string;
+    onBlur?: FocusEventHandler<HTMLElement>;
+    onFocus?: FocusEventHandler<HTMLElement>;
+    /** Extra ids describing the checkbox, alongside the helper text. */
+    "aria-describedby"?: string;
+    /** Class on the outermost element, for layout. */
+    className?: string;
+    /** Inline style on the outermost element, for layout. */
+    style?: CSSProperties;
+    /**
+     * The `<input type="checkbox">` that holds the value. It is hidden, but
+     * `ref.current.focus()` moves focus to the visible box.
+     */
+    ref?: Ref<HTMLInputElement>;
+};
+/**
+ * Checkbox with its label, helper text and error state built in, on Base UI's
+ * accessible `Checkbox` primitive.
+ *
+ * Pass `label` for the text next to the box; it is a real `<label>`, so
+ * clicking it ticks the box. Without a visible label, pass `aria-label`.
+ * `className` and `style` go on the outermost element.
  *
  * ```tsx
- * <FormControlLabel control={<Checkbox />} label="Label" />
+ * <Checkbox
+ *   label="Jeg godtar vilkårene"
+ *   checked={accepted}
+ *   onCheckedChange={setAccepted}
+ * />
  * ```
  */
-export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function Checkbox({ label, helperText, error, checked, defaultChecked, onCheckedChange, name, value, disabled, required, id, onBlur, onFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, }: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/components/form/combo-field.d.ts

@@ -0,0 +1,68 @@
+import { CSSProperties, FocusEvent, InputHTMLAttributes, ReactNode, Ref } from 'react';
+/** The props `Autocomplete` and `EmailInput` have in common. */
+export type ComboFieldBaseProps = {
+    /** Floating label, linked to the input for you. */
+    label?: ReactNode;
+    /** Helper / error text shown below the control and linked via `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Puts the control, its label and its helper text into the error state. */
+    error?: boolean;
+    /**
+     * A message for a value that is allowed but unusual, such as an unusually
+     * high amount. Shown in amber in place of the helper text, without the
+     * error state: the field is not marked invalid. `error` wins when both are set.
+     */
+    warning?: ReactNode;
+    /** Marks the control as required, with an asterisk after the label. */
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Text shown while the input is empty. With a `label` it appears once the
+     * label has floated up, on focus.
+     */
+    placeholder?: string;
+    /** Called when focus leaves the control, its list included. */
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    /** Submits the value under this name in a native form. */
+    name?: string;
+    /** Id of the text `<input>`. */
+    id?: string;
+    /** Names the control when there is no visible `label`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Class on the outermost element, for layout. */
+    className?: string;
+    /** Inline style on the outermost element, for layout. */
+    style?: CSSProperties;
+    /** The text `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+};
+type ComboFieldProps = Omit<ComboFieldBaseProps, "name"> & {
+    /** Wraps the field and its popup in the Base UI root that drives them. */
+    renderRoot: (children: ReactNode) => ReactNode;
+    /** More attributes for the `<input>`: `type`, `name`, `autoComplete`, … */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * The chosen values of a multiple control, as `Combobox.Chip`s. They share
+     * the field with the input and wrap onto new lines.
+     */
+    chips?: ReactNode;
+    /** Whether a multiple control has values, which is what floats its label. */
+    filled?: boolean;
+    /** Shows the button that empties the control, while there is something to empty. */
+    clearable?: boolean;
+    /** Shows the arrow button that opens and closes the list. */
+    trigger?: boolean;
+    /**
+     * Selects the text on the first click into the input, so that typing
+     * replaces it. For a control whose text is the label of the chosen option.
+     */
+    selectTextOnClick?: boolean;
+    /** The content of the popup: the list, and what stands in for it when empty. */
+    children: ReactNode;
+    /** More below the helper text, inside the outermost element. */
+    afterHelperText?: ReactNode;
+};
+export declare function ComboField({ label, helperText, error, warning, required, disabled, placeholder, onBlur, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, renderRoot, inputProps, chips, filled, clearable, trigger, selectTextOnClick, children, afterHelperText, }: ComboFieldProps): import("react").JSX.Element;
+export {};

package/dist/components/form/email-input.d.ts

@@ -1,35 +1,37 @@
-import { FocusEventHandler, ReactNode } from 'react';
-export type EmailInputProps = {
-    /** Current value (controlled). */
+import { ComboFieldBaseProps } from './combo-field';
+export type EmailInputProps = ComboFieldBaseProps & {
+    /** The address (controlled). Pair with `onValueChange`. */
     value?: string;
-    /** Initial value (uncontrolled). */
+    /** The address when first rendered, for uncontrolled use. */
     defaultValue?: string;
-    /** Called with the next string value. */
-    onChange?: (value: string) => void;
+    /** Called with the new text on every change, and with a suggestion when one is picked. */
+    onValueChange?: (value: string) => void;
     /** Domains offered once the user types `@`. Defaults to common providers. */
     domains?: readonly string[];
-    /** Maximum number of suggestions to show. @default 6 */
+    /** Most suggestions shown at once. @default 6 */
     maxSuggestions?: number;
-    /** Floating label. Rendered as an `InputLabel` and linked automatically. */
-    label?: ReactNode;
-    /** Helper / error text shown below the control and linked via `aria-describedby`. */
-    helperText?: ReactNode;
-    /** Placeholder shown in the text input. */
-    placeholder?: string;
-    /** Puts the control in an error state. */
-    error?: boolean;
-    /** Marks the control as required. */
-    required?: boolean;
-    /** Disables the control. */
-    disabled?: boolean;
-    /** Blur handler (e.g. for react-hook-form touched state). */
-    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * When focus leaves the field, offers a fix for a mistyped domain below it:
+     * "Mente du anna@gmail.com?" for `anna@gnail.con`, with the address as a
+     * button that puts it in the field. The value never changes by itself, and
+     * validation is not affected. See `suggestEmailCorrection`.
+     * @default true
+     */
+    suggestCorrection?: boolean;
+    /**
+     * What the browser may fill in. The default lets it offer the user's own
+     * address; pass `"off"` when the address is somebody else's.
+     * @default "email"
+     */
+    autoComplete?: string;
 };
 /**
- * Email text field that suggests common domains in a dropdown once the user
- * types `@`. Works controlled (`value` + `onChange`) or uncontrolled
- * (`defaultValue`), standalone (`label` / `helperText`) or inside a
- * `FormControl`.
+ * Email text field that suggests common domains in a list once the user
+ * types `@`, on Base UI's `Autocomplete`, in the same box as `Input`. The
+ * text is the value: a suggestion only saves typing.
  *
+ * ```tsx
+ * <EmailInput label="E-post" value={email} onValueChange={setEmail} />
+ * ```
  */
-export declare const EmailInput: import('react').ForwardRefExoticComponent<EmailInputProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function EmailInput({ value, defaultValue, onValueChange, domains, maxSuggestions, autoComplete, suggestCorrection, name, onBlur, ref, ...field }: EmailInputProps): import("react").JSX.Element;

package/dist/components/form/field-parts.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+/** The ` *` after the label of a required control. Decorative: `required` is on the control. */
+export declare const RequiredAsterisk: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+type FieldHelperTextProps = {
+    /** Id the control points at with `aria-describedby`. */
+    id: string;
+    error: boolean;
+    /** The text is a warning: amber, and announced politely. */
+    warning?: boolean;
+    children: ReactNode;
+};
+/**
+ * Helper text below a control. Announced as an alert while in error, and as a
+ * status while it is a warning.
+ */
+export declare function FieldHelperText({ id, error, warning, children, }: FieldHelperTextProps): import("react").JSX.Element;
+/**
+ * What the line below a control shows: the warning while there is one,
+ * otherwise the helper text. An error wins over a warning, so with `error`
+ * the line is the helper text (where a form puts its error message).
+ */
+export declare function fieldMessage(helperText: ReactNode, warning: ReactNode, error: boolean): {
+    content: ReactNode;
+    warning: boolean;
+};
+type FieldGroupLabelProps = {
+    /** Id the group points at with `aria-labelledby`. It sits on the text alone. */
+    id: string;
+    /**
+     * Id of a single control this labels. The text is then a real `<label>`, so
+     * a click on it moves focus to the control.
+     */
+    htmlFor?: string;
+    /** Help text behind an info button next to the label. */
+    tooltip?: ReactNode;
+    required?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+};
+/**
+ * The label above a group of choices, or above a field whose label sits
+ * outside it. The element is not a `<label>`: it names its control through
+ * `aria-labelledby`, and a `<label>` around the info button would pass clicks
+ * on the text to that button. With `htmlFor`, the text alone is a `<label>`.
+ */
+export declare function FieldGroupLabel({ id, htmlFor, tooltip, required, error, disabled, children, }: FieldGroupLabelProps): import("react").JSX.Element;
+export {};

package/dist/components/form/index.d.ts

@@ -1,19 +1,13 @@
+export * from './amount-slider';
 export * from './autocomplete';
 export * from './checkbox';
-export * from './datepicker';
 export * from './email-input';
-export * from './fields';
-export * from './form-control';
-export * from './form-control/form-helper-text';
 export * from './input';
-export * from './input-label';
 export * from './multi-select';
 export * from './number-input';
 export * from './phone-number-input';
-export * from './radio';
-export * from './radio-card';
-export * from './radio-circle';
+export * as RadioGroup from './radio';
+export * as RadioCard from './radio-card';
 export * from './select';
 export * from './slider';
 export * from './switch';
-export { FormControlLabel, InputAdornment, type FormControlLabelProps, type InputAdornmentProps, } from '@mui/material';

package/dist/components/form/input.d.ts

@@ -1,19 +1,63 @@
-import { OutlinedInputProps } from '@mui/material';
-import { ReactNode } from 'react';
-export type InputProps = OutlinedInputProps & {
-    /** Floating label. Rendered as an `InputLabel` and linked automatically. */
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode, Ref } from 'react';
+type NativeInputProps = Omit<ComponentPropsWithoutRef<"input">, "value" | "defaultValue" | "size" | "color" | "children" | "className" | "style">;
+export type InputProps = NativeInputProps & {
+    /** Floating label, linked to the input for you. */
     label?: ReactNode;
-    /** Helper / error text shown below the control and linked via `aria-describedby`. */
+    /** Helper / error text shown below the input and linked via `aria-describedby`. */
     helperText?: ReactNode;
+    /** Puts the input, its label and its helper text into the error state. */
+    error?: boolean;
+    /**
+     * A message for a value that is allowed but unusual, such as an unusually
+     * high amount. Shown in amber in place of the helper text, without the
+     * error state: the field is not marked invalid. `error` wins when both are set.
+     */
+    warning?: ReactNode;
+    /** The text (controlled). Pair with `onValueChange`. */
+    value?: string;
+    /** The text when first rendered, for uncontrolled use. */
+    defaultValue?: string;
+    /** Called with the new text on every change. `onChange` still gets the event. */
+    onValueChange?: (value: string) => void;
+    /** Content before the text, inside the field, e.g. an icon. */
+    startAdornment?: ReactNode;
+    /** Content after the text, inside the field, e.g. a show / hide button. */
+    endAdornment?: ReactNode;
+    /**
+     * Renders a `<textarea>` that grows with its content. The native attributes
+     * and event handlers then apply to the textarea.
+     */
+    multiline?: boolean;
+    /** Fixed number of rows when `multiline`. */
+    rows?: number;
+    /** Fewest rows shown when `multiline`. */
+    minRows?: number;
+    /** Most rows shown when `multiline`, before it scrolls. */
+    maxRows?: number;
+    /** Class on the outermost element, for layout. */
+    className?: string;
+    /** Inline style on the outermost element, for layout. */
+    style?: CSSProperties;
+    /** The `<input>`, or the `<textarea>` when `multiline`. */
+    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
 };
 /**
- * Text input built on MUI's `OutlinedInput`.
+ * Text input, on Base UI's `Input` primitive. The label, the helper text and
+ * the ids that link them to the input are all rendered and wired for you.
  *
- * Works two ways:
- * - **Standalone (all-in-one):** pass `label` / `helperText` and it renders its
- *   own `FormControl`, label and helper text, generating and wiring all ids for
- *   you. Pass `multiline` (+ `minRows`) for a textarea.
- * - **Composed:** drop it inside a `FormControl` next to `InputLabel` /
- *   `FormHelperText` and it picks up the shared ids from context.
+ * Takes the native `<input>` attributes (`type`, `name`, `placeholder`,
+ * `autoComplete`, `inputMode`, `maxLength`, `onKeyDown`, …), which land on the
+ * input itself. `className` and `style` go on the outermost element. Pass
+ * `multiline` (and `minRows`) for a textarea.
+ *
+ * ```tsx
+ * <Input
+ *   label="E-post"
+ *   helperText="Vi deler den aldri."
+ *   value={email}
+ *   onValueChange={setEmail}
+ * />
+ * ```
  */
-export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export declare function Input({ label, helperText, error, warning, value, defaultValue, onValueChange, startAdornment, endAdornment, multiline, rows, minRows, maxRows, className, style, ref, id, disabled, required, placeholder, "aria-describedby": ariaDescribedBy, ...inputAttributes }: InputProps): import("react").JSX.Element;
+export {};