@inkra/react 0.4.3 → 0.5.0

package/dist/sortable/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { __iconData as gripIconData } from 'lucide-react/dist/esm/icons/grip-vertical.mjs';
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, pointerWithin, rectIntersection, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
@@ -42,14 +43,14 @@ function filterItemActivatorProps(props) {
         },
     };
 }
-const defaultLabels = {
-    handle: 'Drag item',
-    screenReaderInstructions: 'Press Space or Enter to pick up an item. Use the arrow keys to move it, Space or Enter to drop it, and Escape to cancel.',
-    pickedUp: (item, container, position, count) => `Picked up ${item}, item ${position} of ${count} in ${container}.`,
-    movedOver: (item, container, position, count) => `${item} is over position ${position} of ${count} in ${container}.`,
-    dropped: (item, container, position, count) => `Dropped ${item} at position ${position} of ${count} in ${container}.`,
-    cancelled: (item) => `Sorting cancelled. ${item} returned to its original position.`,
-};
+const defaultLabels = (t) => ({
+    handle: t('sortable.handle'),
+    screenReaderInstructions: t('sortable.instructions'),
+    pickedUp: (item, container, position, count) => t('sortable.pickedUp', { item, container, position, count }),
+    movedOver: (item, container, position, count) => t('sortable.movedOver', { item, container, position, count }),
+    dropped: (item, container, position, count) => t('sortable.dropped', { item, container, position, count }),
+    cancelled: item => t('sortable.cancelled', { item }),
+});
 function getEngineData(value) {
     const data = value?.data.current;
     return data?.type === 'inkra-sortable-item' || data?.type === 'inkra-sortable-container' ? data : null;
@@ -138,7 +139,8 @@ function SortableItem({ activeId, container, disabled, handle, handleLabel, id,
                     : _jsx("button", { ...activatorProps, "aria-label": handleLabel, className: "inkra-sortable__handle", "data-sortable-handle": "", disabled: disabled, ref: setActivatorNodeRef, type: "button", children: _jsx(PencilIcon, { "aria-hidden": "true", paths: gripIcon, size: 24, sourceSize: 24 }) }) })] });
 }
 export function Sortable({ autoScroll = true, className, containerClassName, containers, getContainerLabel = (container) => container.label ?? String(container.id), getItemId, getItemLabel = (item) => String(getItemId(item)), handle = false, isItemDisabled, itemClassName, labels: labelsProp, onChange, onMove, onReorder, renderContainerHeader, renderItem, renderOverlay, }) {
-    const labels = { ...defaultLabels, ...labelsProp };
+    const { t } = useInkraLocale();
+    const labels = useMemo(() => ({ ...defaultLabels(t), ...labelsProp }), [t, labelsProp]);
     const [activeId, setActiveId] = useState(null);
     const [activeWidth, setActiveWidth] = useState(null);
     const [projected, setProjected] = useState(null);

package/dist/sparkline/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, useMemo, useRef, useState } from 'react';
 import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
@@ -9,9 +10,6 @@ import { pencilStroke } from '../internal/stroke.js';
 import { drawPencilWash } from '../internal/wash.js';
 import { pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
 import { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';
-function defaultLabel(value, index) {
-    return value === null ? `Point ${index + 1}: missing` : `Point ${index + 1}: ${value}`;
-}
 function resolveCssColor(host, style, token, fallback) {
     const value = style.getPropertyValue(token).trim();
     if (!value || !value.includes('var('))
@@ -23,7 +21,9 @@ function resolveCssColor(host, style, token, fallback) {
     probe.remove();
     return resolved || fallback;
 }
-export const Sparkline = forwardRef(function Sparkline({ data, type = 'line', width = 180, height = 56, min, max, label = 'Sparkline', showPoints = true, showArea = true, showSummary = true, getLabel = defaultLabel, className, ...props }, ref) {
+export const Sparkline = forwardRef(function Sparkline(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { data, type = 'line', width = 180, height = 56, min, max, label = t('sparkline.label'), showPoints = true, showArea = true, showSummary = true, getLabel = (value, index) => t(value === null ? 'sparkline.missing' : 'sparkline.point', { index: index + 1, value: value ?? '' }), className, ...props } = inkraProps;
     const canvasRef = useRef(null);
     const interactionCanvasRef = useRef(null);
     const [pencilReady, setPencilReady] = useState(false);
@@ -46,15 +46,15 @@ export const Sparkline = forwardRef(function Sparkline({ data, type = 'line', wi
     const effectiveShowPoints = showPoints || values.length === 1;
     const summary = useMemo(() => {
         if (!values.length)
-            return 'No data';
+            return t('sparkline.empty');
         let minimum = values[0];
         let maximum = values[0];
         for (let index = 1; index < values.length; index++) {
             minimum = Math.min(minimum, values[index]);
             maximum = Math.max(maximum, values[index]);
         }
-        return `Current ${values[values.length - 1]}, min ${minimum}, max ${maximum}`;
-    }, [values]);
+        return t('sparkline.summary', { current: values[values.length - 1], minimum, maximum });
+    }, [t, values]);
     const onKeyDown = (event) => {
         if (!points.length || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
             return;

package/dist/steps/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 { forwardRef } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilLine } from '../PencilLine.js';
@@ -20,7 +21,9 @@ function resolvedStatus(item, index, current) {
         return 'current';
     return 'upcoming';
 }
-export const Steps = forwardRef(function Steps({ 'aria-label': ariaLabel = 'Progress', className, current = 0, items, onStepChange, orientation = 'horizontal', ...props }, ref) {
+export const Steps = forwardRef(function Steps(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel = t('steps.label'), className, current = 0, items, onStepChange, orientation = 'horizontal', ...props } = inkraProps;
     return _jsx("ol", { ...props, ref: ref, "aria-label": ariaLabel, className: ['inkra-steps', className].filter(Boolean).join(' '), "data-orientation": orientation, children: items.map((item, index) => {
             const status = resolvedStatus(item, index, current);
             const interactive = onStepChange !== undefined;

package/dist/styles/select.css

@@ -23,11 +23,8 @@
 .inkra-search-select__input .inkra-search-select__input-control > .inkra-pencil-surface__border { display: none; }
 .inkra-search-select__anchor > .inkra-input__end-action { flex: 0 0 auto; }
 .inkra-search-select__anchor > .inkra-input__end-action:has(.inkra-search-select__clear:not([data-visible])) {
-  pointer-events: none;
+  display: none;
 }
-.inkra-search-select__anchor > .inkra-input__end-action:has(.inkra-search-select__clear:not([data-visible]))
-  > :is(.inkra-input__action-divider, .inkra-input__action-wash) { display: none; }
-.inkra-search-select__clear:not([data-visible]) { visibility: hidden; }
 .inkra-search-select__trigger .inkra-button__content,
 .inkra-search-select__trigger .inkra-button__label,
 .inkra-search-select__trigger .inkra-button__label > span { min-width: 0; width: 100%; }

package/dist/styles.css

@@ -2015,11 +2015,8 @@
 .inkra-search-select__input .inkra-search-select__input-control > .inkra-pencil-surface__border { display: none; }
 .inkra-search-select__anchor > .inkra-input__end-action { flex: 0 0 auto; }
 .inkra-search-select__anchor > .inkra-input__end-action:has(.inkra-search-select__clear:not([data-visible])) {
-  pointer-events: none;
+  display: none;
 }
-.inkra-search-select__anchor > .inkra-input__end-action:has(.inkra-search-select__clear:not([data-visible]))
-  > :is(.inkra-input__action-divider, .inkra-input__action-wash) { display: none; }
-.inkra-search-select__clear:not([data-visible]) { visibility: hidden; }
 .inkra-search-select__trigger .inkra-button__content,
 .inkra-search-select__trigger .inkra-button__label,
 .inkra-search-select__trigger .inkra-button__label > span { min-width: 0; width: 100%; }

package/dist/tabs/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 Primitive from '@radix-ui/react-tabs';
 import { createContext, forwardRef, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { __iconData as chevronLeft } from 'lucide-react/dist/esm/icons/chevron-left.mjs';
@@ -43,7 +44,9 @@ const Root = forwardRef(function TabsRoot({ value, defaultValue, onValueChange,
     };
     return _jsx(ValueContext.Provider, { value: current, children: _jsx(ChangeContext.Provider, { value: change, children: _jsx(AnimatedContext.Provider, { value: animated, children: _jsx(OrientationContext.Provider, { value: orientation, children: _jsx(Primitive.Root, { ...props, orientation: orientation, ref: ref, "data-size": size, className: ['inkra-tabs', className].filter(Boolean).join(' '), value: current ?? '', onValueChange: change }) }) }) }) });
 });
-const List = forwardRef(function TabsList({ className, align = 'start', fullWidth = false, divided = false, overflow = 'scroll', moreLabel = 'More tabs', scrollPreviousLabel = 'Scroll to previous tabs', scrollNextLabel = 'Scroll to next tabs', onFocusCapture, ...props }, ref) {
+const List = forwardRef(function TabsList(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, align = 'start', fullWidth = false, divided = false, overflow = 'scroll', moreLabel = t('tabs.more'), scrollPreviousLabel = t('tabs.previous'), scrollNextLabel = t('tabs.next'), onFocusCapture, ...props } = inkraProps;
     const current = useContext(ValueContext);
     const change = useContext(ChangeContext);
     const mode = useContext(OrientationContext) === 'horizontal' ? overflow : 'scroll';

package/dist/tag-input/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, memo, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
 import { Button } from '../Button.js';
@@ -10,26 +11,18 @@ import { createDefaultTag, defaultTagInputDelimiters, defaultTagValueKey, normal
 const removePaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
 const clearPaths = [{ d: 'M4 7h16' }, { d: 'M9 7V4h6v3' }, { d: 'm7 7 1 13h8l1-13' }];
 const classes = (...values) => values.filter(Boolean).join(' ');
-const defaultLabels = {
-    tagList: 'Selected tags',
-    removeTag: tag => `Remove ${tag.label ?? tag.value}`,
-    clearAll: 'Clear all tags',
-    duplicate: candidate => `${candidate} is already added.`,
-    maxTags: maximum => `You can add up to ${maximum} tags.`,
-    invalid: candidate => `${candidate} is not a valid tag.`,
-};
 function joinAriaIds(...values) {
     const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
     return [...new Set(ids)].join(' ') || undefined;
 }
-function resolvedLabels(labels) {
+function resolvedLabels(labels, t) {
     return {
-        tagList: labels?.tagList ?? defaultLabels.tagList,
-        removeTag: labels?.removeTag ?? defaultLabels.removeTag,
-        clearAll: labels?.clearAll ?? defaultLabels.clearAll,
-        duplicate: labels?.duplicate ?? defaultLabels.duplicate,
-        maxTags: labels?.maxTags ?? defaultLabels.maxTags,
-        invalid: labels?.invalid ?? defaultLabels.invalid,
+        tagList: labels?.tagList ?? t('tagInput.list'),
+        removeTag: labels?.removeTag ?? (tag => t('tagInput.remove', { label: tag.label ?? tag.value })),
+        clearAll: labels?.clearAll ?? t('tagInput.clear'),
+        duplicate: labels?.duplicate ?? (label => t('tagInput.duplicate', { label })),
+        maxTags: labels?.maxTags ?? (count => t('tagInput.maximum', { count })),
+        invalid: labels?.invalid ?? (label => t('tagInput.invalid', { label })),
     };
 }
 function validationText(result, fallback) {
@@ -60,7 +53,9 @@ function tagRemoveTarget(event, length) {
     const index = Number(button.getAttribute('data-inkra-tag-index'));
     return Number.isInteger(index) && index >= 0 && index < length ? { button, index } : undefined;
 }
-export const TagInput = forwardRef(function TagInput({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, classNames = {}, clearable = true, createTag, defaultInputValue = '', defaultValue = [], delimiters = defaultTagInputDelimiters, disabled, form, fullWidth = true, getTagValueKey = defaultTagValueKey, id, inputProps = {}, inputValue, invalid = false, labels, maxTags, maxVisibleTags, showAllTagsLabel = count => `Show all ${count} tags`, showFewerTagsLabel = 'Show fewer tags', name, onClick, onInputValueChange, onValidationError, onValueChange, placeholder, readOnly, required, seed, size = 'md', validationMessage, validateTag, value, variant = 'outline', ...rootProps }, forwardedRef) {
+export const TagInput = forwardRef(function TagInput(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, classNames = {}, clearable = true, createTag, defaultInputValue = '', defaultValue = [], delimiters = defaultTagInputDelimiters, disabled, form, fullWidth = true, getTagValueKey = defaultTagValueKey, id, inputProps = {}, inputValue, invalid = false, labels, maxTags, maxVisibleTags, showAllTagsLabel = count => t('tagInput.all', { count }), showFewerTagsLabel = t('tagInput.fewer'), name, onClick, onInputValueChange, onValidationError, onValueChange, placeholder, readOnly, required, seed, size = 'md', validationMessage, validateTag, value, variant = 'outline', ...rootProps } = inkraProps;
     const generatedId = useId();
     const inputRef = useRef(null);
     const removeRefs = useRef(new Map());
@@ -78,7 +73,7 @@ export const TagInput = forwardRef(function TagInput({ 'aria-describedby': ariaD
     const draftControlled = inputValue !== undefined;
     const currentTags = tagsControlled ? value : uncontrolledTags;
     const currentDraft = draftControlled ? inputValue : uncontrolledDraft;
-    const copy = useMemo(() => resolvedLabels(labels), [labels]);
+    const copy = useMemo(() => resolvedLabels(labels, t), [labels, t]);
     const activeValidationMessage = validationMessage ?? localValidationMessage;
     const messageId = activeValidationMessage ? `inkra-tag-input-${generatedId}-message` : undefined;
     const state = useResolvedControlProps({

package/dist/theme/index.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export type InkraTheme = 'light' | 'dark' | 'auto';
+export type InkraThemeTokens = Partial<Record<`--inkra-${string}`, string | number>>;
+export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Omit to inherit the surrounding theme. auto follows the system through CSS. */
+    theme?: InkraTheme;
+    /** Scoped CSS variables. Lengths must include units, for example "1.5px". */
+    tokens?: InkraThemeTokens;
+}
+/** A CSS scope: never modifies document attributes, storage or sibling themes. */
+export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/theme/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useSyncExternalStore } from 'react';
+const forcedColorsQuery = '(forced-colors: active)';
+function forcedColorsSnapshot() {
+    return typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        && window.matchMedia(forcedColorsQuery).matches;
+}
+function subscribeForcedColors(update) {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+        return () => { };
+    const query = window.matchMedia(forcedColorsQuery);
+    query.addEventListener('change', update);
+    return () => query.removeEventListener('change', update);
+}
+const serverSnapshot = () => false;
+/** A CSS scope: never modifies document attributes, storage or sibling themes. */
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme, tokens, style, className, children, ...props }, ref) {
+    const forcedColors = useSyncExternalStore(subscribeForcedColors, forcedColorsSnapshot, serverSnapshot);
+    const variables = Object.fromEntries(Object.entries(tokens ?? {}).filter(([key, value]) => key.startsWith('--inkra-') && (typeof value === 'string' || typeof value === 'number' && Number.isFinite(value))));
+    // Let the existing system-color tokens win over user pigments in high contrast.
+    const scopedStyle = Object.fromEntries(Object.entries({ ...variables, ...style }).filter(([key]) => !forcedColors || !key.startsWith('--inkra-')));
+    return _jsx("div", { ...props, ref: ref, className: ['inkra-theme-provider', className].filter(Boolean).join(' '), "data-theme": theme, "data-inkra-theme": theme, style: { color: 'var(--inkra-ink)', fontFamily: 'var(--inkra-font-body)', ...scopedStyle }, children: children });
+});

package/dist/time-picker/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useInkraLocale } from '../i18n/index.js';
 import { Button, ButtonGroup } from '../Button.js';
 import { useResolvedControlProps } from '../form/controlProps.js';
 import { mergeAriaIds, useFieldContext } from '../form/context.js';
@@ -57,13 +58,12 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
     const secondsVisible = showSeconds || (step !== undefined && step !== 'any' && Number(step) % 60 !== 0);
     const resolvedStep = step ?? (secondsVisible ? 1 : 60);
     const stepBase = String(defaultValue ?? initialValue.current);
-    const resolvedLocale = locale ?? lang ?? (hourCycle === 'h12' ? 'en-US' : 'en-GB');
-    const zh = resolvedLocale.toLowerCase().startsWith('zh');
-    const copy = zh
-        ? { title: '选择时间', hour: '时', minute: '分', second: '秒', period: '时段', am: '上午', pm: '下午',
-            done: '确定', cancel: '取消', clear: '清空时间', invalid: '请选择符合时间范围和步进的时间。' }
-        : { title: 'Choose time', hour: 'Hour', minute: 'Minute', second: 'Second', period: 'Period', am: 'AM', pm: 'PM',
-            done: 'Apply', cancel: 'Cancel', clear: 'Clear time', invalid: 'Choose a time within the allowed range and step.' };
+    const { locale: resolvedLocale, t } = useInkraLocale(locale ?? lang, hourCycle === 'h12' ? 'en-US' : 'en-GB');
+    const copy = {
+        title: t('timePicker.title'), hour: t('timePicker.hour'), minute: t('timePicker.minute'),
+        second: t('timePicker.second'), period: t('timePicker.period'), am: t('timePicker.am'), pm: t('timePicker.pm'),
+        done: t('common.apply'), cancel: t('common.cancel'), clear: t('timePicker.clear'), invalid: t('timePicker.invalid'),
+    };
     const currentParts = partsOf(currentValue);
     const hasCurrentParts = currentParts !== undefined;
     const formatter = useMemo(() => hasCurrentParts ? new Intl.DateTimeFormat(resolvedLocale, {

package/dist/timeline/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 } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilLine } from '../PencilLine.js';
@@ -9,7 +10,9 @@ const markerPaths = [
     { d: 'M16 11v6l4 3' },
 ];
 const copy = (value) => typeof value === 'string' ? _jsx(PencilText, { children: value }) : value;
-export const Timeline = forwardRef(function Timeline({ 'aria-label': ariaLabel = 'Timeline', className, items, orientation = 'vertical', ...props }, ref) {
+export const Timeline = forwardRef(function Timeline(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel = t('timeline.label'), className, items, orientation = 'vertical', ...props } = inkraProps;
     return _jsx("ol", { ...props, ref: ref, "aria-label": ariaLabel, className: ['inkra-timeline', className].filter(Boolean).join(' '), "data-orientation": orientation, children: items.map((item, index) => _jsxs("li", { className: "inkra-timeline__item", children: [_jsxs("span", { className: "inkra-timeline__rail", "aria-hidden": "true", children: [_jsx(PencilSurface, { as: "span", className: "inkra-timeline__marker", variant: "quiet", radius: 8, seed: `timeline-${item.id}`, children: _jsx(PencilIcon, { paths: markerPaths, size: 24, sourceSize: 32 }) }), index < items.length - 1 && _jsx(PencilLine, { className: "inkra-timeline__connector", orientation: orientation === 'vertical' ? 'vertical' : 'horizontal', seed: `timeline-line-${item.id}` })] }), _jsxs("div", { className: "inkra-timeline__body", children: [item.dateTime
                             ? _jsx("time", { className: "inkra-timeline__date", dateTime: item.dateTime, children: copy(item.date) })
                             : _jsx("span", { className: "inkra-timeline__date", children: copy(item.date) }), _jsx("div", { className: "inkra-timeline__title", children: copy(item.title) }), item.description != null && _jsx("div", { className: "inkra-timeline__description", children: copy(item.description) }), item.content != null && _jsx("div", { className: "inkra-timeline__content", children: item.content })] })] }, item.id)) });

package/dist/toast/index.d.ts

@@ -19,7 +19,7 @@ export interface ToastProviderProps {
     viewportLabel?: string | ((placement: ToastPlacement) => string);
     viewportClassName?: string;
 }
-declare function Provider({ children, closeLabel, limit, limits, placement, variant, swipeDirection, timeout, toastManager, viewportClassName, viewportLabel, }: ToastProviderProps): import("react").JSX.Element;
+declare function Provider(inkraProps: ToastProviderProps): import("react").JSX.Element;
 export declare function useToastManager<Data extends object = any>(): {
     toasts: ToastObject<Data>[];
     add: <T extends Data = Data>(options: import("./manager.js").ToastAddOptions<T>) => string;

package/dist/toast/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import { createContext, useContext, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { Button } from '../Button.js';
@@ -58,7 +59,9 @@ function ToastQueue({ closeLabel, placement, swipeDirection, viewportClassName,
                     return (_jsxs(BaseToast.Root, { className: "inkra-toast__root", "data-tone": tone, "data-variant": variant, "data-toast-id": toastItem.id, swipeDirection: directions, toast: toastItem, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__surface", seed: `toast-${toastItem.id}`, variant: variant === 'compact' ? 'full' : tone === 'neutral' ? 'paper' : 'quiet' }), variant === 'compact' && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__wash", seed: `toast-wash-${toastItem.id}`, variant: "selection" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__focus", seed: `toast-focus-${toastItem.id}`, variant: "outline" }), _jsxs(BaseToast.Content, { className: "inkra-toast__content", children: [_jsxs("div", { className: "inkra-toast__copy", children: [toastItem.title != null && (_jsx(BaseToast.Title, { className: "inkra-toast__title", children: text(toastItem.title) })), toastItem.description != null && (_jsx(BaseToast.Description, { className: "inkra-toast__description", children: text(toastItem.description) }))] }), _jsxs("div", { className: "inkra-toast__actions", children: [toastItem.actionProps?.children != null && (_jsx(BaseToast.Action, { className: "inkra-toast__action", render: _jsx(Button, { size: "sm", variant: "outline" }) })), _jsx(BaseToast.Close, { "aria-label": closeLabel, className: "inkra-toast__close", render: _jsx(Button, { size: "icon-sm", variant: "ghost" }), children: _jsx(PencilIcon, { paths: closePaths, size: 20, sourceSize: 24, decorative: true }) })] })] })] }, toastItem.id));
                 }) }) }) }));
 }
-function Provider({ children, closeLabel = 'Close notification', limit, limits, placement = 'bottom-end', variant = 'auto', swipeDirection, timeout, toastManager, viewportClassName, viewportLabel = 'Notifications', }) {
+function Provider(inkraProps) {
+    const { t } = useInkraLocale();
+    const { children, closeLabel = t('toast.close'), limit, limits, placement = 'bottom-end', variant = 'auto', swipeDirection, timeout, toastManager, viewportClassName, viewportLabel = t('toast.viewport'), } = inkraProps;
     const [localManager] = useState(() => createToastManager());
     const manager = toastManager ?? localManager;
     const router = getToastRouter(manager);

package/dist/transfer/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, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { Input } from '../form/Input.js';
@@ -12,29 +13,29 @@ const searchPaths = [
     { d: 'M 11 4 A 7 7 0 1 0 11 18 A 7 7 0 1 0 11 4 M 16 16 L 21 21' },
 ];
 const rightPaths = [{ d: 'M 5 12 L 19 12 M 13 6 L 19 12 L 13 18' }];
-const defaultLabels = {
-    sourceTitle: 'Available',
-    targetTitle: 'Selected',
-    sourceSearchLabel: 'Search available items',
-    targetSearchLabel: 'Search selected items',
-    sourceClearSearch: 'Clear available item search',
-    targetClearSearch: 'Clear selected item search',
-    sourceSearchPlaceholder: 'Search available',
-    targetSearchPlaceholder: 'Search selected',
-    selectAllSource: 'Select all visible available items',
-    selectAllTarget: 'Select all visible selected items',
-    sourceEmpty: 'No available items',
-    targetEmpty: 'No selected items',
-    sourceNoResults: 'No available items match this search',
-    targetNoResults: 'No selected items match this search',
-    moveToTarget: 'Move to selected',
-    moveToSource: 'Move to available',
-    moveSelectedToTarget: 'Move selected visible items to selected',
-    moveSelectedToSource: 'Move selected visible items to available',
-    batchActions: 'Transfer selected visible items',
-    previousPage: 'Previous page',
-    nextPage: 'Next page',
-};
+const defaultLabels = (t) => ({
+    sourceTitle: t('transfer.available'),
+    targetTitle: t('common.selected'),
+    sourceSearchLabel: t('transfer.sourceSearch'),
+    targetSearchLabel: t('transfer.targetSearch'),
+    sourceClearSearch: t('transfer.sourceClear'),
+    targetClearSearch: t('transfer.targetClear'),
+    sourceSearchPlaceholder: t('transfer.sourcePlaceholder'),
+    targetSearchPlaceholder: t('transfer.targetPlaceholder'),
+    selectAllSource: t('transfer.allSource'),
+    selectAllTarget: t('transfer.allTarget'),
+    sourceEmpty: t('transfer.sourceEmpty'),
+    targetEmpty: t('transfer.targetEmpty'),
+    sourceNoResults: t('transfer.sourceNoResults'),
+    targetNoResults: t('transfer.targetNoResults'),
+    moveToTarget: t('transfer.toTarget'),
+    moveToSource: t('transfer.toSource'),
+    moveSelectedToTarget: t('transfer.selectedToTarget'),
+    moveSelectedToSource: t('transfer.selectedToSource'),
+    batchActions: t('transfer.batch'),
+    previousPage: t('common.previousPage'),
+    nextPage: t('common.nextPage'),
+});
 function searchableText(item) {
     const parts = [
         item.searchText,
@@ -52,15 +53,17 @@ function filterPanelItems(items, query, side, filterItem) {
     const needle = query.trim().toLocaleLowerCase();
     return items.filter(item => searchableText(item).includes(needle));
 }
-function defaultCount({ visible, total, selected }) {
-    return selected > 0 ? `${selected} selected · ${visible}/${total}` : `${visible}/${total}`;
+function defaultCount({ visible, total, selected }, t) {
+    return selected > 0 ? t('transfer.count', { selected, visible, total }) : `${visible}/${total}`;
 }
 function itemCopy(item) {
     return _jsxs("span", { className: "inkra-transfer__item-copy", children: [_jsx("span", { className: "inkra-transfer__item-label", children: typeof item.label === 'string' || typeof item.label === 'number'
                     ? _jsx(PencilText, { children: String(item.label) })
                     : item.label }), item.description == null ? null : _jsx("span", { className: "inkra-transfer__item-description", children: item.description })] });
 }
-export const Transfer = forwardRef(function Transfer({ className, defaultTargetKeys = [], disabled = false, filterItem, formatCount = defaultCount, items, labels: labelOverrides, onTargetKeysChange, pageSize, pageLabel = (page, count) => `${page} / ${count}`, renderItem, searchable = true, targetKeys, ...props }, ref) {
+export const Transfer = forwardRef(function Transfer({ className, defaultTargetKeys = [], disabled = false, filterItem, formatCount: formatCountProp, items, labels: labelOverrides, onTargetKeysChange, pageSize, pageLabel = (page, count) => `${page} / ${count}`, renderItem, searchable = true, targetKeys, ...props }, ref) {
+    const { t } = useInkraLocale();
+    const formatCount = formatCountProp ?? ((details) => defaultCount(details, t));
     const generatedId = useId();
     const controlled = targetKeys !== undefined;
     const uniqueItems = useMemo(() => uniqueTransferItems(items), [items]);
@@ -70,7 +73,7 @@ export const Transfer = forwardRef(function Transfer({ className, defaultTargetK
     const currentTargetSet = useMemo(() => new Set(currentTargetKeys), [currentTargetKeys]);
     const itemsById = useMemo(() => new Map(uniqueItems.map(item => [item.id, item])), [uniqueItems]);
     const panels = useMemo(() => splitTransferItems(uniqueItems, currentTargetKeys), [uniqueItems, currentTargetKeys]);
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const labels = { ...defaultLabels(t), ...labelOverrides };
     const [queries, setQueries] = useState({ source: '', target: '' });
     const [pages, setPages] = useState({ source: 0, target: 0 });
     const pageLength = pageSize !== undefined && Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : undefined;

package/dist/tree/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, } from 'react-aria-components/Tree';
 import { Button as AriaButton } from 'react-aria-components/Button';
 import { forwardRef } from 'react';
@@ -6,14 +7,18 @@ import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 const chevronIcon = [{ d: 'M 7 10 L 12 15 L 17 10' }];
-function TreeRootInner({ className, style, indent = 24, size = 'md', emptyState = 'No items', selectionMode = 'single', selectionBehavior = 'toggle', ...props }, ref) {
+function TreeRootInner(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, style, indent = 24, size = 'md', emptyState = t('common.noItems'), selectionMode = 'single', selectionBehavior = 'toggle', ...props } = inkraProps;
     return _jsx(AriaTree, { ...props, ref: ref, className: ['inkra-tree', className].filter(Boolean).join(' '), "data-size": size, style: { '--inkra-tree-indent': `${Number.isFinite(indent) ? Math.max(0, indent) : 24}px`, ...style }, selectionMode: selectionMode, selectionBehavior: selectionBehavior, renderEmptyState: () => _jsx("div", { className: "inkra-tree__empty", children: emptyState }) });
 }
 const TreeRoot = forwardRef(TreeRootInner);
 const TreeItem = forwardRef(function TreeItem({ className, ...props }, ref) {
     return _jsx(AriaTreeItem, { ...props, ref: ref, className: ['inkra-tree__item', className].filter(Boolean).join(' ') });
 });
-const TreeItemContent = forwardRef(function TreeItemContent({ children, className, icon, disclosureIcon, expandLabel = 'Expand item', collapseLabel = 'Collapse item', }, ref) {
+const TreeItemContent = forwardRef(function TreeItemContent(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { children, className, icon, disclosureIcon, expandLabel = t('tree.expand'), collapseLabel = t('tree.collapse'), } = inkraProps;
     return _jsx(AriaTreeItemContent, { ref: ref, children: ({ hasChildItems, isExpanded, isSelected, isFocusVisible, isDisabled, level, id, }) => {
             const state = { isExpanded, hasChildItems, isSelected, isDisabled, level };
             const resolvedIcon = typeof icon === 'function' ? icon(state) : icon;

package/dist/tree-select/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, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button, ButtonGroup } from '../Button.js';
 import { Input } from '../form/Input.js';
@@ -56,7 +57,8 @@ const TreeSelectTree = forwardRef(function TreeSelectTree({ nodes, renderLabel,
     return _jsx(Tree.Root, { "aria-label": treeLabel, className: "inkra-tree-select__tree", emptyState: emptyContent, expandedKeys: effectiveExpanded, onExpandedChange: onExpandedChange, onSelectionChange: onSelectionChange, ref: ref, selectedKeys: selectedSet, selectionMode: multiple ? 'multiple' : 'single', children: treeItems });
 });
 export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
-    const { items, branchSelection = 'leaf', selectionPropagation = 'none', renderLabel, renderValue, placeholder = 'Select an item', searchPlaceholder = 'Search tree', emptyContent = 'No matching items', clearable = true, clearLabel = 'Clear selection', treeLabel = 'Tree options', expandLabel = 'Expand item', collapseLabel = 'Collapse item', size = 'md', name, form, disabled, readOnly, required, invalid, open: controlledOpen, defaultOpen = false, onOpenChange, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, id, className, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
+    const { t } = useInkraLocale();
+    const { items, branchSelection = 'leaf', selectionPropagation = 'none', renderLabel, renderValue, placeholder = t('treeSelect.placeholder'), searchPlaceholder = t('treeSelect.search'), emptyContent = t('treeSelect.empty'), clearable = true, clearLabel = t('select.clear'), treeLabel = t('treeSelect.options'), expandLabel = t('tree.expand'), collapseLabel = t('tree.collapse'), size = 'md', name, form, disabled, readOnly, required, invalid, open: controlledOpen, defaultOpen = false, onOpenChange, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, id, className, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
     const field = useFieldContext();
     const generatedId = useId();
     const controlId = field?.controlId ?? id ?? `inkra-tree-select-${generatedId}`;

package/dist/upload/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, memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { Progress } from '../display/index.js';
@@ -10,23 +11,23 @@ const uploadPaths = [
     { d: 'm17 8-5-5-5 5' },
     { d: 'M12 3v12' },
 ];
-const defaultLabels = {
-    browse: 'Choose files',
-    drop: 'or drop files here',
-    selected: 'Selected',
-    upload: 'Upload',
-    uploading: 'Uploading',
-    success: 'Uploaded',
-    error: 'Upload failed',
-    cancelled: 'Cancelled',
-    retry: 'Retry',
-    cancel: 'Cancel',
-    remove: 'Remove',
-    rejected: 'Files not added',
-    acceptError: 'This file type is not accepted.',
-    sizeError: maxSize => `File exceeds the ${formatBytes(maxSize)} limit.`,
-    countError: maxFiles => `Only ${maxFiles} file${maxFiles === 1 ? '' : 's'} may be selected.`,
-};
+const defaultLabels = (t) => ({
+    browse: t('upload.browse'),
+    drop: t('upload.drop'),
+    selected: t('common.selected'),
+    upload: t('upload.upload'),
+    uploading: t('upload.uploading'),
+    success: t('upload.success'),
+    error: t('upload.failed'),
+    cancelled: t('upload.cancelled'),
+    retry: t('common.retry'),
+    cancel: t('common.cancel'),
+    remove: t('common.remove'),
+    rejected: t('upload.rejected'),
+    acceptError: t('upload.acceptError'),
+    sizeError: maxSize => t('upload.sizeError', { size: formatBytes(maxSize) }),
+    countError: maxFiles => t(maxFiles === 1 ? 'upload.countErrorOne' : 'upload.countError', { count: maxFiles }),
+});
 function formatBytes(value) {
     if (value < 1024)
         return `${value} B`;
@@ -60,6 +61,7 @@ const UploadRow = memo(function UploadRow({ item, labels, disabled, canUpload, s
     return _jsx("li", { className: "inkra-upload__item", "data-status": item.status, children: _jsxs(PencilSurface, { className: "inkra-upload__item-surface", variant: "paper", radius: 8, children: [_jsxs("div", { className: "inkra-upload__file", children: [_jsx(PencilText, { className: "inkra-upload__name", ellipsis: true, children: item.file.name }), _jsxs("span", { className: "inkra-upload__meta", children: [formatBytes(item.file.size), " \u00B7 ", statusLabel(item.status, labels)] }), item.status === 'uploading' && _jsx(Progress, { size: "sm", value: item.progress ?? 0, "aria-label": `${item.file.name}: ${Math.round(item.progress ?? 0)}%` }), item.error && _jsx("span", { className: "inkra-upload__error", children: item.error })] }), _jsxs("div", { className: "inkra-upload__actions", children: [item.status === 'uploading' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => cancel(item.id), children: labels.cancel }), canUpload && item.status === 'selected' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id), children: labels.upload }), canUpload && (item.status === 'error' || item.status === 'cancelled') && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id, 'retry'), children: labels.retry }), _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => remove(item.id), children: labels.remove })] })] }) });
 });
 export const Upload = forwardRef(function Upload({ accept, autoUpload = true, capture, className, defaultFiles = [], disabled = false, files, inputProps, labels: labelOverrides, maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, multiple = true, onFilesChange, onReject, onUpload, validate, 'aria-label': ariaLabel, ...props }, ref) {
+    const { t } = useInkraLocale();
     const instanceId = useId();
     const inputRef = useRef(null);
     const itemCounter = useRef(0);
@@ -74,7 +76,8 @@ export const Upload = forwardRef(function Upload({ accept, autoUpload = true, ca
     const itemsRef = useRef(items);
     itemsRef.current = items;
     disabledRef.current = disabled;
-    const labelValues = { ...defaultLabels, ...labelOverrides };
+    const localizedDefaults = useMemo(() => defaultLabels(t), [t]);
+    const labelValues = { ...localizedDefaults, ...labelOverrides };
     // Snapshot scalar/function values so same-object label edits remain observable.
     const labels = useMemo(() => labelValues, [
         labelValues.browse, labelValues.drop, labelValues.selected, labelValues.upload,

package/dist/virtual-list/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { useInkraLocale } from '../i18n/index.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
@@ -12,7 +13,9 @@ function classes(...values) {
 function toEngineScrollOptions(options) {
     return options;
 }
-function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabel = 'No items', estimateSize, gap, getItemProps, getScrollElement, height, initialOffset = 0, itemKey, items, listLabel, listRole = 'list', measureItems = false, onKeyDown, overscan, paddingEnd, paddingStart, renderItem, role: roleProp, scrollMargin, ssrItemCount, style, tabIndex, ...props }, forwardedRef) {
+function VirtualListInner(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel, className, empty, emptyLabel = t('common.noItems'), estimateSize, gap, getItemProps, getScrollElement, height, initialOffset = 0, itemKey, items, listLabel, listRole = 'list', measureItems = false, onKeyDown, overscan, paddingEnd, paddingStart, renderItem, role: roleProp, scrollMargin, ssrItemCount, style, tabIndex, ...props } = inkraProps;
     const rootRef = useRef(null);
     const itemsRef = useRef(items);
     itemsRef.current = items;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",
@@ -21,6 +21,16 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js",
+      "default": "./dist/i18n/index.js"
+    },
     "./PencilSurface": {
       "types": "./dist/PencilSurface.d.ts",
       "import": "./dist/PencilSurface.js",