@konce-pt/react 0.12.0 → 0.14.0

package/dist/password/llms.txt

@@ -7,20 +7,20 @@ Import: `import { KptPassword } from '@konce-pt/react';`
     <div class="kpt-password-host">
       <div class="kpt-password">
         <input class="kpt-password__input" type="password" autocomplete="current-password">
-        <button class="kpt-password__toggle" type="button" aria-label="Show password">…</button>
+        <button class="kpt-password__toggle" type="button" aria-label="Show password">...</button>
       </div>
       <div class="kpt-password__meter" data-score="3">
-        <div class="kpt-password__bars"><span class="kpt-password__bar is-on"></span>…</div>
+        <div class="kpt-password__bars"><span class="kpt-password__bar is-on"></span>...</div>
         <span class="kpt-password__hint">Good</span>
       </div>
     </div>
 
 ## Props
 - `value` / `defaultValue` / `onValueChange`
-- `feedback`: boolean — shows the strength meter once something is typed
+- `feedback`: boolean - shows the strength meter once something is typed
 - `autoComplete`: string | null (default 'current-password')
 - `placeholder`, `id`, `disabled`, `invalid`, `touched`, `onTouch()`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `locale`, `dictionary` - i18n overrides for this component only
 
 ## autoComplete is not a detail
 Sign-up and password reset need `autoComplete="new-password"`. With the default, a password manager
@@ -28,13 +28,13 @@ fills in the OLD password instead of offering a new one, and the user ends up sa
 thing.
 
 ## How the score is computed
-A 0–4 score. The score follows length first, not composition rules (NIST SP 800-63B advises against them): an
+A 0-4 score. The score follows length first, not composition rules (NIST SP 800-63B advises against them): an
 approximate entropy over the character classes actually used, cut for repeats (`aaaa`), sequences
 (`abcd`, `1234`, `qwerty`) and the "Word + digits + symbol" shape. `Password1!` is weak, thirty
 lowercase letters are strong, and `ą`/`ż` are letters, not special characters. There is no
-dictionary — it is a hint, not a security control.
-The label comes from `password.strength` — the only array-valued key in
-the dictionary — indexed by the score, so a translation controls the wording without touching code.
+dictionary - it is a hint, not a security control.
+The label comes from `password.strength` - the only array-valued key in
+the dictionary - indexed by the score, so a translation controls the wording without touching code.
 
 ## Examples
     <KptPassword value={pass} onValueChange={setPass} feedback />
@@ -48,6 +48,14 @@ host no longer carries the `id` (it used to, so `label[for]` pointed at `kpt-pas
 id existed twice). New: `ariaLabel`, `required`, `readonly`/`readOnly`, `aria-invalid` after touch;
 with `feedback` the strength label is added to `aria-describedby`.
 
+## Motion
+The strength meter fades in when the first character appears; lit segments fill from the start in
+a wave and empty from the end when the score drops, in the colour of the current score; the score label
+enters anew on every change. Turning invalid (after touch) flashes an error ring and shakes the field -
+inside an invalid `kpt-form-field` only the ring, because the wrapper shakes. Follows `enter` from `KptMotionProvider`
+(`spring` / `fade` / `none`); nothing moves on first render; `enabled: false` and the system
+"reduce motion" setting always win.
+
 ## Tokens
 `--kpt-form-field-*` for the field, `--kpt-color-danger` / `-warning` / `-success` for the meter
 bars by score.

package/dist/password/password.d.ts

@@ -5,10 +5,10 @@ export interface KptPasswordProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     placeholder?: string;
-    /** Id natywnego pola — pozwala związać etykietę `KptFormField`. */
+    /** Id natywnego pola - pozwala związać etykietę `KptFormField`. */
     id?: string;
     /**
-     * Podpowiedź autouzupełniania. Rejestracja i reset hasła wymagają `new-password` — inaczej
+     * Podpowiedź autouzupełniania. Rejestracja i reset hasła wymagają `new-password` - inaczej
      * menedżer haseł podstawia stare hasło zamiast zaproponować nowe.
      */
     autoComplete?: string | null;

package/dist/password/password.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { playInvalidMotion, 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 { useKptId } from "../internal/use-id.js";
@@ -22,7 +24,26 @@ export function KptPassword({ value, defaultValue = '', onValueChange, placehold
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [visible, setVisible] = useState(false);
     const showInvalid = invalid && (touched ?? true);
-    // Długość i różnorodność zamiast reguł składu — szczegóły w `internal/password-strength.ts`.
+    // Długość i różnorodność zamiast reguł składu - szczegóły w `internal/password-strength.ts`.
     const score = kptPasswordScore(current);
-    return (_jsxs("div", { className: cn('kpt-password-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-password', disabled && 'kpt-password--disabled', showInvalid && 'kpt-password--invalid'), children: [_jsx("input", { className: "kpt-password__input", id: inputId, type: visible ? 'text' : 'password', value: current, disabled: disabled, readOnly: readOnly, "aria-invalid": showInvalid || undefined, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-describedby": joinIds(field.describedBy, feedback && current && meterId), placeholder: placeholder, autoComplete: autoComplete ?? undefined, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }), _jsx("button", { type: "button", className: "kpt-password__toggle", disabled: disabled, onClick: () => setVisible(!visible), "aria-label": visible ? t('password.hide') : t('password.show'), children: _jsx(KptIcon, { name: visible ? 'eye-off' : 'eye' }) })] }), feedback && current ? (_jsxs("div", { className: "kpt-password__meter", id: meterId, "data-score": score, children: [_jsx("div", { className: "kpt-password__bars", "aria-hidden": "true", children: [0, 1, 2, 3].map((index) => (_jsx("span", { className: cn('kpt-password__bar', index < score && 'is-on') }, index))) }), _jsx("span", { className: "kpt-password__hint", children: messages.password.strength[score] })] })) : null] }));
+    /** Ruch miernika i błędu idzie za `enter` z `KptMotionProvider` (domyślnie `spring`). */
+    const motion = resolveEnterMotion(undefined, useKptMotion());
+    const boxRef = useRef(null);
+    // Po pierwszym renderze - dopiero wtedy wejścia z `@starting-style` mają prawo zagrać. Atrybut idzie
+    // prosto do DOM-u: host niesie `className` z propsów, a React nadpisałby klasę dopisaną z boku.
+    useEffect(() => {
+        boxRef.current?.parentElement?.setAttribute('data-live', '');
+    }, []);
+    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 = boxRef.current;
+        if (!showInvalid || before !== false || motion !== 'spring' || !el)
+            return;
+        playInvalidMotion(el, { shake: !el.closest('.kpt-form-field--invalid') });
+    }, [showInvalid, motion]);
+    return (_jsxs("div", { className: cn('kpt-password-host', className), "data-motion": motion, ...rest, children: [_jsxs("div", { ref: boxRef, className: cn('kpt-password', disabled && 'kpt-password--disabled', showInvalid && 'kpt-password--invalid'), children: [_jsx("input", { className: "kpt-password__input", id: inputId, type: visible ? 'text' : 'password', value: current, disabled: disabled, readOnly: readOnly, "aria-invalid": showInvalid || undefined, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-describedby": joinIds(field.describedBy, feedback && current && meterId), placeholder: placeholder, autoComplete: autoComplete ?? undefined, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }), _jsx("button", { type: "button", className: "kpt-password__toggle", disabled: disabled, onClick: () => setVisible(!visible), "aria-label": visible ? t('password.hide') : t('password.show'), children: _jsx(KptIcon, { name: visible ? 'eye-off' : 'eye' }) })] }), feedback && current ? (_jsxs("div", { className: "kpt-password__meter", id: meterId, "data-score": score, children: [_jsx("div", { className: "kpt-password__bars", "aria-hidden": "true", children: [0, 1, 2, 3].map((index) => (_jsx("span", { className: cn('kpt-password__bar', index < score && 'is-on'), style: { ['--_i']: index } }, index))) }), _jsx("span", { className: "kpt-password__hint", children: messages.password.strength[score] }, score)] })) : null] }));
 }

package/dist/peek/llms.txt

@@ -1,33 +1,33 @@
 # KptPeek (@konce-pt/react)
 
-A peek card — content tied to what you are looking at, shown without leaving the text. Hover opens
+A peek card - content tied to what you are looking at, shown without leaving the text. Hover opens
 it, the card itself is interactive, and a click pins it.
 Import: `import { KptPeek } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-peek-host">
-      <a class="kpt-peek__trigger" aria-expanded="true" aria-controls="…">…trigger…</a>
+      <a class="kpt-peek__trigger" aria-expanded="true" aria-controls="...">...trigger...</a>
     </span>
     <!-- while open, in a portal on document.body: -->
-    <div class="kpt-peek__panel" role="dialog" tabindex="-1" data-pinned>…children…</div>
+    <div class="kpt-peek__panel" role="dialog" tabindex="-1" data-pinned>...children...</div>
 
 ## Props
-- `trigger`: ReactNode — the element the card hangs on; a mention, an avatar, a chip, a link
-- `children`: ReactNode — the card content
+- `trigger`: ReactNode - the element the card hangs on; a mention, an avatar, a chip, a link
+- `children`: ReactNode - the card content
 - `placement`: 'top' | 'bottom' (default 'bottom')
 - `openDelay`: number (default 300), `closeDelay`: number (default 200)
-- `disabled`: boolean — the card never opens; the trigger stays a plain link or button
-- `label`: string — the card's accessible name; without it the trigger's text is used
-- `onOpenChange`: `(open: boolean) => void` — the moment to fetch the card's data
+- `disabled`: boolean - the card never opens; the trigger stays a plain link or button
+- `label`: string - the card's accessible name; without it the trigger's text is used
+- `onOpenChange`: `(open: boolean) => void` - the moment to fetch the card's data
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## The props land on the trigger itself
 A valid element passed as `trigger` is cloned with the handlers and `aria-expanded` merged in, so
-the state sits on the element a screen reader actually reads — not on some `<span>` next to it.
+the state sits on the element a screen reader actually reads - not on some `<span>` next to it.
 Anything else (a bare string) gets wrapped in a `<span>`.
 
 ## Hover is not the only way in
-Hover opens after `openDelay` and leaving closes after `closeDelay` — the pointer needs time to
+Hover opens after `openDelay` and leaving closes after `closeDelay` - the pointer needs time to
 travel from the trigger to the card, so entering the card cancels the close. Focus opens it with no
 delay. A click, Enter or a tap **pins** the card: it stays after the pointer leaves and focus moves
 inside it. That is the only route to the card's content where there is no hover at all. Escape

package/dist/peek/peek.d.ts

@@ -2,14 +2,14 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 /** Z której strony wyzwalacza wychodzi karta. */
 export type KptPeekPlacement = 'top' | 'bottom';
 export interface KptPeekProps extends Omit<ComponentPropsWithRef<'span'>, 'content'> {
-    /** Element, na którym wisi karta — wzmianka, awatar, chip albo zwykły link. */
+    /** Element, na którym wisi karta - wzmianka, awatar, chip albo zwykły link. */
     trigger: ReactNode;
     /** Treść karty. */
     children?: ReactNode;
     placement?: KptPeekPlacement;
-    /** Zwłoka otwarcia po najechaniu (ms) — bez niej karty mrugają przy przejeżdżaniu przez tekst. */
+    /** Zwłoka otwarcia po najechaniu (ms) - bez niej karty mrugają przy przejeżdżaniu przez tekst. */
     openDelay?: number;
-    /** Zwłoka zamknięcia po zjeździe kursora (ms) — tyle jest na przejazd z wyzwalacza na kartę. */
+    /** Zwłoka zamknięcia po zjeździe kursora (ms) - tyle jest na przejazd z wyzwalacza na kartę. */
     closeDelay?: number;
     /** Wyłączona karta nie otwiera się wcale; wyzwalacz zostaje zwykłym linkiem czy przyciskiem. */
     disabled?: boolean;
@@ -18,18 +18,18 @@ export interface KptPeekProps extends Omit<ComponentPropsWithRef<'span'>, 'conte
     onOpenChange?: (open: boolean) => void;
 }
 /**
- * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Karta podglądu pod kursorem - treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
  * Tym różni się od sąsiadów: `KptTooltip` niesie sam tekst i nie da się w nim kliknąć,
  * a `KptPopover` otwiera dopiero klik i zasłania stronę backdropem.
  *
- * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` - kursor musi mieć
  * czas przejechać z wyzwalacza na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
  * kartę od razu, a klik, Enter albo dotyk **przypina** ją: karta zostaje mimo zjazdu kursora,
  * a fokus wchodzi do środka. To jedyna droga do treści karty tam, gdzie hovera nie ma w ogóle.
  *
  * @example
  * <KptPeek trigger={<a href="/ludzie/anna">@Anna Kowalska</a>}>
- *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ *   <KptCard>Profil, projekty, kontakt...</KptCard>
  * </KptPeek>
  */
 export declare function KptPeek({ trigger, children, placement, openDelay, closeDelay, disabled, label, onOpenChange, className, ...rest }: Readonly<KptPeekProps>): import("react").JSX.Element;

package/dist/peek/peek.js

@@ -5,18 +5,18 @@ import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { mergeSlotProps } from "../internal/slot.js";
 /**
- * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Karta podglądu pod kursorem - treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
  * Tym różni się od sąsiadów: `KptTooltip` niesie sam tekst i nie da się w nim kliknąć,
  * a `KptPopover` otwiera dopiero klik i zasłania stronę backdropem.
  *
- * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` - kursor musi mieć
  * czas przejechać z wyzwalacza na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
  * kartę od razu, a klik, Enter albo dotyk **przypina** ją: karta zostaje mimo zjazdu kursora,
  * a fokus wchodzi do środka. To jedyna droga do treści karty tam, gdzie hovera nie ma w ogóle.
  *
  * @example
  * <KptPeek trigger={<a href="/ludzie/anna">@Anna Kowalska</a>}>
- *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ *   <KptCard>Profil, projekty, kontakt...</KptCard>
  * </KptPeek>
  */
 export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 300, closeDelay = 200, disabled = false, label, onOpenChange, className, ...rest }) {
@@ -31,9 +31,9 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
         triggerRef.current = el;
         setAnchor(el);
     }, []);
-    /** Tekst wyzwalacza jako nazwa karty — odczytany przy otwarciu, nie w renderze. */
+    /** Tekst wyzwalacza jako nazwa karty - odczytany przy otwarciu, nie w renderze. */
     const [triggerName, setTriggerName] = useState('');
-    /** Przypięta karta zostaje po zjeździe kursora — przypina ją klik, Enter albo dotyk. */
+    /** Przypięta karta zostaje po zjeździe kursora - przypina ją klik, Enter albo dotyk. */
     const [pinned, setPinned] = useState(false);
     const panelId = useId();
     const stop = useCallback(() => {
@@ -52,7 +52,7 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
         setTriggerName(triggerRef.current?.textContent?.trim() ?? '');
         setOpen(true);
     }, []);
-    // `onOpenChange` po zmianie stanu, a nie wewnątrz funkcji aktualizującej `setOpen` — ta musi być
+    // `onOpenChange` po zmianie stanu, a nie wewnątrz funkcji aktualizującej `setOpen` - ta musi być
     // czysta (StrictMode woła ją dwa razy, a React może ją powtórzyć przy przerwanym renderze).
     const notifyOpen = useEffectEvent((value) => onOpenChange?.(value));
     const reportedOpen = useRef(false);
@@ -125,7 +125,7 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
         onBlur: focusOut,
         onClick: pin,
         // Escape na wyzwalaczu odprawia kartę bez przenoszenia fokusu (WCAG 1.4.13). Zamknięta karta
-        // przepuszcza klawisz dalej — Escape nadal zamyka otaczające okno.
+        // przepuszcza klawisz dalej - Escape nadal zamyka otaczające okno.
         onKeyDown: (event) => {
             if (event.key !== 'Escape' || !open)
                 return;

package/dist/pick-list/llms.txt

@@ -10,20 +10,21 @@ Import: `import { KptPickList } from '@konce-pt/react';`
         <div class="kpt-pick-list__col">
           <div class="kpt-pick-list__header">Available</div>
           <ul class="kpt-pick-list__items">
-            <li class="kpt-pick-list__item is-selected">…</li>…
+            <li class="kpt-pick-list__item is-selected">...</li>...
           </ul>
         </div>
-        <div class="kpt-pick-list__controls">…four buttons…</div>
-        <div class="kpt-pick-list__col">…</div>
+        <div class="kpt-pick-list__controls">...four buttons...</div>
+        <div class="kpt-pick-list__col">...</div>
       </div>
     </div>
 
 ## Props
-- `source` / `defaultSource` / `onSourceChange` — the left list
-- `target` / `defaultTarget` / `onTargetChange` — the right list
-- `sourceHeader`, `targetHeader` — without them `pickList.available` / `pickList.selected`
-- `dragdrop` — `false` by default; enables dragging (opt-in, nothing changes without it)
-- `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
+- `source` / `defaultSource` / `onSourceChange` - the left list
+- `target` / `defaultTarget` / `onTargetChange` - the right list
+- `sourceHeader`, `targetHeader` - without them `pickList.available` / `pickList.selected`
+- `dragdrop` - `false` by default; enables dragging (opt-in, nothing changes without it)
+- `layoutMotion` - `'spring' | 'arc' | 'morph' | 'none'` (default from `KptMotionProvider`, else `spring`) - see below
+- `renderItem(item, index)` - required; the equivalent of `<ng-template let-item>`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The selection is kept by reference
@@ -33,7 +34,7 @@ they empty; a double-click or a drag only drops the one item that left.
 
 ## A double-click moves one item
 It sends exactly the row you clicked to the other panel and appends it at the end, whatever else is
-selected. It does not need `dragdrop` — the two clicks underneath cancel each other out, so the rest
+selected. It does not need `dragdrop` - the two clicks underneath cancel each other out, so the rest
 of the selection is left alone.
 
 ## Where a dragged item lands
@@ -57,22 +58,41 @@ half-controlled, or fully controlled by the form.
 The headers and the four move buttons come from the `pickList` namespace. Dragging and the
 double-click carry no visible label, so they add no dictionary keys.
 
+## Move motion
+`layoutMotion` animates moves and reorders made by the user (buttons, double-click, `Enter`,
+dragging):
+- `spring` - the row glides to its new place on a spring;
+- `arc` - the row lifts (shadow) and flies along an arc, tilted toward the move;
+- `morph` - the browser's own morph (View Transitions); without browser support the move is
+  instant, and the transition blocks clicks on the page for ~0.5 s;
+- `none` - no motion.
+
+A row crossing to the other list flies as a ghost - a copy above both panels, because the panel's
+`overflow` would clip the real row; the real row waits invisible where it lands. Neighbours close
+the gap or make room with a calm spring. The receiving list scrolls to the last moved row, so the
+landing is visible; rows scrolled out of view do not fly. A click in the middle of a flight starts
+the next one from where the rows are on screen.
+
+With no value it takes `layout` from `KptMotionProvider` (default `spring`); `enabled: false` there and
+the system "reduce motion" setting always win. Lists replaced from outside (`source`, `target`) switch
+instantly - the old state has to be measured before the DOM changes.
+
 ## Tokens
 The selection `--kpt-color-primary`, the headers `--kpt-color-surface-variant`.
 
 ## Keyboard
 Each list is a `listbox` with `aria-multiselectable` and a single Tab stop (roving tabindex):
-- `↓` / `↑` move between items (wrapping), `Home` / `End` jump to the ends;
+- `ArrowDown` / `ArrowUp` move between items (wrapping), `Home` / `End` jump to the ends;
 - `Space` toggles the focused item's selection (`aria-selected`), the same as a click;
-- `Enter` moves the focused item to the other list, the same as a double-click — focus stays at
+- `Enter` moves the focused item to the other list, the same as a double-click - focus stays at
   that position in the list, on the next item.
 The move buttons act on the same selection, so the whole control works without a mouse.
 
 ## Accessibility
 Each list is named after its header (`aria-label`). The four move buttons are labelled from the
 dictionary, so "move all right" is distinguishable from "move right" without seeing the double
-chevron. Native HTML5 drag and drop has no keyboard equivalent — `Enter` and the buttons cover
+chevron. Native HTML5 drag and drop has no keyboard equivalent - `Enter` and the buttons cover
 everything it does, and `dragdrop` adds to them, it never replaces them.
 
 ## Announcements and buttons
-A transfer between the lists is announced in a polite live region: `pickList.moved` with `{count}` and `{list}` (the target header). The move buttons carry `aria-disabled` when there is nothing to move (no selection, empty list) — they stay focusable, so focus does not drop to `<body>` when the selection clears after a move.
+A transfer between the lists is announced in a polite live region: `pickList.moved` with `{count}` and `{list}` (the target header). The move buttons carry `aria-disabled` when there is nothing to move (no selection, empty list) - they stay focusable, so focus does not drop to `<body>` when the selection clears after a move.

package/dist/pick-list/pick-list.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptLayoutMotion } from '@konce-pt/motion';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptPickListProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children'>, KptI18nOverrides {
     source?: T[];
@@ -13,13 +14,20 @@ export interface KptPickListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     targetHeader?: string;
     /** Włącza porządkowanie i przenoszenie elementów metodą przeciągnij-i-upuść. */
     dragdrop?: boolean;
-    /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
+    /**
+     * Ruch przy przenoszeniu i przestawianiu elementów: `spring` - element płynie na sprężynie,
+     * `arc` - unosi się i leci po łuku, `morph` - natywny morf przeglądarki (View Transitions),
+     * `none` - bez ruchu. Bez wartości bierze `layout` z `KptMotionProvider` (domyślnie `spring`);
+     * `<KptMotionProvider enabled={false}>` i systemowe "ogranicz ruch" wyłączają go zawsze.
+     */
+    layoutMotion?: KptLayoutMotion;
+    /** Szablon elementu - odpowiednik `<ng-template let-item>` z Angulara. */
     renderItem: (item: T, index: number) => ReactNode;
 }
 /**
- * PickList — transfer elementów między dwiema listami. Klik zaznacza, przyciski pośrodku
+ * PickList - transfer elementów między dwiema listami. Klik zaznacza, przyciski pośrodku
  * przenoszą zaznaczone albo wszystko, dwuklik przerzuca pojedynczy element na drugą stronę.
- * Z `dragdrop` dochodzi przeciąganie — porządkowanie wewnątrz panelu i przenoszenie na
+ * Z `dragdrop` dochodzi przeciąganie - porządkowanie wewnątrz panelu i przenoszenie na
  * konkretną pozycję drugiego panelu.
  *
  * Każda lista to `listbox` z wielokrotnym wyborem i jednym przystankiem Tab (roving tabindex):
@@ -34,4 +42,4 @@ export interface KptPickListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  *   renderItem={(item) => item.name}
  * />
  */
-export declare function KptPickList<T>({ source, defaultSource, onSourceChange, target, defaultTarget, onTargetChange, sourceHeader, targetHeader, dragdrop, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptPickListProps<T>>): import("react").JSX.Element;
+export declare function KptPickList<T>({ source, defaultSource, onSourceChange, target, defaultTarget, onTargetChange, sourceHeader, targetHeader, dragdrop, layoutMotion, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptPickListProps<T>>): import("react").JSX.Element;