@konce-pt/react 0.8.0

package/dist/slider/slider.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentPropsWithRef } from 'react';
+/** Wartość suwaka: pojedyncza liczba albo para `[min, max]` w trybie `range`. */
+export type KptSliderValue = number | [number, number];
+export interface KptSliderProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    value?: KptSliderValue;
+    defaultValue?: KptSliderValue;
+    onValueChange?: (value: KptSliderValue) => void;
+    /** Tryb zakresu: dwa uchwyty, wartość jako para `[min, max]`. */
+    range?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Pokazuje bieżącą wartość obok suwaka. */
+    showValue?: boolean;
+    disabled?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Suwak wartości. W trybie `range` udostępnia dwa uchwyty, a wartością jest para `[min, max]`.
+ *
+ * Oba uchwyty to natywne `<input type="range">` leżące na sobie — dzięki temu klawiatura,
+ * gesty dotykowe i czytniki ekranu działają bez ani jednej linii własnej obsługi.
+ *
+ * @example
+ * <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, disabled, onTouch, className, ...rest }: Readonly<KptSliderProps>): import("react").JSX.Element;

package/dist/slider/slider.js

@@ -0,0 +1,30 @@
+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";
+/**
+ * Suwak wartości. W trybie `range` udostępnia dwa uchwyty, a wartością jest para `[min, max]`.
+ *
+ * Oba uchwyty to natywne `<input type="range">` leżące na sobie — dzięki temu klawiatura,
+ * gesty dotykowe i czytniki ekranu działają bez ani jednej linii własnej obsługi.
+ *
+ * @example
+ * <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, disabled = false, onTouch, className, ...rest }) {
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? (range ? [min, max] : 0),
+        onChange: onValueChange,
+    });
+    const [low, high] = Array.isArray(current) ? [current[0], current[1]] : [min, current];
+    const single = Array.isArray(current) ? current[1] : current;
+    const pct = (val) => {
+        const span = max - min;
+        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("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, disabled: disabled, "aria-label": "Minimum", 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, disabled: disabled, "aria-label": "Maksimum", onChange: (event) => setHigh(Number(event.target.value)), onBlur: () => onTouch?.() })] }), showValue ? (_jsxs("span", { className: "kpt-slider__value", children: [low, "\u2013", high] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("input", { className: "kpt-slider__input", type: "range", min: min, max: max, step: step, value: single, disabled: disabled, style: { ['--_pct']: `${pct(single)}%` }, onChange: (event) => setCurrent(Number(event.target.value)), onBlur: () => onTouch?.() }), showValue ? _jsx("span", { className: "kpt-slider__value", children: single }) : null] })) }));
+}

package/dist/speed-dial/speed-dial.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptMenuItem } from '../menu/menu-item.ts';
+export type KptSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+export interface KptSpeedDialProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'>, KptI18nOverrides {
+    items?: KptMenuItem<T>[];
+    direction?: KptSpeedDialDirection;
+    /** Ikona głównego przycisku; SCSS obraca ją o 45° po otwarciu. */
+    icon?: string;
+    /** Etykieta a11y głównego przycisku w stanie zamkniętym. */
+    ariaLabel?: string;
+    onSelect?: (item: KptMenuItem<T>) => void;
+}
+/**
+ * Speed dial — FAB rozwijający zestaw akcji wachlarzem. Buduje na `KptFab`.
+ *
+ * @example
+ * <KptSpeedDial items={actions} direction="up" onSelect={onAction} />
+ */
+export declare function KptSpeedDial<T>({ items, direction, icon, ariaLabel, onSelect, locale, dictionary, className, ...rest }: Readonly<KptSpeedDialProps<T>>): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptFab } from "../fab/fab.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Speed dial — FAB rozwijający zestaw akcji wachlarzem. Buduje na `KptFab`.
+ *
+ * @example
+ * <KptSpeedDial items={actions} direction="up" onSelect={onAction} />
+ */
+export function KptSpeedDial({ items = [], direction = 'up', icon = 'plus', ariaLabel, onSelect, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [open, setOpen] = useState(false);
+    const pick = (item) => {
+        if (item.disabled)
+            return;
+        onSelect?.(item);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: cn('kpt-speed-dial-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-speed-dial', open && 'is-open'), "data-direction": direction, children: [_jsx("div", { className: "kpt-speed-dial__actions", 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')), 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.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptSpinnerProps extends Omit<ComponentPropsWithRef<'span'>, 'children'>, KptI18nOverrides {
+    size?: string;
+    /** Etykieta dostępności; pominięta = `spinner.label` ze słownika. */
+    label?: string;
+}
+/**
+ * Wskaźnik ładowania. Kolor bierze z `currentColor`, więc dopasowuje się do treści wokół.
+ *
+ * @example
+ * <KptSpinner />
+ * <KptSpinner size="2rem" label="Wczytywanie danych" />
+ */
+export declare function KptSpinner({ size, label, locale, dictionary, className, ...rest }: Readonly<KptSpinnerProps>): import("react").JSX.Element;

package/dist/spinner/spinner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+/**
+ * Wskaźnik ładowania. Kolor bierze z `currentColor`, więc dopasowuje się do treści wokół.
+ *
+ * @example
+ * <KptSpinner />
+ * <KptSpinner size="2rem" label="Wczytywanie danych" />
+ */
+export function KptSpinner({ size = '1.5rem', label, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    return (_jsx("span", { className: cn('kpt-spinner-host', className), ...rest, children: _jsx("span", { className: "kpt-spinner", role: "status", "aria-label": label ?? t('spinner.label'), style: { width: size, height: size } }) }));
+}

package/dist/split-button/split-button.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptMenuItem } from '../menu/menu-item.ts';
+import type { KptButtonVariant } from '../button/button.tsx';
+export interface KptSplitButtonProps<T> extends Omit<ComponentPropsWithRef<'span'>, 'onSelect'>, KptI18nOverrides {
+    variant?: KptButtonVariant;
+    items?: KptMenuItem<T>[];
+    disabled?: boolean;
+    /** Kliknięcie akcji głównej. */
+    onPrimaryClick?: () => void;
+    /** Wybór pozycji z menu. */
+    onSelect?: (item: KptMenuItem<T>) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Treść akcji głównej. */
+    children?: ReactNode;
+}
+/**
+ * Przycisk dzielony — akcja główna plus rozwijane menu dodatkowych akcji.
+ *
+ * Panel wyrównuje się do PRAWEJ krawędzi przycisku, nie do lewej: rozwijacz siedzi po prawej
+ * stronie kontrolki, więc menu otwierające się w lewo nie wychodzi poza nią.
+ *
+ * @example
+ * <KptSplitButton items={items} onPrimaryClick={save} onSelect={onItem}>Zapisz</KptSplitButton>
+ */
+export declare function KptSplitButton<T>({ variant, items, disabled, onPrimaryClick, onSelect, open, defaultOpen, onOpenChange, locale, dictionary, className, children, ...rest }: Readonly<KptSplitButtonProps<T>>): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { cn } from "../internal/cn.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+import { MenuRows } from "../menu/menu-rows.js";
+/**
+ * Przycisk dzielony — akcja główna plus rozwijane menu dodatkowych akcji.
+ *
+ * Panel wyrównuje się do PRAWEJ krawędzi przycisku, nie do lewej: rozwijacz siedzi po prawej
+ * stronie kontrolki, więc menu otwierające się w lewo nie wychodzi poza nią.
+ *
+ * @example
+ * <KptSplitButton items={items} onPrimaryClick={save} onSelect={onItem}>Zapisz</KptSplitButton>
+ */
+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);
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    const pick = (item) => {
+        if (item.disabled)
+            return;
+        onSelect?.(item);
+        close();
+    };
+    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: () => setOpen(!isOpen), "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", { className: "kpt-split-button__panel", role: "menu", children: _jsx(MenuRows, { items: items, block: "kpt-split-button", onPick: pick }) }) })] }));
+}

package/dist/splitter/splitter.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export type KptSplitterOrientation = 'horizontal' | 'vertical';
+export interface KptSplitterPaneProps {
+    children?: ReactNode;
+}
+/** Panel splittera. Umieszczaj jako `<KptSplitter.Start>` i `<KptSplitter.End>`. */
+export declare function KptSplitterStart(_props: Readonly<KptSplitterPaneProps>): ReactNode;
+export declare namespace KptSplitterStart {
+    var kptSplitterSlot: "start";
+}
+export declare function KptSplitterEnd(_props: Readonly<KptSplitterPaneProps>): ReactNode;
+export declare namespace KptSplitterEnd {
+    var kptSplitterSlot: "end";
+}
+export interface KptSplitterProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    orientation?: KptSplitterOrientation;
+    /** Rozmiar pierwszego panelu w procentach (0–100). */
+    startSize?: number;
+    defaultStartSize?: number;
+    onStartSizeChange?: (size: number) => void;
+    /** Minimalny rozmiar panelu w procentach. */
+    minSize?: number;
+    children?: ReactNode;
+}
+/**
+ * Dwa panele z przeciąganym uchwytem. `horizontal` stawia je obok siebie, `vertical` jeden pod
+ * drugim.
+ *
+ * @example
+ * <KptSplitter startSize={size} onStartSizeChange={setSize}>
+ *   <KptSplitter.Start>Lewy</KptSplitter.Start>
+ *   <KptSplitter.End>Prawy</KptSplitter.End>
+ * </KptSplitter>
+ */
+export declare function KptSplitter({ orientation, startSize, defaultStartSize, onStartSizeChange, minSize, className, children, ...rest }: Readonly<KptSplitterProps>): import("react").JSX.Element;
+export declare namespace KptSplitter {
+    var Start: typeof KptSplitterStart;
+    var End: typeof KptSplitterEnd;
+}

package/dist/splitter/splitter.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useRef, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+/** Panel splittera. Umieszczaj jako `<KptSplitter.Start>` i `<KptSplitter.End>`. */
+export function KptSplitterStart(_props) {
+    // Panel jest nośnikiem treści: `KptSplitter` czyta jego dzieci i sam opakowuje je w `__pane`,
+    // bo to on trzyma rozmiar. Odpowiednik slotu `[kptSplitStart]` z Angulara.
+    return null;
+}
+KptSplitterStart.kptSplitterSlot = 'start';
+export function KptSplitterEnd(_props) {
+    return null;
+}
+KptSplitterEnd.kptSplitterSlot = 'end';
+/**
+ * Dwa panele z przeciąganym uchwytem. `horizontal` stawia je obok siebie, `vertical` jeden pod
+ * drugim.
+ *
+ * @example
+ * <KptSplitter startSize={size} onStartSizeChange={setSize}>
+ *   <KptSplitter.Start>Lewy</KptSplitter.Start>
+ *   <KptSplitter.End>Prawy</KptSplitter.End>
+ * </KptSplitter>
+ */
+export function KptSplitter({ orientation = 'horizontal', startSize, defaultStartSize = 50, onStartSizeChange, minSize = 10, className, children, ...rest }) {
+    const containerRef = useRef(null);
+    const [size, setSize] = useControllableState({
+        value: startSize,
+        defaultValue: defaultStartSize,
+        onChange: onStartSizeChange,
+    });
+    let start = null;
+    let end = null;
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        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();
+        const container = containerRef.current;
+        if (!container)
+            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.
+        const move = (e) => {
+            const rect = container.getBoundingClientRect();
+            setSize(clamp(orientation === 'horizontal'
+                ? ((e.clientX - rect.left) / rect.width) * 100
+                : ((e.clientY - rect.top) / rect.height) * 100));
+        };
+        const up = () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+    };
+    const onKeyDown = (event) => {
+        const dir = event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+            ? -2
+            : event.key === 'ArrowRight' || event.key === 'ArrowDown'
+                ? 2
+                : 0;
+        if (!dir)
+            return;
+        event.preventDefault();
+        setSize(clamp(size + 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", style: { flexBasis: `${size}%` }, children: start }), _jsx("div", { className: "kpt-splitter__gutter", role: "separator", tabIndex: 0, "aria-orientation": orientation, "aria-valuenow": size, 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/stepper.d.ts

@@ -0,0 +1,51 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface KptStepperContextValue {
+    activeIndex: number;
+    /** Liczba kroków — pozwala treści kroku ukryć „Dalej" na ostatnim. */
+    count: number;
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+}
+/**
+ * Sterowanie kreatorem z wnętrza kroku — odpowiednik `#s` + `s.next()` z portu Angulara.
+ * Poza `<KptStepper>` rzuca błąd, bo bez kreatora nie ma czym sterować.
+ *
+ * @example
+ * <KptButton onClick={useKptStepper().next}>Dalej</KptButton>
+ */
+export declare function useKptStepper(): KptStepperContextValue;
+export interface KptStepProps {
+    label: string;
+    children?: ReactNode;
+}
+/**
+ * Pojedynczy krok. Umieszczaj w `<KptStepper>`. Treść renderuje się leniwie — dopiero gdy krok
+ * jest aktywny, tak samo jak szablon `kpt-step` w porcie Angulara.
+ */
+export declare function KptStep(_props: Readonly<KptStepProps>): ReactNode;
+export declare namespace KptStep {
+    var kptStepperSlot: "step";
+}
+export interface KptStepperProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+    animated?: boolean;
+    animationDuration?: number;
+    children?: ReactNode;
+}
+/**
+ * Kreator kroków — nagłówek z numerowanymi krokami i treść aktywnego kroku.
+ * Treścią sterują `next()`/`prev()`/`goTo()` z hooka `useKptStepper()`.
+ *
+ * @example
+ * <KptStepper>
+ *   <KptStepper.Step label="Konto">…</KptStepper.Step>
+ *   <KptStepper.Step label="Profil">…</KptStepper.Step>
+ * </KptStepper>
+ */
+export declare function KptStepper({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptStepperProps>): import("react").JSX.Element;
+export declare namespace KptStepper {
+    var Step: typeof KptStep;
+}

package/dist/stepper/stepper.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { KptIcon } from "../icon/icon.js";
+const StepperContext = createContext(null);
+/**
+ * Sterowanie kreatorem z wnętrza kroku — odpowiednik `#s` + `s.next()` z portu Angulara.
+ * Poza `<KptStepper>` rzuca błąd, bo bez kreatora nie ma czym sterować.
+ *
+ * @example
+ * <KptButton onClick={useKptStepper().next}>Dalej</KptButton>
+ */
+export function useKptStepper() {
+    const context = useContext(StepperContext);
+    if (!context)
+        throw new Error('useKptStepper: użyj wewnątrz <KptStepper>.');
+    return context;
+}
+/**
+ * Pojedynczy krok. Umieszczaj w `<KptStepper>`. Treść renderuje się leniwie — dopiero gdy krok
+ * jest aktywny, tak samo jak szablon `kpt-step` w porcie Angulara.
+ */
+export function KptStep(_props) {
+    // Krok nigdy nie renderuje się sam: `KptStepper` czyta jego propsy i sam decyduje, co pokazać.
+    return null;
+}
+KptStep.kptStepperSlot = 'step';
+/**
+ * Kreator kroków — nagłówek z numerowanymi krokami i treść aktywnego kroku.
+ * Treścią sterują `next()`/`prev()`/`goTo()` z hooka `useKptStepper()`.
+ *
+ * @example
+ * <KptStepper>
+ *   <KptStepper.Step label="Konto">…</KptStepper.Step>
+ *   <KptStepper.Step label="Profil">…</KptStepper.Step>
+ * </KptStepper>
+ */
+export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+    const [active, setActive] = useControllableState({
+        value: activeIndex,
+        defaultValue: defaultActiveIndex,
+        onChange: onActiveIndexChange,
+    });
+    const [direction, setDirection] = useState(1);
+    const steps = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child) || child.type?.kptStepperSlot !== 'step')
+            return;
+        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ś.
+        setDirection(next >= active ? 1 : -1);
+        setActive(next);
+    };
+    const context = {
+        activeIndex: active,
+        count: steps.length,
+        next: () => goTo(active + 1),
+        prev: () => goTo(active - 1),
+        goTo,
+    };
+    return (_jsxs("div", { className: cn('kpt-stepper-host', className), style: {
+            ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
+            ['--kpt-anim-dir']: direction,
+            ...style,
+        }, ...rest, children: [_jsx("ol", { className: "kpt-stepper__header", children: steps.map((step, index) => (_jsxs("li", { className: cn('kpt-stepper__step', index === active && 'is-active', index < active && 'is-done'), children: [_jsx("button", { type: "button", className: "kpt-stepper__marker", "aria-current": index === active ? 'step' : undefined, onClick: () => goTo(index), children: index < active ? _jsx(KptIcon, { name: "check" }) : index + 1 }), _jsx("span", { className: "kpt-stepper__label", children: step.label }), index < steps.length - 1 ? _jsx("span", { className: "kpt-stepper__connector" }) : null] }, index))) }), _jsx(StepperContext.Provider, { value: context, children: _jsx("div", { className: "kpt-stepper__body", children: steps[active] ? (_jsx("div", { className: "kpt-stepper__panel", children: steps[active].children }, active)) : null }) })] }));
+}
+KptStepper.Step = KptStep;

package/dist/switch/switch.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+export interface KptSwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'> {
+    /** Etykieta obok przełącznika. */
+    label?: string;
+    /** Pozycja etykiety względem przełącznika. */
+    labelPosition?: 'start' | 'end';
+    /** Tekst stanu włączonego (wyświetlany, gdy zaznaczony). */
+    onLabel?: string;
+    /** Tekst stanu wyłączonego. */
+    offLabel?: string;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
+    required?: 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 samo zaznaczenie. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Wywoływane na `blur`. */
+    onTouch?: () => void;
+    /** Propsy wrappera hosta (`.kpt-switch-host`). */
+    hostProps?: KptHostProps<'span'>;
+    children?: ReactNode;
+}
+/**
+ * Przełącznik (switch/toggle). Pod spodem natywny `<input type="checkbox" role="switch">`,
+ * więc klawiatura i czytniki ekranu działają bez dodatkowej obsługi.
+ *
+ * Wariant z tekstem stanu: `onLabel`/`offLabel` — wyświetlany tekst zmienia się przy przełączaniu.
+ *
+ * Tekst stanu wymaga `checked` (tryb kontrolowany), bo w trybie niekontrolowanym wartość należy
+ * do DOM i React o niej nie wie; bez tego etykieta stanu zamarłaby na wartości początkowej.
+ *
+ * @example
+ * <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, ...rest }: Readonly<KptSwitchProps>): import("react").JSX.Element;

package/dist/switch/switch.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { cn } from "../internal/cn.js";
+/**
+ * Przełącznik (switch/toggle). Pod spodem natywny `<input type="checkbox" role="switch">`,
+ * więc klawiatura i czytniki ekranu działają bez dodatkowej obsługi.
+ *
+ * Wariant z tekstem stanu: `onLabel`/`offLabel` — wyświetlany tekst zmienia się przy przełączaniu.
+ *
+ * Tekst stanu wymaga `checked` (tryb kontrolowany), bo w trybie niekontrolowanym wartość należy
+ * do DOM i React o niej nie wie; bez tego etykieta stanu zamarłaby na wartości początkowej.
+ *
+ * @example
+ * <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, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const showInvalid = invalid && (touched ?? true);
+    const hasStateLabels = !!(onLabel || offLabel);
+    const handleChange = useCallback((event) => {
+        onChange?.(event);
+        onCheckedChange?.(event.target.checked);
+    }, [onChange, onCheckedChange]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+        onTouch?.();
+    }, [onBlur, onTouch]);
+    return (_jsx("span", { className: cn('kpt-switch-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-switch', disabled && 'kpt-switch--disabled', className), children: [label && labelPosition === 'start' ? (_jsx("span", { className: "kpt-switch__label kpt-switch__label--start", children: label })) : null, _jsx("input", { type: "checkbox", role: "switch", className: "kpt-switch__input", 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'), children: checked ? onLabel : offLabel })) : null, children] }) }));
+}

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

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptOption } from '../shared/types.ts';
+export interface KptSwitchGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    options?: KptOption<T>[];
+    /** Pojedynczy wybór: wartość opcji albo `null`. Tryb `multiple`: tablica wartości. */
+    value?: T | T[] | null;
+    defaultValue?: T | T[] | null;
+    onValueChange?: (value: T | T[] | null) => void;
+    /** Wielokrotny wybór — wartością staje się tablica `T[]`. */
+    multiple?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    /** Czy wyłączenie aktywnej opcji zeruje wartość. Dotyczy tylko trybu pojedynczego. */
+    allowDeselect?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * 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.
+ *
+ * @example
+ * <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, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptSwitchGroupProps<T>>): import("react").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { KptSwitch } from "../switch/switch.js";
+/**
+ * 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.
+ *
+ * @example
+ * <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, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const showInvalid = invalid && (touched ?? true);
+    // 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;
+    const toggle = (option, checked) => {
+        if (multiple) {
+            if (checked) {
+                if (!selected.includes(option.value))
+                    setCurrent([...selected, option.value]);
+            }
+            else {
+                setCurrent(selected.filter((item) => item !== option.value));
+            }
+            return;
+        }
+        if (checked) {
+            setCurrent(option.value);
+        }
+        else if (allowDeselect) {
+            setCurrent(null);
+        }
+        // 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", "aria-invalid": showInvalid || undefined, children: options.map((option) => (_jsx(KptSwitch, { hostProps: { className: 'kpt-switch-group__item' }, checked: isChecked(option.value), label: option.label, disabled: disabled || option.disabled, onCheckedChange: (checked) => toggle(option, checked), onTouch: onTouch }, String(option.value)))) }) }));
+}

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface KptTabProps {
+    label: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/**
+ * 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;
+export declare namespace KptTab {
+    var kptTabsSlot: "tab";
+}
+export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+    animated?: boolean;
+    animationDuration?: number;
+    children?: ReactNode;
+}
+/**
+ * Zakładki — przełączanie widoków, treść renderowana leniwie.
+ *
+ * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
+ * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
+ *
+ * @example
+ * <KptTabs>
+ *   <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;
+export declare namespace KptTabs {
+    var Tab: typeof KptTab;
+}