@amsterdam/design-system-react 0.14.0 → 0.15.0

package/dist/SearchField/SearchFieldInput.js

@@ -0,0 +1,12 @@
+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 { 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" })] }));
+});
+SearchFieldInput.displayName = 'SearchField.Input';

package/dist/SearchField/SearchFieldInput.test.d.ts

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

package/dist/SearchField/SearchFieldInput.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, useState } from 'react';
+import { SearchFieldInput } from './SearchFieldInput';
+import '@testing-library/jest-dom';
+describe('Search field input', () => {
+    it('renders', () => {
+        render(_jsx(SearchFieldInput, {}));
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(SearchFieldInput, {}));
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        expect(component).toHaveClass('ams-search-field__input');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(SearchFieldInput, { className: "extra" }));
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        expect(component).toHaveClass('extra');
+        expect(component).toHaveClass('ams-search-field__input');
+    });
+    it('supports a custom label', () => {
+        render(_jsx(SearchFieldInput, { label: "Test label" }));
+        const component = screen.getByRole('searchbox', { name: 'Test label' });
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('should be working in a controlled state', async () => {
+        function ControlledComponent() {
+            const [value, setValue] = useState('Hello');
+            return _jsx(SearchFieldInput, { onChange: (e) => setValue(e.target.value), value: value });
+        }
+        render(_jsx(ControlledComponent, {}));
+        const componentText = screen.getByDisplayValue('Hello');
+        expect(componentText).toBeInTheDocument();
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        const newComponentText = screen.getByDisplayValue('Hello, World!');
+        expect(newComponentText).toBeInTheDocument();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(SearchFieldInput, { ref: ref }));
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        expect(ref.current).toBe(component);
+    });
+    it('renders bidirectional by default using `dir="auto"`', () => {
+        render(_jsx(SearchFieldInput, {}));
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        expect(component).toHaveAttribute('dir', 'auto');
+    });
+    it('renders left-to-right by using `dir="ltr"`', () => {
+        render(_jsx(SearchFieldInput, { dir: "ltr" }));
+        const component = screen.getByRole('searchbox', { name: 'Zoeken' });
+        expect(component).toHaveAttribute('dir', 'ltr');
+    });
+});

package/dist/SearchField/index.d.ts

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

package/dist/SearchField/index.js

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

package/dist/Select/Select.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { PropsWithChildren, SelectHTMLAttributes } from 'react';
+export type SelectProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
+export declare const Select: import("react").ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLSelectElement>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./SelectOptionGroup").SelectOptionGroupProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLOptGroupElement>>;
+    Option: import("react").ForwardRefExoticComponent<import("./SelectOption").SelectOptionProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLOptionElement>>;
+};

package/dist/Select/Select.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 { SelectOption } from './SelectOption';
+import { SelectOptionGroup } from './SelectOptionGroup';
+const SelectRoot = forwardRef(({ children, className, invalid, ...restProps }, ref) => (_jsx("select", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-select', className), ref: ref, children: children })));
+SelectRoot.displayName = 'Select';
+export const Select = Object.assign(SelectRoot, { Group: SelectOptionGroup, Option: SelectOption });

package/dist/Select/Select.test.d.ts

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

package/dist/Select/Select.test.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Select } from './Select';
+import '@testing-library/jest-dom';
+describe('Select', () => {
+    it('renders', () => {
+        render(_jsx(Select, {}));
+        const component = screen.getByRole('combobox');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Select, {}));
+        const component = screen.getByRole('combobox');
+        expect(component).toHaveClass('ams-select');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Select, { className: "extra" }));
+        const component = screen.getByRole('combobox');
+        expect(component).toHaveClass('ams-select extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Select, { ref: ref }));
+        const component = screen.getByRole('combobox');
+        expect(ref.current).toBe(component);
+    });
+    it('renders options', () => {
+        render(_jsxs(Select, { children: [_jsx(Select.Option, { value: "a", children: "Option A" }), _jsx(Select.Option, { value: "b", children: "Option B" })] }));
+        const select = screen.getByRole('combobox');
+        const option = screen.getByRole('option', {
+            name: 'Option B',
+        });
+        expect(select).toContain(option);
+    });
+    it('can be disabled', () => {
+        render(_jsx(Select, { disabled: true }));
+        const component = screen.getByRole('combobox');
+        expect(component).toBeDisabled();
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            render(_jsx(Select, {}));
+            const component = screen.getByRole('combobox');
+            expect(component).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            render(_jsx(Select, { invalid: true }));
+            const component = screen.getByRole('combobox');
+            expect(component).toHaveAttribute('aria-invalid');
+            expect(component).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            render(_jsx(Select, { invalid: false }));
+            const component = screen.getByRole('combobox');
+            expect(component).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    it('is not required by default', () => {
+        render(_jsx(Select, {}));
+        const component = screen.getByRole('combobox');
+        expect(component).not.toBeRequired();
+    });
+    it('omits the required attribute when not required', () => {
+        render(_jsx(Select, { required: false }));
+        const component = screen.getByRole('combobox');
+        expect(component).not.toHaveAttribute('required');
+    });
+});

package/dist/Select/SelectOption.d.ts

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

package/dist/Select/SelectOption.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 SelectOption = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("option", { ...restProps, className: clsx('ams-select__option', className), ref: ref, children: children })));
+SelectOption.displayName = 'Select.Option';

package/dist/Select/SelectOption.test.d.ts

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

package/dist/Select/SelectOption.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Select } from './Select';
+import '@testing-library/jest-dom';
+describe('Select option', () => {
+    it('renders', () => {
+        render(_jsx(Select.Option, {}));
+        const component = screen.getByRole('option');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders an option role element with a text label', () => {
+        render(_jsx(Select.Option, { children: "Option" }));
+        const option = screen.getByRole('option', {
+            name: 'Option',
+        });
+        expect(option).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Select.Option, {}));
+        const component = screen.getByRole('option');
+        expect(component).toHaveClass('ams-select__option');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Select.Option, { className: "extra" }));
+        const component = screen.getByRole('option');
+        expect(component).toHaveClass('ams-select__option extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Select.Option, { ref: ref }));
+        const component = screen.getByRole('option');
+        expect(ref.current).toBe(component);
+    });
+    it('can be disabled', () => {
+        render(_jsx(Select.Option, { disabled: true }));
+        const component = screen.getByRole('option');
+        expect(component).toBeDisabled();
+    });
+});

package/dist/Select/SelectOptionGroup.d.ts

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

package/dist/Select/SelectOptionGroup.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 SelectOptionGroup = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("optgroup", { ...restProps, className: clsx('ams-select__group', className), ref: ref, children: children })));
+SelectOptionGroup.displayName = 'Select.Group';

package/dist/Select/SelectOptionGroup.test.d.ts

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

package/dist/Select/SelectOptionGroup.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Select } from './Select';
+import '@testing-library/jest-dom';
+describe('Select option group', () => {
+    it('renders', () => {
+        render(_jsx(Select.Group, {}));
+        const component = screen.getByRole('group');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders an group role element with a text label', () => {
+        render(_jsx(Select.Group, { label: "Options" }));
+        const option = screen.getByRole('group', {
+            name: 'Options',
+        });
+        expect(option).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Select.Group, {}));
+        const component = screen.getByRole('group');
+        expect(component).toHaveClass('ams-select__group');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Select.Group, { className: "extra" }));
+        const component = screen.getByRole('group');
+        expect(component).toHaveClass('ams-select__group extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Select.Group, { ref: ref }));
+        const component = screen.getByRole('group');
+        expect(ref.current).toBe(component);
+    });
+    it('can be disabled', () => {
+        render(_jsx(Select.Group, { disabled: true }));
+        const component = screen.getByRole('group');
+        expect(component).toBeDisabled();
+    });
+});

package/dist/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+export type { SelectOptionProps } from './SelectOption';

package/dist/Select/index.js

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

package/dist/SkipLink/SkipLink.d.ts

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

package/dist/SkipLink/SkipLink.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 SkipLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("a", { ...restProps, className: clsx('ams-skip-link', 'ams-visually-hidden', className), ref: ref, children: children })));
+SkipLink.displayName = 'SkipLink';

package/dist/SkipLink/SkipLink.test.d.ts

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

package/dist/SkipLink/SkipLink.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 { SkipLink } from './SkipLink';
+import '@testing-library/jest-dom';
+describe('Skip link', () => {
+    it('renders', () => {
+        render(_jsx(SkipLink, { href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(SkipLink, { href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-skip-link');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(SkipLink, { className: "extra", href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-skip-link extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(SkipLink, { href: "/", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/SkipLink/index.d.ts

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

package/dist/SkipLink/index.js

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

package/dist/Spotlight/Spotlight.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
+type SpotlightColor = (typeof spotlightColors)[number];
+export type SpotlightProps = {
+    /** The HTML element to use. */
+    as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    /** The background colour. */
+    color?: SpotlightColor;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Spotlight: import("react").ForwardRefExoticComponent<{
+    /** The HTML element to use. */
+    as?: "article" | "aside" | "div" | "footer" | "section";
+    /** The background colour. */
+    color?: SpotlightColor;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<unknown>>;
+export {};

package/dist/Spotlight/Spotlight.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 spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'];
+export const Spotlight = forwardRef(({ as: Tag = 'div', children, className, color, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-spotlight', color && `ams-spotlight--${color}`, className), ref: ref, children: children })));
+Spotlight.displayName = 'Spotlight';

package/dist/Spotlight/Spotlight.test.d.ts

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

package/dist/Spotlight/Spotlight.test.js

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

package/dist/Spotlight/index.d.ts

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

package/dist/Spotlight/index.js

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

package/dist/Switch/Switch.d.ts

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

package/dist/Switch/Switch.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useId } from 'react';
+export const Switch = forwardRef(({ className, id, ...restProps }, ref) => {
+    const inputId = id || useId();
+    return (_jsxs("div", { className: clsx('ams-switch', className), children: [_jsx("input", { ...restProps, className: "ams-switch__input", id: inputId, ref: ref, role: "switch", type: "checkbox" }), _jsx("label", { className: "ams-switch__label", htmlFor: inputId })] }));
+});
+Switch.displayName = 'Switch';

package/dist/Switch/Switch.test.d.ts

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

package/dist/Switch/Switch.test.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Switch } from './Switch';
+import '@testing-library/jest-dom';
+describe('Switch', () => {
+    it('renders an element with role switch', () => {
+        render(_jsx(Switch, {}));
+        const switchElement = screen.getByRole('switch');
+        expect(switchElement).toBeInTheDocument();
+        expect(switchElement).not.toBeChecked();
+    });
+    it('is not disabled by default', () => {
+        render(_jsx(Switch, {}));
+        const switchElement = screen.getByRole('switch');
+        expect(switchElement).not.toBeDisabled();
+    });
+    it('can trigger a change event', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Switch, { onChange: handleChange }));
+        const switchElement = screen.getByRole('switch');
+        switchElement.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('does not trigger a change event when disabled', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Switch, { disabled: true, onChange: handleChange }));
+        const switchElement = screen.getByRole('switch');
+        switchElement.click();
+        expect(handleChange).not.toHaveBeenCalled();
+    });
+    it('does trigger a change event when clicking on associate label', () => {
+        const handleChange = jest.fn();
+        const MockImpl = () => {
+            return (_jsxs(_Fragment, { children: [_jsx("label", { "data-testid": "switch-label", htmlFor: "switch-label", children: "Label" }), _jsx(Switch, { id: "switch-label", onChange: handleChange })] }));
+        };
+        render(_jsx(MockImpl, {}));
+        const label = screen.getByTestId('switch-label');
+        label.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('sets the checked state when switch is clicked', () => {
+        render(_jsx(Switch, {}));
+        const switchElement = screen.getByRole('switch');
+        expect(switchElement).not.toBeChecked();
+        switchElement.click();
+        expect(switchElement).toBeChecked();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Switch, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-switch');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Switch, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-switch extra');
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        render(_jsx(Switch, { ref: ref }));
+        const switchElement = screen.getByRole('switch');
+        expect(ref.current).toBe(switchElement);
+    });
+});

package/dist/Switch/index.d.ts

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

package/dist/Switch/index.js

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

package/dist/Table/Table.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { PropsWithChildren, TableHTMLAttributes } from 'react';
+export type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableElement>> & {
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLTableSectionElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Caption: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLTableCaptionElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableCaptionElement>>;
+    Cell: import("react").ForwardRefExoticComponent<import("react").TdHTMLAttributes<HTMLTableCellElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLTableSectionElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLTableSectionElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableSectionElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<import("react").ThHTMLAttributes<HTMLTableCellElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Row: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLTableRowElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLTableRowElement>>;
+};