@expofp/ui 0.0.0-experimental.2d6c681

package/README.md

@@ -0,0 +1,30 @@
+# @expofp/ui
+
+Shared **pure, presentational** React components for the ExpoFP SDK. Bundled with the packages that
+depend on it — no separate install.
+
+**Scope rule:** props-in, markup-out components only — no domain logic, no MobX stores, no data
+fetching, no side effects. Nothing here may know about floor plans, booths, exhibitors, or events, or
+import from a domain package. Components receive everything they render via props; stateful wiring
+(Containers) lives in the consuming package. The test: _could it ship in a general-purpose React
+component library unchanged?_ If not, it belongs next to the domain that owns it.
+
+## Styling
+
+Components import their own `.scss`, which expects the SDK's shared SCSS layer (design tokens,
+mixins, icon glyphs) via the `@styles` alias. The published package ships **JS only** — no compiled
+CSS and no `.scss` sources. It is therefore consumed **from source** by `@expofp/floorplan`'s bundler
+(the `@expofp/source` export condition), which compiles the SCSS into its own output. `@expofp/ui` is
+an internal building block and is not intended to be styled standalone from its published `dist`.
+
+`src/styles` (the primitives `_vars`, `_utils`, `main`, `_icons`) and `public/fonts` are the canonical
+home of this layer — `@expofp/floorplan` points its own `@styles` alias here instead of keeping a
+copy. If a third consumer ever needs it, split it into a dedicated `@expofp/styles` package; until
+then, one extra alias hop is simpler than a package with a single dependent.
+
+- Build: `nx build ui`
+- Test (unit): `nx test ui`
+- Test (stories, browser): `nx test-storybook ui`
+- Storybook (dev): `nx storybook ui`
+- Storybook (build): `nx build-storybook ui`
+- Lint: `nx lint ui`

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,20 @@
+import './Alert.scss';
+import React, { type ReactNode } from 'react';
+export type AlertVariant = 'info' | 'warning' | 'error' | 'success' | 'blank';
+export type AlertSize = 'sm' | 'md';
+export type AlertPosition = 'top-right' | 'bottom-right';
+export interface AlertProps {
+    children?: ReactNode;
+    position?: AlertPosition;
+    variant?: AlertVariant;
+    size?: AlertSize;
+    inline?: boolean;
+    showIcon?: boolean;
+    closable?: boolean;
+    title?: string;
+    closeLabel: string;
+    onClose?: () => void;
+}
+declare const Alert: ({ children, position, variant, inline, showIcon, size, closable, title, closeLabel, onClose, }: AlertProps) => React.JSX.Element;
+export default Alert;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './Alert.scss';
+import cn from 'classnames';
+const Alert = ({ children, position, variant = 'info', inline = false, showIcon = true, size = 'md', closable = false, title, closeLabel, onClose, }) => {
+    const alertIcon = () => {
+        switch (variant) {
+            case 'error':
+                return 'icon-close-solid';
+            case 'success':
+                return 'icon-checkmark-solid';
+            case 'warning':
+                return 'icon-warning-solid';
+            default:
+                return 'icon-info-solid';
+        }
+    };
+    return (_jsxs("div", { className: cn('efp-alert', `efp-alert--${variant} efp-alert--${size}`, {
+            'efp-alert--inline': inline,
+            [`efp-alert--${position}`]: position,
+        }), role: variant === 'error' || variant === 'warning' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'warning' ? 'assertive' : 'polite', children: [showIcon && (_jsx("div", { className: "efp-alert__icon", children: _jsx("i", { className: cn(alertIcon()), "aria-hidden": "true" }) })), _jsxs("div", { className: "efp-alert__content", children: [title && _jsx("div", { className: "efp-alert__title", children: title }), children] }), closable && (_jsx("button", { type: "button", className: "efp-alert__close", onClick: onClose, "aria-label": closeLabel, title: closeLabel }))] }));
+};
+export default Alert;

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,3 @@
+export type { AlertPosition, AlertProps, AlertSize, AlertVariant } from './Alert';
+export { default } from './Alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.js

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

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,28 @@
+import './Autocomplete.scss';
+import React from 'react';
+export interface AutocompleteOptionObject {
+    value: string;
+    label: string;
+}
+export interface AutocompleteProps<T extends AutocompleteOptionObject = AutocompleteOptionObject> {
+    placeholder: string;
+    options: T[];
+    value?: T;
+    showClear?: boolean;
+    onChange?: (value: T | undefined) => void;
+    renderTarget?: HTMLElement | null;
+    /**
+     * Anchor the option list to the input with CSS instead of portalling it and
+     * measuring where it should go. The bottom sheet wants this: while the
+     * on-screen keyboard pans the viewport, measured coordinates are stale by the
+     * time they are written (#1567).
+     */
+    inline?: boolean;
+    noOptionsLabel: string;
+    ariaLabel: string;
+    clearLabel: string;
+    getOptionKey?: (option: T) => string;
+}
+declare const Autocomplete: <T extends AutocompleteOptionObject = AutocompleteOptionObject>({ placeholder, options, value, showClear, onChange, renderTarget, inline, noOptionsLabel, ariaLabel, clearLabel, getOptionKey, }: AutocompleteProps<T>) => React.JSX.Element;
+export default Autocomplete;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,292 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Autocomplete.scss';
+import classNames from 'classnames';
+import { lazy, Suspense, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { ResizeObserver } from 'resize-observer';
+import useOnClickOutside from '../../shared/hooks/useOnClickOutside';
+import { OverlayKeyboardInsetContext } from '../Overlay/OverlayKeyboardInsetContext';
+import { OverlayScrollContext } from '../Overlay/OverlayScrollContext';
+const DROPDOWN_GAP = 4;
+/** Below this the list is useless, so it is allowed to overflow the visible area. */
+const DROPDOWN_MIN_HEIGHT = 96;
+/** Share of the visible viewport the list may take (the SCSS counterpart of a `vh` cap). */
+const DROPDOWN_HEIGHT_RATIO = 0.45;
+const Autocomplete = ({ placeholder, options, value, showClear = false, onChange, renderTarget = document.body, inline = false, noOptionsLabel, ariaLabel, clearLabel, getOptionKey = (option) => option.value, }) => {
+    const container = renderTarget;
+    // The scrollable body of the sheet the inline list must stay inside of.
+    const scrollContainer = useContext(OverlayScrollContext);
+    const keyboardInset = useContext(OverlayKeyboardInsetContext);
+    const refAutocomplete = useRef(null);
+    const refSearchInput = useRef(null);
+    const refOptions = useRef(null);
+    const virtuosoRef = useRef(null);
+    // State, not a ref: the list can only mount once its scroll parent exists.
+    const [scrollElement, setScrollElement] = useState(null);
+    const blurTimeoutRef = useRef(null);
+    const listboxId = useId();
+    const getOptionId = (index) => `${listboxId}-option-${index}`;
+    const getOptionLabel = (option) => option.label;
+    const isSameOption = (a, b) => getOptionKey(a) === getOptionKey(b);
+    const findOptionIndexByValue = (searchValue) => options.findIndex((option) => isSameOption(option, searchValue));
+    const findOptionByValue = (searchValue) => options.find((option) => isSameOption(option, searchValue));
+    const [searchText, setSearchText] = useState(null);
+    const [focusOptionIndex, setFocusOptionIndex] = useState(null);
+    const [showOptionsDropdown, setShowOptionsDropdown] = useState(false);
+    const [inlineMaxHeight, setInlineMaxHeight] = useState(null);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 0 });
+    const activeOption = value ? findOptionByValue(value) : undefined;
+    const activeOptionIndex = activeOption ? findOptionIndexByValue(activeOption) : null;
+    const displayValue = searchText ?? (activeOption ? getOptionLabel(activeOption) : '');
+    const filteredOptions = useMemo(() => {
+        if (!searchText)
+            return [];
+        const lower = searchText.toLowerCase();
+        return options.filter((option) => getOptionLabel(option).toLowerCase().includes(lower));
+    }, [searchText, options]);
+    const updateDropdownPosition = () => {
+        if (inline || !refAutocomplete.current || !showOptionsDropdown)
+            return;
+        const rect = refAutocomplete.current.getBoundingClientRect();
+        // The visible bounds, not the layout ones: the on-screen keyboard shrinks
+        // `visualViewport` while `innerHeight` stays put.
+        const viewport = typeof window.visualViewport !== 'undefined' ? window.visualViewport : null;
+        const visibleTop = viewport ? viewport.offsetTop : 0;
+        const visibleBottom = viewport ? viewport.offsetTop + viewport.height : window.innerHeight;
+        const spaceBelow = visibleBottom - rect.bottom - DROPDOWN_GAP;
+        const spaceAbove = rect.top - visibleTop - DROPDOWN_GAP;
+        // Flip up when the list does not fit below and above is roomier (#1567).
+        const desiredHeight = (visibleBottom - visibleTop) * DROPDOWN_HEIGHT_RATIO;
+        const openUp = spaceBelow < desiredHeight && spaceAbove > spaceBelow;
+        const space = Math.max(openUp ? spaceAbove : spaceBelow, DROPDOWN_MIN_HEIGHT);
+        const maxHeight = Math.min(desiredHeight, space);
+        // The dropdown is absolutely positioned inside the render target, so both
+        // edges are measured against it — never against the document.
+        const containerRect = container?.getBoundingClientRect();
+        const containerTop = containerRect?.top ?? 0;
+        setDropdownPosition({
+            ...(openUp
+                ? { bottom: (containerRect?.bottom ?? window.innerHeight) - rect.top + DROPDOWN_GAP }
+                : { top: rect.bottom - containerTop + DROPDOWN_GAP }),
+            left: rect.left - (containerRect?.left ?? 0),
+            width: rect.width,
+            maxHeight,
+        });
+    };
+    useEffect(() => {
+        if (inline || !showOptionsDropdown)
+            return;
+        updateDropdownPosition();
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        window.addEventListener('resize', updateDropdownPosition);
+        const viewport = typeof window.visualViewport !== 'undefined' ? window.visualViewport : null;
+        viewport?.addEventListener('resize', updateDropdownPosition);
+        viewport?.addEventListener('scroll', updateDropdownPosition);
+        return () => {
+            window.removeEventListener('scroll', updateDropdownPosition, true);
+            window.removeEventListener('resize', updateDropdownPosition);
+            viewport?.removeEventListener('resize', updateDropdownPosition);
+            viewport?.removeEventListener('scroll', updateDropdownPosition);
+        };
+    }, [showOptionsDropdown, inline]);
+    // The inline list ends where the sheet's scroll body does, or at the keyboard
+    // when that body runs on under one. Left to overflow, it would extend that
+    // body and the tail could only be reached by scrolling the sheet, then the
+    // list. Both rects come from the same layout, so the keyboard panning the
+    // viewport does not skew the difference.
+    useEffect(() => {
+        if (!inline || !showOptionsDropdown || !scrollContainer) {
+            setInlineMaxHeight(null);
+            return;
+        }
+        const measure = () => {
+            const anchor = refAutocomplete.current;
+            if (!anchor)
+                return;
+            const room = scrollContainer.getBoundingClientRect().bottom -
+                keyboardInset -
+                anchor.getBoundingClientRect().bottom -
+                DROPDOWN_GAP;
+            setInlineMaxHeight(Math.max(room, DROPDOWN_MIN_HEIGHT));
+        };
+        measure();
+        // The sheet resizes under the list: snap points, the keyboard, a drag.
+        const observer = new ResizeObserver(measure);
+        observer.observe(scrollContainer);
+        return () => observer.disconnect();
+    }, [inline, showOptionsDropdown, scrollContainer, keyboardInset]);
+    useEffect(() => {
+        if (focusOptionIndex === null)
+            return;
+        // Through the list, not the DOM: a focused option far down is not rendered until scrolled to.
+        virtuosoRef.current?.scrollIntoView({ index: focusOptionIndex });
+    }, [focusOptionIndex]);
+    useOnClickOutside([refAutocomplete, refOptions], () => setShowOptionsDropdown(false), showOptionsDropdown);
+    useEffect(() => {
+        return () => {
+            if (blurTimeoutRef.current)
+                clearTimeout(blurTimeoutRef.current);
+        };
+    }, []);
+    const updateValue = (newValue) => {
+        setSearchText(null);
+        onChange?.(newValue);
+    };
+    const selectOption = (option) => {
+        updateValue(option);
+        setFocusOptionIndex(null);
+        setShowOptionsDropdown(false);
+        refSearchInput.current?.blur();
+    };
+    const clearValue = (setFocus = false) => {
+        updateValue(undefined);
+        setFocusOptionIndex(null);
+        if (setFocus)
+            refSearchInput.current?.focus();
+    };
+    const onFocus = () => {
+        setShowOptionsDropdown(true);
+    };
+    const onBlur = () => {
+        if (blurTimeoutRef.current)
+            clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = setTimeout(() => {
+            setSearchText(null);
+        }, 200);
+    };
+    const handleEnterKey = () => {
+        if ((!displayValue && focusOptionIndex === null) || (searchText && focusOptionIndex === null)) {
+            return;
+        }
+        const currentOptions = filteredOptions.length > 0 ? filteredOptions : options;
+        if (focusOptionIndex !== null && currentOptions[focusOptionIndex]) {
+            const selectedOption = currentOptions[focusOptionIndex];
+            updateValue(selectedOption);
+        }
+        setFocusOptionIndex(null);
+        setShowOptionsDropdown(false);
+        refSearchInput.current?.blur();
+    };
+    const handleArrowUp = () => {
+        if (!showOptionsDropdown || focusOptionIndex === 0 || focusOptionIndex === null) {
+            return;
+        }
+        setFocusOptionIndex(focusOptionIndex - 1);
+    };
+    const handleArrowDown = () => {
+        if (!showOptionsDropdown) {
+            setFocusOptionIndex(activeOptionIndex ?? 0);
+            setShowOptionsDropdown(true);
+            return;
+        }
+        const currentOptions = filteredOptions.length > 0 ? filteredOptions : options;
+        const nextIndex = focusOptionIndex === null ? 0 : focusOptionIndex + 1;
+        if (nextIndex < currentOptions.length) {
+            setFocusOptionIndex(nextIndex);
+        }
+    };
+    const onKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+                handleEnterKey();
+                break;
+            case 'ArrowUp':
+                handleArrowUp();
+                break;
+            case 'ArrowDown':
+                handleArrowDown();
+                break;
+            case 'Delete':
+                clearValue(true);
+                break;
+            case 'Escape':
+                if (!searchText) {
+                    event.preventDefault();
+                    setShowOptionsDropdown(false);
+                    refSearchInput.current?.blur();
+                }
+                else {
+                    setSearchText(null);
+                    setFocusOptionIndex(activeOptionIndex);
+                }
+                break;
+        }
+    };
+    const onInputChange = (event) => {
+        setSearchText(event.target.value);
+        setShowOptionsDropdown(true);
+        setFocusOptionIndex(null);
+    };
+    const renderOptions = () => {
+        const currentOptions = filteredOptions.length > 0 ? filteredOptions : options;
+        if (searchText && filteredOptions.length === 0) {
+            return _jsx("div", { className: "efp-autocomplete__empty", children: noOptionsLabel });
+        }
+        // Virtualized: a plan's booth list runs to thousands of options, and rendering, laying out and
+        // compositing every one of them froze the frame the dropdown opened in for over half a second.
+        if (!scrollElement)
+            return null;
+        const context = {
+            listboxId,
+            focusIndex: focusOptionIndex,
+            activeIndex: filteredOptions.length === 0 ? activeOptionIndex : null,
+            onSelect: (index) => selectOption(currentOptions[index]),
+        };
+        return (_jsx(Suspense, { fallback: null, children: _jsx(LazyVirtuoso, { ref: virtuosoRef, customScrollParent: scrollElement, data: currentOptions, context: context, computeItemKey: (_index, option) => getOptionKey(option), itemContent: (_index, option) => getOptionLabel(option), components: { List: OptionList, Item: OptionItem }, increaseViewportBy: 200 }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: refAutocomplete, "data-no-drag": true, className: classNames('efp-autocomplete', {
+                    'is-open': showOptionsDropdown,
+                    'with-clear': showOptionsDropdown && showClear,
+                }), children: [_jsxs("div", { className: "efp-autocomplete__inner", children: [_jsx("input", { type: "search", className: "efp-autocomplete__input", role: "combobox", "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-expanded": showOptionsDropdown, "aria-controls": showOptionsDropdown ? listboxId : undefined, "aria-activedescendant": showOptionsDropdown && focusOptionIndex !== null
+                                    ? getOptionId(focusOptionIndex)
+                                    : undefined, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, value: displayValue, placeholder: placeholder, ref: refSearchInput }), showClear && showOptionsDropdown && displayValue && (_jsx("button", { type: "button", className: "efp-autocomplete__clear", "aria-label": clearLabel, onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    clearValue(true);
+                                } }))] }), showOptionsDropdown && inline && (_jsx("div", { ref: refOptions, "data-no-drag": true, className: "efp-autocomplete-options efp-autocomplete-options--inline", style: inlineMaxHeight !== null ? { maxHeight: `${inlineMaxHeight}px` } : undefined, children: _jsx("div", { className: "efp-autocomplete-options__scroll", ref: setScrollElement, children: renderOptions() }) }))] }), showOptionsDropdown &&
+                !inline &&
+                container &&
+                createPortal(_jsx("div", { ref: refOptions, className: "efp-autocomplete-options", style: {
+                        ...(dropdownPosition.top !== undefined ? { top: `${dropdownPosition.top}px` } : {}),
+                        ...(dropdownPosition.bottom !== undefined
+                            ? { bottom: `${dropdownPosition.bottom}px` }
+                            : {}),
+                        left: `${dropdownPosition.left}px`,
+                        width: `${dropdownPosition.width}px`,
+                        maxHeight: `${dropdownPosition.maxHeight}px`,
+                    }, children: _jsx("div", { className: "efp-autocomplete-options__scroll", ref: setScrollElement, children: renderOptions() }) }), container)] }));
+};
+/**
+ * The listbox itself; Virtuoso positions it inside the scroll parent.
+ * @param props - Virtuoso's list props, plus the autocomplete's context.
+ * @returns The `ul`.
+ */
+function OptionList({ context, ref, ...props }) {
+    // Virtuoso types its list element as a `div`; the listbox is a `ul`, which it handles the same.
+    return (_jsx("ul", { ...props, ref: ref, role: "listbox", id: context.listboxId }));
+}
+/**
+ * One option; Virtuoso renders only the ones in and near view.
+ * @param props - Virtuoso's item props, plus the autocomplete's context.
+ * @returns The `li`.
+ */
+function OptionItem({ context, item: _item, ...props }) {
+    const index = props['data-index'];
+    const isFocused = index === context.focusIndex;
+    const isActive = !isFocused && index === context.activeIndex;
+    return (_jsx("li", { ...props, id: `${context.listboxId}-option-${index}`, role: "option", "aria-selected": index === context.activeIndex, className: isFocused ? 'is-focus' : isActive ? 'is-active' : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => context.onSelect(index) }));
+}
+/**
+ * Loads Virtuoso on first open rather than with the SDK's main chunk, as the floorplan's own lists
+ * do; the retry covers a chunk request lost to a flaky network.
+ * @returns The module, shaped for `lazy`.
+ */
+function importVirtuoso() {
+    return import('react-virtuoso')
+        .then((mod) => ({ default: mod.Virtuoso }))
+        .catch(() => new Promise((resolve) => {
+        setTimeout(() => resolve(importVirtuoso()), 3000);
+    }));
+}
+// Typed as the generic component it resolves to; `lazy` alone erases the data and context types.
+const LazyVirtuoso = lazy(importVirtuoso);
+export default Autocomplete;

package/dist/components/Autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export type { AutocompleteOptionObject, AutocompleteProps } from './Autocomplete';
+export { default } from './Autocomplete';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Autocomplete/index.js

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

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import './Badge.scss';
+import React, { type ReactNode } from 'react';
+export type BadgeVariant = 'primary' | 'primary-light' | 'lightgray' | 'gray' | 'ghost' | 'orange' | 'location';
+export interface BadgeProps {
+    children?: ReactNode;
+    variant?: BadgeVariant;
+    size?: 'xs' | 'md' | 'lg';
+    noMargins?: boolean;
+    rounded?: boolean;
+    inline?: boolean;
+}
+declare const Badge: ({ children, variant, size, noMargins, rounded, inline, }: BadgeProps) => React.JSX.Element;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import './Badge.scss';
+import cn from 'classnames';
+const Badge = ({ children, variant = 'ghost', size = 'lg', noMargins, rounded, inline, }) => {
+    return (_jsx("div", { className: cn({
+            'efp-badge': true,
+            [`efp-badge--${variant}`]: true,
+            [`efp-badge--${size}`]: true,
+            'is-no-margin': noMargins,
+            'is-rounded': rounded,
+            'is-inline': inline,
+        }), children: children }));
+};
+export default Badge;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export type { BadgeProps, BadgeVariant } from './Badge';
+export { default } from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.js

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,30 @@
+import './Button.scss';
+import React, { type ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'gray' | 'gray-border' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonTarget = '_self' | '_blank' | '_parent';
+interface ButtonOwnProps {
+    children?: ReactNode;
+    inline?: boolean;
+    text?: string;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    target?: ButtonTarget;
+    ariaLabel?: string;
+    withBadge?: boolean;
+    /** Whether the button should have a round/circular shape */
+    round?: boolean;
+}
+type ButtonAsButton = ButtonOwnProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> & {
+    link?: undefined;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+type ButtonAsLink = ButtonOwnProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonOwnProps> & {
+    link: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsLink;
+declare const Button: (props: ButtonProps) => React.JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Button.scss';
+import cn from 'classnames';
+// `if (props.link)` alone doesn't narrow the union for TS; this predicate does.
+const isLinkProps = (props) => props.link != null;
+const processLabel = (label) => {
+    const parts = label.split(/(#\d+#)/);
+    const badgeMatch = /#(\d+)#/.exec(label);
+    const badgeValue = badgeMatch ? badgeMatch[1] : null;
+    return {
+        content: parts.map((part, index) => {
+            if (/#\d+#/.exec(part)) {
+                return (_jsx("div", { className: "efp-button-badge", children: badgeValue }, index));
+            }
+            return _jsx("span", { children: part }, index);
+        }),
+    };
+};
+const Button = (props) => {
+    const { children, inline = false, text, disabled = false, variant = 'primary', size = 'lg', target = '_self', ariaLabel, title, withBadge = false, round, } = props;
+    const content = children ?? text;
+    const { content: processedContent } = withBadge && typeof content === 'string' ? processLabel(content) : { content };
+    const commonClassNames = cn('efp-button', `efp-button--${variant}`, `efp-button--${size}`, {
+        'efp-button--inline': inline,
+        'is-disabled': disabled,
+        'efp-button--round': round,
+    }, props.className);
+    if (isLinkProps(props)) {
+        const { link, className: _className, onClick, ...rest } = props;
+        const onKeyDown = (event) => {
+            if (disabled || event.key !== ' ')
+                return;
+            event.preventDefault();
+            event.currentTarget.click();
+        };
+        return (_jsx("a", { ...rest, href: disabled ? undefined : link, className: commonClassNames, target: target, rel: "noopener noreferrer", onClick: disabled ? undefined : onClick, onKeyDown: onKeyDown, "aria-label": ariaLabel || undefined, title: title || ariaLabel || (typeof content === 'string' ? content : undefined), role: "button", "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, children: processedContent }));
+    }
+    const { className: _className, ...rest } = props;
+    return (_jsx("button", { type: "button", ...rest, className: commonClassNames, disabled: disabled, "aria-label": ariaLabel || undefined, title: title || ariaLabel || (typeof content === 'string' ? content : undefined), children: processedContent }));
+};
+export default Button;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonProps, ButtonSize, ButtonTarget, ButtonVariant } from './Button';
+export { default } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.js

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import './Checkbox.scss';
+import React from 'react';
+interface CheckboxBase {
+    name?: string;
+    value: boolean;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md';
+    onChange: (value: boolean) => void;
+}
+export type CheckboxProps = (CheckboxBase & {
+    label: string;
+    ariaLabel?: string;
+}) | (CheckboxBase & {
+    label?: undefined;
+    ariaLabel: string;
+});
+declare const Checkbox: ({ name, value, label, ariaLabel, size, indeterminate, onChange, }: CheckboxProps) => React.JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './Checkbox.scss';
+import classNames from 'classnames';
+import { useEffect, useId, useRef } from 'react';
+const Checkbox = ({ name, value, label, ariaLabel, size = 'md', indeterminate = false, onChange, }) => {
+    const id = useId();
+    const checkboxRef = useRef(null);
+    useEffect(() => {
+        if (checkboxRef.current) {
+            checkboxRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs("div", { className: classNames({
+            'efp-checkbox': true,
+            [`efp-checkbox--${size}`]: true,
+        }), children: [_jsx("input", { ref: checkboxRef, type: "checkbox", id: id, name: name, checked: value, "aria-label": ariaLabel, onChange: () => onChange(!value) }), _jsx("label", { htmlFor: id, children: label })] }));
+};
+export default Checkbox;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxProps } from './Checkbox';
+export { default } from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.js

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

package/dist/components/CheckboxButton/CheckboxButton.d.ts

@@ -0,0 +1,12 @@
+import './CheckboxButton.scss';
+import React from 'react';
+export interface CheckboxButtonProps {
+    checked: boolean;
+    label?: string;
+    ariaLabel?: string;
+    className?: string;
+    onClick: () => void;
+}
+declare const CheckboxButton: ({ checked, label, ariaLabel, className, onClick }: CheckboxButtonProps) => React.JSX.Element;
+export default CheckboxButton;
+//# sourceMappingURL=CheckboxButton.d.ts.map

package/dist/components/CheckboxButton/CheckboxButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './CheckboxButton.scss';
+import cn from 'classnames';
+import { useState } from 'react';
+const CheckboxButton = ({ checked, label, ariaLabel, className, onClick }) => {
+    const [animateIcon, setAnimateIcon] = useState(false);
+    const handleClick = () => {
+        setAnimateIcon(true);
+        onClick();
+        setTimeout(() => {
+            setAnimateIcon(false);
+        }, 320);
+    };
+    return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": checked, "aria-label": ariaLabel ?? (label ? undefined : 'Toggle'), className: cn('efp-checkbox-button', className, { 'efp-checkbox-button--checked': checked }), onClick: handleClick, children: [_jsx("div", { className: cn('efp-checkbox-button__inner', {
+                    'efp-checkbox-button__inner--animate': animateIcon,
+                }) }), label && _jsx("span", { className: "efp-checkbox-button__label", children: label })] }));
+};
+export default CheckboxButton;

package/dist/components/CheckboxButton/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxButtonProps } from './CheckboxButton';
+export { default } from './CheckboxButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CheckboxButton/index.js

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

package/dist/components/DownloadList/DownloadList.d.ts

@@ -0,0 +1,15 @@
+import './DownloadList.scss';
+export interface DownloadItem {
+    fileName: string;
+    path: string;
+}
+export interface DownloadListProps {
+    list: DownloadItem[];
+    /** Section heading (e.g. a localized "Read More"). */
+    title: string;
+    /** Builds the per-item download link accessible name from its file name. */
+    downloadLabel: (fileName: string) => string;
+}
+declare function DownloadList({ list, title, downloadLabel }: DownloadListProps): import("react").JSX.Element;
+export default DownloadList;
+//# sourceMappingURL=DownloadList.d.ts.map