@inkra/react 0.0.0-stage → 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/breadcrumb/index.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type ButtonLinkProps } from '../Button.js';
+export type BreadcrumbProps = ComponentPropsWithoutRef<'nav'>;
+export type BreadcrumbListProps = ComponentPropsWithoutRef<'ol'>;
+export type BreadcrumbItemProps = ComponentPropsWithoutRef<'li'>;
+export type BreadcrumbLinkProps = ButtonLinkProps;
+export type BreadcrumbPageProps = ComponentPropsWithoutRef<'span'>;
+export type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<'li'>;
+export declare const Breadcrumb: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/breadcrumb/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ButtonLink } from '../Button.js';
+import { PencilText } from '../PencilText.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
+const Root = forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes('inkra-breadcrumb', className) });
+});
+const List = forwardRef(function BreadcrumbList({ className, ...props }, ref) {
+    return _jsx("ol", { ...props, ref: ref, className: classes('inkra-breadcrumb__list', className) });
+});
+const Item = forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+    return _jsx("li", { ...props, ref: ref, className: classes('inkra-breadcrumb__item', className) });
+});
+const Link = forwardRef(function BreadcrumbLink({ className, variant = 'ghost', ...props }, ref) {
+    return _jsx(ButtonLink, { ...props, ref: ref, variant: variant, className: classes('inkra-breadcrumb__link', className) });
+});
+const Page = forwardRef(function BreadcrumbPage({ className, children, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, "aria-current": "page", className: classes('inkra-breadcrumb__page', className), children: copy(children) });
+});
+const Separator = forwardRef(function BreadcrumbSeparator({ className, children = '/', ...props }, ref) {
+    return _jsx("li", { ...props, ref: ref, role: "presentation", "aria-hidden": "true", className: classes('inkra-breadcrumb__separator', className), children: copy(children) });
+});
+export const Breadcrumb = { Root, List, Item, Link, Page, Separator };

package/dist/calendar/index.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type DayPickerProps } from 'react-day-picker';
+export interface CalendarEvent {
+    date: Date;
+    label: string;
+    id?: string;
+    color?: string;
+    description?: string;
+}
+export type CalendarProps = DayPickerProps & {
+    events?: readonly CalendarEvent[];
+    eventIndicator?: 'count' | 'dot' | 'none';
+    appearance?: 'itinerary' | 'picker';
+    onEventSelect?: (event: CalendarEvent) => void;
+    renderDayAccessory?: (date: Date) => ReactNode;
+    displayRange?: {
+        from: Date;
+        to: Date;
+    };
+};
+export declare function Calendar({ events, eventIndicator, appearance, onEventSelect, renderDayAccessory, displayRange, className, components, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;

package/dist/calendar/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { CaptionLabel, Day, DayButton, DayPicker, Weekday } from 'react-day-picker';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const EventContext = createContext({ events: [], indicator: 'count', appearance: 'itinerary' });
+const matches = (event, date) => event.date.getFullYear() === date.getFullYear()
+    && event.date.getMonth() === date.getMonth() && event.date.getDate() === date.getDate();
+function CalendarCaption({ children, ...props }) {
+    return _jsx(CaptionLabel, { ...props, children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
+}
+function CalendarWeekday({ children, ...props }) {
+    return _jsx(Weekday, { ...props, children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
+}
+function CalendarMonthButton({ disabled, ...props }) {
+    return _jsx(Button, { ...props, size: "icon", variant: "ghost", disabled: disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true' });
+}
+// Lucide chevrons retain their geometry and use the shared pencil renderer.
+const chevrons = { left: 'm15 18-6-6 6-6', right: 'm9 18 6-6-6-6', up: 'm18 15-6-6-6 6', down: 'm6 9 6 6 6-6' };
+function CalendarChevron({ className, orientation = 'left', size = 28 }) {
+    return _jsx(PencilIcon, { className: className, paths: [{ d: chevrons[orientation] }], sourceSize: 24, size: size });
+}
+// The trip calendar uses a full-cell date target with sibling event buttons.
+function CalendarCell({ children, day, modifiers, ...props }) {
+    const { events, appearance, onEventSelect, renderDayAccessory } = useContext(EventContext);
+    if (appearance === 'picker')
+        return _jsx(Day, { ...props, day: day, modifiers: modifiers, children: children });
+    const entries = events.filter(event => matches(event, day.date));
+    return _jsx(Day, { ...props, day: day, modifiers: modifiers, children: _jsxs("div", { className: "inkra-calendar__day-card", children: [_jsx(PencilSurface, { variant: modifiers.selected ? 'action' : 'quiet', radius: 8, className: "inkra-calendar__day-paper", "aria-hidden": "true", seed: `day-${day.date.toISOString()}` }), children, renderDayAccessory && _jsx("div", { className: "inkra-calendar__accessory", children: renderDayAccessory(day.date) }), _jsx("div", { className: "inkra-calendar__events", children: entries.map((event, index) => _jsx(PencilSurface, { as: "button", variant: "quiet", radius: 3, className: "inkra-calendar__event-card", disabled: modifiers.disabled || !onEventSelect, style: event.color ? { '--inkra-accent-soft': event.color } : undefined, "aria-label": `${event.label}${event.description ? `, ${event.description}` : ''}`, title: event.description ?? event.label, onClick: click => { click.stopPropagation(); onEventSelect?.(event); }, children: _jsx(PencilText, { ellipsis: true, children: event.label }) }, event.id ?? index)) })] }) });
+}
+function CalendarDay({ children, modifiers, day, ...props }) {
+    const { events: allEvents, indicator, appearance } = useContext(EventContext);
+    const events = allEvents.filter(event => matches(event, day.date));
+    return _jsxs(DayButton, { ...props, day: day, modifiers: modifiers, "aria-label": [props['aria-label'], ...events.map(event => event.label)].filter(Boolean).join(', '), children: [modifiers.selected && appearance === 'picker' && _jsx(PencilSurface, { variant: "selection", className: "inkra-calendar__selection", "aria-hidden": "true" }), _jsx(PencilText, { children: String(children) }), appearance === 'picker' && events.length > 0 && indicator !== 'none' && _jsx("span", { className: "inkra-calendar__event", "data-indicator": indicator, "aria-hidden": "true", children: indicator === 'count' ? events.length : '\u2022' })] });
+}
+export function Calendar({ events = [], eventIndicator = 'count', appearance = 'itinerary', onEventSelect, renderDayAccessory, displayRange, className, components, showOutsideDays = true, ...props }) {
+    const hidden = displayRange ? [...(Array.isArray(props.hidden) ? props.hidden : props.hidden ? [props.hidden] : []), { before: displayRange.from }, { after: displayRange.to }] : props.hidden;
+    return _jsx(EventContext.Provider, { value: { events, indicator: eventIndicator, appearance, onEventSelect, renderDayAccessory }, children: _jsx("div", { className: "inkra-calendar-scroll", "data-appearance": appearance, children: _jsx(DayPicker, { ...props, hidden: hidden, "data-appearance": appearance, "data-week-numbers": props.showWeekNumber || undefined, showOutsideDays: showOutsideDays, className: ['inkra-calendar', className].filter(Boolean).join(' '), components: { CaptionLabel: CalendarCaption, Weekday: CalendarWeekday, Chevron: CalendarChevron, PreviousMonthButton: CalendarMonthButton, NextMonthButton: CalendarMonthButton, Day: CalendarCell, DayButton: CalendarDay, ...components } }) }) });
+}

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 {};