@konce-pt/react 0.11.2 → 0.14.0

package/dist/chat-typing/llms.txt

@@ -1,6 +1,6 @@
 # KptChatTyping (@konce-pt/react/chat)
 
-The typing indicator — three dots and a line saying who is typing.
+The typing indicator - three dots and a line saying who is typing.
 Import: `import { KptChatTyping } from '@konce-pt/react/chat';`
 
 ## DOM
@@ -11,13 +11,13 @@ Import: `import { KptChatTyping } from '@konce-pt/react/chat';`
           <span class="kpt-chat-typing__dot"></span>
           <span class="kpt-chat-typing__dot"></span>
         </span>
-        <span class="kpt-chat-typing__label">Anna is typing…</span>
+        <span class="kpt-chat-typing__label">Anna is typing...</span>
       </div>
     </div>
 
 ## Props
-- `authors`: `KptChatAuthor[]` — an empty list renders nothing at all
-- `label`: string — your own wording instead of the dictionary's
+- `authors`: `KptChatAuthor[]` - an empty list renders nothing at all
+- `label`: string - your own wording instead of the dictionary's
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## One name, then a headcount
@@ -27,7 +27,7 @@ nobody reads it anyway.
 ## Examples
     <KptChatTyping authors={[anna]} />
     <KptChatTyping authors={typing} />
-    <KptChatTyping label="The assistant is thinking…" />
+    <KptChatTyping label="The assistant is thinking..." />
 
 ## i18n
 `typing` (`{name}`) and `typingMany` (`{count}`) from the `chat` namespace.
@@ -37,5 +37,5 @@ The bubble `--kpt-color-surface-variant`, the dots `--kpt-color-text-muted`.
 
 ## Accessibility
 `role="status"` with `aria-live="polite"` announces the indicator without interrupting a message
-being read. Under `prefers-reduced-motion` the dots stop bouncing and pulse instead — they are the
+being read. Under `prefers-reduced-motion` the dots stop bouncing and pulse instead - they are the
 only carrier of "someone is typing", so switching them off entirely would remove the message.

package/dist/checkbox/checkbox.d.ts

@@ -1,20 +1,27 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { KptHostProps } from '../internal/types.ts';
+import { type KptToggleMotion } from '@konce-pt/motion';
 export interface KptCheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'> {
+    /**
+     * Ruch przełączania: `spring` - pole wskakuje, a ptaszek rysuje się kreską; `fade` - spokojne przejście koloru i znaku; `none` - bez ruchu.
+     * Bez wartości bierze `toggle` z `KptMotionProvider` (domyślnie `spring`); `enabled={false}` i systemowe
+     * "ogranicz ruch" wyłączają go zawsze.
+     */
+    toggleMotion?: KptToggleMotion;
     /** Etykieta obok pola. Bogatszą treść podaj jako `children`. */
     label?: string;
     /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
     required?: boolean;
     /**
-     * Stan pośredni („część zaznaczona”) — dla pola „zaznacz wszystko” nad listą. To właściwość DOM,
-     * nie atrybut, więc ustawia ją komponent; czytnik ogłasza „częściowo zaznaczone”.
+     * Stan pośredni ("część zaznaczona") - dla pola "zaznacz wszystko" nad listą. To właściwość DOM,
+     * nie atrybut, więc ustawia ją komponent; czytnik ogłasza "częściowo zaznaczone".
      */
     indeterminate?: boolean;
     /** Pole jest nieprawidłowe. Widoczne dopiero, gdy `touched` też jest prawdziwe. */
     invalid?: boolean;
     /** Czy pole było dotknięte; pominięty = stan błędu pokazuje się od razu po `invalid`. */
     touched?: boolean;
-    /** Wygodniejszy odpowiednik `onChange` — dostaje samo zaznaczenie. */
+    /** Wygodniejszy odpowiednik `onChange` - dostaje samo zaznaczenie. */
     onCheckedChange?: (checked: boolean) => void;
     /** Wywoływane na `blur`. */
     onTouch?: () => void;
@@ -24,15 +31,15 @@ export interface KptCheckboxProps extends Omit<ComponentPropsWithRef<'input'>, '
 }
 /**
  * Pole wyboru (checkbox). Cały układ niesie `<label>`, więc kliknięcie w etykietę przełącza pole
- * bez `htmlFor` — natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
+ * bez `htmlFor` - natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
  *
  * Działa kontrolowane (`checked` + `onCheckedChange`) i niekontrolowane (`defaultChecked`).
  *
  * `className` trafia na blok `.kpt-checkbox`, a pozostałe propsy (`name`, `value`, `ref`,
- * handlery) na natywny `<input>` — tam, gdzie oczekuje ich formularz.
+ * handlery) na natywny `<input>` - tam, gdzie oczekuje ich formularz.
  *
  * @example
  * <KptCheckbox name="terms" label="Akceptuję regulamin" />
  * <KptCheckbox checked={on} onCheckedChange={setOn} />
  */
-export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate, ref, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;
+export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, readOnly, onClick, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate, toggleMotion, ref, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;

package/dist/checkbox/checkbox.js

@@ -1,22 +1,25 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { composeRefs } from "../internal/compose-refs.js";
 import { cn } from "../internal/cn.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
+import { playInvalidMotion, playPopMotion, resolveToggleMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
  * Pole wyboru (checkbox). Cały układ niesie `<label>`, więc kliknięcie w etykietę przełącza pole
- * bez `htmlFor` — natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
+ * bez `htmlFor` - natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
  *
  * Działa kontrolowane (`checked` + `onCheckedChange`) i niekontrolowane (`defaultChecked`).
  *
  * `className` trafia na blok `.kpt-checkbox`, a pozostałe propsy (`name`, `value`, `ref`,
- * handlery) na natywny `<input>` — tam, gdzie oczekuje ich formularz.
+ * handlery) na natywny `<input>` - tam, gdzie oczekuje ich formularz.
  *
  * @example
  * <KptCheckbox name="terms" label="Akceptuję regulamin" />
  * <KptCheckbox checked={on} onCheckedChange={setOn} />
  */
-export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate = false, ref, ...rest }) {
+export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, readOnly = false, onClick, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate = false, toggleMotion, ref, ...rest }) {
     const inputRef = useRef(null);
     useEffect(() => {
         if (inputRef.current)
@@ -25,13 +28,36 @@ export function KptCheckbox({ label = '', required = false, invalid = false, tou
     const field = useKptFieldA11y(id, 'kpt-checkbox');
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const showInvalid = invalid && (touched ?? true);
+    const motion = resolveToggleMotion(toggleMotion, useKptMotion());
+    const markRef = useRef(null);
+    const wasInvalid = useRef(null);
+    // Sygnał błędu przy przejściu "poprawne -> błędne" (nie przy błędzie obecnym od startu): pierścień
+    // w kolorze błędu i krótkie potrząśnięcie. W błędnym `KptFormField` potrząsa już on - tu sam pierścień.
+    useEffect(() => {
+        const before = wasInvalid.current;
+        wasInvalid.current = showInvalid;
+        const el = markRef.current;
+        if (!showInvalid || before !== false || motion !== 'spring' || !el)
+            return;
+        playInvalidMotion(el, { shake: !el.closest('.kpt-form-field--invalid') });
+    }, [showInvalid, motion]);
     const handleChange = useCallback((event) => {
         onChange?.(event);
         onCheckedChange?.(event.target.checked);
-    }, [onChange, onCheckedChange]);
+        // Wskoczenie po zmianie z ręki - z handlera, nie z CSS, bo reguła na `:checked` grałaby przy starcie.
+        const mark = event.currentTarget.nextElementSibling;
+        if (motion === 'spring' && mark instanceof HTMLElement)
+            playPopMotion(mark);
+    }, [onChange, onCheckedChange, motion]);
     const handleBlur = useCallback((event) => {
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", ref: composeRefs(inputRef, ref), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsxs("span", { className: "kpt-checkbox__box", "aria-hidden": "true", children: [_jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5" }) }), _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__dash", children: _jsx("path", { d: "M4 8h8" }) })] }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
+    return (_jsx("span", { className: cn('kpt-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), "data-motion": motion, children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", ref: composeRefs(inputRef, ref), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), disabled: disabled, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, 
+                    // Natywne `readonly` nie działa na polach wyboru - klik (i Spacja) jest blokowany ręcznie.
+                    onClick: (event) => {
+                        if (readOnly)
+                            event.preventDefault();
+                        onClick?.(event);
+                    }, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsxs("span", { ref: markRef, className: "kpt-checkbox__box", "aria-hidden": "true", children: [_jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5", pathLength: 1 }) }), _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__dash", children: _jsx("path", { d: "M4 8h8" }) })] }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
 }

package/dist/checkbox/llms.txt

@@ -1,26 +1,27 @@
 # KptCheckbox (@konce-pt/react)
 
 A checkbox. The whole layout is a `<label>`, so clicking the text toggles the field with no
-`htmlFor` — the native `<input>` inside carries the semantics and the keyboard.
+`htmlFor` - the native `<input>` inside carries the semantics and the keyboard.
 Import: `import { KptCheckbox } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-checkbox-host">
       <label class="kpt-checkbox">
         <input type="checkbox" class="kpt-checkbox__input">
-        <span class="kpt-checkbox__box" aria-hidden="true"><svg class="kpt-checkbox__check">…</svg></span>
+        <span class="kpt-checkbox__box" aria-hidden="true"><svg class="kpt-checkbox__check">...</svg></span>
         <span class="kpt-checkbox__label">I accept the terms</span>
       </label>
     </span>
 
 ## Props
-- `label`: string — the text next to the field; richer content goes in `children`
-- `checked` / `defaultChecked` — controlled or uncontrolled, like a native checkbox
-- `onCheckedChange(checked)` — the boolean alone; `onChange` still fires with the full event
-- `onTouch()` — fires on blur
-- `required`: boolean — set as `aria-required`, not as the native attribute
-- `invalid`, `touched` — the error state, gated the same way as in `KptInput`
-- `hostProps` — props for the `.kpt-checkbox-host` wrapper
+- `label`: string - the text next to the field; richer content goes in `children`
+- `checked` / `defaultChecked` - controlled or uncontrolled, like a native checkbox
+- `onCheckedChange(checked)` - the boolean alone; `onChange` still fires with the full event
+- `onTouch()` - fires on blur
+- `required`: boolean - set as `aria-required`, not as the native attribute
+- `invalid`, `touched` - the error state, gated the same way as in `KptInput`
+- `toggleMotion`: 'spring' | 'fade' | 'none' (default from `KptMotionProvider`, else `spring`) - see "Toggle motion"
+- `hostProps` - props for the `.kpt-checkbox-host` wrapper
 - `className` goes to the `.kpt-checkbox` block; `name`, `value`, `ref` and the handlers go to the
   native `<input>`, which is where a form expects them
 
@@ -30,7 +31,7 @@ Import: `import { KptCheckbox } from '@konce-pt/react';`
     <KptCheckbox label="Newsletter" invalid={!!err} touched={blurred} />
 
 ## Screen reader and keyboard
-`indeterminate`: boolean — the "some selected" state for a "select all" box (a dash in the box;
+`indeterminate`: boolean - the "some selected" state for a "select all" box (a dash in the box;
 screen readers say "partially checked"). It is a DOM property, so the component sets it; the browser
 clears it on click, so set it to `false` in `onCheckedChange`.
 
@@ -40,11 +41,25 @@ generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the
 added to `aria-describedby` (merged with your own). Without a wrapper, name it with `aria-label`.
 Inside `kpt-form-field` the box gets both names: the wrapper label and its own `label`.
 
+## Toggle motion
+`toggleMotion`: `spring` - the box pops and the check mark draws itself as a stroke; `fade` - a calm colour and mark transition; `none` - no
+motion. The bounce is started by the change handler, so a control that is checked on load does not
+move. With no value it takes `toggle` from `KptMotionProvider` (default `spring`); `enabled: false` and the
+system "reduce motion" setting always win.
+
+With `spring` the error gets a signal too: when the field turns invalid (`invalid` and `touched`),
+an error-coloured ring spreads from the box and fades, and the box shakes briefly. An error present on
+load stays still, and a repeated submit with the field still invalid does not replay it. Inside an
+invalid form field the field already shakes, so the checkbox adds only the ring.
+
 ## Tokens
 `--kpt-form-field-border`, `--kpt-color-primary` (the checked box), `--kpt-color-on-primary`
 (the tick), `--kpt-form-field-border-error`.
 
 ## Accessibility
-A native `<input type="checkbox">` inside a `<label>` — the label is the accessible name and the
+A native `<input type="checkbox">` inside a `<label>` - the label is the accessible name and the
 whole row is clickable. The box and the tick are `aria-hidden`, being pure decoration over the real
 control.
+
+## Read-only and required
+`readOnly` keeps the box focusable but blocks the click and Space (`aria-readonly`) - the native attribute does not work on checkboxes.

package/dist/chip/chip.d.ts

@@ -7,8 +7,8 @@ export type KptChipTextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowerc
 export interface KptChipProps extends ComponentPropsWithRef<'span'>, KptI18nOverrides {
     variant?: KptChipVariant;
     /**
-     * Wielkość liter etykiety. `capitalize` podnosi pierwszą literę każdego słowa — także po
-     * dywizie („Agent-Ready"), bo CSS nie wie, gdzie kończy się wyraz złożony; przy takich
+     * Wielkość liter etykiety. `capitalize` podnosi pierwszą literę każdego słowa - także po
+     * dywizie ("Agent-Ready"), bo CSS nie wie, gdzie kończy się wyraz złożony; przy takich
      * napisach pewniejszy jest zapis wprost w treści.
      */
     textTransform?: KptChipTextTransform;
@@ -21,11 +21,11 @@ export interface KptChipProps extends ComponentPropsWithRef<'span'>, KptI18nOver
     hostProps?: KptHostProps<'span'>;
 }
 /**
- * Chip / tag — etykieta, opcjonalnie usuwalna.
+ * Chip / tag - etykieta, opcjonalnie usuwalna.
  *
  * @example
  * <KptChip>Angular</KptChip>
  * <KptChip variant="success" removable onRemove={remove}>UI</KptChip>
- * <KptChip textTransform="capitalize">nowość · zestaw startowy</KptChip>
+ * <KptChip textTransform="capitalize">nowość, zestaw startowy</KptChip>
  */
 export declare function KptChip({ variant, textTransform, removable, disabled, onRemove, locale, dictionary, hostProps, className, children, ...rest }: Readonly<KptChipProps>): import("react").JSX.Element;

package/dist/chip/chip.js

@@ -1,15 +1,16 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 /**
- * Chip / tag — etykieta, opcjonalnie usuwalna.
+ * Chip / tag - etykieta, opcjonalnie usuwalna.
  *
  * @example
  * <KptChip>Angular</KptChip>
  * <KptChip variant="success" removable onRemove={remove}>UI</KptChip>
- * <KptChip textTransform="capitalize">nowość · zestaw startowy</KptChip>
+ * <KptChip textTransform="capitalize">nowość, zestaw startowy</KptChip>
  */
 export function KptChip({ variant = 'neutral', textTransform = 'none', removable = false, disabled = false, onRemove, locale, dictionary, hostProps, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });

package/dist/chip/llms.txt

@@ -1,6 +1,6 @@
 # KptChip (@konce-pt/react)
 
-A chip / tag — a label, optionally removable.
+A chip / tag - a label, optionally removable.
 Import: `import { KptChip } from '@konce-pt/react';`
 
 ## DOM
@@ -8,23 +8,23 @@ Import: `import { KptChip } from '@konce-pt/react';`
       <span class="kpt-chip" data-variant="primary">
         <span class="kpt-chip__label" id="kpt-chip-r1-label">React</span>
         <button type="button" class="kpt-chip__remove" id="kpt-chip-r1-remove" aria-label="Remove"
-                aria-labelledby="kpt-chip-r1-remove kpt-chip-r1-label">…icon…</button>
+                aria-labelledby="kpt-chip-r1-remove kpt-chip-r1-label">...icon...</button>
       </span>
     </span>
 
 ## Props
 - `variant`: 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' (default 'neutral')
-- `textTransform`: 'none' | 'capitalize' | 'uppercase' | 'lowercase' (default 'none') — the label's letter case
-- `removable`: boolean — adds the remove button
+- `textTransform`: 'none' | 'capitalize' | 'uppercase' | 'lowercase' (default 'none') - the label's letter case
+- `removable`: boolean - adds the remove button
 - `disabled`: boolean
-- `onRemove()` — fired by the remove button
-- `locale`, `dictionary` — i18n overrides for this component only
-- `hostProps` — props for the `.kpt-chip-host` wrapper
+- `onRemove()` - fired by the remove button
+- `locale`, `dictionary` - i18n overrides for this component only
+- `hostProps` - props for the `.kpt-chip-host` wrapper
 - `className`, `ref` and every other `<span>` prop go to the inner `.kpt-chip`
 
 ## Removing is your decision
 `onRemove` reports the intent; the chip does not remove itself from anything. Drop it from your own
-list — that keeps the chip usable both in a controlled collection and as a standalone label.
+list - that keeps the chip usable both in a controlled collection and as a standalone label.
 
 ## i18n
 The remove button's label comes from `common.remove` in the dictionary.
@@ -33,12 +33,12 @@ The remove button's label comes from `common.remove` in the dictionary.
     <KptChip>React</KptChip>
     <KptChip variant="success" removable onRemove={() => drop(tag)}>UI</KptChip>
     <KptCard.Tags><KptChip variant="info">Daily</KptChip></KptCard.Tags>
-    <KptChip textTransform="capitalize">new · starter kit</KptChip>
+    <KptChip textTransform="capitalize">new, starter kit</KptChip>
 
 ## Letter case
 `textTransform` lands as `data-text-transform` on `.kpt-chip` and sets `text-transform` there, so
 the label can stay in the application's own wording while the chip decides how it is displayed.
-`capitalize` raises the first letter of every word — **including after a hyphen**
+`capitalize` raises the first letter of every word - **including after a hyphen**
 ("Agent-Ready"), because CSS does not know where a compound word ends. For labels with a hyphen,
 spelling it out in the content is the exact route.
 
@@ -48,6 +48,6 @@ spelling it out in the content is the exact route.
 
 ## Accessibility
 The label sits in `.kpt-chip__label`, and the remove button is named by `aria-labelledby` from
-itself plus that label — “Remove Angular” — so with several chips a screen reader user hears which
+itself plus that label - "Remove Angular" - so with several chips a screen reader user hears which
 one goes. `Backspace` and `Delete` on the button work like a click. After removal focus falls back
 to the page; move it to the next chip yourself.

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

@@ -7,25 +7,27 @@ export interface KptChipsInputProps extends Omit<ComponentPropsWithRef<'div'>, '
     /** Placeholder; pominięty = `chipsInput.placeholder` ze słownika. */
     placeholder?: string;
     allowDuplicates?: 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 - tagi widać, nie da się ich dodać ani usunąć. */
+    readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
 }
 /**
- * Pole tagów — dodawanie Enterem albo przecinkiem, usuwanie Backspace lub ×.
+ * Pole tagów - dodawanie Enterem albo przecinkiem, usuwanie Backspace lub x.
  *
  * Tekst w trakcie pisania żyje w DOM, nie w stanie Reacta: wartością komponentu jest lista
  * zatwierdzonych tagów, a bufor wpisywania to prywatna sprawa pola. Dzięki temu każde naciśnięcie
  * klawisza nie przerysowuje listy chipów.
  *
  * @example
- * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
+ * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag..." />
  */
-export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, id, ariaLabel, required, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;
+export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, id, ariaLabel, required, disabled, readOnly, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;

package/dist/chips-input/chips-input.js

@@ -1,21 +1,24 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { prepareFlowMotion, resolveEnterMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptChip } from "../chip/chip.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
- * Pole tagów — dodawanie Enterem albo przecinkiem, usuwanie Backspace lub ×.
+ * Pole tagów - dodawanie Enterem albo przecinkiem, usuwanie Backspace lub x.
  *
  * Tekst w trakcie pisania żyje w DOM, nie w stanie Reacta: wartością komponentu jest lista
  * zatwierdzonych tagów, a bufor wpisywania to prywatna sprawa pola. Dzięki temu każde naciśnięcie
  * klawisza nie przerysowuje listy chipów.
  *
  * @example
- * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
+ * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag..." />
  */
-export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, id, ariaLabel = null, required = false, disabled = false, readOnly = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-chips-input');
     const inputRef = useRef(null);
@@ -25,36 +28,68 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
         onChange: onValueChange,
     });
     const showInvalid = invalid && (touched ?? true);
+    /** Wejście i wyjście tagu idą za `enter` z `KptMotionProvider` (domyślnie `spring`). */
+    const motion = resolveEnterMotion(undefined, useKptMotion());
+    const boxRef = useRef(null);
+    /** Ruch przygotowany przed zmianą listy, odtwarzany po jej wyrenderowaniu. */
+    const pendingFlow = useRef(null);
+    /** Sam chip, nie `__item` - ten ma `display: contents` (semantyka listy) i nie ma pudełka do animacji. */
+    const flowItems = () => Array.from(boxRef.current?.querySelectorAll('.kpt-chips-input__item > *, .kpt-chips-input__field') ?? []);
+    // Przed malowaniem - inaczej mignęłaby klatka z nowym układem, zanim FLIP cofnie elementy.
+    useLayoutEffect(() => {
+        const play = pendingFlow.current;
+        pendingFlow.current = null;
+        play?.(flowItems());
+    });
+    /**
+     * Zmienia listę z ruchem: nowy tag wskakuje, usunięty gaśnie jako duch, a reszta i pole dosuwają
+     * się FLIP-em. Tagi są śledzone po indeksie, więc ruch liczy się z pozycji danych, nie węzłów -
+     * szczegóły w `prepareFlowMotion`. Stan zmienia się od razu; ruch tylko go ilustruje.
+     */
+    const change = (next, flow) => {
+        const box = boxRef.current;
+        if (motion !== 'none' && box)
+            pendingFlow.current = prepareFlowMotion(box, flowItems(), flow, motion);
+        setChips(next);
+    };
     /** Komunikat regionu `polite`: dodanie, usunięcie albo odrzucony duplikat. */
-    const [announcement, setAnnouncement] = useState('');
+    const [announcement, setAnnouncementState] = useState('');
+    /**
+     * Ten sam komunikat dwa razy z rzędu (drugi odrzucony duplikat) nie zmieniłby treści regionu
+     * i czytnik by go nie ogłosił - doklejamy niewidoczną spację, żeby tekst się różnił.
+     */
+    const setAnnouncement = (message) => setAnnouncementState((current) => (current === message ? `${message}\u00A0` : message));
     const commit = (el) => {
         const text = el.value.trim();
-        if (!text)
+        if (!text || readOnly)
             return;
         if (!allowDuplicates && chips.includes(text)) {
             // Duplikat zostaje w polu (do poprawy), a czytnik słyszy, dlaczego nic nie przybyło.
             setAnnouncement(t('chipsInput.duplicate', { value: text }));
             return;
         }
-        setChips([...chips, text]);
+        change([...chips, text], { added: chips.length });
         setAnnouncement(t('chipsInput.added', { value: text }));
         el.value = '';
     };
     const removeAt = (index) => {
         const removed = chips[index];
-        setChips(chips.filter((_, i) => i !== index));
+        change(chips.filter((_, i) => i !== index), { removed: index });
         if (removed !== undefined)
             setAnnouncement(t('chipsInput.removed', { value: removed }));
         onTouch?.();
     };
     const onKeyDown = (event) => {
         const el = event.currentTarget;
+        // W trakcie kompozycji IME (CJK) Enter zatwierdza znak, nie tag.
+        if (readOnly || event.nativeEvent.isComposing)
+            return;
         if (event.key === 'Enter' || event.key === ',') {
             event.preventDefault();
             commit(el);
         }
         else if (event.key === 'Backspace' && el.value === '' && chips.length) {
-            // Backspace w pustym polu zjada ostatni chip — to samo, czego uczy każdy klient poczty.
+            // Backspace w pustym polu zjada ostatni chip - to samo, czego uczy każdy klient poczty.
             removeAt(chips.length - 1);
         }
     };
@@ -62,9 +97,9 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
         commit(event.currentTarget);
         onTouch?.();
     };
-    return (_jsx("div", { className: cn('kpt-chips-input-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [_jsx("span", { className: "kpt-chips-input__list", role: "list", children: chips.map((chip, index) => (_jsx("span", { className: "kpt-chips-input__item", role: "listitem", children: _jsx(KptChip, { variant: "primary", removable: !disabled, onRemove: () => {
+    return (_jsx("div", { className: cn('kpt-chips-input-host', className), "data-motion": motion, ...rest, children: _jsxs("div", { ref: boxRef, className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [_jsx("span", { className: "kpt-chips-input__list", role: "list", children: chips.map((chip, index) => (_jsx("span", { className: "kpt-chips-input__item", role: "listitem", children: _jsx(KptChip, { variant: "primary", removable: !disabled && !readOnly, onRemove: () => {
                                 removeAt(index);
-                                // Przycisk usuwania znika razem z tagiem — fokus wraca do pola, nie na <body>.
+                                // Przycisk usuwania znika razem z tagiem - fokus wraca do pola, nie na <body>.
                                 inputRef.current?.focus();
-                            }, children: chip }) }, index))) }), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur }), _jsx("span", { className: "kpt-chips-input__live", "aria-live": "polite", children: announcement })] }) }));
+                            }, children: chip }) }, index))) }), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, readOnly: readOnly, onKeyDown: onKeyDown, onBlur: onBlur }), _jsx("span", { className: "kpt-chips-input__live", "aria-live": "polite", children: announcement })] }) }));
 }

package/dist/chips-input/llms.txt

@@ -1,22 +1,22 @@
 # KptChipsInput (@konce-pt/react)
 
-A tag field — add with Enter or a comma, remove with Backspace or ×.
+A tag field - add with Enter or a comma, remove with Backspace or x.
 Import: `import { KptChipsInput } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-chips-input-host">
       <div class="kpt-chips-input">
-        …KptChip per tag…
+        ...KptChip per tag...
         <input class="kpt-chips-input__field" type="text">
       </div>
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — `string[]`
-- `placeholder`: string — omitted falls back to `chipsInput.placeholder`
+- `value` / `defaultValue` / `onValueChange` - `string[]`
+- `placeholder`: string - omitted falls back to `chipsInput.placeholder`
 - `allowDuplicates`: boolean (default false)
 - `disabled`, `invalid`, `touched`, `onTouch()`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `locale`, `dictionary` - i18n overrides for this component only
 
 ## The buffer is not state
 The text being typed lives in the DOM, not in React state: the component's value is the list of
@@ -24,19 +24,19 @@ committed tags, and the typing buffer is the field's own business. Every keystro
 not re-render the chips.
 
 ## Keyboard
-Enter and a comma commit the tag. Backspace in an empty field eats the last chip — the behaviour
+Enter and a comma commit the tag. Backspace in an empty field eats the last chip - the behaviour
 every mail client teaches. Blur commits whatever is left in the field, so a half-typed tag is not
 lost by clicking away.
 
 ## Examples
-    <KptChipsInput value={tags} onValueChange={setTags} placeholder="Add a tag…" />
+    <KptChipsInput value={tags} onValueChange={setTags} placeholder="Add a tag..." />
     <KptChipsInput value={tags} onValueChange={setTags} allowDuplicates />
 
 ## Screen reader and keyboard
 The tags are a list (`role="list"`/`listitem`), so a screen reader hears how many there are. Adding,
 removing (also with `Backspace`) and a rejected duplicate are announced by a polite live region
 (`chipsInput.added`/`removed`/`duplicate`); a duplicate stays in the field to be corrected instead
-of vanishing. After removing a tag with its `×`, focus returns to the text field.
+of vanishing. After removing a tag with its `x`, focus returns to the text field.
 
 ## Label and description
 `id` goes to the native field, not the host; without one it comes from `KptFormField` or is
@@ -44,9 +44,19 @@ generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the
 added to `aria-describedby` (merged with your own). Without a wrapper, name it with `ariaLabel`.
 New: `id`, `ariaLabel`, `required` and `aria-invalid` on the text field.
 
+## Motion
+An added tag pops in (grows from a smaller size and sharpens out of a blur); a removed one - by its "x"
+or by `Backspace` - fades and shrinks in place while the following tags and the text field slide over on
+a spring. The value changes at once; the motion only illustrates it. Follows `enter` from `KptMotionProvider`
+(`spring` / `fade` - only fades, the neighbours slide without the spring / `none`); `enabled: false`
+and the system "reduce motion" setting always win.
+
 ## Tokens
 `--kpt-form-field-{bg,border,border-focus,border-error,radius}` plus the chip tokens.
 
 ## Accessibility
 Each chip is a `KptChip` with a labelled remove button, and the field itself is a native input, so
 tags are reachable and removable from the keyboard alone.
+
+## Read-only and required
+`readOnly` shows the tags without the remove buttons and ignores Enter, comma and Backspace. Enter during IME composition (CJK) confirms the character, not a tag. A repeated message (a second rejected duplicate) is announced again.

package/dist/clock/clock.d.ts

@@ -1,17 +1,22 @@
 import { type ComponentPropsWithRef } from 'react';
-export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
-    /** Godzina jako 'HH:mm' — zawsze 24h, niezależnie od `hourFormat`. */
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
+    /** Godzina jako 'HH:mm' - zawsze 24h, niezależnie od `hourFormat`. */
     value?: string;
     onValueChange?: (value: string) => void;
     hourFormat?: 12 | 24;
     minuteStep?: number;
 }
 /**
- * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
- * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM. Używana przez `KptDatepicker`
- * i `KptDateRange`.
+ * Tarcza zegara - dwa etapy: godziny -> minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
+ * wewnętrzny pierścień 13-00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
+ * przez `KptDatepicker` i `KptDateRange`.
+ *
+ * Klawiatura: segmenty godzin i minut to `role="spinbutton"` - `ArrowUp`/`ArrowDown` o jeden krok (minuty
+ * o `minuteStep`), `PageUp`/`PageDown` o pięć, `Home`/`End` do granic. Tak da się ustawić każdą
+ * minutę, także spoza znaczników tarczy co pięć.
  *
  * @example
  * <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
  */
-export declare function KptClock({ value, onValueChange, hourFormat, minuteStep, className, ...rest }: Readonly<KptClockProps>): import("react").JSX.Element;
+export declare function KptClock({ value, onValueChange, hourFormat, minuteStep, locale, dictionary, className, ...rest }: Readonly<KptClockProps>): import("react").JSX.Element;