@leabankab/component-library 7.2.0 → 8.0.0

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,60 @@
+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;
+    /** 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;
+};
+export declare function ComboField({ label, helperText, error, 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, }: ComboFieldProps): import("react").JSX.Element;
+export {};

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

@@ -1,35 +1,29 @@
-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>;
+    /**
+     * 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, name, ...field }: EmailInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+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;
+    children: ReactNode;
+};
+/** Helper text below a control. Announced as an alert while in error. */
+export declare function FieldHelperText({ id, error, children }: FieldHelperTextProps): import("react").JSX.Element;
+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,57 @@
-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;
+    /** 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, 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 {};

package/dist/components/form/multi-select.d.ts

@@ -1,27 +1,25 @@
-import { SelectChangeEvent } from '@mui/material';
 import { ReactNode } from 'react';
-import { SelectOption, SelectProps } from './select';
-export type MultiSelectProps = Omit<SelectProps, "multiple" | "value" | "defaultValue" | "onChange" | "renderValue" | "children"> & {
-    /** Options rendered as checkbox menu items. */
-    options: SelectOption[];
+import { SelectFieldBaseProps, SelectOption } from './select-field';
+export type MultiSelectProps<Value extends string = string> = SelectFieldBaseProps & {
+    /** The choices, shown with a checkbox each. */
+    options: readonly SelectOption<Value>[];
     /** Currently selected values (controlled). */
-    value?: string[];
+    value?: Value[];
     /** Initially selected values (uncontrolled). */
-    defaultValue?: string[];
+    defaultValue?: Value[];
     /** Called with the next array of selected values. */
-    onChange?: (value: string[], event: SelectChangeEvent<string[]>) => void;
+    onValueChange?: (value: Value[]) => void;
     /** Minimum number of values that must stay selected. @default 1 */
     min?: number;
     /** Maximum number of values that can be selected. Unlimited when omitted. */
     max?: number;
     /** Override how the selected values are summarised in the closed control. */
-    renderValue?: (selected: string[]) => ReactNode;
+    renderValue?: (selected: Value[]) => ReactNode;
 };
 /**
- * Multi-select built on our `Select` (so it inherits the auto-wired ids and the
- * standalone / composed `FormControl` behaviour). Each option renders as a
- * checkbox menu item, and the closed control shows the selection as removable
- * chips by default.
+ * Multi-select on Base UI's `Select`, in the same box as `Select`, with the
+ * label, the helper text and their ids wired. Each option has a checkbox, and
+ * the closed control shows the selection as removable chips by default.
  *
  * The selection is bounded by `min` (default 1, so the last value can't be
  * removed) and `max` (unlimited by default): options that would breach either
@@ -29,4 +27,4 @@ export type MultiSelectProps = Omit<SelectProps, "multiple" | "value" | "default
  *
  * Works controlled (`value`) or uncontrolled (`defaultValue`).
  */
-export declare const MultiSelect: import('react').ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare function MultiSelect<Value extends string = string>({ options, value, defaultValue, onValueChange, renderValue, min, max, disabled, ref, ...rest }: MultiSelectProps<Value>): import("react").JSX.Element;

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

@@ -1,10 +1,17 @@
 import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
-import { ReactNode } from 'react';
-export type NumberInputProps = BaseNumberField.Root.Props & {
-    /** Floating label. Rendered as an `InputLabel` and linked automatically. */
+import { CSSProperties, ReactNode, Ref } from 'react';
+export type NumberInputProps = Omit<BaseNumberField.Root.Props, "ref" | "inputRef" | "render" | "className" | "style"> & {
+    /** The visible `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+    /** The label, linked to the input for you. */
     label?: ReactNode;
-    /** Where the label sits when this component renders one itself. @default "inside" */
+    /** Floating inside the field, or as a line above it. @default "inside" */
     labelPlacement?: "inside" | "outside";
+    /**
+     * Help text behind an info button next to the label. Needs
+     * `labelPlacement="outside"`: a floating label has no room for it.
+     */
+    tooltip?: ReactNode;
     /** Helper / error text shown below the control and linked via `aria-describedby`. */
     helperText?: ReactNode;
     /** Renders the field in its error state (border, label and helper colour). */
@@ -13,8 +20,6 @@ export type NumberInputProps = BaseNumberField.Root.Props & {
     required?: boolean;
     /** Disables the input and the stepper buttons. */
     disabled?: boolean;
-    /** Control density. @default "medium" */
-    size?: "small" | "medium";
     /** Placeholder shown while the field is empty. */
     placeholder?: string;
     /**
@@ -33,20 +38,21 @@ export type NumberInputProps = BaseNumberField.Root.Props & {
      * @default true
      */
     showSteppers?: boolean;
+    /** Class on the outermost element, for layout. */
+    className?: string;
+    /** Inline style on the outermost element, for layout. */
+    style?: CSSProperties;
 };
 /**
  * Numeric input built on Base UI's `NumberField` (value / min / max / step /
- * formatting) and MUI's `OutlinedInput` (look), with stacked increment /
- * decrement buttons.
+ * formatting), in the same box as `Input`, with increment / decrement buttons.
  *
- * Works two ways, like `Input`:
- * - **Standalone (all-in-one):** pass `label` / `helperText` and it renders its
- *   own `FormControl`, label and helper text, wiring all ids.
- * - **Composed:** drop it inside a `FormControl` and it picks up the shared ids
- *   and state from context.
+ * The label, the helper text and the ids that link them to the input are all
+ * rendered and wired for you. Set `labelPlacement="outside"` for a label above
+ * the field, which can also carry a `tooltip`.
  *
  * For money and other open-ended amounts, set `showSteppers={false}` and use a
  * `unit` (e.g. `kr`) instead — a stepper is only helpful for small bounded
  * counts.
  */
-export declare function NumberInput({ label, labelPlacement, helperText, error, required, disabled, id, size, placeholder, startIcon, unit, showSteppers, ...rest }: NumberInputProps): import("react").JSX.Element;
+export declare function NumberInput({ label, labelPlacement, tooltip, helperText, error, required, disabled, id, placeholder, startIcon, unit, showSteppers, className, style, ref, ...rest }: NumberInputProps): import("react").JSX.Element;

package/dist/components/form/phone-number-input/phone-number-input.d.ts

@@ -1,5 +1,4 @@
-import { OutlinedInputProps } from '@mui/material';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode, Ref } from 'react';
 import { CountryCode } from './countries';
 /** Details reported alongside every change so the consumer can react to validity. */
 export interface PhoneNumberMeta {
@@ -10,44 +9,56 @@ export interface PhoneNumberMeta {
     /** Whether the current number is a valid phone number for the country. */
     isValid: boolean;
 }
-export type PhoneNumberInputProps = Omit<OutlinedInputProps, "value" | "defaultValue" | "onChange" | "type" | "startAdornment"> & {
-    /** Floating label. Rendered as an `InputLabel` and linked automatically. */
+type NativeInputProps = Omit<ComponentPropsWithoutRef<"input">, "value" | "defaultValue" | "onChange" | "type" | "size" | "color" | "children" | "className" | "style">;
+export type PhoneNumberInputProps = NativeInputProps & {
+    /** 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 input, its label and its helper text into the error state. When
+     * set, true or false, the built-in check on blur stays out of it.
+     */
+    error?: boolean;
     /** Selected country (controlled). Pair with `onCountryChange`. */
     country?: CountryCode;
     /** Initial country when uncontrolled. Defaults to the country for the active locale. */
     defaultCountry?: CountryCode;
     /** Fired when the user picks a different country. */
     onCountryChange?: (country: CountryCode) => void;
-    /** The national number as displayed (controlled). Pair with `onChange`. */
+    /** The national number as displayed (controlled). Pair with `onValueChange`. */
     value?: string;
     /** Initial national number when uncontrolled. */
     defaultValue?: string;
     /** Fired on every keystroke with the formatted national number and validity meta. */
-    onChange?: (value: string, meta: PhoneNumberMeta) => void;
+    onValueChange?: (value: string, meta: PhoneNumberMeta) => void;
     /**
      * Show a built-in "invalid number" error once the field is blurred with a
      * non-empty, invalid value. Ignored when the consumer drives `error`.
      * @default true
      */
     validateOnBlur?: boolean;
+    /** Class on the outermost element, for layout. */
+    className?: string;
+    /** Inline style on the outermost element, for layout. */
+    style?: CSSProperties;
+    /** The phone number `<input>`. */
+    ref?: Ref<HTMLInputElement>;
 };
 /**
- * Phone number input with a searchable country-code picker on the left, built
- * on MUI's `OutlinedInput`. The number is formatted as you type and validated
+ * Phone number input with a searchable country-code picker at its start, in
+ * the same box as `Input`. The number is formatted as you type and validated
  * with `libphonenumber-js`. Lea Bank's core markets (Finland, Sweden, Norway,
  * Spain) are pinned to the top of the country list; the default country follows
  * the active locale.
  *
- * Works two ways, like `Input`:
- * - **Standalone (all-in-one):** pass `label` / `helperText` and it renders its
- *   own `FormControl`, floating label and helper text, wiring all ids.
- * - **Composed:** drop it inside a `FormControl` and it picks up the shared ids.
+ * The label, the helper text and the ids that link them to the input are all
+ * rendered and wired for you. Takes the native `<input>` attributes (`name`,
+ * `placeholder`, `onBlur`, `autoComplete`, …), which land on the number input.
  *
  * Both country and number can be **controlled** (`country` + `onCountryChange`,
- * `value` + `onChange`) or left **uncontrolled** (`defaultCountry` /
+ * `value` + `onValueChange`) or left **uncontrolled** (`defaultCountry` /
  * `defaultValue`).
  */
-export declare function PhoneNumberInput({ label, helperText, error, required, disabled, id, country, defaultCountry, onCountryChange, value, defaultValue, onChange, onBlur, validateOnBlur, ...rest }: PhoneNumberInputProps): import("react").JSX.Element;
+export declare function PhoneNumberInput({ label, helperText, error, required, disabled, id, country, defaultCountry, onCountryChange, value, defaultValue, onValueChange, onBlur, validateOnBlur, className, style, ref, "aria-describedby": ariaDescribedBy, ...inputAttributes }: PhoneNumberInputProps): import("react").JSX.Element;
+export {};