@konce-pt/react 0.11.2 → 0.14.0

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

@@ -1,10 +1,12 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
+import { optionKey } from "../internal/option-key.js";
 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.
@@ -13,8 +15,8 @@ import { useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptSwitchGroup options={plans} value={plan} onValueChange={setPlan} />
  * <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, invalid = false, touched, onTouch, className, ...rest }) {
-    /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+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. */
     const field = useKptFieldA11y(id, 'kpt-switch-group');
     const [current, setCurrent] = useControllableState({
         value,
@@ -22,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;
@@ -46,7 +48,7 @@ export function KptSwitchGroup({ options = [], value, defaultValue = null, onVal
         // Bez `allowDeselect` nie robimy nic: `checked` jest wyliczane z wartości, a ta się nie
         // 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) => (_jsx(KptSwitch, { hostProps: { className: 'kpt-switch-group__item' }, checked: isChecked(option.value), label: option.label, disabled: disabled || option.disabled, 
-                // `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 }, String(option.value)))) }) }));
+    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.
+                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`,
@@ -52,3 +52,6 @@ The header is `role="tablist"` with `role="tab"` buttons carrying `aria-selected
 `aria-controls`. The tab row is a single `Tab` stop (roving `tabindex`): `ArrowLeft`/`ArrowRight`
 move between tabs, wrapping at the ends, `Home`/`End` jump to the first/last one, and disabled tabs
 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.

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

@@ -1,11 +1,13 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren, warnUnslottedChild } from "../internal/slot-children.js";
 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) {
@@ -15,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.
  *
@@ -26,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 }) {
@@ -42,40 +44,54 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
     const baseId = useKptId(undefined, 'kpt-tabs');
     const tabs = [];
     const contents = [];
-    Children.forEach(children, (child) => {
-        if (!isValidElement(child) || child.type?.kptTabsSlot !== 'tab')
-            return;
+    for (const child of slotChildren(children)) {
+        if (!isValidElement(child) || child.type?.kptTabsSlot !== 'tab') {
+            warnUnslottedChild('KptTabs', child, '<KptTab>');
+            continue;
+        }
         const props = child.props;
         tabs.push(props);
         contents.push(props.children);
-    });
+    }
+    const disabled = tabs.map((tab) => !!tab.disabled);
+    /**
+     * 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);
     const measureInk = useCallback(() => {
-        const button = buttonsRef.current[active];
+        const button = buttonsRef.current[shown];
         if (!button)
             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));
-    }, [active]);
+    }, [shown]);
     useLayoutEffect(measureInk);
+    // 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(() => {
+        const header = headerRef.current;
+        if (header && typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(measureInk);
+            observer.observe(header);
+            return () => observer.disconnect();
+        }
         window.addEventListener('resize', measureInk);
         return () => window.removeEventListener('resize', measureInk);
     }, [measureInk]);
-    const disabled = tabs.map((tab) => !!tab.disabled);
-    // Jedyna zakładka w kolejności Tab: aktywna, a gdy ta jest wyłączona — pierwsza dostępna.
-    const tabStop = rovingStop(disabled, active);
     const select = (index) => {
         if (tabs[index]?.disabled)
             return;
-        setDirection(index >= active ? 1 : -1);
+        setDirection(index >= shown ? 1 : -1);
         setActive(index);
     };
     const onKeyDown = (event) => {
         const current = buttonsRef.current.indexOf(document.activeElement);
-        const next = nextRovingIndex(disabled, current < 0 ? tabStop : current, event.key);
+        const next = nextRovingIndex(disabled, current < 0 ? shown : current, event.key);
         if (next === null)
             return;
         event.preventDefault();
@@ -86,8 +102,8 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ['--kpt-anim-dir']: direction,
             ...style,
-        }, ...rest, children: [_jsxs("div", { className: "kpt-tabs__header", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
+        }, ...rest, children: [_jsxs("div", { ref: headerRef, className: "kpt-tabs__header", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
                             buttonsRef.current[index] = el;
-                        }, type: "button", className: cn('kpt-tabs__tab', index === active && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === active, "aria-controls": index === active ? `${baseId}-panel` : undefined, tabIndex: index === tabStop ? 0 : -1, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${active}`, children: contents[active] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[active] }, active)) : null })] }));
+                        }, type: "button", className: cn('kpt-tabs__tab', index === shown && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === shown, "aria-controls": index === shown ? `${baseId}-panel` : undefined, tabIndex: index === shown ? 0 : -1, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${shown}`, children: contents[shown] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[shown] }, shown)) : null })] }));
 }
 KptTabs.Tab = KptTab;

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 />

package/dist/textarea/textarea.d.ts

@@ -1,30 +1,43 @@
 import { type ComponentPropsWithRef } from 'react';
+import type { KptSpeechMode } from '@konce-pt/speech';
 import type { KptHostProps } from '../internal/types.ts';
+import { type KptSpeechColor } from '../speech/speech-button.tsx';
 export interface KptTextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'required'> {
     /** Dopasowuje wysokość pola do treści przy każdej zmianie. */
     autoResize?: boolean;
     /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
     required?: boolean;
-    /** Licznik „12 / 280” pod polem (wymaga `maxLength`), czytany razem z polem przez `aria-describedby`. */
+    /** Licznik "12 / 280" pod polem (wymaga `maxLength`), czytany razem z polem przez `aria-describedby`. */
     counter?: boolean;
     /** Pole jest nieprawidłowe. Widoczne dopiero, gdy `touched` też jest prawdziwe. */
     invalid?: boolean;
     /** Czy pole było dotknięte; pominięty = stan błędu pokazuje się od razu po `invalid`. */
     touched?: boolean;
-    /** Wygodniejszy odpowiednik `onChange` — dostaje samą wartość. */
+    /** Wygodniejszy odpowiednik `onChange` - dostaje samą wartość. */
     onValueChange?: (value: string) => void;
-    /** Wywoływane na `blur` — moment, w którym pole staje się dotknięte. */
+    /** Wywoływane na `blur` - moment, w którym pole staje się dotknięte. */
     onTouch?: () => void;
     /** Propsy wrappera hosta (`.kpt-textarea-host`). `className` i `ref` idą na `<textarea>`. */
     hostProps?: KptHostProps<'span'>;
+    /**
+     * Mikrofon w górnym rogu pola (Web Speech API); dolny róg zostaje dla uchwytu zmiany rozmiaru.
+     * Bez wsparcia przeglądarki się nie pokazuje.
+     */
+    speech?: boolean;
+    /** Język dyktowania (BCP 47); bez niego z `KptI18nProvider`. */
+    speechLang?: string;
+    /** Kolor "stop" i fali w trakcie nasłuchu; domyślnie kolor motywu. */
+    speechColor?: KptSpeechColor;
+    /** `insert` (domyślnie, w kursor), `append` albo `replace` (czyści pole w chwili kliknięcia). */
+    speechMode?: KptSpeechMode;
 }
 /**
  * Pole wieloliniowe (textarea), z opcjonalnym auto-resize.
  *
- * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) — auto-resize
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) - auto-resize
  * czyta wysokość wprost z DOM, więc jest poprawny w obu trybach, także dla wartości początkowej.
  *
  * @example
- * <KptTextarea name="notes" placeholder="Notatki…" autoResize />
+ * <KptTextarea name="notes" placeholder="Notatki..." autoResize />
  */
-export declare function KptTextarea({ autoResize, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, rows, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, counter, ...rest }: Readonly<KptTextareaProps>): import("react").JSX.Element;
+export declare function KptTextarea({ autoResize, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, rows, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, counter, speech, speechLang, speechColor, speechMode, ...rest }: Readonly<KptTextareaProps>): import("react").JSX.Element;

package/dist/textarea/textarea.js

@@ -1,38 +1,52 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { composeRefs } from "../internal/compose-refs.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
+import { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 /**
  * Pole wieloliniowe (textarea), z opcjonalnym auto-resize.
  *
- * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) — auto-resize
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) - auto-resize
  * czyta wysokość wprost z DOM, więc jest poprawny w obu trybach, także dla wartości początkowej.
  *
  * @example
- * <KptTextarea name="notes" placeholder="Notatki…" autoResize />
+ * <KptTextarea name="notes" placeholder="Notatki..." autoResize />
  */
-export function KptTextarea({ autoResize = false, required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, rows = 3, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, counter = false, ...rest }) {
+export function KptTextarea({ autoResize = false, required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, rows = 3, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, counter = false, speech = false, speechLang, speechColor, speechMode = 'insert', ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const field = useKptFieldA11y(id, 'kpt-textarea');
     const textareaId = field.id;
     const innerRef = useRef(null);
-    // Długość tekstu dla licznika: w trybie kontrolowanym z `value`, w niekontrolowanym — z wpisów.
+    // Długość tekstu dla licznika: w trybie kontrolowanym z `value`, w niekontrolowanym - z wpisów.
     const [typedLength, setTypedLength] = useState(() => String(rest.value ?? rest.defaultValue ?? '').length);
     const length = rest.value !== undefined ? String(rest.value).length : typedLength;
     const showCounter = counter && !!rest.maxLength;
     const counterId = `${textareaId}-counter`;
     const showInvalid = invalid && (touched ?? true);
+    // Dyktowanie: przed pomiarem wysokości - hook przywraca tekst tymczasowy w swoim efekcie
+    // układu, więc `resize` niżej liczy pole razem z nim. Bez `speech` kontroler nie tworzy sesji.
+    const mic = useKptSpeechRecognition({
+        enabled: speech,
+        target: innerRef,
+        lang: speechLang,
+        mode: speechMode,
+        continuous: speechMode !== 'replace',
+        disabled: !!rest.disabled || !!rest.readOnly,
+    });
+    const speechState = speech && mic.available ? (mic.listening ? 'listening' : 'idle') : undefined;
     const resize = useCallback(() => {
         const el = innerRef.current;
         if (!el || !autoResize)
             return;
-        // Zerowanie przed odczytem `scrollHeight` jest konieczne — bez niego pole potrafi tylko
+        // Zerowanie przed odczytem `scrollHeight` jest konieczne - bez niego pole potrafi tylko
         // rosnąć, bo `scrollHeight` nigdy nie spada poniżej bieżącej wysokości.
         el.style.height = 'auto';
         el.style.height = `${el.scrollHeight}px`;
     }, [autoResize]);
-    // Wartość początkowa i każda zmiana z zewnątrz (tryb kontrolowany) — przed malowaniem,
+    // Wartość początkowa i każda zmiana z zewnątrz (tryb kontrolowany) - przed malowaniem,
     // żeby pole nie mrugnęło niedopasowaną wysokością.
     useLayoutEffect(resize);
     const handleChange = useCallback((event) => {
@@ -45,5 +59,6 @@ export function KptTextarea({ autoResize = false, required = false, invalid = fa
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsxs("span", { className: cn('kpt-textarea-host', hostClassName), ...hostRest, children: [_jsx("textarea", { className: cn('kpt-textarea__field', className), id: textareaId, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy, showCounter && counterId), rows: rows, ref: composeRefs(innerRef, ref), "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), showCounter ? (_jsxs("span", { className: "kpt-textarea__counter", id: counterId, children: [length, " / ", rest.maxLength] })) : null] }));
+    const textarea = (_jsx("textarea", { className: cn('kpt-textarea__field', className), id: textareaId, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy, showCounter && counterId), rows: rows, ref: composeRefs(innerRef, ref), "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }));
+    return (_jsxs("span", { className: cn('kpt-textarea-host', hostClassName), "data-speech": speechState, ...hostRest, children: [speech ? (_jsxs("span", { className: "kpt-textarea__box", children: [textarea, _jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: !!rest.disabled || !!rest.readOnly, hostProps: { className: 'kpt-textarea__speech' } })] })) : (textarea), showCounter ? (_jsxs("span", { className: "kpt-textarea__counter", id: counterId, children: [length, " / ", rest.maxLength] })) : null] }));
 }

package/dist/timeline/llms.txt

@@ -1,19 +1,19 @@
 # KptTimeline (@konce-pt/react)
 
-A timeline — a vertical list of events with markers.
+A timeline - a vertical list of events with markers.
 Import: `import { KptTimeline } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-timeline-host">
       <ol class="kpt-timeline">
         <li class="kpt-timeline__item">
-          <div class="kpt-timeline__marker" data-variant="success">…icon…</div>
+          <div class="kpt-timeline__marker" data-variant="success">...icon...</div>
           <div class="kpt-timeline__content">
             <div class="kpt-timeline__header">
               <span class="kpt-timeline__title">Order created</span>
               <span class="kpt-timeline__time">10:02</span>
             </div>
-            <p class="kpt-timeline__desc">…</p>
+            <p class="kpt-timeline__desc">...</p>
           </div>
         </li>
       </ol>
@@ -29,7 +29,7 @@ Import: `import { KptTimeline } from '@konce-pt/react';`
 - `variant?`: `'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info'` (default `'primary'`)
 
 ## The variant is an attribute, not a class
-The marker carries `data-variant`, and the SCSS maps it to `--_color` — the same contract as every
+The marker carries `data-variant`, and the SCSS maps it to `--_color` - the same contract as every
 other component in the library, so a new variant is a token, not a new class.
 
 ## The connecting line is a pseudo-element

package/dist/timeline/timeline.d.ts

@@ -11,7 +11,7 @@ export interface KptTimelineProps extends ComponentPropsWithRef<'div'> {
     items?: readonly KptTimelineItem[];
 }
 /**
- * Oś czasu — pionowa lista zdarzeń z markerami.
+ * Oś czasu - pionowa lista zdarzeń z markerami.
  *
  * @example
  * <KptTimeline items={[{ title: 'Utworzono', time: '10:00', variant: 'success', icon: 'check' }]} />

package/dist/timeline/timeline.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { KptIcon } from "../icon/icon.js";
 /**
- * Oś czasu — pionowa lista zdarzeń z markerami.
+ * Oś czasu - pionowa lista zdarzeń z markerami.
  *
  * @example
  * <KptTimeline items={[{ title: 'Utworzono', time: '10:00', variant: 'success', icon: 'check' }]} />

package/dist/toast/llms.txt

@@ -5,15 +5,15 @@ Import: `import { kptToast, KptToastContainer } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-toast-container-host">
-      <div class="kpt-toast-container" role="region" aria-label="Notifications">
-        <div class="kpt-toast" data-variant="success">
-          <span class="kpt-icon-host kpt-toast__icon">…</span>
+      <div class="kpt-toast-container" role="region" data-position="bottom-end" aria-label="Notifications">
+        <div class="kpt-toast" data-variant="success" data-appearance="outline">
+          <span class="kpt-icon-host kpt-toast__icon">...</span>
           <div class="kpt-toast__content">
             <div class="kpt-toast__title">Saved</div>
             <div class="kpt-toast__message">Your changes are stored.</div>
           </div>
           <button class="kpt-toast__action" type="button">Undo</button>
-          <button class="kpt-toast__close" type="button" aria-label="Close">…</button>
+          <button class="kpt-toast__close" type="button" aria-label="Close">...</button>
         </div>
       </div>
       <span class="kpt-toast-container__live" aria-live="polite" aria-atomic="true">Saved. Your changes are stored.</span>
@@ -21,15 +21,17 @@ Import: `import { kptToast, KptToastContainer } from '@konce-pt/react';`
     </div>
 
 ## kptToast
-- `show(message, options?)` — returns the toast id
-- `info` / `success` / `warning` / `error` — the same, with the variant preset
-- `dismiss(id)`, `clear()`, `pause()`, `resume()`
-- options: `title`, `variant`, `duration` (ms, default 4000; `0` disables auto-dismiss), `action: { label, run }`
+- `show(message, options?)` - returns the toast id
+- `info` / `success` / `warning` / `error` - the same, with the variant preset
+- `dismiss(id)`, `clear()`, `pause()`, `resume()`, `configure(config)`
+- options: `title`, `variant`, `duration` (ms, default 4000; `0` disables auto-dismiss), `action: { label, run }`,
+  `position`, `appearance` ('outline' | 'filled'), `closable` (default true), `progress` (default false)
+- `useKptToasts()`, `useKptToastsPaused()` - the queue and the paused state as hooks
 
 ## A module singleton, not a provider
 The store lives in the module, which is the closest equivalent of Angular's
-`providedIn: 'root'`. `kptToast.error(...)` therefore works from anywhere — including outside the
-React tree, in a data-layer error handler or an HTTP interceptor — with no provider wrapping the
+`providedIn: 'root'`. `kptToast.error(...)` therefore works from anywhere - including outside the
+React tree, in a data-layer error handler or an HTTP interceptor - with no provider wrapping the
 application. `useKptToasts()` exposes the current list when you want to render them yourself.
 
 ## Placement
@@ -42,25 +44,56 @@ mounts are kept in the store and appear as soon as it does.
 
     kptToast.success('Saved', { title: 'Saved' });
     kptToast.error('Could not connect to the server.', { title: 'Error', duration: 0 });
-    const id = kptToast.info('Uploading…', { duration: 0 });
+    const id = kptToast.info('Uploading...', { duration: 0 });
     kptToast.dismiss(id);
 
+## Position
+`<KptToastContainer position="top-end" />` - the corner for toasts without their own `position`:
+`top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, `bottom-end` (default).
+`start`/`end` are logical (they swap in RTL). Each corner is its own stack (`data-position`); the
+newest toast is always next to the edge (bottom of a bottom stack, top of a top one) and slides in
+from it. Distance from the edge: `--kpt-toast-offset` (default `--kpt-space-4`) plus the safe area;
+below 40rem a stack takes the full width. One toast can go elsewhere: `{ position: 'bottom-center' }`.
+
+## Appearance
+`appearance: 'outline'` (default) - a raised surface with the accent on the start edge;
+`'filled'` - the whole toast in the variant colour, content in `--kpt-color-<role>-contrast` (white
+on every variant in the light theme, dark in the dark theme).
+Icon, text, action and close button are centred on one axis.
+
+## Closing and the time bar
+`closable: false` hides the close button. A toast without the close button, without an action and
+with `duration: 0` could never be closed, so it gets `KPT_TOAST_FALLBACK_DURATION` (5000 ms).
+`progress: true` draws a time bar at the bottom that shrinks over `duration` and stops while the
+timers are paused (`useKptToastsPaused()` -> `data-paused` on the stack). It ignores the motion switch -
+it shows time, it is not decoration.
+
+## App-wide defaults
+    kptToast.configure({ appearance: 'filled', progress: true, duration: 5000 }); // once, at startup
+`KptToastConfig`: `duration`, `appearance`, `closable`, `progress`. Order: toast option >
+`kptToast.configure` > library default. `resolveKptToast(id, message, options, config)` is the same
+resolution as a pure function.
+
 ## Actions and pausing
-`action: { label, run }` adds one button to the toast (typically “Undo”); a click calls `run` and
+`action: { label, run }` adds one button to the toast (typically "Undo"); a click calls `run` and
 dismisses the toast. Give such toasts a longer `duration`, and keep the action available elsewhere.
 `pause()` / `resume()` stop and continue every timer; the container calls them on hover and focus,
 and resumes by itself when the stack empties.
 
 ## Tokens
-The semantic colour pairs of each variant (`--kpt-color-info` / `-success` / `-warning` /
-`-danger` with their `-subtle` and `on-` counterparts), `--kpt-elevation-3`, `--kpt-z-overlay`.
+The accent of each variant (`--kpt-color-info` / `-success` / `-warning` / `-danger`), the content
+of `filled` (`--kpt-color-<role>-contrast`), `--kpt-color-surface-raised`, `--kpt-elevation-3`,
+`--kpt-toast-offset`, `--kpt-z-toast`.
 
 ## Accessibility
-Announcements go through two permanent, visually hidden live regions next to the stack —
-`aria-live="polite"` for ordinary toasts and `aria-live="assertive"` for `danger` — and not through
+Announcements go through two permanent, visually hidden live regions next to the stack -
+`aria-live="polite"` for ordinary toasts and `aria-live="assertive"` for `danger` - and not through
 the toasts themselves: a live region has to exist before content appears in it, and nested regions
 are read twice by some screen readers. Each region is cleared before it is written, so the same
 text twice is announced twice, and a dismissed toast never re-announces an older one. While there
-are toasts the stack is `role="region"` named `toast.region` (“Notifications”). Pointer or focus on
+are toasts the stack is `role="region"` named `toast.region` ("Notifications"). Pointer or focus on
 the stack pauses every timer (WCAG 2.2.1); the timers resume with the time that was left. The close
 button is labelled from `common.close`.
+
+## Toasts with an action
+A toast with `action` does not close by itself (`duration` defaults to 0): a keyboard or screen-reader user cannot reach the "Undo" button at the end of the page within four seconds (WCAG 2.2.1). An explicit `duration` still wins.