@leabankab/component-library 7.3.0 → 8.0.0

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 {};

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 {};

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

@@ -1,36 +1,80 @@
-import { RadioProps as MuiRadioProps, RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { RadioSize } from './radio-circle';
-export type { RadioSize };
-/** Reads the `size` set on the surrounding `RadioGroup`, if any. */
-export declare const useRadioGroupSize: () => RadioSize | undefined;
-export type RadioProps = Omit<MuiRadioProps, "color" | "size"> & {
-    size?: RadioSize;
+import { RadioGroupBaseProps, RadioValue } from './radio-group-root';
+export type { RadioSize as Size, RadioValue as Value };
+/**
+ * One choice in the `options` list of a `RadioGroup.Root` or `RadioCard.Group`.
+ */
+export type Option<T extends RadioValue = string> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
 };
-export type RadioGroupProps = MuiRadioGroupProps & {
-    /** Size applied to all child `Radio` components unless overridden per-item. */
+export type ItemProps<T extends RadioValue = RadioValue> = {
+    /** What `onValueChange` on the group is called with when this radio is picked. */
+    value: T;
+    /** The text next to the radio. Without it, pass `aria-label`. */
+    label?: ReactNode;
+    /** Disables this radio only. */
+    disabled?: boolean;
+    /** Size of the circle. Defaults to the group's `size`. */
     size?: RadioSize;
+    /** Id of the radio itself, the element with the `radio` role. */
+    id?: string;
+    /** Names the radio when it has no `label`. */
+    "aria-label"?: string;
+    /** Class on the outermost element. */
+    className?: string;
+    /** Inline style on the outermost element. */
+    style?: CSSProperties;
+    /**
+     * The `<input type="radio">` that holds the value. It is hidden, but
+     * `ref.current.focus()` moves focus to the visible radio.
+     */
+    ref?: Ref<HTMLInputElement>;
 };
 /**
- * Radio built on MUI's `Radio`, styled by the global theme (`radio.theme.ts`).
- * Kept composite — pair it with `FormControlLabel` for a label instead of
- * forwarding label / typography props, and place it inside a `RadioGroup` so
- * selection stays mutually exclusive:
+ * One choice in a `RadioGroup.Root`, for when the `options` list is not enough:
+ * a label with markup in it, or content between the choices. The group holds
+ * the value, so a `RadioGroup.Item` only works inside one.
  *
  * ```tsx
- * <RadioGroup value={value} onChange={(_, v) => setValue(v)}>
- *   <FormControlLabel value="a" control={<Radio />} label="A" />
- *   <FormControlLabel value="b" control={<Radio />} label="B" />
- * </RadioGroup>
+ * <RadioGroup.Root label="Betaling" value={value} onValueChange={setValue}>
+ *   <RadioGroup.Item value="monthly" label="Månedlig" />
+ *   <RadioGroup.Item value="yearly" label={<>Årlig <Chip label="Spar 10 %" /></>} />
+ * </RadioGroup.Root>
  * ```
  */
-export declare const Radio: import('react').ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function Item<T extends RadioValue = RadioValue>({ value, label, disabled, size, id, "aria-label": ariaLabel, className, style, ref, }: ItemProps<T>): import("react").JSX.Element;
+export type RootProps<T extends RadioValue = string> = RadioGroupBaseProps<T> & {
+    /** The choices, each rendered as a radio with its label. */
+    options?: Option<T>[];
+    /**
+     * Size of the radio circles. A `size` on a `RadioGroup.Item` wins.
+     * @default "md"
+     */
+    size?: RadioSize;
+};
 /**
- * Thin wrapper around MUI's `RadioGroup`. Radios are only meaningful as a
- * mutually-exclusive set, so reach for this rather than placing a bare `Radio`.
+ * A question with one answer, as a list of radios, on Base UI's accessible
+ * `RadioGroup` primitive. The label, the helper text and the error state are
+ * handled for you. Arrow keys move between the choices.
+ *
+ * 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`. For choices that need more than a label, pass `RadioGroup.Item`
+ * children.
  *
- * When rendered inside our `FormControl` it points its `aria-labelledby` at the
- * surrounding `FormLabel` automatically (via the shared label id), so the group
- * gets an accessible name without the consumer wiring it. Also applies a default
- * gap between rows, overridable via `sx`.
+ * ```tsx
+ * <RadioGroup.Root
+ *   label="Hvor ofte vil du betale?"
+ *   options={[
+ *     { value: "monthly", label: "Månedlig" },
+ *     { value: "yearly", label: "Årlig" },
+ *   ]}
+ *   value={value}
+ *   onValueChange={setValue}
+ * />
+ * ```
  */
-export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare function Root<T extends RadioValue = string>({ options, children, ...rest }: RootProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,78 @@
+import { CSSProperties, FocusEvent, ReactNode, Ref } from 'react';
+/** One choice in a `Select` or `MultiSelect`. */
+export type SelectOption<Value extends string = string> = {
+    value: Value;
+    label: string;
+    /** Shown, but not selectable. */
+    disabled?: boolean;
+};
+/** The props `Select` and `MultiSelect` have in common. */
+export type SelectFieldBaseProps = {
+    /** Floating label, linked to the select for you. */
+    label?: ReactNode;
+    /** Helper / error text shown below the control and linked via `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Puts the select, its label and its helper text into the error state. */
+    error?: boolean;
+    /** Marks the select as required, with an asterisk after the label. */
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Text shown while nothing is chosen. With a `label` it appears once the
+     * label has floated up: on focus and while the list is open.
+     */
+    placeholder?: string;
+    /** Content before the value, inside the field, e.g. an icon. */
+    startAdornment?: ReactNode;
+    /** Content after the value, inside the field, left of the dropdown arrow. */
+    endAdornment?: ReactNode;
+    /** Whether the list is open (controlled). Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Called when the list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when focus leaves the select, the open list included. */
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    /** Submits the value under this name in a native form. */
+    name?: string;
+    /** Id of the element with the `combobox` role. */
+    id?: string;
+    /** Names the select 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 element that takes focus, the one with the `combobox` role. */
+    ref?: Ref<HTMLElement>;
+};
+type SelectFieldProps = SelectFieldBaseProps & {
+    multiple: boolean;
+    /** The value as Base UI holds it: `null` or an array when empty. */
+    value: string | string[] | null;
+    onValueChange: (value: string | string[] | null) => void;
+    /** Whether something is chosen, which is what floats the label. */
+    filled: boolean;
+    /** What the field shows for the value: text, or the chips. */
+    display: ReactNode;
+    /**
+     * Hides `display` from assistive tech, when it only repeats `valueText`.
+     * Not for chips: their remove buttons are controls.
+     */
+    displayHidden?: boolean;
+    /** The value as plain text, for assistive tech, inside the trigger. */
+    valueText: string;
+    /** The `SelectFieldItem`s. */
+    children: ReactNode;
+};
+export declare function SelectField({ label, helperText, error, required, disabled, placeholder, startAdornment, endAdornment, open: openProp, onOpenChange, onBlur, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, multiple, value, onValueChange, filled, display, displayHidden, valueText, children, }: SelectFieldProps): import("react").JSX.Element;
+type SelectFieldItemProps = {
+    option: SelectOption;
+    disabled?: boolean;
+    /** Content before the label, e.g. the checkbox of `MultiSelect`. */
+    children?: ReactNode;
+};
+/** One option in the list. */
+export declare function SelectFieldItem({ option, disabled, children, }: SelectFieldItemProps): import("react").JSX.Element;
+export {};