@inkra/react 0.3.0 → 0.4.3

package/dist/audio-player/index.js

@@ -4,7 +4,7 @@ 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 { SelectRoot, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectItem, SelectItemText, SelectItemIndicator } from '../select/Select.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' },
@@ -22,7 +22,7 @@ const mutePaths = [
     { 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.',
+    controls: 'Audio controls', audio: 'Audio', 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; }
@@ -32,16 +32,28 @@ export const AudioPlayer = forwardRef(function AudioPlayer({ src, preload = 'met
     const id = useId();
     const audioRef = useRef(null);
     const rootRef = useRef(null);
+    const sourceVersionRef = useRef(0);
+    const requestedSourceRef = useRef(src);
+    requestedSourceRef.current = src;
     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 controlledRef = useRef({ volume, muted, playbackRate });
+    controlledRef.current = { volume, muted, playbackRate };
+    const callbacksRef = useRef({ onVolumeChange, onMutedChange, onPlaybackRateChange, onTimeChange, onStateChange, onError });
+    callbacksRef.current = { onVolumeChange, onMutedChange, onPlaybackRateChange, onTimeChange, onStateChange, onError };
     const mergedLabels = { ...DEFAULT_LABELS, ...labels };
     const update = useCallback((patch) => {
-        const next = { ...stateRef.current, ...patch };
-        stateRef.current = next;
-        setState(next);
-        onStateChange?.(next);
-    }, [onStateChange]);
+        const current = stateRef.current;
+        const changed = Object.keys(patch).some(key => !Object.is(current[key], patch[key]));
+        const next = changed ? { ...current, ...patch } : current;
+        if (changed) {
+            stateRef.current = next;
+            setState(next);
+        }
+        // Native events remain observable without rendering identical media snapshots.
+        callbacksRef.current.onStateChange?.(next);
+    }, []);
     const sync = useCallback(() => {
         const audio = audioRef.current;
         if (!audio)
@@ -49,14 +61,42 @@ export const AudioPlayer = forwardRef(function AudioPlayer({ src, preload = 'met
         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 applyControlledSettings = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const controlled = controlledRef.current;
+        if (controlled.volume !== undefined) {
+            const value = clamp(controlled.volume, 0, 1);
+            if (audio.volume !== value)
+                audio.volume = value;
+        }
+        if (controlled.muted !== undefined && audio.muted !== controlled.muted)
+            audio.muted = controlled.muted;
+        if (controlled.playbackRate !== undefined) {
+            const value = clamp(controlled.playbackRate, 0.25, 4);
+            if (audio.defaultPlaybackRate !== value)
+                audio.defaultPlaybackRate = value;
+            if (audio.playbackRate !== value)
+                audio.playbackRate = value;
+        }
+    }, []);
+    const play = useCallback(async () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const sourceVersion = sourceVersionRef.current;
+        try {
+            await audio.play();
+        }
+        catch (error) {
+            // Loading another source or unmounting can reject an earlier play request.
+            if (audioRef.current !== audio || sourceVersionRef.current !== sourceVersion)
+                return;
+            update({ status: 'blocked' });
+            callbacksRef.current.onError?.(error instanceof DOMException ? error : null);
+        }
+    }, [update]);
     const pause = useCallback(() => { audioRef.current?.pause(); }, []);
     const togglePlay = useCallback(async () => { const audio = audioRef.current; if (!audio)
         return; if (audio.paused)
@@ -64,38 +104,93 @@ export const AudioPlayer = forwardRef(function AudioPlayer({ src, preload = 'met
     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]);
+        return; audio.currentTime = clamp(time, 0, Number.isFinite(audio.duration) ? audio.duration : Math.max(0, time)); sync(); callbacksRef.current.onTimeChange?.(audio.currentTime); }, [sync]);
+    const setVolume = useCallback((next) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const value = clamp(next, 0, 1);
+        const current = controlledRef.current.volume ?? stateRef.current.volume;
+        if (value === current)
+            return;
+        if (controlledRef.current.volume === undefined) {
+            audio.volume = value;
+            sync();
+        }
+        callbacksRef.current.onVolumeChange?.(value);
+    }, [sync]);
+    const setMuted = useCallback((next) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const current = controlledRef.current.muted ?? stateRef.current.muted;
+        if (next === current)
+            return;
+        if (controlledRef.current.muted === undefined) {
+            audio.muted = next;
+            sync();
+        }
+        callbacksRef.current.onMutedChange?.(next);
+    }, [sync]);
+    const setPlaybackRate = useCallback((next) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const value = clamp(next, 0.25, 4);
+        const current = controlledRef.current.playbackRate ?? stateRef.current.playbackRate;
+        if (value === current)
+            return;
+        if (controlledRef.current.playbackRate === undefined) {
+            audio.defaultPlaybackRate = value;
+            audio.playbackRate = value;
+            sync();
+        }
+        callbacksRef.current.onPlaybackRateChange?.(value);
+    }, [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(() => {
+        sourceVersionRef.current += 1;
         const audio = audioRef.current;
-        if (!audio || !src)
+        if (!audio)
             return;
         audio.pause();
-        audio.currentTime = 0;
-        update({ status: 'loading', currentTime: 0, duration: 0, buffered: 0, canPlay: false, error: null });
+        try {
+            audio.currentTime = 0;
+        }
+        catch { /* Empty media has no seekable timeline. */ }
+        if (!src)
+            audio.removeAttribute('src');
+        update({ status: src ? 'loading' : 'idle', currentTime: 0, duration: 0, buffered: 0, canPlay: false, error: null });
+        const current = stateRef.current;
+        audio.volume = clamp(controlledRef.current.volume ?? current.volume, 0, 1);
+        audio.muted = controlledRef.current.muted ?? current.muted;
+        const rate = clamp(controlledRef.current.playbackRate ?? current.playbackRate, 0.25, 4);
+        audio.defaultPlaybackRate = rate;
+        audio.playbackRate = rate;
         audio.load();
     }, [src, update]);
+    useEffect(() => { applyControlledSettings(); sync(); }, [applyControlledSettings, muted, playbackRate, sync, volume]);
     useEffect(() => {
         const audio = audioRef.current;
         if (!audio)
             return;
+        const hasSource = () => Boolean(requestedSourceRef.current || audio.getAttribute('src'));
         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' }),
+            loadstart: () => update({ status: hasSource() ? 'loading' : 'idle', error: null, canPlay: false }), loadedmetadata: () => { applyControlledSettings(); sync(); update({ status: 'ready' }); }, canplay: () => { sync(); update({ canPlay: true, status: audio.paused ? 'paused' : 'playing' }); }, play: () => update({ status: 'playing' }), pause: () => update({ status: hasSource() ? (audio.ended ? 'ended' : 'paused') : 'idle' }), playing: () => update({ status: 'playing', canPlay: true }), waiting: () => update({ status: 'buffering' }), progress: sync, timeupdate: () => { sync(); callbacksRef.current.onTimeChange?.(audio.currentTime); }, ratechange: () => { const previous = stateRef.current.playbackRate; applyControlledSettings(); sync(); if (controlledRef.current.playbackRate === undefined && previous !== audio.playbackRate)
+                callbacksRef.current.onPlaybackRateChange?.(audio.playbackRate); }, volumechange: () => { const previous = stateRef.current; applyControlledSettings(); sync(); if (controlledRef.current.volume === undefined && previous.volume !== audio.volume)
+                callbacksRef.current.onVolumeChange?.(audio.volume); if (controlledRef.current.muted === undefined && previous.muted !== audio.muted)
+                callbacksRef.current.onMutedChange?.(audio.muted); }, ended: () => update({ status: 'ended', currentTime: audio.duration || audio.currentTime }), error: () => { if (!hasSource()) {
+                update({ status: 'idle', error: null, canPlay: false });
+                return;
+            } const error = audio.error; update({ status: 'error', error }); callbacksRef.current.onError?.(error); }, abort: () => update({ status: 'idle' }), emptied: () => { if (!hasSource())
+                update({ status: 'idle', currentTime: 0, duration: 0, buffered: 0, canPlay: false, error: null }); },
         };
         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]);
+    }, [applyControlledSettings, sync, 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] });
+    const defaultControls = _jsxs("div", { className: "inkra-audio-player__controls", role: "group", "aria-label": mergedLabels.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(SelectRoot, { value: String(state.playbackRate), onValueChange: value => setPlaybackRate(Number(value)), children: [_jsx(SelectTrigger, { "data-audio-player-control": true, "aria-label": mergedLabels.rate, fullWidth: false, size: "sm", children: _jsx(SelectValue, {}) }), _jsx(SelectPortal, { children: _jsx(SelectContent, { position: "popper", sideOffset: 4, children: _jsx(SelectViewport, { children: rates.map(rate => _jsxs(SelectItem, { value: String(rate), children: [_jsx(SelectItemText, { children: `${rate}x` }), _jsx(SelectItemIndicator, {})] }, 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'] ?? mergedLabels.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/calendar/index.d.ts

@@ -17,5 +17,8 @@ export type CalendarProps = DayPickerProps & {
         from: Date;
         to: Date;
     };
+    /** Opt-in itinerary summary; every event can be revealed for its day. */
+    maxEventsPerDay?: number;
+    showDayEventsLabel?: (date: Date, total: number, expanded: boolean) => string;
 };
-export declare function Calendar({ events, eventIndicator, appearance, onEventSelect, renderDayAccessory, displayRange, className, components, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;
+export declare function Calendar({ events, eventIndicator, appearance, onEventSelect, renderDayAccessory, displayRange, maxEventsPerDay, showDayEventsLabel, className, components, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;

package/dist/calendar/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo, useState } 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();
+const emptyEvents = [];
+const EventContext = createContext({ eventsByDay: new Map(), indicator: 'count', appearance: 'itinerary' });
+// Match local calendar dates, not UTC dates, and retain input order within each day.
+const dayKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 function CalendarCaption({ children, ...props }) {
     return _jsx(CaptionLabel, { ...props, children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
 }
@@ -24,18 +25,36 @@ function CalendarChevron({ className, orientation = 'left', size = 28 }) {
 }
 // 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);
+    const { eventsByDay, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, showDayEventsLabel } = useContext(EventContext);
+    const [expandedDay, setExpandedDay] = useState();
     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)) })] }) });
+    const entries = eventsByDay.get(dayKey(day.date)) ?? emptyEvents;
+    const limit = maxEventsPerDay !== undefined && Number.isFinite(maxEventsPerDay) ? Math.max(0, Math.floor(maxEventsPerDay)) : entries.length;
+    const expanded = expandedDay === dayKey(day.date);
+    const shown = expanded || limit >= entries.length ? entries : entries.slice(0, limit);
+    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) }), _jsxs("div", { className: "inkra-calendar__events", children: [shown.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)), entries.length > limit && _jsx(Button, { className: "inkra-calendar__events-toggle", size: "sm", variant: "ghost", "aria-expanded": expanded, onClick: click => { click.stopPropagation(); setExpandedDay(expanded ? undefined : dayKey(day.date)); }, children: showDayEventsLabel?.(day.date, entries.length, expanded) ?? (expanded ? 'Show fewer events' : `Show all ${entries.length} events`) })] })] }) });
 }
 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' })] });
+    const { eventsByDay, indicator, appearance, maxEventsPerDay, showDayEventsLabel } = useContext(EventContext);
+    const events = eventsByDay.get(dayKey(day.date)) ?? emptyEvents;
+    return _jsxs(DayButton, { ...props, day: day, modifiers: modifiers, "aria-label": [props['aria-label'], ...(maxEventsPerDay !== undefined && Number.isFinite(maxEventsPerDay) && events.length > Math.max(0, Math.floor(maxEventsPerDay))
+                ? [showDayEventsLabel?.(day.date, events.length, false) ?? `${events.length} events`] : 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 }) {
+export function Calendar({ events = emptyEvents, eventIndicator = 'count', appearance = 'itinerary', onEventSelect, renderDayAccessory, displayRange, maxEventsPerDay, showDayEventsLabel, className, components, showOutsideDays = true, ...props }) {
+    const eventsByDay = useMemo(() => {
+        const index = new Map();
+        for (const event of events) {
+            const key = dayKey(event.date);
+            const entries = index.get(key);
+            if (entries)
+                entries.push(event);
+            else
+                index.set(key, [event]);
+        }
+        return index;
+    }, [events]);
+    const context = useMemo(() => ({ eventsByDay, indicator: eventIndicator, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, showDayEventsLabel }), [eventsByDay, eventIndicator, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, showDayEventsLabel]);
     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 } }) }) });
+    return _jsx(EventContext.Provider, { value: context, children: _jsx("div", { className: "inkra-calendar-scroll", "data-appearance": appearance, "data-event-summary": maxEventsPerDay !== undefined && Number.isFinite(maxEventsPerDay) || undefined, 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.js

@@ -84,18 +84,25 @@ export const Carousel = forwardRef(function Carousel({ 'aria-label': ariaLabel =
         stopOnMouseEnter: false,
     }), [autoplayActive, autoplayOptions.delay, stopOnInteraction]);
     const plugins = useMemo(() => autoplayActive ? [autoplayPlugin] : [], [autoplayActive, autoplayPlugin]);
-    const [viewportRef, emblaApi] = useEmblaCarousel({
-        active: !disabled && count > 0,
+    // Ordinary selection changes use scrollTo, not an engine rebuild. When real
+    // options/plugins change, seed their new engine from the latest selection.
+    const activeIndexRef = useRef(activeIndex);
+    activeIndexRef.current = activeIndex;
+    const engineActive = !disabled && count > 0;
+    const engineLoop = loop && count > 1;
+    const engineOptions = useMemo(() => ({
+        active: engineActive,
         align,
         containScroll: 'trimSnaps',
         direction: resolvedDir,
         dragFree,
-        loop: loop && count > 1,
+        loop: engineLoop,
         slidesToScroll: 1,
-        startIndex: initialIndex,
+        startIndex: activeIndexRef.current,
         watchResize: true,
         watchSlides: true,
-    }, plugins);
+    }), [align, dragFree, engineActive, engineLoop, plugins, resolvedDir]);
+    const [viewportRef, emblaApi] = useEmblaCarousel(engineOptions, plugins);
     const refresh = useCallback(() => {
         if (!emblaApi)
             return;
@@ -286,5 +293,5 @@ export const Carousel = forwardRef(function Carousel({ 'aria-label': ariaLabel =
     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) })] });
+    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: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-carousel__focus-ring", radius: 8, seed: `${generatedId}-focus`, variant: "outline" }), 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) => _jsxs("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' }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-carousel__page-focus", radius: 6, seed: `${generatedId}-page-${index}-focus`, variant: "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

@@ -11,6 +11,11 @@ interface ChoiceGridCommonProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSet
     error?: ReactNode;
     columns?: ChoiceGridColumns;
     minItemWidth?: string;
+    /** Opt-in paging for controlled, direct non-required ChoiceGridOption children. */
+    pageSize?: number;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    pageLabel?: (page: number, pages: number) => ReactNode;
 }
 export interface SingleChoiceGridProps extends ChoiceGridCommonProps {
     type?: 'single';
@@ -33,6 +38,6 @@ export interface ChoiceGridOptionProps extends Omit<InputHTMLAttributes<HTMLInpu
     image?: ChoiceGridImage;
     seed?: string | number;
 }
-export declare const ChoiceGrid: import("react").ForwardRefExoticComponent<ChoiceGridProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export declare const ChoiceGrid: import("react").NamedExoticComponent<ChoiceGridProps & import("react").RefAttributes<HTMLFieldSetElement>>;
 export declare const ChoiceGridOption: import("react").ForwardRefExoticComponent<ChoiceGridOptionProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/choice-grid/index.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useId, useImperativeHandle, useRef, } from 'react';
+import { Children, createContext, forwardRef, memo, isValidElement, useContext, useCallback, useMemo, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
 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(' ');
+const noPagedOptions = [];
 function mergeIds(...values) {
     const merged = Array.from(new Set(values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? [])));
     return merged.length ? merged.join(' ') : undefined;
@@ -24,8 +26,8 @@ function gridStyle(style, columns, minItemWidth) {
         '--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;
+export const ChoiceGrid = memo(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, pageSize, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', pageLabel = (page, pages) => `${page} / ${pages}`, 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`;
@@ -34,31 +36,50 @@ export const ChoiceGrid = forwardRef(function ChoiceGrid(props, forwardedRef) {
     const invalid = Boolean(error) || rest['aria-invalid'] === true || rest['aria-invalid'] === 'true';
     const rootRef = useRef(null);
     useImperativeHandle(forwardedRef, () => rootRef.current);
+    const multipleValues = props.type === 'multiple' ? props.values : undefined;
+    const multipleDefaults = props.type === 'multiple' ? props.defaultValues : undefined;
+    const onValuesChange = props.type === 'multiple' ? props.onValuesChange : undefined;
+    const values = useMemo(() => multipleValues === undefined ? undefined : new Set(multipleValues), [multipleValues]);
+    const defaultValues = useMemo(() => multipleDefaults === undefined ? undefined : new Set(multipleDefaults), [multipleDefaults]);
+    const [page, setPage] = useState(0);
+    const directOptions = useMemo(() => pageSize === undefined ? noPagedOptions : Children.toArray(children), [children, pageSize]);
+    const controlled = props.type === 'multiple' ? props.values !== undefined : props.value !== undefined;
+    const paged = controlled && pageSize !== undefined && Number.isFinite(pageSize) && directOptions.length > 0
+        && directOptions.every(child => isValidElement(child) && child.type === ChoiceGridOption && !child.props.required);
+    const pageLength = paged ? Math.max(1, Math.floor(pageSize)) : 1;
+    const pageCount = paged ? Math.ceil(directOptions.length / pageLength) : 0;
+    const currentPage = Math.min(page, Math.max(0, pageCount - 1));
+    const pageChildren = paged ? directOptions.map((child, index) => {
+        const option = child;
+        if (index >= currentPage * pageLength && index < (currentPage + 1) * pageLength)
+            return child;
+        const selected = props.type === 'multiple' ? values?.has(option.props.value) : props.value === option.props.value;
+        return selected ? _jsx("input", { type: "hidden", name: name, value: option.props.value, disabled: disabled || option.props.disabled, form: option.props.form ?? form }, option.key) : null;
+    }) : children;
+    const pageControls = paged ? _jsxs("nav", { "aria-label": typeof label === 'string' ? label : undefined, children: [_jsx(Button, { size: "sm", variant: "ghost", "aria-label": previousPageLabel, disabled: disabled || currentPage === 0, onClick: () => setPage(currentPage - 1), children: previousPageLabel }), _jsx("span", { "aria-live": "polite", children: pageLabel(currentPage + 1, pageCount) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": nextPageLabel, disabled: disabled || currentPage >= pageCount - 1, onClick: () => setPage(currentPage + 1), children: nextPageLabel })] }) : null;
+    const pagingValues = paged ? values : undefined;
+    const onMultipleChange = useCallback((optionValue, checked) => {
+        if (!onValuesChange)
+            return;
+        if (paged) {
+            onValuesChange(directOptions.filter(option => option.props.value === optionValue ? checked : pagingValues?.has(option.props.value)).map(option => option.props.value));
+            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);
+        onValuesChange(selected);
+    }, [onValuesChange, paged, directOptions, pagingValues]);
+    const context = useMemo(() => ({
+        defaultValues, disabled, form, mode: type, name, onMultipleChange, values,
+    }), [defaultValues, disabled, form, type, name, onMultipleChange, values]);
     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 })] }));
+        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: [_jsxs(ChoiceGridContext.Provider, { value: context, 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: pageChildren }), pageControls] }), _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 })] }));
-});
+    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 }), _jsxs(ChoiceGridContext.Provider, { value: context, children: [_jsx("div", { className: "inkra-choice-grid__items", children: pageChildren }), pageControls] }), _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: "" }) }));
@@ -68,18 +89,25 @@ function OptionMedia({ icon, image }) {
     }
     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');
+// Resolve context in a small adapter. A membership change must not rebuild the
+// paper, text and controls of every option whose own checked state is unchanged.
+const ChoiceGridOptionView = memo(function ChoiceGridOptionView({ className, description, disabled = false, form, icon, id, image, label, mode, inputRef, groupName, multipleChecked, multipleDefaultChecked, onMultipleChange, onChange, required = false, seed, value, ...props }) {
     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) => {
+    const itemDisabled = disabled;
+    const content = (_jsxs(_Fragment, { children: [_jsx(OptionMedia, { icon: icon, image: image }), _jsx("span", { className: "inkra-choice-grid__option-label", children: typeof label === 'string'
+                    ? _jsx(PencilText, { seed: `${resolvedSeed}-label`, children: label })
+                    : label })] }));
+    const control = mode === 'single' ? (_jsx(RadioGroupItem, { ...props, className: "inkra-choice-grid__control", description: description, disabled: itemDisabled, form: form, id: inputId, label: content, onChange: onChange, ref: inputRef, required: required, seed: resolvedSeed, value: value })) : (_jsx(Checkbox, { ...props, checked: multipleChecked, className: "inkra-choice-grid__control", "data-choice-grid-value": "", defaultChecked: multipleDefaultChecked, description: description, disabled: itemDisabled, form: form, id: inputId, label: content, name: groupName, 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" })] }));
+            onMultipleChange?.(value, event.currentTarget.checked);
+        }, ref: inputRef, 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" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__focus", radius: 8, seed: `${resolvedSeed}-focus`, variant: "outline" }), control, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" })] }));
+});
+export const ChoiceGridOption = forwardRef(function ChoiceGridOption(props, ref) {
+    const context = useContext(ChoiceGridContext);
+    if (!context)
+        throw new Error('ChoiceGridOption must be rendered inside ChoiceGrid');
+    return _jsx(ChoiceGridOptionView, { ...props, disabled: context.disabled || props.disabled, form: props.form ?? context.form, groupName: context.name, mode: context.mode, multipleChecked: context.values === undefined ? undefined : context.values.has(props.value), multipleDefaultChecked: context.values === undefined ? context.defaultValues?.has(props.value) : undefined, onMultipleChange: context.onMultipleChange, inputRef: ref });
 });

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { ColorGradient } from './gradient.js';
+import type { ColorValue } from './color.js';
+export interface ColorGradientLabels {
+    type?: string;
+    solid?: string;
+    linear?: string;
+    radial?: string;
+    conic?: string;
+    preview?: string;
+    stops?: string;
+    stop?: string;
+    stopColor?: string;
+    addStop?: string;
+    removeStop?: string;
+    reverse?: string;
+    position?: string;
+    angle?: string;
+    centerX?: string;
+    centerY?: string;
+    shape?: string;
+    circle?: string;
+    ellipse?: string;
+    extent?: string;
+    closestSide?: string;
+    closestCorner?: string;
+    farthestSide?: string;
+    farthestCorner?: string;
+    repeating?: string;
+}
+export declare const defaultGradientLabels: Required<ColorGradientLabels>;
+export declare function GradientEditor({ value, disabled, maxStops, labels, onChange, renderColorEditor }: {
+    value: ColorGradient;
+    disabled: boolean;
+    maxStops: number;
+    labels: Required<ColorGradientLabels>;
+    onChange: (value: ColorGradient, source: 'stop' | 'geometry') => void;
+    renderColorEditor: (value: ColorValue, onChange: (value: ColorValue) => void) => ReactNode;
+}): import("react").JSX.Element;