@konce-pt/react 0.11.2 → 0.14.0

package/dist/input/input.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
 import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
+import { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
  * Pole tekstowe Koncept UI. Renderuje natywny `<input>` w hoście `.kpt-input-host`.
  *
- * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) —
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) -
  * w drugim trybie wartość należy do DOM, więc natywny `<form>`, `<form action>`, reset
  * formularza i React Hook Form (`register`) działają bez adaptera.
  *
@@ -16,10 +20,22 @@ import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptInput name="email" type="email" defaultValue="" />
  * <KptInput value={email} onValueChange={setEmail} invalid={!ok} touched={blurred} />
  */
-export function KptInput({ type = 'text', required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rest }) {
+export function KptInput({ type = 'text', required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, ref, speech = false, speechLang, speechColor, speechMode = 'insert', 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const field = useKptFieldA11y(id, 'kpt-input');
-    // Stan nieprawidłowy pokazujemy dopiero po dotknięciu pola — jak natywne `:user-invalid`.
+    const innerRef = useRef(null);
+    // Tekst zatwierdzony wchodzi przez zdarzenie `input` pola, więc `onChange` dostaje go jak wpisany;
+    // tymczasowy jest tylko na ekranie. Bez `speech` kontroler nie tworzy sesji.
+    const mic = useKptSpeechRecognition({
+        enabled: speech,
+        target: innerRef,
+        lang: speechLang,
+        mode: speechMode,
+        continuous: speechMode !== 'replace',
+        disabled: !!rest.disabled || !!rest.readOnly,
+    });
+    const speechState = speech && mic.available ? (mic.listening ? 'listening' : 'idle') : undefined;
+    // Stan nieprawidłowy pokazujemy dopiero po dotknięciu pola - jak natywne `:user-invalid`.
     // Bez `touched` nie ma czego bramkować, więc decyduje samo `invalid`.
     const showInvalid = invalid && (touched ?? true);
     const handleChange = useCallback((event) => {
@@ -30,5 +46,5 @@ export function KptInput({ type = 'text', required = false, invalid = false, tou
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-input-host', hostClassName), ...hostRest, children: _jsx("input", { className: cn('kpt-input__field', className), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), type: type, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }) }));
+    return (_jsxs("span", { className: cn('kpt-input-host', hostClassName), "data-speech": speechState, ...hostRest, children: [_jsx("input", { className: cn('kpt-input__field', className), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), type: type, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ref: composeRefs(innerRef, ref), ...rest }), speech ? (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: !!rest.disabled || !!rest.readOnly, hostProps: { className: 'kpt-input__speech' } })) : null] }));
 }

package/dist/input/llms.txt

@@ -5,28 +5,28 @@ Import: `import { KptInput } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-input-host">
-      <input class="kpt-input__field" id="…" type="text">
+      <input class="kpt-input__field" id="..." type="text">
     </span>
 
 ## Props
 - `type`: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'time' (default 'text')
-- `value` / `defaultValue` — controlled or uncontrolled, exactly like a native input
-- `onValueChange(value)` — the value alone; `onChange` still fires with the full event
-- `onTouch()` — fires on blur, the moment the field becomes touched
-- `required`: boolean — see the note below
-- `invalid`: boolean, `touched`: boolean — the error state
-- `hostProps` — props for the `.kpt-input-host` wrapper
+- `value` / `defaultValue` - controlled or uncontrolled, exactly like a native input
+- `onValueChange(value)` - the value alone; `onChange` still fires with the full event
+- `onTouch()` - fires on blur, the moment the field becomes touched
+- `required`: boolean - see the note below
+- `invalid`: boolean, `touched`: boolean - the error state
+- `hostProps` - props for the `.kpt-input-host` wrapper
 - `className`, `ref`, `name`, `placeholder`, `autoComplete` and every other `<input>` prop go to
   the inner `<input>`
 
 ## Controlled and uncontrolled
 Pass `value` and the field is controlled. Pass `defaultValue` (or nothing) and the value belongs
-to the DOM, so a native `<form>`, `<form action={…}>`, a form reset and React Hook Form's
-`register()` all work without an adapter — there is no internal mirror of the value to fight with.
+to the DOM, so a native `<form>`, `<form action={...}>`, a form reset and React Hook Form's
+`register()` all work without an adapter - there is no internal mirror of the value to fight with.
 
 ## The error state
 `aria-invalid="true"` is set when `invalid` is true. Pass `touched` as well to reproduce the
-Angular port's gate — the error then shows only after the field has been touched, like the native
+Angular port's gate - the error then shows only after the field has been touched, like the native
 `:user-invalid`. With `touched` omitted there is nothing to gate on, so `invalid` decides alone;
 that is the common case in React, where the form library already knows when an error is ready.
 The style hangs off `aria-invalid`, never off a class.
@@ -55,5 +55,19 @@ added to `aria-describedby` (merged with your own). Without a wrapper, name it w
 `--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}`.
 
 ## Accessibility
-A native `<input>` — full keyboard and screen reader support. `aria-required` marks the field as
+A native `<input>` - full keyboard and screen reader support. `aria-required` marks the field as
 required, `aria-invalid` marks it as erroneous, and the focus ring comes from `@konce-pt/styles`.
+
+## Dictation
+- `speech`: boolean = false - a microphone at the end of the field (`KptSpeechButton`, Web Speech
+  API). Without browser support it is not shown and the field keeps its normal padding.
+- `speechLang`: string - BCP 47 tag; without it from `KptI18nProvider`.
+- `speechColor`: `'primary' | 'danger' | 'success' | 'warning' | 'info'` = `'primary'` - colour of "stop" and the wave while listening.
+- `speechMode`: `'insert' | 'append' | 'replace'` = `'insert'`. `replace` clears the field the moment
+  the microphone is clicked (undoable with Ctrl+Z) and stops after one utterance - the search pattern.
+
+Interim words are visible in the field but never reach your state; final text comes through
+`onChange` / `onValueChange` like typed text.
+
+    <KptInput value={title} onValueChange={setTitle} speech />
+    <KptInput type="search" speech speechMode="replace" />

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);
+    // Klawiatura ekranowa z maski: same tokeny `9` (telefon, kod pocztowy) -> numeryczna.
+    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 —
+        // 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

@@ -9,9 +9,9 @@ Import: `import { KptInputMask } from '@konce-pt/react';`
     </span>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the formatted text
-- `mask`: string — `9` a digit, `a` a letter, `*` alphanumeric; everything else is a literal
-- `placeholder`: string — defaults to the mask itself, which doubles as a hint
+- `value` / `defaultValue` / `onValueChange` - the formatted text
+- `mask`: string - `9` a digit, `a` a letter, `*` alphanumeric; everything else is a literal
+- `placeholder`: string - defaults to the mask itself, which doubles as a hint
 - `invalid`, `touched`, `onTouch()`
 - `className`, `ref` and every other `<input>` prop go to the input
 
@@ -22,7 +22,7 @@ digits therefore produce the same result, and deleting a literal cannot leave a
 pattern. Characters that match nothing are skipped rather than rejected, so stray letters around a
 number still format.
 
-Like the OTP field, the DOM is synced by hand when the mask drops a character — the value did not
+Like the OTP field, the DOM is synced by hand when the mask drops a character - the value did not
 change, so React would not re-render and the character would linger on screen.
 
 ## Examples
@@ -32,7 +32,7 @@ change, so React would not re-render and the character would linger on screen.
 ## Screen reader and keyboard
 The on-screen keyboard follows the mask: only `9` tokens (phone, postal code) give
 `inputMode="numeric"`, otherwise `text`; pass `inputMode` to override it, and `autoComplete` (`tel`,
-`postal-code`…) so the browser can fill the field in.
+`postal-code`...) so the browser can fill the field in.
 
 ## Label and description
 `id` goes to the native field, not the host; without one it comes from `KptFormField` or is
@@ -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

@@ -10,31 +10,33 @@ export interface KptInputNumberProps extends Omit<ComponentPropsWithRef<'div'>,
     placeholder?: string;
     /** Dopisek pokazywany za liczbą, np. ' szt.' albo 'ms'. */
     suffix?: string;
-    /** Przyciski krokowania. `false` daje samo pole — wariant do zakresów „od–do". */
+    /** Przyciski krokowania. `false` daje samo pole - wariant do zakresów "od-do". */
     showButtons?: boolean;
-    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` - z wrappera. */
     id?: string;
     /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
     ariaLabel?: string | null;
     /** 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;
 }
 /**
- * Pole liczbowe ze strzałkami krokowania. Wartość to `number | null` — puste pole ma znaczenie,
- * bo „brak wartości" to nie to samo co zero.
+ * Pole liczbowe ze strzałkami krokowania. Wartość to `number | null` - puste pole ma znaczenie,
+ * bo "brak wartości" to nie to samo co zero.
  *
- * Pole to `role="spinbutton"` (z `aria-valuemin`/`max`/`now`, a przy `suffix` — `aria-valuetext`):
- * `↑`/`↓` zmieniają wartość o `step`, `PageUp`/`PageDown` o dziesięć kroków. Wpisywana liczba nie
- * jest przycinana w trakcie pisania (inaczej „150” przy `max` 99 stawało się „99”, zanim user skończył) —
- * granice działają przy krokowaniu i na `blur`. Przyciski `−`/`+` stoją poza kolejnością Tab i nie
+ * Pole to `role="spinbutton"` (z `aria-valuemin`/`max`/`now`, a przy `suffix` - `aria-valuetext`):
+ * `ArrowUp`/`ArrowDown` zmieniają wartość o `step`, `PageUp`/`PageDown` o dziesięć kroków. Wpisywana liczba nie
+ * jest przycinana w trakcie pisania (inaczej "150" przy `max` 99 stawało się "99", zanim user skończył) -
+ * granice działają przy krokowaniu i na `blur`. Przyciski `-`/`+` stoją poza kolejnością Tab i nie
  * zabierają fokusu polu.
  *
  * @example
  * <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,21 +6,24 @@ 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.
+ * Pole liczbowe ze strzałkami krokowania. Wartość to `number | null` - puste pole ma znaczenie,
+ * bo "brak wartości" to nie to samo co zero.
  *
- * Pole to `role="spinbutton"` (z `aria-valuemin`/`max`/`now`, a przy `suffix` — `aria-valuetext`):
- * `↑`/`↓` zmieniają wartość o `step`, `PageUp`/`PageDown` o dziesięć kroków. Wpisywana liczba nie
- * jest przycinana w trakcie pisania (inaczej „150” przy `max` 99 stawało się „99”, zanim user skończył) —
- * granice działają przy krokowaniu i na `blur`. Przyciski `−`/`+` stoją poza kolejnością Tab i nie
+ * Pole to `role="spinbutton"` (z `aria-valuemin`/`max`/`now`, a przy `suffix` - `aria-valuetext`):
+ * `ArrowUp`/`ArrowDown` zmieniają wartość o `step`, `PageUp`/`PageDown` o dziesięć kroków. Wpisywana liczba nie
+ * jest przycinana w trakcie pisania (inaczej "150" przy `max` 99 stawało się "99", zanim user skończył) -
+ * granice działają przy krokowaniu i na `blur`. Przyciski `-`/`+` stoją poza kolejnością Tab i nie
  * zabierają fokusu polu.
  *
  * @example
  * <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({
@@ -28,7 +32,7 @@ export function KptInputNumber({ value, defaultValue = null, onValueChange, min,
         onChange: onValueChange,
     });
     const showInvalid = invalid && (touched ?? true);
-    /** Tekst w trakcie pisania — dopóki jest, pole pokazuje go zamiast sformatowanej wartości. */
+    /** Tekst w trakcie pisania - dopóki jest, pole pokazuje go zamiast sformatowanej wartości. */
     const [draft, setDraft] = useState(null);
     const clamp = useCallback((n) => {
         if (min !== undefined && n < min)
@@ -37,15 +41,17 @@ export function KptInputNumber({ value, defaultValue = null, onValueChange, min,
             return max;
         return n;
     }, [min, max]);
-    // Zapis liczby wg aktywnego języka (PL: `12,5`), bez separatorów tysięcy — pole przyjmuje i kropkę,
+    // 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;
     const onInput = (event) => {
-        // Przecinek jako separator dziesiętny i dopisek trafiają do pola razem z liczbą —
-        // czyścimy je przed parsowaniem, żeby wpisywanie „12,5 zł" działało naturalnie.
+        // Przecinek jako separator dziesiętny i dopisek trafiają do pola razem z liczbą -
+        // czyścimy je przed parsowaniem, żeby wpisywanie "12,5 zł" działało naturalnie.
         setDraft(event.target.value);
         const raw = event.target.value.replace(suffix, '').replace(',', '.').trim();
         if (raw === '') {
@@ -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

@@ -5,19 +5,20 @@ A number field with stepper arrows. Import: `import { KptInputNumber } from '@ko
 ## DOM
     <div class="kpt-input-number-host">
       <div class="kpt-input-number">
-        <button class="kpt-input-number__btn" aria-label="Decrease">…</button>
+        <button class="kpt-input-number__btn" aria-label="Decrease">...</button>
         <input class="kpt-input-number__input" type="text" inputmode="decimal" value="12 zł">
-        <button class="kpt-input-number__btn" aria-label="Increase">…</button>
+        <button class="kpt-input-number__btn" aria-label="Increase">...</button>
       </div>
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — `number | null`
+- `value` / `defaultValue` / `onValueChange` - `number | null`
 - `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()`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `placeholder`, `suffix` - text shown after the number, e.g. ' szt.' or 'ms'
+- `showButtons`: boolean (default true) - `false` leaves the bare field
+- `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
 The value is `number | null`, not `number`: an empty field means "no value", which is not the same
@@ -26,8 +27,8 @@ nothing to step from.
 
 ## A text input, not a number input
 The field is `type="text"` with `inputmode="decimal"`, so the suffix can live inside it and a comma
-works as the decimal separator — typing "12,5 zł" parses correctly. A native `type="number"` would
-reject both. Values out of range are clamped on blur and when stepping — not while typing.
+works as the decimal separator - typing "12,5 zł" parses correctly. A native `type="number"` would
+reject both. Values out of range are clamped on blur and when stepping - not while typing.
 
 ## i18n
 The stepper labels come from `inputNumber.decrement` and `inputNumber.increment`.
@@ -38,14 +39,16 @@ 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
-**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
+`aria-valuetext` with the `suffix`, "5 pcs"). `ArrowUp`/`ArrowDown` change the value by `step`,
+`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.
 
 ## Screen reader and keyboard
-The value is shown in the active locale's notation (PL `12,5`), without thousands separators — the
+The value is shown in the active locale's notation (PL `12,5`), without thousands separators - the
 field accepts both a dot and a comma, and digit grouping would clash with what the user types.
 
 ## Label and description

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

@@ -1,26 +1,39 @@
-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. */
+    /** Id pierwszej komórki (nie hosta) - klik w etykietę zaczyna wpisywanie od początku. */
     id?: string;
     /** 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.
+ * Pole kodu jednorazowego (OTP/PIN) - N osobnych pól, automatyczne przejście do następnego
+ * 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;