@konce-pt/react 0.12.0 → 0.14.0

package/dist/chat-message/llms.txt

@@ -7,41 +7,42 @@ Import: `import { KptChatMessage } from '@konce-pt/react/chat';`
 ## DOM
     <div class="kpt-chat-message-host" role="article" aria-label="Anna, 09:22, Read">
       <div class="kpt-chat-message__row" data-align="start">
-        <span class="kpt-chat-message__avatar">…KptAvatar…</span>
+        <span class="kpt-chat-message__avatar">...KptAvatar...</span>
         <div class="kpt-chat-message__stack">
           <span class="kpt-chat-message__author">Anna Kowalska</span>
           <div class="kpt-chat-message__bubble"
                data-variant="neutral" data-align="start" data-position="last" data-tail>
-            <button class="kpt-chat-message__quote">…</button>
-            <p class="kpt-chat-message__text">…</p>
-            <ul class="kpt-chat-message__files">…</ul>
-            <span class="kpt-chat-message__meta"><time>09:22</time>…</span>
-            <ul class="kpt-chat-message__reactions">…</ul>
+            <button class="kpt-chat-message__quote">...</button>
+            <p class="kpt-chat-message__text">...</p>
+            <ul class="kpt-chat-message__files">...</ul>
+            <span class="kpt-chat-message__meta"><time>09:22</time>...</span>
+            <ul class="kpt-chat-message__reactions">...</ul>
           </div>
         </div>
-        <span class="kpt-chat-message__actions">…KptIconButton, .kpt-chat-message__picker…</span>
+        <span class="kpt-chat-message__actions">...KptIconButton, .kpt-chat-message__picker...</span>
       </div>
     </div>
 
 ## Props
-- `message`: `KptChatMessage` — the whole object; the single props below win over it
+- `message`: `KptChatMessage` - the whole object; the single props below win over it
 - `author`, `text`, `time`, `status`, `attachments`, `reactions`, `replyTo`
 - `align`: `'start' | 'end'`; `variant`: `'neutral' | 'primary' | 'solid' | 'ghost' | 'system'`
 - `position`: `'single' | 'first' | 'middle' | 'last'`; `system`: boolean
 - `showAuthor`, `showAvatar`, `showMeta` (default true), `tail` (default true), `actions`
-- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) — the picker set
+- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) - the picker set
+- `enterMotion`: `'spring' | 'fade' | 'none'` - how a new reaction and a status change appear (`KptChat` passes its own; see its doc)
 - `onRetry`, `onReply`: `() => void`; `onReact`: `(emoji: string) => void`; `onQuoted`: `(quote) => void`
-- `children` — bubble content; it renders next to `text`, so the bubble takes anything
+- `children` - bubble content; it renders next to `text`, so the bubble takes anything
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The default variant follows the alignment
 Your own message gets the full `solid`, someone else's gets `neutral`. The theme is monochrome, so
-the difference between bubbles is lightness, not hue — `--kpt-color-primary-subtle` has exactly the
+the difference between bubbles is lightness, not hue - `--kpt-color-primary-subtle` has exactly the
 lightness of `--kpt-color-muted`, which would make the two sides indistinguishable. For a quieter
 list set `variant="primary"` by hand.
 
 ## Grouping is what the shape is made of
-`position` decides which corner collapses and which bubble wears the tail — inside a group the
+`position` decides which corner collapses and which bubble wears the tail - inside a group the
 corner on the sender's side drops to `--kpt-radius-sm`. `KptChat` gets all of it from
 `buildChatRows()`; set it by hand only when you build the list yourself. The tail is skipped for
 `ghost` and `system`, which have no background to cut it out of.
@@ -49,7 +50,7 @@ corner on the sender's side drops to `--kpt-radius-sm`. `KptChat` gets all of it
 ## An unsent message must be able to say so
 `status="failed"` outlines the bubble and puts a retry arrow **outside** it, in the action column
 on the outer side of the list. `KptChat` also keeps the meta row visible on such a bubble even in
-the middle of a group — the arrow with nothing to explain it would be a mystery.
+the middle of a group - the arrow with nothing to explain it would be a mystery.
 Statuses: `sending` (clock), `sent` (check), `delivered` (double check), `read` (the same icon in
 the accent colour) and `failed`.
 
@@ -64,10 +65,10 @@ is formatted by `Intl` in the active locale.
 
 ## Tokens
 `--kpt-color-muted` (incoming) / `--kpt-color-primary` + `--kpt-color-on-primary` (own),
-failed `--kpt-color-danger-subtle` + `--kpt-color-danger-border` — the failed rule also resets the
+failed `--kpt-color-danger-subtle` + `--kpt-color-danger-border` - the failed rule also resets the
 text colour, or a white `solid` label would land on pale pink.
 
 ## Accessibility
-The host is an `article` labelled with author, time and status — content alone would say nothing
+The host is an `article` labelled with author, time and status - content alone would say nothing
 about who wrote it or whether it was sent. The status icon is `aria-hidden`; the meaning travels in
 the label. A system notice is a `note`, never an `article`.

package/dist/chat-typing/chat-typing.d.ts

@@ -8,13 +8,13 @@ export interface KptChatTypingProps extends Omit<ComponentPropsWithRef<'div'>, '
     label?: string;
 }
 /**
- * Wskaźnik pisania — trzy kropki i informacja, kto pisze.
+ * Wskaźnik pisania - trzy kropki i informacja, kto pisze.
  *
  * Pusta lista autorów nie renderuje niczego, więc można go trzymać w drzewie na stałe
  * i sterować wyłącznie danymi.
  *
  * Element jest `role="status"` z `aria-live="polite"`: czytnik ogłasza wejście i zniknięcie
- * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi —
+ * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi -
  * informację niesie etykieta.
  *
  * @example

package/dist/chat-typing/chat-typing.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 /**
- * Wskaźnik pisania — trzy kropki i informacja, kto pisze.
+ * Wskaźnik pisania - trzy kropki i informacja, kto pisze.
  *
  * Pusta lista autorów nie renderuje niczego, więc można go trzymać w drzewie na stałe
  * i sterować wyłącznie danymi.
  *
  * Element jest `role="status"` z `aria-live="polite"`: czytnik ogłasza wejście i zniknięcie
- * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi —
+ * wskaźnika, ale nie przerywa czytania wiadomości. Sama animacja kropek nic nie mówi -
  * informację niesie etykieta.
  *
  * @example
@@ -20,7 +20,7 @@ export function KptChatTyping({ authors = [], label = '', locale, dictionary, cl
     if (authors.length === 0 && !label)
         return null;
     /*
-     * Jedna osoba jest wymieniona z imienia, przy większej liczbie liczy się głowy —
+     * Jedna osoba jest wymieniona z imienia, przy większej liczbie liczy się głowy -
      * lista nazwisk rozjeżdża wiersz i i tak nikt jej nie czyta.
      */
     const text = label ||

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, readOnly, onClick, 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

@@ -4,20 +4,22 @@ 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, readOnly = false, onClick, 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)
@@ -26,19 +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-readonly": readOnly || undefined, 
-                    // Natywne `readonly` nie działa na polach wyboru — klik (i Spacja) jest blokowany ręcznie.
+    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", { 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] }) }));
+                    }, "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,14 +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.
+`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

@@ -5,12 +5,12 @@ 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,27 +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ąć. */
+    /** 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, readOnly, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;

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

@@ -1,20 +1,22 @@
 '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, readOnly = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
@@ -26,11 +28,35 @@ 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, 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ł.
+     * 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) => {
@@ -42,13 +68,13 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
             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?.();
@@ -63,7 +89,7 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
             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);
         }
     };
@@ -71,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 && !readOnly, 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, readOnly: readOnly, onKeyDown: onKeyDown, onBlur: onBlur }), _jsx("span", { className: "kpt-chips-input__live", "aria-live": "polite", children: announcement })] }) }));
 }