@konce-pt/react 0.11.2 → 0.12.0

package/dist/slider/llms.txt

@@ -61,3 +61,6 @@ to the single input or the lower thumb.
 ## Accessibility
 Native range inputs carry their own role and value semantics. In `range` mode each handle gets an
 `aria-label` telling the two apart, because "slider" twice would say nothing.
+
+## Read-only and required
+`readOnly` keeps the thumb focusable but undoes every move (`aria-readonly`). The range thumbs can no longer cross: the clamped value is written back to the native input, so the thumb stops at the other one. `slider` does not accept `aria-required` — the field asterisk and the validator carry it.

package/dist/slider/slider.d.ts

@@ -22,6 +22,8 @@ export interface KptSliderProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
     /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
     ariaLabel?: string | null;
     disabled?: boolean;
+    /** Tylko do odczytu — uchwyt można skupić, ale nie przesunąć (`aria-readonly`). */
+    readOnly?: boolean;
     onTouch?: () => void;
 }
 /**
@@ -34,4 +36,4 @@ export interface KptSliderProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
  * <KptSlider value={volume} onValueChange={setVolume} min={0} max={100} step={5} showValue />
  * <KptSlider range value={range} onValueChange={setRange} showValue />
  */
-export declare function KptSlider({ value, defaultValue, onValueChange, range, min, max, step, showValue, suffix, invalid, touched, id, ariaLabel, disabled, onTouch, locale, dictionary, className, ...rest }: Readonly<KptSliderProps>): import("react").JSX.Element;
+export declare function KptSlider({ value, defaultValue, onValueChange, range, min, max, step, showValue, suffix, invalid, touched, id, ariaLabel, disabled, readOnly, onTouch, locale, dictionary, className, ...rest }: Readonly<KptSliderProps>): import("react").JSX.Element;

package/dist/slider/slider.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -13,7 +14,7 @@ import { useKptMessages } from "../i18n/i18n-context.js";
  * <KptSlider value={volume} onValueChange={setVolume} min={0} max={100} step={5} showValue />
  * <KptSlider range value={range} onValueChange={setRange} showValue />
  */
-export function KptSlider({ value, defaultValue, onValueChange, range = false, min = 0, max = 100, step = 1, showValue = false, suffix = '', invalid = false, touched, id, ariaLabel = null, disabled = false, onTouch, locale, dictionary, className, ...rest }) {
+export function KptSlider({ value, defaultValue, onValueChange, range = false, min = 0, max = 100, step = 1, showValue = false, suffix = '', invalid = false, touched, id, ariaLabel = null, disabled = false, readOnly = false, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-slider');
     /** Uchwyt zakresu bez etykiety pola: „Cena, Minimum” z `ariaLabel` albo samo „Minimum”. */
@@ -37,7 +38,17 @@ export function KptSlider({ value, defaultValue, onValueChange, range = false, m
         return span <= 0 ? 0 : ((val - min) / span) * 100;
     };
     // Uchwyty nie mogą się wyminąć — dolny nie przekracza górnego i odwrotnie.
-    const setLow = (next) => setCurrent([Math.min(next, high), high]);
-    const setHigh = (next) => setCurrent([low, Math.max(next, low)]);
-    return (_jsx("div", { className: cn('kpt-slider-host', className), ...rest, children: range ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-slider__range", children: [_jsx("span", { className: "kpt-slider__sr", id: `${field.id}-min-name`, children: t('slider.min') }), _jsx("span", { className: "kpt-slider__sr", id: `${field.id}-max-name`, children: t('slider.max') }), _jsx("div", { className: "kpt-slider__rail" }), _jsx("div", { className: "kpt-slider__fill", style: { left: `${pct(low)}%`, right: `${100 - pct(high)}%` } }), _jsx("input", { className: "kpt-slider__thumb kpt-slider__thumb--low", type: "range", min: min, max: max, step: step, value: low, "aria-valuetext": suffix ? `${low}${suffix}` : undefined, "aria-invalid": invalid && (touched ?? true) ? true : undefined, id: field.id, disabled: disabled, "aria-label": thumbLabel('min'), "aria-labelledby": thumbLabelledBy('min'), "aria-describedby": field.describedBy, onChange: (event) => setLow(Number(event.target.value)), onBlur: () => onTouch?.() }), _jsx("input", { className: "kpt-slider__thumb kpt-slider__thumb--high", type: "range", min: min, max: max, step: step, value: high, "aria-valuetext": suffix ? `${high}${suffix}` : undefined, "aria-invalid": invalid && (touched ?? true) ? true : undefined, disabled: disabled, "aria-label": thumbLabel('max'), "aria-labelledby": thumbLabelledBy('max'), "aria-describedby": field.describedBy, onChange: (event) => setHigh(Number(event.target.value)), onBlur: () => onTouch?.() })] }), showValue ? (_jsxs("span", { className: "kpt-slider__value", children: [low, suffix, "\u2013", high, suffix] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("input", { className: "kpt-slider__input", type: "range", min: min, max: max, step: step, value: single, "aria-valuetext": suffix ? `${single}${suffix}` : undefined, "aria-invalid": invalid && (touched ?? true) ? true : undefined, id: field.id, disabled: disabled, "aria-label": ariaLabel ?? undefined, "aria-describedby": field.describedBy, style: { ['--_pct']: `${pct(single)}%` }, onChange: (event) => setCurrent(Number(event.target.value)), onBlur: () => onTouch?.() }), showValue ? (_jsxs("span", { className: "kpt-slider__value", children: [single, suffix] })) : null] })) }));
+    // Suwaki są kontrolowane: przy `readOnly` stan się nie zmienia, więc React cofa uchwyt sam.
+    const setLow = (next) => {
+        if (!readOnly)
+            setCurrent([Math.min(next, high), high]);
+    };
+    const setHigh = (next) => {
+        if (!readOnly)
+            setCurrent([low, Math.max(next, low)]);
+    };
+    return (_jsx("div", { className: cn('kpt-slider-host', className), ...rest, children: range ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-slider__range", children: [_jsx("span", { className: "kpt-slider__sr", id: `${field.id}-min-name`, children: t('slider.min') }), _jsx("span", { className: "kpt-slider__sr", id: `${field.id}-max-name`, children: t('slider.max') }), _jsx("div", { className: "kpt-slider__rail" }), _jsx("div", { className: "kpt-slider__fill", style: { left: `${pct(low)}%`, right: `${100 - pct(high)}%` } }), _jsx("input", { className: "kpt-slider__thumb kpt-slider__thumb--low", type: "range", min: min, max: max, step: step, value: low, "aria-valuetext": suffix ? `${low}${suffix}` : undefined, "aria-invalid": invalid && (touched ?? true) ? true : undefined, id: field.id, disabled: disabled, "aria-label": thumbLabel('min'), "aria-labelledby": thumbLabelledBy('min'), "aria-describedby": field.describedBy, "aria-readonly": readOnly || undefined, onChange: (event) => setLow(Number(event.target.value)), onBlur: () => onTouch?.() }), _jsx("input", { className: "kpt-slider__thumb kpt-slider__thumb--high", type: "range", min: min, max: max, step: step, value: high, "aria-valuetext": suffix ? `${high}${suffix}` : undefined, "aria-invalid": invalid && (touched ?? true) ? true : undefined, disabled: disabled, "aria-label": thumbLabel('max'), "aria-labelledby": thumbLabelledBy('max'), "aria-describedby": field.describedBy, "aria-readonly": readOnly || undefined, onChange: (event) => setHigh(Number(event.target.value)), onBlur: () => onTouch?.() })] }), showValue ? (_jsxs("span", { className: "kpt-slider__value", children: [low, suffix, "\u2013", high, suffix] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("input", { className: "kpt-slider__input", type: "range", min: min, max: max, step: step, value: single, "aria-valuetext": suffix ? `${single}${suffix}` : undefined, "aria-invalid": invalid && (touched ?? true) ? true : undefined, id: field.id, disabled: disabled, "aria-label": ariaLabel ?? undefined, "aria-describedby": field.describedBy, style: { ['--_pct']: `${pct(single)}%` }, "aria-readonly": readOnly || undefined, onChange: (event) => {
+                        if (!readOnly)
+                            setCurrent(Number(event.target.value));
+                    }, onBlur: () => onTouch?.() }), showValue ? (_jsxs("span", { className: "kpt-slider__value", children: [single, suffix] })) : null] })) }));
 }

package/dist/speed-dial/speed-dial.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -30,5 +31,5 @@ export function KptSpeedDial({ items = [], direction = 'up', icon = 'plus', aria
         onSelect?.(item);
         setOpen(false);
     };
-    return (_jsxs("div", { ref: hostRef, className: cn('kpt-speed-dial-host', className), onKeyDown: onKeyDown, ...rest, children: [_jsxs("div", { className: cn('kpt-speed-dial', open && 'is-open'), "data-direction": direction, children: [_jsx("div", { className: "kpt-speed-dial__actions", id: actionsId, children: items.map((item, index) => (_jsxs("button", { type: "button", className: "kpt-speed-dial__action", disabled: item.disabled, "aria-label": item.label, onClick: () => pick(item), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, item.label ? _jsx("span", { className: "kpt-speed-dial__label", children: item.label }) : null] }, index))) }), _jsx(KptFab, { "aria-label": open ? t('common.close') : (ariaLabel ?? t('speedDial.actions')), "aria-expanded": open, "aria-controls": actionsId, onClick: () => setOpen(!open), children: _jsx("span", { className: "kpt-speed-dial__trigger-icon", children: _jsx(KptIcon, { name: icon }) }) })] }), open ? _jsx("div", { className: "kpt-speed-dial__backdrop", onClick: () => setOpen(false) }) : null] }));
+    return (_jsxs("div", { ref: hostRef, className: cn('kpt-speed-dial-host', className), onKeyDown: onKeyDown, ...rest, children: [_jsxs("div", { className: cn('kpt-speed-dial', open && 'is-open'), "data-direction": direction, children: [_jsx("div", { className: "kpt-speed-dial__actions", id: actionsId, children: items.map((item, index) => (_jsxs("button", { type: "button", className: "kpt-speed-dial__action", disabled: item.disabled, "aria-label": item.label, onClick: () => pick(item), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, item.label ? _jsx("span", { className: "kpt-speed-dial__label", children: item.label }) : null] }, index))) }), _jsx(KptFab, { "aria-label": open ? t('common.close') : (ariaLabel ?? t('speedDial.actions')), "aria-expanded": open, "aria-controls": actionsId, onClick: () => setOpen(!open), children: _jsx("span", { className: "kpt-speed-dial__trigger-icon", children: _jsx(KptIcon, { name: icon }) }) })] }), open ? (_jsx("div", { className: "kpt-speed-dial__backdrop", onClick: () => setOpen(false) })) : null] }));
 }

package/dist/spinner/spinner.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { cn } from "../internal/cn.js";

package/dist/split-button/split-button.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -20,6 +21,12 @@ import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 export function KptSplitButton({ variant = 'filled', items = [], disabled = false, onPrimaryClick, onSelect, open, defaultOpen = false, onOpenChange, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const toggleRef = useRef(null);
+    /** Kotwica panelu — w stanie, bo czyta ją render; ref zostaje dla przywracania fokusu. */
+    const [toggleEl, setToggleEl] = useState(null);
+    const setToggle = useCallback((element) => {
+        toggleRef.current = element;
+        setToggleEl(element);
+    }, []);
     const panelRef = useRef(null);
     /** Którą pozycję skupić po otwarciu — strzałka w górę na przycisku otwiera „od końca”. */
     const focusEdge = useRef('first');
@@ -67,8 +74,8 @@ export function KptSplitButton({ variant = 'filled', items = [], disabled = fals
         onSelect?.(item);
         closeAndRestoreFocus();
     };
-    return (_jsxs("span", { className: cn('kpt-split-button-host', className), ...rest, children: [_jsxs("div", { className: "kpt-split-button", "data-variant": variant, children: [_jsx("button", { className: "kpt-split-button__main", type: "button", disabled: disabled, onClick: onPrimaryClick, children: children }), _jsx("button", { ref: toggleRef, className: "kpt-split-button__toggle", type: "button", disabled: disabled, onClick: () => {
+    return (_jsxs("span", { className: cn('kpt-split-button-host', className), ...rest, children: [_jsxs("div", { className: "kpt-split-button", "data-variant": variant, children: [_jsx("button", { className: "kpt-split-button__main", type: "button", disabled: disabled, onClick: onPrimaryClick, children: children }), _jsx("button", { ref: setToggle, className: "kpt-split-button__toggle", type: "button", disabled: disabled, onClick: () => {
                             focusEdge.current = 'first';
                             setOpen(!isOpen);
-                        }, onKeyDown: onToggleKeyDown, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, "aria-label": t('splitButton.more'), children: _jsx(KptIcon, { name: "chevron-down" }) })] }), _jsx(KptOverlay, { open: isOpen, anchor: toggleRef.current, onClose: close, align: "end", children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-split-button__panel", role: "menu", onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-split-button", onPick: pick }) }) })] }));
+                        }, onKeyDown: onToggleKeyDown, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, "aria-label": t('splitButton.more'), children: _jsx(KptIcon, { name: "chevron-down" }) })] }), _jsx(KptOverlay, { open: isOpen, anchor: toggleEl, onClose: close, align: "end", children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-split-button__panel", role: "menu", tabIndex: -1, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-split-button", onPick: pick }) }) })] }));
 }

package/dist/splitter/splitter.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useRef, } from 'react';
+import { isValidElement, useRef, } 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 { useKptId } from "../internal/use-id.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -40,16 +42,18 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
     });
     let start = null;
     let end = null;
-    Children.forEach(children, (child) => {
-        if (!isValidElement(child))
-            return;
+    for (const child of slotChildren(children)) {
+        if (!isValidElement(child)) {
+            warnUnslottedChild('KptSplitter', child, '<KptSplitter.Start> / <KptSplitter.End>');
+            continue;
+        }
         const slot = child.type?.kptSplitterSlot;
         const content = child.props.children;
         if (slot === 'start')
             start = content;
         else if (slot === 'end')
             end = content;
-    });
+    }
     const clamp = (pct) => Math.min(100 - minSize, Math.max(minSize, Math.round(pct)));
     const onPointerDown = (event) => {
         event.preventDefault();
@@ -58,18 +62,24 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
             return;
         // Nasłuch na oknie, nie na uchwycie: przy szybkim ruchu kursor wyprzedza wąski pasek
         // i bez tego przeciąganie urywałoby się po kilku pikselach.
+        // W RTL panel „start” stoi po prawej (flex idzie za kierunkiem pisma), więc mierzymy od prawej.
+        const rtl = getComputedStyle(container).direction === 'rtl';
         const move = (e) => {
             const rect = container.getBoundingClientRect();
             setSize(clamp(orientation === 'horizontal'
-                ? ((e.clientX - rect.left) / rect.width) * 100
+                ? ((rtl ? rect.right - e.clientX : e.clientX - rect.left) / rect.width) * 100
                 : ((e.clientY - rect.top) / rect.height) * 100));
         };
+        // `pointercancel`: dotyk przerwany przez system nie wysyła `pointerup` — bez sprzątania
+        // `pointermove` dalej przesuwałby uchwyt.
         const up = () => {
             window.removeEventListener('pointermove', move);
             window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', up);
         };
         window.addEventListener('pointermove', move);
         window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
     };
     const onKeyDown = (event) => {
         if (event.key === 'Home' || event.key === 'End') {
@@ -85,9 +95,14 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
         if (!dir)
             return;
         event.preventDefault();
-        setSize(clamp(size + dir));
+        // W RTL ← przesuwa uchwyt w lewo, czyli powiększa prawy panel „start” — odwrotnie niż w LTR.
+        const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+        const rtl = horizontal && getComputedStyle(event.currentTarget).direction === 'rtl';
+        setSize(clamp(size + (rtl ? -dir : dir)));
     };
-    return (_jsx("div", { className: cn('kpt-splitter-host', className), ...rest, children: _jsxs("div", { ref: containerRef, className: "kpt-splitter", "data-orientation": orientation, children: [_jsx("div", { className: "kpt-splitter__pane", id: startId, style: { flexBasis: `${size}%` }, children: start }), _jsx("div", { className: "kpt-splitter__gutter", role: "separator", tabIndex: 0, "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": size, "aria-valuemin": minSize, "aria-valuemax": 100 - minSize, "aria-controls": startId, "aria-label": ariaLabel || t('splitter.resize'), onPointerDown: onPointerDown, onKeyDown: onKeyDown }), _jsx("div", { className: "kpt-splitter__pane", style: { flexBasis: `${100 - size}%` }, children: end })] }) }));
+    return (_jsx("div", { className: cn('kpt-splitter-host', className), ...rest, children: _jsxs("div", { ref: containerRef, className: "kpt-splitter", "data-orientation": orientation, children: [_jsx("div", { className: "kpt-splitter__pane", id: startId, style: { flexBasis: `${size}%` }, children: start }), _jsx("div", { className: "kpt-splitter__gutter", role: "separator", 
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- separator okna (APG Window Splitter) to fokusowalny widżet ze strzałkami
+                    tabIndex: 0, "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": size, "aria-valuemin": minSize, "aria-valuemax": 100 - minSize, "aria-controls": startId, "aria-label": ariaLabel || t('splitter.resize'), onPointerDown: onPointerDown, onKeyDown: onKeyDown }), _jsx("div", { className: "kpt-splitter__pane", style: { flexBasis: `${100 - size}%` }, children: end })] }) }));
 }
 KptSplitter.Start = KptSplitterStart;
 KptSplitter.End = KptSplitterEnd;

package/dist/stepper/llms.txt

@@ -66,3 +66,6 @@ announces how many there are. Each marker is named from the dictionary — `step
 number or a check; the visible label is `aria-hidden` so it is not read twice. The active marker
 carries `aria-current="step"`. After `next()` focus stays where it was — move it into the new step
 yourself when the step is long.
+
+## 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/stepper/stepper.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useState, } from 'react';
+import { createContext, isValidElement, useContext, 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";
@@ -46,11 +48,13 @@ export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexC
     });
     const [direction, setDirection] = useState(1);
     const steps = [];
-    Children.forEach(children, (child) => {
-        if (!isValidElement(child) || child.type?.kptStepperSlot !== 'step')
-            return;
+    for (const child of slotChildren(children)) {
+        if (!isValidElement(child) || child.type?.kptStepperSlot !== 'step') {
+            warnUnslottedChild('KptStepper', child, '<KptStep>');
+            continue;
+        }
         steps.push(child.props);
-    });
+    }
     const goTo = (index) => {
         const next = Math.max(0, Math.min(index, steps.length - 1));
         // Kierunek karmi `--kpt-anim-dir`, więc panel wjeżdża z tej strony, z której się cofnąłeś.

package/dist/switch/llms.txt

@@ -50,3 +50,6 @@ Inside `kpt-form-field` the switch gets both names: the wrapper label and its ow
 ## Accessibility
 `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
+`readOnly` keeps the switch focusable but blocks toggling (`aria-readonly`); `required` sets `aria-required`.

package/dist/switch/switch.d.ts

@@ -36,4 +36,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, 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, ...rest }: Readonly<KptSwitchProps>): import("react").JSX.Element;

package/dist/switch/switch.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { cn } from "../internal/cn.js";
@@ -15,7 +16,7 @@ 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, 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, ...rest }) {
     const field = useKptFieldA11y(id, 'kpt-switch');
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const showInvalid = invalid && (touched ?? true);
@@ -28,5 +29,11 @@ export function KptSwitch({ label = '', labelPosition = 'end', onLabel = '', off
         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-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsx("span", { className: "kpt-switch__track", "aria-hidden": "true", children: _jsx("span", { className: "kpt-switch__thumb" }) }), label && labelPosition === 'end' ? _jsx("span", { className: "kpt-switch__label", children: label }) : null, hasStateLabels ? (_jsx("span", { className: cn('kpt-switch__state', checked && 'kpt-switch__state--on'), "aria-hidden": "true", children: checked ? onLabel : offLabel })) : null, children] }) }));
+    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.
+                    onClick: (event) => {
+                        if (readOnly)
+                            event.preventDefault();
+                        onClick?.(event);
+                    }, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsx("span", { className: "kpt-switch__track", "aria-hidden": "true", children: _jsx("span", { className: "kpt-switch__thumb" }) }), label && labelPosition === 'end' ? _jsx("span", { className: "kpt-switch__label", children: label }) : null, hasStateLabels ? (_jsx("span", { className: cn('kpt-switch__state', checked && 'kpt-switch__state--on'), "aria-hidden": "true", children: checked ? onLabel : offLabel })) : null, children] }) }));
 }

package/dist/switch-group/llms.txt

@@ -52,3 +52,6 @@ Layout only: `--kpt-space-2` (vertical gap) and `--kpt-space-4` (horizontal). Th
 ## Accessibility
 `role="group"` with `aria-invalid` once the field is touched; every entry keeps the native
 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.

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

@@ -16,6 +16,8 @@ export interface KptSwitchGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     /** 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ć. */
+    readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -30,4 +32,4 @@ export interface KptSwitchGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
  * <KptSwitchGroup options={plans} value={plan} onValueChange={setPlan} />
  * <KptSwitchGroup multiple options={tags} value={selected} onValueChange={setSelected} />
  */
-export declare function KptSwitchGroup<T>({ options, value, defaultValue, onValueChange, multiple, orientation, allowDeselect, id, ariaLabel, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptSwitchGroupProps<T>>): import("react").JSX.Element;
+export declare function KptSwitchGroup<T>({ options, value, defaultValue, onValueChange, multiple, orientation, allowDeselect, id, ariaLabel, disabled, readOnly, invalid, touched, onTouch, className, ...rest }: Readonly<KptSwitchGroupProps<T>>): import("react").JSX.Element;

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

@@ -1,5 +1,7 @@
+'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";
@@ -13,7 +15,7 @@ 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 }) {
+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({
@@ -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, 
+    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 }, String(option.value)))) }) }));
+                invalid: showInvalid, onCheckedChange: (checked) => toggle(option, checked), onTouch: onTouch }, optionKey(option.value, index)))) }) }));
 }

package/dist/tabs/llms.txt

@@ -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.js

@@ -1,6 +1,8 @@
+'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";
@@ -42,15 +44,23 @@ 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 };
@@ -58,24 +68,30 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
         // 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/textarea.js

@@ -1,3 +1,4 @@
+'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";

package/dist/toast/llms.txt

@@ -64,3 +64,6 @@ text twice is announced twice, and a dismissed toast never re-announces an older
 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.

package/dist/toast/toast-container.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";

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

@@ -9,7 +9,11 @@ export interface KptToast {
     message: string;
     title?: string;
     variant: KptAlertVariant;
-    /** Czas życia w ms; 0 = bez auto-zamykania. */
+    /**
+     * 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.
+     */
     duration: number;
     action?: KptToastAction;
 }

package/dist/toast/toast-store.js

@@ -10,7 +10,7 @@ function emit() {
 }
 function show(message, options = {}) {
     const id = ++seq;
-    const toast = { id, message, variant: 'info', duration: 4000, ...options };
+    const toast = { id, message, variant: 'info', duration: options.action ? 0 : 4000, ...options };
     toasts = [...toasts, toast];
     emit();
     if (toast.duration > 0) {

package/dist/tooltip/llms.txt

@@ -24,9 +24,8 @@ change, with no observers. It measures the host AND its direct children, because
 available width instead of stretching its parent, so measuring the host alone would find nothing.
 
 ## Styling
-The bubble carries inline styles built from tokens rather than a class from the shared stylesheet,
-exactly like the Angular directive — it is created outside React's tree, so there is nothing to
-attach a stylesheet rule to reliably.
+The bubble is created outside React's tree, so its look comes from `.kpt-tooltip` in `@konce-pt/styles`
+(see "Styling and the top layer" below), the same rule the Angular directive uses.
 
 ## Examples
     <KptTooltip text="Save changes" position="bottom"><KptButton>Save</KptButton></KptTooltip>
@@ -47,3 +46,6 @@ attach a stylesheet rule to reliably.
 - `Escape` closes the bubble, and the pointer can move onto it without it disappearing (a 120 ms
   grace period) — WCAG 1.4.13.
 - It does NOT replace an accessible name — an icon-only button still needs its own label.
+
+## Styling and the top layer
+The bubble is styled by `.kpt-tooltip` from `@konce-pt/styles`, in the `kpt.components` layer — override it from your own CSS without `!important`; only `position: fixed` and the coordinates stay inline. Inside an open `<dialog>` or popover the bubble is attached to that element, because a modal dialog lives in the top layer and anything outside it is hidden behind it regardless of `z-index`. A hover shows the bubble after 300 ms (sliding across a toolbar does not light every icon); focus shows it at once. Changing the text while the bubble is visible updates it.

package/dist/tooltip/tooltip.d.ts

@@ -13,8 +13,9 @@ export interface KptTooltipProps {
     children: ReactNode;
 }
 /**
- * Dymek podpowiedzi pokazywany na hover i focus. Lekki — element dodawany do `body`
- * i pozycjonowany względem dziecka.
+ * Dymek podpowiedzi pokazywany na hover i focus. Lekki — element dodawany do `body` (albo do
+ * otwartego `<dialog>`/popovera dziecka, żeby był widoczny w warstwie szczytowej) i pozycjonowany
+ * względem dziecka. Wygląd daje klasa `.kpt-tooltip` z `@konce-pt/styles` w warstwie `kpt.components`.
  *
  * Port dyrektywy `[kptTooltip]`: nie renderuje własnego opakowania, tylko dokleja handlery
  * i ref do przekazanego elementu, więc drzewo DOM zostaje takie samo jak bez tooltipa.