@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ButtonHTMLAttributes } from 'react';
+import type { IconProps } from '../Icon';
+export type IconButtonProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
+    label: string;
+    /** The size of the icon. */
+    size?: IconProps['size'];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps['svg'];
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
+    label: string;
+    /** The size of the icon. */
+    size?: IconProps["size"];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps["svg"];
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { CloseIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const IconButton = forwardRef(({ className, color, label, size, svg = CloseIcon, ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-icon-button', color && `ams-icon-button--${color}`, className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", children: label }), _jsx(Icon, { size: size, square: true, svg: svg })] })));
+IconButton.displayName = 'IconButton';

package/dist/IconButton/IconButton.test.d.ts

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

package/dist/IconButton/IconButton.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { IconButton } from './IconButton';
+import '@testing-library/jest-dom';
+describe('Icon button', () => {
+    it('renders', () => {
+        render(_jsx(IconButton, { label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(IconButton, { label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(IconButton, { className: "extra", label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button extra');
+    });
+    it('renders an accessible label', () => {
+        render(_jsx(IconButton, { className: "extra", label: "Test" }));
+        const component = screen.getByRole('button', { name: 'Test' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the class name for contrast color', () => {
+        render(_jsx(IconButton, { color: "contrast", label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button--contrast');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(IconButton, { color: "inverse", label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(IconButton, { label: "Test", ref: ref }));
+        const component = screen.getByRole('button');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/IconButton/index.d.ts

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

package/dist/IconButton/index.js

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

package/dist/Image/Image.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ImgHTMLAttributes } from 'react';
+import { AspectRatioProps } from '../common/types';
+export type ImageProps = {
+    /**
+     * A textual description of the content of the image.
+     */
+    alt: string;
+} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement>;
+export declare const Image: import("react").ForwardRefExoticComponent<{
+    /**
+     * A textual description of the content of the image.
+     */
+    alt: string;
+} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Image/Image.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 { generateAspectRatioClass } from './generateAspectRatioClass';
+export const Image = forwardRef(({ aspectRatio, className, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref })));
+Image.displayName = 'Image';

package/dist/Image/Image.test.d.ts

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

package/dist/Image/Image.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Image } from './Image';
+import { generateAspectRatioClass } from './generateAspectRatioClass';
+import { aspectRatioOptions } from '../common/types';
+import '@testing-library/jest-dom';
+describe('Image', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Image, { 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(Image, { alt: "" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Image, { alt: "", className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image extra');
+    });
+    aspectRatioOptions.forEach((aspectRatio) => {
+        it(`renders class names to display the image in the ${aspectRatio} aspect ratio`, () => {
+            const { container } = render(_jsx(Image, { alt: "", aspectRatio: aspectRatio }));
+            const component = container.querySelector(':only-child');
+            const aspectRatioClass = generateAspectRatioClass(aspectRatio) || '';
+            expect(component).toHaveClass(aspectRatioClass);
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Image, { alt: "", ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Image/generateAspectRatioClass.d.ts

@@ -0,0 +1 @@
+export declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;

package/dist/Image/generateAspectRatioClass.js

@@ -0,0 +1 @@
+export const generateAspectRatioClass = (aspectRatio) => aspectRatio && `ams-aspect-ratio-${aspectRatio.replace(':', '-')}`;

package/dist/Image/index.d.ts

@@ -0,0 +1,3 @@
+export { Image } from './Image';
+export { generateAspectRatioClass } from './generateAspectRatioClass';
+export type { ImageProps } from './Image';

package/dist/Image/index.js

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export { generateAspectRatioClass } from './generateAspectRatioClass';

package/dist/ImageSlider/ImageSlider.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+import { ImageProps } from '../Image/Image';
+export type ImageSliderImageProps = ImageProps;
+export type ImageSliderProps = {
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ImageSliderRoot: import("react").ForwardRefExoticComponent<{
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageSlider: import("react").ForwardRefExoticComponent<{
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<{
+        slideId: number;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/ImageSlider/ImageSlider.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+import { ImageSliderControls } from './ImageSliderControls';
+import { ImageSliderItem } from './ImageSliderItem';
+import { ImageSliderScroller } from './ImageSliderScroller';
+import { ImageSliderThumbnails } from './ImageSliderThumbnails';
+import { Image } from '../Image/Image';
+export const ImageSliderRoot = forwardRef(({ className, controls, imageLabel = 'Afbeelding', images, nextLabel = 'Volgende', previousLabel = 'Vorige', ...restProps }, ref) => {
+    const [currentSlideId, setCurrentSlideId] = useState(0);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const targetRef = useRef(null);
+    const observerRef = useRef(null);
+    const inView = useCallback((observations) => {
+        const images = Array.from(targetRef.current?.children || []);
+        observations.forEach((observation) => {
+            if (observation.isIntersecting) {
+                setCurrentSlideId(images.indexOf(observation.target));
+            }
+        });
+    }, []);
+    const observerOptions = useMemo(() => ({
+        root: targetRef.current,
+        threshold: 0.6,
+    }), []);
+    const updateControls = useCallback(() => {
+        const sliderScrollerElement = targetRef.current;
+        if (!sliderScrollerElement)
+            return;
+        const { firstElementChild: firstElement, lastElementChild: lastElement } = sliderScrollerElement;
+        setIsAtStart(firstElement === sliderScrollerElement?.children[currentSlideId]);
+        setIsAtEnd(lastElement === sliderScrollerElement?.children[currentSlideId]);
+    }, [currentSlideId]);
+    useEffect(() => {
+        if (targetRef.current) {
+            observerRef.current = new IntersectionObserver(inView, observerOptions);
+            const observer = observerRef.current;
+            const slides = Array.from(targetRef.current.children);
+            slides.forEach((slide) => observer.observe(slide));
+            targetRef.current.addEventListener('scrollend', synchronise);
+            updateControls();
+            return () => {
+                slides.forEach((slide) => observer.unobserve(slide));
+                targetRef.current?.removeEventListener('scrollend', synchronise);
+            };
+        }
+        return undefined;
+    }, [inView, observerOptions, updateControls]);
+    const synchronise = useCallback(() => updateControls(), [updateControls]);
+    const goToSlide = useCallback((element) => {
+        const sliderScrollerElement = targetRef.current;
+        if (!sliderScrollerElement || !element)
+            return;
+        sliderScrollerElement.scrollTo({
+            left: sliderScrollerElement.scrollLeft + element.offsetLeft - sliderScrollerElement.scrollLeft,
+        });
+    }, []);
+    const goToSlideId = useCallback((id) => {
+        const element = targetRef.current?.children[id];
+        if (element)
+            goToSlide(element);
+    }, [goToSlide]);
+    const goToNextSlide = useCallback(() => {
+        const element = targetRef.current?.children[currentSlideId];
+        const nextElement = element?.nextElementSibling;
+        if (nextElement)
+            goToSlide(nextElement);
+    }, [currentSlideId, goToSlide]);
+    const goToPreviousSlide = useCallback(() => {
+        const element = targetRef.current?.children[currentSlideId];
+        const previousElement = element?.previousElementSibling;
+        if (previousElement)
+            goToSlide(previousElement);
+    }, [currentSlideId, goToSlide]);
+    useEffect(() => {
+        const handleResize = () => {
+            const sliderScrollerElement = targetRef.current;
+            const currentSlideElement = targetRef.current?.children[currentSlideId];
+            if (!sliderScrollerElement || !currentSlideElement)
+                return;
+            const expectedScrollLeft = currentSlideElement.offsetLeft;
+            if (Math.abs(sliderScrollerElement.scrollLeft - expectedScrollLeft) < 1)
+                return;
+            goToSlide(currentSlideElement);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [currentSlideId, goToSlide]);
+    return (_jsx(ImageSliderContext.Provider, { value: { currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId, isAtEnd, isAtStart }, children: _jsxs("div", { ...restProps, "aria-roledescription": "carousel", className: clsx('ams-image-slider', controls && 'ams-image-slider--controls', className), ref: ref, tabIndex: -1, children: [controls && _jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel }), _jsx(ImageSliderScroller, { "aria-live": "polite", ref: targetRef, role: "group", tabIndex: 0, children: images.map(({ alt, aspectRatio, sizes, src, srcSet }, index) => (_jsx(ImageSliderItem, { slideId: index, children: _jsx(Image, { alt: alt, aspectRatio: aspectRatio, sizes: sizes, src: src, srcSet: srcSet }) }, index))) }), _jsx(ImageSliderThumbnails, { imageLabel: imageLabel, thumbnails: images })] }) }));
+});
+ImageSliderRoot.displayName = 'ImageSlider';
+export const ImageSlider = Object.assign(ImageSliderRoot, { Item: ImageSliderItem });

package/dist/ImageSlider/ImageSlider.test.d.ts

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

package/dist/ImageSlider/ImageSlider.test.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSlider } from './ImageSlider';
+import '@testing-library/jest-dom';
+const observe = jest.fn();
+const unobserve = jest.fn();
+const disconnect = jest.fn();
+const takeRecords = jest.fn();
+// Mock implementation of IntersectionObserver
+window.IntersectionObserver = jest.fn(() => ({
+    disconnect,
+    observe,
+    root: null,
+    rootMargin: '',
+    takeRecords,
+    thresholds: [],
+    unobserve,
+}));
+describe('Image Slider', () => {
+    const images = [
+        {
+            alt: 'Bridge',
+            src: 'https://picsum.photos/id/122/320/180',
+        },
+        {
+            alt: 'Bunker',
+            src: 'https://picsum.photos/id/101/320/180',
+        },
+        {
+            alt: 'Chairs',
+            src: 'https://picsum.photos/id/153/320/180',
+        },
+    ];
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders slides', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        const slides = Array.from(container.querySelectorAll('.ams-image-slider__item'));
+        expect(slides).toHaveLength(3);
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(ImageSlider, { className: "extra", images: images }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSlider, { images: images, ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders thumbnails', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        expect(container.querySelector('.ams-image-slider__thumbnails')).toBeInTheDocument();
+    });
+});

package/dist/ImageSlider/ImageSliderContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export type ImageSliderContextValue = {
+    currentSlideId: number;
+    goToNextSlide: () => void;
+    goToPreviousSlide: () => void;
+    goToSlideId: (id: number) => void;
+    isAtEnd: boolean;
+    isAtStart: boolean;
+};
+export declare const ImageSliderContext: import("react").Context<ImageSliderContextValue>;

package/dist/ImageSlider/ImageSliderContext.js

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { createContext } from 'react';
+const defaultValues = {
+    currentSlideId: 0,
+    goToNextSlide: () => { },
+    goToPreviousSlide: () => { },
+    goToSlideId: () => { },
+    isAtEnd: false,
+    isAtStart: true,
+};
+export const ImageSliderContext = createContext(defaultValues);

package/dist/ImageSlider/ImageSliderControls.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+export type ImageSliderControlsProps = {
+    /** The label for the ‘next’ button */
+    nextLabel: string;
+    /** The label for the ‘previous’ button */
+    previousLabel: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ImageSliderControls: import("react").ForwardRefExoticComponent<{
+    /** The label for the ‘next’ button */
+    nextLabel: string;
+    /** The label for the ‘previous’ button */
+    previousLabel: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ImageSlider/ImageSliderControls.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useContext } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+import { IconButton } from '../IconButton';
+export const ImageSliderControls = forwardRef(({ className, nextLabel, previousLabel, ...restProps }, ref) => {
+    const { goToNextSlide, goToPreviousSlide, isAtEnd, isAtStart } = useContext(ImageSliderContext);
+    const handleClickPrevious = useCallback(() => goToPreviousSlide(), [goToPreviousSlide]);
+    const handleClickNext = useCallback(() => goToNextSlide(), [goToNextSlide]);
+    return (_jsxs("div", { ...restProps, className: clsx('ams-image-slider__controls', className), ref: ref, children: [_jsx(IconButton, { className: "ams-image-slider__control ams-image-slider__control--previous", color: "inverse", disabled: isAtStart, label: previousLabel, onClick: handleClickPrevious, svg: ChevronLeftIcon }), _jsx(IconButton, { className: "ams-image-slider__control ams-image-slider__control--next", color: "inverse", disabled: isAtEnd, label: nextLabel, onClick: handleClickNext, svg: ChevronRightIcon })] }));
+});
+ImageSliderControls.displayName = 'ImageSliderControls';

package/dist/ImageSlider/ImageSliderControls.test.d.ts

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

package/dist/ImageSlider/ImageSliderControls.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSliderControls } from './ImageSliderControls';
+import '@testing-library/jest-dom';
+describe('Image Slider Controls', () => {
+    const nextLabel = 'Volgende';
+    const previousLabel = 'Vorige';
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel, ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/ImageSlider/ImageSliderItem.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ImageSliderItemProps = {
+    /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
+    slideId: number;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const ImageSliderItem: import("react").ForwardRefExoticComponent<{
+    /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
+    slideId: number;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ImageSlider/ImageSliderItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+export const ImageSliderItem = forwardRef(({ children, className, slideId, ...restProps }, ref) => {
+    const { currentSlideId } = useContext(ImageSliderContext);
+    const isInView = useMemo(() => currentSlideId === slideId, [currentSlideId, slideId]);
+    const itemClassName = useMemo(() => clsx('ams-image-slider__item', isInView && 'ams-image-slider__item--in-view', className), [isInView, className]);
+    return (_jsx("div", { ...restProps, className: itemClassName, ref: ref, ...(!isInView && { inert: '' }), children: children }));
+});
+ImageSliderItem.displayName = 'ImageSlider.Item';

package/dist/ImageSlider/ImageSliderItem.test.d.ts

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

package/dist/ImageSlider/ImageSliderItem.test.js

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

package/dist/ImageSlider/ImageSliderScroller.d.ts

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

package/dist/ImageSlider/ImageSliderScroller.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 ImageSliderScroller = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-image-slider__scroller', className), ref: ref, children: children })));
+ImageSliderScroller.displayName = 'ImageSlider.Scroller';

package/dist/ImageSlider/ImageSliderScroller.test.d.ts

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

package/dist/ImageSlider/ImageSliderScroller.test.js

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

package/dist/ImageSlider/ImageSliderThumbnails.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+import { ImageSliderImageProps } from './ImageSlider';
+export type ImageSliderThumbnailsProps = {
+    imageLabel?: string;
+    thumbnails: ImageSliderImageProps[];
+} & HTMLAttributes<HTMLElement>;
+export declare const ImageSliderThumbnails: import("react").ForwardRefExoticComponent<{
+    imageLabel?: string;
+    thumbnails: ImageSliderImageProps[];
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;