@inkra/react 0.4.3 → 0.5.0

package/dist/index.js

@@ -1,4 +1,6 @@
 export { Button, ButtonGroup, ButtonLink } from './Button.js';
+export * from './i18n/index.js';
+export * from './theme/index.js';
 export * from './overlay/index.js';
 export * from './form/index.js';
 export * from './input-number/index.js';

package/dist/input-number/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, useImperativeHandle, useRef, useState } from 'react';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { Button } from '../Button.js';
@@ -13,7 +14,9 @@ const minusPaths = [{ d: 'M5 12h14' }];
 const finiteValue = (value) => typeof value === 'number' && Number.isFinite(value) ? value : null;
 const format = (value) => String(finiteValue(value) ?? '');
 const numberFromDraft = (draft) => draft === '' ? null : finiteValue(Number(draft));
-export const InputNumber = forwardRef(function InputNumber({ classNames, controls = true, decrementButtonLabel = 'Decrease value', defaultValue, disabled, incrementButtonLabel = 'Increase value', inputMode = 'decimal', max, min, onChange, onBlur, onKeyDown, onValueChange, pressAndHold = true, readOnly, repeatDelay = 400, repeatInterval = 80, size = 'md', step = 1, stepModifiers, textAlign = 'center', value, ...props }, forwardedRef) {
+export const InputNumber = forwardRef(function InputNumber(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { classNames, controls = true, decrementButtonLabel = t('inputNumber.decrease'), defaultValue, disabled, incrementButtonLabel = t('inputNumber.increase'), inputMode = 'decimal', max, min, onChange, onBlur, onKeyDown, onValueChange, pressAndHold = true, readOnly, repeatDelay = 400, repeatInterval = 80, size = 'md', step = 1, stepModifiers, textAlign = 'center', value, ...props } = inkraProps;
     const inputRef = useRef(null);
     const isControlled = value !== undefined;
     const [draft, setDraft] = useState(() => format(isControlled ? value : defaultValue));

package/dist/internal/textRenderer.d.ts

@@ -16,6 +16,7 @@ export interface PencilTextSprite {
 }
 export declare const pencilLettering: PencilLetteringSettings;
 export declare const pencilHandwriting = "\"Trip Map Hand\",\"HanziPen SC\",\"Hannotate SC\",\"Kaiti SC\",\"STKaiti\",cursive";
+export declare function boundedTextResolution(width: number, height: number, dpr: number): number;
 export declare function renderPencilText(text: string, options: {
     size: number;
     family?: string;

package/dist/internal/textRenderer.js

@@ -9,6 +9,11 @@ export const pencilLettering = Object.freeze({
 });
 export const pencilHandwriting = '"Trip Map Hand","HanziPen SC","Hannotate SC","Kaiti SC","STKaiti",cursive';
 const TEXT_PIXEL_LIMIT = 524288;
+export function boundedTextResolution(width, height, dpr) {
+    if (![width, height, dpr].every(value => Number.isFinite(value) && value > 0))
+        return 0;
+    return Math.floor(Math.min(Math.max(2, Math.min(4, Math.ceil(dpr * 2))), Math.sqrt(TEXT_PIXEL_LIMIT / (width * height)), 8192 / width, 8192 / height));
+}
 const textCache = new BoundedCache(160, 16 * 1024 * 1024);
 const glyphCache = new BoundedCache(512, 8 * 1024 * 1024);
 const clamp = (value) => Math.max(0, Math.min(1, value));
@@ -75,11 +80,12 @@ export function renderPencilText(text, options) {
     if (text.length > 256 || !Number.isFinite(size) || size <= 0 || size > 128) {
         throw new RangeError('Pencil text exceeds the bounded renderer input');
     }
-    const resolution = Math.max(2, Math.min(4, Math.ceil(dpr * 2)));
+    let resolution = Math.max(2, Math.min(4, Math.ceil(dpr * 2)));
     const font = `${options.style ?? 'normal'} ${options.weight ?? '400'} ${size}px ${family}`;
     const fontReady = document.fonts?.check(font, text) ?? false;
     const key = cache ? JSON.stringify([
         PENCIL_RENDERER_VERSION,
+        'adaptive-text-raster-v1',
         text,
         size,
         font,
@@ -113,7 +119,9 @@ export function renderPencilText(text, options) {
     const descent = Math.ceil(size * 0.35);
     const width = advance + padding * 2;
     const height = ascent + descent + padding * 2;
-    if (width * height * resolution ** 2 > TEXT_PIXEL_LIMIT) {
+    // Wide lines on Retina displays can retain pencil ink at a lower sampling rate.
+    resolution = boundedTextResolution(width, height, dpr);
+    if (resolution < 1) {
         throw new RangeError('Pencil text exceeds the bounded pixel budget');
     }
     mask.width = width * resolution;

package/dist/journey-map/index.d.ts

@@ -36,4 +36,4 @@ export interface JourneyMapProps extends HTMLAttributes<HTMLDivElement> {
         attribution?: string;
     };
 }
-export declare function JourneyMap({ places, routes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay, height, interactive, scrollWheelZoom, showControls, showPlaceList, focusSelectedPlace, labels, className, ...props }: JourneyMapProps): import("react").JSX.Element;
+export declare function JourneyMap({ places, routes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay, height, interactive, scrollWheelZoom, showControls, showPlaceList, focusSelectedPlace, labels: labelOverrides, className, ...props }: JourneyMapProps): import("react").JSX.Element;

package/dist/journey-map/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../Button.js';
@@ -9,10 +10,12 @@ import { TravelIcon } from '../internal/travelIcons.js';
 import { paintTerrain, paintStop, paintSea } from './terrain.js';
 import { MapScale } from './MapScale.js';
 import { seedToNumber } from '../internal/random.js';
-const defaults = { zoomIn: 'Zoom in', zoomOut: 'Zoom out', reset: 'Reset view', unavailable: 'Map unavailable. Choose a place below.' };
+const defaults = (t) => ({ zoomIn: t('common.zoomIn'), zoomOut: t('common.zoomOut'), reset: t('common.resetView'), unavailable: t('map.unavailable') });
 const noRoutes = [];
 const valid = (place) => Number.isFinite(place.latitude) && Number.isFinite(place.longitude) && Math.abs(place.latitude) <= 85 && Math.abs(place.longitude) <= 180;
-export function JourneyMap({ places, routes = noRoutes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay = 'inline', height = 480, interactive = true, scrollWheelZoom = false, showControls = true, showPlaceList = false, focusSelectedPlace = false, labels = defaults, className, ...props }) {
+export function JourneyMap({ places, routes = noRoutes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay = 'inline', height = 480, interactive = true, scrollWheelZoom = false, showControls = true, showPlaceList = false, focusSelectedPlace = false, labels: labelOverrides, className, ...props }) {
+    const { t } = useInkraLocale();
+    const labels = { ...defaults(t), ...labelOverrides };
     const root = useRef(null);
     const host = useRef(null);
     const mapRef = useRef(null);
@@ -193,5 +196,5 @@ export function JourneyMap({ places, routes = noRoutes, geography, landCover, wa
         else
             map.scrollWheelZoom.disable();
     }, [interactive, scrollWheelZoom, ready]);
-    return _jsxs("div", { ...props, ref: root, className: ['inkra-journey-map', className].filter(Boolean).join(' '), children: [placeLabels.map(({ place, node }) => createPortal(_jsx(PencilText, { children: place.label }), node, place.id)), _jsxs("div", { className: "inkra-journey-map__viewport", style: { height: Math.max(240, Math.min(800, height)) }, children: [attributionDisplay === 'popover' && _jsx("div", { className: "inkra-journey-map__credits", children: _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": labels.attribution ?? 'Map credits', title: labels.attribution ?? 'Map credits', children: _jsx(TravelIcon, { name: "info" }) }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "end", sideOffset: 8, collisionPadding: 20, className: "inkra-journey-map__credits-content", children: [_jsx(Popover.Title, { children: labels.attribution ?? 'Map credits' }), _jsx(Popover.Description, { children: attribution })] }) })] }) }), _jsx("div", { ref: host, className: "inkra-journey-map__host", "aria-label": props['aria-label'] ?? 'Map' }), showControls && _jsxs("div", { className: "inkra-journey-map__tools", children: [_jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.zoomIn, title: labels.zoomIn, onClick: () => { mapRef.current?.stop(); mapRef.current?.zoomIn(); }, children: _jsx(TravelIcon, { name: "plus" }) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.zoomOut, title: labels.zoomOut, onClick: () => { mapRef.current?.stop(); mapRef.current?.zoomOut(); }, children: _jsx(TravelIcon, { name: "minus" }) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.reset, title: labels.reset, onClick: () => { mapRef.current?.stop(); fitRef.current(); }, children: _jsx(TravelIcon, { name: "reset" }) })] }), ready && _jsx(MapScale, { map: mapRef.current }), failed && _jsx("p", { role: "status", children: labels.unavailable })] }), attributionDisplay === 'inline' && _jsx("p", { className: "inkra-journey-map__attribution", children: attribution }), (showPlaceList || !ready || failed) && _jsx("ol", { className: "inkra-journey-map__places", children: places.filter(valid).map((place, index) => _jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": selectedPlace === place.id, onClick: () => { mapRef.current?.panTo([place.latitude, place.longitude], { animate: false }); onPlaceSelect?.(place); }, children: [_jsx("span", { "aria-hidden": "true", children: index + 1 }), _jsx(PencilText, { children: place.label })] }) }, place.id)) })] });
+    return _jsxs("div", { ...props, ref: root, className: ['inkra-journey-map', className].filter(Boolean).join(' '), children: [placeLabels.map(({ place, node }) => createPortal(_jsx(PencilText, { children: place.label }), node, place.id)), _jsxs("div", { className: "inkra-journey-map__viewport", style: { height: Math.max(240, Math.min(800, height)) }, children: [attributionDisplay === 'popover' && _jsx("div", { className: "inkra-journey-map__credits", children: _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": labels.attribution ?? t('map.credits'), title: labels.attribution ?? t('map.credits'), children: _jsx(TravelIcon, { name: "info" }) }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "end", sideOffset: 8, collisionPadding: 20, className: "inkra-journey-map__credits-content", children: [_jsx(Popover.Title, { children: labels.attribution ?? t('map.credits') }), _jsx(Popover.Description, { children: attribution })] }) })] }) }), _jsx("div", { ref: host, className: "inkra-journey-map__host", "aria-label": props['aria-label'] ?? t('map.label') }), showControls && _jsxs("div", { className: "inkra-journey-map__tools", children: [_jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.zoomIn, title: labels.zoomIn, onClick: () => { mapRef.current?.stop(); mapRef.current?.zoomIn(); }, children: _jsx(TravelIcon, { name: "plus" }) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.zoomOut, title: labels.zoomOut, onClick: () => { mapRef.current?.stop(); mapRef.current?.zoomOut(); }, children: _jsx(TravelIcon, { name: "minus" }) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.reset, title: labels.reset, onClick: () => { mapRef.current?.stop(); fitRef.current(); }, children: _jsx(TravelIcon, { name: "reset" }) })] }), ready && _jsx(MapScale, { map: mapRef.current }), failed && _jsx("p", { role: "status", children: labels.unavailable })] }), attributionDisplay === 'inline' && _jsx("p", { className: "inkra-journey-map__attribution", children: attribution }), (showPlaceList || !ready || failed) && _jsx("ol", { className: "inkra-journey-map__places", children: places.filter(valid).map((place, index) => _jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": selectedPlace === place.id, onClick: () => { mapRef.current?.panTo([place.latitude, place.longitude], { animate: false }); onPlaceSelect?.(place); }, children: [_jsx("span", { "aria-hidden": "true", children: index + 1 }), _jsx(PencilText, { children: place.label })] }) }, place.id)) })] });
 }

package/dist/keypad/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, useId, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
@@ -20,7 +21,9 @@ function keyVariant(key) {
         return 'secondary';
     return 'default';
 }
-export const Keypad = forwardRef(function Keypad({ 'aria-label': ariaLabel, className, defaultValue = '', disabled = false, emptyContent = null, label = 'Keypad', layout, maxLength, onConfirm, onKeyPress, onValueChange, value, ...props }, ref) {
+export const Keypad = forwardRef(function Keypad(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel, className, defaultValue = '', disabled = false, emptyContent = null, label = t('keypad.label'), layout, maxLength, onConfirm, onKeyPress, onValueChange, value, ...props } = inkraProps;
     const id = useId();
     const controlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);

package/dist/log/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, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
@@ -7,16 +8,16 @@ import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { isNearLogBottom, shouldFollowLogUpdate } from './model.js';
-const defaultLabels = {
-    filters: 'Filter log levels',
-    allLevels: 'All',
-    pause: 'Pause automatic follow',
-    resume: 'Resume automatic follow',
-    latest: 'Go to latest record',
-    empty: 'No records yet',
-    noMatches: 'No records match the selected levels',
-    list: 'Log records',
-};
+const defaultLabels = (t) => ({
+    filters: t('log.filters'),
+    allLevels: t('common.all'),
+    pause: t('log.pause'),
+    resume: t('log.resume'),
+    latest: t('log.latest'),
+    empty: t('log.empty'),
+    noMatches: t('log.noMatches'),
+    list: t('log.list'),
+});
 const defaultTones = {
     debug: 'neutral',
     info: 'info',
@@ -42,7 +43,8 @@ function normalizedThreshold(value) {
     return Number.isFinite(value) ? Math.max(0, value) : 32;
 }
 export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className, defaultFilteredLevels, defaultPaused = false, empty, filteredLevels, items, labels: labelOverrides, levels, nearBottomThreshold, noMatches, onFilteredLevelsChange, onPausedChange, paused, showFollowControl = true, showLevelFilter = true, viewportProps, ...props }, ref) {
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const { t } = useInkraLocale();
+    const labels = { ...defaultLabels(t), ...labelOverrides };
     const resolvedLevels = useMemo(() => {
         if (levels)
             return levels;

package/dist/markdown/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 ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useMemo, } from 'react';
@@ -153,17 +154,18 @@ function createMarkdownComponents(headingLevelOffset, labels) {
     };
 }
 export const Markdown = forwardRef(function Markdown({ children, className, components, headingLevelOffset = 0, labels, transformUrl, ...props }, ref) {
+    const { t } = useInkraLocale();
     const offset = Number.isFinite(headingLevelOffset) ? Math.trunc(headingLevelOffset) : 0;
     const resolvedLabels = useMemo(() => ({
-        code: labels?.code ?? 'Code block',
-        plainText: labels?.plainText ?? 'Plain text',
-        copy: labels?.copy ?? 'Copy code',
-        copied: labels?.copied ?? 'Code copied',
-        copyFailed: labels?.copyFailed ?? 'Copy failed. Select the code to copy it manually.',
-        table: labels?.table ?? 'Markdown table',
-        taskChecked: labels?.taskChecked ?? 'Completed task',
-        taskUnchecked: labels?.taskUnchecked ?? 'Incomplete task',
-    }), [labels?.code, labels?.plainText, labels?.copy, labels?.copied, labels?.copyFailed, labels?.table, labels?.taskChecked, labels?.taskUnchecked]);
+        code: labels?.code ?? t('markdown.code'),
+        plainText: labels?.plainText ?? t('markdown.plain'),
+        copy: labels?.copy ?? t('markdown.copy'),
+        copied: labels?.copied ?? t('markdown.copied'),
+        copyFailed: labels?.copyFailed ?? t('markdown.copyFailed'),
+        table: labels?.table ?? t('markdown.table'),
+        taskChecked: labels?.taskChecked ?? t('markdown.checked'),
+        taskUnchecked: labels?.taskUnchecked ?? t('markdown.unchecked'),
+    }), [t, labels?.code, labels?.plainText, labels?.copy, labels?.copied, labels?.copyFailed, labels?.table, labels?.taskChecked, labels?.taskUnchecked]);
     const builtIns = useMemo(() => createMarkdownComponents(offset, resolvedLabels), [offset, resolvedLabels]);
     const resolvedComponents = useMemo(() => ({ ...builtIns, ...components }), [builtIns, components]);
     const urlTransform = useCallback((url, key) => {

package/dist/node-graph/index.d.ts

@@ -111,7 +111,7 @@ export interface NodeGraphControlsProps extends HTMLAttributes<HTMLDivElement> {
     zoomOutLabel?: string;
     fitViewLabel?: string;
 }
-declare function NodeGraphControls({ className, fitViewOptions, zoomInLabel, zoomOutLabel, fitViewLabel, ...props }: NodeGraphControlsProps): import("react").JSX.Element;
+declare function NodeGraphControls(inkraProps: NodeGraphControlsProps): import("react").JSX.Element;
 export declare function applyNodeGraphNodeChanges<NodeType extends NodeGraphNode>(changes: NodeGraphNodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
 export declare function applyNodeGraphEdgeChanges<EdgeType extends NodeGraphEdge>(changes: NodeGraphEdgeChange<EdgeType>[], edges: EdgeType[]): EdgeType[];
 export declare function addNodeGraphEdge<EdgeType extends NodeGraphEdge>(connection: NodeGraphConnection | EdgeType, edges: EdgeType[]): EdgeType[];

package/dist/node-graph/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 { EdgeLabelRenderer, Handle, Panel, Position, ReactFlow, ReactFlowProvider, addEdge as addFlowEdge, applyEdgeChanges as applyFlowEdgeChanges, applyNodeChanges as applyFlowNodeChanges, getBezierPath, useReactFlow, useViewport, } from '@xyflow/react';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
@@ -238,7 +239,9 @@ function NodeGraphConnectionLine({ fromX, fromY, toX, toY, fromPosition, toPosit
     });
     return _jsx(PencilEdgeCanvas, { id: "connection-preview", path: path, className: "inkra-node-graph__connection-line" });
 }
-function NodeGraphControls({ className, fitViewOptions, zoomInLabel = 'Zoom in', zoomOutLabel = 'Zoom out', fitViewLabel = 'Fit graph to view', ...props }) {
+function NodeGraphControls(inkraProps) {
+    const { t } = useInkraLocale();
+    const { className, fitViewOptions, zoomInLabel = t('common.zoomIn'), zoomOutLabel = t('common.zoomOut'), fitViewLabel = t('graph.fit'), ...props } = inkraProps;
     const flow = useReactFlow();
     const actions = [
         { label: zoomInLabel, paths: zoomInPaths, run: () => flow.zoomIn() },
@@ -250,7 +253,9 @@ function NodeGraphControls({ className, fitViewOptions, zoomInLabel = 'Zoom in',
 function SsrFallback({ nodes, emptyState, label, }) {
     return _jsx("div", { className: "inkra-node-graph__ssr", role: "group", "aria-label": label, children: nodes.length === 0 ? _jsx("div", { className: "inkra-node-graph__empty", children: emptyState }) : _jsx("ul", { children: nodes.map(node => _jsx("li", { children: readableLabel(node.data.label, node.id) }, node.id)) }) });
 }
-function NodeGraphRootInner({ nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, renderNode, renderEdge, renderEdgeLabel, readOnly = false, emptyState = 'No nodes yet', controls = true, controlLabels, fitView = false, fitViewOptions, defaultViewport = { x: 0, y: 0, zoom: 1 }, viewport, onViewportChange, minZoom = 0.25, maxZoom = 2, panOnDrag = true, zoomOnScroll = true, zoomOnPinch = true, connectOnClick = true, onlyRenderVisibleElements = false, className, style, 'aria-label': ariaLabel = 'Node graph', ...props }, forwardedRef) {
+function NodeGraphRootInner(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, renderNode, renderEdge, renderEdgeLabel, readOnly = false, emptyState = t('graph.empty'), controls = true, controlLabels, fitView = false, fitViewOptions, defaultViewport = { x: 0, y: 0, zoom: 1 }, viewport, onViewportChange, minZoom = 0.25, maxZoom = 2, panOnDrag = true, zoomOnScroll = true, zoomOnPinch = true, connectOnClick = true, onlyRenderVisibleElements = false, className, style, 'aria-label': ariaLabel = t('graph.label'), ...props } = inkraProps;
     const [mounted, setMounted] = useState(false);
     const instanceRef = useRef(null);
     useEffect(() => setMounted(true), []);
@@ -307,7 +312,13 @@ function NodeGraphRootInner({ nodes, edges, onNodesChange, onEdgesChange, onConn
     const internalNodes = useMemo(() => nodes.map(adaptNode), [nodes, adaptNode]);
     const internalEdges = useMemo(() => edges.map(adaptEdge), [edges, adaptEdge]);
     const rootStyle = { minHeight: 320, ...style };
-    return _jsx("div", { ...props, "aria-label": ariaLabel, className: ['inkra-node-graph', className].filter(Boolean).join(' '), "data-empty": nodes.length === 0 || undefined, "data-read-only": readOnly || undefined, style: rootStyle, children: !mounted ? _jsx(SsrFallback, { nodes: nodes, emptyState: emptyState, label: ariaLabel }) : _jsxs(ReactFlowProvider, { children: [_jsx(ReactFlow, { "aria-label": ariaLabel, nodes: internalNodes, edges: internalEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onInit: instance => { instanceRef.current = instance; }, onNodesChange: changes => onNodesChange?.(changes), onEdgesChange: changes => onEdgesChange?.(changes), onConnect: readOnly ? undefined : onConnect, isValidConnection: isValidConnection, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, edgesReconnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, deleteKeyCode: readOnly ? null : ['Backspace', 'Delete'], fitView: fitView, fitViewOptions: fitViewOptions, defaultViewport: defaultViewport, viewport: viewport, onViewportChange: onViewportChange, minZoom: minZoom, maxZoom: maxZoom, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, connectOnClick: connectOnClick && !readOnly, connectionLineComponent: NodeGraphConnectionLine, onlyRenderVisibleElements: onlyRenderVisibleElements, noDragClassName: "nodrag", noPanClassName: "nopan", children: controls && _jsx(Panel, { position: "bottom-left", children: _jsx(NodeGraphControls, { fitViewLabel: controlLabels?.fitView, fitViewOptions: fitViewOptions, zoomInLabel: controlLabels?.zoomIn, zoomOutLabel: controlLabels?.zoomOut }) }) }), nodes.length === 0 && _jsx("div", { className: "inkra-node-graph__empty", role: "status", children: emptyState })] }) });
+    return _jsx("div", { ...props, "aria-label": ariaLabel, className: ['inkra-node-graph', className].filter(Boolean).join(' '), "data-empty": nodes.length === 0 || undefined, "data-read-only": readOnly || undefined, style: rootStyle, children: !mounted ? _jsx(SsrFallback, { nodes: nodes, emptyState: emptyState, label: ariaLabel }) : _jsxs(ReactFlowProvider, { children: [_jsx(ReactFlow, { "aria-label": ariaLabel, ariaLabelConfig: {
+                        'node.a11yDescription.default': t('graph.nodeInstructions'),
+                        'node.a11yDescription.keyboardDisabled': t('graph.nodeMoveInstructions'),
+                        'node.a11yDescription.ariaLiveMessage': ({ x, y }) => t('graph.nodeMoved', { x, y }),
+                        'edge.a11yDescription.default': t('graph.edgeInstructions'),
+                        'handle.ariaLabel': t('graph.handle'),
+                    }, nodes: internalNodes, edges: internalEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onInit: instance => { instanceRef.current = instance; }, onNodesChange: changes => onNodesChange?.(changes), onEdgesChange: changes => onEdgesChange?.(changes), onConnect: readOnly ? undefined : onConnect, isValidConnection: isValidConnection, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, edgesReconnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, deleteKeyCode: readOnly ? null : ['Backspace', 'Delete'], fitView: fitView, fitViewOptions: fitViewOptions, defaultViewport: defaultViewport, viewport: viewport, onViewportChange: onViewportChange, minZoom: minZoom, maxZoom: maxZoom, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, connectOnClick: connectOnClick && !readOnly, connectionLineComponent: NodeGraphConnectionLine, onlyRenderVisibleElements: onlyRenderVisibleElements, noDragClassName: "nodrag", noPanClassName: "nopan", children: controls && _jsx(Panel, { position: "bottom-left", children: _jsx(NodeGraphControls, { fitViewLabel: controlLabels?.fitView, fitViewOptions: fitViewOptions, zoomInLabel: controlLabels?.zoomIn, zoomOutLabel: controlLabels?.zoomOut }) }) }), nodes.length === 0 && _jsx("div", { className: "inkra-node-graph__empty", role: "status", children: emptyState })] }) });
 }
 const NodeGraphRoot = forwardRef(NodeGraphRootInner);
 export function applyNodeGraphNodeChanges(changes, nodes) {

package/dist/number-ticker/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, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
@@ -23,7 +24,9 @@ function lettering(content, seed) {
 function accessibleAffix(content) {
     return typeof content === 'string' || typeof content === 'number' ? String(content) : '';
 }
-export const NumberTicker = forwardRef(function NumberTicker({ animate = true, className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+export const NumberTicker = forwardRef(function NumberTicker({ animate = true, className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale: localeProp, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+    const { locale: inheritedLocale } = useInkraLocale();
+    const locale = localeProp ?? inheritedLocale;
     const rootRef = useRef(null);
     const frameRef = useRef(null);
     const deltaTimerRef = useRef(null);

package/dist/overflow-list/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, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { DropdownMenu } from '../dropdown-menu/index.js';
@@ -27,10 +28,9 @@ function assignRef(ref, value) {
     else if (ref)
         ref.current = value;
 }
-function defaultOverflowLabel(count) {
-    return `More items (${count})`;
-}
-function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel = defaultOverflowLabel, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel: overflowLabelProp, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+    const { t } = useInkraLocale();
+    const overflowLabel = overflowLabelProp ?? ((count) => t('overflow.more', { count }));
     const generatedId = useId();
     const rootRef = useRef(null);
     const triggerRef = useRef(null);

package/dist/overlay/Overlay.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';
@@ -43,7 +44,9 @@ export const OverlayClose = forwardRef(function OverlayClose(props, ref) {
     return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
 });
 const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-export const OverlayCloseButton = forwardRef(function OverlayCloseButton({ label = 'Close', className, onFocus, ...props }, ref) {
+export const OverlayCloseButton = forwardRef(function OverlayCloseButton(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { label = t('common.close'), className, 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, ref: ref, type: "button", size: "icon", variant: "ghost", className: classes('inkra-overlay__close-button', className), "aria-label": label, onFocus: event => {
                                 onFocus?.(event);
                                 const dialog = event.currentTarget.closest('[role="dialog"]');
@@ -52,7 +55,9 @@ export const OverlayCloseButton = forwardRef(function OverlayCloseButton({ label
                                     event.preventDefault();
                             }, children: _jsx(PencilIcon, { paths: closePaths, size: 30, sourceSize: 24, decorative: true }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { side: "bottom", align: "end", children: label }) })] }) });
 });
-export const OverlayHeader = forwardRef(function OverlayHeader({ children, className, divided = true, showClose = true, closeLabel = 'Close', action, ...props }, ref) {
+export const OverlayHeader = forwardRef(function OverlayHeader(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { children, className, divided = true, showClose = true, closeLabel = t('common.close'), action, ...props } = inkraProps;
     const id = useId();
     return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__header', className), "data-divided": divided || undefined, children: [_jsx("div", { className: "inkra-overlay__heading", children: children }), (action || showClose) && _jsxs("div", { className: "inkra-overlay__header-actions", children: [action, showClose && _jsx(OverlayCloseButton, { label: closeLabel })] }), divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-header-${id}` })] });
 });

package/dist/pagination/index.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useEffect, useState } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { clampPage, getPaginationEntries, normalizeTotal } from './model.js';
-const defaultLabels = {
-    nav: 'Pagination', first: 'First page', previous: 'Previous page', next: 'Next page', last: 'Last page',
-    page: page => `Page ${page}`, ellipsis: 'More pages',
-};
+const defaultLabels = (t) => ({
+    nav: t('pagination.nav'), first: t('pagination.first'), previous: t('common.previousPage'), next: t('common.nextPage'), last: t('pagination.last'),
+    page: page => t('pagination.page', { page }), ellipsis: t('pagination.more'),
+});
 export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, showPreviousNext = true, hideOnSinglePage = false, simple = false, renderPage, renderSummary, disabled = false, size = 'md', labels, className, ...props }, ref) {
+    const { t } = useInkraLocale();
     const total = normalizeTotal(totalPages);
     const [internalPage, setInternalPage] = useState(() => clampPage(defaultPage, total));
     const current = clampPage(page ?? internalPage, total);
-    const text = { ...defaultLabels, ...labels };
+    const text = { ...defaultLabels(t), ...labels };
     useEffect(() => {
         if (page === undefined)
             setInternalPage(value => clampPage(value, total));

package/dist/pan-zoom/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
@@ -26,7 +27,9 @@ function transformsEqual(left, right) {
 function prefersReducedMotion(element) {
     return element?.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
 }
-function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTransformChange, minScale = 0.25, maxScale = 8, wheel = 'modifier', wheelStep = 0.001, pinch = true, pan = true, keyboard = true, keyboardPanStep = 48, keyboardZoomStep = 0.25, doubleClickZoom = false, disabled = false, readOnly = false, limitToBounds = true, centerZoomedOut = true, centerOnInit = false, fitOnInit = false, className, viewportClassName, contentClassName, style, viewportStyle, contentStyle, viewportProps, contentProps, instructions, 'aria-label': ariaLabel = 'Pan and zoom content', ...props }, forwardedRef) {
+function PanZoomRoot(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { children, value, defaultValue = defaultTransform, onTransformChange, minScale = 0.25, maxScale = 8, wheel = 'modifier', wheelStep = 0.001, pinch = true, pan = true, keyboard = true, keyboardPanStep = 48, keyboardZoomStep = 0.25, doubleClickZoom = false, disabled = false, readOnly = false, limitToBounds = true, centerZoomedOut = true, centerOnInit = false, fitOnInit = false, className, viewportClassName, contentClassName, style, viewportStyle, contentStyle, viewportProps, contentProps, instructions, 'aria-label': ariaLabel = t('panZoom.label'), ...props } = inkraProps;
     const resolvedMinScale = Math.max(Number.isFinite(minScale) ? minScale : 0.25, 0.0001);
     const resolvedMaxScale = Math.max(Number.isFinite(maxScale) ? maxScale : 8, resolvedMinScale);
     const resolvedWheelStep = Number.isFinite(wheelStep) && wheelStep > 0 ? wheelStep : 0.001;
@@ -122,8 +125,8 @@ function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTrans
         ? (keys) => !wheelTargetBlocksZoomRef.current && (keys.includes('Control') || keys.includes('Meta'))
         : () => !wheelTargetBlocksZoomRef.current;
     const defaultInstructions = wheel === 'modifier'
-        ? 'Use Control or Command with the mouse wheel to zoom. Use arrow keys to pan, plus or minus to zoom, and 0 to reset.'
-        : 'Use arrow keys to pan, plus or minus to zoom, and 0 to reset.';
+        ? t('panZoom.modifierInstructions')
+        : t('panZoom.instructions');
     const wheelHint = instructions ?? defaultInstructions;
     const mergedViewportLabel = viewportProps?.['aria-label'] ?? ariaLabel;
     const describedBy = [viewportProps?.['aria-describedby'], keyboard && !disabled ? instructionsId : null]

package/dist/radar/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 { scaleLinear } from 'd3-scale';
 import { curveLinearClosed, lineRadial } from 'd3-shape';
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
@@ -179,7 +180,9 @@ function domainForAxis(axis, values) {
 function paintStyle(color) {
     return { '--inkra-accent': color, '--inkra-accent-soft': color, '--inkra-accent-strong': color };
 }
-export const Radar = forwardRef(function Radar({ axes, series, label, description, size = 'min(100%, 34rem)', maxRadius, levels = 4, showAxes = true, showLabels = true, showLegend = true, showValues = true, showTable = true, legendLabel = 'Series', tableCaption = 'Radar data', seriesLabel = 'Series', missingLabel = 'Missing', emptyMessage = 'No radar data', selectedSeries, defaultSelectedSeries = null, onSelectedSeriesChange, renderAxisLabel, renderValueLabel, getValueLabel, className, style, ...props }, forwardedRef) {
+export const Radar = forwardRef(function Radar(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { axes, series, label, description, size = 'min(100%, 34rem)', maxRadius, levels = 4, showAxes = true, showLabels = true, showLegend = true, showValues = true, showTable = true, legendLabel = t('radar.series'), tableCaption = t('radar.caption'), seriesLabel = t('radar.series'), missingLabel = t('common.missing'), emptyMessage = t('radar.empty'), selectedSeries, defaultSelectedSeries = null, onSelectedSeriesChange, renderAxisLabel, renderValueLabel, getValueLabel, className, style, ...props } = inkraProps;
     const id = useId();
     const labelId = `inkra-radar-${id}-label`;
     const descriptionId = description == null ? undefined : `inkra-radar-${id}-description`;

package/dist/range-slider/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { useInkraLocale } from '../i18n/index.js';
 import { Slider } from '../slider/index.js';
-const DEFAULT_LABELS = ['Minimum value', 'Maximum value'];
 function asRangeValue(value) {
     return [value[0], value[1]];
 }
@@ -15,8 +15,9 @@ function getMinimumSteps(minDistance, step) {
         return 0;
     return Math.ceil(minDistance / step);
 }
-export const RangeSlider = forwardRef(function RangeSlider({ allowCross = false, defaultValue, max = 100, min = 0, minDistance = 0, onValueChange, onValueCommit, step = 1, thumbLabels = DEFAULT_LABELS, value, ...props }, forwardedRef) {
+export const RangeSlider = forwardRef(function RangeSlider({ allowCross = false, defaultValue, max = 100, min = 0, minDistance = 0, onValueChange, onValueCommit, step = 1, thumbLabels, value, ...props }, forwardedRef) {
+    const { t } = useInkraLocale();
     const controlledValue = value === undefined ? undefined : normalizeRangeValue(value);
     const uncontrolledDefault = value === undefined ? normalizeRangeValue(defaultValue ?? [min, max]) : undefined;
-    return _jsx(Slider, { ...props, defaultValue: uncontrolledDefault, max: max, min: min, minStepsBetweenThumbs: allowCross ? 0 : getMinimumSteps(minDistance, step), onValueChange: next => onValueChange?.(asRangeValue(next)), onValueCommit: next => onValueCommit?.(asRangeValue(next)), preserveThumbOrder: !allowCross, ref: forwardedRef, step: step, thumbLabels: thumbLabels, value: controlledValue });
+    return _jsx(Slider, { ...props, defaultValue: uncontrolledDefault, max: max, min: min, minStepsBetweenThumbs: allowCross ? 0 : getMinimumSteps(minDistance, step), onValueChange: next => onValueChange?.(asRangeValue(next)), onValueCommit: next => onValueCommit?.(asRangeValue(next)), preserveThumbOrder: !allowCross, ref: forwardedRef, step: step, thumbLabels: thumbLabels ?? [t('rangeSlider.minimum'), t('rangeSlider.maximum')], value: controlledValue });
 });

package/dist/rating/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, useMemo, useRef, useState, } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
@@ -39,7 +40,9 @@ function previousRatingValue(value, count, step) {
     }
     return value - step;
 }
-export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onValueChange, name, form, hoverPreview = true, onPreviewChange, count: countProp = 5, step: stepProp = 1, clearable = false, disabled = false, readOnly = false, size = 'md', dir, symbol, renderSymbol, getValueLabel = (nextValue, maximum) => `${nextValue} of ${maximum}`, className = '', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, onBlur, onKeyDown, onPointerDown, onPointerLeave, ...props }, forwardedRef) {
+export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onValueChange, name, form, hoverPreview = true, onPreviewChange, count: countProp = 5, step: stepProp = 1, clearable = false, disabled = false, readOnly = false, size = 'md', dir, symbol, renderSymbol, getValueLabel: valueLabelProp, className = '', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, onBlur, onKeyDown, onPointerDown, onPointerLeave, ...props }, forwardedRef) {
+    const { t } = useInkraLocale();
+    const getValueLabel = valueLabelProp ?? ((value, count) => t('rating.value', { value, count }));
     const count = Math.max(1, Math.floor(finitePositive(countProp, 5)));
     const step = Math.min(count, finitePositive(stepProp, 1));
     const controlled = value !== undefined;
@@ -207,7 +210,7 @@ export const Rating = forwardRef(function Rating({ value, defaultValue = 0, onVa
             return symbol;
         return _jsx(PencilIcon, { paths: defaultSymbolPaths, sourceSize: 24, size: defaultIconSize, active: filled, seed: `${symbolId}-${index}` });
     };
-    return (_jsxs("div", { ...props, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Rating'), "aria-labelledby": ariaLabelledBy, "aria-readonly": readOnly || undefined, "aria-valuemax": count, "aria-valuemin": 0, "aria-valuenow": committedValue, "aria-valuetext": getValueLabel(committedValue, count), className: ['inkra-rating', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-previewing": previewing || undefined, "data-readonly": readOnly || undefined, "data-size": size, dir: dir, onBlur: (event) => {
+    return (_jsxs("div", { ...props, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : t('rating.label')), "aria-labelledby": ariaLabelledBy, "aria-readonly": readOnly || undefined, "aria-valuemax": count, "aria-valuemin": 0, "aria-valuenow": committedValue, "aria-valuetext": getValueLabel(committedValue, count), className: ['inkra-rating', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-previewing": previewing || undefined, "data-readonly": readOnly || undefined, "data-size": size, dir: dir, onBlur: (event) => {
             clearPendingKeyboard();
             changePreview(null);
             onBlur?.(event);

package/dist/resizable/index.d.ts

@@ -23,7 +23,7 @@ export interface ResizableHandleProps extends SeparatorProps {
     label?: string;
     lineSeed?: string | number;
 }
-declare function ResizableHandle({ 'aria-label': ariaLabel, children, className, label, lineSeed, ...props }: ResizableHandleProps): import("react").JSX.Element;
+declare function ResizableHandle(inkraProps: ResizableHandleProps): import("react").JSX.Element;
 export declare const Resizable: Readonly<{
     Root: typeof ResizableRoot;
     Panel: typeof ResizablePanel;

package/dist/resizable/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { Group as ResizableGroupPrimitive, Panel as ResizablePanelPrimitive, Separator as ResizableSeparatorPrimitive, useGroupCallbackRef, useGroupRef, usePanelCallbackRef, usePanelRef, } from 'react-resizable-panels';
 import { useCallback, useReducer } from 'react';
 import { PencilLine } from '../PencilLine.js';
@@ -39,7 +40,9 @@ function ResizableRoot({ apiRef, className, defaultLayout, layout, onLayoutChang
 function ResizablePanel({ className, ...props }) {
     return _jsx(ResizablePanelPrimitive, { ...props, className: classes('inkra-resizable__panel', className) });
 }
-function ResizableHandle({ 'aria-label': ariaLabel, children, className, label = 'Resize panels', lineSeed = 'inkra-resizable-handle', ...props }) {
+function ResizableHandle(inkraProps) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel, children, className, label = t('resizable.label'), lineSeed = 'inkra-resizable-handle', ...props } = inkraProps;
     return _jsxs(ResizableSeparatorPrimitive, { ...props, "aria-label": ariaLabel ?? label, className: classes('inkra-resizable__handle', className), children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-resizable__handle-focus", seed: `${lineSeed}-focus`, variant: "outline" }), _jsxs("span", { "aria-hidden": "true", className: "inkra-resizable__handle-mark", children: [_jsx(PencilLine, { className: "inkra-resizable__handle-line inkra-resizable__handle-line--horizontal", seed: `${lineSeed}-horizontal` }), _jsx(PencilLine, { className: "inkra-resizable__handle-line inkra-resizable__handle-line--vertical", orientation: "vertical", seed: `${lineSeed}-vertical` }), children] })] });
 }
 export const Resizable = /* @__PURE__ */ Object.freeze({

package/dist/select/SearchableSelect.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 { Combobox } from '@base-ui/react/combobox';
 import { DirectionProvider } from '@base-ui/react/direction-provider';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
@@ -15,7 +16,8 @@ const chevronPaths = [{ d: 'M6 9l6 6 6-6' }];
 const checkPaths = [{ d: 'M5 12l4 4L19 6' }];
 const clearPaths = [{ d: 'M6 6l12 12M18 6L6 18' }];
 const SearchableControl = forwardRef(function SearchableControl(props, forwardedRef) {
-    const { items, searchPlacement = 'trigger', placeholder = 'Select an option', searchPlaceholder = 'Search options', emptyContent = 'No matching options', clearable = true, clearLabel = 'Clear selection', openLabel = 'Show options', size = 'md', multiple = false, value, defaultValue, onValueChange: _onValueChange, name, form, dir, disabled, readOnly, required, invalid, id, className, children: _children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
+    const { t } = useInkraLocale();
+    const { items, searchPlacement = 'trigger', placeholder = t('select.placeholder'), searchPlaceholder = t('select.search'), emptyContent = t('select.empty'), clearable = true, clearLabel = t('select.clear'), openLabel = t('select.open'), size = 'md', multiple = false, value, defaultValue, onValueChange: _onValueChange, name, form, dir, disabled, readOnly, required, invalid, id, className, children: _children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
     const indicatorSize = size === 'sm' ? 24 : size === 'lg' ? 32 : 28;
     const actionSize = size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon';
     const field = useFieldContext();

package/dist/select/Select.js

@@ -176,6 +176,7 @@ export const SelectSeparator = forwardRef(function SelectSeparator({ className,
 });
 export const SelectClear = forwardRef(function SelectClear({ children, className, disabled, onClick, ...props }, ref) {
     const state = useContext(MultipleSelectContext);
+    const { t } = useInkraLocale();
     if (!state)
         throw new Error('Select.Clear must be used inside Select.Root with multiple.');
     return _jsx(Button, { ...props, className: classes('inkra-select__clear', className), ref: ref, type: "button", variant: "ghost", disabled: disabled || state.disabled || state.readOnly || state.values.length === 0, onClick: event => {
@@ -184,7 +185,7 @@ export const SelectClear = forwardRef(function SelectClear({ children, className
                 return;
             state.change([]);
             state.triggerRef.current?.focus({ preventScroll: true });
-        }, children: children ?? 'Clear' });
+        }, children: children ?? t('common.clear') });
 });
 export const Select = /* @__PURE__ */ Object.freeze({
     Searchable: SearchableSelect,
@@ -205,3 +206,4 @@ export const Select = /* @__PURE__ */ Object.freeze({
     Separator: SelectSeparator,
     Clear: SelectClear,
 });
+import { useInkraLocale } from '../i18n/index.js';

package/dist/select/StepperSelect.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, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { InputAction } from '../form/InputAction.js';
@@ -9,7 +10,9 @@ import { PencilText } from '../PencilText.js';
 import { findAdjacentStepperItem, findEdgeStepperItem, resolveStepperNativeValue } from './stepperModel.js';
 const previousPaths = [{ d: 'M15 18l-6-6 6-6' }];
 const nextPaths = [{ d: 'M9 18l6-6-6-6' }];
-export const SelectStepper = forwardRef(function SelectStepper({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, defaultValue = null, dir, disabled, form, fullWidth = true, id, invalid, items, loop = false, name, nextLabel = 'Select next option', onKeyDown, onValueChange, placeholder = 'Select an option', previousLabel = 'Select previous option', readOnly, required, size = 'md', value, ...props }, forwardedRef) {
+export const SelectStepper = forwardRef(function SelectStepper(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, defaultValue = null, dir, disabled, form, fullWidth = true, id, invalid, items, loop = false, name, nextLabel = t('select.next'), onKeyDown, onValueChange, placeholder = t('select.placeholder'), previousLabel = t('select.previous'), readOnly, required, size = 'md', value, ...props } = inkraProps;
     const generatedId = useId();
     const controlRef = useRef(null);
     const selectRef = useRef(null);