@leabankab/component-library 7.3.0 → 8.1.0

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-unit.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Currency } from '../../hooks/country/countries';
+import { Language } from '../../i18n';
+/**
+ * A unit the library writes for you, in the language of `LeaProvider`:
+ *
+ * - `{ type: "years" }`: "år", "vuotta", "años". The word follows the number
+ *   in the field, so Finnish and Spanish read "1 vuosi" and "2 vuotta",
+ *   "1 año" and "2 años".
+ * - `{ type: "currency" }`: the symbol of the currency, "kr" or "€". The
+ *   currency is the one of the language (`no` NOK, `se` SEK, `fi` and `es`
+ *   EUR); pass `currency` for another.
+ */
+export type NumberInputUnitSpec = {
+    type: "years";
+} | {
+    type: "currency";
+    currency?: Currency;
+};
+/** What `NumberInput` takes as `unit`: your own content, or a unit spec. */
+export type NumberInputUnit = ReactNode | NumberInputUnitSpec;
+/** A spec, as opposed to a string, a number or an element. */
+export declare function isUnitSpec(unit: NumberInputUnit): unit is NumberInputUnitSpec;
+/**
+ * The text of a unit spec for a language. `value` picks the plural of "years"
+ * and is ignored for a currency; an empty field counts as zero.
+ */
+export declare function formatUnit(unit: NumberInputUnitSpec, language: Language, value: number | null | undefined): string;

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

@@ -1,20 +1,33 @@
 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';
+import { NumberInputUnit } from './number-input-unit';
+export type { NumberInputUnit, NumberInputUnitSpec } from './number-input-unit';
+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). */
     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;
     /** Reflects `required` onto the control and the label asterisk. */
     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;
     /**
@@ -23,30 +36,45 @@ export type NumberInputProps = BaseNumberField.Root.Props & {
      */
     startIcon?: ReactNode;
     /**
-     * Trailing unit shown inside the field (e.g. `kr`, `kr/mnd`). Rendered as real
-     * text linked to the input via `aria-describedby` — not a placeholder — so it
-     * is announced and survives typing.
+     * Trailing unit shown inside the field. Rendered as real text linked to the
+     * input via `aria-describedby` — not a placeholder — so it is announced and
+     * survives typing.
+     *
+     * - Your own content: `unit="kr/mnd"`. It is not translated.
+     * - `{ type: "years" }`: "år", "vuotta" or "años" in the language of
+     *   `LeaProvider`, in the plural that fits the number in the field.
+     * - `{ type: "currency" }`: "kr" or "€" for the language (`{ type:
+     *   "currency", currency: "EUR" }` for another currency).
      */
-    unit?: ReactNode;
+    unit?: NumberInputUnit;
     /**
      * Whether to render the increment / decrement stepper buttons.
      * @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.
+ *
+ * `unit` takes your own text, or a unit the library writes in the language of
+ * `LeaProvider`:
+ *
+ * ```tsx
+ * <NumberInput label="Lånebeløp" unit={{ type: "currency" }} showSteppers={false} />
+ * <NumberInput label="Nedbetalingstid" unit={{ type: "years" }} min={1} max={15} />
+ * ```
  */
-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, warning, required, disabled, id, placeholder, startIcon, unit, showSteppers, className, style, ref, value, defaultValue, onValueChange, ...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,75 @@ 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;
+    /**
+     * The countries the number may be from. With one, there is no country
+     * list: its dial code stands fixed at the start of the field (`+46`). With
+     * several, the list holds these alone.
+     *
+     * Either way the value is the national number without the trunk `0`
+     * (`70 123 45 67`): a pasted `+46 70…`, `0046 70…` or `070…` is cleaned up to
+     * it, and when focus leaves the field. A number of another country is
+     * invalid. Left out, every country is in the list and the number is kept as
+     * typed, as before.
+     */
+    countries?: readonly CountryCode[];
+    /**
+     * Accept mobile numbers only: a landline is invalid, with a message of its
+     * own ("Skriv inn et mobilnummer"). Applies to Sweden, Finland, Norway and
+     * Spain, as `validateMobileNumber`; a number of another country is checked
+     * as any number. `meta.isValid` follows it.
+     */
+    mobileOnly?: boolean;
     /**
      * 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, countries, mobileOnly, validateOnBlur, className, style, ref, "aria-describedby": ariaDescribedBy, ...inputAttributes }: PhoneNumberInputProps): import("react").JSX.Element;
+export {};

package/dist/components/form/radio-card.d.ts

@@ -1,53 +1,61 @@
-import { SxProps, Theme } from '@mui/material';
 import { LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-export type RadioCardProps = {
-    /** Value submitted to the surrounding `RadioGroup` when this card is chosen. */
-    value: string | number | boolean;
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { Option } from './radio';
+import { RadioSize } from './radio-circle';
+import { RadioCardSize, RadioGroupBaseProps, RadioValue } from './radio-group-root';
+export type RootProps<T extends RadioValue = RadioValue> = {
+    /** What `onValueChange` on the group is called with when this card is picked. */
+    value: T;
     /** `"horizontal"` (indicator + text in a row) or `"vertical"` (icon stacked above text). */
     orientation?: "horizontal" | "vertical";
+    /** Disables this card only. */
     disabled?: boolean;
-    /** Controlled checked state for standalone use (ignored inside a `RadioGroup`). */
-    checked?: boolean;
-    /** Change handler for standalone use (ignored inside a `RadioGroup`). */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    sx?: SxProps<Theme>;
+    /** Padding of the card. Defaults to the group's `size`. */
+    size?: RadioCardSize;
+    /** Class on the card. */
+    className?: string;
+    /** Inline style on the card. */
+    style?: CSSProperties;
+    /** The card, which is a `<label>` around the radio. */
+    ref?: Ref<HTMLLabelElement>;
     children?: ReactNode;
-    size?: "sm" | "lg";
 };
 /**
- * A selectable card. Not a MUI component — it wraps our `Radio` for the actual
- * selection (group membership, keyboard, a11y) and renders a styled, fully
- * clickable surface around composable pieces: `RadioCardContent` (wraps the
- * text), `RadioCardIndicator` (optional), `RadioCardIcon`, `RadioCardLabel`,
- * `RadioCardDescription`.
+ * One choice in a `RadioCard.Group`, for when the `options` list is not
+ * enough. The whole card is clickable, and it is built from composable
+ * pieces: `RadioCard.Content` (wraps the text), `RadioCard.Indicator`
+ * (optional), `RadioCard.Icon`, `RadioCard.Label`, `RadioCard.Description`.
  *
  * Children are laid out as plain flex items, so the indicator is just another
- * child — place it before or after `RadioCardContent` and it sits at that edge
+ * child — place it before or after `RadioCard.Content` and it sits at that edge
  * (the content grows to fill the row, pushing the indicator to the side).
  *
- * Place cards inside a `RadioGroup` so selection stays mutually exclusive; the
- * card derives its checked styling from the group automatically.
+ * The group holds the value, so a `RadioCard.Root` only works inside one.
  *
  * ```tsx
- * <RadioGroup value={value} onChange={(_, v) => setValue(v)}>
- *   <RadioCard value="10">
- *     <RadioCardContent>
- *       <RadioCardLabel>1316 kr/mnd</RadioCardLabel>
- *       <RadioCardDescription>Over 10 år</RadioCardDescription>
- *     </RadioCardContent>
- *     <RadioCardIndicator />
- *   </RadioCard>
- * </RadioGroup>
+ * <RadioCard.Group label="Nedbetalingstid" value={value} onValueChange={setValue}>
+ *   <RadioCard.Root value={10}>
+ *     <RadioCard.Content>
+ *       <RadioCard.Label>1316 kr/mnd</RadioCard.Label>
+ *       <RadioCard.Description>Over 10 år</RadioCard.Description>
+ *     </RadioCard.Content>
+ *     <RadioCard.Indicator />
+ *   </RadioCard.Root>
+ * </RadioCard.Group>
  * ```
  */
-export declare const RadioCard: import('react').ForwardRefExoticComponent<RadioCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function Root<T extends RadioValue = RadioValue>({ value, orientation, disabled, size, className, style, ref, children, }: RootProps<T>): import("react").JSX.Element;
+export type IndicatorProps = {
+    /** Size of the circle. @default "md" */
+    size?: RadioSize;
+};
 /**
- * Optional radio dot for a `RadioCard`. Reuses the shared `RadioCircle` and
- * reflects the card's checked state. Omit it for icon-only cards.
+ * Optional radio dot for a `RadioCard.Root`. It is a picture of the card's
+ * state, drawn like a `RadioGroup.Item`; the card's own radio is what gets
+ * picked. Omit it for icon-only cards.
  */
-export declare const RadioCardIndicator: () => import("react").JSX.Element;
-export type RadioCardIconProps = {
+export declare const Indicator: ({ size }: IndicatorProps) => import("react").JSX.Element;
+export type IconProps = {
     /** Icon box size (predefined, overridable). */
     size?: number | string;
     icon: LucideIcon;
@@ -56,22 +64,65 @@ export type RadioCardIconProps = {
  * Fixed-size icon slot so every card's icon renders at the same size regardless
  * of the icon passed in.
  */
-export declare const RadioCardIcon: ({ size, icon }: RadioCardIconProps) => import("react").JSX.Element;
+export declare const Icon: ({ size, icon }: IconProps) => import("react").JSX.Element;
 /**
- * Wraps the text lines (`RadioCardLabel` / `RadioCardDescription`) into a column.
- * Grows to fill the row in `horizontal` orientation — so a sibling
- * `RadioCardIndicator` is pushed to the opposite edge — and centers in
+ * Wraps the text lines (`RadioCard.Label` / `RadioCard.Description`) into a
+ * column. Grows to fill the row in `horizontal` orientation — so a sibling
+ * `RadioCard.Indicator` is pushed to the opposite edge — and centers in
  * `vertical`.
  */
-export declare const RadioCardContent: ({ children, sx, }: {
+export declare const Content: ({ children, className, style, }: {
     children: ReactNode;
-    sx?: SxProps<Theme>;
+    className?: string;
+    style?: CSSProperties;
 }) => import("react").JSX.Element;
-/** Primary line of a `RadioCard`. */
-export declare const RadioCardLabel: ({ children }: {
+/** Primary line of a `RadioCard.Root`. */
+export declare const Label: ({ children }: {
     children: ReactNode;
 }) => import("react").JSX.Element;
-/** Secondary, muted line of a `RadioCard`. */
-export declare const RadioCardDescription: ({ children }: {
+/** Secondary, muted line of a `RadioCard.Root`. */
+export declare const Description: ({ children }: {
     children: ReactNode;
 }) => import("react").JSX.Element;
+export type GroupProps<T extends RadioValue = string> = RadioGroupBaseProps<T> & {
+    /**
+     * The choices, each rendered as a card with a radio dot and its label.
+     * For icons, descriptions or cards without the dot, pass `RadioCard.Root`
+     * children instead.
+     */
+    options?: Option<T>[];
+    /** How many cards sit side by side. @default 1 */
+    columns?: number;
+    /**
+     * Padding of the cards. A `size` on a `RadioCard.Root` wins.
+     * @default "lg"
+     */
+    size?: RadioCardSize;
+};
+/**
+ * A question with one answer, as a set of selectable cards, on Base UI's
+ * accessible `RadioGroup` primitive. The label, the tooltip, the helper text
+ * and the error state are handled for you. Arrow keys move between the cards.
+ *
+ * Pass the choices as `options`. Values are compared with `===` and can be
+ * strings, numbers or booleans, so a yes / no question can hold a real
+ * `boolean`:
+ *
+ * ```tsx
+ * <RadioCard.Group
+ *   label="Vil du legge til en medsøker?"
+ *   columns={2}
+ *   size="sm"
+ *   options={[
+ *     { value: true, label: "Ja" },
+ *     { value: false, label: "Nei" },
+ *   ]}
+ *   value={hasCoApplicant}
+ *   onValueChange={setHasCoApplicant}
+ * />
+ * ```
+ *
+ * For richer cards, pass `RadioCard.Root` children.
+ */
+export declare function Group<T extends RadioValue = string>({ options, columns, size, children, ...rest }: GroupProps<T>): import("react").JSX.Element;
+export type { Option, RadioCardSize as Size, RadioValue as Value };

package/dist/components/form/radio-circle.d.ts

@@ -1,19 +1,20 @@
-import { SxProps, Theme } from '@mui/material';
-export type RadioSize = "small" | "medium";
+export type RadioSize = "sm" | "md";
+/** The classes of the radio visual, for the real control to wear. */
+export declare const radioCircleClassName: string;
+export declare const radioDotClassName: string;
 export type RadioCircleProps = {
-    /** When true, fills the circle and springs the dot in. */
+    /**
+     * Fills the circle and springs the dot in. Leave it out when a parent
+     * selector decides instead, as `RadioCard.Root` does for its indicator.
+     */
     checked?: boolean;
     size?: RadioSize;
-    sx?: SxProps<Theme>;
+    className?: string;
 };
 /**
- * The bare radio visual — a bordered circle with a dot that springs in when
- * `checked`. Single source of truth shared by `Radio` (as its `icon` /
- * `checkedIcon`) and `RadioCardIndicator`, so the look stays identical wherever a
- * radio appears.
- *
- * Self-styled (not a MUI theme override) because it renders outside `MuiRadio`
- * too. When used as `Radio`'s icons, swapping `<RadioCircle />` ⇄
- * `<RadioCircle checked />` reconciles in place, so the dot animates.
+ * Internal. The radio visual as a picture only, for places where something else
+ * is the control: `RadioCard.Indicator` shows it inside a card, and the card's
+ * own hidden radio is what gets picked. It looks exactly like
+ * `RadioGroup.Item`, which puts the same classes on the real control.
  */
-export declare const RadioCircle: ({ checked, size, sx, }: RadioCircleProps) => import("react").JSX.Element;
+export declare const RadioCircle: ({ checked, size, className, }: RadioCircleProps) => import("react").JSX.Element;

package/dist/components/form/radio-group-root.d.ts

@@ -0,0 +1,88 @@
+import { CSSProperties, FocusEvent, ReactNode, Ref } from 'react';
+import { RadioSize } from './radio-circle';
+/** What a radio can stand for. Compared with `===`, so `true` is not `"true"`. */
+export type RadioValue = string | number | boolean;
+export type RadioCardSize = "sm" | "lg";
+type RadioGroupContextValue = {
+    /** Size of the radio circle, set by `RadioGroup.Root`. */
+    size?: RadioSize;
+    /** Size of the cards, set by `RadioCard.Group`. */
+    cardSize?: RadioCardSize;
+};
+/** Reads the surrounding group. A radio cannot work without one. */
+export declare const useRadioGroupContext: (component: string) => RadioGroupContextValue;
+/**
+ * Requires an accessible name so the group is never nameless. Provide a
+ * visible `label`, or an `aria-label` / `aria-labelledby` when the question
+ * is written somewhere else on the page.
+ */
+type RadioGroupAccessibleName = {
+    label: ReactNode;
+    "aria-label"?: never;
+    "aria-labelledby"?: never;
+} | {
+    label?: never;
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    label?: never;
+    "aria-label"?: never;
+    "aria-labelledby": string;
+};
+/** The props `RadioGroup.Root` and `RadioCard.Group` have in common. */
+export type RadioGroupBaseProps<T extends RadioValue> = RadioGroupAccessibleName & {
+    /** Help text behind an info button next to the label. Needs a `label`. */
+    tooltip?: ReactNode;
+    /** Helper / error text shown below the options and linked via `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Puts the group and its helper text into the error state. */
+    error?: boolean;
+    /** The chosen value (controlled). `null` means nothing is chosen. */
+    value?: T | null;
+    /** The chosen value when first rendered, for uncontrolled use. */
+    defaultValue?: T;
+    /** Called with the value of the option the user picks. */
+    onValueChange?: (value: T) => void;
+    /** Submits the choice under this name when inside a form. */
+    name?: string;
+    /** Disables every option. */
+    disabled?: boolean;
+    /** Marks the group as required and adds the asterisk to the label. */
+    required?: boolean;
+    /** Called when focus leaves the group, not when it moves between options. */
+    onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
+    /** Id of the element with the `radiogroup` role. */
+    id?: string;
+    /** Extra ids describing the group, 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>` of the radio that takes focus: the chosen one, or the
+     * first that is not disabled. It is hidden, but `ref.current.focus()`
+     * moves focus to the visible radio.
+     */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * `RadioGroup.Item` / `RadioCard.Root` elements, instead of or after `options`.
+     */
+    children?: ReactNode;
+};
+type RadioGroupRootProps<T extends RadioValue> = RadioGroupBaseProps<T> & {
+    size?: RadioSize;
+    cardSize?: RadioCardSize;
+    /** Layout of the options. */
+    optionsClassName: string;
+    optionsStyle?: CSSProperties;
+    /** `"many"` when the options sit in more than one column. */
+    optionsDataColumns?: string;
+};
+/**
+ * Internal. Everything `RadioGroup.Root` and `RadioCard.Group` share: Base UI's
+ * `RadioGroup`, which holds the value and moves focus with the arrow keys,
+ * and the label, tooltip, helper text and error state around the options.
+ */
+export declare function RadioGroupRoot<T extends RadioValue>({ label, tooltip, helperText, error, value, defaultValue, onValueChange, name, disabled, required, onBlur, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, size, cardSize, optionsClassName, optionsStyle, optionsDataColumns, children, }: RadioGroupRootProps<T>): import("react").JSX.Element;
+export {};