@konce-pt/react 0.8.0

package/dist/date-range/date-range.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { buildRangeGrid, clampVisibleMonths, datePart, formatDate, formatTime, pad, parseTime, pickRangeDay, timePart, toIso, } from '@konce-pt/datetime';
+import { monthNames, weekdayNames } from '@konce-pt/i18n';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+import { KptButton } from "../button/button.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptClock } from "../clock/clock.js";
+const EMPTY_RANGE = { start: '', end: '' };
+/**
+ * Wybór zakresu dat (i godzin) z kalendarzem. Pierwszy klik ustawia początek, drugi koniec;
+ * `visibleMonths` pokazuje kilka miesięcy obok siebie, a zakres podświetla się ciągłym pasmem
+ * przez wszystkie panele.
+ *
+ * @example
+ * <KptDateRange value={period} onValueChange={setPeriod} visibleMonths={2} />
+ * <KptDateRange mode="datetime" hourFormat={12} value={span} onValueChange={setSpan} />
+ */
+export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange, mode = 'date', visibleMonths = 1, hourFormat = 24, minuteStep = 1, placeholder, displayFormat = 'pl', disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const field = useKptFormFieldContext();
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const [isOpen, setOpen] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const today = useRef(new Date()).current;
+    const todayIso = toIso(today);
+    const showInvalid = invalid && (touched ?? true);
+    const [page, setPage] = useState(() => ({ y: today.getFullYear(), m: today.getMonth() }));
+    const [startTime, setStartTime] = useState('');
+    const [endTime, setEndTime] = useState('');
+    const [timeEnd, setTimeEnd] = useState('start');
+    // Część kalendarzowa zakresu w trybie datetime — wartość powstaje dopiero przy „Gotowe".
+    const [startDate, setStartDate] = useState('');
+    const [endDate, setEndDate] = useState('');
+    const months = monthNames(activeLocale);
+    const weekdays = weekdayNames(activeLocale);
+    const panelCount = mode === 'time' ? 1 : clampVisibleMonths(visibleMonths);
+    const multi = panelCount > 1;
+    const fmtTime = (hhmm) => {
+        const parsed = parseTime(hhmm);
+        return parsed ? formatTime(parsed.h, parsed.m, hourFormat) : '';
+    };
+    const display = (() => {
+        const { start, end } = current;
+        if (!start)
+            return '';
+        if (mode === 'time') {
+            return end ? `${fmtTime(start)} – ${fmtTime(end)}` : `${fmtTime(start)} – …`;
+        }
+        if (mode === 'datetime') {
+            const one = (v) => {
+                const date = formatDate(datePart(v), displayFormat);
+                const time = fmtTime(timePart(v));
+                return time ? `${date} ${time}` : date;
+            };
+            return end ? `${one(start)} – ${one(end)}` : `${one(start)} – …`;
+        }
+        return end
+            ? `${formatDate(start, displayFormat)} – ${formatDate(end, displayFormat)}`
+            : `${formatDate(start, displayFormat)} – …`;
+    })();
+    const toggleOpen = () => {
+        if (disabled)
+            return;
+        if (!isOpen) {
+            const { start, end } = current;
+            const base = datePart(start) || todayIso;
+            const [y, m] = [+base.slice(0, 4), +base.slice(5, 7) - 1];
+            setPage({ y, m });
+            if (mode === 'datetime') {
+                setStartDate(datePart(start));
+                setEndDate(datePart(end));
+                setStartTime(timePart(start) || '00:00');
+                setEndTime(timePart(end) || '00:00');
+            }
+            else if (mode === 'time') {
+                setStartTime(/^\d{2}:\d{2}$/.test(start) ? start : '00:00');
+                setEndTime(/^\d{2}:\d{2}$/.test(end) ? end : '00:00');
+            }
+            setTimeEnd('start');
+        }
+        setOpen(!isOpen);
+    };
+    const close = () => {
+        if (!isOpen)
+            return;
+        setOpen(false);
+        onTouch?.();
+    };
+    const panels = Array.from({ length: panelCount }, (_, i) => {
+        const first = new Date(page.y, page.m + i, 1);
+        const py = first.getFullYear();
+        const pm = first.getMonth();
+        return {
+            key: `${py}-${pad(pm + 1)}`,
+            label: `${months[pm]} ${py}`,
+            weeks: buildRangeGrid({
+                page: { y: py, m: pm },
+                start: mode === 'datetime' ? startDate : current.start,
+                end: mode === 'datetime' ? endDate : current.end,
+                todayIso,
+                hideOutside: multi,
+            }),
+        };
+    });
+    const selectDay = (iso) => {
+        if (mode === 'datetime') {
+            const next = pickRangeDay({ start: startDate, end: endDate }, iso);
+            setStartDate(next.start);
+            setEndDate(next.end);
+            return; // czas do wyboru → zamknięcie przez „Gotowe"
+        }
+        const next = pickRangeDay(current, iso);
+        setCurrent(next);
+        // Panel zostaje otwarty do czasu domknięcia zakresu — inaczej drugi klik nie miałby gdzie paść.
+        if (next.end)
+            close();
+    };
+    const commit = () => {
+        if (mode === 'time') {
+            const s = startTime || '00:00';
+            const e = endTime || '00:00';
+            setCurrent(s <= e ? { start: s, end: e } : { start: e, end: s });
+        }
+        else if (mode === 'datetime') {
+            if (!startDate) {
+                close();
+                return;
+            }
+            const start = `${startDate}T${startTime || '00:00'}`;
+            const end = `${endDate || startDate}T${endTime || '00:00'}`;
+            setCurrent(start <= end ? { start, end } : { start: end, end: start });
+        }
+        close();
+    };
+    const clear = (event) => {
+        event.stopPropagation();
+        setCurrent(EMPTY_RANGE);
+        setStartDate('');
+        setEndDate('');
+    };
+    const clockValue = timeEnd === 'start' ? startTime : endTime;
+    const setClockValue = timeEnd === 'start' ? setStartTime : setEndTime;
+    return (_jsxs("div", { className: cn('kpt-date-range-host', className), ...rest, children: [_jsxs("div", { ref: setAnchor, className: cn('kpt-date-range', isOpen && 'kpt-date-range--open', disabled && 'kpt-date-range--disabled', showInvalid && 'kpt-date-range--invalid'), role: "button", tabIndex: 0, id: field?.controlId, "aria-disabled": disabled || undefined, onClick: toggleOpen, onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        toggleOpen();
+                }, onBlur: () => onTouch?.(), children: [display ? (_jsx("span", { className: "kpt-date-range__value", children: display })) : (_jsx("span", { className: "kpt-date-range__placeholder", children: placeholder ?? t('dateRange.placeholder') })), _jsx("span", { className: "kpt-date-range__spacer" }), display ? (_jsx("button", { type: "button", className: "kpt-date-range__clear", onClick: clear, "aria-label": t('common.clear'), children: _jsx(KptIcon, { name: "x" }) })) : null, _jsx(KptIcon, { className: "kpt-date-range__icon", name: "calendar" })] }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 4, children: _jsx("div", { className: cn('kpt-calendar', mode === 'time' && 'kpt-calendar--clock', mode !== 'time' && 'kpt-calendar--range', multi && mode !== 'time' && 'kpt-calendar--multi'), children: mode === 'time' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-range-tabs", children: [_jsx("button", { type: "button", className: cn(timeEnd === 'start' && 'is-active'), onClick: () => setTimeEnd('start'), children: t('dateRange.from') }), _jsx("button", { type: "button", className: cn(timeEnd === 'end' && 'is-active'), onClick: () => setTimeEnd('end'), children: t('dateRange.to') })] }), _jsx(KptClock
+                            // Klucz na edytowanym końcu wymusza remount przy przełączeniu Od/Koniec — tarcza ma
+                            // wtedy wrócić do etapu godzin, tak jak dwie osobne instancje w porcie Angulara.
+                            , { value: clockValue, onValueChange: setClockValue, hourFormat: hourFormat, minuteStep: minuteStep }, timeEnd), _jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-calendar__panels", children: panels.map((panel, index) => (_jsxs("div", { className: "kpt-calendar__panel", children: [_jsxs("div", { className: "kpt-calendar__header", children: [index === 0 ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => setPage(({ y, m }) => (m === 0 ? { y: y - 1, m: 11 } : { y, m: m - 1 })), "aria-label": t('datepicker.prevMonth'), children: _jsx(KptIcon, { name: "chevron-left" }) })) : (_jsx("span", { className: "kpt-calendar__nav-slot" })), _jsx("span", { className: "kpt-calendar__title", children: panel.label }), index === panels.length - 1 ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => setPage(({ y, m }) => (m === 11 ? { y: y + 1, m: 0 } : { y, m: m + 1 })), "aria-label": t('datepicker.nextMonth'), children: _jsx(KptIcon, { name: "chevron-right" }) })) : (_jsx("span", { className: "kpt-calendar__nav-slot" }))] }), _jsx("div", { className: "kpt-calendar__weekdays", children: weekdays.map((weekday) => (_jsx("span", { className: "kpt-calendar__weekday", children: weekday }, weekday))) }), _jsx("div", { className: "kpt-calendar__grid", children: panel.weeks.flat().map((cell) => cell.blank ? (_jsx("span", { className: "kpt-calendar__day kpt-calendar__day--blank" }, cell.iso)) : (_jsx("button", { type: "button", className: cn('kpt-calendar__day', !cell.inMonth && 'kpt-calendar__day--muted', cell.today && 'kpt-calendar__day--today', cell.inRange && 'kpt-calendar__day--range', cell.rangeStart && 'kpt-calendar__day--range-start', cell.rangeEnd && 'kpt-calendar__day--range-end', (cell.isStart || cell.isEnd) && 'kpt-calendar__day--selected'), onClick: () => selectDay(cell.iso), children: cell.day }, cell.iso))) })] }, panel.key))) }), mode === 'datetime' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-range-tabs", children: [_jsx("button", { type: "button", className: cn(timeEnd === 'start' && 'is-active'), onClick: () => setTimeEnd('start'), children: t('dateRange.fromTime') }), _jsx("button", { type: "button", className: cn(timeEnd === 'end' && 'is-active'), onClick: () => setTimeEnd('end'), children: t('dateRange.toTime') })] }), _jsx(KptClock, { value: clockValue, onValueChange: setClockValue, hourFormat: hourFormat, minuteStep: minuteStep }, timeEnd), _jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })] })) : null] })) }) })] }));
+}

package/dist/datepicker/datepicker.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptCalendarView, type KptDateSelectionMode } from '@konce-pt/datetime';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export type { KptDateSelectionMode as KptDatepickerMode, KptCalendarView as KptDatepickerView };
+export interface KptDatepickerProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Granulacja wyboru; od niej zależy format wartości. */
+    selectionMode?: KptDateSelectionMode;
+    /** Poziom, od którego otwiera się panel; `null` = poziom zatwierdzania danego trybu. */
+    startView?: KptCalendarView | null;
+    minDate?: string | null;
+    maxDate?: string | null;
+    placeholder?: string;
+    /** Prezentacja miesiąca w trybie 'month' i w etykietach: słownie czy liczbą. */
+    monthDisplay?: 'long' | 'number';
+    displayFormat?: 'pl' | 'iso';
+    hourFormat?: 12 | 24;
+    minuteStep?: number;
+    /** Stan panelu — pozwala otworzyć kalendarz z zewnątrz i wiedzieć, kiedy wybór się skończył. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Nazwa dostępna, gdy pola nie opisuje `<label for>`. */
+    ariaLabel?: string | null;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Wybór daty i godziny z własnym kalendarzem. Panel jest stosem widoków
+ * dekady → lata → miesiące → dni: klik w komórkę schodzi poziom niżej, klik w tytuł wchodzi wyżej.
+ *
+ * @example
+ * <KptDatepicker value={date} onValueChange={setDate} startView="decade" minDate="1920-01-01" />
+ * <KptDatepicker selectionMode="datetime" hourFormat={12} value={at} onValueChange={setAt} />
+ */
+export declare function KptDatepicker({ value, defaultValue, onValueChange, selectionMode, startView, minDate, maxDate, placeholder, monthDisplay, displayFormat, hourFormat, minuteStep, open, onOpenChange, ariaLabel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptDatepickerProps>): import("react").JSX.Element;

package/dist/datepicker/datepicker.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { KPT_CALENDAR_LEVELS, buildDayGrid, buildDecadeCells, buildMonthCells, buildYearCells, canPageBack, canPageForward, centuryStart, commitLevelFor, decadeStart, formatDate, formatTime, initialPage, pad, pageBy, parseDateTime, parseTime, resolveStartView, selectedYearMonth, toIso, } from '@konce-pt/datetime';
+import { monthNames, weekdayNames } from '@konce-pt/i18n';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+import { KptButton } from "../button/button.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptClock } from "../clock/clock.js";
+/**
+ * Wybór daty i godziny z własnym kalendarzem. Panel jest stosem widoków
+ * dekady → lata → miesiące → dni: klik w komórkę schodzi poziom niżej, klik w tytuł wchodzi wyżej.
+ *
+ * @example
+ * <KptDatepicker value={date} onValueChange={setDate} startView="decade" minDate="1920-01-01" />
+ * <KptDatepicker selectionMode="datetime" hourFormat={12} value={at} onValueChange={setAt} />
+ */
+export function KptDatepicker({ value, defaultValue = '', onValueChange, selectionMode = 'date', startView = null, minDate = null, maxDate = null, placeholder = '', monthDisplay = 'long', displayFormat = 'pl', hourFormat = 24, minuteStep = 1, open, onOpenChange, ariaLabel = null, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const field = useKptFormFieldContext();
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: false, onChange: onOpenChange });
+    const [anchor, setAnchor] = useState(null);
+    const triggerRef = useRef(null);
+    const today = useRef(new Date()).current;
+    const todayIso = toIso(today);
+    const showInvalid = invalid && (touched ?? true);
+    const [page, setPage] = useState(() => initialPage(current, selectionMode, today));
+    const [panelView, setPanelView] = useState(() => resolveStartView(selectionMode, startView));
+    const [timeStr, setTimeStr] = useState('');
+    const [pendingDate, setPendingDate] = useState('');
+    const [dtView, setDtView] = useState('calendar');
+    const months = monthNames(activeLocale);
+    const weekdays = weekdayNames(activeLocale);
+    const commitLevel = commitLevelFor(selectionMode);
+    // Panel można otworzyć także z zewnątrz (`open`), nie tylko klikiem w trigger — widok
+    // i bufor czasu ustawiamy więc przy każdym otwarciu, a nie w obsłudze kliknięcia.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setPage(initialPage(current, selectionMode, today));
+        setPanelView(resolveStartView(selectionMode, startView));
+        setDtView(selectionMode === 'time' ? 'clock' : 'calendar');
+        if (selectionMode === 'time') {
+            const parsed = parseTime(current);
+            setTimeStr(parsed ? `${pad(parsed.h)}:${pad(parsed.m)}` : '00:00');
+        }
+        else if (selectionMode === 'datetime') {
+            const parsed = parseDateTime(current);
+            setTimeStr(parsed ? `${pad(parsed.h)}:${pad(parsed.m)}` : '00:00');
+            setPendingDate(parsed?.date ?? '');
+        }
+        // Zależność wyłącznie od `isOpen`: to otwarcie ma ustawić stan początkowy, a późniejsze
+        // zmiany wartości w otwartym panelu nie mogą go zresetować pod palcami użytkownika.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    const showClock = selectionMode === 'time' || (selectionMode === 'datetime' && dtView === 'clock');
+    const hasFooter = selectionMode === 'time' || selectionMode === 'datetime';
+    const hasNav = selectionMode !== 'month';
+    const close = () => {
+        if (!isOpen)
+            return;
+        setOpen(false);
+        onTouch?.();
+    };
+    // ── Prezentacja w triggerze ──
+    const effectivePlaceholder = (() => {
+        if (placeholder)
+            return placeholder;
+        const iso = displayFormat === 'iso';
+        const time = hourFormat === 12 ? '--:-- --' : '--:--';
+        switch (selectionMode) {
+            case 'monthYear':
+                return iso ? 'RRRR-MM' : 'MM.RRRR';
+            case 'year':
+                return 'RRRR';
+            case 'month':
+                return monthDisplay === 'number' ? 'MM' : t('datepicker.month');
+            case 'time':
+                return time;
+            case 'datetime':
+                return `${iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR'} ${time}`;
+            default:
+                return iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR';
+        }
+    })();
+    /** Wartość niepasująca do formatu trybu daje pusty tekst — trigger nie pokazuje śmieci. */
+    const display = (() => {
+        if (!current)
+            return '';
+        const iso = displayFormat === 'iso';
+        switch (selectionMode) {
+            case 'monthYear': {
+                const match = /^(\d{4})-(\d{2})$/.exec(current);
+                if (!match)
+                    return '';
+                return iso ? current : `${match[2]}.${match[1]}`;
+            }
+            case 'year':
+                return /^\d{4}$/.test(current) ? current : '';
+            case 'month': {
+                const match = /^(\d{2})$/.exec(current);
+                if (!match)
+                    return '';
+                return monthDisplay === 'number' ? match[1] : (months[+match[1] - 1] ?? '');
+            }
+            case 'time': {
+                const parsed = parseTime(current);
+                return parsed ? formatTime(parsed.h, parsed.m, hourFormat) : '';
+            }
+            case 'datetime': {
+                const parsed = parseDateTime(current);
+                if (!parsed)
+                    return '';
+                const sep = iso ? 'T' : ' ';
+                return `${formatDate(parsed.date, displayFormat)}${sep}${formatTime(parsed.h, parsed.m, hourFormat)}`;
+            }
+            default:
+                return formatDate(current, displayFormat);
+        }
+    })();
+    // ── Siatki ──
+    const selectedDateIso = selectionMode === 'datetime' ? pendingDate : current;
+    const weeks = buildDayGrid({ page, selectedIso: selectedDateIso, todayIso, minDate, maxDate });
+    const selectedYM = selectedYearMonth(selectionMode === 'datetime' ? pendingDate : current, selectionMode);
+    const levelCells = panelView === 'year'
+        ? buildYearCells({ year: page.y, selected: selectedYM, today, minDate, maxDate })
+        : panelView === 'decade'
+            ? buildDecadeCells({ year: page.y, selected: selectedYM, today, minDate, maxDate })
+            : buildMonthCells({
+                year: page.y,
+                monthNames: months,
+                selected: selectedYM,
+                today,
+                monthOnly: selectionMode === 'month',
+                numeric: monthDisplay === 'number',
+                minDate,
+                maxDate,
+            });
+    const navLabel = (dir) => {
+        switch (panelView) {
+            case 'month':
+                return t(dir === 'prev' ? 'datepicker.prevYear' : 'datepicker.nextYear');
+            case 'year':
+                return t(dir === 'prev' ? 'datepicker.prevYears' : 'datepicker.nextYears');
+            case 'decade':
+                return t(dir === 'prev' ? 'datepicker.prevDecades' : 'datepicker.nextDecades');
+            default:
+                return t(dir === 'prev' ? 'datepicker.prevMonth' : 'datepicker.nextMonth');
+        }
+    };
+    // ── Wybór ──
+    const selectDay = (iso, cellDisabled) => {
+        if (cellDisabled)
+            return;
+        if (selectionMode === 'datetime') {
+            setPendingDate(iso); // czas jeszcze do wyboru — zamyka dopiero „Gotowe"
+            return;
+        }
+        setCurrent(iso);
+        close();
+    };
+    const selectCell = (cell) => {
+        if (cell.disabled)
+            return;
+        if (panelView === commitLevel) {
+            const mm = pad(cell.m + 1);
+            setCurrent(panelView === 'year' ? String(cell.y) : selectionMode === 'month' ? mm : `${cell.y}-${mm}`);
+            close();
+            return;
+        }
+        setPage(({ m }) => ({ y: cell.y, m: panelView === 'month' ? cell.m : m }));
+        setPanelView(KPT_CALENDAR_LEVELS[KPT_CALENDAR_LEVELS.indexOf(panelView) - 1]);
+    };
+    const commit = () => {
+        const time = timeStr || '00:00';
+        if (selectionMode === 'time') {
+            setCurrent(time);
+        }
+        else {
+            const parsed = parseDateTime(current);
+            setCurrent(`${pendingDate || parsed?.date || todayIso}T${time}`);
+        }
+        close();
+    };
+    const clear = (event) => {
+        event.stopPropagation();
+        setCurrent('');
+        setPendingDate('');
+    };
+    const timeParts = parseTime(timeStr);
+    return (_jsxs("div", { className: cn('kpt-datepicker-host', className), ...rest, children: [_jsxs("div", { ref: (el) => {
+                    triggerRef.current = el;
+                    setAnchor(el);
+                }, className: cn('kpt-datepicker', isOpen && 'kpt-datepicker--open', disabled && 'kpt-datepicker--disabled', showInvalid && 'kpt-datepicker--invalid'), role: "button", tabIndex: 0, id: field?.controlId, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? undefined, onClick: () => !disabled && setOpen(!isOpen), onKeyDown: (event) => {
+                    if (event.key === 'Enter' && !disabled)
+                        setOpen(!isOpen);
+                }, onBlur: () => onTouch?.(), children: [display ? (_jsx("span", { className: "kpt-datepicker__value", children: display })) : (_jsx("span", { className: "kpt-datepicker__placeholder", children: effectivePlaceholder })), _jsx("span", { className: "kpt-datepicker__spacer" }), display ? (_jsx("button", { type: "button", className: "kpt-datepicker__clear", onClick: clear, "aria-label": t('common.clear'), children: _jsx(KptIcon, { name: "x" }) })) : null, _jsx(KptIcon, { className: "kpt-datepicker__icon", name: selectionMode === 'time' ? 'clock' : 'calendar' })] }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 4, children: _jsxs("div", { className: cn('kpt-calendar', showClock && 'kpt-calendar--clock'), children: [showClock ? (_jsxs(_Fragment, { children: [selectionMode === 'datetime' ? (_jsxs("div", { className: "kpt-calendar__header", children: [_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => setDtView('calendar'), "aria-label": t('datepicker.calendar'), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("span", { className: "kpt-calendar__title", children: t('datepicker.time') })] })) : null, _jsx(KptClock, { value: timeStr, onValueChange: setTimeStr, hourFormat: hourFormat, minuteStep: minuteStep })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-calendar__header", children: [hasNav ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", disabled: !canPageBack(page, panelView, minDate), onClick: () => setPage(pageBy(page, panelView, -1)), "aria-label": navLabel('prev'), children: _jsx(KptIcon, { name: "chevron-left" }) })) : null, _jsxs("span", { className: "kpt-calendar__titles", children: [panelView === 'day' ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => setPanelView('month'), "aria-label": t('datepicker.chooseMonth'), children: months[page.m] }), _jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => setPanelView('year'), "aria-label": t('datepicker.chooseYear'), children: page.y })] })) : null, panelView === 'month' ? (selectionMode === 'month' ? (_jsx("span", { className: "kpt-calendar__title", children: t('datepicker.month') })) : (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => setPanelView('year'), "aria-label": t('datepicker.chooseYear'), children: page.y }))) : null, panelView === 'year' ? (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => setPanelView('decade'), "aria-label": t('datepicker.chooseDecade'), children: `${decadeStart(page.y)} – ${decadeStart(page.y) + 9}` })) : null, panelView === 'decade' ? (_jsx("span", { className: "kpt-calendar__title", children: `${centuryStart(page.y)} – ${centuryStart(page.y) + 119}` })) : null] }), hasNav ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", disabled: !canPageForward(page, panelView, maxDate), onClick: () => setPage(pageBy(page, panelView, 1)), "aria-label": navLabel('next'), children: _jsx(KptIcon, { name: "chevron-right" }) })) : null] }), panelView === 'day' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-calendar__weekdays", children: weekdays.map((weekday) => (_jsx("span", { className: "kpt-calendar__weekday", children: weekday }, weekday))) }), _jsx("div", { className: "kpt-calendar__grid", children: weeks.flat().map((cell) => (_jsx("button", { type: "button", className: cn('kpt-calendar__day', !cell.inMonth && 'kpt-calendar__day--muted', cell.today && 'kpt-calendar__day--today', cell.selected && 'kpt-calendar__day--selected'), disabled: cell.disabled, "aria-pressed": cell.selected, onClick: () => selectDay(cell.iso, cell.disabled), children: cell.day }, cell.iso))) })] })) : (_jsx("div", { className: cn('kpt-calendar__grid kpt-calendar__grid--cells', panelView === 'decade' && 'kpt-calendar__grid--decades'), children: levelCells.map((cell) => (_jsx("button", { type: "button", className: cn('kpt-calendar__cell', cell.selected && 'kpt-calendar__cell--selected', cell.current && 'kpt-calendar__cell--current'), disabled: cell.disabled, "aria-pressed": cell.selected, onClick: () => selectCell(cell), children: cell.label }, cell.label))) })), selectionMode === 'datetime' ? (_jsxs("button", { type: "button", className: "kpt-calendar__timebar", onClick: () => setDtView('clock'), children: [_jsx(KptIcon, { name: "clock" }), _jsx("span", { children: formatTime(timeParts?.h ?? 0, timeParts?.m ?? 0, hourFormat) })] })) : null] })), hasFooter ? (_jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })) : null] }) })] }));
+}

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptDialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open' | 'onClose'>, KptI18nOverrides {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    header?: string;
+    /** Pozwala zamknąć klawiszem Esc i przyciskiem ×. */
+    dismissible?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Okno modalne na natywnym `<dialog>` — pułapka fokusu, Escape i backdrop pochodzą z platformy,
+ * nie z naszego kodu. Stopkę wstaw przez `<KptDialog.Footer>`.
+ *
+ * @example
+ * <KptDialog open={open} onOpenChange={setOpen} header="Usunąć?">
+ *   Tej operacji nie można cofnąć.
+ *   <KptDialog.Footer>
+ *     <KptButton variant="text" onClick={() => setOpen(false)}>Anuluj</KptButton>
+ *     <KptButton variant="danger" onClick={remove}>Usuń</KptButton>
+ *   </KptDialog.Footer>
+ * </KptDialog>
+ */
+export declare function KptDialog({ open, onOpenChange, header, dismissible, locale, dictionary, className, children, ref, ...rest }: Readonly<KptDialogProps>): import("react").JSX.Element;
+export declare namespace KptDialog {
+    var Footer: typeof KptDialogFooter;
+}
+/**
+ * Stopka okna. Nosi atrybut `kptdialogfooter`, w który celuje wspólny SCSS (nazwy atrybutów
+ * w selektorach CSS są w HTML case-insensitive, więc jedna reguła obsługuje oba porty).
+ */
+export declare function KptDialogFooter({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+export declare namespace KptDialogFooter {
+    var kptDialogSlot: "footer";
+}

package/dist/dialog/dialog.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useEffect, useRef, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
+import { KptOverlayContainerContext } from "../internal/overlay-container.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Okno modalne na natywnym `<dialog>` — pułapka fokusu, Escape i backdrop pochodzą z platformy,
+ * nie z naszego kodu. Stopkę wstaw przez `<KptDialog.Footer>`.
+ *
+ * @example
+ * <KptDialog open={open} onOpenChange={setOpen} header="Usunąć?">
+ *   Tej operacji nie można cofnąć.
+ *   <KptDialog.Footer>
+ *     <KptButton variant="text" onClick={() => setOpen(false)}>Anuluj</KptButton>
+ *     <KptButton variant="danger" onClick={remove}>Usuń</KptButton>
+ *   </KptDialog.Footer>
+ * </KptDialog>
+ */
+export function KptDialog({ open, onOpenChange, header = '', dismissible = true, locale, dictionary, className, children, ref, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const dialogRef = useRef(null);
+    // Element trafia do kontekstu, więc musi wywołać render — sam `ref` by nie wystarczył.
+    const [dialogEl, setDialogEl] = useState(null);
+    useEffect(() => {
+        const el = dialogRef.current;
+        if (!el)
+            return;
+        if (open && !el.open)
+            el.showModal();
+        else if (!open && el.open)
+            el.close();
+    }, [open]);
+    const footers = [];
+    const body = [];
+    Children.forEach(children, (child) => {
+        const isFooter = isValidElement(child) && child.type?.kptDialogSlot === 'footer';
+        (isFooter ? footers : body).push(child);
+    });
+    const onCancel = (event) => {
+        // Esc idzie przez `cancel`; blokujemy go, gdy okna nie wolno zamknąć.
+        if (!dismissible) {
+            event.preventDefault();
+            return;
+        }
+        onOpenChange(false);
+    };
+    return (_jsx(KptOverlayContainerContext.Provider, { value: open ? dialogEl : null, children: _jsxs("dialog", { ref: composeRefs(dialogRef, setDialogEl, ref), className: cn('kpt-dialog', className), onClose: () => onOpenChange(false), onCancel: onCancel, ...rest, children: [header ? (_jsxs("div", { className: "kpt-dialog__header", children: [_jsx("h2", { className: "kpt-dialog__title", children: header }), dismissible ? (_jsx("button", { className: "kpt-dialog__close", type: "button", onClick: () => onOpenChange(false), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-dialog__body", children: body }), footers] }) }));
+}
+/**
+ * Stopka okna. Nosi atrybut `kptdialogfooter`, w który celuje wspólny SCSS (nazwy atrybutów
+ * w selektorach CSS są w HTML case-insensitive, więc jedna reguła obsługuje oba porty).
+ */
+export function KptDialogFooter({ className, ...rest }) {
+    return _jsx("div", { kptdialogfooter: '', className: className, ...rest });
+}
+KptDialogFooter.kptDialogSlot = 'footer';
+KptDialog.Footer = KptDialogFooter;

package/dist/divider/divider.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithRef } from 'react';
+export type KptDividerOrientation = 'horizontal' | 'vertical';
+export interface KptDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    orientation?: KptDividerOrientation;
+    /** Wcięcie (odstęp od krawędzi kontenera). */
+    inset?: boolean;
+}
+/**
+ * Separator (linia pozioma lub pionowa). Kolor z `--kpt-color-border`.
+ *
+ * @example
+ * <KptDivider />
+ * <KptDivider orientation="vertical" />
+ * <KptDivider inset />
+ */
+export declare function KptDivider({ orientation, inset, className, ...rest }: Readonly<KptDividerProps>): import("react").JSX.Element;

package/dist/divider/divider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Separator (linia pozioma lub pionowa). Kolor z `--kpt-color-border`.
+ *
+ * @example
+ * <KptDivider />
+ * <KptDivider orientation="vertical" />
+ * <KptDivider inset />
+ */
+export function KptDivider({ orientation = 'horizontal', inset = false, className, ...rest }) {
+    return (_jsx("div", { className: cn('kpt-divider', inset && 'kpt-divider--inset', className), role: "separator", "aria-orientation": orientation, "data-orientation": orientation, ...rest }));
+}

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export type KptDrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface KptDrawerProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    position?: KptDrawerPosition;
+    header?: string;
+    /** Pokazuje przycisk × i pozwala zamknąć klawiszem Escape. */
+    dismissible?: boolean;
+    closeOnBackdrop?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Panel wysuwany (drawer / off-canvas), niezależny od app-shell.
+ *
+ * Panel i backdrop są zawsze w DOM, a o widoczności decyduje klasa `is-open` — dzięki temu
+ * wysunięcie i schowanie da się animować, tak samo jak w porcie Angulara.
+ *
+ * @example
+ * <KptDrawer open={open} onOpenChange={setOpen} position="right" header="Filtry">
+ *   Treść panelu…
+ * </KptDrawer>
+ */
+export declare function KptDrawer({ open, onOpenChange, position, header, dismissible, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptDrawerProps>): import("react").JSX.Element;

package/dist/drawer/drawer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Panel wysuwany (drawer / off-canvas), niezależny od app-shell.
+ *
+ * Panel i backdrop są zawsze w DOM, a o widoczności decyduje klasa `is-open` — dzięki temu
+ * wysunięcie i schowanie da się animować, tak samo jak w porcie Angulara.
+ *
+ * @example
+ * <KptDrawer open={open} onOpenChange={setOpen} position="right" header="Filtry">
+ *   Treść panelu…
+ * </KptDrawer>
+ */
+export function KptDrawer({ open, onOpenChange, position = 'left', header = '', dismissible = true, closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape' && dismissible)
+            close();
+    };
+    return (_jsxs("div", { className: cn('kpt-drawer-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-drawer__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("aside", { className: cn('kpt-drawer__panel', open && 'is-open'), "data-position": position, role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: onKeyDown, children: [header || dismissible ? (_jsxs("div", { className: "kpt-drawer__header", children: [_jsx("span", { className: "kpt-drawer__title", children: header }), dismissible ? (_jsx("button", { type: "button", className: "kpt-drawer__close", onClick: close, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-drawer__body", children: children })] })] }));
+}

package/dist/empty/empty.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export interface KptEmptyProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** Nazwa ikony z rejestru; `null` chowa ikonę. */
+    icon?: string | null;
+    title?: string;
+    description?: string;
+    /** Akcje pod opisem. */
+    children?: ReactNode;
+}
+/**
+ * Stan pusty (empty state) — ikona, tytuł, opis i opcjonalne akcje.
+ *
+ * @example
+ * <KptEmpty icon="search" title="Brak wyników" description="Zmień kryteria wyszukiwania.">
+ *   <KptButton>Wyczyść filtry</KptButton>
+ * </KptEmpty>
+ */
+export declare function KptEmpty({ icon, title, description, className, children, ...rest }: Readonly<KptEmptyProps>): import("react").JSX.Element;

package/dist/empty/empty.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Stan pusty (empty state) — ikona, tytuł, opis i opcjonalne akcje.
+ *
+ * @example
+ * <KptEmpty icon="search" title="Brak wyników" description="Zmień kryteria wyszukiwania.">
+ *   <KptButton>Wyczyść filtry</KptButton>
+ * </KptEmpty>
+ */
+export function KptEmpty({ icon = 'info-circle', title = '', description = '', className, children, ...rest }) {
+    return (_jsx("div", { className: cn('kpt-empty-host', className), ...rest, children: _jsxs("div", { className: "kpt-empty", children: [icon ? (_jsx("div", { className: "kpt-empty__icon", children: _jsx(KptIcon, { name: icon }) })) : null, title ? _jsx("p", { className: "kpt-empty__title", children: title }) : null, description ? _jsx("p", { className: "kpt-empty__desc", children: description }) : null, _jsx("div", { className: "kpt-empty__actions", children: children })] }) }));
+}