@konce-pt/react 0.8.0

package/dist/map/ports.js

@@ -0,0 +1,174 @@
+import { isFittableBounds } from '@konce-pt/map';
+/** Geolokalizacja przeglądarki. Brak zgody czy brak API nie wywraca komponentu. */
+export function browserGeolocation(options) {
+    return {
+        watch(onPosition, onError) {
+            if (typeof navigator === 'undefined' || !navigator.geolocation) {
+                onError({ kind: 'unsupported', message: 'Geolocation is not available in this browser.' });
+                return () => { };
+            }
+            const id = navigator.geolocation.watchPosition((position) => onPosition({
+                at: { lat: position.coords.latitude, lng: position.coords.longitude },
+                accuracy: position.coords.accuracy,
+                timestamp: position.timestamp,
+            }), (error) => {
+                onPosition(null);
+                onError({ kind: kindOf(error), message: error.message });
+            }, { enableHighAccuracy: true, maximumAge: 10_000, timeout: 15_000, ...options });
+            return () => navigator.geolocation.clearWatch(id);
+        },
+    };
+}
+function kindOf(error) {
+    if (error.code === error.PERMISSION_DENIED)
+        return 'denied';
+    if (error.code === error.POSITION_UNAVAILABLE)
+        return 'unavailable';
+    return 'timeout';
+}
+/** Stała pozycja — do dem, testów i SSR, gdzie prawdziwej geolokalizacji nie ma. */
+export function geolocationStub(at, accuracy = 30) {
+    return {
+        watch(onPosition) {
+            onPosition({ at, accuracy, timestamp: Date.now() });
+            return () => { };
+        },
+    };
+}
+/** Publiczna instancja OSM. Ma twardą politykę użycia: jedno zapytanie na sekundę. */
+const NOMINATIM_URL = 'https://nominatim.openstreetmap.org';
+const NOMINATIM_MIN_INTERVAL_MS = 1000;
+/**
+ * Adapter Nominatim (OpenStreetMap): geokodowanie wsteczne i podpowiedzi adresowe.
+ *
+ * Kolejkuje zapytania z odstępem sekundy, bo tego wymaga regulamin publicznej instancji.
+ * Odstęp liczony od zegara, a nie stałym opóźnieniem przed każdym zapytaniem — inaczej
+ * pierwsza podpowiedź po minucie bezczynności też płaciłaby sekundę.
+ *
+ * **Nie rejestruj publicznej instancji w produkcji bez przeczytania jej polityki użycia.**
+ */
+export function createNominatimGeocoder(options = {}) {
+    const baseUrl = options.baseUrl ?? NOMINATIM_URL;
+    const minInterval = options.minIntervalMs ?? (options.baseUrl ? 0 : NOMINATIM_MIN_INTERVAL_MS);
+    /** Ogon kolejki — każde kolejne zapytanie czeka na swoją kolej. */
+    let next = Promise.resolve();
+    let lastAt = 0;
+    const slot = () => {
+        if (minInterval <= 0)
+            return Promise.resolve();
+        const mine = next.then(async () => {
+            const wait = lastAt + minInterval - Date.now();
+            if (wait > 0)
+                await new Promise((resolve) => setTimeout(resolve, wait));
+            lastAt = Date.now();
+        });
+        next = mine;
+        return mine;
+    };
+    const language = (override) => override ?? options.language ?? (typeof navigator === 'undefined' ? 'en' : navigator.language);
+    return {
+        async reverse(at, opts) {
+            if (typeof fetch === 'undefined')
+                return null;
+            await slot();
+            if (opts?.signal?.aborted)
+                return null;
+            const url = new URL('/reverse', baseUrl);
+            url.searchParams.set('format', 'jsonv2');
+            url.searchParams.set('lat', String(at.lat));
+            url.searchParams.set('lon', String(at.lng));
+            url.searchParams.set('zoom', String(options.zoom ?? 18));
+            url.searchParams.set('addressdetails', '1');
+            try {
+                const response = await fetch(url, {
+                    signal: opts?.signal ?? null,
+                    headers: { 'Accept-Language': language(opts?.language) },
+                });
+                if (!response.ok)
+                    return null;
+                return toAddress((await response.json()));
+            }
+            catch {
+                // Brak adresu to nie awaria formularza — pole zostaje puste.
+                return null;
+            }
+        },
+        async search(query, opts) {
+            if (typeof fetch === 'undefined' || !query.trim())
+                return [];
+            await slot();
+            if (opts?.signal?.aborted)
+                return [];
+            const url = new URL('/search', baseUrl);
+            url.searchParams.set('format', 'jsonv2');
+            url.searchParams.set('q', query);
+            url.searchParams.set('addressdetails', '1');
+            url.searchParams.set('limit', String(opts?.limit ?? 5));
+            if (opts?.viewbox) {
+                const { west, south, east, north } = opts.viewbox;
+                url.searchParams.set('viewbox', `${west},${south},${east},${north}`);
+            }
+            if (opts?.countryCodes?.length) {
+                url.searchParams.set('countrycodes', opts.countryCodes.join(',').toLowerCase());
+            }
+            try {
+                const response = await fetch(url, {
+                    signal: opts?.signal ?? null,
+                    headers: { 'Accept-Language': language(opts?.language) },
+                });
+                if (!response.ok)
+                    return [];
+                const places = (await response.json());
+                return places.map(toSuggestion);
+            }
+            catch {
+                return [];
+            }
+        },
+    };
+}
+/** Port bez sieci: stała lista podpowiedzi i stały adres. Do dem i testów. */
+export function createGeocoderStub(options = {}) {
+    return {
+        reverse: async () => options.address ?? null,
+        search: async (query) => {
+            const needle = query.trim().toLowerCase();
+            const all = options.suggestions ?? [];
+            return needle ? all.filter((s) => s.label.toLowerCase().includes(needle)) : all;
+        },
+    };
+}
+function toAddress(place) {
+    const address = place.address;
+    if (!address)
+        return null;
+    const street = address.road ?? '';
+    const houseNumber = address.house_number ?? '';
+    return {
+        street,
+        houseNumber,
+        // Jedno pole „Adres" — ulica z numerem, bo tak wypełnia się formularz.
+        address: [street, houseNumber].filter(Boolean).join(' '),
+        city: address.city ?? address.town ?? address.village ?? address.municipality ?? address.hamlet ?? '',
+        postcode: address.postcode ?? '',
+        state: address.state ?? '',
+        county: address.county ?? '',
+        country: address.country ?? '',
+        countryCode: (address.country_code ?? '').toUpperCase(),
+    };
+}
+function toSuggestion(place) {
+    const at = { lat: Number(place.lat ?? 0), lng: Number(place.lon ?? 0) };
+    const box = place.boundingbox;
+    const bounds = box
+        ? { south: Number(box[0]), north: Number(box[1]), west: Number(box[2]), east: Number(box[3]) }
+        : undefined;
+    return {
+        id: String(place.place_id ?? place.display_name ?? at.lat + ':' + at.lng),
+        label: place.display_name ?? '',
+        at,
+        // Punktowy „prostokąt" pojedynczego budynku nie nadaje się do wpasowania w kadr.
+        bounds: bounds && isFittableBounds(bounds) ? bounds : undefined,
+        address: toAddress(place) ?? undefined,
+    };
+}

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

@@ -0,0 +1,20 @@
+export { KptMap } from '../map/map.tsx';
+export type { KptMapProps, KptMapPopupContext, KptMapCreateFormApi } from '../map/map.tsx';
+export { KptMapLegend } from '../map/map-legend.tsx';
+export type { KptMapLegendProps } from '../map/map-legend.tsx';
+export { KptMapSearch } from '../map/map-search.tsx';
+export type { KptMapSearchProps } from '../map/map-search.tsx';
+export { KptMapPoiCard } from '../map/map-poi-card.tsx';
+export type { KptMapPoiCardProps } from '../map/map-poi-card.tsx';
+export { KptMapCreateDialog } from '../map/map-create-dialog.tsx';
+export type { KptMapCreateDialogProps } from '../map/map-create-dialog.tsx';
+export { KptMapHoursField } from '../map/map-hours-field.tsx';
+export type { KptMapHoursFieldProps } from '../map/map-hours-field.tsx';
+export { KptMapImageField } from '../map/map-image-field.tsx';
+export type { KptMapImageFieldProps } from '../map/map-image-field.tsx';
+export { browserGeolocation, geolocationStub, createNominatimGeocoder, createGeocoderStub } from '../map/ports.ts';
+export type { KptMapGeocoderPort, KptMapGeolocationPort, KptMapSearchOptions, KptNominatimOptions, } from '../map/ports.ts';
+export { createLeafletEngine, createGoogleEngine, loadGoogleMapsApi } from '@konce-pt/map';
+export type { KptLeafletOptions, KptGoogleOptions, KptGoogleLoadOptions, KptGoogleMapsApi, } from '@konce-pt/map';
+export type { KptLatLng, KptMapBounds, KptMapPoint, KptMapColor, KptMapColorRole, KptMapMarkerShape, KptMapCategory, KptMapLocation, KptMapCluster, KptMapClusterEntry, KptMapFieldDef, KptMapFieldOption, KptMapFieldType, KptMapUserPosition, KptMapGeolocationError, KptMapGeolocationErrorKind, KptMapCreateEvent, KptMapSuggestion, KptMapSearchResult, KptMapView, KptMapAddress, KptMapAddressPart, KptMapWeekday, KptMapHoursRange, KptMapDayHours, KptMapOpeningHours, KptMapPoi, KptMapPoiFact, KptMapEngine, KptMapEngineFactory, KptMapEngineInit, KptMapEngineEvents, KptMapEngineKind, KptMapPointerEvent, KptMapRenderedMarker, KptClusterOptions, KptMapCountryPreset, KptMapHoursGroup, } from '@konce-pt/map';
+export { isCluster, clusterLocations, dominantCategory, countByCategory, isSplittable, KPT_CLUSTER_DEFAULTS, KPT_MAP_COUNTRIES, KPT_MAP_DEFAULT_COUNTRY, countryPreset, countryCodes, resolveCountryView, centerOfBounds, project, unproject, boundsOf, boundsCenter, isFittableBounds, KPT_MIN_FIT_SPAN, boundsContain, padBounds, haversine, metersPerPixel, zoomForBounds, clampLat, normalizeLng, worldSize, KPT_TILE_SIZE, KPT_MAX_LATITUDE, KPT_EARTH_RADIUS, renderMarkerHtml, renderClusterHtml, renderUserMarkerHtml, colorVarOf, contrastVarOf, foregroundVarOf, clusterTier, KPT_MAP_DEFAULT_TILE_URL, KPT_MAP_DEFAULT_ATTRIBUTION, parseTime, formatTime, isoWeekday, isOpenAt, isAlwaysOpen, nextChange, weekdayName, groupWeek, emptyWeek, formatDistance, formatLatLng, } from '@konce-pt/map';

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

@@ -0,0 +1,19 @@
+/*
+ * @konce-pt/react/map — mapa z konfigurowalnymi znacznikami. Osobny subpath, bo silnik mapowy
+ * i style mapy są ciężkie względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
+ *
+ * Silnik Leaflet wymaga zainstalowanej paczki `leaflet` (peer opcjonalny) i arkusza
+ * `leaflet/dist/leaflet.css` po stronie aplikacji.
+ */
+export { KptMap } from "../map/map.js";
+export { KptMapLegend } from "../map/map-legend.js";
+export { KptMapSearch } from "../map/map-search.js";
+export { KptMapPoiCard } from "../map/map-poi-card.js";
+export { KptMapCreateDialog } from "../map/map-create-dialog.js";
+export { KptMapHoursField } from "../map/map-hours-field.js";
+export { KptMapImageField } from "../map/map-image-field.js";
+// Porty: geokoder i geolokalizacja. W Reakcie podaje się je propem, nie przez DI.
+export { browserGeolocation, geolocationStub, createNominatimGeocoder, createGeocoderStub } from "../map/ports.js";
+// Silniki i rdzeń (pure TS) — wspólne z portem Angulara.
+export { createLeafletEngine, createGoogleEngine, loadGoogleMapsApi } from '@konce-pt/map';
+export { isCluster, clusterLocations, dominantCategory, countByCategory, isSplittable, KPT_CLUSTER_DEFAULTS, KPT_MAP_COUNTRIES, KPT_MAP_DEFAULT_COUNTRY, countryPreset, countryCodes, resolveCountryView, centerOfBounds, project, unproject, boundsOf, boundsCenter, isFittableBounds, KPT_MIN_FIT_SPAN, boundsContain, padBounds, haversine, metersPerPixel, zoomForBounds, clampLat, normalizeLng, worldSize, KPT_TILE_SIZE, KPT_MAX_LATITUDE, KPT_EARTH_RADIUS, renderMarkerHtml, renderClusterHtml, renderUserMarkerHtml, colorVarOf, contrastVarOf, foregroundVarOf, clusterTier, KPT_MAP_DEFAULT_TILE_URL, KPT_MAP_DEFAULT_ATTRIBUTION, parseTime, formatTime, isoWeekday, isOpenAt, isAlwaysOpen, nextChange, weekdayName, groupWeek, emptyWeek, formatDistance, formatLatLng, } from '@konce-pt/map';

package/dist/megamenu/megamenu.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { KptMenuItem } from '../menu/menu-item.ts';
+export interface KptMegamenuProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
+    items?: KptMenuItem<T>[];
+    onSelect?: (item: KptMenuItem<T>) => void;
+}
+/**
+ * Mega-menu — pozioma belka z szerokim, wielokolumnowym panelem.
+ * Struktura: pozycja górna → `items` (kolumny) → `items` kolumny (odnośniki).
+ *
+ * Panel kotwiczy się do CAŁEJ belki, nie do pojedynczego przycisku: jest szeroki, więc ma
+ * zaczynać się przy krawędzi menu, a nie przy przypadkowej pozycji, w którą kliknięto.
+ *
+ * @example
+ * <KptMegamenu items={items} onSelect={onSelect} />
+ */
+export declare function KptMegamenu<T>({ items, onSelect, className, ...rest }: Readonly<KptMegamenuProps<T>>): import("react").JSX.Element;

package/dist/megamenu/megamenu.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Mega-menu — pozioma belka z szerokim, wielokolumnowym panelem.
+ * Struktura: pozycja górna → `items` (kolumny) → `items` kolumny (odnośniki).
+ *
+ * Panel kotwiczy się do CAŁEJ belki, nie do pojedynczego przycisku: jest szeroki, więc ma
+ * zaczynać się przy krawędzi menu, a nie przy przypadkowej pozycji, w którą kliknięto.
+ *
+ * @example
+ * <KptMegamenu items={items} onSelect={onSelect} />
+ */
+export function KptMegamenu({ items = [], onSelect, className, ...rest }) {
+    const navRef = useRef(null);
+    const [openIndex, setOpenIndex] = useState(null);
+    const closeAll = () => setOpenIndex(null);
+    const columns = openIndex === null ? [] : (items[openIndex]?.items ?? []);
+    const pick = (link) => {
+        if (link.disabled)
+            return;
+        onSelect?.(link);
+        closeAll();
+    };
+    return (_jsxs("div", { className: cn('kpt-megamenu-host', className), ...rest, children: [_jsx("nav", { className: "kpt-megamenu", role: "menubar", ref: navRef, children: items.map((item, index) => (_jsxs("button", { type: "button", className: cn('kpt-megamenu__top', openIndex === index && 'is-open'), role: "menuitem", onClick: () => setOpenIndex((current) => (current === index ? null : index)), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), _jsx(KptIcon, { name: "chevron-down", className: "kpt-megamenu__caret" })] }, index))) }), _jsx(KptOverlay, { open: openIndex !== null, anchor: navRef.current, onClose: closeAll, children: _jsx("div", { className: "kpt-megamenu__panel", role: "menu", children: columns.map((column, columnIndex) => (_jsxs("div", { className: "kpt-megamenu__column", children: [column.label ? _jsx("div", { className: "kpt-megamenu__col-title", children: column.label }) : null, (column.items ?? []).map((link, linkIndex) => (_jsxs("button", { type: "button", className: "kpt-megamenu__link", disabled: link.disabled, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)))] }, columnIndex))) }) })] }));
+}

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

@@ -0,0 +1,33 @@
+import type { KptBadgeVariant } from '../badge/badge.tsx';
+/** Awatar wiersza nagłówkowego — te same dane, które przyjmuje `KptAvatar`. */
+export interface KptMenuItemAvatar {
+    src?: string;
+    name?: string;
+    icon?: string;
+}
+/** Pozycja menu — wspólny kształt dla `KptMenu` i `KptContextMenu`. */
+export interface KptMenuItem<T = unknown> {
+    label?: string;
+    value?: T;
+    icon?: string;
+    /** Druga linia tekstu: e-mail, rola, opis akcji. */
+    description?: string;
+    /** Odznaka po prawej stronie pozycji (licznik lub krótka etykieta). */
+    badge?: string | number;
+    /** Wariant odznaki — domyślnie `primary`. */
+    badgeVariant?: KptBadgeVariant;
+    /** Awatar po lewej — typowo w wierszu nagłówka menu użytkownika. */
+    avatar?: KptMenuItemAvatar;
+    /**
+     * Wiersz nagłówkowy: nieklikalny blok tekstu zamiast pozycji menu. Mieści dane zalogowanego
+     * użytkownika (`avatar` + `label` + `description`) albo opis funkcji menu.
+     */
+    header?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+    /** Pozycje podrzędne (menubar / megamenu). */
+    items?: KptMenuItem<T>[];
+    /** Adres odnośnika (menubar / megamenu). */
+    url?: string;
+}

package/dist/menu/menu-item.js

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

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { KptMenuItem } from './menu-item.ts';
+export interface MenuRowsProps<T> {
+    items: KptMenuItem<T>[];
+    /** Prefiks bloku BEM: `kpt-menu` albo `kpt-context-menu`. */
+    block: string;
+    onPick: (item: KptMenuItem<T>) => void;
+}
+export declare function MenuRows<T>({ items, block, onPick }: Readonly<MenuRowsProps<T>>): ReactNode;

package/dist/menu/menu-rows.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KptAvatar } from "../avatar/avatar.js";
+import { KptBadge } from "../badge/badge.js";
+import { KptIcon } from "../icon/icon.js";
+export function MenuRows({ items, block, onPick }) {
+    return items.map((item, index) => {
+        if (item.separator) {
+            return _jsx("div", { className: `${block}__separator`, role: "separator" }, index);
+        }
+        if (item.header) {
+            return (_jsxs("div", { className: `${block}__header`, role: "presentation", children: [item.avatar ? (_jsx(KptAvatar, { src: item.avatar.src ?? null, name: item.avatar.name ?? '', icon: item.avatar.icon ?? null, size: "sm" })) : item.icon ? (_jsx(KptIcon, { name: item.icon })) : null, _jsxs("span", { className: `${block}__text`, children: [item.label ? _jsx("span", { className: `${block}__label`, children: item.label }) : null, item.description ? _jsx("span", { className: `${block}__description`, children: item.description }) : null] })] }, index));
+        }
+        return (_jsxs("button", { type: "button", className: `${block}__item${item.danger ? ` ${block}__item--danger` : ''}`, role: "menuitem", disabled: item.disabled, onClick: () => onPick(item), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsxs("span", { className: `${block}__text`, children: [_jsx("span", { className: `${block}__label`, children: item.label }), item.description ? _jsx("span", { className: `${block}__description`, children: item.description }) : null] }), item.badge !== undefined && item.badge !== null ? (_jsx(KptBadge, { className: `${block}__badge`, value: item.badge, variant: item.badgeVariant ?? 'primary' })) : null] }, index));
+    });
+}

package/dist/menu/menu.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { KptMenuItem } from './menu-item.ts';
+export interface KptMenuProps<T> extends Omit<ComponentPropsWithRef<'span'>, 'onSelect'> {
+    items?: KptMenuItem<T>[];
+    /** Element otwierający menu — renderowany w miejscu komponentu. */
+    trigger: ReactNode;
+    /** Wybrana pozycja; pozycje `header`, `separator` i wyłączone nigdy tu nie trafiają. */
+    onSelect?: (item: KptMenuItem<T>) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Menu rozwijane (dropdown). Pozycje przez `items`, wyzwalacz przez prop `trigger`.
+ *
+ * Panel renderuje się w portalu (`KptOverlay`), więc nie potrzeba żadnych stylów overlay —
+ * w odróżnieniu od portu Angulara, który stoi na CDK.
+ *
+ * @example
+ * <KptMenu items={items} onSelect={onSelect} trigger={<KptButton variant="outline">Opcje</KptButton>} />
+ */
+export declare function KptMenu<T>({ items, trigger, onSelect, open, defaultOpen, onOpenChange, className, ...rest }: Readonly<KptMenuProps<T>>): import("react").JSX.Element;

package/dist/menu/menu.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { cn } from "../internal/cn.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { MenuRows } from "./menu-rows.js";
+/**
+ * Menu rozwijane (dropdown). Pozycje przez `items`, wyzwalacz przez prop `trigger`.
+ *
+ * Panel renderuje się w portalu (`KptOverlay`), więc nie potrzeba żadnych stylów overlay —
+ * w odróżnieniu od portu Angulara, który stoi na CDK.
+ *
+ * @example
+ * <KptMenu items={items} onSelect={onSelect} trigger={<KptButton variant="outline">Opcje</KptButton>} />
+ */
+export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = false, onOpenChange, className, ...rest }) {
+    const triggerRef = useRef(null);
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    const pick = (item) => {
+        if (item.disabled)
+            return;
+        onSelect?.(item);
+        close();
+    };
+    return (_jsxs("span", { className: cn('kpt-menu-host', className), ...rest, children: [_jsx("span", { className: "kpt-menu__trigger", ref: triggerRef, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, children: _jsx("div", { className: "kpt-menu__panel", role: "menu", children: _jsx(MenuRows, { items: items, block: "kpt-menu", onPick: pick }) }) })] }));
+}

package/dist/menubar/menubar.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { KptMenuItem } from '../menu/menu-item.ts';
+export interface KptMenubarProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
+    items?: KptMenuItem<T>[];
+    onSelect?: (item: KptMenuItem<T>) => void;
+}
+/**
+ * Pozioma belka menu z rozwijanymi pod-menu. Pozycja bez `items` działa jak akcja lub link.
+ *
+ * Pod-menu renderuje się w portalu, więc rodzic z `overflow: hidden` go nie przycina — to ta sama
+ * korzyść, dla której port Angulara sięga po CDK Overlay, tylko bez CDK.
+ *
+ * @example
+ * <KptMenubar items={items} onSelect={onSelect} />
+ */
+export declare function KptMenubar<T>({ items, onSelect, className, ...rest }: Readonly<KptMenubarProps<T>>): import("react").JSX.Element;

package/dist/menubar/menubar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Pozioma belka menu z rozwijanymi pod-menu. Pozycja bez `items` działa jak akcja lub link.
+ *
+ * Pod-menu renderuje się w portalu, więc rodzic z `overflow: hidden` go nie przycina — to ta sama
+ * korzyść, dla której port Angulara sięga po CDK Overlay, tylko bez CDK.
+ *
+ * @example
+ * <KptMenubar items={items} onSelect={onSelect} />
+ */
+export function KptMenubar({ items = [], onSelect, className, ...rest }) {
+    const [openIndex, setOpenIndex] = useState(null);
+    const buttonsRef = useRef([]);
+    const closeAll = () => setOpenIndex(null);
+    const toggle = (index, item) => {
+        if (item.disabled)
+            return;
+        if (item.items?.length) {
+            setOpenIndex((current) => (current === index ? null : index));
+        }
+        else {
+            onSelect?.(item);
+            closeAll();
+        }
+    };
+    const pick = (item) => {
+        if (item.disabled)
+            return;
+        onSelect?.(item);
+        closeAll();
+    };
+    return (_jsx("div", { className: cn('kpt-menubar-host', className), ...rest, children: _jsx("nav", { className: "kpt-menubar", role: "menubar", children: items.map((item, index) => (_jsxs("div", { className: "kpt-menubar__group", children: [_jsxs("button", { ref: (el) => {
+                            buttonsRef.current[index] = el;
+                        }, type: "button", className: cn('kpt-menubar__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, onClick: () => toggle(index, item), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), item.items?.length ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-menubar__caret" }) : null] }), _jsx(KptOverlay, { open: openIndex === index && !!item.items?.length, anchor: buttonsRef.current[index] ?? null, onClose: closeAll, children: _jsx("div", { className: "kpt-menubar__dropdown", role: "menu", children: (item.items ?? []).map((sub, subIndex) => sub.separator ? (_jsx("div", { className: "kpt-menubar__separator", role: "separator" }, subIndex)) : (_jsxs("button", { type: "button", className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", disabled: sub.disabled, onClick: () => pick(sub), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex))) }) })] }, index))) }) }));
+}

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

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface KptMeterItem {
+    label: string;
+    value: number;
+    /** Własny kolor segmentu; bez niego wchodzi kolejny z palety. */
+    color?: string;
+}
+export interface KptMeterGroupProps extends ComponentPropsWithRef<'div'> {
+    values?: KptMeterItem[];
+    /** Suma odniesienia; domyślnie suma wartości, czyli segmenty wypełniają całość. */
+    max?: number;
+    showLegend?: boolean;
+}
+/**
+ * Wielosegmentowy miernik z opcjonalną legendą.
+ *
+ * @example
+ * <KptMeterGroup values={[{ label: 'Użyte', value: 70 }, { label: 'Wolne', value: 30 }]} />
+ */
+export declare function KptMeterGroup({ values, max, showLegend, className, ...rest }: Readonly<KptMeterGroupProps>): import("react").JSX.Element;

package/dist/meter-group/meter-group.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+const PALETTE = [
+    'var(--kpt-color-primary)',
+    'var(--kpt-color-info)',
+    'var(--kpt-color-success)',
+    'var(--kpt-color-warning)',
+    'var(--kpt-color-danger)',
+];
+/**
+ * Wielosegmentowy miernik z opcjonalną legendą.
+ *
+ * @example
+ * <KptMeterGroup values={[{ label: 'Użyte', value: 70 }, { label: 'Wolne', value: 30 }]} />
+ */
+export function KptMeterGroup({ values = [], max, showLegend = true, className, ...rest }) {
+    const sum = values.reduce((acc, item) => acc + item.value, 0);
+    // Bez `max` odniesieniem jest suma wartości; `|| 1` chroni przed dzieleniem przez zero,
+    // gdy wszystkie segmenty są zerowe.
+    const total = max ?? (sum || 1);
+    const percent = (item) => (item.value / total) * 100;
+    const color = (item, index) => item.color || PALETTE[index % PALETTE.length];
+    return (_jsx("div", { className: cn('kpt-meter-group-host', className), ...rest, children: _jsxs("div", { className: "kpt-meter-group", children: [_jsx("div", { className: "kpt-meter-group__track", role: "meter", "aria-valuenow": sum, "aria-valuemax": max, children: values.map((item, index) => (_jsx("span", { className: "kpt-meter-group__segment", style: { width: `${percent(item)}%`, backgroundColor: color(item, index) }, title: item.label }, index))) }), showLegend ? (_jsx("ul", { className: "kpt-meter-group__legend", children: values.map((item, index) => (_jsxs("li", { className: "kpt-meter-group__legend-item", children: [_jsx("span", { className: "kpt-meter-group__dot", style: { backgroundColor: color(item, index) } }), _jsx("span", { children: item.label }), _jsxs("span", { className: "kpt-meter-group__val", children: [Math.round(percent(item)), "%"] })] }, index))) })) : null] }) }));
+}

package/dist/order-list/order-list.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptOrderListProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children'>, KptI18nOverrides {
+    items?: T[];
+    defaultItems?: T[];
+    onItemsChange?: (items: T[]) => void;
+    header?: string;
+    /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
+    renderItem: (item: T, index: number) => ReactNode;
+}
+/**
+ * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
+ * w górę i w dół.
+ *
+ * @example
+ * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" renderItem={(t) => t.name} />
+ */
+export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, renderItem, locale, dictionary, className, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;

package/dist/order-list/order-list.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+const EMPTY = [];
+/**
+ * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
+ * w górę i w dół.
+ *
+ * @example
+ * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" renderItem={(t) => t.name} />
+ */
+export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', renderItem, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [list, setList] = useControllableState({
+        value: items,
+        defaultValue: defaultItems,
+        onChange: onItemsChange,
+    });
+    const [selected, setSelected] = useState(null);
+    const move = (dir) => {
+        if (selected === null)
+            return;
+        const target = selected + dir;
+        if (target < 0 || target >= list.length)
+            return;
+        const next = [...list];
+        [next[selected], next[target]] = [next[target], next[selected]];
+        setList(next);
+        // Zaznaczenie wędruje za elementem, nie zostaje na pozycji — inaczej kolejne kliknięcie
+        // przesuwałoby sąsiada zamiast tego samego wpisu.
+        setSelected(target);
+    };
+    return (_jsx("div", { className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: "kpt-order-list__items", children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected'), onClick: () => setSelected(index), children: renderItem(item, index) }, index))) })] })] }) }));
+}

package/dist/paginator/paginator.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptPaginatorProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    /** Łączna liczba elementów. */
+    length: number;
+    /** Rozmiar strony. */
+    pageSize?: number;
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Indeks strony od 0. */
+    pageIndex?: number;
+    defaultPageIndex?: number;
+    onPageIndexChange?: (pageIndex: number) => void;
+    /** Dostępne rozmiary strony. */
+    pageSizeOptions?: number[];
+    /** Treść przycisków nawigacji; domyślnie strzałki z wbudowanego zestawu ikon. */
+    prevIcon?: ReactNode;
+    nextIcon?: ReactNode;
+}
+/**
+ * Paginator Koncept UI: wybór rozmiaru strony, zakres pozycji i nawigacja.
+ *
+ * Działa kontrolowany (`pageIndex`/`pageSize` + handlery) i niekontrolowany
+ * (`defaultPageIndex`/`defaultPageSize`).
+ *
+ * @example
+ * <KptPaginator length={total} pageIndex={page} onPageIndexChange={setPage} />
+ */
+export declare function KptPaginator({ length, pageSize, defaultPageSize, onPageSizeChange, pageIndex, defaultPageIndex, onPageIndexChange, pageSizeOptions, prevIcon, nextIcon, locale, dictionary, className, ...rest }: Readonly<KptPaginatorProps>): import("react").JSX.Element;

package/dist/paginator/paginator.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { KptButton } from "../button/button.js";
+import { KptIcon } from "../icon/icon.js";
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+/**
+ * Paginator Koncept UI: wybór rozmiaru strony, zakres pozycji i nawigacja.
+ *
+ * Działa kontrolowany (`pageIndex`/`pageSize` + handlery) i niekontrolowany
+ * (`defaultPageIndex`/`defaultPageSize`).
+ *
+ * @example
+ * <KptPaginator length={total} pageIndex={page} onPageIndexChange={setPage} />
+ */
+export function KptPaginator({ length, pageSize, defaultPageSize = 10, onPageSizeChange, pageIndex, defaultPageIndex = 0, onPageIndexChange, pageSizeOptions = [5, 10, 20, 50], prevIcon = _jsx(KptIcon, { name: "chevron-left" }), nextIcon = _jsx(KptIcon, { name: "chevron-right" }), locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [size, setSize] = useControllableState({
+        value: pageSize,
+        defaultValue: defaultPageSize,
+        onChange: onPageSizeChange,
+    });
+    const [index, setIndex] = useControllableState({
+        value: pageIndex,
+        defaultValue: defaultPageIndex,
+        onChange: onPageIndexChange,
+    });
+    const totalPages = Math.max(1, Math.ceil(length / size));
+    const rangeStart = length === 0 ? 0 : index * size + 1;
+    const rangeEnd = Math.min(length, (index + 1) * size);
+    const canPrev = index > 0;
+    const canNext = index < totalPages - 1;
+    // Utrzymuj poprawny indeks, gdy zmieni się długość lub rozmiar strony.
+    useEffect(() => {
+        const max = totalPages - 1;
+        if (index > max)
+            setIndex(max);
+    }, [index, totalPages, setIndex]);
+    const onSizeChange = (event) => {
+        setSize(Number(event.target.value));
+        setIndex(0);
+    };
+    return (_jsxs("div", { className: cn('kpt-paginator', className), ...rest, children: [_jsx("div", { className: "kpt-paginator__size", children: _jsxs("label", { children: [t('paginator.rowsPerPage'), _jsx("select", { className: "kpt-paginator__select", value: size, onChange: onSizeChange, children: pageSizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }) }), _jsx("span", { className: "kpt-paginator__range", children: t('paginator.range', { start: rangeStart, end: rangeEnd, total: length }) }), _jsxs("div", { className: "kpt-paginator__nav", children: [_jsx(KptButton, { variant: "outline", size: "sm", disabled: !canPrev, onClick: () => setIndex(index - 1), "aria-label": t('paginator.prevPage'), children: prevIcon }), _jsx(KptButton, { variant: "outline", size: "sm", disabled: !canNext, onClick: () => setIndex(index + 1), "aria-label": t('paginator.nextPage'), children: nextIcon })] })] }));
+}