@inkra/react 0.4.3 → 0.5.0

package/README.md

@@ -48,6 +48,104 @@ export function Actions() {
 
 To use only the design tokens, import `@inkra/react/tokens.css` instead.
 
+## Theme Provider
+
+```tsx
+import '@inkra/react/styles.css';
+import { ThemeProvider } from '@inkra/react/theme';
+import type { InkraThemeTokens } from '@inkra/react/theme';
+
+const tokens = {
+  '--inkra-accent': '#4b96aa',
+  '--inkra-icon-stroke-width': '1.5px',
+} satisfies InkraThemeTokens;
+
+<ThemeProvider theme="auto" tokens={tokens}>
+  <App />
+</ThemeProvider>
+```
+
+`ThemeProvider` is also exported from the package root. It renders a local `div`
+scope, accepts its normal HTML attributes and forwards its ref. It never changes
+the document theme or stores a preference. `theme` supports `light`, `dark`, and
+`auto`; omit it to inherit the surrounding CSS theme. Auto uses native CSS media
+queries and works with SSR without resolving the system preference in JavaScript.
+
+`tokens` accepts partial `--inkra-*` variables for color, fonts, geometry and
+pencil rendering. Supply units for lengths (`"1.5px"`); unitless numbers work for
+intensity and similar values. An inner scope without `theme` inherits outer
+tokens; an explicit mode establishes that mode's built-in variables before local
+overrides. `style` takes precedence over `tokens`. User token overrides are
+suspended while forced colors are active so the system palette can take over.
+
+Custom colors do not automatically adapt to light/dark modes. Supply appropriate
+variables for each mode, or use CSS media queries. Existing component portals
+inherit the trigger scope and track its live changes. The scope has no default
+background or spacing; use a surface or your own layout when needed. It composes
+with `InkraProvider` for language configuration without changing input state.
+
+## Internationalization
+
+Wrap your application in `InkraProvider` to localize component-owned copy and
+accessible labels. Built-in dictionaries are `en`, `zh-CN`, `ja`, `ko`, and `fr`.
+All five share the same typed keys. Regional tags such as `en-GB`, `ja-JP`,
+`ko-KR`, `fr-CA` and `zh-Hans-CN` select the matching language while keeping
+regional date/number formatting. No provider preserves the English defaults.
+
+```tsx
+import { InkraProvider, Input, Pagination } from '@inkra/react';
+import type { InkraDictionary } from '@inkra/react/i18n';
+
+const messages = {
+  'input.clear': 'Clear note',
+  'pagination.page': 'Open page {page}',
+} satisfies InkraDictionary;
+
+<InkraProvider locale="fr-CA" messages={messages}>
+  <Input clearable defaultValue="My note" aria-label="Note" />
+  <Pagination totalPages={5} />
+</InkraProvider>;
+```
+
+`messages` is a partial dictionary; developers can import JSON or adapt their
+existing i18n resource into these flat keys. Inspect `inkraLocales.en` for the
+complete key list and source templates, or copy another built-in dictionary.
+The provider, dictionaries, types, `useInkraLocale` and
+`createInkraTranslator` are also exported from `@inkra/react/i18n`.
+
+- Precedence: explicit component labels/props, inner provider overrides, inherited
+  overrides, then the built-in dictionary. Unknown languages use English copy
+  while valid `Intl` locale formatting is preserved. Invalid locale strings use `en-US`.
+- Nested providers merge by key, even when the inner locale changes. Pass the
+  desired override dictionary on language changes; inherited overrides are intentional.
+- `undefined` entries do not override; empty strings do. Avoid empty accessible
+  labels on interactive controls. Use `satisfies InkraDictionary` to catch key typos.
+- Preserve template placeholders such as `{page}`, `{count}` and `{label}`.
+  Interpolation is a single literal-text pass, not HTML, ICU, or executable code.
+  Missing placeholder values are left visible rather than silently removed.
+- Explicit component `locale` props take priority over the provider. Calendar
+  also retains its DayPicker locale/labels/formatters API. NumberTicker's
+  explicit compact-unit policies remain independent of regional number formatting.
+- Language and dictionary updates do not remount children or clear form drafts.
+  The provider adds no HTML wrapper and does not mutate the document language.
+  Set `lang` on your page or locale-scoped container; set `dir` separately if needed.
+- Application labels, option content, errors supplied by your application, and
+  stored/submitted values are not automatically translated. InkraProvider also
+  passes its locale to React Aria's internal announcements; third-party/native
+  messages are not keys in the Inkra dictionary.
+- Use identical locale/dictionary data for SSR and hydration. Messages may change
+  after hydration; the provider does not read browser language or local storage.
+
+```tsx
+import { InkraProvider, inkraLocales } from '@inkra/react/i18n';
+
+const customLanguage = { ...inkraLocales.en, 'input.clear': 'Effacer la note' };
+
+<InkraProvider locale="fr" messages={customLanguage}>
+  {children}
+</InkraProvider>;
+```
+
 ## Button
 
 `Button` forwards its ref and native button attributes. Its default `type` is `button`, so placing it inside a form will not submit unexpectedly.

package/dist/audio-player/index.js

@@ -1,4 +1,5 @@
 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';
@@ -21,14 +22,15 @@ const mutePaths = [
     { d: 'm16.5 14.5 5-5' },
     { d: 'm16.5 9.5 5 5' },
 ];
-const DEFAULT_LABELS = {
-    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 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);
@@ -42,7 +44,7 @@ export const AudioPlayer = forwardRef(function AudioPlayer({ src, preload = 'met
     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 mergedLabels = { ...DEFAULT_LABELS(t), ...labels };
     const update = useCallback((patch) => {
         const current = stateRef.current;
         const changed = Object.keys(patch).some(key => !Object.is(current[key], patch[key]));

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.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
@@ -25,6 +27,7 @@ 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 { t } = useInkraLocale();
     const { eventsByDay, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, showDayEventsLabel } = useContext(EventContext);
     const [expandedDay, setExpandedDay] = useState();
     if (appearance === 'picker')
@@ -33,15 +36,18 @@ function CalendarCell({ children, day, modifiers, ...props }) {
     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`) })] })] }) });
+    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 { 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) ?? `${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' })] });
+                ? [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 = 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) {
@@ -54,7 +60,7 @@ export function Calendar({ events = emptyEvents, eventIndicator = 'count', appea
         }
         return index;
     }, [events]);
-    const context = useMemo(() => ({ eventsByDay, indicator: eventIndicator, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, showDayEventsLabel }), [eventsByDay, eventIndicator, appearance, onEventSelect, renderDayAccessory, maxEventsPerDay, showDayEventsLabel]);
+    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: 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 } }) }) });
+    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);
@@ -288,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: [_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) })] });
+    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.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 { Children, createContext, forwardRef, memo, isValidElement, useContext, useCallback, useMemo, useId, useImperativeHandle, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { PencilSurface } from '../PencilSurface.js';
@@ -27,7 +28,8 @@ function gridStyle(style, columns, minItemWidth) {
     };
 }
 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 { t } = useInkraLocale();
+    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 = t('common.previousPage'), nextPageLabel = t('common.nextPage'), 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`;

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

@@ -1,3 +1,4 @@
+import { type InkraTranslate } from '../i18n/index.js';
 import type { ReactNode } from 'react';
 import type { ColorGradient } from './gradient.js';
 import type { ColorValue } from './color.js';
@@ -28,7 +29,7 @@ export interface ColorGradientLabels {
     farthestCorner?: string;
     repeating?: string;
 }
-export declare const defaultGradientLabels: Required<ColorGradientLabels>;
+export declare const defaultGradientLabels: (t: InkraTranslate) => Required<ColorGradientLabels>;
 export declare function GradientEditor({ value, disabled, maxStops, labels, onChange, renderColorEditor }: {
     value: ColorGradient;
     disabled: boolean;

package/dist/color-picker/GradientEditor.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import {} from '../i18n/index.js';
 import { useId, useRef, useState } from 'react';
 import { __iconData as addIcon } from 'lucide-react/dist/esm/icons/plus.mjs';
 import { __iconData as removeIcon } from 'lucide-react/dist/esm/icons/minus.mjs';
@@ -15,15 +16,15 @@ import { Slider } from '../slider/index.js';
 import { Switch } from '../selection/Switch.js';
 import { ToggleGroup } from '../toggle-group/index.js';
 import { formatColorPaint } from './gradient.js';
-export const defaultGradientLabels = {
-    type: 'Color type', solid: 'Solid', linear: 'Linear', radial: 'Radial', conic: 'Conic',
-    preview: 'Gradient preview', stops: 'Color stops', stop: 'Stop', stopColor: 'Stop color',
-    addStop: 'Add stop', removeStop: 'Remove stop', reverse: 'Reverse gradient',
-    position: 'Stop position', angle: 'Angle', centerX: 'Center X', centerY: 'Center Y',
-    shape: 'Shape', circle: 'Circle', ellipse: 'Ellipse', extent: 'Extent',
-    closestSide: 'Closest side', closestCorner: 'Closest corner',
-    farthestSide: 'Farthest side', farthestCorner: 'Farthest corner', repeating: 'Repeat gradient',
-};
+export const defaultGradientLabels = (t) => ({
+    type: t('gradient.type'), solid: t('gradient.solid'), linear: t('gradient.linear'), radial: t('gradient.radial'), conic: t('gradient.conic'),
+    preview: t('gradient.preview'), stops: t('gradient.stops'), stop: t('gradient.stop'), stopColor: t('gradient.stopColor'),
+    addStop: t('gradient.add'), removeStop: t('gradient.remove'), reverse: t('gradient.reverse'),
+    position: t('gradient.position'), angle: t('gradient.angle'), centerX: t('gradient.centerX'), centerY: t('gradient.centerY'),
+    shape: t('gradient.shape'), circle: t('gradient.circle'), ellipse: t('gradient.ellipse'), extent: t('gradient.extent'),
+    closestSide: t('gradient.closestSide'), closestCorner: t('gradient.closestCorner'),
+    farthestSide: t('gradient.farthestSide'), farthestCorner: t('gradient.farthestCorner'), repeating: t('gradient.repeat'),
+});
 const iconPaths = (data) => data.node.filter(([tag]) => tag === 'path').map(([, attrs]) => ({ d: attrs.d }));
 const actions = { add: iconPaths(addIcon), remove: iconPaths(removeIcon), reverse: iconPaths(reverseIcon) };
 export function GradientEditor({ value, disabled, maxStops, labels, onChange, renderColorEditor }) {

package/dist/color-picker/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 { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { ColorSwatch } from '../color-swatch/index.js';
@@ -12,13 +13,13 @@ import { ToggleGroup } from '../toggle-group/index.js';
 import { GradientEditor, defaultGradientLabels } from './GradientEditor.js';
 import { colorPaintTypes, createColorGradient, formatColorPaint, normalizeColorPaint } from './gradient.js';
 import { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, normalizeColorValue, withColorAlpha, withColorRgb, } from './color.js';
-const defaultLabels = {
-    palette: 'Open color palette',
-    value: 'Color value',
-    alpha: 'Opacity',
-    presets: 'Color presets',
-    invalid: 'Use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA.',
-};
+const defaultLabels = (t) => ({
+    palette: t('color.palette'),
+    value: t('color.value'),
+    alpha: t('color.alpha'),
+    presets: t('color.presets'),
+    invalid: t('color.invalid'),
+});
 function presetData(preset, allowGradient) {
     const input = typeof preset === 'string' ? preset : preset.value;
     const value = typeof input === 'string' || allowGradient ? normalizeColorPaint(input) : null;
@@ -27,7 +28,8 @@ function presetData(preset, allowGradient) {
     return { value, label: typeof preset === 'string' ? preset : preset.label ?? formatColorPaint(value) };
 }
 export function ColorPicker(options) {
-    const { allowGradient = false, colorTypes = colorPaintTypes, maxStops = 8, gradientLabels, className, defaultValue = DEFAULT_COLOR_VALUE, disabled = false, form, id, label = 'Color', labels, name, onInvalidInput, onValueChange: _onValueChange, presets = [], presentation = 'inline', seed, showAlpha = true, value, ...props } = options;
+    const { t } = useInkraLocale();
+    const { allowGradient = false, colorTypes = colorPaintTypes, maxStops = 8, gradientLabels, className, defaultValue = DEFAULT_COLOR_VALUE, disabled = false, form, id, label = t('color.label'), labels, name, onInvalidInput, onValueChange: _onValueChange, presets = [], presentation = 'inline', seed, showAlpha = true, value, ...props } = options;
     const generatedId = useId();
     const resolvedId = id ?? `inkra-color-picker-${generatedId}`;
     const resolvedSeed = seed ?? resolvedId;
@@ -54,8 +56,8 @@ export function ColorPicker(options) {
     const skipNextBlurRef = useRef(false);
     const [draft, setDraft] = useState(currentColor);
     const [open, setOpen] = useState(false);
-    const copy = { ...defaultLabels, ...labels };
-    const gradientCopy = { ...defaultGradientLabels, ...gradientLabels };
+    const copy = { ...defaultLabels(t), ...labels };
+    const gradientCopy = { ...defaultGradientLabels(t), ...gradientLabels };
     const parsedPresets = useMemo(() => presets.map(preset => presetData(preset, allowGradient)).filter((preset) => preset !== null), [presets, allowGradient]);
     const inputInvalid = normalizeColorValue(draft) === null;
     const rgbValue = colorRgbValue(currentColor) ?? '#4b96aa';

package/dist/content/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { createContext, useContext, forwardRef, useId, useState } from 'react';
 import { Button } from '../Button.js';
@@ -31,7 +32,9 @@ const CardFooter = forwardRef(function CardFooter({ className, children, divided
     return _jsxs("div", { ...props, ref: ref, "data-justify": justify, "data-padding": padding, "data-orientation": orientation, className: classes('inkra-card__footer', className), children: [(divided ?? inherited) && _jsx(PencilLine, { className: "inkra-card__divider" }), children] });
 });
 export const Card = { Root: CardRoot, Header: CardHeader, Title: CardTitle, Description: CardDescription, Content: CardContent, Footer: CardFooter };
-const AlertRoot = forwardRef(function AlertRoot({ className, variant = 'info', icon, seed, style, children, role = 'status', size = 'md', appearance = 'soft', actions, closable = false, open, defaultOpen = true, onOpenChange, closeLabel = 'Dismiss notification', ...props }, ref) {
+const AlertRoot = forwardRef(function AlertRoot(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, variant = 'info', icon, seed, style, children, role = 'status', size = 'md', appearance = 'soft', actions, closable = false, open, defaultOpen = true, onOpenChange, closeLabel = t('alert.dismiss'), ...props } = inkraProps;
     const id = useId();
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     if (!(open ?? internalOpen))

package/dist/data-table/index.d.ts

@@ -50,4 +50,4 @@ export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElemen
     pageLabel?: (page: number, pageCount: number) => ReactNode;
     sortStatusLabel?: (columnId: string, direction: false | 'asc' | 'desc') => string;
 }
-export declare function DataTable<TData>({ data, columns, getRowId, caption, density, layout, striped, hoverable, stickyHeader, captionSide, filterable, filterLabel, filterPlaceholder, globalFilter, defaultGlobalFilter, onGlobalFilterChange, sorting, defaultSorting, onSortingChange, pagination, manualPagination, rowCount, manualSorting, manualFiltering, paginationState, defaultPagination, onPaginationChange, selectable, rowSelection, defaultRowSelection, onRowSelectionChange, getRowCanSelect, loading, loadingMessage, emptyMessage, selectAllLabel, selectRowLabel, previousPageLabel, nextPageLabel, paginationLabel, pageLabel, sortStatusLabel, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function DataTable<TData>(inkraProps: DataTableProps<TData>): import("react").JSX.Element;

package/dist/data-table/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { flexRender, functionalUpdate, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
@@ -28,7 +29,9 @@ function pencilCopy(value, seed) {
 function SelectionCheckbox(props) {
     return _jsx(Checkbox, { className: "inkra-data-table__selection", checked: props.checked, indeterminate: props.indeterminate, disabled: props.disabled, label: _jsx("span", { className: "inkra-visually-hidden", children: props.label }), onCheckedChange: props.onChange });
 }
-export function DataTable({ data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = 'Filter rows', filterPlaceholder = 'Filter rows', globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, manualPagination = false, rowCount, manualSorting = false, manualFiltering = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = 'Loading rows', emptyMessage = 'No rows', selectAllLabel = 'Select all rows on this page', selectRowLabel = row => `Select row ${row.id}`, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', paginationLabel = 'Table pagination', pageLabel = (page, pageCount) => `Page ${page} of ${pageCount}`, sortStatusLabel = (columnId, direction) => direction === 'asc' ? `${columnId}: sorted ascending` : direction === 'desc' ? `${columnId}: sorted descending` : `${columnId}: not sorted`, className, ...props }) {
+export function DataTable(inkraProps) {
+    const { t } = useInkraLocale();
+    const { data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = t('table.filter'), filterPlaceholder = t('table.filter'), globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, manualPagination = false, rowCount, manualSorting = false, manualFiltering = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = t('table.loading'), emptyMessage = t('table.empty'), selectAllLabel = t('table.selectAll'), selectRowLabel = row => t('table.selectRow', { row: row.id }), previousPageLabel = t('common.previousPage'), nextPageLabel = t('common.nextPage'), paginationLabel = t('table.pagination'), pageLabel = (page, pageCount) => t('pagination.status', { page, total: pageCount }), sortStatusLabel = (columnId, direction) => t(direction === 'asc' ? 'table.ascending' : direction === 'desc' ? 'table.descending' : 'table.unsorted', { column: columnId }), className, ...props } = inkraProps;
     const [internalFilter, setInternalFilter] = useState(defaultGlobalFilter);
     const [internalSorting, setInternalSorting] = useState(defaultSorting);
     const [internalPagination, setInternalPagination] = useState(defaultPagination);

package/dist/date-picker/index.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useInkraLocale, resolveInkraLocale } from '../i18n/index.js';
+import { calendarLocales } from '../calendar/locales.js';
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Button, ButtonGroup } from '../Button.js';
 import { Calendar } from '../calendar/index.js';
@@ -35,24 +37,19 @@ function initialForMode(mode, value) {
         return validDate(value) ? value : undefined;
     return isRange(value) ? value : undefined;
 }
-function defaultCopy(locale) {
-    const chinese = locale.toLowerCase().startsWith('zh');
+function defaultCopy(t) {
     return {
-        calendar: chinese ? '选择日期' : 'Choose date',
-        clear: chinese ? '清空日期' : 'Clear date',
-        next: chinese ? '下个月' : 'Next month',
-        open: chinese ? '打开日期选择器' : 'Open date picker',
-        placeholder: chinese ? '选择日期' : 'Choose a date',
-        previous: chinese ? '上个月' : 'Previous month',
-        rangePlaceholder: chinese ? '选择日期范围' : 'Choose a date range',
-        selected: chinese ? '已选择' : 'selected',
-        today: chinese ? '今天' : 'today',
+        calendar: t('datePicker.calendar'), clear: t('datePicker.clear'),
+        next: t('datePicker.next'), open: t('datePicker.open'),
+        placeholder: t('datePicker.placeholder'), previous: t('datePicker.previous'),
+        rangePlaceholder: t('datePicker.range'), selected: t('datePicker.selected'), today: t('datePicker.today'),
     };
 }
 export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef) {
     const valueControlled = Object.prototype.hasOwnProperty.call(allProps, 'value');
     const openControlled = Object.prototype.hasOwnProperty.call(allProps, 'open');
-    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, autoFocus, calendarLabel, calendarProps = {}, className, clearable = true, clearButtonLabel, defaultOpen = false, defaultValue, dir, disabled = false, endName, form, fullWidth = true, id, invalid = false, locale = 'en-US', mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, size = 'md', style, value, } = allProps;
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, autoFocus, calendarLabel, calendarProps = {}, className, clearable = true, clearButtonLabel, defaultOpen = false, defaultValue, dir, disabled = false, endName, form, fullWidth = true, id, invalid = false, locale: localeProp, mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, size = 'md', style, value, } = allProps;
+    const { locale, t } = useInkraLocale(localeProp);
     const generatedId = useId();
     const field = useFieldContext();
     const triggerRef = useRef(null);
@@ -71,7 +68,7 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
         'aria-errormessage': ariaErrorMessage,
         'aria-invalid': ariaInvalid,
     });
-    const copy = defaultCopy(locale);
+    const copy = defaultCopy(t);
     const currentValue = initialForMode(mode, valueControlled ? value : uncontrolledValue);
     const currentOpen = openControlled ? Boolean(open) : uncontrolledOpen;
     const singleValue = validDate(currentValue) ? currentValue : undefined;
@@ -144,6 +141,7 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
         ...labels,
     };
     const sharedCalendarProps = {
+        locale: calendarLocales[resolveInkraLocale(locale)],
         ...restCalendarProps,
         appearance: 'picker',
         defaultMonth: defaultMonth ?? firstDate,

package/dist/day-agenda/index.d.ts

@@ -45,4 +45,4 @@ export declare function agendaInterval(event: AgendaEvent): {
     before: boolean;
     after: boolean;
 } | null;
-export declare function DayAgenda({ date, events, selectedEvent, onEventSelect, locale, timeZoneLabel, emptyLabel, untimedLabel, showOverview, hourCycle, density, showDescriptions, divided, disabled, onPreviousDay, onNextDay, navigationLabels, maxVisibleEvents, showAllEventsLabel, showFewerEventsLabel, className, ...props }: DayAgendaProps): import("react").JSX.Element;
+export declare function DayAgenda(inkraProps: DayAgendaProps): import("react").JSX.Element;

package/dist/day-agenda/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId, useMemo, useState } from 'react';
+import { useInkraLocale } from '../i18n/index.js';
 import { TravelIcon } from '../internal/travelIcons.js';
 import { Button } from '../Button.js';
 import { createAgendaScale, layoutAgendaCards } from './layout.js';
@@ -29,7 +30,9 @@ export function agendaInterval(event) {
         return null;
     return { start: Math.max(0, event.startMinute), end: Math.min(1440, end ?? event.startMinute), before: event.startMinute < 0, after: (end ?? 0) > 1440 };
 }
-export function DayAgenda({ date, events, selectedEvent, onEventSelect, locale = 'en', timeZoneLabel, emptyLabel = 'No events', untimedLabel = 'Time pending', showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: 'Previous day', next: 'Next day' }, maxVisibleEvents, showAllEventsLabel = count => `Show all ${count} events`, showFewerEventsLabel = 'Show fewer events', className, ...props }) {
+export function DayAgenda(inkraProps) {
+    const { locale, t } = useInkraLocale(inkraProps.locale);
+    const { date, events, selectedEvent, onEventSelect, locale: _locale, timeZoneLabel, emptyLabel = t('agenda.empty'), untimedLabel = t('agenda.pending'), showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: t('agenda.previous'), next: t('agenda.next') }, maxVisibleEvents, showAllEventsLabel = count => t('agenda.all', { count }), showFewerEventsLabel = t('agenda.fewer'), className, ...props } = inkraProps;
     const id = useId();
     const [expandedDate, setExpandedDate] = useState();
     const displayLimit = maxVisibleEvents !== undefined && Number.isFinite(maxVisibleEvents) ? Math.max(0, Math.floor(maxVisibleEvents)) : Infinity;

package/dist/dockable-panel/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { DndContext, MouseSensor, TouchSensor, useDraggable, useSensor, useSensors, } from '@dnd-kit/core';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
@@ -96,13 +97,13 @@ const resetPaths = [
     { d: 'M4 12a8 8 0 1 0 2.34-5.66L4 8.68' },
     { d: 'M4 4v4.68h4.68' },
 ];
-const defaultLabels = {
-    move: 'Move panel',
-    collapse: 'Collapse panel',
-    expand: 'Expand panel',
-    reset: 'Restore panel position',
-    keyboardInstructions: 'Use the arrow keys to move this panel. Hold Shift for larger steps. Press Home to restore its position.',
-};
+const defaultLabels = (t) => ({
+    move: t('dockable.move'),
+    collapse: t('dockable.collapse'),
+    expand: t('dockable.expand'),
+    reset: t('dockable.reset'),
+    keyboardInstructions: t('dockable.instructions'),
+});
 function renderTitle(title) {
     return typeof title === 'string' ? _jsx(PencilText, { children: title }) : title;
 }
@@ -110,6 +111,7 @@ function isInteractiveTarget(target) {
     return target instanceof Element && Boolean(target.closest('button, a, input, select, textarea, [contenteditable="true"], [data-dockable-panel-no-drag]'));
 }
 export const DockablePanel = forwardRef(function DockablePanel({ children, className, collapsed, collapsible = true, defaultCollapsed = false, defaultPosition = { x: 8, y: 8 }, headerActions, id, keyboardStep = 8, labels: labelOverrides, movable = true, onCollapsedChange, onFocusCapture, onPointerDown, onPositionChange, position, style, title, ...props }, forwardedRef) {
+    const { t } = useInkraLocale();
     const workspace = useContext(WorkspaceContext);
     if (!workspace)
         throw new Error('DockablePanel must be rendered inside DockablePanelWorkspace.');
@@ -125,7 +127,7 @@ export const DockablePanel = forwardRef(function DockablePanel({ children, class
     const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
     const positionRef = useRef(resolvedPosition);
     positionRef.current = resolvedPosition;
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const labels = { ...defaultLabels(t), ...labelOverrides };
     const { activate, bounds, commitDrag, layer, register, snapThreshold, } = workspace;
     const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform } = useDraggable({
         id,

package/dist/drawer/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { forwardRef, useId } from 'react';
 import { __iconData as closeIcon } from 'lucide-react/dist/esm/icons/x.mjs';
@@ -53,7 +54,9 @@ export const DrawerDescription = forwardRef(function DrawerDescription({ childre
 export const DrawerClose = forwardRef(function DrawerClose(props, ref) {
     return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
 });
-export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ className, label = 'Close', onFocus, ...props }, ref) {
+export const DrawerCloseButton = forwardRef(function DrawerCloseButton(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, label = t('common.close'), onFocus, ...props } = inkraProps;
     return _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { ...props, "aria-label": label, className: classes('inkra-drawer__close-button', className), ref: ref, size: "icon", type: "button", variant: "outline", onFocus: event => {
                                 onFocus?.(event);
                                 const dialog = event.currentTarget.closest('[role="dialog"]');
@@ -61,7 +64,9 @@ export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ classNa
                                     event.preventDefault();
                             }, children: _jsx(PencilIcon, { decorative: true, paths: closePaths, size: 30, sourceSize: 24 }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { align: "end", side: "bottom", children: label }) })] }) });
 });
-export const DrawerHeader = forwardRef(function DrawerHeader({ action, children, className, closeLabel = 'Close', divided = true, showClose = true, ...props }, ref) {
+export const DrawerHeader = forwardRef(function DrawerHeader(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { action, children, className, closeLabel = t('common.close'), divided = true, showClose = true, ...props } = inkraProps;
     const id = useId();
     const hasActions = Boolean(action || showClose);
     return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-actions": hasActions || undefined, "data-custom-action": action ? true : undefined, "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), hasActions ? _jsxs("div", { className: "inkra-drawer__header-actions", children: [action, showClose ? _jsx(DrawerCloseButton, { label: closeLabel }) : null] }) : null, divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-header-${id}` }) : null] });