@konce-pt/react 0.12.0 → 0.15.0

package/dist/meter-group/meter-group.js

@@ -25,7 +25,7 @@ export function KptMeterGroup({ values = [], max, showLegend = true, label = '',
     const color = (item, index) => item.color || PALETTE[index % PALETTE.length];
     const withUnit = (value) => (unit ? `${value} ${unit}` : String(value));
     const legendText = (item) => legendValue === 'value' ? withUnit(item.value) : `${Math.round(percent(item))}%`;
-    // Podział dla czytnika („Zdjęcia 42 GB, Filmy 28 GB…”) — sam `aria-valuenow` mówi tylko sumę.
+    // Podział dla czytnika ("Zdjęcia 42 GB, Filmy 28 GB...") - sam `aria-valuenow` mówi tylko sumę.
     const valueText = values.map((item) => `${item.label} ${withUnit(item.value)}`).join(', ');
     return (_jsx("div", { className: cn('kpt-meter-group-host', className), ...rest, children: _jsxs("div", { className: "kpt-meter-group", children: [_jsx("div", { className: "kpt-meter-group__track", role: "meter", "aria-valuemin": 0, "aria-valuenow": sum, "aria-valuemax": total, "aria-valuetext": valueText, "aria-label": label || t('meterGroup.label'), children: values.map((item, index) => (_jsx("span", { className: "kpt-meter-group__segment", style: { width: `${percent(item)}%`, backgroundColor: color(item, index) }, title: item.label }, index))) }), showLegend ? (_jsx("ul", { className: "kpt-meter-group__legend", children: values.map((item, index) => (_jsxs("li", { className: "kpt-meter-group__legend-item", children: [_jsx("span", { className: "kpt-meter-group__dot", style: { backgroundColor: color(item, index) } }), _jsx("span", { children: item.label }), _jsx("span", { className: "kpt-meter-group__val", children: legendText(item) })] }, index))) })) : null] }) }));
 }

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type KptLayoutMotion, type KptMotionConfig } from '@konce-pt/motion';
+export interface KptMotionProviderProps extends KptMotionConfig {
+    children?: ReactNode;
+}
+/**
+ * Globalne ustawienie ruchu Koncept UI: czy ruch jest włączony i jaki rodzaj ruchu dostają
+ * komponenty, które pozwalają go wybrać. Bez providera ruch jest włączony z domyślnymi
+ * wartościami; systemowe "ogranicz ruch" jest respektowane zawsze.
+ *
+ * `enabled={false}` gasi przejścia CSS wszystkich komponentów (atrybut `data-kpt-motion="off"`
+ * i zmienne na `:root` - nakładki w portalach też) oraz ruch sterowany z kodu; wskaźniki
+ * ładowania zwalniają zamiast stanąć.
+ *
+ * @example
+ * <KptMotionProvider layout="arc" collapse="fade"><App /></KptMotionProvider>
+ * <KptMotionProvider enabled={false}><App /></KptMotionProvider>
+ */
+export declare function KptMotionProvider({ enabled, layout, collapse, enter, toggle, children }: Readonly<KptMotionProviderProps>): import("react").JSX.Element;
+/** Konfiguracja ruchu z najbliższego providera; poza providerem `null` (wartości domyślne). */
+export declare function useKptMotion(): KptMotionConfig | null;
+export type { KptLayoutMotion, KptMotionConfig };

package/dist/motion/motion-context.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo } from 'react';
+import { applyMotionConfig } from '@konce-pt/motion';
+const KptMotionContext = createContext(null);
+/**
+ * Globalne ustawienie ruchu Koncept UI: czy ruch jest włączony i jaki rodzaj ruchu dostają
+ * komponenty, które pozwalają go wybrać. Bez providera ruch jest włączony z domyślnymi
+ * wartościami; systemowe "ogranicz ruch" jest respektowane zawsze.
+ *
+ * `enabled={false}` gasi przejścia CSS wszystkich komponentów (atrybut `data-kpt-motion="off"`
+ * i zmienne na `:root` - nakładki w portalach też) oraz ruch sterowany z kodu; wskaźniki
+ * ładowania zwalniają zamiast stanąć.
+ *
+ * @example
+ * <KptMotionProvider layout="arc" collapse="fade"><App /></KptMotionProvider>
+ * <KptMotionProvider enabled={false}><App /></KptMotionProvider>
+ */
+export function KptMotionProvider({ enabled, layout, collapse, enter, toggle, children }) {
+    const config = useMemo(() => ({ enabled, layout, collapse, enter, toggle }), [enabled, layout, collapse, enter, toggle]);
+    // Korzeń dokumentu, nie wrapper: przejścia w portalach (dialog, drawer) też muszą zgasnąć.
+    useLayoutEffect(() => applyMotionConfig(document.documentElement, config), [config]);
+    return _jsx(KptMotionContext.Provider, { value: config, children: children });
+}
+/** Konfiguracja ruchu z najbliższego providera; poza providerem `null` (wartości domyślne). */
+export function useKptMotion() {
+    return useContext(KptMotionContext);
+}

package/dist/order-list/llms.txt

@@ -7,26 +7,27 @@ Import: `import { KptOrderList } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-order-list-host">
       <div class="kpt-order-list">
-        <div class="kpt-order-list__controls">…up, down…</div>
+        <div class="kpt-order-list__controls">...up, down...</div>
         <div class="kpt-order-list__panel">
           <div class="kpt-order-list__header">Order</div>
           <ul class="kpt-order-list__items">
-            <li class="kpt-order-list__item is-selected">…</li>…
+            <li class="kpt-order-list__item is-selected">...</li>...
           </ul>
         </div>
       </div>
     </div>
 
 ## Props
-- `items` / `defaultItems` / `onItemsChange` — the list; the callback receives the new order
+- `items` / `defaultItems` / `onItemsChange` - the list; the callback receives the new order
 - `header`: string
-- `dragdrop` — `false` by default; enables dragging (opt-in, nothing changes without it)
-- `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
+- `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 follows the item
 After a move the selection jumps to the new index, so pressing the button again moves the same
-entry — with the selection pinned to a position, the second press would move its neighbour. A drop
+entry - with the selection pinned to a position, the second press would move its neighbour. A drop
 does the same.
 
 ## Where a dragged item lands
@@ -43,21 +44,32 @@ dragged one `is-dragging`.
 The buttons use `orderList.up` and `orderList.down`. Dragging carries no visible label, so it adds
 no dictionary keys.
 
+## Reorder motion
+`layoutMotion` animates a reorder made by the user (buttons, `Alt`+ArrowUp/ArrowDown, dragging):
+- `spring` - the moved item glides to its new place on a spring;
+- `arc` - the moved item lifts (shadow) and lands, above its neighbours;
+- `morph` - the browser's own morph (View Transitions); without support the change is instant;
+- `none` - no motion.
+
+Neighbours always make room with a calm spring, and the list scrolls to keep the moved item in
+view. With no value it takes `layout` from `KptMotionProvider` (default `spring`); `enabled: false` and the
+system "reduce motion" setting always win. A list replaced from outside (`items`) switches instantly.
+
 ## Tokens
 The selection `--kpt-color-primary`, the buttons `--kpt-color-surface-raised`.
 
 ## Keyboard
 The list is a `listbox` with a single Tab stop (roving tabindex), and the selection follows focus:
-- `↓` / `↑` select the next / previous item (wrapping), `Home` / `End` the first / last;
-- `Alt`+`↑` / `Alt`+`↓` move the selected item one place up / down — focus travels with it, so
+- `ArrowDown` / `ArrowUp` select the next / previous item (wrapping), `Home` / `End` the first / last;
+- `Alt`+`ArrowUp` / `Alt`+`ArrowDown` move the selected item one place up / down - focus travels with it, so
   repeated presses keep moving the same entry.
 The up / down buttons stay and act on the same selection.
 
 ## Accessibility
 The list is named after `header` (`aria-label`) and the selected item carries `aria-selected`.
 Both buttons are labelled from the dictionary and go disabled while nothing is selected. Native
-HTML5 drag and drop has no keyboard equivalent — `Alt`+arrows and the buttons cover it, and
+HTML5 drag and drop has no keyboard equivalent - `Alt`+arrows and the buttons cover it, and
 `dragdrop` adds to them, it never replaces them.
 
 ## Announcements
-Every reorder (buttons, Alt+↑/↓, drag and drop) is announced in a polite live region: `orderList.moved` with `{position}` and `{total}` — focus does not move, so a screen reader would not hear the new place otherwise.
+Every reorder (buttons, Alt+ArrowUp/ArrowDown, drag and drop) is announced in a polite live region: `orderList.moved` with `{position}` and `{total}` - focus does not move, so a screen reader would not hear the new place otherwise.

package/dist/order-list/order-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 KptOrderListProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children'>, KptI18nOverrides {
     items?: T[];
@@ -7,18 +8,25 @@ export interface KptOrderListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     header?: string;
     /** Włącza przestawianie pozycji metodą przeciągnij-i-upuść. */
     dragdrop?: boolean;
-    /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
+    /**
+     * Ruch przestawiania: `spring` - pozycja płynie na nowe miejsce na sprężynie, `arc` - unosi się
+     * z cieniem i ląduje, `morph` - natywny morf przeglądarki (View Transitions), `none` - bez ruchu.
+     * Sąsiedzi zawsze robią miejsce spokojną sprężyną. Bez wartości bierze `layout` z `KptMotionProvider`
+     * (domyślnie `spring`); `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;
 }
 /**
- * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
+ * OrderList - lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
  * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * Lista to `listbox` z jednym przystankiem Tab (roving tabindex), w którym zaznaczenie idzie
- * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+↑/↓ przestawia ją o jedno
+ * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+ArrowUp/ArrowDown przestawia ją o jedno
  * miejsce (fokus jedzie razem z nią).
  *
  * @example
  * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, dragdrop, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;
+export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, dragdrop, layoutMotion, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;

package/dist/order-list/order-list.js

@@ -1,25 +1,40 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { flushSync } from 'react-dom';
+import { isVisibleInScroller, layoutMotionAllowed, morphKeyed, playKeyedMotion, resolveLayoutMotion, revealInScroller, snapshotKeyed, stopKeyedMotion, } from '@konce-pt/motion';
 import { cn } from "../internal/cn.js";
 import { composeRefs } from "../internal/compose-refs.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 import { nextMenuIndex } from "../menu/menu-keys.js";
+import { useKptMotion } from "../motion/motion-context.js";
+/** Klasy ruchu przestawiania - reguły we wspólnym CSS komponentu (duchów tu nie ma: jedna lista). */
+const MOTION_CLASSES = {
+    ghostClass: 'kpt-order-list__ghost',
+    hiddenClass: 'kpt-order-list__item--waiting',
+    movingClass: 'kpt-order-list__item--moving',
+};
+/** Klasa View Transitions dla morfu. */
+const MORPH_CLASS = 'kpt-order-list-morph';
+/** Przewijany pojemnik wiersza. */
+function scrollerOf(element) {
+    return element.closest('.kpt-order-list__items');
+}
 const EMPTY = [];
 /**
- * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
+ * OrderList - lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
  * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * Lista to `listbox` z jednym przystankiem Tab (roving tabindex), w którym zaznaczenie idzie
- * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+↑/↓ przestawia ją o jedno
+ * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+ArrowUp/ArrowDown przestawia ją o jedno
  * miejsce (fokus jedzie razem z nią).
  *
  * @example
  * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, renderItem, locale, dictionary, className, ref, ...rest }) {
+export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, layoutMotion, renderItem, locale, dictionary, className, ref, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [list, setList] = useControllableState({
         value: items,
@@ -29,13 +44,71 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
     const [selected, setSelected] = useState(null);
     /** Indeks przeciąganej pozycji; `null` gdy nic nie jest przeciągane. */
     const [dragIndex, setDragIndex] = useState(null);
-    /** Indeks pozycji pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    /** Indeks pozycji pod kursorem - rysuje wskaźnik miejsca upuszczenia. */
     const [overIndex, setOverIndex] = useState(null);
-    /** Kursor nad pustym obszarem listy — upuszczenie tam dopina na koniec. */
+    /** Kursor nad pustym obszarem listy - upuszczenie tam dopina na koniec. */
     const [listOver, setListOver] = useState(false);
     /** Pozycja, na którą po renderze trzeba przenieść fokus DOM (klawiatura). */
     const [focusRequest, setFocusRequest] = useState(null);
     const rootRef = useRef(null);
+    const motionConfig = useKptMotion();
+    // `view-transition-name` musi być poprawnym identyfikatorem CSS - `useId` daje dwukropki.
+    const morphPrefix = `kpt-order-list-${useId().replaceAll(/[^a-zA-Z0-9-]/g, '')}`;
+    /** Który element danych pokazuje każdy wiersz - wiersze mają klucz po indeksie, więc go zmieniają. */
+    const keyOf = useRef(new WeakMap());
+    /** Stan sprzed zmiany, czekający na commit nowej kolejności. */
+    const pending = useRef(null);
+    /** Indeks przestawionej pozycji - lista przewija się do niej po zmianie. */
+    const revealIndex = useRef(null);
+    const stage = () => rootRef.current?.querySelector('.kpt-order-list') ?? null;
+    const nodes = () => {
+        const root = stage();
+        if (!root)
+            return [];
+        return Array.from(root.querySelectorAll('.kpt-order-list__items > .kpt-order-list__item')).flatMap((element) => keyOf.current.has(element) ? [{ key: keyOf.current.get(element), element }] : []);
+    };
+    const reveal = () => {
+        const row = revealIndex.current === null ? undefined : nodes()[revealIndex.current];
+        if (row)
+            revealInScroller(row.element, scrollerOf(row.element));
+    };
+    /**
+     * Przestawienie z ruchem. Stan sprzed zmiany mierzymy, zanim React zmieni DOM - dlatego animujemy
+     * zmiany z interakcji (przyciski, `Alt`+strzałki, przeciąganie), a lista podmieniona z zewnątrz
+     * przełącza się od razu.
+     */
+    const withMotion = (apply, lead, target, origin) => {
+        const motion = resolveLayoutMotion(layoutMotion, motionConfig);
+        revealIndex.current = target;
+        const root = stage();
+        if (motion === 'none' || !root || !layoutMotionAllowed()) {
+            apply();
+            return;
+        }
+        if (motion === 'morph') {
+            morphKeyed(nodes(), nodes, morphPrefix, MORPH_CLASS, () => {
+                flushSync(apply);
+                reveal();
+            }, (el) => isVisibleInScroller(el, scrollerOf(el)));
+            return;
+        }
+        pending.current = { first: snapshotKeyed(root, nodes(), scrollerOf), motion, lead, origin };
+        stopKeyedMotion(root, MOTION_CLASSES);
+        apply();
+    };
+    // Nowa kolejność jest już w DOM (a `keyOf` zaktualizowany refami) - gramy loty od zapamiętanego stanu.
+    const playPending = useEffectEvent(() => {
+        const job = pending.current;
+        pending.current = null;
+        const root = stage();
+        if (!job || !root)
+            return;
+        reveal();
+        playKeyedMotion(root, job.first, nodes(), { motion: job.motion, scrollerOf, ...MOTION_CLASSES, lead: new Set([job.lead]) }, job.origin);
+    });
+    useLayoutEffect(() => {
+        playPending();
+    }, [list]);
     // Żądanie nie jest zerowane w efekcie (setState w efekcie = dodatkowy przebieg renderu): każde jest
     // nowym obiektem, więc efekt rusza raz na żądanie, także o ten sam indeks.
     useEffect(() => {
@@ -57,30 +130,33 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         const text = t('orderList.moved', { position: index + 1, total });
         setAnnouncement((current) => (current === text ? text + '\u00a0' : text));
     };
-    const moveFrom = (index, dir) => {
+    const moveFrom = (index, dir, origin) => {
         const target = index + dir;
         if (target < 0 || target >= list.length)
             return index;
         const next = [...list];
+        const moved = next[index];
         [next[index], next[target]] = [next[target], next[index]];
-        setList(next);
-        // Zaznaczenie wędruje za elementem, nie zostaje na pozycji — inaczej kolejne kliknięcie
-        // przesuwałoby sąsiada zamiast tego samego wpisu.
-        setSelected(target);
+        withMotion(() => {
+            setList(next);
+            // Zaznaczenie wędruje za elementem, nie zostaje na pozycji - inaczej kolejne kliknięcie
+            // przesuwałoby sąsiada zamiast tego samego wpisu.
+            setSelected(target);
+        }, moved, target, origin);
         announce(target, next.length);
         return target;
     };
-    const move = (dir) => {
+    const move = (dir, origin) => {
         if (selected !== null)
-            moveFrom(selected, dir);
+            moveFrom(selected, dir, origin);
     };
     /** Przystanek Tab: zaznaczona pozycja albo pierwsza. */
     const tabStop = selected !== null && selected < list.length ? selected : 0;
-    // Strzałki wybierają pozycję (zaznaczenie idzie za fokusem), `Alt`+↑/↓ ją przestawia.
+    // Strzałki wybierają pozycję (zaznaczenie idzie za fokusem), `Alt`+ArrowUp/ArrowDown ją przestawia.
     const onItemKeyDown = (index, event) => {
         if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
             event.preventDefault();
-            setFocusRequest({ index: moveFrom(index, event.key === 'ArrowUp' ? -1 : 1) });
+            setFocusRequest({ index: moveFrom(index, event.key === 'ArrowUp' ? -1 : 1, event.currentTarget) });
             return;
         }
         const next = nextMenuIndex(list.length, index, event.key);
@@ -118,15 +194,17 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         clearDrag();
         if (from === null || from === index)
             return;
-        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // Indeks celu liczony na tablicy sprzed usunięcia - element ląduje na pozycji tego,
         // na który go upuszczono (ten sam wzór co przestawianie kolumn w KptDataTable).
         const next = [...list];
         const [moved] = next.splice(from, 1);
         if (moved === undefined)
             return;
         next.splice(index, 0, moved);
-        setList(next);
-        setSelected(index);
+        withMotion(() => {
+            setList(next);
+            setSelected(index);
+        }, moved, index, event.currentTarget);
         announce(index, next.length);
     };
     const onListDragOver = (event) => {
@@ -147,9 +225,14 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         if (moved === undefined)
             return;
         next.push(moved);
-        setList(next);
-        setSelected(next.length - 1);
+        withMotion(() => {
+            setList(next);
+            setSelected(next.length - 1);
+        }, moved, next.length - 1, event.currentTarget);
         announce(next.length - 1, next.length);
     };
-    return (_jsxs("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: [_jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }), _jsx("p", { className: "kpt-visually-hidden", "aria-live": "polite", children: announcement })] }));
+    return (_jsxs("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: [_jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: (event) => move(-1, event.currentTarget), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: (event) => move(1, event.currentTarget), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { ref: (element) => {
+                                        if (element)
+                                            keyOf.current.set(element, item);
+                                    }, className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }), _jsx("p", { className: "kpt-visually-hidden", "aria-live": "polite", children: announcement })] }));
 }

package/dist/paginator/llms.txt

@@ -5,22 +5,22 @@ Import: `import { KptPaginator } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-paginator">
-      <div class="kpt-paginator__size"><label>Rows: <select class="kpt-paginator__select">…</select></label></div>
-      <span class="kpt-paginator__range">1–10 of 120</span>
-      <div class="kpt-paginator__nav">…two KptButton…</div>
+      <div class="kpt-paginator__size"><label>Rows: <select class="kpt-paginator__select">...</select></label></div>
+      <span class="kpt-paginator__range">1-10 of 120</span>
+      <div class="kpt-paginator__nav">...two KptButton...</div>
     </div>
 
 ## Props
-- `length`: number — the total number of items (required)
-- `pageIndex` / `defaultPageIndex` / `onPageIndexChange` — the 0-based page
-- `pageSize` / `defaultPageSize` / `onPageSizeChange` — the page size (default 10)
+- `length`: number - the total number of items (required)
+- `pageIndex` / `defaultPageIndex` / `onPageIndexChange` - the 0-based page
+- `pageSize` / `defaultPageSize` / `onPageSizeChange` - the page size (default 10)
 - `pageSizeOptions`: readonly number[] (default [5, 10, 20, 50])
 
   The select always offers the current `pageSize` even when it is absent from this list: without
   that, `pageSize={8}` against the defaults left no matching option, so the control displayed the
   first entry while the table paged by eight.
-- `prevIcon`, `nextIcon`: ReactNode — the navigation button content
-- `locale`, `dictionary` — i18n overrides for this component only
+- `prevIcon`, `nextIcon`: ReactNode - the navigation button content
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the paginator root
 
 ## Behaviour

package/dist/paginator/paginator.js

@@ -27,7 +27,7 @@ export function KptPaginator({ length, pageSize, defaultPageSize = 10, onPageSiz
         defaultValue: defaultPageIndex,
         onChange: onPageIndexChange,
     });
-    // Rozmiar strony do rachunków — `0` albo ujemny dawałby `Infinity` stron i wieczne „dalej”.
+    // Rozmiar strony do rachunków - `0` albo ujemny dawałby `Infinity` stron i wieczne "dalej".
     const step = Math.max(1, size);
     const totalPages = Math.max(1, Math.ceil(length / step));
     const rangeStart = length === 0 ? 0 : index * step + 1;

package/dist/panel/llms.txt

@@ -8,13 +8,13 @@ Import: `import { KptPanel } from '@konce-pt/react';`
       <div class="kpt-panel">
         <div class="kpt-panel__header">
           <span class="kpt-panel__title">Settings</span>
-          <span class="kpt-panel__actions">…actions…</span>
+          <span class="kpt-panel__actions">...actions...</span>
           <button class="kpt-panel__toggle" aria-expanded="true" aria-controls="kpt-panel-body-r1"
-                  aria-label="Collapse / expand Settings">…</button>
+                  aria-label="Collapse / expand Settings">...</button>
         </div>
         <div class="kpt-panel__collapse is-open" id="kpt-panel-body-r1">
           <div class="kpt-panel__collapse-inner">
-            <div class="kpt-panel__body">…children…</div>
+            <div class="kpt-panel__body">...children...</div>
           </div>
         </div>
       </div>
@@ -22,37 +22,49 @@ Import: `import { KptPanel } from '@konce-pt/react';`
 
 ## Props
 - `header`: string
-- `toggleable`: boolean — adds the collapse button to the header
-- `collapsed` / `defaultCollapsed` / `onCollapsedChange` — controlled or uncontrolled
+- `toggleable`: boolean - adds the collapse button to the header
+- `collapsed` / `defaultCollapsed` / `onCollapsedChange` - controlled or uncontrolled
 - `animated`: boolean (default true), `animationDuration`: number (ms, default 500)
-- `locale`, `dictionary` — i18n overrides for this component only
+- `collapseMotion`: `'spring' | 'fade' | 'none'` (default from `KptMotionProvider`, else `spring`) - see "Collapse motion"
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Sub-components
-- `KptPanel.Actions` — lifted into the header, next to the title, before the collapse button.
+- `KptPanel.Actions` - lifted into the header, next to the title, before the collapse button.
 
 ## Collapsed content stays mounted
 It gets `inert` and `aria-hidden` rather than being removed, so the height is animatable while
 nothing inside can take focus or be read out. That is also why a collapsed panel keeps the state of
-whatever lives in it — a half-filled form inside survives a collapse.
+whatever lives in it - a half-filled form inside survives a collapse.
 
 ## i18n
 The toggle's label comes from `panel.toggleNamed` (with `{header}`) or `panel.toggle` in the dictionary.
 
 ## Examples
-    <KptPanel header="Settings" toggleable>Panel content…</KptPanel>
+    <KptPanel header="Settings" toggleable>Panel content...</KptPanel>
 
     <KptPanel header="Filters" toggleable collapsed={collapsed} onCollapsedChange={setCollapsed}>
       <KptPanel.Actions><KptIconButton aria-label="Reset"><KptIcon name="x" /></KptIconButton></KptPanel.Actions>
-      …
+      ...
     </KptPanel>
 
+## Collapse motion
+- `spring` - the height opens on a soft spring, the content slides in from above and sharpens out
+  of a blur; when collapsing, the content fades first and only then the section closes. The chevron
+  turns on a spring.
+- `fade` - the height on the standard curve, the content cross-fades.
+- `none` - the state changes without motion.
+
+With no value it takes `collapse` from `KptMotionProvider` (default `spring`). `animated={false}`, `enabled: false`
+in the config and the system "reduce motion" setting always turn it off. `animationDuration` sets
+the time of every kind. Pure CSS: the kind sits in `data-motion` on the component root.
+
 ## Tokens
 `--kpt-color-surface`, `--kpt-color-border`, `--kpt-radius-lg`, `--kpt-motion-easing-standard`.
 
 ## Accessibility
 The toggle is a native button with `aria-expanded` and `aria-controls` pointing at the body. Its
-name says which panel it collapses — `panel.toggleNamed` (“Collapse / expand Settings”) when there
-is a `header`, `panel.toggle` otherwise — so several panels on one page are told apart. A collapsed
-body is `inert` and `aria-hidden`. The header title is not a heading — add your own when the panel
+name says which panel it collapses - `panel.toggleNamed` ("Collapse / expand Settings") when there
+is a `header`, `panel.toggle` otherwise - so several panels on one page are told apart. A collapsed
+body is `inert` and `aria-hidden`. The header title is not a heading - add your own when the panel
 should appear in the document outline.

package/dist/panel/panel.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import { type KptCollapseMotion } from '@konce-pt/motion';
 export interface KptPanelProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
     header?: string;
     /** Dokłada przycisk zwijania w nagłówku. */
@@ -9,18 +10,25 @@ export interface KptPanelProps extends ComponentPropsWithRef<'div'>, KptI18nOver
     onCollapsedChange?: (collapsed: boolean) => void;
     animated?: boolean;
     animationDuration?: number;
+    /**
+     * Ruch zwijania: `spring` - wysokość na sprężynie, treść wjeżdża i wyostrza się, przy zwijaniu
+     * najpierw gaśnie; `fade` - treść się przenika; `none` - bez ruchu. Bez wartości bierze `collapse`
+     * z `KptMotionProvider` (domyślnie `spring`); `animated={false}`, `enabled={false}` i systemowe
+     * "ogranicz ruch" wyłączają go zawsze.
+     */
+    collapseMotion?: KptCollapseMotion;
     children?: ReactNode;
 }
 /**
  * Panel z nagłówkiem i opcjonalnym zwijaniem. Akcje nagłówka wstaw przez `<KptPanel.Actions>`.
  *
- * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` — dzięki temu wysokość da się
+ * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` - dzięki temu wysokość da się
  * animować, a mimo to nic z jej wnętrza nie łapie fokusu ani nie trafia do czytnika ekranu.
  *
  * @example
- * <KptPanel header="Ustawienia" toggleable>Treść…</KptPanel>
+ * <KptPanel header="Ustawienia" toggleable>Treść...</KptPanel>
  */
-export declare function KptPanel({ header, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, locale, dictionary, className, style, children, ...rest }: Readonly<KptPanelProps>): import("react").JSX.Element;
+export declare function KptPanel({ header, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, collapseMotion, locale, dictionary, className, style, children, ...rest }: Readonly<KptPanelProps>): import("react").JSX.Element;
 export declare namespace KptPanel {
     var Actions: typeof KptPanelActions;
 }

package/dist/panel/panel.js

@@ -7,18 +7,21 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { resolveCollapseMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
  * Panel z nagłówkiem i opcjonalnym zwijaniem. Akcje nagłówka wstaw przez `<KptPanel.Actions>`.
  *
- * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` — dzięki temu wysokość da się
+ * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` - dzięki temu wysokość da się
  * animować, a mimo to nic z jej wnętrza nie łapie fokusu ani nie trafia do czytnika ekranu.
  *
  * @example
- * <KptPanel header="Ustawienia" toggleable>Treść…</KptPanel>
+ * <KptPanel header="Ustawienia" toggleable>Treść...</KptPanel>
  */
-export function KptPanel({ header = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, locale, dictionary, className, style, children, ...rest }) {
+export function KptPanel({ header = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, collapseMotion, locale, dictionary, className, style, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const bodyId = useKptId(undefined, 'kpt-panel-body');
+    const motion = resolveCollapseMotion(collapseMotion, useKptMotion(), animated);
     const [isCollapsed, setCollapsed] = useControllableState({
         value: collapsed,
         defaultValue: defaultCollapsed,
@@ -30,7 +33,7 @@ export function KptPanel({ header = '', toggleable = false, collapsed, defaultCo
         const isActions = isValidElement(child) && child.type?.kptPanelSlot === 'actions';
         (isActions ? actions : body).push(child);
     }
-    return (_jsx("div", { className: cn('kpt-panel-host', className), style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsxs("div", { className: "kpt-panel", children: [_jsxs("div", { className: "kpt-panel__header", children: [_jsx("span", { className: "kpt-panel__title", children: header }), _jsx("span", { className: "kpt-panel__actions", children: actions }), toggleable ? (_jsx("button", { type: "button", className: "kpt-panel__toggle", onClick: () => setCollapsed(!isCollapsed), "aria-expanded": !isCollapsed, "aria-controls": bodyId, "aria-label": header ? t('panel.toggleNamed', { header }) : t('panel.toggle'), children: _jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }) })) : null] }), _jsx("div", { className: cn('kpt-panel__collapse', !isCollapsed && 'is-open'), id: bodyId, inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-panel__collapse-inner", children: _jsx("div", { className: "kpt-panel__body", children: body }) }) })] }) }));
+    return (_jsx("div", { className: cn('kpt-panel-host', className), style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsxs("div", { className: "kpt-panel", "data-motion": motion, children: [_jsxs("div", { className: "kpt-panel__header", children: [_jsx("span", { className: "kpt-panel__title", children: header }), _jsx("span", { className: "kpt-panel__actions", children: actions }), toggleable ? (_jsx("button", { type: "button", className: "kpt-panel__toggle", onClick: () => setCollapsed(!isCollapsed), "aria-expanded": !isCollapsed, "aria-controls": bodyId, "aria-label": header ? t('panel.toggleNamed', { header }) : t('panel.toggle'), children: _jsx(KptIcon, { name: "chevron-down", className: cn('kpt-panel__chevron', !isCollapsed && 'is-open') }) })) : null] }), _jsx("div", { className: cn('kpt-panel__collapse', !isCollapsed && 'is-open'), id: bodyId, inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-panel__collapse-inner", children: _jsx("div", { className: "kpt-panel__body", children: body }) }) })] }) }));
 }
 /** Akcje w nagłówku panelu, obok tytułu. */
 export function KptPanelActions({ className, ...rest }) {