@konce-pt/react 0.12.0 → 0.15.0

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

@@ -4,36 +4,49 @@ 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) => {
@@ -46,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,26 +44,54 @@ 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`.
 

package/dist/toast/toast-container.d.ts

@@ -1,17 +1,23 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import { type KptToastPosition } from './toast-store.ts';
 export interface KptToastContainerProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
+    /** Położenie toastów, które nie podały własnego `position`. Domyślnie `bottom-end`. */
+    position?: KptToastPosition;
 }
 /**
  * Kontener renderujący toasty z `kptToast`. Umieść raz w aplikacji, np. w komponencie głównym.
  *
- * Ogłaszanie idzie przez dwa stałe, niewidoczne regiony na żywo — uprzejmy dla zwykłych toastów
- * i natychmiastowy dla błędów — a nie przez same toasty: region musi istnieć, zanim pojawi się
+ * Ogłaszanie idzie przez dwa stałe, niewidoczne regiony na żywo - uprzejmy dla zwykłych toastów
+ * i natychmiastowy dla błędów - a nie przez same toasty: region musi istnieć, zanim pojawi się
  * w nim treść, a zagnieżdżone regiony część czytników ogłasza dwa razy. Gdy wskaźnik albo fokus
  * jest na toastach, liczniki stoją, więc komunikat nie znika w trakcie czytania.
  *
+ * Toasty rosną w rogu z `position` kontenera albo z własnego `position` - każdy róg to osobny stos,
+ * przy górnej krawędzi najnowszy jest na górze, przy dolnej na dole.
+ *
  * @example
  * <KptToastContainer />
  * // gdziekolwiek: kptToast.success('Zapisano');
  */
-export declare function KptToastContainer({ locale, dictionary, className, ...rest }: Readonly<KptToastContainerProps>): import("react").JSX.Element;
+export declare function KptToastContainer({ position, locale, dictionary, className, ...rest }: Readonly<KptToastContainerProps>): import("react").JSX.Element;

package/dist/toast/toast-container.js

@@ -4,7 +4,9 @@ import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
-import { kptToast, useKptToasts } from "./toast-store.js";
+import { kptToast, useKptToasts, useKptToastsPaused } from "./toast-store.js";
+/** Kolejność grup w DOM - stała, żeby dodanie toastu w innym rogu nie przestawiało pozostałych. */
+const POSITIONS = ['top-start', 'top-center', 'top-end', 'bottom-start', 'bottom-center', 'bottom-end'];
 const ICONS = {
     info: 'info',
     success: 'circle-check',
@@ -14,21 +16,27 @@ const ICONS = {
 /**
  * Kontener renderujący toasty z `kptToast`. Umieść raz w aplikacji, np. w komponencie głównym.
  *
- * Ogłaszanie idzie przez dwa stałe, niewidoczne regiony na żywo — uprzejmy dla zwykłych toastów
- * i natychmiastowy dla błędów — a nie przez same toasty: region musi istnieć, zanim pojawi się
+ * Ogłaszanie idzie przez dwa stałe, niewidoczne regiony na żywo - uprzejmy dla zwykłych toastów
+ * i natychmiastowy dla błędów - a nie przez same toasty: region musi istnieć, zanim pojawi się
  * w nim treść, a zagnieżdżone regiony część czytników ogłasza dwa razy. Gdy wskaźnik albo fokus
  * jest na toastach, liczniki stoją, więc komunikat nie znika w trakcie czytania.
  *
+ * Toasty rosną w rogu z `position` kontenera albo z własnego `position` - każdy róg to osobny stos,
+ * przy górnej krawędzi najnowszy jest na górze, przy dolnej na dole.
+ *
  * @example
  * <KptToastContainer />
  * // gdziekolwiek: kptToast.success('Zapisano');
  */
-export function KptToastContainer({ locale, dictionary, className, ...rest }) {
+export function KptToastContainer({ position = 'bottom-end', locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const toasts = useKptToasts();
+    const paused = useKptToastsPaused();
+    // Toasty pogrupowane po rogu; tylko niepuste grupy, każda w osobnym przypiętym stosie.
+    const groups = POSITIONS.map((at) => ({ position: at, toasts: toasts.filter((toast) => (toast.position ?? position) === at) })).filter((group) => group.toasts.length);
     const [politeText, setPoliteText] = useState('');
     const [alertText, setAlertText] = useState('');
-    // Ostatni ogłoszony toast — zamknięcie nowszego nie może ponownie ogłosić starszego.
+    // Ostatni ogłoszony toast - zamknięcie nowszego nie może ponownie ogłosić starszego.
     const lastAnnounced = useRef(0);
     const holds = useRef(new Set());
     const hold = (reason, on) => {
@@ -42,7 +50,7 @@ export function KptToastContainer({ locale, dictionary, className, ...rest }) {
             kptToast.resume();
     };
     useEffect(() => {
-        // Pusty kontener nie dostanie już `mouseleave`, więc zdejmujemy wstrzymanie sami —
+        // Pusty kontener nie dostanie już `mouseleave`, więc zdejmujemy wstrzymanie sami -
         // inaczej kolejne toasty czekałyby w nieskończoność.
         if (!toasts.length && holds.current.size) {
             holds.current.clear();
@@ -56,7 +64,7 @@ export function KptToastContainer({ locale, dictionary, className, ...rest }) {
         for (const toast of fresh) {
             const text = toast.title ? `${toast.title}. ${toast.message}` : toast.message;
             const set = toast.variant === 'danger' ? setAlertText : setPoliteText;
-            // Czyścimy region przed wpisaniem — ten sam tekst drugi raz inaczej nie zostałby ogłoszony.
+            // Czyścimy region przed wpisaniem - ten sam tekst drugi raz inaczej nie zostałby ogłoszony.
             set('');
             frames.push(requestAnimationFrame(() => set(text)));
         }
@@ -68,8 +76,8 @@ export function KptToastContainer({ locale, dictionary, className, ...rest }) {
             return;
         hold('focus', false);
     };
-    return (_jsxs("div", { className: cn('kpt-toast-container-host', className), ...rest, children: [_jsx("div", { className: "kpt-toast-container", role: toasts.length ? 'region' : undefined, "aria-label": toasts.length ? t('toast.region') : undefined, onMouseEnter: () => hold('pointer', true), onMouseLeave: () => hold('pointer', false), onFocus: () => hold('focus', true), onBlur: onBlur, children: toasts.map((toast) => (_jsxs("div", { className: "kpt-toast", "data-variant": toast.variant, children: [_jsx(KptIcon, { className: "kpt-toast__icon", name: ICONS[toast.variant] }), _jsxs("div", { className: "kpt-toast__content", children: [toast.title ? _jsx("div", { className: "kpt-toast__title", children: toast.title }) : null, _jsx("div", { className: "kpt-toast__message", children: toast.message })] }), toast.action ? (_jsx("button", { className: "kpt-toast__action", type: "button", onClick: () => {
+    return (_jsxs("div", { className: cn('kpt-toast-container-host', className), ...rest, children: [groups.map((group) => (_jsx("div", { className: "kpt-toast-container", role: "region", "data-position": group.position, "data-paused": paused ? '' : undefined, "aria-label": t('toast.region'), onMouseEnter: () => hold('pointer', true), onMouseLeave: () => hold('pointer', false), onFocus: () => hold('focus', true), onBlur: onBlur, children: group.toasts.map((toast) => (_jsxs("div", { className: "kpt-toast", "data-variant": toast.variant, "data-appearance": toast.appearance, children: [_jsx(KptIcon, { className: "kpt-toast__icon", name: ICONS[toast.variant] }), _jsxs("div", { className: "kpt-toast__content", children: [toast.title ? _jsx("div", { className: "kpt-toast__title", children: toast.title }) : null, _jsx("div", { className: "kpt-toast__message", children: toast.message })] }), toast.action ? (_jsx("button", { className: "kpt-toast__action", type: "button", onClick: () => {
                                 toast.action?.run();
                                 kptToast.dismiss(toast.id);
-                            }, children: toast.action.label })) : null, _jsx("button", { className: "kpt-toast__close", type: "button", onClick: () => kptToast.dismiss(toast.id), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })] }, toast.id))) }), _jsx("span", { className: "kpt-toast-container__live", "aria-live": "polite", "aria-atomic": "true", children: politeText }), _jsx("span", { className: "kpt-toast-container__live", "aria-live": "assertive", "aria-atomic": "true", children: alertText })] }));
+                            }, children: toast.action.label })) : null, toast.closable ? (_jsx("button", { className: "kpt-toast__close", type: "button", onClick: () => kptToast.dismiss(toast.id), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null, toast.progress && toast.duration > 0 ? (_jsx("span", { className: "kpt-toast__timer", "aria-hidden": "true", style: { '--_duration': `${toast.duration}ms` } })) : null] }, toast.id))) }, group.position))), _jsx("span", { className: "kpt-toast-container__live", "aria-live": "polite", "aria-atomic": "true", children: politeText }), _jsx("span", { className: "kpt-toast-container__live", "aria-live": "assertive", "aria-atomic": "true", children: alertText })] }));
 }

package/dist/toast/toast-store.d.ts

@@ -1,23 +1,54 @@
 import type { KptAlertVariant } from '../shared/types.ts';
-/** Przycisk akcji w toaście, np. „Cofnij”. Kliknięcie uruchamia `run` i zamyka toast. */
+/** Przycisk akcji w toaście, np. "Cofnij". Kliknięcie uruchamia `run` i zamyka toast. */
 export interface KptToastAction {
     label: string;
     run: () => void;
 }
+/**
+ * Róg albo środek krawędzi okna, przy którym rosną toasty. `start`/`end` są logiczne - w układzie
+ * od prawej do lewej zamieniają się stronami same.
+ */
+export type KptToastPosition = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+/** `outline` - jasna powierzchnia z akcentem na krawędzi; `filled` - całe tło w barwie wariantu. */
+export type KptToastAppearance = 'outline' | 'filled';
 export interface KptToast {
     id: number;
     message: string;
     title?: string;
     variant: KptAlertVariant;
     /**
-     * Czas życia w ms; 0 = bez auto-zamykania. Domyślnie 4000 ms, a dla toastu z `action` — 0:
-     * użytkownik klawiatury albo czytnika nie zdąży dojść do przycisku „Cofnij” w kontenerze na końcu
-     * strony, zanim toast zniknie (WCAG 2.2.1). Jawne `duration` zawsze wygrywa.
+     * Czas życia w ms; 0 = bez auto-zamykania. Domyślnie 4000 ms, a dla toastu z `action` - 0:
+     * użytkownik klawiatury albo czytnika nie zdąży dojść do przycisku "Cofnij" w kontenerze na końcu
+     * strony, zanim toast zniknie (WCAG 2.2.1). Jawne `duration` zawsze wygrywa - poza jednym
+     * przypadkiem: toast bez X, bez akcji i bez czasu nie dałby się zamknąć, więc dostaje 5000 ms.
      */
     duration: number;
     action?: KptToastAction;
+    /** Położenie tego toastu; bez wartości - `position` kontenera. */
+    position?: KptToastPosition;
+    appearance: KptToastAppearance;
+    /** `false` chowa przycisk X. */
+    closable: boolean;
+    /** Pasek czasu na dole toastu - kurczy się do zamknięcia i staje razem z licznikiem. */
+    progress: boolean;
 }
 export type KptToastOptions = Partial<Omit<KptToast, 'id' | 'message'>>;
+/** Wartości domyślne toastów całej aplikacji - `kptToast.configure(...)`. Opcje toastu wygrywają. */
+export interface KptToastConfig {
+    /** Czas życia toastu bez akcji (ms). Domyślnie 4000. */
+    duration?: number;
+    appearance?: KptToastAppearance;
+    closable?: boolean;
+    progress?: boolean;
+}
+/** Czas toastu, którego inaczej nie dałoby się zamknąć (bez X, bez akcji, bez czasu). */
+export declare const KPT_TOAST_FALLBACK_DURATION = 5000;
+/**
+ * Pełny toast z opcji i konfiguracji. Kolejność: opcja toastu > `kptToast.configure` > wartość
+ * biblioteki. Na końcu bezpiecznik: toast, którego nie da się zamknąć ani przyciskiem, ani akcją,
+ * dostaje czas, bo inaczej zostałby na ekranie na zawsze.
+ */
+export declare function resolveKptToast(id: number, message: string, options: KptToastOptions, config: KptToastConfig | null): KptToast;
 declare function show(message: string, options?: KptToastOptions): number;
 declare function dismiss(id: number): void;
 declare function clear(): void;
@@ -25,8 +56,11 @@ declare function clear(): void;
 declare function pause(): void;
 /** Wznawia liczniki od pozostałego czasu. */
 declare function resume(): void;
+/** Domyślny wygląd i zachowanie toastów w całej aplikacji; wołaj raz, przy starcie. */
+declare function configure(next: KptToastConfig): void;
 /** Powiadomienia (toasty). Renderuje je `<KptToastContainer />`, umieszczony raz w aplikacji. */
 export declare const kptToast: {
+    configure: typeof configure;
     show: typeof show;
     info: (message: string, options?: KptToastOptions) => number;
     success: (message: string, options?: KptToastOptions) => number;
@@ -39,4 +73,6 @@ export declare const kptToast: {
 };
 /** Bieżąca lista toastów. Używane przez kontener; przydaje się też do własnego renderowania. */
 export declare function useKptToasts(): KptToast[];
+/** Czy liczniki stoją (wskaźnik albo fokus na toastach, albo `kptToast.pause()`). */
+export declare function useKptToastsPaused(): boolean;
 export {};

package/dist/toast/toast-store.js

@@ -1,7 +1,31 @@
 import { useSyncExternalStore } from 'react';
+/** Czas toastu, którego inaczej nie dałoby się zamknąć (bez X, bez akcji, bez czasu). */
+export const KPT_TOAST_FALLBACK_DURATION = 5000;
+/**
+ * Pełny toast z opcji i konfiguracji. Kolejność: opcja toastu > `kptToast.configure` > wartość
+ * biblioteki. Na końcu bezpiecznik: toast, którego nie da się zamknąć ani przyciskiem, ani akcją,
+ * dostaje czas, bo inaczej zostałby na ekranie na zawsze.
+ */
+export function resolveKptToast(id, message, options, config) {
+    const closable = options.closable ?? config?.closable ?? true;
+    let duration = options.duration ?? (options.action ? 0 : (config?.duration ?? 4000));
+    if (!closable && !options.action && duration <= 0)
+        duration = KPT_TOAST_FALLBACK_DURATION;
+    return {
+        variant: 'info',
+        ...options,
+        id,
+        message,
+        duration,
+        closable,
+        appearance: options.appearance ?? config?.appearance ?? 'outline',
+        progress: options.progress ?? config?.progress ?? false,
+    };
+}
 let toasts = [];
 let seq = 0;
 let paused = false;
+let config = null;
 const timers = new Map();
 const listeners = new Set();
 function emit() {
@@ -10,7 +34,7 @@ function emit() {
 }
 function show(message, options = {}) {
     const id = ++seq;
-    const toast = { id, message, variant: 'info', duration: options.action ? 0 : 4000, ...options };
+    const toast = resolveKptToast(id, message, options, config);
     toasts = [...toasts, toast];
     emit();
     if (toast.duration > 0) {
@@ -48,6 +72,7 @@ function pause() {
     if (paused)
         return;
     paused = true;
+    emit();
     const now = Date.now();
     for (const timer of timers.values()) {
         if (!timer.handle)
@@ -62,11 +87,17 @@ function resume() {
     if (!paused)
         return;
     paused = false;
+    emit();
     for (const id of timers.keys())
         start(id);
 }
+/** Domyślny wygląd i zachowanie toastów w całej aplikacji; wołaj raz, przy starcie. */
+function configure(next) {
+    config = { ...next };
+}
 /** Powiadomienia (toasty). Renderuje je `<KptToastContainer />`, umieszczony raz w aplikacji. */
 export const kptToast = {
+    configure,
     show,
     info: (message, options) => show(message, { ...options, variant: 'info' }),
     success: (message, options) => show(message, { ...options, variant: 'success' }),
@@ -88,3 +119,7 @@ function subscribe(listener) {
 export function useKptToasts() {
     return useSyncExternalStore(subscribe, () => toasts, () => EMPTY);
 }
+/** Czy liczniki stoją (wskaźnik albo fokus na toastach, albo `kptToast.pause()`). */
+export function useKptToastsPaused() {
+    return useSyncExternalStore(subscribe, () => paused, () => false);
+}

package/dist/toolbar/llms.txt

@@ -1,18 +1,18 @@
 # KptToolbar (@konce-pt/react)
 
-The top bar — a horizontal strip for application content (logo, actions).
+The top bar - a horizontal strip for application content (logo, actions).
 Import: `import { KptToolbar, KptToolbarSpacer } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-toolbar kpt-toolbar--elevated">
-      …children…
+      ...children...
       <span kpttoolbarspacer=""></span>
-      …children…
+      ...children...
     </div>
 
 ## Props
-- `elevated`: boolean — adds a shadow under the bar
-- `wrap`: boolean — lets the content wrap onto further rows when it runs out of room
+- `elevated`: boolean - adds a shadow under the bar
+- `wrap`: boolean - lets the content wrap onto further rows when it runs out of room
 - `className`, `ref` and every other `<div>` prop go to the bar itself
 
 `wrap` is opt-in because wrapping changes what `<KptToolbarSpacer>` does: in a single-row bar it
@@ -30,10 +30,10 @@ serves both ports).
       <KptButton variant="text">Sign out</KptButton>
     </KptToolbar>
 
-    <KptAppShell toolbar={<KptToolbar elevated>…</KptToolbar>} sidenav={…}>…</KptAppShell>
+    <KptAppShell toolbar={<KptToolbar elevated>...</KptToolbar>} sidenav={...}>...</KptAppShell>
 
 ## Responsiveness
-Below the `sm` breakpoint the bar shrinks on its own — a lower height
+Below the `sm` breakpoint the bar shrinks on its own - a lower height
 (`--kpt-toolbar-height-compact`), narrower inline padding and a smaller gap. No props involved.
 
 ## Tokens

package/dist/toolbar/toolbar.d.ts

@@ -4,13 +4,13 @@ export interface KptToolbarProps extends ComponentPropsWithRef<'div'> {
     elevated?: boolean;
     /**
      * Pozwala zawartości paska zawinąć się do kolejnych wierszy, gdy zabraknie miejsca.
-     * Opcjonalne, bo zawijanie zmienia zachowanie `<KptToolbarSpacer>` — w jednowierszowym
+     * Opcjonalne, bo zawijanie zmienia zachowanie `<KptToolbarSpacer>` - w jednowierszowym
      * pasku rozpycha on treść, a w zawijanym potrafi zepchnąć resztę do nowego wiersza.
      */
     wrap?: boolean;
 }
 /**
- * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
+ * Górny pasek (toolbar) - pozioma belka na treść aplikacji (logo, akcje).
  * Poniżej breakpointa `sm` pasek sam zbiega się do niższej wysokości i węższych marginesów.
  *
  * @example
@@ -22,7 +22,7 @@ export interface KptToolbarProps extends ComponentPropsWithRef<'div'> {
  */
 export declare function KptToolbar({ elevated, wrap, className, ...rest }: Readonly<KptToolbarProps>): import("react").JSX.Element;
 /**
- * Elastyczny odstęp rozpychający zawartość paska. Nosi atrybut `kpttoolbarspacer` —
+ * Elastyczny odstęp rozpychający zawartość paska. Nosi atrybut `kpttoolbarspacer` -
  * to po nim celuje wspólny SCSS (nazwy atrybutów w selektorach CSS są w HTML
  * case-insensitive, więc jedna reguła obsługuje oba porty).
  */

package/dist/toolbar/toolbar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
+ * Górny pasek (toolbar) - pozioma belka na treść aplikacji (logo, akcje).
  * Poniżej breakpointa `sm` pasek sam zbiega się do niższej wysokości i węższych marginesów.
  *
  * @example
@@ -15,7 +15,7 @@ export function KptToolbar({ elevated = false, wrap = false, className, ...rest
     return (_jsx("div", { className: cn('kpt-toolbar', elevated && 'kpt-toolbar--elevated', className), "data-wrap": wrap ? '' : undefined, ...rest }));
 }
 /**
- * Elastyczny odstęp rozpychający zawartość paska. Nosi atrybut `kpttoolbarspacer` —
+ * Elastyczny odstęp rozpychający zawartość paska. Nosi atrybut `kpttoolbarspacer` -
  * to po nim celuje wspólny SCSS (nazwy atrybutów w selektorach CSS są w HTML
  * case-insensitive, więc jedna reguła obsługuje oba porty).
  */