@inkra/react 0.4.3 → 0.6.0

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.6.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",