@leabankab/component-library 8.8.0 → 8.9.1

package/dist/components/buttons/{action-button.d.ts → action-button/action-button.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonRootProps } from './button-base';
+import { ButtonRootProps } from '../button-base';
 export type ActionButtonSize = "sm" | "lg";
 /**
  * With `iconOnly` the label is hidden but stays the accessible name, so it is

package/dist/components/buttons/{button.d.ts → button/button.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ButtonBaseProps } from './button-base';
-export type { ButtonColor, ButtonSize, ButtonVariant, } from './button-base';
+import { ButtonBaseProps } from '../button-base';
+export type { ButtonColor, ButtonSize, ButtonVariant, } from '../button-base';
 export type ButtonProps = ButtonBaseProps & {
     /** Icon before the label. Replaced by the spinner while `loading`. */
     startIcon?: ReactNode;

package/dist/components/buttons/{close-button.d.ts → close-button/close-button.d.ts}

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from './button-base';
+import { ButtonBaseProps } from '../button-base';
 export type CloseButtonProps = Omit<ButtonBaseProps, "children" | "aria-label" | "aria-labelledby"> & {
     /** Accessible name. Defaults to a translated "Close". */
     label?: string;

package/dist/components/buttons/{download-trigger.d.ts → download-trigger/download-trigger.d.ts}

@@ -1,5 +1,5 @@
-import { DownloadDataSource } from '../../utils/downloadFile';
-import { ButtonProps } from './button';
+import { DownloadDataSource } from '../../../utils/download-file';
+import { ButtonProps } from '../button/button';
 type DownloadTriggerProps = Omit<ButtonProps, "onClick"> & {
     /** File contents, or a function/promise that resolves to them. */
     data: DownloadDataSource;

package/dist/components/buttons/{icon-button.d.ts → icon-button/icon-button.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonBaseProps, ButtonVariant } from './button-base';
+import { ButtonBaseProps, ButtonVariant } from '../button-base';
 /**
  * The variants of `Button`, plus `"elevated"`: a white disc with the website's
  * soft shadow, for controls that float over a picture or a coloured section

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

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

package/dist/components/buttons/{skip-link.d.ts → skip-link/skip-link.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonBaseProps } from './button-base';
+import { ButtonBaseProps } from '../button-base';
 export type SkipLinkProps = Pick<ButtonBaseProps, "className" | "style"> & {
     /** The id of the main content, as a fragment: `#main`. */
     href: string;

package/dist/components/data-display/{card.d.ts → card/card.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { Ref } from 'react';
-import { ColorRoles } from '../color-roles';
+import { ColorRoles } from '../../color-roles';
 export type CardColor = ColorRoles<"primary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error">;
 export type CardVariant = "outlined" | "filled";
 export type CardProps = Omit<useRender.ComponentProps<"div">, "ref" | "color"> & {

package/dist/components/data-display/{chip.d.ts → chip/chip.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentProps, MouseEvent, ReactNode } from 'react';
-import { ColorRoles } from '../color-roles';
+import { ColorRoles } from '../../color-roles';
 export type ChipColor = ColorRoles<"primary" | "tertiary" | "neutral" | "muted" | "success" | "info" | "warning" | "error">;
 export type ChipVariant = "filled" | "outlined";
 export type ChipSize = "sm" | "md" | "lg";

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

@@ -1,16 +1,17 @@
-export * from './data-field';
-export * from './card';
-export * from './chip';
-export * from './tooltip';
-export * from './avatar';
-export * from './star-rating';
-export * from './table';
-export * from './rich-text';
-export * from './featured-image';
-export * from './video-player';
-export * from './link-card';
-export * from './media-card';
-export * from './service-card';
-export * from './testimonial-card';
-export * from './article-card';
-export * from './partner-row';
+export * from './data-field/data-field';
+export * from './card/card';
+export * from './chip/chip';
+export * from './tooltip/tooltip';
+export * from './avatar/avatar';
+export * from './star-rating/star-rating';
+export * from './table/table';
+export * from './rich-text/rich-text';
+export * from './featured-image/featured-image';
+export * from './video-player/video-player';
+export * from './link-card/link-card';
+export * from './media-card/media-card';
+export * from './service-card/service-card';
+export * from './testimonial-card/testimonial-card';
+export * from './article-card/article-card';
+export * from './partner-row/partner-row';
+export * from './brand-divider/brand-divider';

package/dist/components/data-display/{link-card.d.ts → link-card/link-card.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ReactElement, ReactNode, Ref } from 'react';
-import { SurfaceRoles } from '../color-roles';
+import { SurfaceRoles } from '../../color-roles';
 export type LinkCardSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
 /** A link card always leads somewhere: an `href`, or a router link. */
 type LinkCardTarget = {

package/dist/components/data-display/{media-card.d.ts → media-card/media-card.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ReactElement, ReactNode, Ref } from 'react';
-import { SurfaceRoles } from '../color-roles';
+import { SurfaceRoles } from '../../color-roles';
 export type MediaCardSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
 export type MediaCardOrientation = "horizontal" | "vertical";
 export type MediaCardImagePosition = "start" | "end";

package/dist/components/data-display/{service-card.d.ts → service-card/service-card.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ReactElement, ReactNode, Ref } from 'react';
-import { SurfaceRoles } from '../color-roles';
+import { SurfaceRoles } from '../../color-roles';
 export type ServiceCardSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
 export type ServiceCardLayout = "stacked" | "row";
 /** `alt` is required with a photo, `""` when it is decoration. */

package/dist/components/feedback/{alert.d.ts → alert/alert.d.ts}

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-import { AlertProps } from './alert-parts';
-export type { AlertColor, AlertProps, AlertSeverity, AlertSize, AlertVariant, } from './alert-parts';
+import { AlertProps } from '../alert-parts';
+export type { AlertColor, AlertProps, AlertSeverity, AlertSize, AlertVariant, } from '../alert-parts';
 /**
  * A message with Lea Bank's status colours. The ARIA `role` is derived from
  * `severity`: `error` / `warning` announce assertively (`role="alert"`) while

package/dist/components/feedback/{global-alert.d.ts → global-alert/global-alert.d.ts}

@@ -1,4 +1,4 @@
-import { AlertProps } from './alert-parts';
+import { AlertProps } from '../alert-parts';
 export type GlobalAlertProps = AlertProps & {
     /**
      * Lets the content span the full width instead of stopping at the `lg`

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

@@ -1,8 +1,8 @@
-export * from './alert';
-export * as Dialog from './dialog';
-export * as Drawer from './drawer';
-export * from './global-alert';
-export * from './simple-dialog';
-export * from './simple-drawer';
-export * from './toast';
-export * from './skeleton';
+export * from './alert/alert';
+export * as Dialog from './dialog/dialog';
+export * as Drawer from './drawer/drawer';
+export * from './global-alert/global-alert';
+export * from './dialog/simple-dialog';
+export * from './drawer/simple-drawer';
+export * from './toast/toast';
+export * from './skeleton/skeleton';

package/dist/components/feedback/{toast.d.ts → toast/toast.d.ts}

@@ -1,5 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { AlertColor, AlertSeverity } from './alert-parts';
+import { AlertColor, AlertSeverity } from '../alert-parts';
 export type ToastSeverity = AlertSeverity;
 export type ToastColor = AlertColor;
 export type ToastOptions = {

package/dist/components/form/{autocomplete.d.ts → autocomplete/autocomplete.d.ts}

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
-import { ComboFieldBaseProps } from './combo-field';
-import { SelectOption } from './select-field';
+import { ComboFieldBaseProps } from '../combo-field';
+import { SelectOption } from '../select-field';
 type AutocompleteBaseProps<Value extends string> = ComboFieldBaseProps & {
     /** The choices. Typing filters them by their label. */
     options: readonly SelectOption<Value>[];

package/dist/components/form/{email-input.d.ts → email-input/email-input.d.ts}

@@ -1,4 +1,4 @@
-import { ComboFieldBaseProps } from './combo-field';
+import { ComboFieldBaseProps } from '../combo-field';
 export type EmailInputProps = ComboFieldBaseProps & {
     /** The address (controlled). Pair with `onValueChange`. */
     value?: string;

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

@@ -1,13 +1,13 @@
-export * from './amount-slider';
-export * from './autocomplete';
-export * from './checkbox';
-export * from './email-input';
-export * from './input';
-export * from './multi-select';
-export * from './number-input';
+export * from './amount-slider/amount-slider';
+export * from './autocomplete/autocomplete';
+export * from './checkbox/checkbox';
+export * from './email-input/email-input';
+export * from './input/input';
+export * from './multi-select/multi-select';
+export * from './number-input/number-input';
 export * from './phone-number-input';
-export * as RadioGroup from './radio';
-export * as RadioCard from './radio-card';
-export * from './select';
-export * from './slider';
-export * from './switch';
+export * as RadioGroup from './radio/radio';
+export * as RadioCard from './radio-card/radio-card';
+export * from './select/select';
+export * from './slider/slider';
+export * from './switch/switch';

package/dist/components/form/{multi-select.d.ts → multi-select/multi-select.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SelectFieldBaseProps, SelectOption } from './select-field';
+import { SelectFieldBaseProps, SelectOption } from '../select-field';
 export type MultiSelectProps<Value extends string = string> = SelectFieldBaseProps & {
     /** The choices, shown with a checkbox each. */
     options: readonly SelectOption<Value>[];

package/dist/components/form/{number-input-unit.d.ts → number-input/number-input-unit.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Currency } from '../../hooks/country/countries';
-import { Language } from '../../i18n';
+import { Currency } from '../../../hooks/country/countries';
+import { Language } from '../../../i18n';
 /**
  * A unit the library writes for you, in the language of `LeaProvider`:
  *

package/dist/components/form/{radio.d.ts → radio/radio.d.ts}

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode, Ref } from 'react';
-import { RadioSize } from './radio-circle';
-import { RadioGroupBaseProps, RadioValue } from './radio-group-root';
+import { RadioSize } from '../radio-circle';
+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`.

package/dist/components/form/{radio-card.d.ts → radio-card/radio-card.d.ts}

@@ -1,8 +1,8 @@
 import { LucideIcon } from 'lucide-react';
 import { CSSProperties, ReactNode, Ref } from 'react';
-import { Option } from './radio';
-import { RadioSize } from './radio-circle';
-import { RadioCardSize, RadioGroupBaseProps, RadioValue } from './radio-group-root';
+import { Option } from '../radio/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;

package/dist/components/form/{select.d.ts → select/select.d.ts}

@@ -1,5 +1,5 @@
-import { SelectFieldBaseProps, SelectOption } from './select-field';
-export type { SelectOption };
+import { SelectFieldBaseProps, SelectOption, SelectSize } from '../select-field';
+export type { SelectOption, SelectSize };
 export type SelectProps<Value extends string = string> = SelectFieldBaseProps & {
     /** The choices. */
     options: readonly SelectOption<Value>[];
@@ -9,6 +9,12 @@ export type SelectProps<Value extends string = string> = SelectFieldBaseProps &
     defaultValue?: Value | "";
     /** Called with the value of the option the user picks. */
     onValueChange?: (value: Value) => void;
+    /**
+     * `"sm"` is a compact 32px field for a narrow place, with the `label`
+     * as a line above it instead of floating inside.
+     * @default "md"
+     */
+    size?: SelectSize;
 };
 /**
  * Select on Base UI's `Select`, in the same box as `Input`. The label, the
@@ -30,5 +36,9 @@ export type SelectProps<Value extends string = string> = SelectFieldBaseProps &
  * Values are strings, and `""` means nothing is chosen. Written with
  * `as const`, the options give `value` and `onValueChange` their type:
  * `"no" | "se"` here.
+ *
+ * An option can carry an `icon` (a flag, a logo), shown before its label in
+ * the list and, once it is chosen, in the field. `size="sm"` is a compact
+ * 32px field with its label above it.
  */
-export declare function Select<Value extends string = string>({ options, value, defaultValue, onValueChange, ...rest }: SelectProps<Value>): import("react").JSX.Element;
+export declare function Select<Value extends string = string>({ options, value, defaultValue, onValueChange, startAdornment, ...rest }: SelectProps<Value>): import("react").JSX.Element;

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

@@ -5,7 +5,20 @@ export type SelectOption<Value extends string = string> = {
     label: string;
     /** Shown, but not selectable. */
     disabled?: boolean;
+    /**
+     * A picture before the label, 20px: a flag, a logo. Decoration, hidden
+     * from assistive tech, so the label has to say it all. In a `Select` the
+     * chosen option's icon also shows in the field, unless `startAdornment`
+     * takes its place.
+     */
+    icon?: ReactNode;
 };
+/**
+ * `"md"`: the 54px field with a floating label. `"sm"`: a compact 32px field
+ * for a narrow place (the country list in the website's footer), with its
+ * label as a line above it.
+ */
+export type SelectSize = "sm" | "md";
 /** The props `Select` and `MultiSelect` have in common. */
 export type SelectFieldBaseProps = {
     /** Floating label, linked to the select for you. */
@@ -48,6 +61,8 @@ export type SelectFieldBaseProps = {
     ref?: Ref<HTMLElement>;
 };
 type SelectFieldProps = SelectFieldBaseProps & {
+    /** `Select` only; `MultiSelect` is always `md`. */
+    size?: SelectSize;
     multiple: boolean;
     /** The value as Base UI holds it: `null` or an array when empty. */
     value: string | string[] | null;
@@ -66,7 +81,7 @@ type SelectFieldProps = SelectFieldBaseProps & {
     /** 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;
+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, size, multiple, value, onValueChange, filled, display, displayHidden, valueText, children, }: SelectFieldProps): import("react").JSX.Element;
 type SelectFieldItemProps = {
     option: SelectOption;
     disabled?: boolean;
@@ -75,4 +90,8 @@ type SelectFieldItemProps = {
 };
 /** One option in the list. */
 export declare function SelectFieldItem({ option, disabled, children, }: SelectFieldItemProps): import("react").JSX.Element;
+/** The icon of an option, in the list or in the field: 20px, decoration. */
+export declare function OptionIcon({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
 export {};

package/dist/components/form/{slider.d.ts → slider/slider.d.ts}

@@ -1,6 +1,6 @@
 import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { ReactNode } from 'react';
-import { ColorRoles } from '../color-roles';
+import { ColorRoles } from '../../color-roles';
 /**
  * Requires an accessible name so the slider is never nameless. Provide a
  * visible `label`, or an `aria-label` when the design has none.

package/dist/components/index.d.ts

@@ -7,5 +7,4 @@ export * from './layout';
 export * from './navigation';
 export * from './surfaces';
 export * from './typography';
-export * from './typography/text';
-export * from './ui';
+export * from './typography/text/text';

package/dist/components/layout/{container.d.ts → container/container.d.ts}

@@ -1,5 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
-import { Breakpoint } from '../../theme/tokens/breakpoints';
+import { Breakpoint } from '../../../theme/tokens/breakpoints';
 export type ContainerSize = Exclude<Breakpoint, "xs">;
 export type ContainerProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
     /**

package/dist/components/layout/{grid.d.ts → grid/grid.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
-import { SpacingFactor } from '../../theme/token-types';
-import { Responsive } from './responsive';
+import { SpacingFactor } from '../../../theme/token-types';
+import { Responsive } from '../responsive';
 export type GridProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
     /**
      * Number of equal-width columns.

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

@@ -1,4 +1,4 @@
-export * from './container';
-export * from './grid';
+export * from './container/container';
+export * from './grid/grid';
 export type { Responsive, ResponsiveKey } from './responsive';
-export * from './stack';
+export * from './stack/stack';

package/dist/components/layout/{stack.d.ts → stack/stack.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
-import { SpacingFactor } from '../../theme/token-types';
-import { Responsive } from './responsive';
+import { SpacingFactor } from '../../../theme/token-types';
+import { Responsive } from '../responsive';
 export type StackDirection = "column" | "row";
 export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
 export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";

package/dist/components/navigation/{form-stepper.d.ts → form-stepper/form-stepper.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ProgressCircleColor } from './progress-circle';
-import { StepperLabels } from './use-stepper-labels';
+import { ProgressCircleColor } from '../progress-circle/progress-circle';
+import { StepperLabels } from '../use-stepper-labels';
 export type FormStepperProps = {
     /** Active step (1-based). */
     currentStep: number;

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

@@ -1,9 +1,10 @@
-export * from './form-stepper';
-export * from './linear-form-stepper';
-export * from './progress-circle';
-export * from './step-progress';
-export * as Tabs from './tabs';
+export * from './form-stepper/form-stepper';
+export * from './linear-form-stepper/linear-form-stepper';
+export * from './progress-circle/progress-circle';
+export * from './linear-form-stepper/step-progress';
+export * as Tabs from './tabs/tabs';
 export * from './use-stepper-labels';
-export * from './breadcrumbs';
-export * from './pagination';
-export * from './pagination-dots';
+export * from './breadcrumbs/breadcrumbs';
+export * from './pagination/pagination';
+export * from './pagination-dots/pagination-dots';
+export * from './app-header/app-header';

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ProgressCircleColor } from './progress-circle';
-import { StepperLabels } from './use-stepper-labels';
+import { ProgressCircleColor } from '../progress-circle/progress-circle';
+import { StepperLabels } from '../use-stepper-labels';
 export type LinearFormStepperProps = {
     /** Active step (1-based). */
     currentStep: number;

package/dist/components/navigation/{progress-circle.d.ts → progress-circle/progress-circle.d.ts}

@@ -1,4 +1,4 @@
-import { ColorRoles } from '../color-roles';
+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`. */

package/dist/components/navigation/{tabs.d.ts → tabs/tabs.d.ts}

@@ -1,5 +1,5 @@
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
-import { ColorRoles } from '../color-roles';
+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"> & {

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

@@ -1,3 +1,3 @@
-export * as Accordion from './accordion';
-export * from './simple-accordion';
-export * from './panel';
+export * as Accordion from './accordion/accordion';
+export * from './accordion/simple-accordion';
+export * from './panel/panel';

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

@@ -1,3 +1,3 @@
-export * from './link';
-export * as List from './lists';
-export * from './text';
+export * from './link/link';
+export * as List from './lists/lists';
+export * from './text/text';

package/dist/components/typography/{link.d.ts → link/link.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { Ref } from 'react';
-import { ColorRoles } from '../color-roles';
+import { ColorRoles } from '../../color-roles';
 export type LinkColor = ColorRoles<"secondary" | "primary" | "tertiary" | "contrast">;
 export type LinkProps = Omit<useRender.ComponentProps<"a">, "ref" | "color"> & {
     /**

package/dist/components/typography/{text.d.ts → text/text.d.ts}

@@ -1,9 +1,9 @@
 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';
+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;
 /** A palette token such as `text.subtle`, or `inherit` for the parent's colour. */