@leabankab/component-library 5.6.1

package/dist/components/animations/icons/index.d.ts

@@ -0,0 +1 @@
+export * from './status-icon';

package/dist/components/animations/icons/status-icon.d.ts

@@ -0,0 +1,21 @@
+import { AnimationColor } from '../shared';
+type StatusIconStatus = "pending" | "loading" | "done";
+type StatusIconProps = {
+    status: StatusIconStatus;
+    /** Rendered size in px. */
+    size?: number;
+    color?: AnimationColor;
+    /**
+     * Accessible name; defaults to the translated label for the current status in
+     * the `LeaProvider` language.
+     */
+    label?: string;
+};
+/**
+ * A small, inline status icon for step / progress lists. Transitions through
+ * `pending` (empty ring) → `loading` (spinner) → `done` (filled check with a
+ * one-time confetti pop). One-shot, not infinite. Respects
+ * `prefers-reduced-motion`.
+ */
+export declare const StatusIcon: ({ status, size, color, label, }: StatusIconProps) => import("react").JSX.Element;
+export {};

package/dist/components/animations/illustrations/check-animation.d.ts

@@ -0,0 +1,12 @@
+import { AnimationColor, AnimationSize } from '../shared';
+type CheckAnimationProps = {
+    size?: AnimationSize;
+    color?: AnimationColor;
+    /**
+     * Accessible name for the illustration; defaults to the translated word for
+     * "confirmed" in the `LeaProvider` language.
+     */
+    label?: string;
+};
+export declare const CheckAnimation: ({ size, color, label, }: CheckAnimationProps) => import("react").JSX.Element;
+export {};

package/dist/components/animations/illustrations/index.d.ts

@@ -0,0 +1,3 @@
+export * from './check-animation';
+export * from './pulse-animation';
+export * from './status-animation';

package/dist/components/animations/illustrations/pulse-animation.d.ts

@@ -0,0 +1,12 @@
+import { AnimationSize } from '../shared';
+type PulseAnimationProps = {
+    size?: AnimationSize;
+    /**
+     * Accessible name for the spinner; defaults to the translated word for
+     * "loading" in the `LeaProvider` language. `StatusAnimation` hides the pulse
+     * from assistive tech and announces its own status text instead.
+     */
+    label?: string;
+};
+export declare const PulseAnimation: ({ size, label, }: PulseAnimationProps) => import("react").JSX.Element;
+export {};

package/dist/components/animations/illustrations/status-animation.d.ts

@@ -0,0 +1,32 @@
+import { AnimationColor, AnimationSize } from '../shared';
+type StatusAnimationProps = {
+    /** While `true`, shows the pulse; when it flips to `false`, transitions to the check. */
+    loading: boolean;
+    size?: AnimationSize;
+    /** Colour of the resulting check (and its halo). */
+    color?: AnimationColor;
+    /**
+     * Minimum time (ms) the pulse stays visible once mounted in the loading
+     * state, so a very fast response doesn't make the spinner flash. The check
+     * appears as soon as `loading` is `false` *and* this minimum has elapsed.
+     */
+    minLoadingMs?: number;
+    /**
+     * Visually-hidden status text announced while loading. Defaults to the
+     * translated word for "loading" in the `LeaProvider` language.
+     */
+    loadingLabel?: string;
+    /**
+     * Visually-hidden status text announced once done. Defaults to the translated
+     * word for "done".
+     */
+    doneLabel?: string;
+};
+/**
+ * A controlled loading → success indicator: shows {@link PulseAnimation} while
+ * `loading`, then cross-fades into {@link CheckAnimation} (firing its one-time
+ * confetti) once `loading` becomes `false`. Announces state changes politely
+ * and respects `prefers-reduced-motion`.
+ */
+export declare const StatusAnimation: ({ loading, size, color, minLoadingMs, loadingLabel, doneLabel, }: StatusAnimationProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './icons';
+export * from './illustrations';

package/dist/components/animations/shared.d.ts

@@ -0,0 +1,67 @@
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+export type AnimationSize = "small" | "large";
+export type AnimationColor = "purple" | "green";
+export declare const colorMap: Record<AnimationColor, {
+    base: string;
+    contrast: string;
+}>;
+export declare const visuallyHidden: {
+    readonly position: "absolute";
+    readonly width: "1px";
+    readonly height: "1px";
+    readonly overflow: "hidden";
+    readonly clip: "rect(0 0 0 0)";
+    readonly whiteSpace: "nowrap";
+};
+export declare const reducedMotionOverride: {
+    readonly "@media (prefers-reduced-motion: reduce)": {
+        readonly animation: "none";
+    };
+};
+export declare const reducedMotionHidden: {
+    readonly "@media (prefers-reduced-motion: reduce)": {
+        readonly animation: "none";
+        readonly opacity: 0;
+    };
+};
+export declare const illustrationBadgeShadow = "rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 30px 60px -20px, rgba(0, 0, 0, 0.25) 0px 18px 36px -18px";
+export type ConfettiParticle = {
+    id: number;
+    x: number;
+    y: number;
+    dotSize: number;
+    round: boolean;
+    colour?: string;
+    spin?: number;
+};
+type BuildParticlesOptions = {
+    count: number;
+    burst: number;
+    distanceAt: (index: number) => number;
+    dotSizeAt: (index: number) => number;
+    colourAt?: (index: number) => string | undefined;
+    withSpin?: boolean;
+};
+export declare const buildParticles: ({ count, burst, distanceAt, dotSizeAt, colourAt, withSpin, }: BuildParticlesOptions) => ConfettiParticle[];
+type ConfettiParticlesProps = {
+    particles: ConfettiParticle[];
+    /** Illustration confetti drifts down slightly and spins. */
+    variant?: "illustration" | "icon";
+    delay?: number;
+    duration?: number;
+    /** When set, particles use currentColor instead of per-particle colours. */
+    useCurrentColor?: boolean;
+};
+export declare const ConfettiParticles: ({ particles, variant, delay, duration, useCurrentColor, }: ConfettiParticlesProps) => import("react").JSX.Element[];
+type AnimationBadgeProps = {
+    size: number;
+    base: string;
+    contrast: string;
+    iconSize: number;
+    boxShadow?: string;
+    sx?: SxProps<Theme>;
+    children?: ReactNode;
+};
+export declare const AnimationBadge: ({ size, base, contrast, iconSize, boxShadow, sx, children, }: AnimationBadgeProps) => import("react").JSX.Element;
+export {};

package/dist/components/animations/use-animation-labels.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Translated accessible names for the status animations (`StatusIcon`,
+ * `StatusAnimation`, `CheckAnimation`, `PulseAnimation`). Each component takes
+ * a label prop so a consumer can say something more specific than "loading".
+ */
+export declare const useAnimationLabels: () => Record<"pending" | "loading" | "done" | "confirmed", string>;

package/dist/components/buttons/action-button.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { ElementType } from 'react';
+type ActionButtonProps<C extends ElementType = "button"> = Omit<MuiButtonProps<C>, "variant"> & {
+    component?: C;
+};
+/**
+ * A pill-shaped call-to-action button with a built-in arrow icon.
+ *
+ * Used for primary navigation actions on the website, such as hero sections
+ * and landing pages. Supports polymorphic rendering:
+ *
+ * ```tsx
+ * <ActionButton component={Link} to="/loans">Se våra lån</ActionButton>
+ * <ActionButton component={NextLink} href="/loans">Se våra lån</ActionButton>
+ * ```
+ */
+export declare const ActionButton: ({ children, ...rest }: ActionButtonProps) => import("react").JSX.Element;
+export {};

package/dist/components/buttons/button.d.ts

@@ -0,0 +1,20 @@
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { ElementType } from 'react';
+type ButtonProps<C extends ElementType = "button"> = MuiButtonProps<C> & {
+    /** The component to render the button as. */
+    component?: C;
+};
+/**
+ * A standard button component.
+ *
+ * Supports polymorphic rendering via the `component` prop, which enables
+ * type-safe usage with any router link component:
+ *
+ * ```tsx
+ * <Button component={Link} to="/about">About</Button>         // React Router
+ * <Button component={NextLink} href="/about">About</Button>   // Next.js
+ * <Button href="/about">About</Button>                        // Plain anchor
+ * ```
+ */
+export declare const Button: ({ variant, size, children, ...rest }: ButtonProps) => import("react").JSX.Element;
+export {};

package/dist/components/buttons/download-trigger.d.ts

@@ -0,0 +1,33 @@
+import { DownloadDataSource } from '../../utils/downloadFile';
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { ElementType } from 'react';
+type DownloadTriggerProps<C extends ElementType = "button"> = Omit<MuiButtonProps<C>, "onClick"> & {
+    component?: C;
+    /** File contents, or a function/promise that resolves to them. */
+    data: DownloadDataSource;
+    /** File name. */
+    fileName: string;
+    /** MIME type. */
+    mimeType?: string;
+    /** Callback for when the download starts. */
+    onDownload?: () => void;
+    /** Callback for when the download fails. */
+    onDownloadError?: (error: unknown) => void;
+};
+/**
+ * A button that triggers a download of a file.
+ *
+ * Supports polymorphic rendering via the `component` prop, which enables
+ * type-safe usage with any router link component:
+ *
+ * ```tsx
+ * <DownloadTrigger component={Link} to="/about">About</DownloadTrigger>
+ * <DownloadTrigger component={NextLink} href="/about">About</DownloadTrigger>
+ * <DownloadTrigger href="/about">About</DownloadTrigger>
+ * ```
+ *
+ * Without `children` the label is the translated word for "download" in the
+ * `LeaProvider` language.
+ */
+export declare const DownloadTrigger: ({ data, fileName, mimeType, onDownload, onDownloadError, loading: loadingProp, disabled, children, ...rest }: DownloadTriggerProps) => import("react").JSX.Element;
+export {};

package/dist/components/buttons/icon-button.d.ts

@@ -0,0 +1,12 @@
+import { IconButtonProps as MuiIconButtonProps } from '@mui/material';
+import { ElementType } from 'react';
+type IconButtonProps<C extends ElementType = "button"> = MuiIconButtonProps<C> & {
+    component?: C;
+};
+/**
+ * An icon-only button styled with Lea's design tokens. Because it has no
+ * visible text, always pass an `aria-label` so the control has an accessible
+ * name.
+ */
+export declare const IconButton: ({ ...rest }: IconButtonProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export * from './action-button';
+export * from './button';
+export * from './download-trigger';
+export * from './icon-button';
+export * from './skip-link';

package/dist/components/buttons/skip-link.d.ts

@@ -0,0 +1,6 @@
+type SkipLinkProps = {
+    href: string;
+    children: React.ReactNode;
+};
+export default function SkipLink({ href, children }: SkipLinkProps): import("react").JSX.Element;
+export {};

package/dist/components/buttons/use-download-labels.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Translated default copy for `DownloadTrigger`. Consumers can override it by
+ * passing `children`.
+ */
+export declare const useDownloadLabels: () => Record<"download", string>;

package/dist/components/data-display/card.d.ts

@@ -0,0 +1,6 @@
+import { CardProps as MuiCardProps } from '@mui/material';
+/**
+ * A surface container that wraps MUI `Card` with Lea's design tokens for
+ * radius, elevation, and colours. Use it to group related content on a page.
+ */
+export declare const Card: ({ ...props }: MuiCardProps) => import("react").JSX.Element;

package/dist/components/data-display/chip.d.ts

@@ -0,0 +1,11 @@
+import { ChipProps as MuiChipProps } from '@mui/material';
+export type ChipProps = MuiChipProps;
+/**
+ * A compact label for tags, statuses, or filter selections, styled with Lea's
+ * design tokens on top of MUI `Chip`.
+ *
+ * With `onDelete`, the delete affordance is named in the `LeaProvider` language
+ * and includes the chip's own label, so a row of chips reads unambiguously.
+ * Pass `deleteIcon` to supply a different glyph and name.
+ */
+export declare const Chip: ({ label, onDelete, deleteIcon, ...rest }: ChipProps) => import("react").JSX.Element;

package/dist/components/data-display/data-field.d.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '@mui/material';
+import { ReactNode } from 'react';
+export type DataFieldProps = Omit<BoxProps, "children"> & {
+    label: ReactNode;
+    value: ReactNode;
+    divider?: boolean;
+};
+/**
+ * A single label/value row for presenting read-only details, with an optional
+ * bottom divider so several fields can be stacked into a summary list.
+ */
+export declare const DataField: ({ label, value, divider, sx, ...rest }: DataFieldProps) => import("react").JSX.Element;

package/dist/components/data-display/index.d.ts

@@ -0,0 +1,4 @@
+export * from './data-field';
+export * from './card';
+export * from './chip';
+export * from './tooltip';

package/dist/components/data-display/tooltip.d.ts

@@ -0,0 +1,37 @@
+import { TooltipProps as MuiTooltipProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ReactElement, ReactNode } from 'react';
+import { TooltipSurfaceVariant, TooltipTriggerVariant } from '../../theme/components/tooltip.theme';
+export type { TooltipSurfaceVariant, TooltipTriggerVariant };
+type WrappedTooltipProps = Omit<MuiTooltipProps, "children"> & {
+    children: ReactElement;
+    ariaLabel?: never;
+    triggerIcon?: never;
+    triggerVariant?: never;
+    triggerSx?: never;
+    surfaceVariant?: TooltipSurfaceVariant;
+};
+type TriggerTooltipProps = Omit<MuiTooltipProps, "children"> & {
+    children?: never;
+    /** Accessible name for the built-in trigger button. */
+    ariaLabel: string;
+    /** Trigger icon or content. Defaults to `InfoIcon`. */
+    triggerIcon?: ReactNode;
+    /** Visual style of the built-in trigger button. @default "icon" */
+    triggerVariant?: TooltipTriggerVariant;
+    /** Optional `sx` override for the built-in trigger button. */
+    triggerSx?: SxProps<Theme>;
+    /** Tooltip bubble colour treatment. @default "light" */
+    surfaceVariant?: TooltipSurfaceVariant;
+};
+export type TooltipProps = WrappedTooltipProps | TriggerTooltipProps;
+/**
+ * Tooltip wrapper around MUI's `Tooltip`.
+ *
+ * Use it two ways:
+ * - **Wrapped child:** pass `children` to decorate any trigger you already have.
+ * - **Built-in trigger:** omit `children` and pass `ariaLabel`; a small trigger
+ *   button is rendered for you, styled by `triggerVariant` and optionally
+ *   extended via `triggerSx`.
+ */
+export declare const Tooltip: ({ title, placement, children, ariaLabel, triggerIcon, triggerVariant, triggerSx, surfaceVariant, slotProps, id: suppliedId, ...rest }: TooltipProps) => import("react").JSX.Element;

package/dist/components/data-display/use-chip-labels.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Translated accessible name for `Chip`'s delete affordance, which MUI renders
+ * as an unlabelled icon. Consumers can override it by passing their own
+ * `deleteIcon`.
+ */
+export declare const useChipLabels: () => Record<"remove", string>;

package/dist/components/dev-panel/dev-panel-country.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+/** A selectable country. Provide between 2 and 4. */
+export type DevPanelCountryOption<T extends string> = {
+    /** The value reported to `onChange` (e.g. an ISO code). */
+    value: T;
+    /** Country name shown in the pill. */
+    label: ReactNode;
+    /** Optional short code shown, muted, before the name (e.g. `"SE"`). */
+    code?: ReactNode;
+    disabled?: boolean;
+};
+export type DevPanelCountryProps<T extends string> = {
+    /** The selected country (fully controlled). */
+    value: T;
+    /** Called with the newly selected country. */
+    onChange: (value: T) => void;
+    /** 2-4 country options. */
+    options: DevPanelCountryOption<T>[];
+    /** Section heading. Defaults to `"Country"`. */
+    label?: ReactNode;
+};
+/**
+ * Segmented country selector. Renders each option as a pill with an optional
+ * muted code before the name. Single-select and fully controlled.
+ */
+export declare function DevPanelCountry<T extends string>({ value, onChange, options, label, }: DevPanelCountryProps<T>): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-flow.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export type DevPanelFlowProps = {
+    /** Flow identifier (e.g. a short hash). */
+    flowId?: ReactNode;
+    /** Process name (e.g. `"loan-se"`). */
+    process?: ReactNode;
+    /** Variant name (e.g. `"refinance"`). */
+    variant?: ReactNode;
+    /** Leading label. Defaults to `"Flow"`. */
+    label?: ReactNode;
+    /** Show the copy button. Defaults to `true`. */
+    showCopy?: boolean;
+    /**
+     * String written to the clipboard. Defaults to the string parts joined by
+     * `" · "`.
+     */
+    copyValue?: string;
+    /** Accessible name for the copy button. Defaults to a translated label. */
+    copyLabel?: string;
+    /** Called after a successful copy. */
+    onCopy?: () => void;
+};
+/**
+ * The flow header row: an uppercase label followed by the `id · process ·
+ * variant` breadcrumb and a copy button. Copy success is announced via a
+ * `role="status"` live region.
+ */
+export declare function DevPanelFlow({ flowId, process, variant, label, showCopy, copyValue, copyLabel, onCopy, }: DevPanelFlowProps): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-footer.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type DevPanelFooterProps = {
+    /** Called when "Reseed" is pressed. Omit to hide the button. */
+    onReseed?: () => void;
+    /** Label for the reseed button. Defaults to `"Reseed"`. */
+    reseedLabel?: ReactNode;
+    /** Called when "Copy URL" is pressed. Omit to hide the button. */
+    onCopyUrl?: () => void;
+    /** When set, this URL is written to the clipboard before `onCopyUrl` fires. */
+    url?: string;
+    /** Label for the copy-URL button. Defaults to `"Copy URL"`. */
+    copyUrlLabel?: ReactNode;
+    /** Called when "Console" is pressed. Omit to hide the button. */
+    onConsole?: () => void;
+    /** Label for the console button. Defaults to `"Console"`. */
+    consoleLabel?: ReactNode;
+    /** Extra actions appended after the built-in buttons. */
+    children?: ReactNode;
+};
+/**
+ * The footer action row. Renders a button only for each callback provided, so
+ * apps opt into just the actions they support. `Copy URL` writes `url` to the
+ * clipboard (when given) before invoking `onCopyUrl`. Extra `children` are
+ * appended after the built-ins.
+ */
+export declare function DevPanelFooter({ onReseed, reseedLabel, onCopyUrl, url, copyUrlLabel, onConsole, consoleLabel, children, }: DevPanelFooterProps): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-payload.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export type DevPanelPayloadProps = {
+    /**
+     * The payload to preview. Objects are pretty-printed as JSON; strings are
+     * shown verbatim.
+     */
+    value: unknown;
+    /** Label on the toggle. Defaults to `"Payload preview"`. */
+    label?: ReactNode;
+    /** Heading of the expanded dark panel. Defaults to `label`. */
+    title?: ReactNode;
+    /**
+     * Where the payload opens. `"inline"` (default) expands a dark panel below the
+     * toggle; `"side"` opens a floating panel beside the `DevPanel` as a dialog
+     * (dismissed with Escape or a click outside).
+     */
+    placement?: "inline" | "side";
+    /** Optional pill in the side flyout header, e.g. `"live"`. Ignored inline. */
+    badge?: ReactNode;
+    /** Controlled open state. Omit for uncontrolled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name for the copy button. Defaults to a translated label. */
+    copyLabel?: string;
+    /** Visible label for the side flyout's copy action. Defaults to a translated label. */
+    copyJsonLabel?: string;
+    /** Accessible name for the side flyout's close button. Defaults to a translated label. */
+    closeLabel?: string;
+    /**
+     * Syntax-highlight JSON payloads. Defaults to `true`. Non-JSON strings always
+     * render verbatim. Set `false` for the plain single-colour view.
+     */
+    highlight?: boolean;
+};
+/**
+ * A payload preview. The toggle is a disclosure (`aria-expanded`/`aria-controls`)
+ * that reveals the pretty-printed JSON with a copy control; copy success is
+ * announced via a `role="status"` live region. With `placement="inline"`
+ * (default) it expands a dark panel below the toggle; with `placement="side"` it
+ * opens a floating dialog beside the panel (Escape / click-outside to close,
+ * focus moves in and returns to the toggle on close). Uncontrolled by default;
+ * drive it with `open`/`onOpenChange` when needed.
+ */
+export declare function DevPanelPayload({ value, label, title, placement, badge, open, defaultOpen, onOpenChange, copyLabel, copyJsonLabel, closeLabel, highlight, }: DevPanelPayloadProps): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-status.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { DevPanelStatusColor } from '../../theme/components/dev-panel.theme';
+export type { DevPanelStatusColor };
+/** A selectable application status. */
+export type DevPanelStatusOption<T extends string> = {
+    value: T;
+    label: ReactNode;
+    /**
+     * Colour of the leading dot / selected border. Defaults to `"neutral"`. The
+     * dot is decorative — status is always conveyed by the label text too, so it
+     * never relies on colour alone.
+     */
+    color?: DevPanelStatusColor;
+    disabled?: boolean;
+};
+export type DevPanelStatusProps<T extends string> = {
+    /** The selected status (fully controlled). */
+    value: T;
+    /** Called with the newly selected status. */
+    onChange: (value: T) => void;
+    options: DevPanelStatusOption<T>[];
+    /** Section heading. Defaults to `"Application status"`. */
+    label?: ReactNode;
+};
+/**
+ * A radio grid for the application status. Each card carries a decorative
+ * coloured dot mapped to a status token; the status is always spelled out in the
+ * label so it is never signalled by colour alone. Single-select and fully
+ * controlled.
+ */
+export declare function DevPanelStatus<T extends string>({ value, onChange, options, label, }: DevPanelStatusProps<T>): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-step-state.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+/** A selectable variation of the current step. */
+export type DevPanelStepStateOption<T extends string> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type DevPanelStepStateProps<T extends string> = {
+    /** The selected step-state variation (fully controlled). */
+    value: T;
+    /** Called with the newly selected variation. */
+    onChange: (value: T) => void;
+    options: DevPanelStepStateOption<T>[];
+    /** Section heading. Defaults to `"Step state"`. */
+    label?: ReactNode;
+    /**
+     * Name of the step the variations belong to (e.g. `"Skulder"`). When set, a
+     * `"{variationsLabel} {stepLabel}"` line is shown above the chips.
+     */
+    stepLabel?: ReactNode;
+    /** Prefix for the step-label line. Defaults to `"Variations for"`. */
+    variationsLabel?: ReactNode;
+};
+/**
+ * Segmented chips for the different states/variations of the current step (e.g.
+ * required debts / voluntary / no debts). Single-select and fully controlled.
+ */
+export declare function DevPanelStepState<T extends string>({ value, onChange, options, label, stepLabel, variationsLabel, }: DevPanelStepStateProps<T>): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-steps.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { StepCircleState } from '../../theme/components/dev-panel.theme';
+/** A single step in the jump-to-step grid. */
+export type DevPanelStep = {
+    /** Short label shown beneath the circle (e.g. `"Skulder"`). */
+    label: ReactNode;
+    /**
+     * Explicit visual state. When omitted it is derived from `currentStep`
+     * (before → `complete`, at → `current`, after → `upcoming`).
+     */
+    status?: StepCircleState;
+    /** Marks the step with a warning dot (e.g. it needs attention). */
+    flagged?: boolean;
+    disabled?: boolean;
+};
+export type DevPanelStepsProps = {
+    /** The ordered steps. */
+    steps: DevPanelStep[];
+    /**
+     * The active step (1-based). Drives the count and, for any step without an
+     * explicit `status`, the derived complete/current/upcoming state.
+     */
+    currentStep?: number;
+    /** Called when a step is chosen, with its 1-based number and the step. */
+    onStepSelect?: (step: number, item: DevPanelStep) => void;
+    /** Section heading. Defaults to `"Jump to step"`. */
+    label?: ReactNode;
+    /** Show the `currentStep / total` count in the heading. Defaults to `true`. */
+    showCount?: boolean;
+    /** Number of step circles per row. Defaults to `4`. */
+    columns?: number;
+};
+/**
+ * A grid of numbered step circles for jumping between form steps. Completed
+ * steps show a check, the current step is filled, and a warning dot flags steps
+ * that need attention. Fully controlled: the consumer supplies the steps and the
+ * active step, and handles selection.
+ */
+export declare function DevPanelSteps({ steps, currentStep, onStepSelect, label, showCount, columns, }: DevPanelStepsProps): import("react").JSX.Element;

package/dist/components/dev-panel/dev-panel-variant.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+/** A selectable flow variant. */
+export type DevPanelVariantOption<T extends string> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type DevPanelVariantProps<T extends string> = {
+    /** The selected variant (fully controlled). */
+    value: T;
+    /** Called with the newly selected variant. */
+    onChange: (value: T) => void;
+    options: DevPanelVariantOption<T>[];
+    /** Section heading. Defaults to `"Variant"`. */
+    label?: ReactNode;
+};
+/**
+ * Segmented flow-variant selector (e.g. cash loan / refinance / top-up).
+ * Single-select and fully controlled.
+ */
+export declare function DevPanelVariant<T extends string>({ value, onChange, options, label, }: DevPanelVariantProps<T>): import("react").JSX.Element;