@leabankab/component-library 5.6.1

package/dist/components/form/fields/email-field.d.ts

@@ -0,0 +1,10 @@
+import { FieldValues } from 'react-hook-form';
+import { EmailInputProps } from '../email-input';
+import { BaseFieldProps } from './field-types';
+export type EmailFieldProps<T extends FieldValues> = BaseFieldProps<T> & Omit<EmailInputProps, "name" | "value" | "defaultValue" | "onChange" | "error">;
+/**
+ * `EmailInput` (with `@` domain autocomplete) connected to react-hook-form via
+ * `Controller`. Reads `control` from the nearest `FormProvider` when the prop is
+ * omitted.
+ */
+export declare const EmailField: <T extends FieldValues>({ name, control, rules, disabled, label, helperText, ...rest }: EmailFieldProps<T>) => import("react").JSX.Element;

package/dist/components/form/fields/field-types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Control, FieldPath, FieldValues, RegisterOptions } from 'react-hook-form';
+export interface BaseFieldProps<T extends FieldValues> {
+    name: FieldPath<T>;
+    control?: Control<T>;
+    rules?: RegisterOptions<T, FieldPath<T>>;
+    disabled?: boolean;
+}
+export type FieldOption = {
+    value: string;
+    label: ReactNode;
+};
+export type FieldValueTransform = {
+    /** Maps the form value to the string the control displays. */
+    format?: (value: unknown) => string;
+    /** Maps the control's string value back to the form value. */
+    parse?: (value: string) => unknown;
+};

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

@@ -0,0 +1,14 @@
+export * from './autocomplete-field';
+export * from './boolean-radio-field';
+export * from './checkbox-field';
+export * from './datepicker-field';
+export * from './email-field';
+export * from './field-types';
+export * from './input-field';
+export * from './multi-select-field';
+export * from './number-field';
+export * from './phone-number-field';
+export * from './radio-card-field';
+export * from './radio-field';
+export * from './select-field';
+export * from './use-field-control';

package/dist/components/form/fields/input-field.d.ts

@@ -0,0 +1,9 @@
+import { FieldValues } from 'react-hook-form';
+import { InputProps } from '../input';
+import { BaseFieldProps } from './field-types';
+export type InputFieldProps<T extends FieldValues> = BaseFieldProps<T> & Omit<InputProps, "name" | "value" | "defaultValue" | "error">;
+/**
+ * `Input` connected to react-hook-form via `Controller`. Reads `control` from
+ * the nearest `FormProvider` when the prop is omitted.
+ */
+export declare const InputField: <T extends FieldValues>({ name, control, rules, disabled, label, helperText, ...rest }: InputFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { FieldValues } from 'react-hook-form';
+import { MultiSelectProps } from '../multi-select';
+import { BaseFieldProps } from './field-types';
+export type MultiSelectFieldProps<T extends FieldValues> = BaseFieldProps<T> & Omit<MultiSelectProps, "name" | "value" | "defaultValue" | "error">;
+/**
+ * `MultiSelect` connected to react-hook-form via `Controller`. Reads `control` from
+ * the nearest `FormProvider` when the prop is omitted.
+ */
+export declare const MultiSelectField: <T extends FieldValues>({ name, control, rules, disabled, label, helperText, options, ...rest }: MultiSelectFieldProps<T>) => import("react").JSX.Element;

package/dist/components/form/fields/number-field.d.ts

@@ -0,0 +1,10 @@
+import { FieldValues } from 'react-hook-form';
+import { NumberInputProps } from '../number-input';
+import { BaseFieldProps } from './field-types';
+export type NumberFieldProps<T extends FieldValues> = BaseFieldProps<T> & Omit<NumberInputProps, "name" | "value" | "defaultValue" | "error" | "onValueChange">;
+/**
+ * `NumberInput` connected to react-hook-form via `Controller`. Reads `control`
+ * from the nearest `FormProvider` when the prop is omitted. The form value is
+ * the raw `number | null` from the field.
+ */
+export declare const NumberField: <T extends FieldValues>({ name, control, rules, disabled, label, helperText, ...rest }: NumberFieldProps<T>) => import("react").JSX.Element;

package/dist/components/form/fields/phone-number-field.d.ts

@@ -0,0 +1,11 @@
+import { FieldValues } from 'react-hook-form';
+import { PhoneNumberInputProps } from '../phone-number-input';
+import { BaseFieldProps } from './field-types';
+export type PhoneNumberFieldProps<T extends FieldValues> = BaseFieldProps<T> & Omit<PhoneNumberInputProps, "name" | "value" | "defaultValue" | "onChange" | "error">;
+/**
+ * `PhoneNumberInput` connected to react-hook-form via `Controller`. Reads
+ * `control` from the nearest `FormProvider` when the prop is omitted. The form
+ * value is the formatted national number string; pass `defaultCountry` (or a
+ * controlled `country` + `onCountryChange`) to drive the country.
+ */
+export declare const PhoneNumberField: <T extends FieldValues>({ name, control, rules, disabled, label, helperText, ...rest }: PhoneNumberFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { RadioGroupProps } from '../radio';
+import { BaseFieldProps, FieldOption, FieldValueTransform } from './field-types';
+export type RadioCardFieldProps<T extends FieldValues> = BaseFieldProps<T> & FieldValueTransform & {
+    label: ReactNode;
+    options: FieldOption[];
+    /** CSS grid-template-columns for the option layout. Defaults to two equal columns. */
+    gridColumns?: string;
+    /** Size passed to each `RadioCard`. */
+    cardSize?: "sm" | "lg";
+    /** Tooltip content to display when hovering over the field. */
+    tooltip?: ReactNode;
+} & Omit<RadioGroupProps, "value" | "onChange" | "name" | "defaultValue">;
+/**
+ * `RadioGroup` of `RadioCard` options connected to react-hook-form via
+ * `Controller`. Reads `control` from the nearest `FormProvider` when the prop
+ * is omitted.
+ *
+ * Pass optional `format` / `parse` to coerce values (e.g. boolean <-> string).
+ */
+export declare const RadioCardField: <T extends FieldValues>({ name, control, rules, disabled, label, options, format, parse, gridColumns, cardSize, tooltip, size, ...rest }: RadioCardFieldProps<T>) => import("react").JSX.Element;

package/dist/components/form/fields/radio-field.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { RadioGroupProps } from '../radio';
+import { BaseFieldProps, FieldOption, FieldValueTransform } from './field-types';
+export type RadioFieldProps<T extends FieldValues> = BaseFieldProps<T> & FieldValueTransform & {
+    label: ReactNode;
+    options: FieldOption[];
+} & Omit<RadioGroupProps, "value" | "onChange" | "name" | "defaultValue">;
+/**
+ * `RadioGroup` connected to react-hook-form via `Controller`, rendering each
+ * option as a `FormControlLabel` + `Radio`. Reads `control` from the nearest
+ * `FormProvider` when the prop is omitted.
+ *
+ * Pass optional `format` / `parse` to coerce values (e.g. boolean <-> string).
+ */
+export declare const RadioField: <T extends FieldValues>({ name, control, rules, disabled, label, options, format, parse, size, ...rest }: RadioFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { FieldValues } from 'react-hook-form';
+import { SelectProps } from '../select';
+import { BaseFieldProps } from './field-types';
+export type SelectFieldProps<T extends FieldValues> = BaseFieldProps<T> & Omit<SelectProps, "name" | "value" | "defaultValue" | "error">;
+/**
+ * `Select` connected to react-hook-form via `Controller`. Reads `control` from
+ * the nearest `FormProvider` when the prop is omitted.
+ */
+export declare const SelectField: <T extends FieldValues>({ name, control, rules, disabled, label, helperText, options, children, ...rest }: SelectFieldProps<T>) => import("react").JSX.Element;

package/dist/components/form/fields/use-field-control.d.ts

@@ -0,0 +1,6 @@
+import { Control, FieldValues } from 'react-hook-form';
+/**
+ * Resolves the `control` instance for a field component. Uses the explicit
+ * `control` prop when provided, otherwise reads from the nearest `FormProvider`.
+ */
+export declare function useResolvedControl<T extends FieldValues>(control?: Control<T>): Control<T>;

package/dist/components/form/fields/use-tooltip-trigger-labels.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Translated accessible name for the info trigger a field renders next to its
+ * label when given a `tooltip`.
+ */
+export declare const useTooltipTriggerLabels: () => Record<"moreInformation", string>;

package/dist/components/form/form-control/form-control-context.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Ids shared between a `FormControl` and its label / control / helper text so
+ * they stay wired together for assistive technology without the consumer ever
+ * writing `htmlFor` or `aria-describedby` by hand.
+ */
+export interface FormFieldIds {
+    /** Id of the focusable control (input / select). */
+    control: string;
+    /** Id of the label element. */
+    label: string;
+    /** Id of the helper text element. */
+    helperText: string;
+}
+export interface FormFieldContextValue {
+    ids: FormFieldIds;
+    /** Whether a `FormHelperText` is currently rendered, so the control knows to link it. */
+    hasHelperText: boolean;
+    /** Called by `FormHelperText` on mount / unmount to register its presence. */
+    setHasHelperText: (present: boolean) => void;
+    /**
+     * Whether the control currently holds a value that should float the label
+     * even when a start adornment is present (e.g. multi-select chips). A plain
+     * leading icon leaves this `false` so it doesn't float the label on its own.
+     */
+    hasValue: boolean;
+    /** Called by a value-bearing control to keep `hasValue` in sync. */
+    setHasValue: (present: boolean) => void;
+}
+export declare const FormFieldProvider: import('react').Provider<FormFieldContextValue | null>;
+/**
+ * Reads the field context provided by the surrounding `FormControl`. Returns
+ * `null` when a control is rendered outside our `FormControl`, which lets a
+ * standalone control provision its own wrapper and ids.
+ */
+export declare const useFormField: () => FormFieldContextValue | null;

package/dist/components/form/form-control/form-control-label.d.ts

@@ -0,0 +1 @@
+export { FormControlLabel, type FormControlLabelProps, } from '@mui/material';

package/dist/components/form/form-control/form-control.d.ts

@@ -0,0 +1,13 @@
+import { FormControlProps } from '@mui/material';
+export type { FormControlProps };
+/**
+ * Wrapper around MUI's `FormControl` that generates a unique base id (via
+ * `useId`, overridable with the `id` prop) and shares the derived label /
+ * control / helper-text ids with its children through context. This lets
+ * `Input`, `Select`, `InputLabel` and `FormHelperText` wire `htmlFor`, `id` and
+ * `aria-describedby` automatically — the consumer never writes them.
+ *
+ * MUI's own `FormControl` context still propagates `error` / `required` /
+ * `disabled` / focused state to children; we only layer the ids on top.
+ */
+export declare const FormControl: ({ id, fullWidth, focused: focusedProp, onFocus, onBlur, children, ...rest }: FormControlProps) => import("react").JSX.Element;

package/dist/components/form/form-control/form-helper-text.d.ts

@@ -0,0 +1,9 @@
+import { FormHelperTextProps } from '@mui/material';
+export type { FormHelperTextProps };
+/**
+ * Supplementary / error text for a field. When rendered inside our
+ * `FormControl` it takes the helper-text id from context and registers its
+ * presence, so the control links to it via `aria-describedby` automatically.
+ * Pass `error` to render it in the error colour.
+ */
+export declare const FormHelperText: (props: FormHelperTextProps) => import("react").JSX.Element;

package/dist/components/form/form-control/form-label.d.ts

@@ -0,0 +1,9 @@
+import { FormLabelProps } from '@mui/material';
+/**
+ * Group label for non-floating controls (e.g. a `RadioGroup`). When rendered
+ * inside our `FormControl` it claims the shared label id, so a sibling
+ * `RadioGroup` can point its `aria-labelledby` at it automatically — the
+ * consumer never wires the ids by hand. Reads required / error / focus state
+ * from the surrounding `FormControl` like MUI's own `FormLabel`.
+ */
+export declare const FormLabel: (props: FormLabelProps) => import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+export * from './form-control';
+export * from './form-control-context';
+export * from './form-control-label';
+export * from './form-label';
+export * from './form-helper-text';

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

@@ -0,0 +1,18 @@
+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 * from './select';
+export * from './slider';
+export { FormControlLabel, InputAdornment, type FormControlLabelProps, type InputAdornmentProps, } from '@mui/material';

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

@@ -0,0 +1,9 @@
+import { InputLabelProps } from '@mui/material';
+export type { InputLabelProps };
+/**
+ * Floating label for a field. When rendered inside our `FormControl` it links
+ * itself to the control automatically via `htmlFor` / `id`, so the consumer
+ * never has to wire them. MUI appends the required asterisk and reads focus /
+ * error / required state from the surrounding `FormControl` on its own.
+ */
+export declare const InputLabel: (props: InputLabelProps) => import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { OutlinedInputProps } from '@mui/material';
+import { ReactNode } from 'react';
+export type InputProps = OutlinedInputProps & {
+    /** 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;
+};
+/**
+ * Text input built on MUI's `OutlinedInput`.
+ *
+ * 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.
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,32 @@
+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[];
+    /** Currently selected values (controlled). */
+    value?: string[];
+    /** Initially selected values (uncontrolled). */
+    defaultValue?: string[];
+    /** Called with the next array of selected values. */
+    onChange?: (value: string[], event: SelectChangeEvent<string[]>) => 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;
+};
+/**
+ * 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.
+ *
+ * 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
+ * bound are disabled, and the constraints are also enforced on change.
+ *
+ * Works controlled (`value`) or uncontrolled (`defaultValue`).
+ */
+export declare const MultiSelect: import('react').ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,52 @@
+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. */
+    label?: ReactNode;
+    /** Where the label sits when this component renders one itself. @default "inside" */
+    labelPlacement?: "inside" | "outside";
+    /** 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;
+    /** 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;
+    /**
+     * Decorative leading icon (e.g. a category glyph). Rendered `aria-hidden`, so
+     * the visible label must carry the meaning.
+     */
+    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.
+     */
+    unit?: ReactNode;
+    /**
+     * Whether to render the increment / decrement stepper buttons.
+     * @default true
+     */
+    showSteppers?: boolean;
+};
+/**
+ * Numeric input built on Base UI's `NumberField` (value / min / max / step /
+ * formatting) and MUI's `OutlinedInput` (look), with stacked 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.
+ *
+ * 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;

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

@@ -0,0 +1,33 @@
+import { CountryCode } from 'libphonenumber-js';
+export type { CountryCode };
+/**
+ * Countries surfaced at the top of the country-code select. Lea Bank's core
+ * markets, in priority order. The rest of the world follows, sorted by their
+ * localised name.
+ */
+export declare const PINNED_COUNTRIES: readonly CountryCode[];
+export interface CountryOption {
+    /** ISO 3166-1 alpha-2 code, e.g. `"FI"`. */
+    code: CountryCode;
+    /** International dialling code without the leading `+`, e.g. `"358"`. */
+    dialCode: string;
+    /** Localised country name, e.g. `"Finland"`. */
+    name: string;
+    /** Flag emoji derived from the ISO code. Purely decorative. */
+    flag: string;
+    /** Whether this is one of the pinned core-market countries. */
+    pinned: boolean;
+}
+/**
+ * Turns a two-letter ISO country code into its flag emoji by mapping each
+ * letter to the matching Unicode regional-indicator symbol. No asset library
+ * needed — the platform renders the pair as a flag.
+ */
+export declare function flagEmoji(code: string): string;
+/**
+ * Builds the ordered country list for the select: the pinned core markets
+ * first, then every remaining country sorted by its name in the given locale.
+ * Country names come from `Intl.DisplayNames`, so they follow the active locale
+ * with no hand-maintained list.
+ */
+export declare function getCountryOptions(locale: string): CountryOption[];

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

@@ -0,0 +1,2 @@
+export * from './phone-number-input';
+export { PINNED_COUNTRIES, flagEmoji, getCountryOptions, type CountryCode, type CountryOption, } from './countries';

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

@@ -0,0 +1,53 @@
+import { OutlinedInputProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { CountryCode } from './countries';
+/** Details reported alongside every change so the consumer can react to validity. */
+export interface PhoneNumberMeta {
+    /** The selected country. */
+    country: CountryCode;
+    /** Canonical E.164 number when valid (e.g. `"+358401234567"`), otherwise `undefined`. */
+    e164?: string;
+    /** 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. */
+    label?: ReactNode;
+    /** Helper / error text shown below the control and linked via `aria-describedby`. */
+    helperText?: ReactNode;
+    /** 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`. */
+    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;
+    /**
+     * 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;
+};
+/**
+ * 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
+ * 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.
+ *
+ * Both country and number can be **controlled** (`country` + `onCountryChange`,
+ * `value` + `onChange`) 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;

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

@@ -0,0 +1,77 @@
+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;
+    /** `"horizontal"` (indicator + text in a row) or `"vertical"` (icon stacked above text). */
+    orientation?: "horizontal" | "vertical";
+    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>;
+    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`.
+ *
+ * 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
+ * (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.
+ *
+ * ```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>
+ * ```
+ */
+export declare const RadioCard: import('react').ForwardRefExoticComponent<RadioCardProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Optional radio dot for a `RadioCard`. Reuses the shared `RadioCircle` and
+ * reflects the card's checked state. Omit it for icon-only cards.
+ */
+export declare const RadioCardIndicator: () => import("react").JSX.Element;
+export type RadioCardIconProps = {
+    /** Icon box size (predefined, overridable). */
+    size?: number | string;
+    icon: LucideIcon;
+};
+/**
+ * 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;
+/**
+ * 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
+ * `vertical`.
+ */
+export declare const RadioCardContent: ({ children, sx, }: {
+    children: ReactNode;
+    sx?: SxProps<Theme>;
+}) => import("react").JSX.Element;
+/** Primary line of a `RadioCard`. */
+export declare const RadioCardLabel: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+/** Secondary, muted line of a `RadioCard`. */
+export declare const RadioCardDescription: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { SxProps, Theme } from '@mui/material';
+export type RadioSize = "small" | "medium";
+export type RadioCircleProps = {
+    /** When true, fills the circle and springs the dot in. */
+    checked?: boolean;
+    size?: RadioSize;
+    sx?: SxProps<Theme>;
+};
+/**
+ * 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.
+ */
+export declare const RadioCircle: ({ checked, size, sx, }: RadioCircleProps) => import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { RadioProps as MuiRadioProps, RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
+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;
+};
+export type RadioGroupProps = MuiRadioGroupProps & {
+    /** Size applied to all child `Radio` components unless overridden per-item. */
+    size?: RadioSize;
+};
+/**
+ * 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:
+ *
+ * ```tsx
+ * <RadioGroup value={value} onChange={(_, v) => setValue(v)}>
+ *   <FormControlLabel value="a" control={<Radio />} label="A" />
+ *   <FormControlLabel value="b" control={<Radio />} label="B" />
+ * </RadioGroup>
+ * ```
+ */
+export declare const Radio: import('react').ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * 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`.
+ *
+ * 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`.
+ */
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;