@leabankab/component-library 7.2.0 → 8.0.0

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

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

@@ -1,46 +1,34 @@
-import { SelectProps as MuiSelectProps } from '@mui/material';
-import { ReactNode } from 'react';
-export type SelectOption = {
-    label: string;
-    value: string;
-};
-export type SelectProps = MuiSelectProps & {
-    /** 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;
-    /** Convenience: render `MenuItem`s from a list instead of passing children. */
-    options?: SelectOption[];
+import { SelectFieldBaseProps, SelectOption } from './select-field';
+export type { SelectOption };
+export type SelectProps<Value extends string = string> = SelectFieldBaseProps & {
+    /** The choices. */
+    options: readonly SelectOption<Value>[];
+    /** The chosen value (controlled). `""` means nothing is chosen. */
+    value?: Value | "";
+    /** The chosen value when first rendered, for uncontrolled use. */
+    defaultValue?: Value | "";
+    /** Called with the value of the option the user picks. */
+    onValueChange?: (value: Value) => void;
 };
 /**
- * Select built on MUI's `Select`.
+ * Select on Base UI's `Select`, in the same box as `Input`. The label, the
+ * helper text and the ids that link them to the control are all rendered and
+ * wired for you.
+ *
+ * ```tsx
+ * <Select
+ *   label="Land"
+ *   options={[
+ *     { value: "no", label: "Norge" },
+ *     { value: "se", label: "Sverige" },
+ *   ]}
+ *   value={country}
+ *   onValueChange={setCountry}
+ * />
+ * ```
  *
- * Works two ways:
- * - **Standalone (all-in-one):** pass `label` / `helperText` and `options` (or
- *   `MenuItem` children) and it renders its own `FormControl`, label and helper
- *   text, generating and wiring all ids for you.
- * - **Composed:** drop it inside a `FormControl` next to `InputLabel` /
- *   `FormHelperText` and it picks up the shared ids from context.
+ * Values are strings, and `""` means nothing is chosen. Written with
+ * `as const`, the options give `value` and `onValueChange` their type:
+ * `"no" | "se"` here.
  */
-export declare const Select: import('react').ForwardRefExoticComponent<(Omit<import('@mui/material').FilledSelectProps & import('@mui/material').BaseSelectProps<unknown> & {
-    /** 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;
-    /** Convenience: render `MenuItem`s from a list instead of passing children. */
-    options?: SelectOption[];
-}, "ref"> | Omit<import('@mui/material').StandardSelectProps & import('@mui/material').BaseSelectProps<unknown> & {
-    /** 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;
-    /** Convenience: render `MenuItem`s from a list instead of passing children. */
-    options?: SelectOption[];
-}, "ref"> | Omit<import('@mui/material').OutlinedSelectProps & import('@mui/material').BaseSelectProps<unknown> & {
-    /** 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;
-    /** Convenience: render `MenuItem`s from a list instead of passing children. */
-    options?: SelectOption[];
-}, "ref">) & import('react').RefAttributes<HTMLDivElement>>;
+export declare function Select<Value extends string = string>({ options, value, defaultValue, onValueChange, ...rest }: SelectProps<Value>): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { Field } from '@base-ui/react/field';
+import { ReactNode } from 'react';
+/**
+ * `render` for a `Field.Root` that is only there to hand a control its
+ * validity state, which is how Base UI puts `aria-invalid` on the slider's
+ * nested range input. It makes the field render no element of its own.
+ */
+export declare const renderWithoutElement: Field.Root.Props["render"];
+type SliderTrackProps = {
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+};
+/**
+ * The clickable control with its track, fill and thumb. The thumb is rendered
+ * here so it can never be left out. Must sit inside a Base UI `Slider.Root`.
+ */
+export declare function SliderTrack({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SliderTrackProps): import("react").JSX.Element;
+type SliderRangeProps = {
+    min: number;
+    max: number;
+    format?: Intl.NumberFormatOptions;
+    locale?: Intl.LocalesArgument;
+};
+/** `min` and `max` under each end of the track, written like the value. */
+export declare function SliderRange({ min, max, format, locale }: SliderRangeProps): import("react").JSX.Element;
+type SliderHelperTextProps = {
+    /** Id the controls point at with `aria-describedby`. */
+    id: string;
+    error: boolean;
+    children: ReactNode;
+};
+/** Helper text below the slider. Announced as an alert while in error. */
+export declare function SliderHelperText({ id, error, children, }: SliderHelperTextProps): import("react").JSX.Element;
+export {};