@konce-pt/react 0.8.0

package/dist/checkbox/checkbox.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { cn } from "../internal/cn.js";
+/**
+ * Pole wyboru (checkbox). Cały układ niesie `<label>`, więc kliknięcie w etykietę przełącza pole
+ * bez `htmlFor` — natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
+ *
+ * Działa kontrolowane (`checked` + `onCheckedChange`) i niekontrolowane (`defaultChecked`).
+ *
+ * `className` trafia na blok `.kpt-checkbox`, a pozostałe propsy (`name`, `value`, `ref`,
+ * handlery) na natywny `<input>` — tam, gdzie oczekuje ich formularz.
+ *
+ * @example
+ * <KptCheckbox name="terms" label="Akceptuję regulamin" />
+ * <KptCheckbox checked={on} onCheckedChange={setOn} />
+ */
+export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, onChange, onBlur, children, 'aria-invalid': ariaInvalid, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const showInvalid = invalid && (touched ?? true);
+    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-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsx("span", { className: "kpt-checkbox__box", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5" }) }) }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
+}

package/dist/chip/chip.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptHostProps } from '../internal/types.ts';
+export type KptChipVariant = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+export interface KptChipProps extends ComponentPropsWithRef<'span'>, KptI18nOverrides {
+    variant?: KptChipVariant;
+    /** Dokłada przycisk usuwania. */
+    removable?: boolean;
+    disabled?: boolean;
+    /** Wywoływane po kliknięciu przycisku usuwania. */
+    onRemove?: () => void;
+    /** Propsy wrappera hosta (`.kpt-chip-host`). `className` i `ref` idą na `.kpt-chip`. */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Chip / tag — etykieta, opcjonalnie usuwalna.
+ *
+ * @example
+ * <KptChip>Angular</KptChip>
+ * <KptChip variant="success" removable onRemove={remove}>UI</KptChip>
+ */
+export declare function KptChip({ variant, removable, disabled, onRemove, locale, dictionary, hostProps, className, children, ...rest }: Readonly<KptChipProps>): import("react").JSX.Element;

package/dist/chip/chip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { KptIcon } from "../icon/icon.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+/**
+ * Chip / tag — etykieta, opcjonalnie usuwalna.
+ *
+ * @example
+ * <KptChip>Angular</KptChip>
+ * <KptChip variant="success" removable onRemove={remove}>UI</KptChip>
+ */
+export function KptChip({ variant = 'neutral', removable = false, disabled = false, onRemove, locale, dictionary, hostProps, className, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    return (_jsx("span", { className: cn('kpt-chip-host', hostClassName), ...hostRest, children: _jsxs("span", { className: cn('kpt-chip', disabled && 'kpt-chip--disabled', className), "data-variant": variant, ...rest, children: [children, removable ? (_jsx("button", { type: "button", className: "kpt-chip__remove", disabled: disabled, onClick: onRemove, "aria-label": t('common.remove'), children: _jsx(KptIcon, { name: "x" }) })) : null] }) }));
+}

package/dist/chips-input/chips-input.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptChipsInputProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Placeholder; pominięty = `chipsInput.placeholder` ze słownika. */
+    placeholder?: string;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Pole tagów — dodawanie Enterem albo przecinkiem, usuwanie Backspace lub ×.
+ *
+ * Tekst w trakcie pisania żyje w DOM, nie w stanie Reacta: wartością komponentu jest lista
+ * zatwierdzonych tagów, a bufor wpisywania to prywatna sprawa pola. Dzięki temu każde naciśnięcie
+ * klawisza nie przerysowuje listy chipów.
+ *
+ * @example
+ * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
+ */
+export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;

package/dist/chips-input/chips-input.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptChip } from "../chip/chip.js";
+/**
+ * Pole tagów — dodawanie Enterem albo przecinkiem, usuwanie Backspace lub ×.
+ *
+ * Tekst w trakcie pisania żyje w DOM, nie w stanie Reacta: wartością komponentu jest lista
+ * zatwierdzonych tagów, a bufor wpisywania to prywatna sprawa pola. Dzięki temu każde naciśnięcie
+ * klawisza nie przerysowuje listy chipów.
+ *
+ * @example
+ * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
+ */
+export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const inputRef = useRef(null);
+    const [chips, setChips] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const showInvalid = invalid && (touched ?? true);
+    const commit = (el) => {
+        const text = el.value.trim();
+        if (!text)
+            return;
+        if (allowDuplicates || !chips.includes(text))
+            setChips([...chips, text]);
+        el.value = '';
+    };
+    const removeAt = (index) => {
+        setChips(chips.filter((_, i) => i !== index));
+        onTouch?.();
+    };
+    const onKeyDown = (event) => {
+        const el = event.currentTarget;
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            commit(el);
+        }
+        else if (event.key === 'Backspace' && el.value === '' && chips.length) {
+            // Backspace w pustym polu zjada ostatni chip — to samo, czego uczy każdy klient poczty.
+            removeAt(chips.length - 1);
+        }
+    };
+    const onBlur = (event) => {
+        commit(event.currentTarget);
+        onTouch?.();
+    };
+    return (_jsx("div", { className: cn('kpt-chips-input-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [chips.map((chip, index) => (_jsx(KptChip, { variant: "primary", removable: !disabled, onRemove: () => removeAt(index), children: chip }, index))), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur })] }) }));
+}

package/dist/clock/clock.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    /** Godzina jako 'HH:mm' — zawsze 24h, niezależnie od `hourFormat`. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    hourFormat?: 12 | 24;
+    minuteStep?: number;
+}
+/**
+ * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
+ * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM. Używana przez `KptDatepicker`
+ * i `KptDateRange`.
+ *
+ * @example
+ * <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
+ */
+export declare function KptClock({ value, onValueChange, hourFormat, minuteStep, className, ...rest }: Readonly<KptClockProps>): import("react").JSX.Element;

package/dist/clock/clock.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { from12h, handAngle, handIsInner, hourFromAngle, hourMarks, minuteFromAngle, minuteMarks, pad, parseTime, } from '@konce-pt/datetime';
+import { cn } from "../internal/cn.js";
+/**
+ * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
+ * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM. Używana przez `KptDatepicker`
+ * i `KptDateRange`.
+ *
+ * @example
+ * <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
+ */
+export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteStep = 1, className, ...rest }) {
+    const faceRef = useRef(null);
+    const [phase, setPhase] = useState('hours');
+    // Wartość jest jedynym źródłem prawdy — stan tarczy wyliczamy z niej przy każdym renderze,
+    // więc podmiana `value` z zewnątrz nie wymaga synchronizacji.
+    const parsed = parseTime(value);
+    const hour = parsed?.h ?? 0;
+    const minute = parsed?.m ?? 0;
+    const ampm = hour < 12 ? 'AM' : 'PM';
+    const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+    const emit = (h, m) => onValueChange?.(`${pad(h)}:${pad(m)}`);
+    const onDialPointer = (event) => {
+        const face = faceRef.current;
+        if (!face)
+            return;
+        if (event.type === 'pointerdown')
+            face.setPointerCapture(event.pointerId);
+        // Przy ruchu bez wciśniętego przycisku tarcza ma tylko śledzić kursor wzrokiem, nie zmieniać
+        // wartości — inaczej samo przesunięcie myszy nad zegarem przestawiałoby godzinę.
+        else if (!(event.buttons & 1))
+            return;
+        const rect = face.getBoundingClientRect();
+        const dx = event.clientX - (rect.left + rect.width / 2);
+        const dy = event.clientY - (rect.top + rect.height / 2);
+        let deg = (Math.atan2(dx, -dy) * 180) / Math.PI;
+        if (deg < 0)
+            deg += 360;
+        if (phase === 'hours') {
+            emit(hourFromAngle(deg, Math.hypot(dx, dy) / (rect.width / 2), hourFormat, hour), minute);
+        }
+        else {
+            emit(hour, minuteFromAngle(deg, minuteStep));
+        }
+    };
+    const marks = phase === 'hours' ? hourMarks(hour, hourFormat) : minuteMarks(minute);
+    return (_jsx("div", { className: cn('kpt-clock-host', className), ...rest, children: _jsxs("div", { className: "kpt-clock", children: [_jsxs("div", { className: "kpt-clock__time", children: [_jsx("button", { type: "button", className: cn('kpt-clock__seg', phase === 'hours' && 'is-active'), onClick: () => setPhase('hours'), children: hourFormat === 12 ? String(hour12) : pad(hour) }), _jsx("span", { className: "kpt-clock__colon", children: ":" }), _jsx("button", { type: "button", className: cn('kpt-clock__seg', phase === 'minutes' && 'is-active'), onClick: () => setPhase('minutes'), children: pad(minute) }), hourFormat === 12 ? (_jsxs("div", { className: "kpt-clock__ampm", children: [_jsx("button", { type: "button", className: cn(ampm === 'AM' && 'is-active'), onClick: () => emit(from12h(hour12, 'AM'), minute), children: "AM" }), _jsx("button", { type: "button", className: cn(ampm === 'PM' && 'is-active'), onClick: () => emit(from12h(hour12, 'PM'), minute), children: "PM" })] })) : null] }), _jsxs("div", { ref: faceRef, className: "kpt-clock__face", onPointerDown: onDialPointer, onPointerMove: onDialPointer, onPointerUp: () => phase === 'hours' && setPhase('minutes'), children: [_jsx("span", { className: "kpt-clock__center" }), _jsx("span", { className: cn('kpt-clock__hand', handIsInner(hour, hourFormat, phase) && 'kpt-clock__hand--inner'), style: { transform: `rotate(${handAngle(hour, minute, phase)}deg)` } }), marks.map((mark) => (_jsx("button", { type: "button", className: cn('kpt-clock__num', mark.inner && 'kpt-clock__num--inner', mark.selected && 'kpt-clock__num--selected'), style: { left: `${mark.x}%`, top: `${mark.y}%` }, onClick: () => {
+                                if (phase === 'hours') {
+                                    emit(mark.value, minute);
+                                    setPhase('minutes');
+                                }
+                                else {
+                                    emit(hour, mark.value);
+                                }
+                            }, children: mark.label }, `${phase}-${mark.value}`)))] })] }) }));
+}

package/dist/color-picker/color-picker.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** Kolor jako hex, np. '#3b82f6'. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Paleta szybkiego wyboru. */
+    presets?: string[];
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
+ *
+ * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem — paletę systemową
+ * otwiera przeglądarka, więc działa też na telefonie i nie duplikujemy jej własnym kodem.
+ *
+ * @example
+ * <KptColorPicker value={color} onValueChange={setColor} />
+ */
+export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;

package/dist/color-picker/color-picker.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+const DEFAULT_PRESETS = [
+    '#ef4444',
+    '#f59e0b',
+    '#10b981',
+    '#3b82f6',
+    '#8b5cf6',
+    '#ec4899',
+    '#111827',
+    '#ffffff',
+];
+/**
+ * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
+ *
+ * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem — paletę systemową
+ * otwiera przeglądarka, więc działa też na telefonie i nie duplikujemy jej własnym kodem.
+ *
+ * @example
+ * <KptColorPicker value={color} onValueChange={setColor} />
+ */
+export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange, presets = DEFAULT_PRESETS, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+    const field = useKptFormFieldContext();
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    return (_jsx("div", { className: cn('kpt-color-picker-host', className), ...rest, children: _jsxs("div", { className: "kpt-color-picker", children: [_jsx("label", { className: "kpt-color-picker__swatch", style: { backgroundColor: current }, children: _jsx("input", { type: "color", value: current, disabled: disabled, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }) }), _jsx("input", { type: "text", className: "kpt-color-picker__hex", id: field?.controlId, value: current, disabled: disabled, maxLength: 7, "aria-invalid": (invalid && (touched ?? true)) || undefined, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }), _jsx("div", { className: "kpt-color-picker__presets", children: presets.map((color) => (_jsx("button", { type: "button", className: cn('kpt-color-picker__preset', color === current && 'is-active'), style: { backgroundColor: color }, disabled: disabled, onClick: () => setCurrent(color), "aria-label": color }, color))) })] }) }));
+}

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

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptConfirmContainerProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
+}
+/**
+ * Kontener potwierdzeń — renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
+ * w aplikacji, obok `<KptToastContainer />`.
+ *
+ * @example
+ * <KptConfirmContainer />
+ * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { … }
+ */
+export declare function KptConfirmContainer({ locale, dictionary, className, ...rest }: Readonly<KptConfirmContainerProps>): import("react").JSX.Element;

package/dist/confirm/confirm-container.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptButton } from "../button/button.js";
+import { KptDialog } from "../dialog/dialog.js";
+import { KptIcon } from "../icon/icon.js";
+import { acceptKptConfirm, rejectKptConfirm, useKptConfirmRequest } from "./confirm-store.js";
+/**
+ * Kontener potwierdzeń — renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
+ * w aplikacji, obok `<KptToastContainer />`.
+ *
+ * @example
+ * <KptConfirmContainer />
+ * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { … }
+ */
+export function KptConfirmContainer({ locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const request = useKptConfirmRequest();
+    return (_jsx("div", { className: cn('kpt-confirm-container-host', className), ...rest, children: _jsxs(KptDialog, { open: request !== null, 
+            // Escape i × zamykają okno bez odpowiedzi — traktujemy to jak odmowę, żeby czekający
+            // `await` zawsze coś dostał.
+            onOpenChange: (open) => {
+                if (!open)
+                    rejectKptConfirm();
+            }, header: request?.header ?? t('confirm.header'), locale: locale, dictionary: dictionary, children: [_jsxs("div", { className: "kpt-confirm__body", children: [request?.icon ? (_jsx(KptIcon, { className: "kpt-confirm__icon", name: request.icon, "data-variant": request.variant ?? 'filled' })) : null, _jsx("p", { className: "kpt-confirm__message", children: request?.message })] }), _jsxs(KptDialog.Footer, { children: [_jsx(KptButton, { variant: "text", onClick: rejectKptConfirm, children: request?.rejectLabel ?? t('confirm.reject') }), _jsx(KptButton, { variant: request?.variant ?? 'filled', onClick: acceptKptConfirm, children: request?.acceptLabel ?? t('confirm.accept') })] })] }) }));
+}

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

@@ -0,0 +1,29 @@
+export interface KptConfirmOptions {
+    message: string;
+    header?: string;
+    acceptLabel?: string;
+    rejectLabel?: string;
+    /** Wariant przycisku akceptacji. */
+    variant?: 'filled' | 'danger';
+    icon?: string;
+}
+export interface KptConfirmRequest extends KptConfirmOptions {
+    id: number;
+    resolve: (accepted: boolean) => void;
+}
+/**
+ * Pyta użytkownika o potwierdzenie. Wymaga `<KptConfirmContainer />` w aplikacji.
+ *
+ * Jedno żądanie naraz: kolejne wywołanie przy otwartym oknie odrzuca poprzednie, żeby jego
+ * Promise nigdy nie został nierozstrzygnięty — czekający `await` zostałby inaczej na zawsze.
+ *
+ * @example
+ * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
+ */
+export declare function kptConfirm(options: KptConfirmOptions): Promise<boolean>;
+/** Zamyka bieżące potwierdzenie odpowiedzią „tak". Używane przez kontener. */
+export declare function acceptKptConfirm(): void;
+/** Zamyka bieżące potwierdzenie odpowiedzią „nie" — także przy Escape i kliknięciu w tło. */
+export declare function rejectKptConfirm(): void;
+/** Bieżące żądanie potwierdzenia albo `null`. */
+export declare function useKptConfirmRequest(): KptConfirmRequest | null;

package/dist/confirm/confirm-store.js

@@ -0,0 +1,52 @@
+import { useSyncExternalStore } from 'react';
+/*
+ * Magazyn potwierdzeń jako moduł-singleton — odpowiednik serwisu `providedIn: 'root'` z Angulara,
+ * ten sam wzorzec co `kptToast`. Dzięki temu `await kptConfirm(...)` woła się także spoza drzewa
+ * Reacta (warstwa danych, guard nawigacji), bez owijania aplikacji providerem.
+ */
+let current = null;
+let seq = 0;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+/**
+ * Pyta użytkownika o potwierdzenie. Wymaga `<KptConfirmContainer />` w aplikacji.
+ *
+ * Jedno żądanie naraz: kolejne wywołanie przy otwartym oknie odrzuca poprzednie, żeby jego
+ * Promise nigdy nie został nierozstrzygnięty — czekający `await` zostałby inaczej na zawsze.
+ *
+ * @example
+ * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
+ */
+export function kptConfirm(options) {
+    return new Promise((resolve) => {
+        current?.resolve(false);
+        current = { id: ++seq, ...options, resolve };
+        emit();
+    });
+}
+function settle(accepted) {
+    current?.resolve(accepted);
+    current = null;
+    emit();
+}
+/** Zamyka bieżące potwierdzenie odpowiedzią „tak". Używane przez kontener. */
+export function acceptKptConfirm() {
+    settle(true);
+}
+/** Zamyka bieżące potwierdzenie odpowiedzią „nie" — także przy Escape i kliknięciu w tło. */
+export function rejectKptConfirm() {
+    settle(false);
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Bieżące żądanie potwierdzenia albo `null`. */
+export function useKptConfirmRequest() {
+    return useSyncExternalStore(subscribe, () => current, () => null);
+}

package/dist/context-menu/context-menu.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { KptMenuItem } from '../menu/menu-item.ts';
+export interface KptContextMenuProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
+    items?: KptMenuItem<T>[];
+    /** Obszar reagujący na prawy przycisk myszy. */
+    children?: ReactNode;
+    onSelect?: (item: KptMenuItem<T>) => void;
+}
+/**
+ * Menu kontekstowe (PPM) na obszarze dzieci. Panel pozycjonowany do kursora.
+ *
+ * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` — nie ma tu wyzwalacza,
+ * względem którego dałoby się go przypiąć; pozycję wyznaczają współrzędne kliknięcia,
+ * a wygląd i warstwę niesie wspólny SCSS (`.kpt-context-menu__panel`).
+ *
+ * @example
+ * <KptContextMenu items={items} onSelect={onSelect}>
+ *   <div className="obszar">Kliknij prawym przyciskiem</div>
+ * </KptContextMenu>
+ */
+export declare function KptContextMenu<T>({ items, children, onSelect, className, ...rest }: Readonly<KptContextMenuProps<T>>): import("react").JSX.Element;

package/dist/context-menu/context-menu.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { MenuRows } from "../menu/menu-rows.js";
+/**
+ * Menu kontekstowe (PPM) na obszarze dzieci. Panel pozycjonowany do kursora.
+ *
+ * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` — nie ma tu wyzwalacza,
+ * względem którego dałoby się go przypiąć; pozycję wyznaczają współrzędne kliknięcia,
+ * a wygląd i warstwę niesie wspólny SCSS (`.kpt-context-menu__panel`).
+ *
+ * @example
+ * <KptContextMenu items={items} onSelect={onSelect}>
+ *   <div className="obszar">Kliknij prawym przyciskiem</div>
+ * </KptContextMenu>
+ */
+export function KptContextMenu({ items = [], children, onSelect, className, ...rest }) {
+    const [open, setOpen] = useState(false);
+    const [point, setPoint] = useState({ x: 0, y: 0 });
+    const onContextMenu = (event) => {
+        event.preventDefault();
+        setPoint({ x: event.clientX, y: event.clientY });
+        setOpen(true);
+    };
+    const close = () => setOpen(false);
+    const pick = (item) => {
+        if (item.disabled)
+            return;
+        onSelect?.(item);
+        close();
+    };
+    return (_jsxs("div", { className: cn('kpt-context-menu-host', className), ...rest, children: [_jsx("div", { className: "kpt-context-menu__area", onContextMenu: onContextMenu, children: children }), open ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-context-menu__backdrop", onClick: close, onContextMenu: (event) => {
+                            event.preventDefault();
+                            close();
+                        } }), _jsx("div", { className: "kpt-context-menu__panel", role: "menu", style: { left: point.x, top: point.y }, children: _jsx(MenuRows, { items: items, block: "kpt-context-menu", onPick: pick }) })] })) : null] }));
+}

package/dist/data-table/data-table-types.d.ts

@@ -0,0 +1,67 @@
+import type { KptColumnFilter, KptColumnSummary } from '@konce-pt/table';
+import type { ReactNode } from 'react';
+import type { KptOption } from '../shared/types.ts';
+/** Rodzaj kontrolki edycji inline komórki. */
+export type KptColumnEditType = 'text' | 'number' | 'date' | 'select' | 'multiselect';
+export interface KptColumnEdit {
+    type: KptColumnEditType;
+    /** Opcje dla `type: 'select'` / `'multiselect'`. */
+    options?: KptOption<unknown>[];
+    placeholder?: string;
+    /** Dla `type: 'number'`. */
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export interface KptColumn {
+    /** Nazwa pola w wierszu. */
+    field: string;
+    /** Nagłówek kolumny. */
+    header: string;
+    sortable?: boolean;
+    align?: 'start' | 'center' | 'end';
+    /** Szerokość kolumny (np. '10rem', '20%'). Wymagana dla kolumn zamrożonych. */
+    width?: string;
+    /** Zamrożenie (sticky) — obsługiwane dla wiodących, sąsiadujących kolumn. */
+    frozen?: boolean;
+    /** Filtr kolumny w wierszu nagłówka. */
+    filter?: KptColumnFilter;
+    /** Włącza edycję inline (klik w komórkę zamienia wartość na kontrolkę tego typu). */
+    edit?: KptColumnEdit;
+    /** Włącza agregację tej kolumny w wierszu podsumowania (`<tfoot>`). */
+    summary?: KptColumnSummary;
+}
+/** Zdarzenie po zatwierdzeniu edycji komórki. */
+export interface KptCellEditEvent<T> {
+    /** Wiersz sprzed zmiany. */
+    row: T;
+    field: string;
+    /** Nowa wartość. */
+    value: unknown;
+    /** Wiersz po scaleniu ze zmienioną wartością — gotowe body PUT/PATCH. */
+    updatedRow: T;
+}
+export type KptSortDir = 'asc' | 'desc' | null;
+/** Stan przekazywany w trybie lazy przy każdej zmianie sortowania, filtra albo strony. */
+export interface KptTableLazyState {
+    pageIndex: number;
+    pageSize: number;
+    sortField: string | null;
+    sortDir: KptSortDir;
+    filter: string;
+    /** Wartości filtrów per kolumna (pole → wartość kontrolki). */
+    columnFilters: Record<string, unknown>;
+}
+/** Kontekst własnego edytora komórki (odpowiednik `kptCellEdit` z Angulara). */
+export interface KptCellEditContext<T> {
+    value: unknown;
+    row: T;
+    /** Zatwierdza wartość i zamyka edytor. */
+    commit: (value: unknown) => void;
+    /** Porzuca zmianę. */
+    cancel: () => void;
+}
+/** Szablony komórek: pole → funkcja renderująca (odpowiednik `kptCell`). */
+export type KptCellRenderers<T> = Record<string, (row: T, value: unknown) => ReactNode>;
+/** Własne edytory komórek: pole → funkcja renderująca (odpowiednik `kptCellEdit`). */
+export type KptCellEditRenderers<T> = Record<string, (context: KptCellEditContext<T>) => ReactNode>;

package/dist/data-table/data-table-types.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/data-table.d.ts

@@ -0,0 +1,62 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptCellEditEvent, KptCellEditRenderers, KptCellRenderers, KptColumn, KptTableLazyState } from './data-table-types.ts';
+export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect' | 'children'>, KptI18nOverrides {
+    columns: readonly KptColumn[];
+    data?: readonly T[];
+    /** Pole filtra globalnego w pasku narzędzi. */
+    filterable?: boolean;
+    filterRowPosition?: 'top' | 'bottom';
+    /** Rozmiar strony; 0 wyłącza paginację. */
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    selectable?: 'none' | 'single' | 'multiple';
+    loading?: boolean;
+    emptyMessage?: string;
+    /** Pole identyfikujące wiersz; bez niego wiersze porównujemy po referencji. */
+    rowKey?: string | null;
+    scrollHeight?: string | null;
+    /** Wirtualizacja wierszy; wymaga `scrollHeight`. */
+    virtualScroll?: boolean;
+    rowHeight?: number;
+    reorderable?: boolean;
+    exportable?: boolean;
+    exportFilename?: string;
+    /** Tryb serwerowy: bez filtrowania, sortowania i paginacji po stronie klienta. */
+    lazy?: boolean;
+    totalRecords?: number | null;
+    expandable?: boolean;
+    multiExpand?: boolean;
+    summaryLabel?: string;
+    /** Gotowe wartości podsumowania (pole → wartość); nadpisują wyliczenia, w `lazy` są jedynym źródłem. */
+    summaryValues?: Record<string, unknown> | null;
+    selection?: T[];
+    defaultSelection?: T[];
+    onSelectionChange?: (rows: T[]) => void;
+    expandedRows?: T[];
+    defaultExpandedRows?: T[];
+    onExpandedRowsChange?: (rows: T[]) => void;
+    hiddenFields?: readonly string[];
+    defaultHiddenFields?: readonly string[];
+    onHiddenFieldsChange?: (fields: readonly string[]) => void;
+    onRowClick?: (row: T) => void;
+    onLazyLoad?: (state: KptTableLazyState) => void;
+    onCellEdit?: (event: KptCellEditEvent<T>) => void;
+    /** Szablony komórek: pole → funkcja renderująca. */
+    cells?: KptCellRenderers<T>;
+    /** Własne edytory komórek: pole → funkcja renderująca. */
+    cellEditors?: KptCellEditRenderers<T>;
+    /** Treść rozwiniętego wiersza (wymaga `expandable`). */
+    renderRowDetail?: (row: T) => ReactNode;
+    /** Treść po lewej stronie paginatora (odpowiednik slotu `[kptPaginatorActions]`). */
+    paginatorActions?: ReactNode;
+}
+/**
+ * Flagowa tabela danych: kolumny konfiguracją, sortowanie, filtr globalny i filtry kolumn,
+ * paginacja, zaznaczanie, kolumny zamrożone i przestawiane, edycja inline, wiersz podsumowania,
+ * rozwijane wiersze, wirtualizacja i eksport CSV.
+ *
+ * @example
+ * <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
+ */
+export declare function KptDataTable<T extends Record<string, unknown>>({ columns, data, filterable, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, emptyMessage, rowKey, scrollHeight, virtualScroll, rowHeight, reorderable, exportable, exportFilename, lazy, totalRecords, expandable, multiExpand, summaryLabel, summaryValues, selection, defaultSelection, onSelectionChange, expandedRows, defaultExpandedRows, onExpandedRowsChange, hiddenFields, defaultHiddenFields, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }: Readonly<KptDataTableProps<T>>): import("react").JSX.Element;