@inkra/react 0.1.0 → 0.2.0

package/dist/audio-player/index.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Select } from '../select/index.js';
+import { Slider } from '../slider/index.js';
+const pausePaths = [
+    { d: 'M 15 3 H 18 A 1 1 0 0 1 19 4 V 20 A 1 1 0 0 1 18 21 H 15 A 1 1 0 0 1 14 20 V 4 A 1 1 0 0 1 15 3 Z' },
+    { d: 'M 6 3 H 9 A 1 1 0 0 1 10 4 V 20 A 1 1 0 0 1 9 21 H 6 A 1 1 0 0 1 5 20 V 4 A 1 1 0 0 1 6 3 Z' },
+];
+const playPaths = [{ d: 'M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z' }];
+const volumePaths = [
+    { d: 'M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z' },
+    { d: 'M16 9a5 5 0 0 1 0 6' },
+    { d: 'M19.364 18.364a9 9 0 0 0 0-12.728' },
+];
+const mutePaths = [
+    { d: 'M11 4.702a.7.7 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.7.7 0 0 0 11 19.298z' },
+    { d: 'm16.5 14.5 5-5' },
+    { d: 'm16.5 9.5 5 5' },
+];
+const DEFAULT_LABELS = {
+    play: 'Play', pause: 'Pause', mute: 'Mute', unmute: 'Unmute', seek: 'Seek', volume: 'Volume', rate: 'Playback speed', loading: 'Loading audio', blocked: 'Playback was blocked. Press play to try again.', error: 'Audio failed to load.',
+};
+const rates = [0.75, 1, 1.25, 1.5, 2];
+function clamp(value, min, max) { return Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : min; }
+function formatTime(value) { if (!Number.isFinite(value) || value < 0)
+    return '0:00'; const seconds = Math.floor(value); return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`; }
+export const AudioPlayer = forwardRef(function AudioPlayer({ src, preload = 'metadata', autoPlay = false, crossOrigin, className, defaultMuted = false, defaultPlaybackRate = 1, defaultVolume = 1, volume, muted, playbackRate, onVolumeChange, onMutedChange, onPlaybackRateChange, onTimeChange, onStateChange, onError, labels, renderControls, audioProps, ...props }, forwardedRef) {
+    const id = useId();
+    const audioRef = useRef(null);
+    const rootRef = useRef(null);
+    const [state, setState] = useState({ status: src ? 'loading' : 'idle', currentTime: 0, duration: 0, buffered: 0, volume: clamp(volume ?? defaultVolume, 0, 1), muted: muted ?? defaultMuted, playbackRate: clamp(playbackRate ?? defaultPlaybackRate, 0.25, 4), canPlay: false, error: null });
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const update = useCallback((patch) => {
+        const next = { ...stateRef.current, ...patch };
+        stateRef.current = next;
+        setState(next);
+        onStateChange?.(next);
+    }, [onStateChange]);
+    const sync = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const buffered = audio.duration > 0 && audio.buffered.length ? audio.buffered.end(audio.buffered.length - 1) / audio.duration : 0;
+        update({ currentTime: Number.isFinite(audio.currentTime) ? audio.currentTime : 0, duration: Number.isFinite(audio.duration) ? audio.duration : 0, buffered: clamp(buffered, 0, 1), volume: audio.volume, muted: audio.muted, playbackRate: audio.playbackRate, canPlay: audio.readyState >= 3 });
+    }, [update]);
+    const play = useCallback(async () => { const audio = audioRef.current; if (!audio)
+        return; try {
+        await audio.play();
+    }
+    catch (error) {
+        update({ status: 'blocked' });
+        onError?.(error instanceof DOMException ? error : null);
+    } }, [onError, update]);
+    const pause = useCallback(() => { audioRef.current?.pause(); }, []);
+    const togglePlay = useCallback(async () => { const audio = audioRef.current; if (!audio)
+        return; if (audio.paused)
+        await play();
+    else
+        pause(); }, [pause, play]);
+    const seek = useCallback((time) => { const audio = audioRef.current; if (!audio || !Number.isFinite(time))
+        return; audio.currentTime = clamp(time, 0, Number.isFinite(audio.duration) ? audio.duration : Math.max(0, time)); sync(); onTimeChange?.(audio.currentTime); }, [onTimeChange, sync]);
+    const setVolume = useCallback((next) => { const audio = audioRef.current; if (!audio)
+        return; audio.volume = clamp(next, 0, 1); onVolumeChange?.(audio.volume); sync(); }, [onVolumeChange, sync]);
+    const setMuted = useCallback((next) => { const audio = audioRef.current; if (!audio)
+        return; audio.muted = next; onMutedChange?.(next); sync(); }, [onMutedChange, sync]);
+    const setPlaybackRate = useCallback((next) => { const audio = audioRef.current; if (!audio)
+        return; audio.playbackRate = clamp(next, 0.25, 4); onPlaybackRateChange?.(audio.playbackRate); sync(); }, [onPlaybackRateChange, sync]);
+    const focus = useCallback(() => { rootRef.current?.querySelector('[data-audio-player-control]')?.focus(); }, []);
+    const controls = { audio: audioRef.current, state, play, pause, togglePlay, seek, setVolume, setMuted, setPlaybackRate, focus };
+    useImperativeHandle(forwardedRef, () => controls, [state, play, pause, togglePlay, seek, setVolume, setMuted, setPlaybackRate, focus]);
+    useEffect(() => { const audio = audioRef.current; if (!audio)
+        return; audio.volume = clamp(volume ?? defaultVolume, 0, 1); audio.muted = muted ?? defaultMuted; audio.playbackRate = clamp(playbackRate ?? defaultPlaybackRate, 0.25, 4); sync(); }, [defaultMuted, defaultPlaybackRate, defaultVolume, muted, playbackRate, src, volume, sync]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio || !src)
+            return;
+        audio.pause();
+        audio.currentTime = 0;
+        update({ status: 'loading', currentTime: 0, duration: 0, buffered: 0, canPlay: false, error: null });
+        audio.load();
+    }, [src, update]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const handlers = {
+            loadstart: () => update({ status: 'loading', error: null, canPlay: false }), loadedmetadata: () => { sync(); update({ status: 'ready' }); }, canplay: () => { sync(); update({ canPlay: true, status: audio.paused ? 'paused' : 'playing' }); }, play: () => update({ status: 'playing' }), pause: () => update({ status: audio.ended ? 'ended' : 'paused' }), playing: () => update({ status: 'playing', canPlay: true }), waiting: () => update({ status: 'buffering' }), progress: sync, timeupdate: () => { sync(); onTimeChange?.(audio.currentTime); }, ratechange: sync, volumechange: () => { sync(); onVolumeChange?.(audio.volume); onMutedChange?.(audio.muted); }, ended: () => update({ status: 'ended', currentTime: audio.duration || audio.currentTime }), error: () => { const error = audio.error; update({ status: 'error', error }); onError?.(error); }, abort: () => update({ status: 'idle' }),
+        };
+        Object.entries(handlers).forEach(([name, handler]) => audio.addEventListener(name, handler));
+        return () => Object.entries(handlers).forEach(([name, handler]) => audio.removeEventListener(name, handler));
+    }, [onError, onMutedChange, onTimeChange, onVolumeChange, sync, src, update]);
+    const playLabel = state.status === 'playing' ? mergedLabels.pause : mergedLabels.play;
+    const defaultControls = _jsxs("div", { className: "inkra-audio-player__controls", role: "group", "aria-label": "Audio controls", children: [_jsx(Button, { "data-audio-player-control": true, "data-tooltip": playLabel, type: "button", size: "icon-sm", variant: "outline", "aria-label": playLabel, onClick: () => void togglePlay(), children: _jsx(PencilIcon, { paths: state.status === 'playing' ? pausePaths : playPaths, size: 20, sourceSize: 24 }) }), _jsx("div", { className: "inkra-audio-player__seek", children: _jsx(Slider, { "data-audio-player-control": true, min: 0, max: state.duration || 0, step: 0.01, value: [state.currentTime], onValueChange: values => seek(values[0] ?? 0), disabled: !state.duration, "aria-label": mergedLabels.seek, getValueLabel: value => labels?.time?.(value, state.duration) ?? `${formatTime(value)} / ${formatTime(state.duration)}`, size: "sm", variant: "inset" }) }), _jsx(PencilText, { as: "span", className: "inkra-audio-player__time", "aria-live": "off", children: labels?.time?.(state.currentTime, state.duration) ?? `${formatTime(state.currentTime)} / ${formatTime(state.duration)}` }), _jsxs("div", { className: "inkra-audio-player__settings", children: [_jsx(Button, { "data-audio-player-control": true, "data-tooltip": state.muted ? mergedLabels.unmute : mergedLabels.mute, type: "button", size: "icon-sm", variant: "ghost", "aria-label": state.muted ? mergedLabels.unmute : mergedLabels.mute, onClick: () => setMuted(!state.muted), children: _jsx(PencilIcon, { paths: state.muted ? mutePaths : volumePaths, size: 20, sourceSize: 24 }) }), _jsx("div", { className: "inkra-audio-player__volume", children: _jsx(Slider, { "data-audio-player-control": true, min: 0, max: 1, step: 0.01, value: [state.muted ? 0 : state.volume], onValueChange: values => { setMuted(false); setVolume(values[0] ?? 0); }, "aria-label": mergedLabels.volume, getValueLabel: value => `${Math.round(value * 100)}%`, size: "sm", variant: "inset" }) }), _jsxs(Select.Root, { value: String(state.playbackRate), onValueChange: value => setPlaybackRate(Number(value)), children: [_jsx(Select.Trigger, { "data-audio-player-control": true, "aria-label": mergedLabels.rate, fullWidth: false, size: "sm", children: _jsx(Select.Value, {}) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { position: "popper", sideOffset: 4, children: _jsx(Select.Viewport, { children: rates.map(rate => _jsxs(Select.Item, { value: String(rate), children: [_jsx(Select.ItemText, { children: `${rate}x` }), _jsx(Select.ItemIndicator, {})] }, rate)) }) }) })] })] })] });
+    return _jsxs(PencilSurface, { ref: rootRef, ...props, className: ['inkra-audio-player', className].filter(Boolean).join(' '), variant: "paper", radius: 8, "data-status": state.status, "data-audio-player-id": id, children: [_jsx("audio", { ...audioProps, ref: audioRef, "aria-label": audioProps?.['aria-label'] ?? 'Audio', autoPlay: autoPlay, crossOrigin: crossOrigin, muted: state.muted, preload: preload, src: src }), state.status === 'blocked' && _jsx(PencilText, { as: "p", className: "inkra-audio-player__message", role: "status", children: mergedLabels.blocked }), state.status === 'error' && _jsx(PencilText, { as: "p", className: "inkra-audio-player__message", role: "alert", children: mergedLabels.error }), renderControls ? renderControls(controls) : defaultControls] });
+});

package/dist/carousel/index.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CarouselVisibleItems {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+}
+export interface CarouselAutoplayOptions {
+    delay?: number;
+    pauseOnHover?: boolean;
+    pauseOnFocus?: boolean;
+    stopOnInteraction?: boolean;
+    respectReducedMotion?: boolean;
+}
+export interface CarouselLabels {
+    previous?: string;
+    next?: string;
+    pause?: string;
+    play?: string;
+    pages?: string;
+    empty?: string;
+    slide?: (index: number, count: number) => string;
+    page?: (index: number, count: number) => string;
+    status?: (index: number, count: number) => string;
+}
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    children?: ReactNode;
+    currentIndex?: number;
+    defaultIndex?: number;
+    onCurrentIndexChange?: (index: number) => void;
+    visibleItems?: number | CarouselVisibleItems;
+    gap?: number;
+    align?: 'start' | 'center' | 'end';
+    loop?: boolean;
+    dragFree?: boolean;
+    disabled?: boolean;
+    controls?: boolean;
+    pagination?: boolean;
+    autoplay?: boolean | CarouselAutoplayOptions;
+    emptyState?: ReactNode;
+    labels?: CarouselLabels;
+}
+export interface CarouselRef {
+    root: HTMLDivElement | null;
+    previous: () => void;
+    next: () => void;
+    scrollTo: (index: number) => void;
+    play: () => void;
+    pause: () => void;
+}
+export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<CarouselRef>>;

package/dist/carousel/index.js

@@ -0,0 +1,290 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Children, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+const previousPaths = [{ d: 'm15 18-6-6 6-6' }];
+const nextPaths = [{ d: 'm9 18 6-6-6-6' }];
+const pausePaths = [{ d: 'M8 5v14M16 5v14' }];
+const playPaths = [{ d: 'm7 4 12 8-12 8Z' }];
+function finiteInteger(value, fallback, minimum = 1, maximum = 12) {
+    return Number.isFinite(value) ? Math.min(maximum, Math.max(minimum, Math.round(value))) : fallback;
+}
+function clampIndex(value, count) {
+    if (count === 0)
+        return 0;
+    const index = Number.isFinite(value) ? Math.round(value) : 0;
+    return Math.min(count - 1, Math.max(0, index));
+}
+function visibleItemValues(value) {
+    if (typeof value === 'number') {
+        const fixed = finiteInteger(value, 1);
+        return { base: fixed, sm: fixed, md: fixed, lg: fixed };
+    }
+    const base = finiteInteger(value?.base, 1);
+    const sm = finiteInteger(value?.sm, base);
+    const md = finiteInteger(value?.md, sm);
+    const lg = finiteInteger(value?.lg, md);
+    return { base, sm, md, lg };
+}
+function useReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return reduced;
+}
+export const Carousel = forwardRef(function Carousel({ 'aria-label': ariaLabel = 'Carousel', align = 'start', autoplay = false, children, className, controls = true, currentIndex, defaultIndex = 0, dir, disabled = false, dragFree = false, emptyState, gap = 16, labels, loop = false, onBlurCapture, onCurrentIndexChange, onFocusCapture, onKeyDown, onPointerEnter, onPointerLeave, pagination = true, role = 'region', style, tabIndex, visibleItems = { base: 1, sm: 2, md: 3 }, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const rootRef = useRef(null);
+    const slideItems = Children.toArray(children);
+    const count = slideItems.length;
+    const controlled = currentIndex !== undefined;
+    const initialIndex = clampIndex(controlled ? currentIndex : defaultIndex, count);
+    const [uncontrolledIndex, setUncontrolledIndex] = useState(initialIndex);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+    const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [inferredDir, setInferredDir] = useState('ltr');
+    const [playing, setPlaying] = useState(false);
+    const hoveredRef = useRef(false);
+    const focusedRef = useRef(false);
+    const userPausedRef = useRef(false);
+    const autoplayControlPointerRef = useRef(false);
+    const reducedMotion = useReducedMotion();
+    const selectionCount = scrollSnaps.length || count;
+    const activeIndex = clampIndex(controlled ? currentIndex : uncontrolledIndex, selectionCount);
+    const resolvedDir = dir === 'rtl' ? 'rtl' : dir === 'ltr' ? 'ltr' : inferredDir;
+    const autoplayOptions = typeof autoplay === 'object' ? autoplay : {};
+    const stopOnInteraction = autoplayOptions.stopOnInteraction ?? true;
+    const autoplayEnabled = Boolean(autoplay) && count > 1 && !disabled;
+    const autoplayAllowed = autoplayEnabled && !(autoplayOptions.respectReducedMotion !== false && reducedMotion);
+    const requestedVisible = visibleItemValues(visibleItems);
+    const visible = count > 0 ? {
+        base: Math.min(count, requestedVisible.base),
+        sm: Math.min(count, requestedVisible.sm),
+        md: Math.min(count, requestedVisible.md),
+        lg: Math.min(count, requestedVisible.lg),
+    } : requestedVisible;
+    const resolvedGap = Number.isFinite(gap) ? Math.max(0, gap) : 16;
+    const autoplayActive = Boolean(autoplay);
+    const autoplayPlugin = useMemo(() => Autoplay({
+        active: autoplayActive,
+        delay: Number.isFinite(autoplayOptions.delay) ? Math.max(1000, autoplayOptions.delay) : 5000,
+        playOnInit: false,
+        stopOnFocusIn: false,
+        stopOnInteraction,
+        stopOnMouseEnter: false,
+    }), [autoplayActive, autoplayOptions.delay, stopOnInteraction]);
+    const plugins = useMemo(() => autoplayActive ? [autoplayPlugin] : [], [autoplayActive, autoplayPlugin]);
+    const [viewportRef, emblaApi] = useEmblaCarousel({
+        active: !disabled && count > 0,
+        align,
+        containScroll: 'trimSnaps',
+        direction: resolvedDir,
+        dragFree,
+        loop: loop && count > 1,
+        slidesToScroll: 1,
+        startIndex: initialIndex,
+        watchResize: true,
+        watchSlides: true,
+    }, plugins);
+    const refresh = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const nextIndex = clampIndex(emblaApi.selectedScrollSnap(), count);
+        setSelectedIndex(nextIndex);
+        setScrollSnaps(emblaApi.scrollSnapList());
+        setCanScrollPrevious(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [count, emblaApi]);
+    const select = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const nextIndex = clampIndex(emblaApi.selectedScrollSnap(), count);
+        setSelectedIndex(nextIndex);
+        setCanScrollPrevious(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+        if (!controlled)
+            setUncontrolledIndex(nextIndex);
+        if (nextIndex !== activeIndex)
+            onCurrentIndexChange?.(nextIndex);
+    }, [activeIndex, controlled, count, emblaApi, onCurrentIndexChange]);
+    useEffect(() => {
+        if (!emblaApi)
+            return undefined;
+        refresh();
+        emblaApi.on('reInit', refresh);
+        emblaApi.on('select', select);
+        return () => {
+            emblaApi.off('reInit', refresh);
+            emblaApi.off('select', select);
+        };
+    }, [emblaApi, refresh, select]);
+    useEffect(() => {
+        if (controlled || count === 0)
+            return;
+        setUncontrolledIndex(index => clampIndex(index, count));
+    }, [controlled, count]);
+    useEffect(() => {
+        if (!emblaApi || count === 0 || selectedIndex === activeIndex)
+            return;
+        emblaApi.scrollTo(activeIndex, reducedMotion);
+    }, [activeIndex, count, emblaApi, reducedMotion, selectedIndex]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (dir || !root)
+            return undefined;
+        const update = () => setInferredDir(getComputedStyle(root).direction === 'rtl' ? 'rtl' : 'ltr');
+        update();
+        const observer = new MutationObserver(update);
+        for (let node = root; node; node = node.parentElement) {
+            observer.observe(node, { attributes: true, attributeFilter: ['class', 'dir', 'style'] });
+        }
+        return () => observer.disconnect();
+    }, [dir]);
+    const pause = useCallback(() => {
+        autoplayPlugin.stop();
+        setPlaying(false);
+    }, [autoplayPlugin]);
+    const play = useCallback((explicit = false) => {
+        const blockedByHover = autoplayOptions.pauseOnHover !== false && hoveredRef.current;
+        const blockedByFocus = autoplayOptions.pauseOnFocus !== false && focusedRef.current;
+        if (!autoplayAllowed || (!explicit && (blockedByHover || blockedByFocus)))
+            return;
+        autoplayPlugin.play();
+        setPlaying(true);
+    }, [autoplayAllowed, autoplayOptions.pauseOnFocus, autoplayOptions.pauseOnHover, autoplayPlugin]);
+    useEffect(() => {
+        if (!emblaApi || !autoplayEnabled) {
+            autoplayPlugin.stop();
+            setPlaying(false);
+            return undefined;
+        }
+        const updatePlaying = () => setPlaying(autoplayPlugin.isPlaying());
+        const stopForInteraction = () => {
+            if (!stopOnInteraction)
+                return;
+            userPausedRef.current = true;
+            pause();
+        };
+        emblaApi.on('autoplay:play', updatePlaying);
+        emblaApi.on('autoplay:stop', updatePlaying);
+        emblaApi.on('pointerDown', stopForInteraction);
+        if (autoplayAllowed && !userPausedRef.current)
+            play();
+        else
+            pause();
+        return () => {
+            emblaApi.off('autoplay:play', updatePlaying);
+            emblaApi.off('autoplay:stop', updatePlaying);
+            emblaApi.off('pointerDown', stopForInteraction);
+            autoplayPlugin.stop();
+        };
+    }, [autoplayAllowed, autoplayEnabled, autoplayPlugin, emblaApi, pause, play, stopOnInteraction]);
+    const stopForControlInteraction = useCallback(() => {
+        if (!autoplayEnabled || !stopOnInteraction)
+            return;
+        userPausedRef.current = true;
+        pause();
+    }, [autoplayEnabled, pause, stopOnInteraction]);
+    const previous = useCallback(() => {
+        stopForControlInteraction();
+        emblaApi?.scrollPrev(reducedMotion);
+    }, [emblaApi, reducedMotion, stopForControlInteraction]);
+    const next = useCallback(() => {
+        stopForControlInteraction();
+        emblaApi?.scrollNext(reducedMotion);
+    }, [emblaApi, reducedMotion, stopForControlInteraction]);
+    const scrollTo = useCallback((index) => {
+        stopForControlInteraction();
+        emblaApi?.scrollTo(clampIndex(index, selectionCount), reducedMotion);
+    }, [emblaApi, reducedMotion, selectionCount, stopForControlInteraction]);
+    useImperativeHandle(forwardedRef, () => ({ root: rootRef.current, previous, next, scrollTo, play: () => play(true), pause }), [next, pause, play, previous, scrollTo]);
+    const resumeAfterTransientPause = () => {
+        const blockedByHover = autoplayOptions.pauseOnHover !== false && hoveredRef.current;
+        const blockedByFocus = autoplayOptions.pauseOnFocus !== false && focusedRef.current;
+        if (!userPausedRef.current && autoplayAllowed && !blockedByHover && !blockedByFocus)
+            play();
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.target !== event.currentTarget || disabled || count < 2)
+            return;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            resolvedDir === 'rtl' ? next() : previous();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            resolvedDir === 'rtl' ? previous() : next();
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            scrollTo(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            scrollTo(count - 1);
+        }
+    };
+    const handlePointerEnter = (event) => {
+        onPointerEnter?.(event);
+        hoveredRef.current = true;
+        if (autoplayOptions.pauseOnHover !== false)
+            pause();
+    };
+    const handlePointerLeave = (event) => {
+        onPointerLeave?.(event);
+        hoveredRef.current = false;
+        resumeAfterTransientPause();
+    };
+    const handleFocus = (event) => {
+        onFocusCapture?.(event);
+        focusedRef.current = true;
+        if (autoplayControlPointerRef.current) {
+            autoplayControlPointerRef.current = false;
+            return;
+        }
+        if (autoplayOptions.pauseOnFocus !== false)
+            pause();
+    };
+    const handleBlur = (event) => {
+        onBlurCapture?.(event);
+        if (event.currentTarget.contains(event.relatedTarget))
+            return;
+        focusedRef.current = false;
+        resumeAfterTransientPause();
+    };
+    const toggleAutoplay = () => {
+        if (playing) {
+            userPausedRef.current = true;
+            pause();
+        }
+        else {
+            userPausedRef.current = false;
+            play(true);
+        }
+    };
+    const rootStyle = {
+        ...style,
+        '--inkra-carousel-gap': `${resolvedGap}px`,
+        '--inkra-carousel-visible-base': visible.base,
+        '--inkra-carousel-visible-sm': visible.sm,
+        '--inkra-carousel-visible-md': visible.md,
+        '--inkra-carousel-visible-lg': visible.lg,
+    };
+    const slideLabel = labels?.slide ?? ((index, total) => `Slide ${index} of ${total}`);
+    const pageLabel = labels?.page ?? ((index, total) => `Go to page ${index} of ${total}`);
+    const statusLabel = labels?.status ?? ((index, total) => `Slide ${index} of ${total}`);
+    const showNavigation = controls && count > 1;
+    const showPagination = pagination && scrollSnaps.length > 1;
+    return _jsxs("div", { ...props, "aria-label": ariaLabel, "aria-roledescription": "carousel", className: ['inkra-carousel', className].filter(Boolean).join(' '), "data-autoplay": autoplayEnabled || undefined, "data-disabled": disabled || undefined, "data-playing": playing || undefined, dir: resolvedDir, onBlurCapture: handleBlur, onFocusCapture: handleFocus, onKeyDown: handleKeyDown, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, ref: rootRef, role: role, style: rootStyle, tabIndex: !disabled && count > 1 ? (tabIndex ?? 0) : tabIndex, children: [count === 0 ? _jsx("div", { className: "inkra-carousel__empty", children: emptyState ?? labels?.empty ?? 'No items' }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-carousel__viewport", ref: viewportRef, children: _jsx("div", { className: "inkra-carousel__container", children: slideItems.map((item, index) => _jsx("div", { "aria-label": slideLabel(index + 1, count), "aria-roledescription": "slide", className: "inkra-carousel__slide", "data-current": index === activeIndex || undefined, role: "group", children: item }, item.key ?? index)) }) }), (showNavigation || showPagination || autoplayEnabled) && _jsxs("div", { className: "inkra-carousel__toolbar", children: [showNavigation && _jsxs("div", { className: "inkra-carousel__navigation", children: [_jsx(Button, { "aria-label": labels?.previous ?? 'Previous slide', disabled: disabled || !canScrollPrevious, onClick: previous, size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: resolvedDir === 'rtl' ? nextPaths : previousPaths, seed: `${generatedId}-previous`, size: 20, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels?.next ?? 'Next slide', disabled: disabled || !canScrollNext, onClick: next, size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: resolvedDir === 'rtl' ? previousPaths : nextPaths, seed: `${generatedId}-next`, size: 20, sourceSize: 24 }) })] }), showPagination && _jsx("div", { "aria-label": labels?.pages ?? 'Carousel pages', className: "inkra-carousel__pagination", role: "group", children: scrollSnaps.map((_, index) => _jsx("button", { "aria-current": index === selectedIndex ? 'true' : undefined, "aria-label": pageLabel(index + 1, scrollSnaps.length), className: "inkra-carousel__page", disabled: disabled, onClick: () => scrollTo(index), type: "button", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-carousel__page-mark", radius: 6, seed: `${generatedId}-page-${index}`, variant: index === selectedIndex ? 'selection' : 'outline' }) }, index)) }), autoplayEnabled && _jsx(Button, { "aria-label": playing ? (labels?.pause ?? 'Pause autoplay') : (labels?.play ?? 'Play autoplay'), disabled: !autoplayAllowed, onClick: toggleAutoplay, onPointerDown: () => { autoplayControlPointerRef.current = true; }, size: "icon", variant: "ghost", children: _jsx(PencilIcon, { decorative: true, paths: playing ? pausePaths : playPaths, seed: `${generatedId}-autoplay`, size: 20, sourceSize: 24 }) })] })] }), count > 0 && _jsx("span", { "aria-atomic": "true", "aria-live": playing ? 'off' : 'polite', className: "inkra-carousel__status", children: statusLabel(activeIndex + 1, count) })] });
+});

package/dist/choice-grid/index.d.ts

@@ -0,0 +1,38 @@
+import type { FieldsetHTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+export interface ChoiceGridImage extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'children'> {
+    /** Choice images are decorative; the option label supplies the accessible name. */
+    alt?: '';
+}
+export type ChoiceGridColumns = 1 | 2 | 3 | 4;
+interface ChoiceGridCommonProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> {
+    name: string;
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    columns?: ChoiceGridColumns;
+    minItemWidth?: string;
+}
+export interface SingleChoiceGridProps extends ChoiceGridCommonProps {
+    type?: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface MultipleChoiceGridProps extends ChoiceGridCommonProps {
+    type: 'multiple';
+    values?: readonly string[];
+    defaultValues?: readonly string[];
+    onValuesChange?: (values: string[]) => void;
+}
+export type ChoiceGridProps = SingleChoiceGridProps | MultipleChoiceGridProps;
+export interface ChoiceGridOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'children' | 'defaultChecked' | 'name' | 'type'> {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    image?: ChoiceGridImage;
+    seed?: string | number;
+}
+export declare const ChoiceGrid: import("react").ForwardRefExoticComponent<ChoiceGridProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export declare const ChoiceGridOption: import("react").ForwardRefExoticComponent<ChoiceGridOptionProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/choice-grid/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useImperativeHandle, useRef, } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Checkbox } from '../selection/Checkbox.js';
+import { RadioGroup, RadioGroupItem } from '../selection/RadioGroup.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+function mergeIds(...values) {
+    const merged = Array.from(new Set(values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? [])));
+    return merged.length ? merged.join(' ') : undefined;
+}
+const ChoiceGridContext = createContext(null);
+function GroupMessages({ description, descriptionId, error, errorId }) {
+    return description == null && error == null ? null : (_jsxs("div", { className: "inkra-choice-grid__messages", children: [description == null ? null : (_jsx("div", { className: "inkra-choice-grid__description", id: descriptionId, children: typeof description === 'string'
+                    ? _jsx(PencilText, { seed: `${descriptionId}-text`, children: description })
+                    : description })), error == null ? null : (_jsx("div", { className: "inkra-choice-grid__error", id: errorId, children: typeof error === 'string'
+                    ? _jsx(PencilText, { seed: `${errorId}-text`, children: error })
+                    : error }))] }));
+}
+function gridStyle(style, columns, minItemWidth) {
+    return {
+        ...style,
+        '--inkra-choice-grid-columns': columns,
+        '--inkra-choice-grid-min-item': minItemWidth,
+    };
+}
+export const ChoiceGrid = forwardRef(function ChoiceGrid(props, forwardedRef) {
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, columns, description, disabled = false, error, form, label, minItemWidth = '13rem', name, style, type = 'single', ...rest } = props;
+    const generatedId = useId();
+    const descriptionId = description == null ? undefined : `inkra-choice-grid-${generatedId}-description`;
+    const errorId = error == null ? undefined : `inkra-choice-grid-${generatedId}-error`;
+    const describedBy = mergeIds(ariaDescribedBy, descriptionId, errorId);
+    const errorMessage = mergeIds(ariaErrorMessage, errorId);
+    const invalid = Boolean(error) || rest['aria-invalid'] === true || rest['aria-invalid'] === 'true';
+    const rootRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    if (type === 'single') {
+        const single = props;
+        const { defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...singleFieldsetProps } = rest;
+        return (_jsxs("div", { className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "single", style: gridStyle(style, columns, minItemWidth), children: [_jsx(ChoiceGridContext.Provider, { value: { disabled, form, mode: 'single', name }, children: _jsx(RadioGroup, { ...singleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, defaultValue: single.defaultValue, disabled: disabled, form: form, label: label, name: name, onValueChange: single.onValueChange, ref: rootRef, value: single.value, children: children }) }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
+    }
+    const multiple = props;
+    const { defaultValues: _defaultValues, onValuesChange: _onValuesChange, values: _values, ...multipleFieldsetProps } = rest;
+    const onMultipleChange = (optionValue, checked) => {
+        if (!multiple.onValuesChange)
+            return;
+        const selected = Array.from(rootRef.current?.querySelectorAll('input[type="checkbox"][data-choice-grid-value]') ?? []).filter(input => input.value === optionValue ? checked : input.checked)
+            .map(input => input.value);
+        multiple.onValuesChange(selected);
+    };
+    const context = {
+        defaultValues: multiple.defaultValues,
+        disabled,
+        form,
+        mode: 'multiple',
+        name,
+        onMultipleChange,
+        values: multiple.values,
+    };
+    return (_jsxs("fieldset", { ...multipleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "multiple", disabled: disabled, form: form, ref: rootRef, style: gridStyle(style, columns, minItemWidth), children: [label == null ? null : typeof label === 'string' ? (_jsx(PencilText, { as: "legend", className: "inkra-choice-grid__legend", seed: `inkra-choice-grid-${generatedId}-label`, children: label })) : _jsx("legend", { className: "inkra-choice-grid__legend", children: label }), _jsx(ChoiceGridContext.Provider, { value: context, children: _jsx("div", { className: "inkra-choice-grid__items", children: children }) }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
+});
+function OptionMedia({ icon, image }) {
+    if (image) {
+        return (_jsx("span", { "aria-hidden": "true", className: "inkra-choice-grid__media", "data-kind": "image", children: _jsx("img", { ...image, alt: "" }) }));
+    }
+    if (icon != null) {
+        return _jsx("span", { "aria-hidden": "true", className: "inkra-choice-grid__media", "data-kind": "icon", children: icon });
+    }
+    return null;
+}
+export const ChoiceGridOption = forwardRef(function ChoiceGridOption({ className, description, disabled = false, form, icon, id, image, label, onChange, required = false, seed, value, ...props }, ref) {
+    const context = useContext(ChoiceGridContext);
+    if (!context)
+        throw new Error('ChoiceGridOption must be rendered inside ChoiceGrid');
+    const generatedId = useId();
+    const inputId = id ?? `inkra-choice-grid-option-${generatedId}`;
+    const resolvedSeed = seed ?? inputId;
+    const itemDisabled = context.disabled || disabled;
+    const content = (_jsxs(_Fragment, { children: [_jsx(OptionMedia, { icon: icon, image: image }), _jsx("span", { className: "inkra-choice-grid__option-label", children: label })] }));
+    const control = context.mode === 'single' ? (_jsx(RadioGroupItem, { ...props, className: "inkra-choice-grid__control", description: description, disabled: itemDisabled, form: form ?? context.form, id: inputId, label: content, onChange: onChange, ref: ref, required: required, seed: resolvedSeed, value: value })) : (_jsx(Checkbox, { ...props, checked: context.values === undefined ? undefined : context.values.includes(value), className: "inkra-choice-grid__control", "data-choice-grid-value": "", defaultChecked: context.values === undefined ? context.defaultValues?.includes(value) : undefined, description: description, disabled: itemDisabled, form: form ?? context.form, id: inputId, label: content, name: context.name, onChange: (event) => {
+            onChange?.(event);
+            context.onMultipleChange?.(value, event.currentTarget.checked);
+        }, ref: ref, required: required, seed: resolvedSeed, value: value }));
+    return (_jsxs(PencilSurface, { as: "div", className: classes('inkra-choice-grid__option', className), "data-disabled": itemDisabled || undefined, radius: 8, seed: `${resolvedSeed}-paper`, variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__selection", radius: 8, seed: `${resolvedSeed}-selection`, variant: "selection" }), control, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" })] }));
+});

package/dist/color-picker/color.d.ts

@@ -0,0 +1,15 @@
+export declare const DEFAULT_COLOR_VALUE = "#4b96aaff";
+export interface ColorChannels {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+export type ColorValue = `#${string}`;
+export declare function parseColorValue(input: string): ColorChannels | null;
+export declare function formatColorValue(channels: ColorChannels): ColorValue;
+export declare function normalizeColorValue(input: string): ColorValue | null;
+export declare function colorRgbValue(input: string): `#${string}` | null;
+export declare function colorAlphaPercent(input: string): number;
+export declare function withColorAlpha(input: string, percentage: number): ColorValue | null;
+export declare function withColorRgb(input: string, rgb: string): ColorValue | null;

package/dist/color-picker/color.js

@@ -0,0 +1,55 @@
+export const DEFAULT_COLOR_VALUE = '#4b96aaff';
+const HEX_COLOR = /^#([\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+function expandHex(value) {
+    return value.length <= 4
+        ? [...value].map(character => `${character}${character}`).join('')
+        : value;
+}
+export function parseColorValue(input) {
+    const value = input.trim();
+    const match = HEX_COLOR.exec(value);
+    if (!match)
+        return null;
+    const expanded = expandHex(match[1]);
+    const opaque = expanded.length === 6;
+    return {
+        red: Number.parseInt(expanded.slice(0, 2), 16),
+        green: Number.parseInt(expanded.slice(2, 4), 16),
+        blue: Number.parseInt(expanded.slice(4, 6), 16),
+        alpha: opaque ? 255 : Number.parseInt(expanded.slice(6, 8), 16),
+    };
+}
+function channelToHex(channel) {
+    return Math.min(255, Math.max(0, Math.round(channel))).toString(16).padStart(2, '0');
+}
+export function formatColorValue(channels) {
+    return `#${channelToHex(channels.red)}${channelToHex(channels.green)}${channelToHex(channels.blue)}${channelToHex(channels.alpha)}`;
+}
+export function normalizeColorValue(input) {
+    const channels = parseColorValue(input);
+    return channels ? formatColorValue(channels) : null;
+}
+export function colorRgbValue(input) {
+    const channels = parseColorValue(input);
+    return channels ? `#${channelToHex(channels.red)}${channelToHex(channels.green)}${channelToHex(channels.blue)}` : null;
+}
+export function colorAlphaPercent(input) {
+    const channels = parseColorValue(input) ?? parseColorValue(DEFAULT_COLOR_VALUE);
+    return Math.round(channels.alpha / 255 * 100);
+}
+export function withColorAlpha(input, percentage) {
+    const channels = parseColorValue(input);
+    if (!channels)
+        return null;
+    return formatColorValue({
+        ...channels,
+        alpha: Math.round(Math.min(100, Math.max(0, percentage)) / 100 * 255),
+    });
+}
+export function withColorRgb(input, rgb) {
+    const current = parseColorValue(input);
+    const next = parseColorValue(rgb);
+    if (!current || !next)
+        return null;
+    return formatColorValue({ ...next, alpha: current.alpha });
+}