@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/Button/Button.test.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from '@amsterdam/design-system-react-icons';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { createRef } from 'react';
+import { Button } from './Button';
+describe('Button', () => {
+    it('renders an element with role button', () => {
+        render(_jsx(Button, { children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Button, { children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toHaveClass('ams-button');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Button, { className: "extra", children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toHaveClass('ams-button extra');
+    });
+    it('renders a default button with variant primary', () => {
+        render(_jsx(Button, { children: "primary" }));
+        const button = screen.getByRole('button', {
+            name: 'primary',
+        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('type', 'button');
+        expect(button).toHaveClass('ams-button--primary');
+    });
+    it('renders a button with a specified variant', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "primary" }), _jsx(Button, { variant: "secondary", children: "secondary" }), _jsx(Button, { variant: "tertiary", children: "tertiary" })] }));
+        const buttonPrimary = screen.getByRole('button', {
+            name: 'primary',
+        });
+        const buttonSecondary = screen.getByRole('button', {
+            name: 'secondary',
+        });
+        const buttonTertiary = screen.getByRole('button', {
+            name: 'tertiary',
+        });
+        expect(buttonPrimary).toBeInTheDocument();
+        expect(buttonPrimary).toHaveClass('ams-button--primary');
+        expect(buttonSecondary).toBeInTheDocument();
+        expect(buttonSecondary).toHaveClass('ams-button--secondary');
+        expect(buttonTertiary).toBeInTheDocument();
+        expect(buttonTertiary).toHaveClass('ams-button--tertiary');
+    });
+    it('renders a disabled button with a specified variant', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { disabled: true, variant: "primary", children: "primary" }), _jsx(Button, { disabled: true, variant: "secondary", children: "secondary" }), _jsx(Button, { disabled: true, variant: "tertiary", children: "tertiary" })] }));
+        const buttonPrimary = screen.getByRole('button', {
+            name: 'primary',
+        });
+        const buttonSecondary = screen.getByRole('button', {
+            name: 'secondary',
+        });
+        const buttonTertiary = screen.getByRole('button', {
+            name: 'tertiary',
+        });
+        expect(buttonPrimary).toBeInTheDocument();
+        expect(buttonPrimary).toBeDisabled();
+        expect(buttonSecondary).toBeInTheDocument();
+        expect(buttonSecondary).toBeDisabled();
+        expect(buttonTertiary).toBeInTheDocument();
+        expect(buttonTertiary).toBeDisabled();
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Button, { ref: ref, children: "Click me!" }));
+        const button = container.querySelector(':only-child');
+        expect(ref.current).toBe(button);
+    });
+    it('renders a button with an icon at the end', () => {
+        render(_jsx(Button, { icon: CloseIcon, children: _jsx("span", { children: "Sluiten" }) }));
+        const button = screen.getByRole('button', {
+            name: 'Sluiten',
+        });
+        const icon = button.querySelector('.ams-icon:last-child');
+        expect(button).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
+    });
+    it('renders a button with an icon before the label', () => {
+        render(_jsx(Button, { icon: CloseIcon, iconBefore: true, children: _jsx("span", { children: "Sluiten" }) }));
+        const button = screen.getByRole('button', {
+            name: 'Sluiten',
+        });
+        const icon = button.querySelector('.ams-icon:first-child');
+        expect(button).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
+    });
+    it('renders a button with an icon only', () => {
+        render(_jsx(Button, { icon: CloseIcon, iconOnly: true, variant: "tertiary", children: "Sluiten" }));
+        const button = screen.getByRole('button', {
+            name: 'Sluiten',
+        });
+        const icon = button.querySelector('.ams-icon');
+        const label = button.querySelector('.ams-visually-hidden');
+        expect(button).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
+        expect(label).toBeInTheDocument();
+    });
+});

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/Button/index.js

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/Card/Card.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Heading: import("react").ForwardRefExoticComponent<{
+        color?: "inverse";
+        level: 1 | 2 | 3 | 4;
+        size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+    } & HTMLAttributes<HTMLHeadingElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>>;
+    HeadingGroup: import("react").ForwardRefExoticComponent<{
+        tagline: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+    Image: import("react").ForwardRefExoticComponent<{
+        alt: string;
+    } & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;
+    Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/Card/Card.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { CardHeading } from './CardHeading';
+import { CardHeadingGroup } from './CardHeadingGroup';
+import { CardImage } from './CardImage';
+import { CardLink } from './CardLink';
+const CardRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("article", { ...restProps, className: clsx('ams-card', className), ref: ref, children: children })));
+CardRoot.displayName = 'Card';
+export const Card = Object.assign(CardRoot, {
+    Heading: CardHeading,
+    HeadingGroup: CardHeadingGroup,
+    Image: CardImage,
+    Link: CardLink,
+});

package/dist/Card/Card.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Card/Card.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Card } from './Card';
+import '@testing-library/jest-dom';
+describe('Card', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Card, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Card, {}));
+        const component = screen.getByRole('article');
+        expect(component).toHaveClass('ams-card');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Card, { className: "extra" }));
+        const component = screen.getByRole('article');
+        expect(component).toHaveClass('ams-card extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Card, { ref: ref }));
+        const component = screen.getByRole('article');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Card/CardHeading.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const CardHeading: import("react").ForwardRefExoticComponent<{
+    color?: "inverse";
+    level: 1 | 2 | 3 | 4;
+    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & import("react").HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Card/CardHeading.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Heading } from '../Heading';
+export const CardHeading = forwardRef(({ children, className, size = 'level-4', ...restProps }, ref) => (_jsx(Heading, { ...restProps, className: clsx('ams-card__heading', className), ref: ref, size: size, children: children })));
+CardHeading.displayName = 'Card.Heading';

package/dist/Card/CardHeading.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Card/CardHeading.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { CardHeading } from './CardHeading';
+import '@testing-library/jest-dom';
+describe('Card Heading', () => {
+    it('renders', () => {
+        render(_jsx(CardHeading, { level: 1 }));
+        const component = screen.getByRole('heading');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(CardHeading, { level: 2 }));
+        const component = screen.getByRole('heading');
+        expect(component).toHaveClass('ams-card__heading');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(CardHeading, { className: "extra", level: 3 }));
+        const component = screen.getByRole('heading');
+        expect(component).toHaveClass('ams-card__heading extra');
+    });
+    it('renders the correct size level class', () => {
+        render(_jsx(CardHeading, { level: 4, size: "level-1", children: "Size level 1" }));
+        const component = screen.getByRole('heading');
+        expect(component).toHaveClass('ams-heading--1');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(CardHeading, { level: 4, ref: ref }));
+        const component = screen.getByRole('heading');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Card/CardHeadingGroup.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type CardHeadingGroupProps = {
+    /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
+    tagline: string;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const CardHeadingGroup: import("react").ForwardRefExoticComponent<{
+    /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
+    tagline: string;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/Card/CardHeadingGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Paragraph } from '../Paragraph';
+export const CardHeadingGroup = forwardRef(({ children, className, tagline, ...restProps }, ref) => (_jsxs("hgroup", { ...restProps, className: clsx('ams-card__heading-group', className), ref: ref, children: [children, _jsx(Paragraph, { size: "small", children: tagline })] })));
+CardHeadingGroup.displayName = 'Card.HeadingGroup';

package/dist/Card/CardHeadingGroup.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Card/CardHeadingGroup.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { CardHeadingGroup } from './CardHeadingGroup';
+import '@testing-library/jest-dom';
+describe('Card heading group', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(CardHeadingGroup, { tagline: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(CardHeadingGroup, { tagline: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-card__heading-group');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(CardHeadingGroup, { className: "extra", tagline: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-card__heading-group extra');
+    });
+    it('renders a tagline', () => {
+        render(_jsx(CardHeadingGroup, { tagline: "tagline" }));
+        const tagline = screen.getByText('tagline');
+        expect(tagline).toBeInTheDocument();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(CardHeadingGroup, { ref: ref, tagline: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Card/CardImage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const CardImage: import("react").ForwardRefExoticComponent<{
+    alt: string;
+} & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Card/CardImage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Image } from '../Image';
+export const CardImage = forwardRef(({ className, ...restProps }, ref) => (_jsx(Image, { ...restProps, className: clsx('ams-card__image', className), ref: ref })));
+CardImage.displayName = 'Card.Image';

package/dist/Card/CardImage.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Card/CardImage.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { CardImage } from './CardImage';
+import '@testing-library/jest-dom';
+describe('Card Image', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(CardImage, { alt: "" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(CardImage, { alt: "" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-card__image');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(CardImage, { alt: "", className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-card__image extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(CardImage, { alt: "", ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Card/CardLink.d.ts

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

package/dist/Card/CardLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const CardLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("a", { ...restProps, className: clsx('ams-card__link', className), ref: ref, children: children })));
+CardLink.displayName = 'Card.Link';

package/dist/Card/CardLink.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Card/CardLink.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { CardLink } from './CardLink';
+import '@testing-library/jest-dom';
+describe('Card link', () => {
+    it('renders', () => {
+        render(_jsx(CardLink, { href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(CardLink, { href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-card__link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(CardLink, { className: "extra", href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-card__link extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(CardLink, { href: "/", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Card/index.d.ts

@@ -0,0 +1,4 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';
+export type { CardHeadingGroupProps } from './CardHeadingGroup';
+export type { CardLinkProps } from './CardLink';

package/dist/Card/index.js

@@ -0,0 +1 @@
+export { Card } from './Card';

package/dist/CharacterCount/CharacterCount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+export type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
+    /** The current length of the field’s value. */
+    length: number;
+    /** The maximum length of the field’s value. */
+    maxLength: number;
+};
+export declare const CharacterCount: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The current length of the field’s value. */
+    length: number;
+    /** The maximum length of the field’s value. */
+    maxLength: number;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/CharacterCount/CharacterCount.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const CharacterCount = forwardRef(({ className, length, maxLength, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className), ref: ref, role: "status", children: `${length} van ${maxLength} tekens` })));
+CharacterCount.displayName = 'CharacterCount';

package/dist/CharacterCount/CharacterCount.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/CharacterCount/CharacterCount.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { CharacterCount } from './CharacterCount';
+import '@testing-library/jest-dom';
+describe('Character count', () => {
+    it('renders', () => {
+        render(_jsx(CharacterCount, { length: 10, maxLength: 100 }));
+        const component = screen.getByRole('status');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(CharacterCount, { length: 10, maxLength: 100 }));
+        const component = screen.getByRole('status');
+        expect(component).toHaveClass('ams-character-count');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(CharacterCount, { className: "extra", length: 10, maxLength: 100 }));
+        const component = screen.getByRole('status');
+        expect(component).toHaveClass('ams-character-count extra');
+    });
+    it('renders an error class when length is larger than maxLength', () => {
+        render(_jsx(CharacterCount, { length: 101, maxLength: 100 }));
+        const component = screen.getByRole('status');
+        expect(component).toHaveClass('ams-character-count--error');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(CharacterCount, { length: 10, maxLength: 100, ref: ref }));
+        const component = screen.getByRole('status');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/CharacterCount/index.d.ts

@@ -0,0 +1,2 @@
+export { CharacterCount } from './CharacterCount';
+export type { CharacterCountProps } from './CharacterCount';

package/dist/CharacterCount/index.js

@@ -0,0 +1 @@
+export { CharacterCount } from './CharacterCount';

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes, PropsWithChildren } from 'react';
+export type CheckboxProps = {
+    /** Allows being neither checked nor unchecked. */
+    indeterminate?: boolean;
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    /** Allows being neither checked nor unchecked. */
+    indeterminate?: boolean;
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react';
+export const Checkbox = forwardRef(({ children, className, indeterminate, invalid, ...restProps }, ref) => {
+    const id = useId();
+    const innerRef = useRef(null);
+    // use a passed ref if it's there, otherwise use innerRef
+    useImperativeHandle(ref, () => innerRef.current);
+    // set input to indeterminate
+    useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [innerRef, indeterminate]);
+    return (
+    // This div is here because NVDA doesn't match the input to the label
+    // without a containing element
+    _jsxs("div", { className: clsx('ams-checkbox', className), children: [_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: "ams-checkbox__input", id: id, ref: innerRef, type: "checkbox" }), _jsxs("label", { className: "ams-checkbox__label", htmlFor: id, children: [_jsx("span", { className: "ams-checkbox__checkmark" }), children] })] }));
+});
+Checkbox.displayName = 'Checkbox';

package/dist/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';