@amsterdam/design-system-react 3.0.0 → 3.2.0

package/dist/Menu/Menu.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import { MenuLink } from './MenuLink';
 export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, inWideWindow, ...restProps }, ref) => {
     // In a medium or narrow window, the Menu is a child of the `nav` of Page Header.
     // In a wide window, we render a `nav` element and the related accessibility features.
     const Tag = inWideWindow ? 'nav' : 'div';
-    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? 'primary-navigation' : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
+    const accessibleLabelId = useId();
+    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? accessibleLabelId : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: accessibleLabelId, children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
 });
 MenuRoot.displayName = 'Menu';
 /**

package/dist/PageHeader/LogoLinkContent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { PageHeaderProps } from './PageHeader';
+type LogoLinkContentProps = {
+    brandNameFullOrShort?: PageHeaderProps['brandName'] | PageHeaderProps['brandNameShort'];
+    brandNameShort?: PageHeaderProps['brandNameShort'];
+    logoAccessibleName?: PageHeaderProps['logoAccessibleName'];
+    logoBrand: PageHeaderProps['logoBrand'];
+};
+export declare const LogoLinkContent: ({ brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand, }: LogoLinkContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/PageHeader/LogoLinkContent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { clsx } from 'clsx';
+import { Logo } from '../Logo';
+export const LogoLinkContent = ({ brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && brandNameFullOrShort && 'ams-page-header__logo-container'), children: _jsx(Logo, { "aria-label": logoAccessibleName, brand: logoBrand }) }), brandNameShort && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name-short", children: brandNameShort })), brandNameFullOrShort && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandNameFullOrShort }))] }));

package/dist/PageHeader/PageHeader.d.ts

@@ -3,11 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import type { IconProps } from '../Icon';
 import type { LogoBrand } from '../Logo';
 import type { LogoBrandConfig } from '../Logo/Logo';
 export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
+    /**
+     * A shorter form of the name of the application.
+     * Provide this only together with a `brandName`.
+     */
+    brandNameShort?: string;
     /** The accessible name of the logo. */
     logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
@@ -18,6 +24,8 @@ export type PageHeaderProps = {
     logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
+    /** An icon to display instead of the default icon. */
+    menuButtonIcon?: IconProps['svg'];
     /** The visible text for the menu button. */
     menuButtonText?: string;
     /** The text for screen readers when the button hides the menu. */
@@ -37,6 +45,11 @@ export type PageHeaderProps = {
 export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
+    /**
+     * A shorter form of the name of the application.
+     * Provide this only together with a `brandName`.
+     */
+    brandNameShort?: string;
     /** The accessible name of the logo. */
     logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
@@ -47,6 +60,8 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
+    /** An icon to display instead of the default icon. */
+    menuButtonIcon?: IconProps["svg"];
     /** The visible text for the menu button. */
     menuButtonText?: string;
     /** The text for screen readers when the button hides the menu. */
@@ -63,7 +78,7 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
     MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
-        icon?: import("../Icon").IconProps["svg"];
+        icon?: IconProps["svg"];
     } & AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeader.js

@@ -1,26 +1,30 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-import { forwardRef, useEffect, useState } from 'react';
-import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
+import { forwardRef, useEffect, useId, useState } from 'react';
+import useViewportHasMinWidth from '../common/useViewportHasMinWidth';
 import { Icon } from '../Icon';
-import { Logo } from '../Logo';
+import { LogoLinkContent } from './LogoLinkContent';
 import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
 import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
 import { PageHeaderMenuLink } from './PageHeaderMenuLink';
-const LogoLinkContent = ({ brandName, logoAccessibleName, logoBrand, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { "aria-label": logoAccessibleName, brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
-const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle = `Ga naar de homepage${brandName ? ` van ${brandName}` : ''}`, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+const PageHeaderRoot = forwardRef(({ brandName, brandNameShort, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle, menuButtonIcon, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
-    const Link = logoLinkComponent;
+    const viewportHasMinWidth = useViewportHasMinWidth('wide');
+    const accessibleLabelId = useId();
     const hasMegaMenu = Boolean(children);
-    const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
+    const hasMegaMenuOnWideWindow = hasMegaMenu && viewportHasMinWidth;
+    const LogoLink = logoLinkComponent;
+    // Use short brand name if no full brand name is (invalidly) provided
+    const brandNameFullOrShort = brandName || brandNameShort;
+    const logoLinkContentProps = { brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand };
     useEffect(() => {
         // Close the menu when the menu button disappears
-        if (noMenuButtonOnWideWindow && isWideWindow) {
+        if (noMenuButtonOnWideWindow && hasMegaMenuOnWideWindow) {
             setOpen(false);
         }
-    }, [isWideWindow]);
-    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(Link, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { brandName: brandName, logoAccessibleName: logoAccessibleName, logoBrand: logoBrand }), _jsx("span", { className: "ams-visually-hidden", children: ` ${logoLinkTitle}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
-                                : true, children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { className: "ams-visually-hidden", children: open ? menuButtonTextForHide : menuButtonTextForShow }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
+    }, [hasMegaMenuOnWideWindow, noMenuButtonOnWideWindow]);
+    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(LogoLink, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { ...logoLinkContentProps }), _jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle ?? `Ga naar de homepage${brandNameFullOrShort ? ' van ' + brandNameFullOrShort : ''}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": accessibleLabelId, className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: accessibleLabelId, children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { ...logoLinkContentProps, logoAccessibleName: undefined }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
+                                : true, children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { className: "ams-visually-hidden", children: open ? menuButtonTextForHide : menuButtonTextForShow }), _jsx(Icon, { svg: menuButtonIcon ?? (_jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') })) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
 });
 PageHeaderRoot.displayName = 'PageHeader';
 /**

package/dist/ProgressList/AccessibleStatusText.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ProgressListStepProps } from './ProgressListStep';
+type AccessibleStatusTextProps = {
+    status?: ProgressListStepProps['status'];
+};
+export declare const AccessibleStatusText: ({ status }: AccessibleStatusTextProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/ProgressList/AccessibleStatusText.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { useContext } from 'react';
+import { ProgressListContext } from './ProgressListContext';
+export const AccessibleStatusText = ({ status }) => {
+    const { completedAccessibleText, currentAccessibleText } = useContext(ProgressListContext);
+    if (!status)
+        return null;
+    return (_jsxs("span", { className: "ams-visually-hidden", children: [status === 'completed' && completedAccessibleText && `${completedAccessibleText}: `, status === 'current' && currentAccessibleText && `${currentAccessibleText}: `] }));
+};

package/dist/ProgressList/ProgressList.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const progressListHeadingLevels: (2 | 3 | 4)[];
+type ProgressListHeadingLevel = (typeof progressListHeadingLevels)[number];
+export type ProgressListProps = {
+    /**
+     * An accessible phrase that screen readers announce before a completed step heading.
+     * @default Klaar
+     */
+    completedAccessibleText?: string;
+    /**
+     * An accessible phrase that screen readers announce before a current step heading.
+     * @default Bezig
+     */
+    currentAccessibleText?: string;
+    /**
+     * The hierarchical level of this Progress List’s Headings within the document.
+     * There is no default value; determine the correct level for this instance.
+     */
+    headingLevel: ProgressListHeadingLevel;
+} & PropsWithChildren<HTMLAttributes<HTMLOListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-progress-list--docs Progress List docs at Amsterdam Design System}
+ */
+export declare const ProgressList: import("react").ForwardRefExoticComponent<{
+    /**
+     * An accessible phrase that screen readers announce before a completed step heading.
+     * @default Klaar
+     */
+    completedAccessibleText?: string;
+    /**
+     * An accessible phrase that screen readers announce before a current step heading.
+     * @default Bezig
+     */
+    currentAccessibleText?: string;
+    /**
+     * The hierarchical level of this Progress List’s Headings within the document.
+     * There is no default value; determine the correct level for this instance.
+     */
+    headingLevel: ProgressListHeadingLevel;
+} & HTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>> & {
+    Step: import("react").ForwardRefExoticComponent<{
+        hasSubsteps?: boolean;
+        heading: string;
+        status?: "current" | "completed";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+    Substep: import("react").ForwardRefExoticComponent<{
+        status?: import("./ProgressListStep").ProgressListStepProps["status"];
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+    Substeps: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLOListElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLOListElement>>;
+};
+export {};

package/dist/ProgressList/ProgressList.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { headingLevels } from '../Heading/Heading';
+import { ProgressListContext } from './ProgressListContext';
+import { ProgressListStep } from './ProgressListStep';
+import { ProgressListSubstep } from './ProgressListSubstep';
+import { ProgressListSubsteps } from './ProgressListSubsteps';
+export const progressListHeadingLevels = headingLevels.filter((level) => level !== 1);
+const ProgressListRoot = forwardRef(({ children, className, completedAccessibleText, currentAccessibleText, headingLevel, ...restProps }, ref) => (_jsx(ProgressListContext.Provider, { value: {
+        completedAccessibleText: completedAccessibleText ?? 'Klaar',
+        currentAccessibleText: currentAccessibleText ?? 'Bezig',
+        headingLevel,
+    }, children: _jsx("ol", { ...restProps, className: clsx('ams-progress-list', `ams-progress-list--heading-${headingLevel}`, className), ref: ref, children: children }) })));
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-progress-list--docs Progress List docs at Amsterdam Design System}
+ */
+export const ProgressList = Object.assign(ProgressListRoot, {
+    Step: ProgressListStep,
+    Substep: ProgressListSubstep,
+    Substeps: ProgressListSubsteps,
+});
+ProgressListRoot.displayName = 'ProgressList';

package/dist/ProgressList/ProgressListContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ProgressListProps } from './ProgressList';
+type ProgressListContextValue = {
+    completedAccessibleText?: ProgressListProps['completedAccessibleText'];
+    currentAccessibleText?: ProgressListProps['currentAccessibleText'];
+    headingLevel: ProgressListProps['headingLevel'];
+};
+export declare const ProgressListContext: import("react").Context<ProgressListContextValue>;
+export {};

package/dist/ProgressList/ProgressListContext.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { createContext } from 'react';
+const defaultValues = {
+    // Default value for type safety.
+    // The actual value is always provided via ProgressList’s required headingLevel prop.
+    headingLevel: 2,
+};
+export const ProgressListContext = createContext(defaultValues);

package/dist/ProgressList/ProgressListStep.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ProgressListStepProps = {
+    /** Whether the step contains a list of substeps. This is needed to draw the connecting lines correctly. */
+    hasSubsteps?: boolean;
+    /** The heading text for this step. */
+    heading: string;
+    /** The current progress state of the step. */
+    status?: 'current' | 'completed';
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const ProgressListStep: import("react").ForwardRefExoticComponent<{
+    /** Whether the step contains a list of substeps. This is needed to draw the connecting lines correctly. */
+    hasSubsteps?: boolean;
+    /** The heading text for this step. */
+    heading: string;
+    /** The current progress state of the step. */
+    status?: "current" | "completed";
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLLIElement>>;

package/dist/ProgressList/ProgressListStep.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowForwardIcon } from '@amsterdam/design-system-react-icons';
+import { clsx } from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { AccessibleStatusText } from './AccessibleStatusText';
+import { ProgressListContext } from './ProgressListContext';
+export const ProgressListStep = forwardRef(({ children, className, hasSubsteps, heading, status, ...restProps }, ref) => {
+    const { headingLevel } = useContext(ProgressListContext);
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx(className, 'ams-progress-list__step', hasSubsteps && 'ams-progress-list__step--has-substeps', status && `ams-progress-list__step--${status}`), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list__indicator", children: [_jsx("div", { className: "ams-progress-list__marker", children: _jsx("span", { className: "ams-progress-list__marker-shape", children: status === 'current' && _jsx(Icon, { color: "inverse", svg: ArrowForwardIcon }) }) }), _jsx("span", { className: "ams-progress-list__connector" })] }), _jsxs("div", { className: "ams-progress-list__content", children: [_jsxs(Heading, { className: "ams-progress-list__heading", level: headingLevel, children: [_jsx(AccessibleStatusText, { status: status }), heading] }), children] })] }));
+});
+ProgressListStep.displayName = 'ProgressList.Step';

package/dist/ProgressList/ProgressListSubstep.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { ProgressListStepProps } from './ProgressListStep';
+export type ProgressListSubstepProps = {
+    /** The current progress state of the substep. */
+    status?: ProgressListStepProps['status'];
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const ProgressListSubstep: import("react").ForwardRefExoticComponent<{
+    /** The current progress state of the substep. */
+    status?: ProgressListStepProps["status"];
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLLIElement>>;

package/dist/ProgressList/ProgressListSubstep.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { AccessibleStatusText } from './AccessibleStatusText';
+export const ProgressListSubstep = forwardRef(({ children, className, status, ...restProps }, ref) => {
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx('ams-progress-list-substeps__step', status && `ams-progress-list-substeps__step--${status}`, className), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list-substeps__indicator", children: [_jsx("div", { className: "ams-progress-list-substeps__marker", children: _jsx("span", { className: "ams-progress-list-substeps__marker-shape" }) }), _jsx("span", { className: "ams-progress-list-substeps__connector" })] }), _jsxs("div", { className: "ams-progress-list-substeps__content", children: [_jsx(AccessibleStatusText, { status: status }), children] })] }));
+});
+ProgressListSubstep.displayName = 'ProgressList.Substep';

package/dist/ProgressList/ProgressListSubsteps.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ProgressListSubstepsProps = PropsWithChildren<HTMLAttributes<HTMLOListElement>>;
+export declare const ProgressListSubsteps: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>>;

package/dist/ProgressList/ProgressListSubsteps.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+export const ProgressListSubsteps = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ol", { ...restProps, className: clsx('ams-progress-list-substeps', className), ref: ref, children: children })));
+ProgressListSubsteps.displayName = 'ProgressList.Substeps';

package/dist/ProgressList/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { ProgressList } from './ProgressList';
+export type { ProgressListProps } from './ProgressList';
+export type { ProgressListStepProps } from './ProgressListStep';
+export type { ProgressListSubstepProps } from './ProgressListSubstep';
+export type { ProgressListSubstepsProps } from './ProgressListSubsteps';

package/dist/{PageHeader/matchMedia.mock.d.ts → ProgressList/index.js}

@@ -2,3 +2,4 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+export { ProgressList } from './ProgressList';

package/dist/Radio/Radio.d.ts

@@ -2,13 +2,14 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import type { InputHTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
 export type RadioProps = {
     /**
      * An icon to display instead of the default icon.
      * @default RadioIcon
      */
-    icon?: Function | ReactNode;
+    icon?: IconProps['svg'];
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
@@ -20,9 +21,9 @@ export declare const Radio: import("react").ForwardRefExoticComponent<{
      * An icon to display instead of the default icon.
      * @default RadioIcon
      */
-    icon?: Function | ReactNode;
+    icon?: IconProps["svg"];
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/SearchField/SearchFieldInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef, useId } from 'react';
-export const SearchFieldInput = forwardRef(({ className, dir, invalid, label = 'Zoeken', ...restProps }, ref) => {
-    const id = useId();
-    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "ams-visually-hidden", htmlFor: id, children: label }), _jsx("input", { ...restProps, "aria-invalid": invalid || undefined, autoComplete: "off", className: clsx('ams-search-field__input', className), dir: dir ?? 'auto', enterKeyHint: "search", id: id, ref: ref, spellCheck: "false", type: "search" })] }));
+export const SearchFieldInput = forwardRef(({ className, dir, id, invalid, label = 'Zoeken', ...restProps }, ref) => {
+    const inputId = id ?? useId();
+    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "ams-visually-hidden", htmlFor: inputId, children: label }), _jsx("input", { ...restProps, "aria-invalid": invalid || undefined, autoComplete: "off", className: clsx('ams-search-field__input', className), dir: dir ?? 'auto', enterKeyHint: "search", id: inputId, ref: ref, spellCheck: "false", type: "search" })] }));
 });
 SearchFieldInput.displayName = 'SearchField.Input';

package/dist/common/useViewportHasMinWidth.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const BREAKPOINTS: {
+    readonly medium: "37.5rem";
+    readonly wide: "72.5rem";
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Hook to determine if the viewport width is at or beyond a given breakpoint.
+ *
+ * **Prefer CSS media queries over this hook.** Use this only when viewport-dependent
+ * logic must run in JavaScript, e.g. for interactions or dynamic behaviour that cannot
+ * be expressed in CSS. CSS media queries are more performant, better supported across
+ * stacks, and easier to maintain.
+ *
+ * @param breakpoint - The breakpoint to match against: `'medium'` or `'wide'`.
+ * @returns `true` if the viewport width meets or exceeds the breakpoint, `false` otherwise.
+ */
+declare const useViewportHasMinWidth: (breakpoint: Breakpoint) => boolean;
+export default useViewportHasMinWidth;

package/dist/common/{useIsAfterBreakpoint.js → useViewportHasMinWidth.js}

@@ -8,7 +8,18 @@ export const BREAKPOINTS = {
     medium: '37.5rem',
     wide: '72.5rem',
 };
-const useIsAfterBreakpoint = (breakpoint) => {
+/**
+ * Hook to determine if the viewport width is at or beyond a given breakpoint.
+ *
+ * **Prefer CSS media queries over this hook.** Use this only when viewport-dependent
+ * logic must run in JavaScript, e.g. for interactions or dynamic behaviour that cannot
+ * be expressed in CSS. CSS media queries are more performant, better supported across
+ * stacks, and easier to maintain.
+ *
+ * @param breakpoint - The breakpoint to match against: `'medium'` or `'wide'`.
+ * @returns `true` if the viewport width meets or exceeds the breakpoint, `false` otherwise.
+ */
+const useViewportHasMinWidth = (breakpoint) => {
     const [matches, setMatches] = useState(false);
     useEffect(() => {
         // Check for window object to avoid SSR issues
@@ -24,4 +35,4 @@ const useIsAfterBreakpoint = (breakpoint) => {
     }, [breakpoint]);
     return matches;
 };
-export default useIsAfterBreakpoint;
+export default useViewportHasMinWidth;