@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/Button/Button.test.js

@@ -0,0 +1,103 @@
+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 an additional 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,18 @@
+/**
+ * @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>> & {
+    HeadingGroup: import("react").ForwardRefExoticComponent<{
+        tagline: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+    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,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { CardHeadingGroup } from './CardHeadingGroup';
+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, { HeadingGroup: CardHeadingGroup, 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 additional 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/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 additional 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/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 additional 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 additional 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';

package/dist/Checkbox/Checkbox.test.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Checkbox } from './Checkbox';
+import '@testing-library/jest-dom';
+describe('Checkbox', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Checkbox, {}));
+        const wrapper = container.querySelector(':only-child');
+        const input = screen.getByRole('checkbox');
+        const label = container.querySelector('label');
+        expect(wrapper).toBeInTheDocument();
+        expect(wrapper).toBeVisible();
+        expect(input).toBeInTheDocument();
+        expect(input).toBeVisible();
+        expect(label).toBeInTheDocument();
+        expect(label).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Checkbox, {}));
+        const wrapper = container.querySelector(':only-child');
+        const input = screen.getByRole('checkbox');
+        const label = container.querySelector('label');
+        expect(wrapper).toHaveClass('ams-checkbox');
+        expect(input).toHaveClass('ams-checkbox__input');
+        expect(label).toHaveClass('ams-checkbox__label');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Checkbox, { className: "extra" }));
+        const wrapper = container.querySelector(':only-child');
+        expect(wrapper).toHaveClass('extra');
+        expect(wrapper).toHaveClass('ams-checkbox');
+    });
+    describe('Checked state', () => {
+        it('is not checked by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBeChecked();
+        });
+        it('can have a checked state', () => {
+            const handleChange = () => { };
+            render(_jsx(Checkbox, { checked: true, onChange: handleChange }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBeChecked();
+        });
+    });
+    describe('Indeterminate state', () => {
+        it('is not indeterminate by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBePartiallyChecked();
+        });
+        it('can have an indeterminate state', () => {
+            render(_jsx(Checkbox, { indeterminate: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBePartiallyChecked();
+        });
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            render(_jsx(Checkbox, { invalid: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toHaveAttribute('aria-invalid');
+            expect(input).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            render(_jsx(Checkbox, { invalid: false }));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    describe('Disabled state', () => {
+        it('is not disabled by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBeDisabled();
+        });
+        it('can have a disabled state', () => {
+            render(_jsx(Checkbox, { disabled: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBeDisabled();
+        });
+    });
+    describe('Disabled invalid state', () => {
+        it('can have a disabled invalid state', () => {
+            render(_jsx(Checkbox, { disabled: true, invalid: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBeDisabled();
+            expect(input).toBeInvalid();
+        });
+    });
+    it('can trigger a change event', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Checkbox, { onChange: handleChange }));
+        const input = screen.getByRole('checkbox');
+        input?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('does not trigger a change event when disabled', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Checkbox, { disabled: true, onChange: handleChange }));
+        const input = screen.getByRole('checkbox');
+        input?.click();
+        expect(handleChange).not.toHaveBeenCalled();
+    });
+    it('can trigger a change event by clicking on label', () => {
+        const handleChange = jest.fn();
+        const { container } = render(_jsx(Checkbox, { onChange: handleChange }));
+        const label = container.querySelector('label');
+        label?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Checkbox, { ref: ref }));
+        const input = screen.getByRole('checkbox');
+        expect(ref.current).toBe(input);
+    });
+});

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox/index.js

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

package/dist/Column/Column.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { CrossAlignForColumn, MainAlign } from '../common/types';
+export declare const columnGaps: readonly ["none", "x-small", "small", "large", "x-large"];
+type ColumnGap = (typeof columnGaps)[number];
+type ColumnTag = 'article' | 'div' | 'section';
+export type ColumnProps = {
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: ColumnGap;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Column: import("react").ForwardRefExoticComponent<{
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: ColumnGap;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<unknown>>;
+export {};

package/dist/Column/Column.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';
+export const columnGaps = ['none', 'x-small', 'small', 'large', 'x-large'];
+export const Column = forwardRef(({ align, alignHorizontal, as: Tag = 'div', children, className, gap, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-column', align && `ams-column--align-${align}`, alignHorizontal && `ams-column--align-horizontal-${alignHorizontal}`, gap && `ams-column--gap-${gap}`, className), ref: ref, children: children })));
+Column.displayName = 'Column';

package/dist/Column/Column.test.d.ts

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