@leabankab/component-library 7.3.0 → 8.1.0

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

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

@@ -1,23 +1,47 @@
-import { SliderProps as MuiSliderProps } from '@mui/material';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { ReactNode } from 'react';
-export type SliderProps = MuiSliderProps & {
-    /** Group label shown above the slider and linked via `aria-labelledby`. */
-    label?: ReactNode;
-    /** Helper / error text shown below the control and linked via `aria-describedby`. */
+/**
+ * Requires an accessible name so the slider is never nameless. Provide a
+ * visible `label`, or an `aria-label` when the design has none.
+ */
+type SliderAccessibleName = {
+    label: ReactNode;
+    "aria-label"?: never;
+} | {
+    label?: never;
+    "aria-label": string;
+};
+export type SliderProps = Omit<BaseSlider.Root.Props<number>, "children" | "orientation" | "minStepsBetweenValues" | "thumbAlignment" | "thumbCollisionBehavior" | "aria-label" | "aria-labelledby"> & SliderAccessibleName & {
+    /** Helper / error text shown below the slider and linked via `aria-describedby`. */
     helperText?: ReactNode;
-    /** Puts wrapper FormControl and helper text into error state. */
+    /** Puts the slider and its helper text into the error state. */
     error?: boolean;
-    /** Marks wrapper FormControl as required. */
-    required?: boolean;
 };
 /**
- * Slider built on MUI's `Slider`.
+ * A single-value slider built on Base UI's accessible `Slider` primitive.
+ *
+ * The label, the current value, the `min` / `max` under each end of the track
+ * and the helper text are all rendered and wired internally: the label names
+ * the control, the helper text describes it, and `error` marks it invalid and
+ * announces the helper text. Base UI renders a native range input, so arrow
+ * keys, Page Up / Down, Home and End work, and the value is submitted when
+ * `name` is set.
+ *
+ * Pass `format` and `locale` to control how the value, `min` and `max` are
+ * written and announced.
  *
- * Works two ways:
- * - **Standalone (all-in-one):** pass `label` / `helperText` and it renders its
- *   own `FormControl`, label and helper text, wiring `aria-labelledby` /
- *   `aria-describedby` for you.
- * - **Composed:** drop it inside a `FormControl` next to `FormLabel` /
- *   `FormHelperText` and it picks up the shared ids from context.
+ * ```tsx
+ * <Slider
+ *   label="Lånebeløp"
+ *   min={50000}
+ *   max={600000}
+ *   step={5000}
+ *   defaultValue={150000}
+ *   locale="nb-NO"
+ *   format={{ style: "currency", currency: "NOK", maximumFractionDigits: 0 }}
+ *   onValueChange={(value) => setAmount(value)}
+ * />
+ * ```
  */
-export declare const Slider: import('react').ForwardRefExoticComponent<Omit<SliderProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare function Slider({ label, "aria-label": ariaLabel, helperText, error, min, max, format, locale, className, ...rest }: SliderProps): import("react").JSX.Element;
+export {};

package/dist/components/form/use-autocomplete-labels.d.ts

@@ -1,19 +1,6 @@
 /**
- * Translated labels for the searchable selects built on MUI's `Autocomplete`
- * (`Autocomplete`, `AutocompleteField`, `EmailInput`, and the country picker in
- * `PhoneNumberInput`). MUI's own defaults are English, so these are applied for
- * every language. Consumers can still override any of them per-instance with
- * MUI's `noOptionsText` / `loadingText` / `openText` / `closeText` / `clearText`.
+ * Translated texts for the controls with a list to search in (`Autocomplete`
+ * and `EmailInput`): what the list says when it has nothing to show, and the
+ * names of the open and clear buttons.
  */
 export declare const useAutocompleteLabels: () => Record<"clear" | "loading" | "close" | "open" | "noOptions", string>;
-/**
- * The same labels mapped onto MUI's `Autocomplete` prop names, ready to spread
- * before `...rest` so a consumer-supplied value still wins.
- */
-export declare const useAutocompleteTextProps: () => {
-    noOptionsText: string;
-    loadingText: string;
-    openText: string;
-    closeText: string;
-    clearText: string;
-};

package/dist/components/form/use-blur-outside.d.ts

@@ -0,0 +1,7 @@
+import { FocusEvent, RefObject } from 'react';
+/**
+ * `onBlur` for a field that is made of several elements, some of them in a
+ * popup: it is called once focus has left them all, not when it moves from
+ * one to another. Put the returned handler on each element in `refs`.
+ */
+export declare function useBlurOutside(onBlur: ((event: FocusEvent<HTMLElement>) => void) | undefined, refs: readonly RefObject<HTMLElement | null>[]): (event: FocusEvent<HTMLElement>) => void;

package/dist/components/form/use-focus-target-ref.d.ts

@@ -0,0 +1,11 @@
+import { Ref, RefObject } from 'react';
+/**
+ * Internal. Points a control's `ref` at the element inside `rootRef` that
+ * takes focus, for controls where that element is rendered by another library
+ * or is one of several (the radios of a group). `selectors` are tried in
+ * order and the first match wins.
+ *
+ * This is what lets `ref.current.focus()` work on those controls, which
+ * react-hook-form relies on to move focus to the first invalid field.
+ */
+export declare function useFocusTargetRef<T extends HTMLElement>(ref: Ref<T> | undefined, rootRef: RefObject<HTMLElement | null>, selectors: readonly string[]): void;

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

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

package/dist/components/index.d.ts

@@ -1,7 +1,6 @@
 export * from './animations';
 export * from './buttons';
 export * from './data-display';
-export * from './dev-panel';
 export * from './feedback';
 export * from './form';
 export * from './layout';

package/dist/components/navigation/form-stepper.d.ts

@@ -19,7 +19,7 @@ export type FormStepperProps = {
      * flow.
      */
     onBack?: () => void;
-    /** Progress circle colour. Defaults to `purple`. */
+    /** Progress circle colour. Defaults to `primary`. */
     color?: ProgressCircleColor;
     /**
      * Render the title as a `heading` (default) or plain `text`. Prefer `heading`

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

@@ -2,5 +2,5 @@ export * from './form-stepper';
 export * from './linear-form-stepper';
 export * from './progress-circle';
 export * from './step-progress';
-export * from './tabs';
+export * as Tabs from './tabs';
 export * from './use-stepper-labels';

package/dist/components/navigation/linear-form-stepper.d.ts

@@ -19,7 +19,7 @@ export type LinearFormStepperProps = {
     onBack?: () => void;
     /**
      * Bar colour.
-     * @default "purple"
+     * @default "primary"
      */
     color?: ProgressCircleColor;
     /**

package/dist/components/navigation/progress-circle.d.ts

@@ -1,16 +1,22 @@
-export type ProgressCircleColor = "purple" | "teal";
+import { ColorRoles } from '../color-roles';
+export type ProgressCircleColor = ColorRoles<"primary" | "tertiary">;
 export type ProgressCircleProps = {
     /** Current value, e.g. the active step (1-based). Clamped to `0..max`. */
     value: number;
     /** Maximum value, e.g. the total number of steps. */
     max: number;
-    /** Ring colour. Defaults to `purple`. */
+    /** Ring colour. Defaults to `primary`. */
     color?: ProgressCircleColor;
     /** Rendered diameter in px. Defaults to `48`. */
     size?: number;
     /** Ring thickness in px. Defaults to `4`. */
     strokeWidth?: number;
-    /** Show the `value/max` label in the centre. Defaults to `true`. */
+    /**
+     * Show the `value/max` label in the centre. Defaults to `true`. The label
+     * is set smaller when it would otherwise touch the ring, in a small circle
+     * or with many digits. Below about 32px it is too small to read: leave it
+     * out there.
+     */
     showValue?: boolean;
     /**
      * Accessible name. When provided, the circle is exposed as a
@@ -22,13 +28,13 @@ export type ProgressCircleProps = {
     label?: string;
 };
 /**
- * An animated circular progress indicator. Not a MUI component: the ring is an
- * SVG whose stroke animates as `value` changes, respecting
- * `prefers-reduced-motion`. Colour is limited to the brand `purple` / `teal`
- * tokens so contrast stays owned by the theme.
+ * An animated circular progress indicator: the ring is an SVG whose stroke
+ * animates as `value` changes, respecting `prefers-reduced-motion`. Colour is
+ * limited to `primary` (purple) and `tertiary` (teal) so contrast stays owned
+ * by the theme.
  *
  * ```tsx
- * <ProgressCircle value={2} max={5} color="teal" label="Step 2 of 5" />
+ * <ProgressCircle value={2} max={5} color="tertiary" label="Step 2 of 5" />
  * ```
  */
 export declare const ProgressCircle: ({ value, max, color, size, strokeWidth, showValue, label, }: ProgressCircleProps) => import("react").JSX.Element;

package/dist/components/navigation/tabs.d.ts

@@ -1,39 +1,41 @@
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
-import { TabsVariant } from '../../theme/components/tabs.theme';
-export type { TabsVariant };
-export type TabsProps = BaseTabs.Root.Props & {
+import { ColorRoles } from '../color-roles';
+/** The colours of the active "pill". */
+export type Color = ColorRoles<"primary" | "secondary">;
+export type RootProps = Omit<BaseTabs.Root.Props, "color"> & {
     /**
      * Colour of the active-tab "pill".
-     * - `"brand"` — filled with the brand purple (default).
-     * - `"greyscale"` — filled with near-black, for a neutral surface.
-     * @default "brand"
+     * - `"primary"` — filled with the brand purple (default).
+     * - `"secondary"` — filled with near-black, for a neutral surface.
+     * @default "primary"
      */
-    variant?: TabsVariant;
+    color?: Color;
 };
 /**
  * A segmented, pill-style tabs control built on Base UI's accessible `Tabs`
  * primitive. Renders a beige track with a sliding pill behind the active tab.
  *
- * Compose it from `TabsList` + `Tab` (the tab bar) and, optionally, `TabPanel`
- * for built-in content. Roles (`tablist`/`tab`/`tabpanel`), roving `tabindex`,
- * arrow-key navigation, `aria-selected` and the `tab`↔`tabpanel` links are all
- * wired by Base UI, so relationships never dangle.
+ * Compose it from `Tabs.Root`, `Tabs.List` + `Tabs.Tab` (the tab bar) and,
+ * optionally, `Tabs.Panel` for built-in content. Roles
+ * (`tablist`/`tab`/`tabpanel`), roving `tabindex`, arrow-key navigation,
+ * `aria-selected` and the `tab`↔`tabpanel` links are all wired by Base UI, so
+ * relationships never dangle.
  *
  * The list scrolls horizontally when the tabs overflow (e.g. on mobile) and the
  * pill slide respects `prefers-reduced-motion`.
  *
  * ```tsx
- * <Tabs defaultValue="overview">
- *   <TabsList aria-label="Account sections">
- *     <Tab value="overview">Overview</Tab>
- *     <Tab value="activity">Activity</Tab>
- *   </TabsList>
- *   <TabPanel value="overview">Workspace stats and activity.</TabPanel>
- *   <TabPanel value="activity">Recent activity.</TabPanel>
- * </Tabs>
+ * <Tabs.Root defaultValue="overview">
+ *   <Tabs.List aria-label="Account sections">
+ *     <Tabs.Tab value="overview">Overview</Tabs.Tab>
+ *     <Tabs.Tab value="activity">Activity</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">Workspace stats and activity.</Tabs.Panel>
+ *   <Tabs.Panel value="activity">Recent activity.</Tabs.Panel>
+ * </Tabs.Root>
  * ```
  */
-export declare function Tabs({ variant, ...rest }: TabsProps): import("react").JSX.Element;
+export declare function Root({ color, className, ...rest }: RootProps): import("react").JSX.Element;
 /**
  * Requires an accessible name so the underlying `tablist` is never nameless.
  * Provide exactly one of `aria-label` or `aria-labelledby`.
@@ -45,35 +47,36 @@ type TabsListAccessibleName = {
     "aria-labelledby": string;
     "aria-label"?: never;
 };
-export type TabsListProps = Omit<BaseTabs.List.Props, "render" | "aria-label" | "aria-labelledby"> & TabsListAccessibleName;
+export type ListProps = Omit<BaseTabs.List.Props, "render" | "aria-label" | "aria-labelledby"> & TabsListAccessibleName;
 /**
- * Groups the `Tab` buttons into the pill track. The sliding indicator is
+ * Groups the `Tabs.Tab` buttons into the pill track. The sliding indicator is
  * rendered internally so it can never go missing.
  */
-export declare function TabsList({ children, ...rest }: TabsListProps): import("react").JSX.Element;
+export declare function List({ children, className, ...rest }: ListProps): import("react").JSX.Element;
 export type TabProps = Omit<BaseTabs.Tab.Props, "render">;
 /**
  * An individual tab. Pass an icon and label as children; mark decorative icons
  * with `aria-hidden` so they aren't announced.
  *
  * ```tsx
- * <Tab value="transactions">
+ * <Tabs.Tab value="transactions">
  *   <Receipt size={18} aria-hidden />
  *   Transaksjoner
- * </Tab>
+ * </Tabs.Tab>
  * ```
  */
-export declare function Tab(props: TabProps): import("react").JSX.Element;
-export type TabsIndicatorProps = Omit<BaseTabs.Indicator.Props, "render">;
+export declare function Tab({ className, ...rest }: TabProps): import("react").JSX.Element;
+export type IndicatorProps = Omit<BaseTabs.Indicator.Props, "render">;
 /**
- * The sliding pill behind the active tab. `TabsList` already renders one, so
+ * The sliding pill behind the active tab. `Tabs.List` already renders one, so
  * you only need this when composing a custom list.
  */
-export declare function TabsIndicator(props: TabsIndicatorProps): import("react").JSX.Element;
-export type TabPanelProps = Omit<BaseTabs.Panel.Props, "render">;
+export declare function Indicator({ className, ...rest }: IndicatorProps): import("react").JSX.Element;
+export type PanelProps = Omit<BaseTabs.Panel.Props, "render">;
 /**
- * Content shown when the `Tab` with the matching `value` is active. Optional —
- * omit it to use `Tabs` purely as a bar that toggles content you render
- * elsewhere (drive it with `value`/`onValueChange`).
+ * Content shown when the `Tabs.Tab` with the matching `value` is active.
+ * Optional — omit it to use `Tabs` purely as a bar that toggles content you
+ * render elsewhere (drive it with `value`/`onValueChange`).
  */
-export declare function TabPanel(props: TabPanelProps): import("react").JSX.Element;
+export declare function Panel({ className, ...rest }: PanelProps): import("react").JSX.Element;
+export {};

package/dist/components/navigation/use-stepper-labels.d.ts

@@ -3,5 +3,5 @@
  * "Next" subtitle prefix, and the visually-hidden "step X of Y" context.
  * Consumers can override any of these per-instance via the `labels` prop.
  */
-export declare const useStepperLabels: () => Record<"next" | "step" | "back" | "of", string>;
+export declare const useStepperLabels: () => Record<"step" | "next" | "back" | "of", string>;
 export type StepperLabels = Partial<ReturnType<typeof useStepperLabels>>;