@inkra/react 0.4.3 → 0.6.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/breadcrumb.css

@@ -1,7 +1,98 @@
-.inkra-breadcrumb { min-width: 0; color: var(--inkra-ink); }
-.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.inkra-breadcrumb {
+  --inkra-breadcrumb-item-height: var(--inkra-control-md);
+  --inkra-breadcrumb-item-padding: var(--inkra-space-3);
+  --inkra-breadcrumb-item-font-size: var(--inkra-text-md);
+  --inkra-breadcrumb-item-icon-size: var(--inkra-icon-md);
+  --inkra-breadcrumb-item-gap: var(--inkra-space-2);
+  color: var(--inkra-ink);
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
 .inkra-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
-.inkra-breadcrumb__link { max-width: 100%; color: var(--inkra-ink-muted); }
-.inkra-breadcrumb__link .inkra-button__label { white-space: normal; overflow-wrap: anywhere; }
-.inkra-breadcrumb__page { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; overflow-wrap: anywhere; }
+.inkra-breadcrumb__link,
+.inkra-breadcrumb__trigger {
+  --inkra-button-visual-height: var(--inkra-breadcrumb-item-height);
+  --inkra-button-visual-padding: var(--inkra-breadcrumb-item-padding);
+  --inkra-button-font-size: var(--inkra-breadcrumb-item-font-size);
+  --inkra-button-icon-size: var(--inkra-breadcrumb-item-icon-size);
+  --inkra-button-content-gap: var(--inkra-breadcrumb-item-gap);
+  color: var(--inkra-accent-strong);
+  max-width: 100%;
+}
+.inkra-breadcrumb__link .inkra-button__label,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source,
+.inkra-breadcrumb__trigger .inkra-button__label,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__surface {
+  height: auto;
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__content {
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__focus-ring {
+  height: 100%;
+  inset-inline: 0;
+  top: 0;
+  transform: none;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):hover:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface,
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):active:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface {
+  transform: none;
+}
+.inkra-breadcrumb__page {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-size: var(--inkra-breadcrumb-item-font-size);
+  gap: var(--inkra-breadcrumb-item-gap);
+  justify-content: center;
+  letter-spacing: var(--inkra-letter-spacing);
+  line-height: var(--inkra-line-ui);
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+  overflow-wrap: anywhere;
+  padding-inline: var(--inkra-breadcrumb-item-padding);
+}
+.inkra-breadcrumb__label,
+.inkra-breadcrumb__label > .inkra-pencil-text {
+  align-items: center;
+  display: inline-flex;
+  min-width: 0;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  display: block;
+  min-width: 0;
+  white-space: inherit;
+}
+.inkra-breadcrumb__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--inkra-breadcrumb-item-icon-size);
+  height: var(--inkra-breadcrumb-item-icon-size);
+  justify-content: center;
+  width: var(--inkra-breadcrumb-item-icon-size);
+}
+.inkra-breadcrumb__icon > :is(svg, canvas) {
+  height: 100% !important;
+  max-height: 100%;
+  max-width: 100%;
+  width: 100% !important;
+}
 .inkra-breadcrumb__separator { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 16px; color: var(--inkra-ink-subtle); pointer-events: none; }

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%; }
@@ -61,13 +58,18 @@
   inline-size: 100%;
 }
 
-.inkra-select-stepper .inkra-select-stepper__control,
-.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+.inkra-select-stepper .inkra-select-stepper__control {
   flex-wrap: nowrap;
   gap: 0;
   padding-inline: 0;
 }
 
+.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+  flex-wrap: nowrap;
+  gap: 0;
+  padding-inline: var(--inkra-field-control-padding);
+}
+
 .inkra-select-stepper__control {
   outline: 0;
 }

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%; }
@@ -2053,13 +2050,18 @@
   inline-size: 100%;
 }
 
-.inkra-select-stepper .inkra-select-stepper__control,
-.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+.inkra-select-stepper .inkra-select-stepper__control {
   flex-wrap: nowrap;
   gap: 0;
   padding-inline: 0;
 }
 
+.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+  flex-wrap: nowrap;
+  gap: 0;
+  padding-inline: var(--inkra-field-control-padding);
+}
+
 .inkra-select-stepper__control {
   outline: 0;
 }
@@ -8720,12 +8722,103 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		}
 	}
 
-.inkra-breadcrumb { min-width: 0; color: var(--inkra-ink); }
-.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.inkra-breadcrumb {
+  --inkra-breadcrumb-item-height: var(--inkra-control-md);
+  --inkra-breadcrumb-item-padding: var(--inkra-space-3);
+  --inkra-breadcrumb-item-font-size: var(--inkra-text-md);
+  --inkra-breadcrumb-item-icon-size: var(--inkra-icon-md);
+  --inkra-breadcrumb-item-gap: var(--inkra-space-2);
+  color: var(--inkra-ink);
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
 .inkra-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
-.inkra-breadcrumb__link { max-width: 100%; color: var(--inkra-ink-muted); }
-.inkra-breadcrumb__link .inkra-button__label { white-space: normal; overflow-wrap: anywhere; }
-.inkra-breadcrumb__page { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; overflow-wrap: anywhere; }
+.inkra-breadcrumb__link,
+.inkra-breadcrumb__trigger {
+  --inkra-button-visual-height: var(--inkra-breadcrumb-item-height);
+  --inkra-button-visual-padding: var(--inkra-breadcrumb-item-padding);
+  --inkra-button-font-size: var(--inkra-breadcrumb-item-font-size);
+  --inkra-button-icon-size: var(--inkra-breadcrumb-item-icon-size);
+  --inkra-button-content-gap: var(--inkra-breadcrumb-item-gap);
+  color: var(--inkra-accent-strong);
+  max-width: 100%;
+}
+.inkra-breadcrumb__link .inkra-button__label,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source,
+.inkra-breadcrumb__trigger .inkra-button__label,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__surface {
+  height: auto;
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__content {
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__focus-ring {
+  height: 100%;
+  inset-inline: 0;
+  top: 0;
+  transform: none;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):hover:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface,
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):active:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface {
+  transform: none;
+}
+.inkra-breadcrumb__page {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-size: var(--inkra-breadcrumb-item-font-size);
+  gap: var(--inkra-breadcrumb-item-gap);
+  justify-content: center;
+  letter-spacing: var(--inkra-letter-spacing);
+  line-height: var(--inkra-line-ui);
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+  overflow-wrap: anywhere;
+  padding-inline: var(--inkra-breadcrumb-item-padding);
+}
+.inkra-breadcrumb__label,
+.inkra-breadcrumb__label > .inkra-pencil-text {
+  align-items: center;
+  display: inline-flex;
+  min-width: 0;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  display: block;
+  min-width: 0;
+  white-space: inherit;
+}
+.inkra-breadcrumb__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--inkra-breadcrumb-item-icon-size);
+  height: var(--inkra-breadcrumb-item-icon-size);
+  justify-content: center;
+  width: var(--inkra-breadcrumb-item-icon-size);
+}
+.inkra-breadcrumb__icon > :is(svg, canvas) {
+  height: 100% !important;
+  max-height: 100%;
+  max-width: 100%;
+  width: 100% !important;
+}
 .inkra-breadcrumb__separator { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 16px; color: var(--inkra-ink-subtle); pointer-events: none; }
 
 .inkra-calendar-scroll { max-width: 100%; min-width: 0; overflow-x: auto; }

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);