@inkra/react 0.3.0 → 0.5.0

package/dist/alert-dialog/index.js

@@ -43,7 +43,7 @@ export const AlertDialogContent = forwardRef(function AlertDialogContent({ child
     const contentRef = useRef(null);
     const id = useId();
     props = usePortalThemeProps(props);
-    return (_jsx(DialogPrimitive.Content, { ...props, role: "alertdialog", "aria-busy": context?.pending || undefined, className: classes('inkra-alert-dialog__content', className), "data-pending": context?.pending || undefined, ref: node => {
+    return (_jsxs(DialogPrimitive.Content, { ...props, role: "alertdialog", "aria-busy": context?.pending || undefined, className: classes('inkra-alert-dialog__content', className), "data-pending": context?.pending || undefined, ref: node => {
             contentRef.current = node;
             assignRef(forwardedRef, node);
         }, onEscapeKeyDown: event => {
@@ -61,8 +61,18 @@ export const AlertDialogContent = forwardRef(function AlertDialogContent({ child
             if (event.defaultPrevented)
                 return;
             event.preventDefault();
-            queueMicrotask(() => (context?.cancelRef.current ?? contentRef.current)?.focus());
-        }, children: _jsx(PencilSurface, { className: "inkra-alert-dialog__surface", radius: 8, seed: seed ?? `inkra-alert-dialog-${id}`, variant: "paper", children: _jsx("div", { className: "inkra-alert-dialog__layout", children: children }) }) }));
+            queueMicrotask(() => {
+                const cancel = context?.cancelRef.current;
+                const content = contentRef.current;
+                const ownerDocument = content?.ownerDocument;
+                if (cancel && !cancel.disabled && cancel.isConnected)
+                    cancel.focus({ preventScroll: true });
+                if (ownerDocument?.activeElement === cancel)
+                    return;
+                if (content?.isConnected)
+                    content.focus({ preventScroll: true });
+            });
+        }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-alert-dialog__focus-ring", radius: 8, seed: `${seed ?? `inkra-alert-dialog-${id}`}-focus`, variant: "outline" }), _jsx(PencilSurface, { className: "inkra-alert-dialog__surface", radius: 8, seed: seed ?? `inkra-alert-dialog-${id}`, variant: "paper", children: _jsx("div", { className: "inkra-alert-dialog__layout", children: children }) })] }));
 });
 export const AlertDialogTitle = forwardRef(function AlertDialogTitle({ children, className, seed, ...props }, ref) {
     const id = useId();
@@ -95,7 +105,7 @@ export const AlertDialogAction = forwardRef(function AlertDialogAction({ closeOn
     const button = (_jsx(Button, { ...props, "aria-busy": pending || undefined, disabled: disabled || pending, loading: loading || pending, ref: ref, type: "button", variant: variant }));
     return closeOnAction ? _jsx(DialogPrimitive.Close, { asChild: true, children: button }) : button;
 });
-export const AlertDialog = Object.freeze({
+export const AlertDialog = /* @__PURE__ */ Object.freeze({
     Root: AlertDialogRoot,
     Trigger: AlertDialogTrigger,
     Portal: AlertDialogPortal,

package/dist/audio-player/index.d.ts

@@ -24,6 +24,8 @@ export interface AudioPlayerControls {
     focus: () => void;
 }
 export interface AudioPlayerLabels {
+    controls?: string;
+    audio?: string;
     play?: string;
     pause?: string;
     mute?: string;

package/dist/audio-player/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 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 { 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' },
@@ -21,27 +22,40 @@ const mutePaths = [
     { 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 DEFAULT_LABELS = (t) => ({
+    controls: t('audio.controls'), audio: t('audio.label'), play: t('audio.play'), pause: t('audio.pause'), mute: t('audio.mute'), unmute: t('audio.unmute'), seek: t('audio.seek'), volume: t('audio.volume'), rate: t('audio.rate'), loading: t('audio.loading'), blocked: t('audio.blocked'), error: t('audio.error'),
+});
 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 { t } = useInkraLocale();
     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 mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    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(t), ...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 +63,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 +106,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/breadcrumb/index.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 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) {
+const Root = forwardRef(function BreadcrumbRoot(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, 'aria-label': label = t('breadcrumb.label'), ...props } = inkraProps;
     return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes('inkra-breadcrumb', className) });
 });
 const List = forwardRef(function BreadcrumbList({ className, ...props }, ref) {

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,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { useInkraLocale, resolveInkraLocale } from '../i18n/index.js';
+import { calendarLocales } from './locales.js';
+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 +27,40 @@ 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 { t } = useInkraLocale();
+    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 ? t('agenda.fewer') : t('agenda.all', { count: entries.length })) })] })] }) });
 }
 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 { t } = useInkraLocale();
+    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) ?? t('agenda.count', { count: events.length })] : 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 { locale, t } = useInkraLocale(props.locale?.code);
+    const eventSummary = useMemo(() => showDayEventsLabel ?? ((_date, total, expanded) => t(expanded ? 'agenda.fewer' : 'agenda.all', { count: total })), [showDayEventsLabel, t]);
+    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: eventSummary }), [eventsByDay, eventIndicator, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, eventSummary]);
     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, locale: props.locale ?? calendarLocales[resolveInkraLocale(locale)], labels: { labelPrevious: () => t('datePicker.previous'), labelNext: () => t('datePicker.next'), ...props.labels }, 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/calendar/locales.d.ts

@@ -0,0 +1,7 @@
+export declare const calendarLocales: {
+    en: import("react-day-picker/locale").DayPickerLocale;
+    'zh-CN': import("react-day-picker/locale").DayPickerLocale;
+    ja: import("react-day-picker/locale").DayPickerLocale;
+    ko: import("react-day-picker/locale").DayPickerLocale;
+    fr: import("react-day-picker/locale").DayPickerLocale;
+};

package/dist/calendar/locales.js

@@ -0,0 +1,2 @@
+import { enUS, zhCN, ja, ko, fr } from 'react-day-picker/locale';
+export const calendarLocales = { en: enUS, 'zh-CN': zhCN, ja, ko, fr };

package/dist/carousel/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Children, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
@@ -40,7 +41,9 @@ function useReducedMotion() {
     }, []);
     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) {
+export const Carousel = forwardRef(function Carousel(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel = t('carousel.label'), 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 } = inkraProps;
     const generatedId = useId();
     const rootRef = useRef(null);
     const slideItems = Children.toArray(children);
@@ -84,18 +87,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;
@@ -281,10 +291,10 @@ export const Carousel = forwardRef(function Carousel({ 'aria-label': ariaLabel =
         '--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 slideLabel = labels?.slide ?? ((index, total) => t('carousel.slide', { index, total }));
+    const pageLabel = labels?.page ?? ((index, total) => t('carousel.page', { index, total }));
+    const statusLabel = labels?.status ?? ((index, total) => t('carousel.slide', { index, 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 ?? t('common.noItems') }) : _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 ?? t('carousel.previous'), 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 ?? t('carousel.next'), 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 ?? t('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 ?? t('carousel.pause')) : (labels?.play ?? t('carousel.play')), 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 {};