@leabankab/component-library 7.2.0 → 8.0.0

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/layout/stack.d.ts

@@ -48,7 +48,7 @@ export type HStackProps = Omit<StackProps, "direction">;
  *
  * ```tsx
  * <HStack gap={1} justify="end">
- *   <Button variant="secondary">Avbryt</Button>
+ *   <Button variant="outline">Avbryt</Button>
  *   <Button>Lagre</Button>
  * </HStack>
  * ```

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

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

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { ProgressCircleColor } from './progress-circle';
+import { StepperLabels } from './use-stepper-labels';
+export type LinearFormStepperProps = {
+    /** Active step (1-based). */
+    currentStep: number;
+    /**
+     * Total number of steps. May change between renders, e.g. when the next step
+     * from the API reveals a different path; the bar animates to the new value.
+     */
+    totalSteps: number;
+    /** Title of the current step. Rendered as a heading and names the progress bar. */
+    title: ReactNode;
+    /**
+     * Called when the back button is pressed. The back button only renders when
+     * this is provided, so omit it on the first step or in forms without a back
+     * flow.
+     */
+    onBack?: () => void;
+    /**
+     * Bar colour.
+     * @default "primary"
+     */
+    color?: ProgressCircleColor;
+    /**
+     * Heading level of the title.
+     * @default "h1"
+     */
+    headingLevel?: "h1" | "h2" | "h3";
+    /**
+     * Id applied to the title. Defaults to a generated id. Use it to move focus to
+     * the title when the step changes so the new step is announced. Must be
+     * unique in the document.
+     */
+    titleId?: string;
+    /** Override the built-in translated labels per-instance. */
+    labels?: StepperLabels;
+};
+/**
+ * Header for a multi-step form whose steps aren't all known up front: a linear
+ * progress bar above the current step's title, with an optional back button.
+ * Use `FormStepper` instead when the full step list is known.
+ *
+ * The bar is a `progressbar` named by the title heading, with the step count
+ * (`"step X of Y"`) as its value text. The title carries `tabIndex={-1}`; move
+ * focus to it (via `titleId`) whenever the step changes so screen-reader users
+ * hear the new step.
+ *
+ * ```tsx
+ * <LinearFormStepper
+ *   currentStep={2}
+ *   totalSteps={5}
+ *   title="Refinancing"
+ *   onBack={() => history.back()}
+ * />
+ * ```
+ */
+export declare const LinearFormStepper: ({ currentStep, totalSteps, title, onBack, color, headingLevel: Heading, titleId, labels, }: LinearFormStepperProps) => import("react").JSX.Element;

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/step-progress.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { LinearFormStepperProps } from './linear-form-stepper';
+/**
+ * The step a flow is on, already resolved by the app. The library never
+ * defines steps: the app maps its own step (e.g. from the API) to a position
+ * and a translated title, then reports it.
+ */
+export type StepProgress = {
+    /** Active step (1-based). */
+    currentStep: number;
+    /** Total number of steps. May change as the flow reveals its path. */
+    totalSteps: number;
+    /** Translated title of the current step. */
+    title: string;
+};
+export type StepProgressProviderProps = {
+    children: ReactNode;
+    /**
+     * Progress to show on the first render, before any page has reported, e.g.
+     * so a server-rendered layout paints the bar straight away.
+     */
+    initialProgress?: StepProgress;
+};
+/**
+ * Holds the step a persistent flow header shows. Put it in the flow layout,
+ * above the route's loading boundary, so the header survives step navigations
+ * instead of remounting with the page, and its bar animates between steps.
+ *
+ * ```tsx
+ * <StepProgressProvider>
+ *   <StepProgressHeader onBack={router.back} />
+ *   {children}
+ * </StepProgressProvider>
+ * ```
+ */
+export declare const StepProgressProvider: ({ children, initialProgress, }: StepProgressProviderProps) => import("react").JSX.Element;
+/**
+ * The last reported step, or `null` before anything has been reported or
+ * outside a `StepProgressProvider`. Use it to render `FormStepper` or a custom
+ * header from the same state.
+ */
+export declare const useStepProgress: () => StepProgress | null;
+/**
+ * Publishes the current step to the nearest `StepProgressProvider`. Pass
+ * `null` while the step isn't resolved yet; nothing is reported then. Never
+ * clears on unmount, so the header holds its value while the next route's
+ * loading fallback is on screen.
+ *
+ * ```tsx
+ * useReportStepProgress({ currentStep: 2, totalSteps: 5, title: t("income") });
+ * ```
+ */
+export declare const useReportStepProgress: (progress: StepProgress | null) => void;
+export type StepProgressHeaderProps = Omit<LinearFormStepperProps, "currentStep" | "totalSteps" | "title">;
+/**
+ * A `LinearFormStepper` driven by the nearest `StepProgressProvider`. Renders
+ * nothing until a step has been reported. Everything except the step itself
+ * (`onBack`, `color`, `headingLevel`, …) is passed as props.
+ */
+export declare const StepProgressHeader: (props: StepProgressHeaderProps) => import("react").JSX.Element | null;

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

package/dist/components/typography/link.d.ts

@@ -1,23 +1,32 @@
-import { LinkProps as MuiLinkProps } from '@mui/material';
-import { ElementType } from 'react';
-type LinkColor = "black" | "purple" | "teal" | "white";
-type LinkProps<C extends ElementType = "a"> = Omit<MuiLinkProps<C>, "color"> & {
-    /** The component to render the link as. */
-    component?: C;
-    /** The colour of the link. */
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+import { ColorRoles } from '../color-roles';
+export type LinkColor = ColorRoles<"secondary" | "primary" | "tertiary" | "contrast">;
+export type LinkProps = Omit<useRender.ComponentProps<"a">, "ref" | "color"> & {
+    /**
+     * The colour of the link: `secondary` is the near-black of body text,
+     * `primary` the brand purple, `tertiary` the brand teal. Use `contrast`
+     * (white) on a dark surface.
+     * @default "secondary"
+     */
     color?: LinkColor;
+    /** The rendered element: the `<a>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
 };
 /**
- * A link component — link-only in styling and behaviour.
- *
- * Supports polymorphic rendering via the `component` prop, which enables
- * type-safe usage with any router link component:
+ * A link inside running text: underlined, so it is told apart from the words
+ * around it by more than its colour, and in the size and line height of the
+ * text around it. Renders an `a`; pass a router link
+ * through `render`:
  *
  * ```tsx
- * <Link href="/about">About</Link>                       // Plain anchor
- * <Link component={RouterLink} to="/about">About</Link>  // React Router
- * <Link component={NextLink} href="/about">About</Link>  // Next.js
+ * <Link href="/om-oss">Om oss</Link>
+ * <Link render={<NextLink href="/om-oss" />}>Om oss</Link>
+ * <Link render={<RouterLink to="/om-oss" />}>Om oss</Link>
  * ```
+ *
+ * For an action that only looks like a link, render a button:
+ * `<Link render={<button type="button" />} onClick={…}>`. For a link that
+ * looks like a button, use `Button` with `render`.
  */
-export declare const Link: <C extends ElementType = "a">({ color, children, sx, ...rest }: LinkProps<C>) => import("react").JSX.Element;
-export {};
+export declare function Link({ color, render, ref, className, ...rest }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/typography/lists.d.ts

@@ -1,5 +1,4 @@
-import { SxProps, Theme } from '@mui/material';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /**
  * List is a composition component for rendering ordered or unordered lists.
  *
@@ -25,30 +24,28 @@ import { ReactNode } from 'react';
  * </List.Root>
  */
 type ListVariant = "ul" | "ol";
-interface RootProps {
-    /** The type of list to render. */
+type RootProps = Omit<ComponentProps<"ul">, "ref"> & {
+    /**
+     * The type of list to render.
+     * @default "ul"
+     */
     variant?: ListVariant;
-    /** The content of the list. */
-    children: ReactNode;
-    /** The style of the list. */
-    sx?: SxProps<Theme>;
-    /** The class name of the list. */
-    className?: string;
-    /** The gap between the list items. */
+    /**
+     * The gap between the list items, as a multiple of the spacing step.
+     * @default 1.5
+     */
     gap?: number;
-}
-export declare const Root: ({ variant, children, sx, gap, ...rest }: RootProps) => import("react").JSX.Element;
-interface ItemProps {
+};
+export declare const Root: ({ variant, gap, className, style, children, ...rest }: RootProps) => import("react").JSX.Element;
+type ItemProps = Omit<ComponentProps<"li">, "ref"> & {
     /** Custom marker rendered in place of the default dot/number. */
     icon?: ReactNode;
-    /** The content of the list item. */
-    children: ReactNode;
-    /** The style of the list item. */
-    sx?: SxProps<Theme>;
-    /** The class name of the list item. */
-    className?: string;
-    /** The gap between the list items. */
+    /**
+     * The gap between a custom `icon` and the text, as a multiple of the spacing
+     * step. The dot and the number keep their own spacing.
+     * @default 1.5
+     */
     gap?: number;
-}
-export declare const Item: ({ icon, children, sx, gap, ...rest }: ItemProps) => import("react").JSX.Element;
+};
+export declare const Item: ({ icon, gap, className, style, children, ...rest }: ItemProps) => import("react").JSX.Element;
 export {};

package/dist/components/typography/text.d.ts

@@ -1,18 +1,54 @@
-import { fontSizes, fontWeights } from '../../theme/tokens';
-import { TypographyProps } from '@mui/material';
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+import { ColorPath } from '../../theme/token-types';
+import { fontSizes } from '../../theme/tokens/font-sizes';
+import { fontWeights } from '../../theme/tokens/font-weights';
+import { TextStyleToken } from '../../theme/tokens/text-styles';
 type FontSizeToken = keyof typeof fontSizes;
 type FontWeightToken = keyof typeof fontWeights;
-type TextProps = TypographyProps & {
+/** A palette token such as `text.subtle`, or `inherit` for the parent's colour. */
+export type TextColor = ColorPath | "inherit";
+export type TextAlign = "start" | "center" | "end";
+export type TextProps = Omit<useRender.ComponentProps<"p">, "ref" | "color"> & {
+    /**
+     * A text style such as `heading-lg` or `body-sm`: size, weight, line height
+     * and letter spacing as one token. It says how the text looks, not which
+     * element it is, so pick the element with `render` from the page hierarchy.
+     * @default "body-md"
+     */
+    textStyle?: TextStyleToken;
+    /** A font weight token, when the text style's own weight does not fit. */
     fontWeight?: FontWeightToken;
-    component?: string;
+    /**
+     * A colour token from the palette, written as its path. Use `inherit` to
+     * take the colour of the surrounding text.
+     * @default "text.base"
+     */
+    color?: TextColor;
+    /** Text alignment, following the reading direction. */
+    align?: TextAlign;
+    /**
+     * @deprecated Use `textStyle`. The `fontSize` scale (`xs` to `6xl`) is from
+     * before the text styles and is removed in a later major.
+     */
     fontSize?: FontSizeToken;
+    /** The rendered element: the `<p>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
 };
 /**
- * A token-aware wrapper around MUI `Typography`. The `fontSize` and
- * `fontWeight` props accept Lea design tokens (resolved to their underlying
- * values). `color` is applied through `sx`, so design-token palette paths
- * (`text.base`, `purple.subtle`, …) and raw CSS colours work, and the MUI
- * shorthands (`primary`, `error`, …) still map to their `.main` shade.
+ * Text set in one of Lea's text styles. Renders a `p` with no margin; pass
+ * `render` for another element:
+ *
+ * ```tsx
+ * <Text>Vi svarer innen to virkedager.</Text>
+ * <Text render={<h1 />} textStyle="heading-lg">Mine lån</Text>
+ * <Text render={<span />} textStyle="body-sm" color="text.subtle">
+ *   Sist oppdatert i dag
+ * </Text>
+ * ```
+ *
+ * Spacing around the text belongs to the layout: use `Stack` and its `gap`, or
+ * `className` and `style`.
  */
-export declare const Text: ({ children, fontSize, fontWeight, component, color, sx, ...props }: TextProps) => import("react").JSX.Element;
+export declare function Text({ textStyle, fontWeight, color, align, fontSize, render, ref, className, style, ...rest }: TextProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export {};