@konce-pt/react 0.8.0

package/dist/roadmap/roadmap.js

@@ -0,0 +1,271 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { buildRows, buildTimeline, linkGeometry, resolveLinks, resolveRange, sliceRows, } from '@konce-pt/roadmap';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptTooltip } from "../tooltip/tooltip.js";
+/** Domyślna szerokość kolumny dla danego zoomu (px). */
+const CELL_WIDTH = {
+    year: 96,
+    quarter: 88,
+    month: 80,
+    week: 76,
+    day: 44,
+    hour: 46,
+};
+/** Wysokość paska w trybie „jeden item na wiersz" (px). */
+const BAR_HEIGHT = 22;
+/** Odstęp między pasami w trybie „pack" (px). */
+const LANE_GAP = 4;
+/**
+ * Roadmapa — wiersze zadań na poziomej osi czasu (widok typu Gantt).
+ *
+ * Układ opiera się na DOM i `position: sticky` (kolumna etykiet oraz nagłówek),
+ * paski są pozycjonowane procentowo w torze, a zależności rysuje warstwa SVG
+ * rozpięta nad torami. Cała geometria pochodzi z `@konce-pt/roadmap` — tej samej
+ * paczki, z której korzysta port Angulara.
+ *
+ * @example
+ * <KptRoadmap config={{ zoom: 'week', items }} onItemClick={(item) => open(item.id)} />
+ */
+export function KptRoadmap({ config, scrollHeight = null, labelWidth = '14rem', cellWidthPx = null, showToday = true, virtual = false, collapsedGroups, defaultCollapsedGroups = [], onCollapsedGroupsChange, onItemClick, onRangeChange, locale: localeOverride, dictionary, className, style, ...rest }) {
+    const { t, locale } = useKptMessages({ locale: localeOverride, dictionary });
+    const [collapsed, setCollapsed] = useControllableState({
+        value: collapsedGroups,
+        defaultValue: defaultCollapsedGroups,
+        onChange: onCollapsedGroupsChange,
+    });
+    /**
+     * Grupy zwinięte na starcie przez `group.collapsed`. Trzymamy je osobno od stanu aplikacji,
+     * żeby sterowanie z zewnątrz pozostało w jej rękach, a zwinięcie zadeklarowane w danych
+     * nadal działało. Wyliczamy w trakcie renderu i resetujemy, gdy zmieni się lista grup —
+     * efekt zrobiłby to samo o jeden render za późno, czyli po mignięciu rozwiniętej grupy.
+     */
+    const [fromConfig, setFromConfig] = useState(() => declaredCollapsed(config.groups));
+    const groupsRef = useRef(config.groups);
+    if (groupsRef.current !== config.groups) {
+        groupsRef.current = config.groups;
+        setFromConfig(declaredCollapsed(config.groups));
+    }
+    /** Suma obu źródeł — stan faktycznie użyty do budowy wierszy. */
+    const collapsedIds = useMemo(() => new Set([...fromConfig, ...collapsed]), [fromConfig, collapsed]);
+    const scrollRef = useRef(null);
+    const laneRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(0);
+    /** Szerokość toru w px — potrzebna warstwie SVG, która pracuje w pikselach. */
+    const [laneWidth, setLaneWidth] = useState(0);
+    const zoom = config.zoom ?? 'week';
+    const cellWidth = cellWidthPx ?? CELL_WIDTH[zoom];
+    const barHeight = config.rows?.laneHeight ?? BAR_HEIGHT;
+    const range = useMemo(() => resolveRange(config, config.items), [config]);
+    const timeline = useMemo(() => buildTimeline(range, zoom, {
+        ...config.timeline,
+        locale: config.locale ?? config.timeline?.locale ?? locale,
+        today: config.today ?? config.timeline?.today,
+        weekPrefix: config.timeline?.weekPrefix ?? t('roadmap.week'),
+    }), [range, zoom, config, locale, t]);
+    const layout = useMemo(() => buildRows(config.items, config.groups, collapsedIds, config.rows), [config.items, config.groups, config.rows, collapsedIds]);
+    /** Wiersze faktycznie renderowane — całość albo okno wirtualizacji. */
+    const visibleRows = useMemo(() => {
+        if (!virtual || viewportHeight <= 0)
+            return layout.rows;
+        return sliceRows(layout, scrollTop, viewportHeight).rows;
+    }, [virtual, viewportHeight, layout, scrollTop]);
+    // Zakres jest wielkością wyliczaną — informujemy o nim po każdym przeliczeniu.
+    useEffect(() => {
+        onRangeChange?.(range);
+    }, [range, onRangeChange]);
+    // Pomiar toru i okna przewijania; oba wpływają wyłącznie na warstwę widoku.
+    useLayoutEffect(() => {
+        const lane = laneRef.current;
+        const scroll = scrollRef.current;
+        if (!lane || typeof ResizeObserver === 'undefined')
+            return;
+        const measure = () => {
+            setLaneWidth(lane.clientWidth);
+            if (scroll)
+                setViewportHeight(scroll.clientHeight);
+        };
+        const observer = new ResizeObserver(measure);
+        observer.observe(lane);
+        if (scroll)
+            observer.observe(scroll);
+        measure();
+        return () => observer.disconnect();
+    }, []);
+    // Ostrzeżenie dla danych, których nie da się narysować.
+    useEffect(() => {
+        const invalid = layout.invalid;
+        if (invalid.length > 0 && isDevBuild()) {
+            console.warn('[kpt-roadmap] Pominięto elementy:', invalid.map((entry) => `${entry.id} (${entry.reason})`).join(', '));
+        }
+    }, [layout]);
+    /** Wysokość paska wraz z odstępem — wspólna dla widoku i geometrii zależności. */
+    const laneStep = barHeight + LANE_GAP;
+    /** Offset pionowy paska wewnątrz wiersza (px). */
+    const barTop = useCallback((row, lane) => {
+        const total = row.laneCount * barHeight + (row.laneCount - 1) * LANE_GAP;
+        return Math.max(0, (row.height - total) / 2) + lane * laneStep;
+    }, [barHeight, laneStep]);
+    /** Paski danego wiersza gotowe do renderu. */
+    const bars = useCallback((row) => {
+        const result = [];
+        for (const item of row.items) {
+            const geom = timeline.span(item.start, item.end);
+            if (!geom.visible)
+                continue;
+            const source = item.source;
+            result.push({
+                item,
+                left: geom.left * 100,
+                width: geom.width * 100,
+                top: barTop(row, item.lane),
+                height: barHeight,
+                label: source.label,
+                title: source.sublabel ? `${source.label} — ${source.sublabel}` : source.label,
+                variant: source.variant ?? 'primary',
+                color: source.color,
+                progress: source.progress ?? null,
+                isMilestone: item.isMilestone,
+                clippedStart: geom.clippedStart,
+                clippedEnd: geom.clippedEnd,
+            });
+        }
+        return result;
+    }, [timeline, barTop, barHeight]);
+    /** Pasek zbiorczy wiersza grupy. */
+    const summary = useCallback((row) => {
+        const span = row.groupState?.span;
+        if (!span)
+            return null;
+        const geom = timeline.span(span.start, span.end);
+        if (!geom.visible)
+            return null;
+        return {
+            left: geom.left * 100,
+            width: geom.width * 100,
+            variant: row.group?.variant ?? 'neutral',
+            color: row.group?.color,
+        };
+    }, [timeline]);
+    /**
+     * Geometria zależności w pikselach.
+     * Liczona dopiero po zmierzeniu toru; wiersze poza oknem wirtualizacji
+     * nie mają końców, więc ich krawędzie są pomijane.
+     */
+    const links = useMemo(() => {
+        if (config.dependencies?.enabled === false)
+            return [];
+        if (laneWidth <= 0)
+            return [];
+        const endpoints = new Map();
+        for (const row of visibleRows) {
+            for (const item of row.items) {
+                const geom = timeline.span(item.start, item.end);
+                if (!geom.visible)
+                    continue;
+                // Romb kamienia milowego jest renderowany wyśrodkowany na dacie
+                // (`translateX(-50%)`), więc jego prostokąt zaczyna się o pół rozmiaru wcześniej.
+                const left = geom.left * laneWidth - (item.isMilestone ? barHeight / 2 : 0);
+                endpoints.set(item.id, {
+                    id: item.id,
+                    rect: {
+                        x: left,
+                        y: row.top + barTop(row, item.lane),
+                        width: Math.max(geom.width * laneWidth, item.isMilestone ? barHeight : 1),
+                        height: barHeight,
+                    },
+                    startTs: item.start,
+                    endTs: item.end,
+                });
+            }
+        }
+        const resolved = resolveLinks([...layout.byId.values()], config.links);
+        const result = [];
+        for (const link of resolved.links) {
+            const geom = linkGeometry(link, endpoints.get(link.from), endpoints.get(link.to), config.dependencies);
+            if (geom)
+                result.push(geom);
+        }
+        return result;
+    }, [config.dependencies, config.links, laneWidth, visibleRows, timeline, layout, barTop, barHeight]);
+    const isCollapsed = (group) => group ? collapsedIds.has(group.id) : false;
+    const toggleGroup = (group) => {
+        if (collapsedIds.has(group.id)) {
+            // Rozwijanie musi zdjąć grupę z obu źródeł, inaczej `group.collapsed`
+            // natychmiast zwinęłoby ją z powrotem.
+            setFromConfig((ids) => ids.filter((id) => id !== group.id));
+            setCollapsed(collapsed.filter((id) => id !== group.id));
+            return;
+        }
+        setCollapsed([...collapsed, group.id]);
+    };
+    const handleItemClick = (item) => {
+        if (item.source.disabled)
+            return;
+        onItemClick?.(item.source);
+    };
+    const handleItemKeydown = (event, item) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        handleItemClick(item);
+    };
+    /**
+     * Treść dymka dla kolumny etykiet. Pusta tam, gdzie dymek nie miałby czego
+     * uzupełnić — komponent pomija wtedy podpowiedź.
+     */
+    const labelTooltip = (row) => {
+        // Wiersz grupy ma własny dymek, osadzony głębiej (na stosie etykiet).
+        if (row.kind === 'group')
+            return '';
+        // Tryb 'pack' mieści wiele zadań w jednym wierszu — nie ma jednej etykiety.
+        if (row.items.length !== 1)
+            return '';
+        const source = row.items[0].source;
+        return source.sublabel ? `${source.label} — ${source.sublabel}` : source.label;
+    };
+    const onScroll = (event) => {
+        setScrollTop(event.currentTarget.scrollTop);
+    };
+    const hostStyle = {
+        ...style,
+        '--kpt-roadmap-cells': timeline.cells.length,
+        '--kpt-roadmap-cell-w': `${cellWidth}px`,
+        '--kpt-roadmap-label-w': labelWidth,
+    };
+    const isEmpty = layout.rows.length === 0;
+    return (_jsx("div", { className: cn('kpt-roadmap', scrollHeight && 'kpt-roadmap--fixed-height', className), style: hostStyle, ...rest, children: _jsxs("div", { ref: scrollRef, className: "kpt-roadmap__scroll", style: { maxBlockSize: scrollHeight ?? undefined }, onScroll: onScroll, children: [_jsxs("div", { className: "kpt-roadmap__head", children: [_jsx("div", { className: "kpt-roadmap__head-label" }), _jsxs("div", { className: "kpt-roadmap__head-track", children: [timeline.hasBands && (_jsx("div", { className: "kpt-roadmap__bands", children: timeline.bands.map((band) => (_jsx(KptTooltip, { text: band.sublabel ? `${band.label} ${band.sublabel}` : band.label, onlyWhenTruncated: true, children: _jsxs("div", { className: cn('kpt-roadmap__band', band.isYearStart && 'kpt-roadmap__band--year-start'), style: { inlineSize: `${(band.ratioEnd - band.ratioStart) * 100}%` }, children: [band.yearBadge && _jsx("span", { className: "kpt-roadmap__year-badge", children: band.yearBadge }), _jsx("span", { className: "kpt-roadmap__band-label", children: band.label }), band.sublabel && !band.yearBadge && (_jsx("span", { className: "kpt-roadmap__band-sublabel", children: band.sublabel }))] }) }, band.key))) })), _jsx("div", { ref: laneRef, className: "kpt-roadmap__cells", children: timeline.cells.map((cell) => (_jsx(KptTooltip, { text: cell.title, children: _jsxs("div", { className: cn('kpt-roadmap__cell', cell.isWeekend && 'kpt-roadmap__cell--weekend', cell.isToday && showToday && 'kpt-roadmap__cell--today', cell.isYearBoundary && 'kpt-roadmap__cell--year-boundary', cell.hasGapBefore && 'kpt-roadmap__cell--gap-before'), style: { inlineSize: `${(cell.ratioEnd - cell.ratioStart) * 100}%` }, children: [_jsx("span", { className: "kpt-roadmap__cell-label", children: cell.label }), cell.sublabel && _jsx("span", { className: "kpt-roadmap__cell-sublabel", children: cell.sublabel })] }) }, cell.key))) }), showToday && timeline.todayRatio !== null && (_jsx("span", { className: "kpt-roadmap__today-dot", style: { insetInlineStart: `${timeline.todayRatio * 100}%` }, title: t('roadmap.today') }))] })] }), isEmpty ? (_jsx("div", { className: "kpt-roadmap__empty", children: t('roadmap.empty') })) : (_jsxs("div", { className: "kpt-roadmap__body", style: { blockSize: `${layout.totalHeight}px` }, children: [_jsxs("div", { className: "kpt-roadmap__grid", "aria-hidden": "true", children: [_jsx("div", { className: "kpt-roadmap__grid-cells", children: timeline.cells.map((cell) => (_jsx("div", { className: cn('kpt-roadmap__grid-cell', cell.isWeekend && 'kpt-roadmap__grid-cell--weekend', cell.isNonWorking && 'kpt-roadmap__grid-cell--non-working', cell.isYearBoundary && 'kpt-roadmap__grid-cell--year-boundary', cell.hasGapBefore && 'kpt-roadmap__grid-cell--gap-before'), style: { inlineSize: `${(cell.ratioEnd - cell.ratioStart) * 100}%` } }, cell.key))) }), showToday && timeline.todayRatio !== null && (_jsx("div", { className: "kpt-roadmap__today", style: { insetInlineStart: `${timeline.todayRatio * 100}%` } }))] }), links.length > 0 && (_jsx("svg", { className: "kpt-roadmap__links", viewBox: `0 0 ${laneWidth} ${layout.totalHeight}`, width: laneWidth, height: layout.totalHeight, "aria-hidden": "true", children: links.map((link) => (_jsxs("g", { className: cn('kpt-roadmap__link', link.isViolated && 'kpt-roadmap__link--violated'), "data-variant": link.variant, children: [_jsx("path", { className: "kpt-roadmap__link-path", d: link.path, style: { stroke: link.color } }), _jsx("path", { className: "kpt-roadmap__link-arrow", d: link.arrow, style: { fill: link.color } })] }, link.key))) })), visibleRows.map((row) => {
+                            const group = row.group;
+                            const first = row.items[0];
+                            const sum = row.kind === 'group' ? summary(row) : null;
+                            return (_jsxs("div", { className: cn('kpt-roadmap__row', row.kind === 'group' && 'kpt-roadmap__row--group'), style: { insetBlockStart: `${row.top}px`, blockSize: `${row.height}px` }, children: [_jsx(KptTooltip, { text: labelTooltip(row), onlyWhenTruncated: true, children: _jsx("div", { className: cn('kpt-roadmap__label', row.kind === 'group' && 'kpt-roadmap__label--group'), style: { paddingInlineStart: `${0.75 + row.depth * 1}rem` }, children: group ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kpt-roadmap__toggle", "aria-expanded": !isCollapsed(group), "aria-label": isCollapsed(group) ? t('roadmap.expandGroup') : t('roadmap.collapseGroup'), onClick: () => toggleGroup(group), children: _jsx("span", { className: cn('kpt-roadmap__toggle-icon', !isCollapsed(group) && 'kpt-roadmap__toggle-icon--open') }) }), _jsx(KptTooltip, { text: group.sublabel ? `${group.label} — ${group.sublabel}` : group.label, onlyWhenTruncated: true, children: _jsxs("span", { className: "kpt-roadmap__label-stack", children: [_jsx("span", { className: "kpt-roadmap__label-text kpt-roadmap__label-text--group", children: group.label }), group.sublabel && _jsx("span", { className: "kpt-roadmap__label-sub", children: group.sublabel })] }) }), row.groupState?.itemCount ? (_jsx("span", { className: "kpt-roadmap__label-count", children: row.groupState.itemCount })) : null] })) : (first && (_jsxs(_Fragment, { children: [_jsx("span", { className: "kpt-roadmap__label-text", children: first.source.label }), row.items.length === 1 && first.source.sublabel && (_jsx("span", { className: "kpt-roadmap__label-sub", children: first.source.sublabel }))] }))) }) }), _jsx("div", { className: "kpt-roadmap__lane", children: row.kind === 'group'
+                                            ? sum && (_jsx("div", { className: "kpt-roadmap__summary", "data-variant": sum.variant, style: {
+                                                    insetInlineStart: `${sum.left}%`,
+                                                    inlineSize: `${sum.width}%`,
+                                                    backgroundColor: sum.color,
+                                                } }))
+                                            : bars(row).map((bar) => bar.isMilestone ? (_jsx(KptTooltip, { text: bar.title, children: _jsx("div", { className: "kpt-roadmap__milestone", "data-variant": bar.variant, "aria-label": `${t('roadmap.milestone')}: ${bar.label}`, style: {
+                                                        insetInlineStart: `${bar.left}%`,
+                                                        insetBlockStart: `${bar.top}px`,
+                                                        inlineSize: `${bar.height}px`,
+                                                        blockSize: `${bar.height}px`,
+                                                        backgroundColor: bar.color,
+                                                    }, tabIndex: 0, onClick: () => handleItemClick(bar.item), onKeyDown: (event) => handleItemKeydown(event, bar.item) }) }, bar.item.id)) : (_jsx(KptTooltip, { text: bar.title, onlyWhenTruncated: true, children: _jsxs("div", { className: cn('kpt-roadmap__bar', bar.clippedStart && 'kpt-roadmap__bar--clipped-start', bar.clippedEnd && 'kpt-roadmap__bar--clipped-end', bar.item.source.disabled && 'kpt-roadmap__bar--disabled'), "data-variant": bar.variant, style: {
+                                                        insetInlineStart: `${bar.left}%`,
+                                                        inlineSize: `${bar.width}%`,
+                                                        insetBlockStart: `${bar.top}px`,
+                                                        blockSize: `${bar.height}px`,
+                                                        backgroundColor: bar.color,
+                                                    }, tabIndex: 0, onClick: () => handleItemClick(bar.item), onKeyDown: (event) => handleItemKeydown(event, bar.item), children: [bar.progress !== null && (_jsx("span", { className: "kpt-roadmap__bar-progress", style: { inlineSize: `${bar.progress * 100}%` } })), _jsx("span", { className: "kpt-roadmap__bar-label", children: bar.label })] }) }, bar.item.id))) })] }, row.key));
+                        })] }))] }) }));
+}
+function isDevBuild() {
+    return typeof process !== 'undefined' && process?.env?.['NODE_ENV'] !== 'production';
+}
+/** Identyfikatory grup zwiniętych deklaratywnie w danych. */
+function declaredCollapsed(groups) {
+    return (groups ?? []).filter((group) => group.collapsed).map((group) => group.id);
+}

package/dist/roadmap-entry/public-api.d.ts

@@ -0,0 +1,4 @@
+export { KptRoadmap } from '../roadmap/roadmap.tsx';
+export type { KptRoadmapProps } from '../roadmap/roadmap.tsx';
+export type { KptRoadmapConfig, KptRoadmapItem, KptRoadmapGroup, KptRoadmapLink, KptRoadmapLinkType, KptRoadmapZoom, KptRoadmapVariant, KptRoadmapChange, KptRoadmapChangeKind, KptRoadmapConstraints, KptRoadmapNormalizedItem, KptRoadmapPositionMode, KptRoadmapRowMode, KptRoadmapRowOptions, KptRoadmapSummaryMode, KptRoadmapDependencyOptions, KptRoadmapInteractionOptions, KptTimelineOptions, KptTimeRange, KptWorkHours, KptDateInput, KptTimelineCell, KptTimelineBand, KptTimelineModel, KptSpanGeom, KptRoadmapRow, KptRoadmapRowKind, KptRoadmapLayout, KptRoadmapGroupState, KptRoadmapPlacedItem, KptLinkGeom, KptLinkEndpoint, } from '@konce-pt/roadmap';
+export { buildTimeline, buildRows, normalizeItems, packLanes, sliceRows, spanOf, rollupProgress, resolveLinks, linkGeometry, roundedPolyline, arrowHead, autoRange, resolveRange, isoWeekNumber, isoWeekYear, isoWeekday, isoWeeksInYear, startOfIsoWeek, startOfDay, addDays, addHours, addMonths, addUnits, floorToUnit, ceilToUnit, countUnits, diffDays, daysInMonth, isSameDay, toTimestamp, } from '@konce-pt/roadmap';

package/dist/roadmap-entry/public-api.js

@@ -0,0 +1,7 @@
+/*
+ * @konce-pt/react/roadmap — oś czasu typu Gantt. Osobny subpath, bo geometria, style i dane
+ * roadmapy są ciężkie względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
+ */
+export { KptRoadmap } from "../roadmap/roadmap.js";
+// Rdzeń obliczeniowy (pure TS) — przydatny do własnych rozszerzeń, SSR i testów.
+export { buildTimeline, buildRows, normalizeItems, packLanes, sliceRows, spanOf, rollupProgress, resolveLinks, linkGeometry, roundedPolyline, arrowHead, autoRange, resolveRange, isoWeekNumber, isoWeekYear, isoWeekday, isoWeeksInYear, startOfIsoWeek, startOfDay, addDays, addHours, addMonths, addUnits, floorToUnit, ceilToUnit, countUnits, diffDays, daysInMonth, isSameDay, toTimestamp, } from '@konce-pt/roadmap';

package/dist/scroll-top/scroll-top.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptScrollTopProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
+    /** Po ilu pikselach przewinięcia przycisk się pojawia. */
+    threshold?: number;
+    /** Selektor przewijanego elementu; bez niego nasłuchujemy okna. */
+    target?: string | null;
+}
+/**
+ * Przycisk „do góry" — pojawia się po przewinięciu ponad `threshold` px.
+ *
+ * @example
+ * <KptScrollTop threshold={300} />
+ * <KptScrollTop target="#panel" />
+ */
+export declare function KptScrollTop({ threshold, target, locale, dictionary, className, ...rest }: Readonly<KptScrollTopProps>): import("react").JSX.Element;

package/dist/scroll-top/scroll-top.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Przycisk „do góry" — pojawia się po przewinięciu ponad `threshold` px.
+ *
+ * @example
+ * <KptScrollTop threshold={300} />
+ * <KptScrollTop target="#panel" />
+ */
+export function KptScrollTop({ threshold = 300, target = null, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        // Element wyszukujemy w efekcie, a nie przy renderze: przewijany kontener bywa montowany
+        // po nas, a na serwerze nie ma go w ogóle.
+        const scroller = target
+            ? (document.querySelector(target) ?? window)
+            : window;
+        const top = () => (scroller === window ? window.scrollY : scroller.scrollTop);
+        const onScroll = () => setVisible(top() > threshold);
+        scroller.addEventListener('scroll', onScroll, { passive: true });
+        onScroll(); // strona może być już przewinięta, np. po wejściu z kotwicy
+        return () => scroller.removeEventListener('scroll', onScroll);
+    }, [target, threshold]);
+    const scrollUp = () => {
+        const scroller = target
+            ? (document.querySelector(target) ?? window)
+            : window;
+        scroller.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    return (_jsx("div", { className: cn('kpt-scroll-top-host', className), ...rest, children: _jsx("button", { type: "button", className: cn('kpt-scroll-top', visible && 'is-visible'), 
+            // Ukryty przycisk zostaje w DOM (animacja pojawiania), więc z kolejności Tab wyjmuje go
+            // `tabindex`, a nie warunkowy render.
+            tabIndex: visible ? 0 : -1, "aria-label": t('scrollTop.label'), onClick: scrollUp, children: _jsx(KptIcon, { name: "arrow-up" }) }) }));
+}

package/dist/select/select.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptOption } from '../shared/types.ts';
+export interface KptSelectProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    options?: KptOption<T>[];
+    placeholder?: string;
+    /** Wybór wielokrotny — wartością jest tablica, a wybrane opcje pokazują się jako chipy. */
+    multiple?: boolean;
+    /** Pole wyszukiwania nad listą. */
+    filter?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    /** Wartość: pojedyncza (T) albo tablica (T[]) w trybie `multiple`. */
+    value?: T | T[] | null;
+    defaultValue?: T | T[] | null;
+    onValueChange?: (value: T | T[] | null) => void;
+    /** Stan panelu — pozwala otworzyć listę z zewnątrz i wiedzieć, kiedy user skończył wybierać. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Wywoływane, gdy panel się zamyka albo trigger traci fokus. */
+    onTouch?: () => void;
+}
+/**
+ * Lista wyboru (select) na własnym panelu. Warianty: pojedynczy, z wyszukiwarką (`filter`)
+ * i wielokrotny (`multiple`, chipy).
+ *
+ * Wewnątrz `KptFormField` zgłasza wypełnienie hookiem `useKptFormFieldFilled`, więc etykieta
+ * Float Label unosi się nad wybraną wartością — natywnego pola, z którego wrapper mógłby to
+ * odczytać, tu nie ma.
+ *
+ * @example
+ * <KptSelect options={roles} value={role} onValueChange={setRole} placeholder="Wybierz…" />
+ * <KptSelect options={tags} multiple filter value={tags} onValueChange={setTags} />
+ */
+export declare function KptSelect<T>({ options, placeholder, multiple, filter, disabled, invalid, touched, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, onTouch, locale, dictionary, className, onBlur, ...rest }: Readonly<KptSelectProps<T>>): import("react").JSX.Element;

package/dist/select/select.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } 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 { useKptFormFieldFilled } from "../form-field/form-field-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Lista wyboru (select) na własnym panelu. Warianty: pojedynczy, z wyszukiwarką (`filter`)
+ * i wielokrotny (`multiple`, chipy).
+ *
+ * Wewnątrz `KptFormField` zgłasza wypełnienie hookiem `useKptFormFieldFilled`, więc etykieta
+ * Float Label unosi się nad wybraną wartością — natywnego pola, z którego wrapper mógłby to
+ * odczytać, tu nie ma.
+ *
+ * @example
+ * <KptSelect options={roles} value={role} onValueChange={setRole} placeholder="Wybierz…" />
+ * <KptSelect options={tags} multiple filter value={tags} onValueChange={setTags} />
+ */
+export function KptSelect({ options = [], placeholder = '', multiple = false, filter = false, disabled = false, invalid = false, touched, value, defaultValue = null, onValueChange, open, defaultOpen = false, onOpenChange, onTouch, locale, dictionary, className, onBlur, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const triggerRef = useRef(null);
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const [filterText, setFilterText] = useState('');
+    const [activeIndex, setActiveIndex] = useState(-1);
+    // Panel może zostać otwarty także z zewnątrz (`open`), nie tylko klikiem w trigger —
+    // filtr i aktywną pozycję resetujemy więc przy każdym otwarciu, nie przy przełączaniu.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setFilterText('');
+        setActiveIndex(-1);
+    }, [isOpen]);
+    const showInvalid = invalid && (touched ?? true);
+    const selectedValues = useMemo(() => {
+        if (multiple)
+            return Array.isArray(current) ? current : [];
+        return current == null ? [] : [current];
+    }, [current, multiple]);
+    const selectedOptions = useMemo(() => options.filter((option) => selectedValues.includes(option.value)), [options, selectedValues]);
+    const filteredOptions = useMemo(() => {
+        const q = filterText.trim().toLowerCase();
+        return q ? options.filter((option) => option.label.toLowerCase().includes(q)) : options;
+    }, [options, filterText]);
+    const filled = selectedOptions.length > 0;
+    useKptFormFieldFilled(filled);
+    const isSelected = (option) => selectedValues.includes(option.value);
+    const close = useCallback(() => {
+        if (!isOpen)
+            return;
+        setOpen(false);
+        onTouch?.();
+    }, [isOpen, setOpen, onTouch]);
+    const pick = (option) => {
+        if (option.disabled)
+            return;
+        if (multiple) {
+            setCurrent(isSelected(option) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value]);
+        }
+        else {
+            setCurrent(option.value);
+            close();
+        }
+    };
+    const onTriggerKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (!isOpen)
+                setOpen(true);
+        }
+        else if (event.key === 'Escape') {
+            close();
+        }
+    };
+    const onPanelKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveIndex((index) => Math.min(index + 1, filteredOptions.length - 1));
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveIndex((index) => Math.max(index - 1, 0));
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const option = filteredOptions[activeIndex];
+            if (option)
+                pick(option);
+        }
+    };
+    return (_jsxs("span", { className: "kpt-select-host", children: [_jsxs("div", { ref: triggerRef, className: cn('kpt-select', isOpen && 'kpt-select--open', disabled && 'kpt-select--disabled', showInvalid && 'kpt-select--invalid', className), role: "combobox", tabIndex: 0, "aria-expanded": isOpen, "aria-disabled": disabled || undefined, onClick: () => !disabled && setOpen(!isOpen), onKeyDown: onTriggerKeyDown, onBlur: (event) => {
+                    onBlur?.(event);
+                    onTouch?.();
+                }, ...rest, children: [_jsx("div", { className: "kpt-select__value", children: multiple && selectedOptions.length ? (selectedOptions.map((option) => (_jsxs("span", { className: "kpt-select__chip", children: [option.label, _jsx("button", { type: "button", className: "kpt-select__chip-remove", "aria-label": t('select.removeChip'), onClick: (event) => {
+                                        event.stopPropagation();
+                                        setCurrent(selectedValues.filter((v) => v !== option.value));
+                                    }, children: _jsx(KptIcon, { name: "x" }) })] }, String(option.value))))) : !multiple && filled ? (_jsx("span", { className: "kpt-select__single", children: selectedOptions[0]?.label })) : (_jsx("span", { className: "kpt-select__placeholder", children: placeholder })) }), _jsx(KptIcon, { className: "kpt-select__chevron", name: "chevron-down" })] }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, matchAnchorWidth: true, children: _jsxs("div", { className: "kpt-select__panel", onKeyDown: onPanelKeyDown, children: [filter ? (_jsxs("div", { className: "kpt-select__search", children: [_jsx(KptIcon, { name: "search" }), _jsx("input", { type: "text", className: "kpt-select__search-input", value: filterText, placeholder: t('select.search'), autoFocus: true, onChange: (event) => {
+                                        setFilterText(event.target.value);
+                                        setActiveIndex(-1);
+                                    } })] })) : null, _jsx("ul", { className: "kpt-select__list", role: "listbox", "aria-multiselectable": multiple, children: filteredOptions.length ? (filteredOptions.map((option, index) => (_jsxs("li", { className: cn('kpt-select__option', isSelected(option) && 'kpt-select__option--selected', index === activeIndex && 'kpt-select__option--active', option.disabled && 'kpt-select__option--disabled'), role: "option", "aria-selected": isSelected(option), onClick: () => pick(option), onMouseEnter: () => setActiveIndex(index), children: [multiple ? (_jsx("span", { className: cn('kpt-select__check', isSelected(option) && 'is-on'), children: _jsx(KptIcon, { name: "check" }) })) : null, _jsx("span", { className: "kpt-select__option-label", children: option.label }), !multiple && isSelected(option) ? (_jsx(KptIcon, { className: "kpt-select__option-tick", name: "check" })) : null] }, String(option.value))))) : (_jsx("li", { className: "kpt-select__empty", children: t('select.noResults') })) })] }) })] }));
+}

package/dist/shared/types.d.ts

@@ -0,0 +1,8 @@
+/** Opcja wyboru dla kontrolek typu select / radio-group / button-group. */
+export interface KptOption<T = unknown> {
+    label: string;
+    value: T;
+    disabled?: boolean;
+}
+/** Wariant komunikatu — wspólny dla alertu i toastów. */
+export type KptAlertVariant = 'info' | 'success' | 'warning' | 'danger';

package/dist/shared/types.js

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

package/dist/sidenav/sidenav.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface KptSidenavProps extends ComponentPropsWithRef<'div'> {
+}
+/**
+ * Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle podawany do slotu
+ * `sidenav` komponentu `<KptAppShell>`.
+ *
+ * @example
+ * <KptSidenav>
+ *   <a href="#">Pulpit</a>
+ *   <a href="#">Ustawienia</a>
+ *   <KptSidenav.Footer>wersja 0.7.12</KptSidenav.Footer>
+ * </KptSidenav>
+ */
+export declare function KptSidenav({ className, children, ...rest }: Readonly<KptSidenavProps>): import("react").JSX.Element;
+export declare namespace KptSidenav {
+    var Footer: typeof KptSidenavFooter;
+}
+/**
+ * Stopka panelu, przyklejona do dołu poza obszarem przewijania (blok użytkownika, wersja
+ * aplikacji, przełącznik motywu). Nosi atrybut `kptsidenavfooter`, w który celuje wspólny SCSS.
+ */
+export declare function KptSidenavFooter({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+export declare namespace KptSidenavFooter {
+    var kptSidenavSlot: "footer";
+}

package/dist/sidenav/sidenav.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { cn } from "../internal/cn.js";
+/*
+ * Panel odtwarza projekcję z Angulara: treść domyślna ląduje w obszarze przewijanym,
+ * a `<KptSidenav.Footer>` jest wynoszona POZA ten obszar. Dzięki temu stopka zostaje
+ * przyklejona do dołu panelu niezależnie od długości nawigacji.
+ */
+/**
+ * Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle podawany do slotu
+ * `sidenav` komponentu `<KptAppShell>`.
+ *
+ * @example
+ * <KptSidenav>
+ *   <a href="#">Pulpit</a>
+ *   <a href="#">Ustawienia</a>
+ *   <KptSidenav.Footer>wersja 0.7.12</KptSidenav.Footer>
+ * </KptSidenav>
+ */
+export function KptSidenav({ className, children, ...rest }) {
+    const scroll = [];
+    const footers = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type?.kptSidenavSlot === 'footer') {
+            footers.push(child);
+        }
+        else {
+            scroll.push(child);
+        }
+    });
+    return (_jsxs("div", { className: cn('kpt-sidenav', className), ...rest, children: [_jsx("div", { className: "kpt-sidenav__scroll", children: scroll }), footers] }));
+}
+/**
+ * Stopka panelu, przyklejona do dołu poza obszarem przewijania (blok użytkownika, wersja
+ * aplikacji, przełącznik motywu). Nosi atrybut `kptsidenavfooter`, w który celuje wspólny SCSS.
+ */
+export function KptSidenavFooter({ className, ...rest }) {
+    return _jsx("div", { kptsidenavfooter: '', className: className, ...rest });
+}
+KptSidenavFooter.kptSidenavSlot = 'footer';
+KptSidenav.Footer = KptSidenavFooter;

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef } from 'react';
+export type KptSkeletonVariant = 'text' | 'circle' | 'rect';
+export interface KptSkeletonProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+    variant?: KptSkeletonVariant;
+    width?: string;
+    height?: string;
+    /** Liczba linii w wariancie `text`. */
+    lines?: number;
+}
+/**
+ * Placeholder ładowania z animacją shimmer.
+ *
+ * Wariant `text` skraca ostatnią linię do 60% — pełny prostokąt nie wygląda jak akapit, a to
+ * właśnie akapit ma udawać.
+ *
+ * @example
+ * <KptSkeleton variant="text" lines={3} />
+ * <KptSkeleton variant="circle" width="3rem" height="3rem" />
+ */
+export declare function KptSkeleton({ variant, width, height, lines, className, ...rest }: Readonly<KptSkeletonProps>): import("react").JSX.Element;

package/dist/skeleton/skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Placeholder ładowania z animacją shimmer.
+ *
+ * Wariant `text` skraca ostatnią linię do 60% — pełny prostokąt nie wygląda jak akapit, a to
+ * właśnie akapit ma udawać.
+ *
+ * @example
+ * <KptSkeleton variant="text" lines={3} />
+ * <KptSkeleton variant="circle" width="3rem" height="3rem" />
+ */
+export function KptSkeleton({ variant = 'rect', width = '100%', height = '1rem', lines = 3, className, ...rest }) {
+    return (_jsx("span", { className: cn('kpt-skeleton-host', className), "aria-hidden": "true", ...rest, children: variant === 'text' ? (Array.from({ length: lines }, (_, index) => (_jsx("span", { className: "kpt-skeleton kpt-skeleton--text", style: { width: index === lines - 1 ? '60%' : width } }, index)))) : (_jsx("span", { className: "kpt-skeleton", "data-variant": variant, style: { width, height } })) }));
+}