@konce-pt/react 0.11.1 → 0.12.0

package/dist/file-upload/file-upload.js

@@ -1,9 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { useKptFieldA11y } from "../form-field/form-field-context.js";
 const EMPTY = [];
 /** Rozmiar pliku w KB albo MB — bez bibliotek, bo to jedna reguła. */
 function formatSize(file) {
@@ -26,14 +28,20 @@ function fileIcon(file) {
  * @example
  * <KptFileUpload value={files} onValueChange={setFiles} accept="image/*" multiple />
  */
-export function KptFileUpload({ value, defaultValue = EMPTY, onValueChange, accept = '', multiple = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptFileUpload({ value, defaultValue = EMPTY, onValueChange, accept = '', multiple = false, disabled = false, readOnly = false, id, ariaLabel = null, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const inputRef = useRef(null);
+    const zoneRef = useRef(null);
+    /** `div` z rolą nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    const field = useKptFieldA11y(id, 'kpt-file-upload');
+    // Podpowiedź rozcięta w miejscu `{action}` — pogrubienie robi JSX, nie HTML ze słownika.
+    const [hintBefore = '', hintAfter = ''] = t('fileUpload.hint').split('{action}');
+    const locked = disabled || readOnly;
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [dragover, setDragover] = useState(false);
     const showError = invalid && (touched ?? true);
     const openPicker = () => {
-        if (!disabled)
+        if (!locked)
             inputRef.current?.click();
     };
     /** `Enter` / spacja na strefie — spacja bez `preventDefault` przewinęłaby stronę. */
@@ -55,17 +63,20 @@ export function KptFileUpload({ value, defaultValue = EMPTY, onValueChange, acce
         // Czyszczenie pola pozwala wybrać ten sam plik drugi raz — inaczej `change` by nie poleciał.
         event.target.value = '';
     };
-    return (_jsxs("div", { className: cn('kpt-file-upload-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-file-upload__zone', dragover && 'is-dragover', disabled && 'is-disabled'), role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-invalid": showError || undefined, "data-invalid": showError ? '' : undefined, onClick: openPicker, onKeyDown: onZoneKeyDown, onDragOver: (event) => {
+    return (_jsxs("div", { className: cn('kpt-file-upload-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-file-upload__zone', dragover && 'is-dragover', disabled && 'is-disabled'), ref: zoneRef, role: "button", id: field.id, tabIndex: disabled ? -1 : 0, "aria-disabled": locked || undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "data-invalid": showError ? '' : undefined, onClick: openPicker, onKeyDown: onZoneKeyDown, onDragOver: (event) => {
                     event.preventDefault();
-                    if (!disabled)
+                    if (!locked)
                         setDragover(true);
                 }, onDragLeave: () => setDragover(false), onDrop: (event) => {
                     event.preventDefault();
                     setDragover(false);
-                    if (!disabled)
+                    if (!locked)
                         addFiles(event.dataTransfer?.files);
-                }, children: [_jsx("input", { ref: inputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: onSelect }), _jsx(KptIcon, { name: "upload", className: "kpt-file-upload__icon" }), _jsx("div", { className: "kpt-file-upload__text", dangerouslySetInnerHTML: { __html: t('fileUpload.hint') } }), accept ? _jsx("div", { className: "kpt-file-upload__hint", children: accept }) : null] }), current.length ? (_jsx("ul", { className: "kpt-file-upload__list", children: current.map((file, index) => (_jsxs("li", { className: "kpt-file-upload__file", children: [_jsx(KptIcon, { name: fileIcon(file) }), _jsx("span", { className: "kpt-file-upload__name", children: file.name }), _jsx("span", { className: "kpt-file-upload__size", children: formatSize(file) }), _jsx("button", { type: "button", className: "kpt-file-upload__remove", "aria-label": t('fileUpload.remove'), onClick: (event) => {
+                }, children: [_jsx("input", { ref: inputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: onSelect }), _jsx(KptIcon, { name: "upload", className: "kpt-file-upload__icon" }), _jsxs("div", { className: "kpt-file-upload__text", children: [hintBefore, _jsx("strong", { children: t('fileUpload.hintAction') }), hintAfter] }), accept ? _jsx("div", { className: "kpt-file-upload__hint", children: accept }) : null] }), current.length ? (_jsx("ul", { className: "kpt-file-upload__list", children: current.map((file, index) => (_jsxs("li", { className: "kpt-file-upload__file", children: [_jsx(KptIcon, { name: fileIcon(file) }), _jsx("span", { className: "kpt-file-upload__name", children: file.name }), _jsx("span", { className: "kpt-file-upload__size", children: formatSize(file) }), readOnly ? null : (_jsx("button", { type: "button", className: "kpt-file-upload__remove", "aria-label": `${t('fileUpload.remove')}: ${file.name}`, onClick: (event) => {
                                 event.stopPropagation();
                                 setCurrent(current.filter((item) => item !== file));
-                            }, children: _jsx(KptIcon, { name: "trash" }) })] }, `${index}-${file.name}`))) })) : null] }));
+                                onTouch?.();
+                                // Przycisk znika razem z pozycją — fokus wraca na strefę, a nie spada na <body>.
+                                zoneRef.current?.focus();
+                            }, children: _jsx(KptIcon, { name: "trash" }) }))] }, `${index}-${file.name}`))) })) : null] }));
 }

package/dist/file-upload/llms.txt

@@ -28,9 +28,9 @@ Import: `import { KptFileUpload } from '@konce-pt/react';`
 `event.target.value = ''` after reading the files, otherwise picking the same file twice in a row
 would fire no `change` and the second pick would be silently lost.
 
-## The hint carries markup
-`fileUpload.hint` holds a `<strong>`, so it is rendered with `dangerouslySetInnerHTML` — the text
-comes from the dictionary (ours or the app's), never from user input.
+## The hint is plain text
+`fileUpload.hint` holds an `{action}` placeholder that is replaced by `fileUpload.hintAction` in
+`<strong>`. Dictionaries carry no HTML, so a translation from a CMS cannot inject markup.
 
 ## Examples
     <KptFileUpload value={files} onValueChange={setFiles} accept="image/*" multiple />
@@ -57,3 +57,6 @@ focus ring `--kpt-color-focus-ring`.
 ## Accessibility
 The remove button is labelled from the dictionary. The zone itself is the keyboard path to the
 system picker — see "Keyboard and states" above.
+
+## Read-only and required
+`readOnly` shows the list without the remove buttons and does not open the picker nor accept a drop. The zone takes `id` and `ariaLabel` and is linked to `kpt-form-field` (label and description); `button` accepts neither `aria-invalid` nor `aria-required`, so the error is the linked message. The hint is plain text: `fileUpload.hint` with `{action}` and `fileUpload.hintAction` (bold) — dictionaries no longer carry HTML. The remove button names the file.

package/dist/form-field/form-field.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";

package/dist/galleria/galleria.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -19,11 +20,13 @@ const NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End']);
  */
 export function KptGalleria({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, showThumbnails = true, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
-    const [active, setActive] = useControllableState({
+    const [requested, setActive] = useControllableState({
         value: activeIndex,
         defaultValue: defaultActiveIndex,
         onChange: onActiveIndexChange,
     });
+    // Indeks przycięty do listy: po skróceniu `items` (filtr) widok nie zostaje pusty.
+    const active = Math.min(Math.max(requested, 0), Math.max(items.length - 1, 0));
     // Ogłoszenie dopiero po działaniu użytkownika — przy starcie region ma milczeć.
     const [userMoved, setUserMoved] = useState(false);
     const thumbsRef = useRef([]);

package/dist/i18n/i18n-context.d.ts

@@ -1,6 +1,5 @@
 import { type ReactNode } from 'react';
-import { type DeepPartial, type KptLocale, type KptMessages } from '@konce-pt/i18n';
-/** Kontrakt zwracany przez `useKptI18n()`. */
+import { type DeepPartial, type KptLocale, type KptMessageKey, type KptMessages } from '@konce-pt/i18n';
 export interface KptI18nContextValue {
     /** Bieżący język. */
     locale: KptLocale;
@@ -11,7 +10,8 @@ export interface KptI18nContextValue {
     /** Słownik zarejestrowany dla danego języka; nieznany język spada na EN. */
     messagesFor: (locale: KptLocale) => KptMessages;
     /** Tłumaczy klucz w notacji kropkowej (`'paginator.range'`) z interpolacją `{name}`. */
-    t: (key: string, params?: Record<string, string | number>) => string;
+    /** Tłumaczenie klucza; `KptMessageKey` daje podpowiedzi kluczy bazowych, dowolny napis też przechodzi. */
+    t: (key: KptMessageKey | (string & {}), params?: Record<string, string | number>) => string;
 }
 export interface KptI18nProviderProps {
     /** Język początkowy (domyślnie 'en'). */

package/dist/i18n/i18n-context.js

@@ -1,12 +1,34 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { KPT_MESSAGES_EN, KPT_MESSAGES_PL, deepMerge, translate, } from '@konce-pt/i18n';
+import { isDevBuild } from "../internal/dev.js";
+/*
+ * Wiązanie i18n dla Reacta. Odpowiednik `provideKptI18n` + `KptI18n` z Angulara,
+ * na tym samym rdzeniu z `@konce-pt/i18n` — te same klucze, ten sam fallback
+ * (słownik → EN → sam klucz) i ta sama interpolacja `{name}`.
+ */
+/** Kontrakt zwracany przez `useKptI18n()`. */
+/** Klucze, o których brak już ostrzegaliśmy — jedno ostrzeżenie na klucz. */
+const warnedKeys = new Set();
+/**
+ * `translate` z ostrzeżeniem w buildzie deweloperskim, gdy klucza nie ma w żadnym słowniku —
+ * inaczej literówka daje po cichu sam klucz zamiast tekstu.
+ */
+function translateChecked(dict, key, params) {
+    const text = translate(dict, key, params);
+    if (text === key && isDevBuild() && !warnedKeys.has(key)) {
+        warnedKeys.add(key);
+        console.warn(`KptI18n: brak tłumaczenia dla klucza „${key}”.`);
+    }
+    return text;
+}
 const FALLBACK = {
     locale: 'en',
     setLocale: () => { },
     messages: KPT_MESSAGES_EN,
     messagesFor: () => KPT_MESSAGES_EN,
-    t: (key, params) => translate(KPT_MESSAGES_EN, key, params),
+    t: (key, params) => translateChecked(KPT_MESSAGES_EN, key, params),
 };
 const KptI18nContext = createContext(null);
 /**
@@ -33,7 +55,7 @@ export function KptI18nProvider({ locale = 'en', messages, children }) {
             setLocale: setCurrent,
             messages: active,
             messagesFor,
-            t: (key, params) => translate(active, key, params),
+            t: (key, params) => translateChecked(active, key, params),
         };
     }, [current, messagesFor]);
     return _jsx(KptI18nContext.Provider, { value: value, children: children });
@@ -59,7 +81,7 @@ export function useKptMessages(overrides) {
             ...context,
             locale: effectiveLocale,
             messages: merged,
-            t: (key, params) => translate(merged, key, params),
+            t: (key, params) => translateChecked(merged, key, params),
         };
     }, [context, locale, dictionary]);
 }

package/dist/icon/icon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { renderKptIconSvg } from '@konce-pt/icons';
 import { useEffect, useSyncExternalStore } from 'react';
@@ -33,5 +34,7 @@ export function KptIcon({ name, size = '', label = '', className, style, ...rest
         warned.add(name);
         console.warn(`KptIcon: ikony „${name}” nie ma (jeszcze) w rejestrze — sprawdź nazwę albo zarejestruj ją (registerKptIcons / registerKptTablerIcons).`);
     }, [svg, name]);
-    return (_jsx("span", { className: cn('kpt-icon-host', className), "aria-hidden": label ? undefined : true, role: label ? 'img' : undefined, "aria-label": label || undefined, style: size ? { fontSize: size, ...style } : style, dangerouslySetInnerHTML: { __html: html }, ...rest }));
+    return (_jsx("span", { className: cn('kpt-icon-host', className), "aria-hidden": label ? undefined : true, role: label ? 'img' : undefined, "aria-label": label || undefined, style: size ? { fontSize: size, ...style } : style, 
+        // eslint-disable-next-line react/no-danger -- treść z rejestru, zsanityzowana przy `register()` (sanitizeSvgFragment)
+        dangerouslySetInnerHTML: { __html: html }, ...rest }));
 }

package/dist/image/image.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
+import { kptLockScroll } from "../internal/scroll-lock.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 /**
@@ -25,11 +27,9 @@ export function KptImage({ src, alt = '', width = null, preview = false, locale,
             return;
         if (!el.open)
             el.showModal();
-        const root = document.documentElement;
-        const saved = root.style.overflow;
-        root.style.overflow = 'hidden';
+        const releaseScroll = kptLockScroll();
         return () => {
-            root.style.overflow = saved;
+            releaseScroll();
             if (el.open)
                 el.close();
         };

package/dist/input/input.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { cn } from "../internal/cn.js";

package/dist/input-mask/input-mask.d.ts

@@ -1,10 +1,15 @@
 import type { ComponentPropsWithRef } from 'react';
-export interface KptInputMaskProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange'> {
+export interface KptInputMaskProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'required'> {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     /** Wzorzec maski; pozostałe znaki to literały (spacje, nawiasy, myślniki). */
     mask?: string;
+    /**
+     * Pole wymagane — `aria-required`, a nie natywne `required` (jak w `KptInput`): natywne
+     * blokowałoby wysyłkę i uruchamiało walidację przeglądarki obok Twojej.
+     */
+    required?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -16,4 +21,4 @@ export interface KptInputMaskProps extends Omit<ComponentPropsWithRef<'input'>,
  * @example
  * <KptInputMask mask="(999) 999-99-99" value={phone} onValueChange={setPhone} />
  */
-export declare function KptInputMask({ value, defaultValue, onValueChange, mask, placeholder, invalid, touched, onTouch, disabled, className, id, onBlur, 'aria-describedby': ariaDescribedBy, inputMode, ...rest }: Readonly<KptInputMaskProps>): import("react").JSX.Element;
+export declare function KptInputMask({ value, defaultValue, onValueChange, mask, placeholder, required, invalid, touched, onTouch, disabled, className, id, onBlur, 'aria-describedby': ariaDescribedBy, inputMode, ...rest }: Readonly<KptInputMaskProps>): import("react").JSX.Element;

package/dist/input-mask/input-mask.js

@@ -1,13 +1,9 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
-/** Tokeny maski: `9` = cyfra, `a` = litera, `*` = znak alfanumeryczny. */
-const TOKENS = {
-    '9': /\d/,
-    a: /[a-zA-Z]/,
-    '*': /[a-zA-Z0-9]/,
-};
+import { KPT_MASK_TOKENS, kptApplyMask, kptMaskCaret } from "../internal/mask.js";
 /**
  * Pole z maską znakową. Tokeny: `9` = cyfra, `a` = litera, `*` = alfanumeryczny; reszta wzorca
  * to literały wstawiane automatycznie.
@@ -15,52 +11,30 @@ const TOKENS = {
  * @example
  * <KptInputMask mask="(999) 999-99-99" value={phone} onValueChange={setPhone} />
  */
-export function KptInputMask({ value, defaultValue = '', onValueChange, mask = '', placeholder, invalid = false, touched, onTouch, disabled = false, className, id, onBlur, 'aria-describedby': ariaDescribedBy, inputMode, ...rest }) {
+export function KptInputMask({ value, defaultValue = '', onValueChange, mask = '', placeholder, required = false, invalid = false, touched, onTouch, disabled = false, className, id, onBlur, 'aria-describedby': ariaDescribedBy, inputMode, ...rest }) {
     const field = useKptFieldA11y(id, 'kpt-input-mask');
     // Klawiatura ekranowa z maski: same tokeny `9` (telefon, kod pocztowy) → numeryczna.
-    const tokens = [...mask].filter((char) => char in TOKENS);
+    const tokens = [...mask].filter((char) => char in KPT_MASK_TOKENS);
     const autoInputMode = tokens.length && tokens.every((char) => char === '9') ? 'numeric' : 'text';
     const inputId = field.id;
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const showInvalid = invalid && (touched ?? true);
-    /*
-     * Maska przepisuje wejście od zera: z tekstu bierzemy wyłącznie znaki pasujące do kolejnych
-     * tokenów, a literały wstawiamy same. Dzięki temu wklejenie „48123456789" i wpisanie
-     * „(48) 123…" dają ten sam wynik, a usunięcie literału nie zostawia dziury we wzorcu.
-     */
-    const applyMask = (raw) => {
-        if (!mask)
-            return raw;
-        const chars = raw.split('');
-        let charIndex = 0;
-        let out = '';
-        for (let maskIndex = 0; maskIndex < mask.length && charIndex < chars.length;) {
-            const token = mask[maskIndex];
-            const rule = TOKENS[token];
-            if (rule) {
-                while (charIndex < chars.length && !rule.test(chars[charIndex]))
-                    charIndex++;
-                if (charIndex >= chars.length)
-                    break;
-                out += chars[charIndex];
-                charIndex++;
-                maskIndex++;
-            }
-            else {
-                out += token;
-                maskIndex++;
-            }
-        }
-        return out;
-    };
     const onInput = (event) => {
-        const formatted = applyMask(event.target.value);
+        const el = event.target;
+        const raw = el.value;
+        const caret = el.selectionStart ?? raw.length;
+        const formatted = kptApplyMask(raw, mask);
         setCurrent(formatted);
         // Gdy maska odrzuci znak, wartość się nie zmienia i React nie przerysuje pola —
         // wpisany znak zostałby na ekranie, więc DOM zrównujemy ręcznie.
-        event.target.value = formatted;
+        el.value = formatted;
+        // Przepisanie `value` przenosi kursor na koniec; wraca za tyle samo znaczących znaków co przed zmianą.
+        if (document.activeElement === el) {
+            const at = kptMaskCaret(raw, caret, mask);
+            el.setSelectionRange(at, at);
+        }
     };
-    return (_jsx("span", { className: "kpt-input-mask-host", children: _jsx("input", { className: cn('kpt-input-mask__input', showInvalid && 'kpt-input-mask--invalid', className), id: inputId, "aria-invalid": showInvalid || undefined, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), inputMode: inputMode ?? autoInputMode, type: "text", value: current, disabled: disabled, placeholder: placeholder || mask, onChange: onInput, onBlur: (event) => {
+    return (_jsx("span", { className: "kpt-input-mask-host", children: _jsx("input", { className: cn('kpt-input-mask__input', showInvalid && 'kpt-input-mask--invalid', className), id: inputId, "aria-invalid": showInvalid || undefined, "aria-required": required || undefined, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), inputMode: inputMode ?? autoInputMode, type: "text", value: current, disabled: disabled, placeholder: placeholder || mask, onChange: onInput, onBlur: (event) => {
                 onBlur?.(event);
                 onTouch?.();
             }, ...rest }) }));

package/dist/input-mask/llms.txt

@@ -46,3 +46,6 @@ New: `aria-invalid` after touch.
 ## Accessibility
 A native text input; the mask doubles as the placeholder, so the expected shape is visible before
 typing starts.
+
+## Read-only and required
+`readOnly` is the native read-only field. The caret stays where you typed: fixing a digit in the middle of a phone number no longer throws it to the end. The `a` and `*` tokens accept every letter (`ą`, `ł`, `ß`), not only ASCII.

package/dist/input-number/input-number.d.ts

@@ -19,6 +19,8 @@ export interface KptInputNumberProps extends Omit<ComponentPropsWithRef<'div'>,
     /** Oznacza pole jako wymagane atrybutem `aria-required`. */
     required?: boolean;
     disabled?: boolean;
+    /** Tylko do odczytu — wartość widać i da się ją zaznaczyć, ale nie zmienić (także strzałkami). */
+    readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -37,4 +39,4 @@ export interface KptInputNumberProps extends Omit<ComponentPropsWithRef<'div'>,
  * <KptInputNumber value={qty} onValueChange={setQty} min={0} max={99} suffix=" szt." />
  * <KptInputNumber value={from} onValueChange={setFrom} showButtons={false} suffix=" zł" />
  */
-export declare function KptInputNumber({ value, defaultValue, onValueChange, min, max, step, placeholder, suffix, showButtons, id, ariaLabel, required, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptInputNumberProps>): import("react").JSX.Element;
+export declare function KptInputNumber({ value, defaultValue, onValueChange, min, max, step, placeholder, suffix, showButtons, id, ariaLabel, required, disabled, readOnly, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptInputNumberProps>): import("react").JSX.Element;

package/dist/input-number/input-number.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,6 +6,9 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
+import { kptRoundTo } from "../internal/step.js";
+/** Liczba dziesiętna wpisana przez człowieka: bez `0x1A`, `1e3` i `Infinity`, które `Number()` też przyjmuje. */
+const DECIMAL = /^[-+]?(?:\d+\.?\d*|\.\d+)$/;
 /**
  * Pole liczbowe ze strzałkami krokowania. Wartość to `number | null` — puste pole ma znaczenie,
  * bo „brak wartości" to nie to samo co zero.
@@ -19,7 +23,7 @@ import { useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptInputNumber value={qty} onValueChange={setQty} min={0} max={99} suffix=" szt." />
  * <KptInputNumber value={from} onValueChange={setFrom} showButtons={false} suffix=" zł" />
  */
-export function KptInputNumber({ value, defaultValue = null, onValueChange, min, max, step = 1, placeholder = '', suffix = '', showButtons = true, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptInputNumber({ value, defaultValue = null, onValueChange, min, max, step = 1, placeholder = '', suffix = '', showButtons = true, id, ariaLabel = null, required = false, disabled = false, readOnly = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-input-number');
     const [current, setCurrent] = useControllableState({
@@ -39,7 +43,9 @@ export function KptInputNumber({ value, defaultValue = null, onValueChange, min,
     }, [min, max]);
     // Zapis liczby wg aktywnego języka (PL: `12,5`), bez separatorów tysięcy — pole przyjmuje i kropkę,
     // i przecinek, a grupowanie cyfr rozjechałoby się z tym, co user wpisuje.
-    const format = new Intl.NumberFormat(activeLocale, { useGrouping: false, maximumFractionDigits: 20 });
+    // `latn`: cyfry łacińskie także w locale z własnymi (np. `ar`) — inaczej pole pokazywałoby zapis,
+    // którego parser niżej nie przeczyta.
+    const format = new Intl.NumberFormat(activeLocale, { useGrouping: false, maximumFractionDigits: 20, numberingSystem: 'latn' });
     const display = current === null || current === undefined || Number.isNaN(current) ? '' : `${format.format(current)}${suffix}`;
     const canIncrement = max === undefined || (current ?? -Infinity) < max;
     const canDecrement = min === undefined || (current ?? Infinity) > min;
@@ -53,21 +59,19 @@ export function KptInputNumber({ value, defaultValue = null, onValueChange, min,
             return;
         }
         // Bez przycinania: wartość spoza granic zostaje, a walidacja formularza ją zgłosi.
-        const parsed = Number(raw);
-        if (!Number.isNaN(parsed))
-            setCurrent(parsed);
+        if (DECIMAL.test(raw))
+            setCurrent(Number(raw));
     };
     const stepBy = (count) => {
         const base = current ?? min ?? 0;
-        // Zaokrąglenie do precyzji kroku — 0.1 + 0.2 nie może dać 0.30000000000000004.
-        const decimals = (String(step).split('.')[1] ?? '').length;
+        // Precyzja kroku ALBO wartości, zależnie od tego, która jest drobniejsza (1.25 + 1 = 2.25).
         setDraft(null);
-        setCurrent(clamp(Number((base + count * step).toFixed(decimals))));
+        setCurrent(clamp(kptRoundTo(base + count * step, step, base)));
     };
     const onKeyDown = (event) => {
         const steps = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 };
         const count = steps[event.key];
-        if (count === undefined || disabled)
+        if (count === undefined || disabled || readOnly)
             return;
         event.preventDefault();
         stepBy(count);
@@ -82,10 +86,10 @@ export function KptInputNumber({ value, defaultValue = null, onValueChange, min,
         setDraft(null);
         onTouch?.();
     };
-    return (_jsx("div", { className: cn('kpt-input-number-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-input-number', disabled && 'kpt-input-number--disabled', showInvalid && 'kpt-input-number--invalid', !showButtons && 'kpt-input-number--plain'), children: [showButtons ? (_jsx("button", { type: "button", className: "kpt-input-number__btn", tabIndex: -1, disabled: disabled || !canDecrement, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+    return (_jsx("div", { className: cn('kpt-input-number-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-input-number', disabled && 'kpt-input-number--disabled', showInvalid && 'kpt-input-number--invalid', !showButtons && 'kpt-input-number--plain'), children: [showButtons ? (_jsx("button", { type: "button", className: "kpt-input-number__btn", tabIndex: -1, disabled: disabled || readOnly || !canDecrement, onMouseDown: (event) => event.preventDefault(), onClick: () => {
                         stepBy(-1);
                         onTouch?.();
-                    }, "aria-label": t('inputNumber.decrement'), children: _jsx(KptIcon, { name: "minus" }) })) : null, _jsx("input", { className: "kpt-input-number__input", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", inputMode: "decimal", role: "spinbutton", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current ?? undefined, "aria-valuetext": suffix && current !== null ? display : undefined, value: draft ?? display, disabled: disabled, placeholder: placeholder, onChange: onInput, onKeyDown: onKeyDown, onBlur: onBlur }), showButtons ? (_jsx("button", { type: "button", className: "kpt-input-number__btn", tabIndex: -1, disabled: disabled || !canIncrement, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                    }, "aria-label": t('inputNumber.decrement'), children: _jsx(KptIcon, { name: "minus" }) })) : null, _jsx("input", { className: "kpt-input-number__input", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", inputMode: "decimal", role: "spinbutton", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current ?? undefined, "aria-valuetext": suffix && current !== null ? display : undefined, value: draft ?? display, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly || undefined, placeholder: placeholder, onChange: onInput, onKeyDown: onKeyDown, onBlur: onBlur }), showButtons ? (_jsx("button", { type: "button", className: "kpt-input-number__btn", tabIndex: -1, disabled: disabled || readOnly || !canIncrement, onMouseDown: (event) => event.preventDefault(), onClick: () => {
                         stepBy(1);
                         onTouch?.();
                     }, "aria-label": t('inputNumber.increment'), children: _jsx(KptIcon, { name: "plus" }) })) : null] }) }));

package/dist/input-number/llms.txt

@@ -16,7 +16,8 @@ A number field with stepper arrows. Import: `import { KptInputNumber } from '@ko
 - `min`, `max`, `step` (default 1)
 - `placeholder`, `suffix` — text shown after the number, e.g. ' szt.' or 'ms'
 - `showButtons`: boolean (default true) — `false` leaves the bare field
-- `disabled`, `invalid`, `touched`, `onTouch()`
+- `disabled`, `readOnly`, `invalid`, `touched`, `onTouch()` — `readOnly` leaves the value selectable but
+  blocks typing, the arrows and the buttons (`aria-readonly`)
 - `locale`, `dictionary` — i18n overrides for this component only
 
 ## Null is a value
@@ -39,7 +40,9 @@ The stepper labels come from `inputNumber.decrement` and `inputNumber.increment`
 ## Keyboard
 The field is `role="spinbutton"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow` (and
 `aria-valuetext` with the `suffix`, "5 pcs"). `↑`/`↓` change the value by `step`,
-`PageUp`/`PageDown` by ten steps; stepping is rounded to the precision of `step`. A typed value is
+`PageUp`/`PageDown` by ten steps; stepping is rounded to the precision of `step` or of the current
+value, whichever is finer (`1.25` + 1 gives `2.25`, not `2`). Only a plain decimal is accepted while
+typing — `0x1A`, `1e3` and `Infinity` are ignored. A typed value is
 **not** clamped while typing ("150" with `max` 99 stays "150", so the form's `max()` can report it) —
 it is clamped on blur. The `−`/`+` buttons sit outside the Tab order and do not take focus from the
 field, so focus never drops to `<body>` when a button goes disabled at a limit.

package/dist/input-otp/input-otp.d.ts

@@ -1,10 +1,17 @@
-import type { ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptInputOtpProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     length?: number;
+    /**
+     * Co ile komórek wstawić separator, licząc od lewej (`3` przy `length` 9 → `[][][]–[][][]–[][][]`).
+     * `0` (domyślnie) — bez grup. Separator jest wyłącznie wizualny: wartość to same znaki.
+     */
+    groupSize?: number;
+    /** Znak między grupami komórek. */
+    groupSeparator?: string;
     /** Dopuszcza wyłącznie cyfry i przełącza klawiaturę mobilną na numeryczną. */
     integerOnly?: boolean;
     /** Id pierwszej komórki (nie hosta) — klik w etykietę zaczyna wpisywanie od początku. */
@@ -12,15 +19,21 @@ export interface KptInputOtpProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     /** Nazwa grupy komórek, gdy nie opisuje jej etykieta (`KptFormField`). */
     ariaLabel?: string | null;
     disabled?: boolean;
+    /** Tylko do odczytu — kod widać, nie da się go zmienić. */
+    readOnly?: boolean;
+    /** Pole wymagane — `aria-required` na komórkach. */
+    required?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
 }
 /**
  * Pole kodu jednorazowego (OTP/PIN) — N osobnych pól, automatyczne przejście do następnego
- * i wklejanie całego kodu naraz. Wartością jest sklejony string.
+ * i wklejanie całego kodu naraz. Wartością są wpisane znaki **bez dziur** (`'13'`, nie `'1 3'`), więc
+ * walidator długości i backend widzą tyle znaków, ile naprawdę wpisano.
  *
  * @example
  * <KptInputOtp value={code} onValueChange={setCode} length={6} integerOnly />
+ * <KptInputOtp value={code} onValueChange={setCode} length={9} groupSize={3} />
  */
-export declare function KptInputOtp({ value, defaultValue, onValueChange, length, integerOnly, id, ariaLabel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptInputOtpProps>): import("react").JSX.Element;
+export declare function KptInputOtp({ value, defaultValue, onValueChange, length, groupSize, groupSeparator, integerOnly, id, ariaLabel, disabled, readOnly, required, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptInputOtpProps>): import("react").JSX.Element;