@konce-pt/react 0.8.0

package/dist/listbox/listbox.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, 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";
+/**
+ * Lista wyboru widoczna w całości, bez rozwijania. Pojedynczy albo wielokrotny wybór,
+ * opcjonalny filtr.
+ *
+ * W trybie pojedynczym ponowny klik w zaznaczoną opcję odznacza ją — lista bywa filtrem,
+ * a filtr trzeba dać się wyczyścić bez sięgania po osobny przycisk.
+ *
+ * @example
+ * <KptListbox options={roles} value={role} onValueChange={setRole} filter />
+ * <KptListbox options={tags} value={tags} onValueChange={setTags} multiple />
+ */
+export function KptListbox({ options = [], value, defaultValue = null, onValueChange, multiple = false, filter = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const [query, setQuery] = useState('');
+    const showInvalid = invalid && (touched ?? true);
+    const visible = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        return q ? options.filter((option) => option.label.toLowerCase().includes(q)) : options;
+    }, [options, query]);
+    const isSelected = (candidate) => multiple ? Array.isArray(current) && current.includes(candidate) : current === candidate;
+    const toggle = (candidate) => {
+        if (multiple) {
+            const list = Array.isArray(current) ? current : [];
+            setCurrent(list.includes(candidate) ? list.filter((item) => item !== candidate) : [...list, candidate]);
+        }
+        else {
+            setCurrent(current === candidate ? null : candidate);
+        }
+        onTouch?.();
+    };
+    return (_jsx("div", { className: cn('kpt-listbox-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-listbox', showInvalid && 'kpt-listbox--invalid'), role: "listbox", "aria-multiselectable": multiple, children: [filter ? (_jsxs("div", { className: "kpt-listbox__filter", children: [_jsx(KptIcon, { name: "search" }), _jsx("input", { type: "text", placeholder: t('listbox.search'), value: query, onChange: (event) => setQuery(event.target.value) })] })) : null, _jsx("div", { className: "kpt-listbox__items", children: visible.length ? (visible.map((option) => (_jsxs("button", { type: "button", role: "option", className: cn('kpt-listbox__item', isSelected(option.value) && 'is-selected'), "aria-selected": isSelected(option.value), disabled: disabled || option.disabled, onClick: () => toggle(option.value), children: [_jsx("span", { children: option.label }), isSelected(option.value) ? _jsx(KptIcon, { name: "check" }) : null] }, String(option.value))))) : (_jsx("div", { className: "kpt-listbox__empty", children: t('listbox.empty') })) })] }) }));
+}

package/dist/map/map-create-dialog.d.ts

@@ -0,0 +1,21 @@
+import type { KptLatLng, KptMapCategory } from '@konce-pt/map';
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptMapGeocoderPort } from './ports.ts';
+export interface KptMapCreateDialogProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSubmit'>, KptI18nOverrides {
+    category: KptMapCategory;
+    at: KptLatLng;
+    /** Geokoder tego formularza — źródło podpowiedzi adresowych dla pól z `autofill`. */
+    geocoder?: KptMapGeocoderPort | null;
+    onSave: (value: Record<string, unknown>) => void;
+    onCancel: () => void;
+}
+/**
+ * Treść dialogu „dodaj lokalizację" budowana ze schemy kategorii (`category.fields`).
+ *
+ * Port Angulara stoi tu na Signal Forms; w Reakcie formularza-frameworka nie ma, więc model to
+ * zwykły stan, a reguły walidacji są mapą funkcji obok niego. Kontrakt zostaje ten sam:
+ * walidacja deklarowana raz przy schemie, a bramka „nie strasz czerwienią" siedzi w prezentacji
+ * — błąd pokazuje się po dotknięciu pola albo po próbie zapisu.
+ */
+export declare function KptMapCreateDialog({ category, at, geocoder, onSave, onCancel, locale: localeOverride, dictionary, className, ...rest }: Readonly<KptMapCreateDialogProps>): import("react").JSX.Element;

package/dist/map/map-create-dialog.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emptyWeek, parseTime, weekdayName } from '@konce-pt/map';
+import { useEffect, useMemo, useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptButton } from "../button/button.js";
+import { KptCheckbox } from "../checkbox/checkbox.js";
+import { KptDatepicker } from "../datepicker/datepicker.js";
+import { KptFormField } from "../form-field/form-field.js";
+import { KptInput } from "../input/input.js";
+import { KptInputNumber } from "../input-number/input-number.js";
+import { KptSelect } from "../select/select.js";
+import { KptTextarea } from "../textarea/textarea.js";
+import { KptMapHoursField } from "./map-hours-field.js";
+import { KptMapImageField } from "./map-image-field.js";
+/** Typy pól, które przyjmą fragment adresu. Data czy liczba nie mają z nim nic wspólnego. */
+const TEXTUAL = new Set(['text', 'textarea']);
+/** Pusta wartość właściwa dla typu pola — formularz startuje bez `undefined`. */
+function initialValue(def) {
+    if (def.initial !== undefined)
+        return def.initial;
+    switch (def.type) {
+        case 'number':
+            return null;
+        case 'checkbox':
+            return false;
+        case 'multiselect':
+            return [];
+        case 'select':
+            return null;
+        case 'hours':
+            return emptyWeek();
+        default:
+            return '';
+    }
+}
+function initialModel(fields) {
+    const out = {};
+    for (const def of fields)
+        out[def.key] = initialValue(def);
+    return out;
+}
+/**
+ * Treść dialogu „dodaj lokalizację" budowana ze schemy kategorii (`category.fields`).
+ *
+ * Port Angulara stoi tu na Signal Forms; w Reakcie formularza-frameworka nie ma, więc model to
+ * zwykły stan, a reguły walidacji są mapą funkcji obok niego. Kontrakt zostaje ten sam:
+ * walidacja deklarowana raz przy schemie, a bramka „nie strasz czerwienią" siedzi w prezentacji
+ * — błąd pokazuje się po dotknięciu pola albo po próbie zapisu.
+ */
+export function KptMapCreateDialog({ category, at, geocoder = null, onSave, onCancel, locale: localeOverride, dictionary, className, ...rest }) {
+    const { t, locale } = useKptMessages({ locale: localeOverride, dictionary });
+    const fields = useMemo(() => category.fields ?? [], [category]);
+    const [model, setModel] = useState(() => initialModel(fields));
+    const [touched, setTouched] = useState({});
+    /** Po nieudanej próbie zapisu pokazujemy błędy wszystkich pól, nie tylko dotkniętych. */
+    const [submitted, setSubmitted] = useState(false);
+    /** Trwa zapytanie do geokodera — pokazujemy notkę zamiast ciszy. */
+    const [geocoding, setGeocoding] = useState(false);
+    /** Ostatnio ustalony adres; `address` bywa czytelniejszy niż suma pól. */
+    const [address, setAddress] = useState(null);
+    // Inna kategoria to inny formularz — model wraca do wartości początkowych.
+    const schemaRef = useMemo(() => fields, [fields]);
+    useEffect(() => {
+        setModel(initialModel(schemaRef));
+        setTouched({});
+        setSubmitted(false);
+    }, [schemaRef]);
+    /** Czy kategoria ma pola do podpowiedzenia i jest czym je podpowiedzieć. */
+    const autofillFields = useMemo(() => fields.filter((def) => def.autofill && TEXTUAL.has(def.type)), [fields]);
+    const hasAutofill = !!geocoder && autofillFields.length > 0;
+    /**
+     * Podpowiada adres z geokodowania wstecznego współrzędnych kliknięcia. Wypełnia wyłącznie
+     * pola z `autofill` i wyłącznie te, które są jeszcze puste — podpowiedź nigdy nie kasuje
+     * tego, co użytkownik zdążył wpisać.
+     */
+    useEffect(() => {
+        if (!geocoder || autofillFields.length === 0)
+            return;
+        const controller = new AbortController();
+        setGeocoding(true);
+        geocoder
+            .reverse(at, { language: locale, signal: controller.signal })
+            .then((found) => {
+            if (controller.signal.aborted)
+                return;
+            setGeocoding(false);
+            setAddress(found);
+            if (!found)
+                return;
+            setModel((current) => {
+                const next = { ...current };
+                for (const def of autofillFields) {
+                    const value = found[def.autofill];
+                    // Puste pole = to, czego użytkownik nie tknął.
+                    if (typeof value === 'string' && value && !next[def.key])
+                        next[def.key] = value;
+                }
+                return next;
+            });
+        })
+            .catch(() => {
+            if (!controller.signal.aborted)
+                setGeocoding(false);
+        });
+        return () => {
+            controller.abort();
+            setGeocoding(false);
+        };
+    }, [geocoder, at, locale, autofillFields]);
+    /**
+     * Komunikat błędu pola albo `null`. Dzień otwarty musi mieć obie godziny i różne od siebie;
+     * dzień oznaczony jako zamknięty przechodzi bez zastrzeżeń — to prawidłowa odpowiedź,
+     * a nie brak danych.
+     */
+    const errorFor = (def) => {
+        const value = model[def.key];
+        if (def.required && (value === null || value === undefined || value === '' || (Array.isArray(value) && !value.length))) {
+            return t('map.fieldRequired', { label: def.label });
+        }
+        if (def.type === 'email' && typeof value === 'string' && value && !/^[^@\s]+@[^@\s.]+\.[^@\s]+$/.test(value)) {
+            return t('map.field.invalidEmail');
+        }
+        if (def.type === 'url' && typeof value === 'string' && value && !/^https?:\/\/\S+$/i.test(value)) {
+            return t('map.field.invalidUrl');
+        }
+        if (def.type === 'number' && typeof value === 'number') {
+            if (typeof def.min === 'number' && value < def.min)
+                return t('map.fieldRequired', { label: def.label });
+            if (typeof def.max === 'number' && value > def.max)
+                return t('map.fieldRequired', { label: def.label });
+        }
+        if (def.type === 'hours')
+            return hoursError(value);
+        return null;
+    };
+    const hoursError = (week) => {
+        if (!week)
+            return null;
+        for (const day of week) {
+            if (day.closed)
+                continue;
+            if (day.ranges.length === 0) {
+                return t('map.field.hoursIncomplete', { day: weekdayName(day.day, locale) });
+            }
+            for (const range of day.ranges) {
+                const from = parseTime(range.from);
+                const to = parseTime(range.to);
+                if (from === null || to === null || from === to) {
+                    return t('map.field.hoursIncomplete', { day: weekdayName(day.day, locale) });
+                }
+            }
+        }
+        return null;
+    };
+    /** Komunikat pokazujemy dopiero po dotknięciu pola albo po próbie zapisu. */
+    const visibleError = (def) => touched[def.key] || submitted ? errorFor(def) : null;
+    const invalid = fields.some((def) => errorFor(def) !== null);
+    const set = (key, value) => setModel((current) => ({ ...current, [key]: value }));
+    const touch = (key) => () => setTouched((current) => ({ ...current, [key]: true }));
+    const onSubmit = (event) => {
+        event.preventDefault();
+        setSubmitted(true);
+        if (invalid)
+            return;
+        onSave({ ...model });
+    };
+    /** Czy pole renderuje jeden `<input>`, na który może wskazać `label[for]`. */
+    const hasOwnInput = (def) => def.type === 'text' || def.type === 'tel' || def.type === 'email' || def.type === 'url';
+    const controlId = (def) => `kpt-map-field-${def.key}`;
+    return (_jsx("div", { className: cn('kpt-map-create', className), ...rest, children: _jsxs("form", { className: "kpt-map-create__form", onSubmit: onSubmit, noValidate: true, children: [_jsxs("p", { className: "kpt-map-create__coords", children: [_jsxs("span", { children: [t('map.latitude'), ": ", _jsx("strong", { children: at.lat.toFixed(5) })] }), _jsxs("span", { children: [t('map.longitude'), ": ", _jsx("strong", { children: at.lng.toFixed(5) })] })] }), geocoding ? (_jsx("p", { className: "kpt-map-create__geo", "aria-live": "polite", children: t('map.lookingUpAddress') })) : address?.address ? (_jsx("p", { className: "kpt-map-create__geo", "aria-live": "polite", children: [address.address, address.city].filter(Boolean).join(', ') })) : hasAutofill ? (_jsx("p", { className: "kpt-map-create__geo", "aria-live": "polite", children: t('map.addressNotFound') })) : null, fields.map((def) => (_jsx(KptFormField, { label: def.label, hint: def.hint ?? '', error: visibleError(def), required: !!def.required, controlId: hasOwnInput(def) ? controlId(def) : '', children: renderControl(def) }, def.key))), _jsxs("div", { className: "kpt-map-create__actions", children: [_jsx(KptButton, { type: "button", variant: "text", onClick: onCancel, children: t('map.cancel') }), _jsx(KptButton, { type: "submit", disabled: submitted && invalid, children: t('map.save') })] })] }) }));
+    function renderControl(def) {
+        const value = model[def.key];
+        const common = { onTouch: touch(def.key), invalid: !!visibleError(def), touched: !!touched[def.key] };
+        switch (def.type) {
+            case 'textarea':
+                return (_jsx(KptTextarea, { value: String(value ?? ''), onValueChange: (next) => set(def.key, next), placeholder: def.placeholder ?? '', ...common }));
+            case 'number':
+                return (_jsx(KptInputNumber, { value: value, onValueChange: (next) => set(def.key, next), min: typeof def.min === 'number' ? def.min : undefined, max: typeof def.max === 'number' ? def.max : undefined, placeholder: def.placeholder ?? '', ...common }));
+            case 'date':
+                return (_jsx(KptDatepicker, { value: value, onValueChange: (next) => set(def.key, next), placeholder: def.placeholder ?? '', minDate: def.min ?? null, maxDate: def.max ?? null, ...common }));
+            case 'select':
+                return (_jsx(KptSelect, { value: value, onValueChange: (next) => set(def.key, next), options: (def.options ?? []).map((option) => ({ value: option.value, label: option.label })), placeholder: def.placeholder ?? '', ...common }));
+            case 'multiselect':
+                return (_jsx(KptSelect, { multiple: true, value: value, onValueChange: (next) => set(def.key, next), options: (def.options ?? []).map((option) => ({ value: option.value, label: option.label })), placeholder: def.placeholder ?? '', ...common }));
+            case 'checkbox':
+                return (_jsx(KptCheckbox, { checked: !!value, onCheckedChange: (next) => set(def.key, next), label: def.placeholder ?? '', onTouch: touch(def.key) }));
+            case 'image':
+                return (_jsx(KptMapImageField, { value: String(value ?? ''), onValueChange: (next) => set(def.key, next), invalid: !!visibleError(def), touched: !!touched[def.key], onTouch: touch(def.key) }));
+            case 'hours':
+                return (_jsx(KptMapHoursField, { value: value ?? emptyWeek(), onValueChange: (next) => set(def.key, next), onTouch: touch(def.key) }));
+            default:
+                return (_jsx(KptInput, { id: controlId(def), type: def.type === 'tel' || def.type === 'email' || def.type === 'url' ? def.type : 'text', value: String(value ?? ''), onValueChange: (next) => set(def.key, next), placeholder: def.placeholder ?? (def.type === 'url' ? 'https://' : ''), ...common }));
+        }
+    }
+}

package/dist/map/map-hours-field.d.ts

@@ -0,0 +1,22 @@
+import type { KptMapOpeningHours } from '@konce-pt/map';
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptMapHoursFieldProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'>, KptI18nOverrides {
+    value: KptMapOpeningHours;
+    onValueChange: (value: KptMapOpeningHours) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Wywoływane po każdej zmianie — moment, w którym pole staje się dotknięte. */
+    onTouch?: () => void;
+}
+/**
+ * Pole „godziny otwarcia" formularza dodawania lokalizacji (`type: 'hours'` w schemie).
+ *
+ * Siedem wierszy od poniedziałku, każdy z parą godzin i znacznikiem „zamknięte". Skrót
+ * „tak samo przez cały tydzień" kopiuje poniedziałek na pozostałe dni — bez niego wypełnienie
+ * formularza to czternaście pól.
+ *
+ * Nazwy dni idą z `Intl`, nie ze słownika: rozkład tygodnia jest uniwersalny, a tłumaczenie
+ * nazw dni przeglądarka ma już zrobione.
+ */
+export declare function KptMapHoursField({ value, onValueChange, disabled, readOnly, onTouch, locale: localeOverride, dictionary, className, ...rest }: Readonly<KptMapHoursFieldProps>): import("react").JSX.Element;

package/dist/map/map-hours-field.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { emptyWeek, weekdayName } from '@konce-pt/map';
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptCheckbox } from "../checkbox/checkbox.js";
+import { KptDatepicker } from "../datepicker/datepicker.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptIconButton } from "../icon-button/icon-button.js";
+/** Ile przedziałów na dobę dopuszczamy. Dwa pokrywają przerwę i dobę przez północ. */
+const MAX_RANGES = 2;
+/**
+ * Snap minut na tarczy zegara. Godziny otwarcia chodzą co kwadrans, a nie co minutę —
+ * krok 5 daje trafienie w 07:30 czy 22:45 bez celowania w pojedynczą minutę.
+ */
+const MINUTE_STEP = 5;
+/**
+ * Pole „godziny otwarcia" formularza dodawania lokalizacji (`type: 'hours'` w schemie).
+ *
+ * Siedem wierszy od poniedziałku, każdy z parą godzin i znacznikiem „zamknięte". Skrót
+ * „tak samo przez cały tydzień" kopiuje poniedziałek na pozostałe dni — bez niego wypełnienie
+ * formularza to czternaście pól.
+ *
+ * Nazwy dni idą z `Intl`, nie ze słownika: rozkład tygodnia jest uniwersalny, a tłumaczenie
+ * nazw dni przeglądarka ma już zrobione.
+ */
+export function KptMapHoursField({ value, onValueChange, disabled = false, readOnly = false, onTouch, locale: localeOverride, dictionary, className, ...rest }) {
+    const { t, locale } = useKptMessages({ locale: localeOverride, dictionary });
+    /** Skrót „tak samo przez cały tydzień" — stan pola, nie część wartości. */
+    const [sameAllWeek, setSameAllWeek] = useState(false);
+    const rows = Array.from({ length: 7 }, (_, index) => {
+        const day = (index + 1);
+        const entry = value.find((candidate) => candidate.day === day);
+        return {
+            day,
+            name: weekdayName(day, locale),
+            closed: entry?.closed ?? !entry,
+            ranges: (entry?.ranges ?? []).map((range) => ({ from: range.from, to: range.to })),
+        };
+    });
+    /** Zapis zawsze przez pełny, uporządkowany tydzień — model nie ma dziur. */
+    const write = (change) => {
+        const base = emptyWeek().map((day) => value.find((entry) => entry.day === day.day) ?? day);
+        onValueChange(change(base));
+        onTouch?.();
+    };
+    /** Zmiana jednego dnia; przy jednakowym tygodniu poniedziałek rozlewa się na resztę. */
+    const patch = (day, change) => {
+        write((week) => {
+            const next = week.map((entry) => (entry.day === day ? change(entry) : entry));
+            if (!sameAllWeek || day !== 1)
+                return next;
+            const monday = next[0];
+            return next.map((entry) => entry.day === 1
+                ? entry
+                : { day: entry.day, closed: monday.closed, ranges: monday.ranges.map((range) => ({ ...range })) });
+        });
+    };
+    const locked = (row) => disabled || readOnly || (sameAllWeek && row.day !== 1);
+    const onSameAllWeek = (same) => {
+        setSameAllWeek(same);
+        if (!same)
+            return;
+        const monday = rows[0];
+        write((week) => week.map((day) => day.day === 1
+            ? day
+            : { day: day.day, closed: monday.closed, ranges: monday.ranges.map((range) => ({ ...range })) }));
+    };
+    const setClosed = (row, closed) => patch(row.day, (day) => ({
+        ...day,
+        closed,
+        // Przy odznaczeniu dajemy jeden pusty przedział, żeby było co wypełnić.
+        ranges: closed ? [] : day.ranges.length ? day.ranges : [{ from: '', to: '' }],
+    }));
+    const setTime = (row, index, edge, time) => patch(row.day, (day) => {
+        const ranges = day.ranges.map((range) => ({ ...range }));
+        while (ranges.length <= index)
+            ranges.push({ from: '', to: '' });
+        ranges[index][edge] = time;
+        return { ...day, closed: false, ranges };
+    });
+    return (_jsxs("div", { className: cn('kpt-map-hours-field', className), ...rest, children: [_jsx(KptCheckbox, { className: "kpt-map-hours-field__same", checked: sameAllWeek, onCheckedChange: onSameAllWeek, disabled: disabled || readOnly, label: t('map.field.hoursSameAllWeek') }), _jsx("ul", { className: "kpt-map-hours-field__week", children: rows.map((row) => (_jsxs("li", { className: "kpt-map-hours-field__day", "data-locked": locked(row) ? '' : undefined, children: [_jsx("span", { className: "kpt-map-hours-field__name", children: row.name }), _jsx("div", { className: "kpt-map-hours-field__ranges", children: !row.closed ? (_jsxs(_Fragment, { children: [row.ranges.map((range, index) => (_jsxs("div", { className: "kpt-map-hours-field__range", children: [_jsx(KptDatepicker, { selectionMode: "time", minuteStep: MINUTE_STEP, value: range.from, onValueChange: (time) => setTime(row, index, 'from', String(time ?? '')), disabled: locked(row), "aria-label": `${t('map.field.hoursFrom')} — ${row.name}`, onTouch: onTouch }), _jsx("span", { className: "kpt-map-hours-field__dash", "aria-hidden": "true", children: "\u2013" }), _jsx(KptDatepicker, { selectionMode: "time", minuteStep: MINUTE_STEP, value: range.to, onValueChange: (time) => setTime(row, index, 'to', String(time ?? '')), disabled: locked(row), "aria-label": `${t('map.field.hoursTo')} — ${row.name}`, onTouch: onTouch }), row.ranges.length > 1 ? (_jsx(KptIconButton, { variant: "text", size: "sm", disabled: locked(row), "aria-label": t('map.field.hoursRemoveRange'), onClick: () => patch(row.day, (day) => ({
+                                                    ...day,
+                                                    ranges: day.ranges.filter((_, i) => i !== index).map((r) => ({ ...r })),
+                                                })), children: _jsx(KptIcon, { name: "minus" }) })) : null] }, index))), row.ranges.length < MAX_RANGES ? (_jsxs("button", { className: "kpt-map-hours-field__add", type: "button", disabled: locked(row), onClick: () => patch(row.day, (day) => ({
+                                            ...day,
+                                            closed: false,
+                                            ranges: [...day.ranges.map((r) => ({ ...r })), { from: '', to: '' }],
+                                        })), children: [_jsx(KptIcon, { name: "plus" }), t('map.field.hoursAddRange')] })) : null] })) : null }), _jsx(KptCheckbox, { className: "kpt-map-hours-field__closed", checked: row.closed, onCheckedChange: (closed) => setClosed(row, closed), disabled: locked(row), label: t('map.field.hoursClosed') })] }, row.day))) })] }));
+}

package/dist/map/map-image-field.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptMapImageFieldProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'>, KptI18nOverrides {
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    /** Górny limit pliku w bajtach. */
+    maxBytes?: number;
+    onTouch?: () => void;
+}
+/**
+ * Pole „zdjęcie" formularza dodawania lokalizacji (`type: 'image'` w schemie kategorii).
+ *
+ * Wartością jest zawsze **string**: albo `data:` z wybranego pliku, albo adres wklejony przez
+ * użytkownika. Karta miejsca nie rozróżnia jednego od drugiego, więc formularz nie musi
+ * decydować za aplikację, gdzie zdjęcia mieszkają.
+ *
+ * Plik czytamy w przeglądarce i nigdzie nie wysyłamy — biblioteka nie ma i nie chce mieć
+ * wiedzy o storage'u aplikacji.
+ */
+export declare function KptMapImageField({ value, onValueChange, disabled, readOnly, invalid, touched, maxBytes, onTouch, locale, dictionary, className, ...rest }: Readonly<KptMapImageFieldProps>): import("react").JSX.Element;

package/dist/map/map-image-field.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptFileUpload } from "../file-upload/file-upload.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptInput } from "../input/input.js";
+/** Domyślny limit pliku. Data URL puchnie o ~⅓, a wartość leci w `onLocationCreate`. */
+const DEFAULT_MAX_BYTES = 2 * 1024 * 1024;
+/**
+ * Pole „zdjęcie" formularza dodawania lokalizacji (`type: 'image'` w schemie kategorii).
+ *
+ * Wartością jest zawsze **string**: albo `data:` z wybranego pliku, albo adres wklejony przez
+ * użytkownika. Karta miejsca nie rozróżnia jednego od drugiego, więc formularz nie musi
+ * decydować za aplikację, gdzie zdjęcia mieszkają.
+ *
+ * Plik czytamy w przeglądarce i nigdzie nie wysyłamy — biblioteka nie ma i nie chce mieć
+ * wiedzy o storage'u aplikacji.
+ */
+export function KptMapImageField({ value, onValueChange, disabled = false, readOnly = false, invalid = false, touched = false, maxBytes = DEFAULT_MAX_BYTES, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    /** Pliki trzymane wyłącznie po to, żeby `KptFileUpload` miał co pokazać. */
+    const [files, setFiles] = useState([]);
+    /** Komunikat o zbyt dużym pliku; walidacja rozmiaru nie ma sensu w schemie. */
+    const [sizeError, setSizeError] = useState(null);
+    const maxLabel = `${Math.round(maxBytes / (1024 * 1024))} MB`;
+    const urlValue = value.startsWith('data:') ? '' : value;
+    const onFiles = (next) => {
+        const file = next[0];
+        setFiles(file ? [file] : []);
+        setSizeError(null);
+        onTouch?.();
+        if (!file) {
+            // Usunięcie pliku czyści wartość tylko wtedy, gdy to plik ją ustawił.
+            if (value.startsWith('data:'))
+                onValueChange('');
+            return;
+        }
+        if (file.size > maxBytes) {
+            setSizeError(t('map.field.imageTooLarge', { max: maxLabel }));
+            setFiles([]);
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => onValueChange(String(reader.result ?? ''));
+        reader.onerror = () => setSizeError(t('map.field.imageTooLarge', { max: maxLabel }));
+        reader.readAsDataURL(file);
+    };
+    return (_jsxs("div", { className: cn('kpt-map-image-field', className), ...rest, children: [_jsx(KptFileUpload, { accept: "image/*", value: files, onValueChange: onFiles, disabled: disabled || readOnly, invalid: invalid, touched: touched }), _jsxs("label", { className: "kpt-map-image-field__url", children: [_jsx("span", { className: "kpt-map-image-field__url-label", children: t('map.field.orPasteUrl') }), _jsx(KptInput, { type: "url", value: urlValue, onValueChange: (url) => {
+                            // Adres i plik wykluczają się — dwa źródła jednej wartości myliłyby użytkownika.
+                            if (url)
+                                setFiles([]);
+                            setSizeError(null);
+                            onValueChange(url);
+                        }, disabled: disabled, readOnly: readOnly, onTouch: onTouch, placeholder: "https://" })] }), sizeError ? (_jsx("p", { className: "kpt-map-image-field__error", "aria-live": "polite", children: sizeError })) : null, value ? (_jsxs("figure", { className: "kpt-map-image-field__preview", children: [_jsx("img", { src: value, alt: t('map.field.imagePreview') }), _jsx("button", { className: "kpt-map-image-field__clear", type: "button", "aria-label": t('map.field.removeImage'), title: t('map.field.removeImage'), disabled: disabled || readOnly, onClick: () => {
+                            setFiles([]);
+                            setSizeError(null);
+                            onValueChange('');
+                            onTouch?.();
+                        }, children: _jsx(KptIcon, { name: "x" }) })] })) : null] }));
+}

package/dist/map/map-legend.d.ts

@@ -0,0 +1,29 @@
+import type { KptMapCategory } from '@konce-pt/map';
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptMapLegendProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    categories: readonly KptMapCategory[];
+    /**
+     * Identyfikatory ukrytych kategorii — kontrolowane. Nazwa dłuższa niż `hidden` z portu
+     * Angulara, bo `hidden` na elemencie DOM jest booleanem i kolidowałoby z propsem `<div>`.
+     */
+    hiddenCategories?: string[];
+    defaultHiddenCategories?: string[];
+    onHiddenCategoriesChange?: (hidden: string[]) => void;
+    /** Opcjonalne liczniki `{ categoryId: liczba }` — pokazywane przy etykiecie. */
+    counts?: Record<string, number> | null;
+    orientation?: 'horizontal' | 'vertical';
+    /** Wyłącza chowanie kategorii — legenda staje się czysto informacyjna. */
+    interactive?: boolean;
+}
+/**
+ * Legenda mapy — lista kategorii ze znacznikiem koloru i ikoną. Pozycje są przyciskami:
+ * kliknięcie chowa i pokazuje kategorię.
+ *
+ * `KptMap` renderuje ją sam pod mapą przy `legend`; kto chce ją gdzie indziej, wyłącza tamto
+ * i wstawia ten komponent ręcznie.
+ *
+ * @example
+ * <KptMapLegend categories={categories} hiddenCategories={hidden} onHiddenCategoriesChange={setHidden} />
+ */
+export declare function KptMapLegend({ categories, hiddenCategories, defaultHiddenCategories, onHiddenCategoriesChange, counts, orientation, interactive, locale, dictionary, className, ...rest }: Readonly<KptMapLegendProps>): import("react").JSX.Element;

package/dist/map/map-legend.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colorVarOf, contrastVarOf } from '@konce-pt/map';
+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";
+/**
+ * Legenda mapy — lista kategorii ze znacznikiem koloru i ikoną. Pozycje są przyciskami:
+ * kliknięcie chowa i pokazuje kategorię.
+ *
+ * `KptMap` renderuje ją sam pod mapą przy `legend`; kto chce ją gdzie indziej, wyłącza tamto
+ * i wstawia ten komponent ręcznie.
+ *
+ * @example
+ * <KptMapLegend categories={categories} hiddenCategories={hidden} onHiddenCategoriesChange={setHidden} />
+ */
+export function KptMapLegend({ categories, hiddenCategories, defaultHiddenCategories = [], onHiddenCategoriesChange, counts = null, orientation = 'horizontal', interactive = true, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [hiddenIds, setHidden] = useControllableState({
+        value: hiddenCategories,
+        defaultValue: defaultHiddenCategories,
+        onChange: onHiddenCategoriesChange,
+    });
+    const hiddenSet = new Set(hiddenIds);
+    const toggle = (id) => {
+        if (!interactive)
+            return;
+        setHidden(hiddenSet.has(id) ? hiddenIds.filter((current) => current !== id) : [...hiddenIds, id]);
+    };
+    return (_jsx("div", { className: cn('kpt-map-legend', className), "data-orientation": orientation, role: "group", "aria-label": t('map.legend'), ...rest, children: categories
+            .filter((category) => category.legend !== false)
+            .map((category) => {
+            const isHidden = hiddenSet.has(category.id);
+            const label = t(isHidden ? 'map.showCategory' : 'map.hideCategory', { category: category.label });
+            return (_jsxs("button", { type: "button", className: cn('kpt-map-legend__item', isHidden && 'kpt-map-legend__item--off'), style: {
+                    // Glif dostaje kolor kontrastowy — zaszyta biel gubi się na jasnych rolach.
+                    '--_kpt-legend-color': colorVarOf(category.color),
+                    '--_kpt-legend-fg': contrastVarOf(category.color),
+                }, "aria-pressed": interactive ? !isHidden : undefined, "aria-label": interactive ? label : undefined, disabled: !interactive, onClick: () => toggle(category.id), children: [_jsx("span", { className: "kpt-map-legend__swatch", "aria-hidden": "true", children: category.icon ? _jsx(KptIcon, { name: category.icon }) : null }), _jsx("span", { className: "kpt-map-legend__label", children: category.label }), counts ? _jsx("span", { className: "kpt-map-legend__count", children: counts[category.id] ?? 0 }) : null] }, category.id));
+        }) }));
+}

package/dist/map/map-poi-card.d.ts

@@ -0,0 +1,42 @@
+import type { KptMapCategory, KptMapPoi } from '@konce-pt/map';
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptMapPoiCardProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    poi: KptMapPoi;
+    /** Odległość w metrach; `null` chowa wiersz dystansu. */
+    distance?: number | null;
+    /** Źródło ikony, koloru i etykiety wiersza kategorii; `null` chowa ten wiersz. */
+    category?: KptMapCategory | null;
+    /** Etykieta przycisku głównego; pusta chowa przycisk. */
+    primaryLabel?: string;
+    showShare?: boolean;
+    showFavourite?: boolean;
+    favourite?: boolean;
+    defaultFavourite?: boolean;
+    onFavouriteChange?: (favourite: boolean) => void;
+    closable?: boolean;
+    /** Rozwinąć godziny od razu. Domyślnie zwinięte, jak na karcie miejsca w mapach. */
+    hoursExpanded?: boolean;
+    defaultHoursExpanded?: boolean;
+    onHoursExpandedChange?: (expanded: boolean) => void;
+    onPrimaryAction?: (poi: KptMapPoi) => void;
+    onClose?: () => void;
+    onShare?: (poi: KptMapPoi) => void;
+}
+/**
+ * Karta miejsca do popupu mapy — dystans, zdjęcie, akcje, kategoria, rozwijane godziny
+ * otwarcia i wiersze kontaktowe z kopiowaniem.
+ *
+ * Komponent jest sterowany danymi: bierze `KptMapPoi`, a nie model domenowy aplikacji.
+ * Mapowanie `KptMapLocation.data` → `KptMapPoi` robi aplikacja, dzięki czemu karta nie wie,
+ * czy pokazuje ładowarkę, restaurację, czy punkt serwisowy.
+ *
+ * Sam popup trzeba przełączyć na `popupLayout="card"` — inaczej karta dostanie szerokość
+ * i padding przeznaczone dla treści tekstowej.
+ *
+ * @example
+ * <KptMap popupLayout="card" renderPopup={({ location, data, distance, close }) => (
+ *   <KptMapPoiCard poi={poiOf(location, data)} distance={distance} onClose={close} />
+ * )} />
+ */
+export declare function KptMapPoiCard({ poi, distance, category, primaryLabel, showShare, showFavourite, favourite, defaultFavourite, onFavouriteChange, closable, hoursExpanded, defaultHoursExpanded, onHoursExpandedChange, onPrimaryAction, onClose, onShare, locale: localeOverride, dictionary, className, ...rest }: Readonly<KptMapPoiCardProps>): import("react").JSX.Element;