@konce-pt/react 0.12.0 → 0.14.0

package/dist/stepper/stepper.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, isValidElement, useContext, useState, } from 'react';
+import { createContext, isValidElement, useContext, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
 import { slotChildren, warnUnslottedChild } from "../internal/slot-children.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { playStepperLight, preparePanelSwap, resolveEnterMotion, stepperSchedule, stepperScheduleOptions } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 const StepperContext = createContext(null);
 /**
- * Sterowanie kreatorem z wnętrza kroku — odpowiednik `#s` + `s.next()` z portu Angulara.
+ * Sterowanie kreatorem z wnętrza kroku - odpowiednik `#s` + `s.next()` z portu Angulara.
  * Poza `<KptStepper>` rzuca błąd, bo bez kreatora nie ma czym sterować.
  *
  * @example
@@ -21,7 +23,7 @@ export function useKptStepper() {
     return context;
 }
 /**
- * Pojedynczy krok. Umieszczaj w `<KptStepper>`. Treść renderuje się leniwie — dopiero gdy krok
+ * Pojedynczy krok. Umieszczaj w `<KptStepper>`. Treść renderuje się leniwie - dopiero gdy krok
  * jest aktywny, tak samo jak szablon `kpt-step` w porcie Angulara.
  */
 export function KptStep(_props) {
@@ -30,13 +32,13 @@ export function KptStep(_props) {
 }
 KptStep.kptStepperSlot = 'step';
 /**
- * Kreator kroków — nagłówek z numerowanymi krokami i treść aktywnego kroku.
+ * Kreator kroków - nagłówek z numerowanymi krokami i treść aktywnego kroku.
  * Treścią sterują `next()`/`prev()`/`goTo()` z hooka `useKptStepper()`.
  *
  * @example
  * <KptStepper>
- *   <KptStepper.Step label="Konto">…</KptStepper.Step>
- *   <KptStepper.Step label="Profil">…</KptStepper.Step>
+ *   <KptStepper.Step label="Konto">...</KptStepper.Step>
+ *   <KptStepper.Step label="Profil">...</KptStepper.Step>
  * </KptStepper>
  */
 export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, locale, dictionary, className, style, children, ...rest }) {
@@ -47,6 +49,18 @@ export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexC
         onChange: onActiveIndexChange,
     });
     const [direction, setDirection] = useState(1);
+    /** Ruch przełączania idzie za `animated` i za `enter` z `KptMotionProvider` (`none` go wyłącza). */
+    const motionConfig = useKptMotion();
+    const motion = animated ? resolveEnterMotion(undefined, motionConfig) : 'none';
+    // Krok sprzed ostatniej zmiany - także przy zmianie z zewnątrz (`activeIndex`). Zapamiętany
+    // w stanie w trakcie renderu (wzorzec "informacja z poprzedniego renderu"), nie w efekcie.
+    const [transition, setTransition] = useState({ from: active, to: active });
+    if (transition.to !== active)
+        setTransition({ from: transition.to, to: active });
+    const rootRef = useRef(null);
+    const bodyRef = useRef(null);
+    /** Duch starej treści przygotowany przed zmianą kroku, odtwarzany po jej wyrenderowaniu. */
+    const pendingSwap = useRef(null);
     const steps = [];
     for (const child of slotChildren(children)) {
         if (!isValidElement(child) || child.type?.kptStepperSlot !== 'step') {
@@ -55,10 +69,36 @@ export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexC
         }
         steps.push(child.props);
     }
+    /**
+     * Kiedy widać zmianę każdego znacznika i odcinka linii (`stepperSchedule` z @konce-pt/motion):
+     * kolor płynie po linii i zapala znacznik dopiero, gdy do niego dotrze. Bez ruchu - same zera.
+     */
+    // Tempo linii idzie za `animationDuration` - ten sam czas steruje całym ruchem, nie tylko treścią.
+    const schedule = stepperSchedule(steps.length, motion === 'none' ? active : transition.from, active, stepperScheduleOptions(animationDuration));
+    // Kometa po linii i fala w znaczniku, do którego dociera kolor; duch starej treści - przed malowaniem.
+    useLayoutEffect(() => {
+        const play = pendingSwap.current;
+        pendingSwap.current = null;
+        play?.();
+    });
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root || motion !== 'spring' || !schedule.direction)
+            return;
+        playStepperLight(schedule, root.querySelector('.kpt-stepper__comet'), Array.from(root.querySelectorAll('.kpt-stepper__connector')), Array.from(root.querySelectorAll('.kpt-stepper__marker')));
+        // Harmonogram liczy się z `transition` - gra raz na zmianę kroku, nie na każdy render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- schedule to pochodna transition i liczby kroków
+    }, [transition, motion]);
     const goTo = (index) => {
         const next = Math.max(0, Math.min(index, steps.length - 1));
+        if (next === active)
+            return;
         // Kierunek karmi `--kpt-anim-dir`, więc panel wjeżdża z tej strony, z której się cofnąłeś.
-        setDirection(next >= active ? 1 : -1);
+        const dir = next > active ? 1 : -1;
+        setDirection(dir);
+        // Stara treść wychodzi jako duch, a pojemnik płynnie zmienia wysokość - mierzone przed zmianą.
+        if (motion !== 'none' && bodyRef.current)
+            pendingSwap.current = preparePanelSwap(bodyRef.current, dir);
         setActive(next);
     };
     const context = {
@@ -68,13 +108,16 @@ export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexC
         prev: () => goTo(active - 1),
         goTo,
     };
-    return (_jsxs("div", { className: cn('kpt-stepper-host', className), style: {
+    return (_jsxs("div", { ref: rootRef, className: cn('kpt-stepper-host', className), style: {
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ['--kpt-anim-dir']: direction,
             ...style,
-        }, ...rest, children: [_jsx("ol", { className: "kpt-stepper__header", children: steps.map((step, index) => (_jsxs("li", { className: cn('kpt-stepper__step', index === active && 'is-active', index < active && 'is-done'), children: [_jsx("button", { type: "button", className: "kpt-stepper__marker", "aria-current": index === active ? 'step' : undefined, "aria-label": t(index < active ? 'stepper.stepDone' : 'stepper.step', {
+        }, ...rest, children: [_jsx("ol", { className: "kpt-stepper__header", children: steps.map((step, index) => (_jsxs("li", { className: cn('kpt-stepper__step', index === active && 'is-active', index < active && 'is-done'), style: { ['--kpt-stepper-mark-delay']: `${schedule.markers[index] ?? 0}ms` }, children: [_jsxs("button", { type: "button", className: "kpt-stepper__marker", "aria-current": index === active ? 'step' : undefined, "aria-label": t(index < active ? 'stepper.stepDone' : 'stepper.step', {
                                 index: index + 1,
                                 label: step.label,
-                            }), onClick: () => goTo(index), children: index < active ? _jsx(KptIcon, { name: "check" }) : index + 1 }), _jsx("span", { className: "kpt-stepper__label", "aria-hidden": "true", children: step.label }), index < steps.length - 1 ? _jsx("span", { className: "kpt-stepper__connector" }) : null] }, index))) }), _jsx(StepperContext.Provider, { value: context, children: _jsx("div", { className: "kpt-stepper__body", children: steps[active] ? (_jsx("div", { className: "kpt-stepper__panel", children: steps[active].children }, active)) : null }) })] }));
+                            }), onClick: () => goTo(index), children: [_jsx("span", { className: "kpt-stepper__num", children: index + 1 }), _jsx(KptIcon, { className: "kpt-stepper__check", name: "check" })] }), _jsx("span", { className: "kpt-stepper__label", "aria-hidden": "true", children: step.label }), index < steps.length - 1 ? (_jsx("span", { className: "kpt-stepper__connector", style: {
+                                ['--kpt-stepper-line-delay']: `${schedule.lines[index]?.delay ?? 0}ms`,
+                                ['--kpt-stepper-line-dur']: `${schedule.lines[index]?.duration ?? 0}ms`,
+                            } })) : null] }, index))) }), _jsx("span", { className: "kpt-stepper__comet", "aria-hidden": "true" }), _jsx(StepperContext.Provider, { value: context, children: _jsx("div", { className: "kpt-stepper__body", ref: bodyRef, children: steps[active] ? (_jsx("div", { className: "kpt-stepper__panel", children: steps[active].children }, active)) : null }) })] }));
 }
 KptStepper.Step = KptStep;

package/dist/switch/llms.txt

@@ -16,16 +16,17 @@ Import: `import { KptSwitch } from '@konce-pt/react';`
 
 ## Props
 - `label`: string, `labelPosition`: 'start' | 'end' (default 'end')
-- `onLabel`, `offLabel`: string — the state text, swapped on toggle
+- `onLabel`, `offLabel`: string - the state text, swapped on toggle
 - `checked` / `defaultChecked`, `onCheckedChange(checked)`, `onTouch()`
-- `required`, `invalid`, `touched` — as in `KptCheckbox`
-- `hostProps` — props for the `.kpt-switch-host` wrapper
+- `required`, `invalid`, `touched` - as in `KptCheckbox`
+- `toggleMotion`: 'spring' | 'fade' | 'none' (default from `KptMotionProvider`, else `spring`) - see "Toggle motion"
+- `hostProps` - props for the `.kpt-switch-host` wrapper
 - `className` goes to the `.kpt-switch` block; the rest to the native `<input>`
 
 ## The state text needs a controlled value
 `onLabel` and `offLabel` read `checked`, so they only follow the switch in controlled mode.
 Uncontrolled, the value belongs to the DOM and React never learns about a toggle, which would
-freeze the state text on its initial value — use `checked` with `onCheckedChange` whenever you
+freeze the state text on its initial value - use `checked` with `onCheckedChange` whenever you
 show one.
 
 ## Examples
@@ -43,12 +44,18 @@ 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 switch gets both names: the wrapper label and its own `label`.
 
+## Toggle motion
+`toggleMotion`: `spring` - the thumb travels on a spring and stretches while moving; `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.
+
 ## Tokens
 `--kpt-color-primary` (the on track), `--kpt-color-muted` (the off track), `--kpt-color-surface`
 (the thumb), `--kpt-motion-duration-fast`.
 
 ## Accessibility
-`role="switch"` on a native checkbox — a screen reader announces on/off instead of
+`role="switch"` on a native checkbox - a screen reader announces on/off instead of
 checked/unchecked. The track and the thumb are `aria-hidden`.
 
 ## Read-only and required

package/dist/switch/switch.d.ts

@@ -1,6 +1,13 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { KptHostProps } from '../internal/types.ts';
+import { type KptToggleMotion } from '@konce-pt/motion';
 export interface KptSwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'> {
+    /**
+     * Ruch przełączania: `spring` - kciuk jedzie na sprężynie i rozciąga się w ruchu; `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 przełącznika. */
     label?: string;
     /** Pozycja etykiety względem przełącznika. */
@@ -15,7 +22,7 @@ export interface KptSwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'ty
     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;
@@ -27,7 +34,7 @@ export interface KptSwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'ty
  * Przełącznik (switch/toggle). Pod spodem natywny `<input type="checkbox" role="switch">`,
  * więc klawiatura i czytniki ekranu działają bez dodatkowej obsługi.
  *
- * Wariant z tekstem stanu: `onLabel`/`offLabel` — wyświetlany tekst zmienia się przy przełączaniu.
+ * Wariant z tekstem stanu: `onLabel`/`offLabel` - wyświetlany tekst zmienia się przy przełączaniu.
  *
  * Tekst stanu wymaga `checked` (tryb kontrolowany), bo w trybie niekontrolowanym wartość należy
  * do DOM i React o niej nie wie; bez tego etykieta stanu zamarłaby na wartości początkowej.
@@ -36,4 +43,4 @@ export interface KptSwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'ty
  * <KptSwitch name="notifications" label="Powiadomienia" />
  * <KptSwitch checked={on} onCheckedChange={setOn} onLabel="Włączony" offLabel="Wyłączony" />
  */
-export declare function KptSwitch({ label, labelPosition, onLabel, offLabel, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, readOnly, onClick, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, ...rest }: Readonly<KptSwitchProps>): import("react").JSX.Element;
+export declare function KptSwitch({ label, labelPosition, onLabel, offLabel, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, readOnly, onClick, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, toggleMotion, ...rest }: Readonly<KptSwitchProps>): import("react").JSX.Element;

package/dist/switch/switch.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { cn } from "../internal/cn.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
+import { playPopMotion, resolveToggleMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
  * Przełącznik (switch/toggle). Pod spodem natywny `<input type="checkbox" role="switch">`,
  * więc klawiatura i czytniki ekranu działają bez dodatkowej obsługi.
  *
- * Wariant z tekstem stanu: `onLabel`/`offLabel` — wyświetlany tekst zmienia się przy przełączaniu.
+ * Wariant z tekstem stanu: `onLabel`/`offLabel` - wyświetlany tekst zmienia się przy przełączaniu.
  *
  * Tekst stanu wymaga `checked` (tryb kontrolowany), bo w trybie niekontrolowanym wartość należy
  * do DOM i React o niej nie wie; bez tego etykieta stanu zamarłaby na wartości początkowej.
@@ -16,21 +18,26 @@ import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptSwitch name="notifications" label="Powiadomienia" />
  * <KptSwitch checked={on} onCheckedChange={setOn} onLabel="Włączony" offLabel="Wyłączony" />
  */
-export function KptSwitch({ label = '', labelPosition = 'end', onLabel = '', offLabel = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, readOnly = false, onClick, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, ...rest }) {
+export function KptSwitch({ label = '', labelPosition = 'end', onLabel = '', offLabel = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, readOnly = false, onClick, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, toggleMotion, ...rest }) {
     const field = useKptFieldA11y(id, 'kpt-switch');
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const showInvalid = invalid && (touched ?? true);
     const hasStateLabels = !!(onLabel || offLabel);
+    const motion = resolveToggleMotion(toggleMotion, useKptMotion());
     const handleChange = useCallback((event) => {
         onChange?.(event);
         onCheckedChange?.(event.target.checked);
-    }, [onChange, onCheckedChange]);
+        // Kciuk rozciąga się w ruchu - z handlera, nie z CSS, bo reguła na `:checked` grałaby przy starcie.
+        const thumb = event.currentTarget.nextElementSibling?.firstElementChild;
+        if (motion === 'spring' && thumb instanceof HTMLElement)
+            playPopMotion(thumb, 'squash');
+    }, [onChange, onCheckedChange, motion]);
     const handleBlur = useCallback((event) => {
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-switch-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-switch', disabled && 'kpt-switch--disabled', className), children: [label && labelPosition === 'start' ? (_jsx("span", { className: "kpt-switch__label kpt-switch__label--start", children: label })) : null, _jsx("input", { type: "checkbox", role: "switch", className: "kpt-switch__input", id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), checked: checked, 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-switch-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-switch', disabled && 'kpt-switch--disabled', className), "data-motion": motion, children: [label && labelPosition === 'start' ? (_jsx("span", { className: "kpt-switch__label kpt-switch__label--start", children: label })) : null, _jsx("input", { type: "checkbox", role: "switch", className: "kpt-switch__input", id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), checked: checked, 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();

package/dist/switch-group/llms.txt

@@ -1,30 +1,30 @@
 # KptSwitchGroup (@konce-pt/react)
 
-A group of switches — mutually exclusive by default, multi-select with `multiple`.
+A group of switches - mutually exclusive by default, multi-select with `multiple`.
 Import: `import { KptSwitchGroup } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-switch-group-host">
       <div class="kpt-switch-group" role="group">
-        <span class="kpt-switch-host kpt-switch-group__item">…KptSwitch…</span>
-        …one per option…
+        <span class="kpt-switch-host kpt-switch-group__item">...KptSwitch...</span>
+        ...one per option...
       </div>
     </div>
 
 ## Props
-- `options`: `KptOption<T>[]` — `{ label, value, disabled? }`
-- `value` / `defaultValue` / `onValueChange` — single select: the option's value or `null`;
+- `options`: `KptOption<T>[]` - `{ label, value, disabled? }`
+- `value` / `defaultValue` / `onValueChange` - single select: the option's value or `null`;
   with `multiple`: an array of the selected values
 - `multiple`: boolean (default false)
 - `orientation`: `'vertical'` (default) | `'horizontal'`
-- `allowDeselect`: boolean (default true) — single select only; in `multiple` mode turning an
+- `allowDeselect`: boolean (default true) - single select only; in `multiple` mode turning an
   option off is always allowed
 - `disabled`, `invalid`, `touched`, `onTouch()`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Single select comes out of the value, not out of the switches
 Every entry is a `KptSwitch` whose `checked` is derived from the group value, so turning one on
-turns the rest off by itself — there is no per-switch state to keep in sync.
+turns the rest off by itself - there is no per-switch state to keep in sync.
 
 That is also why `allowDeselect={false}` needs no code: the handler writes nothing, so React
 re-applies the controlled `checked` and the switch snaps back on.
@@ -37,7 +37,7 @@ re-applies the controlled `checked` and the switch snaps back on.
 ## Screen reader and keyboard
 `aria-invalid` is not supported on `role="group"`, so the error state is carried by each switch. In
 single mode the switches are mutually exclusive and nothing announces that turning one on turned
-another off — for a single choice prefer `KptRadioGroup`.
+another off - for a single choice prefer `KptRadioGroup`.
 
 ## Label and description
 `id` goes to the focusable element, not the host; without one it comes from `KptFormField` or is
@@ -54,4 +54,4 @@ Layout only: `--kpt-space-2` (vertical gap) and `--kpt-space-4` (horizontal). Th
 checkbox of `KptSwitch`, so keyboard and screen readers work with no extra handling.
 
 ## Read-only and required
-`readOnly` is passed to every switch. With `allowDeselect=false` turning the active switch off puts it back on — before, the switch looked off while the group value said it was on.
+`readOnly` is passed to every switch. With `allowDeselect=false` turning the active switch off puts it back on - before, the switch looked off while the group value said it was on.

package/dist/switch-group/switch-group.d.ts

@@ -6,24 +6,24 @@ export interface KptSwitchGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     value?: T | T[] | null;
     defaultValue?: T | T[] | null;
     onValueChange?: (value: T | T[] | null) => void;
-    /** Wielokrotny wybór — wartością staje się tablica `T[]`. */
+    /** Wielokrotny wybór - wartością staje się tablica `T[]`. */
     multiple?: boolean;
     orientation?: 'vertical' | 'horizontal';
     /** Czy wyłączenie aktywnej opcji zeruje wartość. Dotyczy tylko trybu pojedynczego. */
     allowDeselect?: 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;
     disabled?: boolean;
-    /** Tylko do odczytu — przełączniki widać, nie da się ich zmienić. */
+    /** Tylko do odczytu - przełączniki widać, nie da się ich zmienić. */
     readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
 }
 /**
- * Grupa przełączników. Domyślnie wzajemnie wykluczających się — włączenie jednego wyłącza
+ * Grupa przełączników. Domyślnie wzajemnie wykluczających się - włączenie jednego wyłącza
  * pozostałe; z `multiple` wartością jest tablica zaznaczonych opcji.
  *
  * Renderuje `KptSwitch`, więc dziedziczy jego wygląd, tokeny i obsługę klawiatury.

package/dist/switch-group/switch-group.js

@@ -6,7 +6,7 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { KptSwitch } from "../switch/switch.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
- * Grupa przełączników. Domyślnie wzajemnie wykluczających się — włączenie jednego wyłącza
+ * Grupa przełączników. Domyślnie wzajemnie wykluczających się - włączenie jednego wyłącza
  * pozostałe; z `multiple` wartością jest tablica zaznaczonych opcji.
  *
  * Renderuje `KptSwitch`, więc dziedziczy jego wygląd, tokeny i obsługę klawiatury.
@@ -16,7 +16,7 @@ import { useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptSwitchGroup multiple options={tags} value={selected} onValueChange={setSelected} />
  */
 export function KptSwitchGroup({ options = [], value, defaultValue = null, onValueChange, multiple = false, orientation = 'vertical', allowDeselect = true, id, ariaLabel = null, disabled = false, readOnly = false, invalid = false, touched, onTouch, className, ...rest }) {
-    /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    /** Grupa nie dostaje nazwy z `label[for]` - stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-switch-group');
     const [current, setCurrent] = useControllableState({
         value,
@@ -24,7 +24,7 @@ export function KptSwitchGroup({ options = [], value, defaultValue = null, onVal
         onChange: onValueChange,
     });
     const showInvalid = invalid && (touched ?? true);
-    // Wartość normalizujemy do tablicy tylko na potrzeby odczytu w trybie multiple —
+    // Wartość normalizujemy do tablicy tylko na potrzeby odczytu w trybie multiple -
     // `null` i wartość pojedyncza są równie poprawnym wejściem.
     const selected = Array.isArray(current) ? current : current == null ? [] : [current];
     const isChecked = (optionValue) => multiple ? selected.includes(optionValue) : optionValue === current;
@@ -49,6 +49,6 @@ export function KptSwitchGroup({ options = [], value, defaultValue = null, onVal
         // zmieniła, więc przełącznik sam wraca do włączonego przy najbliższym renderze.
     };
     return (_jsx("div", { className: cn('kpt-switch-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-switch-group', orientation === 'horizontal' && 'kpt-switch-group--horizontal'), role: "group", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, children: options.map((option, index) => (_jsx(KptSwitch, { hostProps: { className: 'kpt-switch-group__item' }, checked: isChecked(option.value), label: option.label, disabled: disabled || option.disabled, readOnly: readOnly, 
-                // `aria-invalid` nie działa na `role="group"` — stan błędu niesie każdy przełącznik.
+                // `aria-invalid` nie działa na `role="group"` - stan błędu niesie każdy przełącznik.
                 invalid: showInvalid, onCheckedChange: (checked) => toggle(option, checked), onTouch: onTouch }, optionKey(option.value, index)))) }) }));
 }

package/dist/tabs/llms.txt

@@ -1,6 +1,6 @@
 # KptTabs (@konce-pt/react)
 
-Tabs — switching views, with the content rendered lazily.
+Tabs - switching views, with the content rendered lazily.
 Import: `import { KptTabs } from '@konce-pt/react';`
 
 ## DOM
@@ -14,33 +14,33 @@ Import: `import { KptTabs } from '@konce-pt/react';`
       </div>
       <div class="kpt-tabs__body" role="tabpanel" tabindex="0" id="kpt-tabs-r1-panel"
            aria-labelledby="kpt-tabs-r1-tab-0">
-        <div class="kpt-tabs__panel">…active tab content…</div>
+        <div class="kpt-tabs__panel">...active tab content...</div>
       </div>
     </div>
 
 ## Props
-- `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange` — controlled or uncontrolled
+- `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange` - controlled or uncontrolled
 - `animated`: boolean (default true), `animationDuration`: number (ms, default 500)
-- `children` — `<KptTabs.Tab>` elements
+- `children` - `<KptTabs.Tab>` elements
 
 ## KptTabs.Tab
-`label` (required), `disabled`, `children`. The tab component never renders itself — `KptTabs`
+`label` (required), `disabled`, `children`. The tab component never renders itself - `KptTabs`
 reads its props and decides what to show, exactly as the Angular version reads the `kpt-tab`
 template. Only the active tab's content is in the DOM.
 
 ## The underline is measured, not computed
 `__ink` takes its width and offset from the active button in the DOM, not from the index: tabs have
 different widths and the labels change with the language. The measurement runs after every render,
-and the state is only replaced when the numbers actually change — otherwise each measurement would
+and the state is only replaced when the numbers actually change - otherwise each measurement would
 schedule another render and the component would loop.
 
 ## Examples
     <KptTabs>
-      <KptTabs.Tab label="General">…</KptTabs.Tab>
-      <KptTabs.Tab label="Advanced">…</KptTabs.Tab>
+      <KptTabs.Tab label="General">...</KptTabs.Tab>
+      <KptTabs.Tab label="Advanced">...</KptTabs.Tab>
     </KptTabs>
 
-    <KptTabs activeIndex={tab} onActiveIndexChange={setTab} animated={false}>…</KptTabs>
+    <KptTabs activeIndex={tab} onActiveIndexChange={setTab} animated={false}>...</KptTabs>
 
 ## Tokens
 `--kpt-color-primary` (the active tab and the ink), `--kpt-color-on-surface-muted`,
@@ -54,4 +54,4 @@ move between tabs, wrapping at the ends, `Home`/`End` jump to the first/last one
 are skipped. Moving activates the tab straight away; the next `Tab` goes to the panel.
 
 ## Inactive content is destroyed
-Switching renders the new panel from scratch (that is what the enter animation starts from), so local state inside the previous one — an unsent file upload, expanded sections, scroll position — is lost. Keep such state in your own model, outside the panel.
+Switching renders the new panel from scratch (that is what the enter animation starts from), so local state inside the previous one - an unsent file upload, expanded sections, scroll position - is lost. Keep such state in your own model, outside the panel.

package/dist/tabs/tabs.d.ts

@@ -5,7 +5,7 @@ export interface KptTabProps {
     children?: ReactNode;
 }
 /**
- * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie — dopiero gdy
+ * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie - dopiero gdy
  * zakładka jest aktywna, tak samo jak szablon `kpt-tab` w porcie Angulara.
  */
 export declare function KptTab(_props: Readonly<KptTabProps>): ReactNode;
@@ -21,9 +21,9 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
     children?: ReactNode;
 }
 /**
- * Zakładki — przełączanie widoków, treść renderowana leniwie.
+ * Zakładki - przełączanie widoków, treść renderowana leniwie.
  *
- * Klawiatura według wzorca WAI-ARIA „tabs”: rząd zakładek to jeden przystanek Tab, strzałki
+ * Klawiatura według wzorca WAI-ARIA "tabs": rząd zakładek to jeden przystanek Tab, strzałki
  * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
  * aktywują, a kolejny `Tab` prowadzi do panelu.
  *
@@ -32,8 +32,8 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
  *
  * @example
  * <KptTabs>
- *   <KptTabs.Tab label="Ogólne">…</KptTabs.Tab>
- *   <KptTabs.Tab label="Zaawansowane">…</KptTabs.Tab>
+ *   <KptTabs.Tab label="Ogólne">...</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane">...</KptTabs.Tab>
  * </KptTabs>
  */
 export declare function KptTabs({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptTabsProps>): import("react").JSX.Element;

package/dist/tabs/tabs.js

@@ -7,7 +7,7 @@ import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 /**
- * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie — dopiero gdy
+ * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie - dopiero gdy
  * zakładka jest aktywna, tak samo jak szablon `kpt-tab` w porcie Angulara.
  */
 export function KptTab(_props) {
@@ -17,9 +17,9 @@ export function KptTab(_props) {
 }
 KptTab.kptTabsSlot = 'tab';
 /**
- * Zakładki — przełączanie widoków, treść renderowana leniwie.
+ * Zakładki - przełączanie widoków, treść renderowana leniwie.
  *
- * Klawiatura według wzorca WAI-ARIA „tabs”: rząd zakładek to jeden przystanek Tab, strzałki
+ * Klawiatura według wzorca WAI-ARIA "tabs": rząd zakładek to jeden przystanek Tab, strzałki
  * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
  * aktywują, a kolejny `Tab` prowadzi do panelu.
  *
@@ -28,8 +28,8 @@ KptTab.kptTabsSlot = 'tab';
  *
  * @example
  * <KptTabs>
- *   <KptTabs.Tab label="Ogólne">…</KptTabs.Tab>
- *   <KptTabs.Tab label="Zaawansowane">…</KptTabs.Tab>
+ *   <KptTabs.Tab label="Ogólne">...</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane">...</KptTabs.Tab>
  * </KptTabs>
  */
 export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
@@ -55,7 +55,7 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
     }
     const disabled = tabs.map((tab) => !!tab.disabled);
     /**
-     * Zakładka pokazywana i jedyna w kolejności Tab: aktywna, a gdy ta jest wyłączona — pierwsza
+     * Zakładka pokazywana i jedyna w kolejności Tab: aktywna, a gdy ta jest wyłączona - pierwsza
      * dostępna. Wyłączona zakładka nie może wyglądać na wybraną (ani mieć swojego panelu).
      */
     const shown = rovingStop(disabled, active);
@@ -65,12 +65,12 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
             return;
         const next = { x: button.offsetLeft, w: button.offsetWidth };
         // Pomiar biegnie po KAŻDYM renderze (etykiety zmieniają się z językiem, a przycisków nie da
-        // się zmierzyć przed montażem). Bez porównania `setInk` wywoływałby kolejny render w kółko —
+        // się zmierzyć przed montażem). Bez porównania `setInk` wywoływałby kolejny render w kółko -
         // React przerywa aktualizację dopiero wtedy, gdy dostanie ten sam obiekt stanu.
         setInk((prev) => (prev.x === next.x && prev.w === next.w ? prev : next));
     }, [shown]);
     useLayoutEffect(measureInk);
-    // Szerokość paska zakładek zmienia się też bez zmiany okna (panel boczny, splitter) — mierzymy
+    // Szerokość paska zakładek zmienia się też bez zmiany okna (panel boczny, splitter) - mierzymy
     // kontener, a `resize` okna zostaje tylko tam, gdzie nie ma ResizeObservera.
     const headerRef = useRef(null);
     useLayoutEffect(() => {

package/dist/textarea/llms.txt

@@ -9,42 +9,53 @@ A multi-line field, with optional auto-resize. It renders a native `<textarea>`
     </span>
 
 ## Props
-- `autoResize`: boolean — matches the height to the content on every change
-- `rows`: number (default 3) — the starting height
-- `value` / `defaultValue` — controlled or uncontrolled, like a native textarea
-- `onValueChange(value)`, `onTouch()` — the value alone, and the blur moment
-- `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 wrapper
+- `autoResize`: boolean - matches the height to the content on every change
+- `rows`: number (default 3) - the starting height
+- `value` / `defaultValue` - controlled or uncontrolled, like a native textarea
+- `onValueChange(value)`, `onTouch()` - the value alone, and the blur moment
+- `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 wrapper
 - `className`, `ref`, `name`, `placeholder` and every other `<textarea>` prop go to the textarea
 
 ## Auto-resize
 The height is read straight from the DOM (`scrollHeight`), so it is right for a controlled field, an
 uncontrolled one, and a prefilled initial value alike. The measurement resets the height to `auto`
-first — without that a field can only ever grow, since `scrollHeight` never drops below the current
+first - without that a field can only ever grow, since `scrollHeight` never drops below the current
 height.
 
 ## Examples
-    <KptTextarea name="notes" placeholder="Notes…" autoResize />
+    <KptTextarea name="notes" placeholder="Notes..." autoResize />
     <KptTextarea value={note} onValueChange={setNote} rows={6} />
     <KptFormField label="Notes" error={err}>
       <KptTextarea invalid={!!err} onTouch={markTouched} />
     </KptFormField>
 
 ## Screen reader and keyboard
-`counter`: boolean — a "12 / 280" counter under the field (requires the native `maxLength`), read
+`counter`: boolean - a "12 / 280" counter under the field (requires the native `maxLength`), read
 together with it through `aria-describedby`.
 
 ## Label and description
 `id` goes to the native field, not the host; without one it comes from `KptFormField` or is
 generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the hint or error is
 added to `aria-describedby` (merged with your own). Without a wrapper, name it with `aria-label`.
-New: `id`, `ariaLabel` and `required` (→ `aria-required`); `[formField]` binds `required`.
+New: `id`, `ariaLabel` and `required` (-> `aria-required`); `[formField]` binds `required`.
 
 ## Tokens
-`--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}` —
+`--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}` -
 the same set as the text field, so both controls stay in step.
 
 ## Accessibility
 A native `<textarea>`. Inside `KptFormField` it takes its `id` from the wrapper, so `label[for]`
 is wired with no configuration.
+
+## Dictation
+- `speech`: boolean = false - a microphone in the top corner of the field (the bottom corner belongs
+  to the resize handle); the wave appears under it. The field then sits in `.kpt-textarea__box`.
+  Without browser support it is not shown.
+- `speechLang`: string; `speechMode`: `'insert' | 'append' | 'replace'` = `'insert'`.
+- `speechColor`: `'primary' | 'danger' | 'success' | 'warning' | 'info'` = `'primary'` - colour of "stop" and the wave while listening.
+
+Interim words are visible but never reach your state; `autoResize` follows the dictated text.
+
+    <KptTextarea value={notes} onValueChange={setNotes} speech autoResize />