@leabankab/component-library 8.7.0 → 8.9.0

package/dist/website/partner-list.d.ts

@@ -0,0 +1,79 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+/** `alt` is required with a logo. */
+type PartnerListLogo = {
+    /** The partner's logo, shown on a white tile. */
+    src: string;
+    /**
+     * The partner's name, for screen readers; `""` when the text beside
+     * the logo already names the partner.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, as on
+     * `PartnerRow`: `next/image`, or an `<img loading="lazy">`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+/** One partner in the list. */
+export type PartnerListItem = PartnerListLogo & {
+    /** The partner's name. The list is sorted by it. */
+    name: string;
+    /**
+     * The text about the partner, beside the logo: usually `RichText` with the
+     * CMS content, whose heading is the name.
+     */
+    content: ReactNode;
+};
+export type PartnerListProps = Omit<useRender.ComponentProps<"div">, "ref" | "children" | "defaultValue" | "onChange"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The partners, in any order. */
+    items: readonly PartnerListItem[];
+    /**
+     * How many partners a page shows.
+     * @default 9
+     */
+    pageSize?: number;
+    /** The page shown, counted from 1. Pass it to control the list. */
+    value?: number;
+    /**
+     * The page shown first when the list is not controlled.
+     * @default 1
+     */
+    defaultValue?: number;
+    /** Called with the page number when the visitor turns the page. */
+    onValueChange?: (page: number) => void;
+};
+/**
+ * The website's list of partners, as on leabank.no/om-oss/samarbeidspartnere:
+ * a `PartnerRow` per partner, sorted by name, nine to a page, with previous
+ * and next buttons and a dot per page under them.
+ *
+ * ```tsx
+ * <Section surface="subtle" width="wide">
+ *   <PartnerList
+ *     items={partners.map((partner) => ({
+ *       name: partner.name,
+ *       content: <RichText>…</RichText>,
+ *       src: partner.logo,
+ *       alt: "",
+ *     }))}
+ *   />
+ * </Section>
+ * ```
+ *
+ * The partners are sorted in the `LeaProvider` language (Å after Z in
+ * Norwegian and Swedish, Ä and Ö in Swedish and Finnish order), so the
+ * order follows the market. The controls show from two pages: elevated
+ * buttons named "Forrige side" and "Neste side", which stay focusable at the
+ * first and last page, and `PaginationDots`; the new page is announced as
+ * "Side 2 av 3". The list takes the width it is given: on the website a
+ * `Section` with `width="wide"`.
+ */
+export declare function PartnerList({ items, pageSize, value: valueProp, defaultValue, onValueChange, render, ref, className, ...rest }: PartnerListProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | null;
+export {};

package/dist/website/payment-feature.d.ts

@@ -0,0 +1,85 @@
+import { ReactElement, ReactNode } from 'react';
+import { PanelProps } from '../index';
+export type PaymentFeatureImagePosition = "start" | "end";
+/** A logo in the row at the top. */
+export type PaymentFeatureLogo = {
+    /** The logo file. */
+    src: string;
+    /** The name of the brand, for screen readers. */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with the logo's own `width` and `height`.
+     */
+    imageRender?: ReactElement;
+};
+/** `alt` is required with a photo, `""` when it is decoration. */
+type PaymentFeatureImage = {
+    /** The photo beside the text. Without one, the text takes the card. */
+    src: string;
+    /**
+     * What the photo shows, for screen readers; `""` when it is decoration
+     * and the text says it all.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image`. Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type PaymentFeatureProps = Omit<PanelProps, "title" | "children" | "size"> & PaymentFeatureImage & {
+    /** The logos of the payment brands, in a row over the text. */
+    logos?: readonly PaymentFeatureLogo[];
+    /** The title. */
+    title: ReactNode;
+    /** The element for the title, an `<h2>` by default: `titleRender={<h3 />}`. */
+    titleRender?: ReactElement;
+    /**
+     * The text under the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    text?: ReactNode;
+    /**
+     * The calls to action, in a row that wraps: an `ActionButton`, a `Link`
+     * with `arrow`, or both.
+     */
+    actions?: ReactNode;
+    /** The price example under the actions, in the small print. */
+    priceExample?: ReactNode;
+    /**
+     * Where the photo sits: `"start"` before the text (on the left, or on
+     * top below 1024px), `"end"` after it.
+     * @default "end"
+     */
+    imagePosition?: PaymentFeatureImagePosition;
+};
+/**
+ * A payment feature on a white `Panel`: a row of brand logos, a title, a
+ * text and the calls to action in one column, and a photo in the other.
+ *
+ * ```tsx
+ * <Section surface="subtle">
+ *   <PaymentFeature
+ *     logos={[{ src: "/logoer/vipps.svg", alt: "Vipps" }, { src: "/logoer/visa.svg", alt: "Visa" }]}
+ *     title="Betal med Lea Bank i nettbutikken"
+ *     text="Del opp betalingen eller betal senere når du handler hos våre partnere."
+ *     actions={<ActionButton render={<NextLink href="/betaling" />}>Les mer</ActionButton>}
+ *     src="/bilder/betaling.jpg"
+ *     alt=""
+ *   />
+ * </Section>
+ * ```
+ *
+ * From 1024px the text column is at most 560px and the photo, at most 435px
+ * wide, sits at the end of the other column; below 1024px they stack 32px
+ * apart. The logos are up to 48px tall (32px below 768px) with a line between
+ * them, and wrap on a narrow screen. Put it on a coloured section: the panel
+ * is white.
+ */
+export declare function PaymentFeature({ logos, title, titleRender, text, actions, priceExample, src, alt, imageRender, imagePosition, className, ...rest }: PaymentFeatureProps): import("react").JSX.Element;
+export {};

package/dist/website/promo-grid.d.ts

@@ -0,0 +1,71 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type PromoGridImagePosition = "start" | "end";
+/** One of the smaller photos over the text. */
+export type PromoGridImage = {
+    /** The photo. */
+    src: string;
+    /** What the photo shows, for screen readers; `""` when it is decoration. */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with `fill`. Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+};
+export type PromoGridProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The large photo. */
+    src: string;
+    /** What the large photo shows, for screen readers; `""` when it is decoration. */
+    alt: string;
+    /**
+     * The image element to render for the large photo instead of the plain
+     * `<img>`, as on `FeaturedImage`.
+     */
+    imageRender?: ReactElement;
+    /** A call to action on the large photo: an `ActionButton`. */
+    action?: ReactNode;
+    /** One or two smaller photos over the text, side by side. */
+    images?: readonly [PromoGridImage] | readonly [PromoGridImage, PromoGridImage];
+    /** The title on the beige block, in capitals. */
+    title: ReactNode;
+    /** The element for the title, an `<h2>` by default: `titleRender={<h3 />}`. */
+    titleRender?: ReactElement;
+    /**
+     * The text under the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Where the large photo sits from 1024px: `"start"` (on the left) or
+     * `"end"`. Below 1024px it is always on top.
+     * @default "start"
+     */
+    imagePosition?: PromoGridImagePosition;
+};
+/**
+ * A promotion of photos and a title: a large `FeaturedImage` on one side, and
+ * on the other one or two photos over a beige block with the title in
+ * capitals, as on leabank.no's about page.
+ *
+ * ```tsx
+ * <Section>
+ *   <PromoGrid
+ *     src="/bilder/kontor.jpg"
+ *     alt=""
+ *     action={<ActionButton render={<NextLink href="/lan" />}>Se våre lån</ActionButton>}
+ *     images={[{ src: "/bilder/team.jpg", alt: "" }]}
+ *     title="Lån til det du trenger"
+ *     subtitle="Vi hjelper deg med lån uten sikkerhet til det du har lyst på."
+ *   />
+ * </Section>
+ * ```
+ *
+ * From 1024px two equal columns 600px tall, 16px apart, the smaller photos
+ * taking the room the block leaves. Below 1024px everything stacks, the
+ * photos at 1 : 0.5, the two smaller ones side by side down to 768px. The
+ * block is beige with dark text on any section.
+ */
+export declare function PromoGrid({ src, alt, imageRender, action, images, title, titleRender, subtitle, imagePosition, render, ref, className, ...rest }: PromoGridProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/section-header.d.ts

@@ -0,0 +1,53 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type SectionHeaderTitleSize = "sm" | "lg";
+export type SectionHeaderProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The short line above the title. */
+    eyebrow?: ReactNode;
+    /** The title of the section. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default. Pass another level where
+     * the page outline needs one: `titleRender={<h1 />}`.
+     */
+    titleRender?: ReactElement;
+    /**
+     * `"lg"`: 41px (26px below 768px). `"sm"`: 26px at every width.
+     * @default "lg"
+     */
+    titleSize?: SectionHeaderTitleSize;
+    /**
+     * The text under the title, at most 720px wide. A string becomes one
+     * paragraph; pass `<p>` elements for several.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The calls to action, in a centred row that wraps: an `ActionButton`,
+     * a `Link` with `arrow`, or both. The row is only there when this is.
+     */
+    actions?: ReactNode;
+    /** The price example under the actions, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * The centred heading of a website section: a short line, the title, a text
+ * of at most 720px and a row of calls to action, as at the top of the
+ * sections on leabank.no.
+ *
+ * ```tsx
+ * <Section>
+ *   <SectionHeader
+ *     eyebrow="Om Lea Bank"
+ *     title="Vi gjør det enkelt å ta smarte økonomiske valg"
+ *     subtitle="Lea Bank er en digital bank …"
+ *     actions={<ActionButton render={<NextLink href="/om-oss" />}>Les mer om oss</ActionButton>}
+ *   />
+ * </Section>
+ * ```
+ *
+ * It takes the text colour of its section. The parts are 16px apart and the
+ * actions 32px under them; the actions are 32px apart.
+ */
+export declare function SectionHeader({ eyebrow, title, titleRender, titleSize, subtitle, actions, priceExample, render, ref, className, ...rest }: SectionHeaderProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/section.d.ts

@@ -0,0 +1,53 @@
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+import { SurfaceRoles } from '../components/color-roles';
+export type SectionSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
+export type SectionSpacing = "none" | "sm" | "lg";
+export type SectionWidth = "full" | "wide" | "narrow";
+export type SectionProps = Omit<useRender.ComponentProps<"section">, "ref"> & {
+    /** The rendered element: the `<section>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The colour of the band, after its `bg` token: `"base"` (white),
+     * `"subtle"` (grey), `"muted"` (beige), `"contrast"` (near-black) or
+     * `"contrast-accent"` (deep purple). On the last two the text is white;
+     * give a `Link` inside `color="contrast"` there.
+     * @default "base"
+     */
+    surface?: SectionSurface;
+    /**
+     * The room above the content: `"lg"` 112px (64px below 768px), `"sm"` 64px
+     * (32px), `"none"`.
+     * @default "lg"
+     */
+    spacingTop?: SectionSpacing;
+    /**
+     * The room below the content, in the same steps as `spacingTop`.
+     * @default "lg"
+     */
+    spacingBottom?: SectionSpacing;
+    /**
+     * How much of the content column the content takes, centred: `"full"`,
+     * `"wide"` (75 %) or `"narrow"` (60 %). Below 1024px it is always the full
+     * column.
+     * @default "full"
+     */
+    width?: SectionWidth;
+};
+/**
+ * A band of a website page: the colour from edge to edge, the content in a
+ * column of at most 1312px in the middle, 64px from the sides (16px below
+ * 768px). Every block on leabank.no sits in one.
+ *
+ * ```tsx
+ * <Section surface="subtle" spacingTop="none">
+ *   <SectionHeader title="Vi gjør det enkelt å ta smarte økonomiske valg" />
+ * </Section>
+ * ```
+ *
+ * The section sets the text colour for what is inside it, white on the dark
+ * surfaces, so text, a vertical `MediaCard` and the sections that have no
+ * colour of their own follow it. Renders a `section`; pass `render` for
+ * another element.
+ */
+export declare function Section({ surface, spacingTop, spacingBottom, width, render, ref, className, children, ...rest }: SectionProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/service-card-grid.d.ts

@@ -0,0 +1,33 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode, Ref } from 'react';
+export type ServiceCardGridProps = Omit<useRender.ComponentProps<"div">, "ref" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The cards: one to four `ServiceCard`s, in the order of the website's
+     * grid. The first two are `layout="stacked"` (the default); give the third
+     * and fourth `layout="row"`. Each one is put in an item of a list.
+     */
+    children?: ReactNode;
+};
+/**
+ * The website's grid of service cards, as on leabank.no/lan: a large card
+ * and a narrow one side by side, then a wide row under them.
+ *
+ * ```tsx
+ * <Section surface="muted">
+ *   <ServiceCardGrid>
+ *     <ServiceCard render={<NextLink href="/lan/forbrukslan" />} title="Forbrukslån" … />
+ *     <ServiceCard render={<NextLink href="/lan/refinansiering" />} title="Refinansiering" … />
+ *     <ServiceCard render={<NextLink href="/sparing" />} layout="row" title="Sparing" … />
+ *     <ServiceCard render={<NextLink href="/betalingsforsikring" />} layout="row" title="Betalingsforsikring" … />
+ *   </ServiceCardGrid>
+ * </Section>
+ * ```
+ *
+ * From 1024px three columns: the first card two columns wide and the second
+ * one, both 576px tall; a third card takes the row under them (320px) on its
+ * own, or the first column of it with a fourth in the other two. Below
+ * 1024px one column, each card at most 440px tall. The cards are a list.
+ */
+export declare function ServiceCardGrid({ render, ref, className, children, ...rest }: ServiceCardGridProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/side-nav.d.ts

@@ -0,0 +1,57 @@
+import { ComponentProps, ReactNode } from 'react';
+import { SiteHeaderLink } from './site-header';
+/**
+ * A link in the side navigation: `{ label, href }`, or `{ label, render }`
+ * with a router link carrying its own `href`. A link without either does not
+ * compile.
+ */
+export type SideNavItem = SiteHeaderLink & {
+    /**
+     * This page: the link is marked `aria-current="page"` and has the arrow
+     * before it.
+     */
+    current?: boolean;
+};
+export type SideNavProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The pages beside this one (the website's child pages), in order. */
+    items: SideNavItem[];
+    /**
+     * The name of the navigation, read out with it: the part of the site it
+     * covers ("Investor Relations"). Left out, "Sidemeny".
+     */
+    label?: string;
+    /** The `Breadcrumbs` at the top of the content panel. */
+    breadcrumbs?: ReactNode;
+    /** The page's content, in the white panel. */
+    children: ReactNode;
+};
+/**
+ * The website's two-column page (`TwoColumnLayout`, the Investor Relations
+ * pages of leabank.no): a beige sidebar of links to the pages of one part of
+ * the site, beside a white panel with the breadcrumbs and the content. Put it
+ * in a `Section` (grey, `spacingTop` and `spacingBottom` `sm`, as on the
+ * website).
+ *
+ * ```tsx
+ * <Section surface="subtle" spacingTop="sm" spacingBottom="sm">
+ *   <SideNav
+ *     label="Investor Relations"
+ *     items={[
+ *       { label: "About Lea Bank", render: <NextLink href="/om-oss/investor-relations/about-lea-bank" />, current: true },
+ *       { label: "Dividend policy", render: <NextLink href="/om-oss/investor-relations/dividend-policy" /> },
+ *     ]}
+ *     breadcrumbs={<Breadcrumbs items={crumbs} />}
+ *   >
+ *     <RichText>…</RichText>
+ *   </SideNav>
+ * </Section>
+ * ```
+ *
+ * From 1024px the sidebar is 280px wide (360 from 1312px), 16 from the
+ * panel, and stays in view while the page scrolls (32 from the top); below
+ * 1024px it is a block over the panel, 32 apart. The sidebar is a `nav`
+ * named by `label`; the link to this page is marked `aria-current="page"`
+ * and has a purple arrow before it, the others underline on hover. The panel
+ * is a `Panel size="sm"`: what is in it stacks 16 apart.
+ */
+export declare function SideNav({ items, label, breadcrumbs, children, className, ...rest }: SideNavProps): import("react").JSX.Element;

package/dist/website/site-footer.d.ts

@@ -0,0 +1,122 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { SiteHeaderLink } from './site-header';
+/**
+ * A link in the footer: `{ label, href }`, or `{ label, render }` with a
+ * router link carrying its own `href`. A link without either does not
+ * compile. A link that opens in a new tab is a `render` with `target`.
+ */
+export type SiteFooterLink = SiteHeaderLink;
+/** A column of links under a title ("Tjenester", "Support", "Juridisk"). */
+export type SiteFooterColumn = {
+    /** The title over the links, a heading (`titleRender`). */
+    title: ReactNode;
+    links: SiteFooterLink[];
+};
+/** A link to one of the bank's pages on a social network. */
+export type SiteFooterSocialLink = SiteFooterLink & {
+    /**
+     * The network's logo, 24px: an `<img>` or `next/image` with `alt=""`, as
+     * the label names the link.
+     */
+    icon: ReactNode;
+};
+/** The four markets, by the codes of the languages they speak. */
+export type SiteFooterMarketCode = "no" | "se" | "fi" | "es";
+/** The list of markets: the select that takes the visitor to another one. */
+export type SiteFooterMarket = {
+    /** The market of this site, shown with its flag. */
+    value: SiteFooterMarketCode;
+    /**
+     * Called with the market the visitor picks. The website goes to that
+     * market's site (`https://leabank.se/`).
+     */
+    onValueChange: (value: SiteFooterMarketCode) => void;
+    /**
+     * The markets to choose from, sorted by name in the page's language.
+     * @default ["no", "se", "fi", "es"]
+     */
+    options?: readonly SiteFooterMarketCode[];
+    /** The title over the select, which names it. Left out, "Marked". */
+    title?: ReactNode;
+};
+/** The links to the bank on social networks, under a title. */
+export type SiteFooterSocial = {
+    /** The title over the links. Left out, "Sosiale medier". */
+    title?: ReactNode;
+    links: SiteFooterSocialLink[];
+};
+export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
+    /**
+     * The white logo, an `<img>` or `next/image`, 140px wide. It is the
+     * content of the link to the start page, named "Lea Bank, forside" as in
+     * `SiteHeader`, so the image can take `alt=""`.
+     */
+    logo: ReactNode;
+    /**
+     * The link to the start page, a router link carrying its own `href`:
+     * `<NextLink href="/" />`.
+     * @default <a href="/" />
+     */
+    homeRender?: ReactElement;
+    /** The columns of links, in order. */
+    columns?: SiteFooterColumn[];
+    /** The market select, at the top of the last column. */
+    market?: SiteFooterMarket;
+    /** The social links, at the foot of the last column. */
+    social?: SiteFooterSocial;
+    /**
+     * Called by the button that opens the cookie settings, which shows only
+     * with it: `openCookieSettings` from
+     * `@leabankab/component-library/cookie-consent`, or the website's own.
+     */
+    onOpenCookieSettings?: () => void;
+    /**
+     * The line at the very end. A string becomes a `<p>`; anything else (the
+     * CMS's paragraphs) goes in a `<div>`.
+     */
+    copyright?: ReactNode;
+    /**
+     * The element of every title in the footer.
+     * @default <h2 />
+     */
+    titleRender?: ReactElement;
+};
+/**
+ * The website's footer, as at the end of every page of leabank.no: the
+ * white logo, the columns of links, the market select and the social links
+ * on a near-black band, then a line, the cookie settings and the copyright.
+ *
+ * ```tsx
+ * <SiteFooter
+ *   logo={<img src="/lea-bank-white.svg" alt="" />}
+ *   homeRender={<NextLink href="/" />}
+ *   columns={[
+ *     {
+ *       title: "Tjenester",
+ *       links: [{ label: "Lån", render: <NextLink href="/lan" /> }],
+ *     },
+ *   ]}
+ *   market={{ value: "no", onValueChange: (market) => location.assign(sites[market]) }}
+ *   social={{
+ *     links: [
+ *       {
+ *         label: "Facebook",
+ *         icon: <img src="/facebook.svg" alt="" />,
+ *         render: <a href="https://www.facebook.com/leabank" target="_blank" rel="noopener noreferrer" />,
+ *       },
+ *     ],
+ *   }}
+ *   onOpenCookieSettings={openCookieSettings}
+ *   copyright="Copyright © 2005–2026 Lea Bank AB NUF (publ)."
+ * />
+ * ```
+ *
+ * The columns share the width, as many 140px columns as fit beside the logo
+ * from 1024px (five at 1440px), under it below; two columns below 768px and
+ * one below 640px. The market select is Paloma's `Select` at `size="sm"`,
+ * each market with its flag, named by the title over it; picking a market
+ * calls `onValueChange` and goes nowhere by itself. `market.onValueChange`
+ * and `onOpenCookieSettings` are functions, so a server component renders
+ * the footer through a client component of its own.
+ */
+export declare function SiteFooter({ logo, homeRender, columns, market, social, onOpenCookieSettings, copyright, titleRender, className, ...rest }: SiteFooterProps): import("react").JSX.Element;

package/dist/website/site-header-link.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactElement } from 'react';
+import { SiteHeaderGroup, SiteHeaderItem } from './site-header';
+/**
+ * Internal to `SiteHeader`: a link to `href`, or the router link in
+ * `render`, which carries its own.
+ */
+export declare function SiteLink({ href, render, ...rest }: Omit<ComponentProps<"a">, "href"> & {
+    href?: string;
+    render?: ReactElement;
+}): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+/** Whether an item opens a menu: it has a group to show. */
+export declare const hasMenu: (item: SiteHeaderItem) => item is Extract<SiteHeaderItem, {
+    groups: SiteHeaderGroup[];
+}>;
+/** Whether an item has a page of its own to link to. */
+export declare const hasPage: (item: SiteHeaderItem) => boolean;

package/dist/website/site-header-menu.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { SiteHeaderItem } from './site-header';
+type SiteHeaderMenuProps = {
+    items: SiteHeaderItem[];
+    /** The link around the logo, shown in the menu's own bar too. */
+    home: ReactNode;
+    /** The account link, shown in the menu's own bar too. */
+    account: ReactNode;
+};
+/**
+ * Internal to `SiteHeader`: the menu below 1312px. The button in the bar
+ * opens a dialog that drops in from the top (Base UI's `Drawer`): focus
+ * moves into it and stays there, the page behind it does not scroll, and
+ * Escape, the close button, a swipe up or a press outside closes it. The
+ * dialog starts with a bar of its own, the bar of the header with a close
+ * button where the menu button was, so the visitor sees the same bar and
+ * always has a visible way out. Its links are not in the page while it is
+ * closed, and following one closes it.
+ */
+export declare function SiteHeaderMenu({ items, home, account }: SiteHeaderMenuProps): import("react").JSX.Element;
+export {};