@konce-pt/react 0.8.0

package/dist/tabs/tabs.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+/**
+ * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie — dopiero gdy
+ * zakładka jest aktywna, tak samo jak szablon `kpt-tab` w porcie Angulara.
+ */
+export function KptTab(_props) {
+    // Zakładka nigdy nie renderuje się sama: `KptTabs` czyta jej propsy i sam decyduje,
+    // co pokazać. Ten komponent jest wyłącznie nośnikiem konfiguracji.
+    return null;
+}
+KptTab.kptTabsSlot = 'tab';
+/**
+ * Zakładki — przełączanie widoków, treść renderowana leniwie.
+ *
+ * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
+ * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
+ *
+ * @example
+ * <KptTabs>
+ *   <KptTabs.Tab label="Ogólne">…</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane">…</KptTabs.Tab>
+ * </KptTabs>
+ */
+export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+    const [active, setActive] = useControllableState({
+        value: activeIndex,
+        defaultValue: defaultActiveIndex,
+        onChange: onActiveIndexChange,
+    });
+    const [direction, setDirection] = useState(1);
+    const [ink, setInk] = useState({ x: 0, w: 0 });
+    const buttonsRef = useRef([]);
+    const tabs = [];
+    const contents = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child) || child.type?.kptTabsSlot !== 'tab')
+            return;
+        const props = child.props;
+        tabs.push(props);
+        contents.push(props.children);
+    });
+    const measureInk = useCallback(() => {
+        const button = buttonsRef.current[active];
+        if (!button)
+            return;
+        const next = { x: button.offsetLeft, w: button.offsetWidth };
+        // Pomiar biegnie po KAŻDYM renderze (etykiety zmieniają się z językiem, a przycisków nie da
+        // się zmierzyć przed montażem). Bez porównania `setInk` wywoływałby kolejny render w kółko —
+        // React przerywa aktualizację dopiero wtedy, gdy dostanie ten sam obiekt stanu.
+        setInk((prev) => (prev.x === next.x && prev.w === next.w ? prev : next));
+    }, [active]);
+    useLayoutEffect(measureInk);
+    useLayoutEffect(() => {
+        window.addEventListener('resize', measureInk);
+        return () => window.removeEventListener('resize', measureInk);
+    }, [measureInk]);
+    const select = (index) => {
+        if (tabs[index]?.disabled)
+            return;
+        setDirection(index >= active ? 1 : -1);
+        setActive(index);
+    };
+    return (_jsxs("div", { className: cn('kpt-tabs-host', className), style: {
+            ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
+            ['--kpt-anim-dir']: direction,
+            ...style,
+        }, ...rest, children: [_jsxs("div", { className: "kpt-tabs__header", role: "tablist", children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
+                            buttonsRef.current[index] = el;
+                        }, type: "button", className: cn('kpt-tabs__tab', index === active && 'is-active'), role: "tab", disabled: tab.disabled, "aria-selected": index === active, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", children: contents[active] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[active] }, active)) : null })] }));
+}
+KptTabs.Tab = KptTab;

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+export interface KptTextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'required'> {
+    /** Dopasowuje wysokość pola do treści przy każdej zmianie. */
+    autoResize?: boolean;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
+    required?: boolean;
+    /** Pole jest nieprawidłowe. Widoczne dopiero, gdy `touched` też jest prawdziwe. */
+    invalid?: boolean;
+    /** Czy pole było dotknięte; pominięty = stan błędu pokazuje się od razu po `invalid`. */
+    touched?: boolean;
+    /** Wygodniejszy odpowiednik `onChange` — dostaje samą wartość. */
+    onValueChange?: (value: string) => void;
+    /** Wywoływane na `blur` — moment, w którym pole staje się dotknięte. */
+    onTouch?: () => void;
+    /** Propsy wrappera hosta (`.kpt-textarea-host`). `className` i `ref` idą na `<textarea>`. */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Pole wieloliniowe (textarea), z opcjonalnym auto-resize.
+ *
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) — auto-resize
+ * czyta wysokość wprost z DOM, więc jest poprawny w obu trybach, także dla wartości początkowej.
+ *
+ * @example
+ * <KptTextarea name="notes" placeholder="Notatki…" autoResize />
+ */
+export declare function KptTextarea({ autoResize, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, rows, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, ...rest }: Readonly<KptTextareaProps>): import("react").JSX.Element;

package/dist/textarea/textarea.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
+import { useKptId } from "../internal/use-id.js";
+import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+/**
+ * Pole wieloliniowe (textarea), z opcjonalnym auto-resize.
+ *
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) — auto-resize
+ * czyta wysokość wprost z DOM, więc jest poprawny w obu trybach, także dla wartości początkowej.
+ *
+ * @example
+ * <KptTextarea name="notes" placeholder="Notatki…" autoResize />
+ */
+export function KptTextarea({ autoResize = false, required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, rows = 3, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, ...rest }) {
+    const field = useKptFormFieldContext();
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const textareaId = useKptId(id ?? field?.controlId, 'kpt-textarea');
+    const innerRef = useRef(null);
+    const showInvalid = invalid && (touched ?? true);
+    const resize = useCallback(() => {
+        const el = innerRef.current;
+        if (!el || !autoResize)
+            return;
+        // Zerowanie przed odczytem `scrollHeight` jest konieczne — bez niego pole potrafi tylko
+        // rosnąć, bo `scrollHeight` nigdy nie spada poniżej bieżącej wysokości.
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }, [autoResize]);
+    // Wartość początkowa i każda zmiana z zewnątrz (tryb kontrolowany) — przed malowaniem,
+    // żeby pole nie mrugnęło niedopasowaną wysokością.
+    useLayoutEffect(resize);
+    const handleChange = useCallback((event) => {
+        onChange?.(event);
+        onValueChange?.(event.target.value);
+        resize();
+    }, [onChange, onValueChange, resize]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+        onTouch?.();
+    }, [onBlur, onTouch]);
+    return (_jsx("span", { className: cn('kpt-textarea-host', hostClassName), ...hostRest, children: _jsx("textarea", { className: cn('kpt-textarea__field', className), id: textareaId, rows: rows, ref: composeRefs(innerRef, ref), "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }) }));
+}

package/dist/timeline/timeline.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface KptTimelineItem {
+    title: string;
+    description?: string;
+    time?: string;
+    /** Nazwa ikony z rejestru; bez niej marker zostaje pustą kropką. */
+    icon?: string;
+    variant?: 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+}
+export interface KptTimelineProps extends ComponentPropsWithRef<'div'> {
+    items?: KptTimelineItem[];
+}
+/**
+ * Oś czasu — pionowa lista zdarzeń z markerami.
+ *
+ * @example
+ * <KptTimeline items={[{ title: 'Utworzono', time: '10:00', variant: 'success', icon: 'check' }]} />
+ */
+export declare function KptTimeline({ items, className, ...rest }: Readonly<KptTimelineProps>): import("react").JSX.Element;

package/dist/timeline/timeline.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Oś czasu — pionowa lista zdarzeń z markerami.
+ *
+ * @example
+ * <KptTimeline items={[{ title: 'Utworzono', time: '10:00', variant: 'success', icon: 'check' }]} />
+ */
+export function KptTimeline({ items = [], className, ...rest }) {
+    return (_jsx("div", { className: cn('kpt-timeline-host', className), ...rest, children: _jsx("ol", { className: "kpt-timeline", children: items.map((item, index) => (_jsxs("li", { className: "kpt-timeline__item", children: [_jsx("div", { className: "kpt-timeline__marker", "data-variant": item.variant ?? 'primary', children: item.icon ? _jsx(KptIcon, { name: item.icon }) : null }), _jsxs("div", { className: "kpt-timeline__content", children: [_jsxs("div", { className: "kpt-timeline__header", children: [_jsx("span", { className: "kpt-timeline__title", children: item.title }), item.time ? _jsx("span", { className: "kpt-timeline__time", children: item.time }) : null] }), item.description ? _jsx("p", { className: "kpt-timeline__desc", children: item.description }) : null] })] }, index))) }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptToastContainerProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
+}
+/**
+ * Kontener renderujący toasty z `kptToast`. Umieść raz w aplikacji, np. w komponencie głównym.
+ *
+ * @example
+ * <KptToastContainer />
+ * // gdziekolwiek: kptToast.success('Zapisano');
+ */
+export declare function KptToastContainer({ locale, dictionary, className, ...rest }: Readonly<KptToastContainerProps>): import("react").JSX.Element;

package/dist/toast/toast-container.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+import { kptToast, useKptToasts } from "./toast-store.js";
+const ICONS = {
+    info: 'info',
+    success: 'circle-check',
+    warning: 'alert-triangle',
+    danger: 'circle-x',
+};
+/**
+ * Kontener renderujący toasty z `kptToast`. Umieść raz w aplikacji, np. w komponencie głównym.
+ *
+ * @example
+ * <KptToastContainer />
+ * // gdziekolwiek: kptToast.success('Zapisano');
+ */
+export function KptToastContainer({ locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const toasts = useKptToasts();
+    return (_jsx("div", { className: cn('kpt-toast-container-host', className), ...rest, children: _jsx("div", { className: "kpt-toast-container", "aria-live": "polite", "aria-atomic": "false", children: toasts.map((toast) => (_jsxs("div", { className: "kpt-toast", "data-variant": toast.variant, role: "status", children: [_jsx(KptIcon, { className: "kpt-toast__icon", name: ICONS[toast.variant] }), _jsxs("div", { className: "kpt-toast__content", children: [toast.title ? _jsx("div", { className: "kpt-toast__title", children: toast.title }) : null, _jsx("div", { className: "kpt-toast__message", children: toast.message })] }), _jsx("button", { className: "kpt-toast__close", type: "button", onClick: () => kptToast.dismiss(toast.id), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })] }, toast.id))) }) }));
+}

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

@@ -0,0 +1,26 @@
+import type { KptAlertVariant } from '../shared/types.ts';
+export interface KptToast {
+    id: number;
+    message: string;
+    title?: string;
+    variant: KptAlertVariant;
+    /** Czas życia w ms; 0 = bez auto-zamykania. */
+    duration: number;
+}
+export type KptToastOptions = Partial<Omit<KptToast, 'id' | 'message'>>;
+declare function show(message: string, options?: KptToastOptions): number;
+declare function dismiss(id: number): void;
+declare function clear(): void;
+/** Powiadomienia (toasty). Renderuje je `<KptToastContainer />`, umieszczony raz w aplikacji. */
+export declare const kptToast: {
+    show: typeof show;
+    info: (message: string, options?: KptToastOptions) => number;
+    success: (message: string, options?: KptToastOptions) => number;
+    warning: (message: string, options?: KptToastOptions) => number;
+    error: (message: string, options?: KptToastOptions) => number;
+    dismiss: typeof dismiss;
+    clear: typeof clear;
+};
+/** Bieżąca lista toastów. Używane przez kontener; przydaje się też do własnego renderowania. */
+export declare function useKptToasts(): KptToast[];
+export {};

package/dist/toast/toast-store.js

@@ -0,0 +1,51 @@
+import { useSyncExternalStore } from 'react';
+/*
+ * Magazyn toastów jako moduł-singleton — odpowiednik serwisu `providedIn: 'root'` z Angulara.
+ * Dzięki temu `kptToast.success(...)` woła się z dowolnego miejsca, także spoza drzewa Reacta
+ * (obsługa błędu w warstwie danych, interceptor), bez owijania aplikacji providerem.
+ */
+let toasts = [];
+let seq = 0;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function show(message, options = {}) {
+    const id = ++seq;
+    const toast = { id, message, variant: 'info', duration: 4000, ...options };
+    toasts = [...toasts, toast];
+    emit();
+    if (toast.duration > 0)
+        setTimeout(() => dismiss(id), toast.duration);
+    return id;
+}
+function dismiss(id) {
+    toasts = toasts.filter((toast) => toast.id !== id);
+    emit();
+}
+function clear() {
+    toasts = [];
+    emit();
+}
+/** Powiadomienia (toasty). Renderuje je `<KptToastContainer />`, umieszczony raz w aplikacji. */
+export const kptToast = {
+    show,
+    info: (message, options) => show(message, { ...options, variant: 'info' }),
+    success: (message, options) => show(message, { ...options, variant: 'success' }),
+    warning: (message, options) => show(message, { ...options, variant: 'warning' }),
+    error: (message, options) => show(message, { ...options, variant: 'danger' }),
+    dismiss,
+    clear,
+};
+const EMPTY = [];
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Bieżąca lista toastów. Używane przez kontener; przydaje się też do własnego renderowania. */
+export function useKptToasts() {
+    return useSyncExternalStore(subscribe, () => toasts, () => EMPTY);
+}

package/dist/toolbar/toolbar.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface KptToolbarProps extends ComponentPropsWithRef<'div'> {
+    /** Dodaje cień (wyniesienie) pod paskiem. */
+    elevated?: boolean;
+    /**
+     * Pozwala zawartości paska zawinąć się do kolejnych wierszy, gdy zabraknie miejsca.
+     * Opcjonalne, bo zawijanie zmienia zachowanie `<KptToolbarSpacer>` — w jednowierszowym
+     * pasku rozpycha on treść, a w zawijanym potrafi zepchnąć resztę do nowego wiersza.
+     */
+    wrap?: boolean;
+}
+/**
+ * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
+ * Poniżej breakpointa `sm` pasek sam zbiega się do niższej wysokości i węższych marginesów.
+ *
+ * @example
+ * <KptToolbar elevated>
+ *   <strong>Koncept UI</strong>
+ *   <KptToolbarSpacer />
+ *   <KptButton variant="text">Wyloguj</KptButton>
+ * </KptToolbar>
+ */
+export declare function KptToolbar({ elevated, wrap, className, ...rest }: Readonly<KptToolbarProps>): import("react").JSX.Element;
+/**
+ * Elastyczny odstęp rozpychający zawartość paska. Nosi atrybut `kpttoolbarspacer` —
+ * to po nim celuje wspólny SCSS (nazwy atrybutów w selektorach CSS są w HTML
+ * case-insensitive, więc jedna reguła obsługuje oba porty).
+ */
+export declare function KptToolbarSpacer({ className, ...rest }: Readonly<ComponentPropsWithRef<'span'>>): import("react").JSX.Element;

package/dist/toolbar/toolbar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
+ * Poniżej breakpointa `sm` pasek sam zbiega się do niższej wysokości i węższych marginesów.
+ *
+ * @example
+ * <KptToolbar elevated>
+ *   <strong>Koncept UI</strong>
+ *   <KptToolbarSpacer />
+ *   <KptButton variant="text">Wyloguj</KptButton>
+ * </KptToolbar>
+ */
+export function KptToolbar({ elevated = false, wrap = false, className, ...rest }) {
+    return (_jsx("div", { className: cn('kpt-toolbar', elevated && 'kpt-toolbar--elevated', className), "data-wrap": wrap ? '' : undefined, ...rest }));
+}
+/**
+ * Elastyczny odstęp rozpychający zawartość paska. Nosi atrybut `kpttoolbarspacer` —
+ * to po nim celuje wspólny SCSS (nazwy atrybutów w selektorach CSS są w HTML
+ * case-insensitive, więc jedna reguła obsługuje oba porty).
+ */
+export function KptToolbarSpacer({ className, ...rest }) {
+    return _jsx("span", { kpttoolbarspacer: '', className: className, ...rest });
+}

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export type KptTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface KptTooltipProps {
+    /** Treść dymka. Pusty tekst wyłącza podpowiedź. */
+    text: string;
+    position?: KptTooltipPosition;
+    /**
+     * Pokazuj dymek tylko wtedy, gdy treść nie mieści się w elemencie (jest ucięta wielokropkiem).
+     * Dzięki temu podpowiedź nie powtarza tekstu, który i tak widać.
+     */
+    onlyWhenTruncated?: boolean;
+    /** Dokładnie jeden element — to on dostaje obsługę hovera i fokusu. */
+    children: ReactNode;
+}
+/**
+ * Dymek podpowiedzi pokazywany na hover i focus. Lekki — element dodawany do `body`
+ * i pozycjonowany względem dziecka.
+ *
+ * Port dyrektywy `[kptTooltip]`: nie renderuje własnego opakowania, tylko dokleja handlery
+ * i ref do przekazanego elementu, więc drzewo DOM zostaje takie samo jak bez tooltipa.
+ *
+ * @example
+ * <KptTooltip text="Zapisz zmiany" position="bottom"><KptButton>Zapisz</KptButton></KptTooltip>
+ * <KptTooltip text={name} onlyWhenTruncated><span className="ellipsis">{name}</span></KptTooltip>
+ */
+export declare function KptTooltip({ text, position, onlyWhenTruncated, children }: Readonly<KptTooltipProps>): import("react").JSX.Element;

package/dist/tooltip/tooltip.js

@@ -0,0 +1,113 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useRef } from 'react';
+import { composeRefs } from "../internal/compose-refs.js";
+/**
+ * Dymek podpowiedzi pokazywany na hover i focus. Lekki — element dodawany do `body`
+ * i pozycjonowany względem dziecka.
+ *
+ * Port dyrektywy `[kptTooltip]`: nie renderuje własnego opakowania, tylko dokleja handlery
+ * i ref do przekazanego elementu, więc drzewo DOM zostaje takie samo jak bez tooltipa.
+ *
+ * @example
+ * <KptTooltip text="Zapisz zmiany" position="bottom"><KptButton>Zapisz</KptButton></KptTooltip>
+ * <KptTooltip text={name} onlyWhenTruncated><span className="ellipsis">{name}</span></KptTooltip>
+ */
+export function KptTooltip({ text, position = 'top', onlyWhenTruncated = false, children }) {
+    const hostRef = useRef(null);
+    const tipRef = useRef(null);
+    const reposition = useCallback(() => {
+        const tip = tipRef.current;
+        const host = hostRef.current;
+        if (!tip || !host)
+            return;
+        const r = host.getBoundingClientRect();
+        const t = tip.getBoundingClientRect();
+        const gap = 8;
+        let top;
+        let left;
+        switch (position) {
+            case 'bottom':
+                top = r.bottom + gap;
+                left = r.left + r.width / 2 - t.width / 2;
+                break;
+            case 'left':
+                top = r.top + r.height / 2 - t.height / 2;
+                left = r.left - t.width - gap;
+                break;
+            case 'right':
+                top = r.top + r.height / 2 - t.height / 2;
+                left = r.right + gap;
+                break;
+            default:
+                top = r.top - t.height - gap;
+                left = r.left + r.width / 2 - t.width / 2;
+        }
+        tip.style.top = `${Math.max(4, top)}px`;
+        tip.style.left = `${Math.max(4, left)}px`;
+    }, [position]);
+    const hide = useCallback(() => {
+        window.removeEventListener('scroll', reposition, true);
+        window.removeEventListener('resize', reposition);
+        tipRef.current?.remove();
+        tipRef.current = null;
+    }, [reposition]);
+    const show = useCallback(() => {
+        if (tipRef.current || !text)
+            return;
+        // Sprawdzamy dopiero teraz, a nie przy renderze: dzięki temu wynik jest zawsze aktualny
+        // po zmianie szerokości czy powiększenia, bez żadnych obserwatorów.
+        if (onlyWhenTruncated && !isTruncated(hostRef.current))
+            return;
+        const tip = document.createElement('div');
+        tip.className = 'kpt-tooltip';
+        tip.setAttribute('role', 'tooltip');
+        tip.textContent = text;
+        tip.style.cssText =
+            'position:fixed;z-index:1400;max-width:16rem;padding:0.35rem 0.6rem;' +
+                'border-radius:var(--kpt-radius-sm,0.25rem);font-size:var(--kpt-font-size-xs,0.75rem);' +
+                'line-height:1.4;background:var(--kpt-color-on-surface);color:var(--kpt-color-surface);' +
+                'box-shadow:var(--kpt-elevation-2);pointer-events:none;opacity:0;transition:opacity 120ms;';
+        document.body.appendChild(tip);
+        tipRef.current = tip;
+        reposition();
+        // Faza przechwytywania łapie także przewijanie zagnieżdżonych kontenerów, bo zdarzenie
+        // `scroll` elementu się nie propaguje.
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        requestAnimationFrame(() => {
+            if (tipRef.current)
+                tipRef.current.style.opacity = '1';
+        });
+    }, [text, onlyWhenTruncated, reposition]);
+    if (!isValidElement(children))
+        return _jsx(_Fragment, { children: children });
+    const child = children;
+    const props = child.props;
+    return cloneElement(child, {
+        ref: composeRefs(hostRef, props['ref']),
+        onMouseEnter: chain(props['onMouseEnter'], show),
+        onMouseLeave: chain(props['onMouseLeave'], hide),
+        onFocus: chain(props['onFocus'], show),
+        onBlur: chain(props['onBlur'], hide),
+    });
+}
+/** Handler dziecka najpierw, nasz po nim — jak w scalaniu propsów slotu. */
+function chain(theirs, ours) {
+    return (...args) => {
+        if (typeof theirs === 'function')
+            theirs(...args);
+        ours();
+    };
+}
+/**
+ * Czy treść jest przycięta? Sprawdzamy hosta oraz jego bezpośrednie dzieci, bo
+ * `text-overflow: ellipsis` siedzi zwykle na wewnętrznym elemencie — a taki element kurczy się
+ * do dostępnej szerokości i nie rozpycha rodzica, więc pomiar samego hosta nie wykryłby niczego.
+ */
+function isTruncated(root) {
+    if (!root)
+        return false;
+    // Tolerancja 1 px pochłania zaokrąglenia subpikselowe przy skalowaniu.
+    const overflows = (el) => el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1;
+    return overflows(root) || Array.from(root.children).some(overflows);
+}

package/dist/tree/tree.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptTreeNode<T = unknown> {
+    label: string;
+    value?: T;
+    icon?: string;
+    children?: KptTreeNode<T>[];
+    /** Stan początkowy gałęzi; dalej rozwijaniem steruje już komponent. */
+    expanded?: boolean;
+    disabled?: boolean;
+}
+export interface KptTreeProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect' | 'children'>, KptI18nOverrides {
+    nodes?: KptTreeNode<T>[];
+    /** Klik w wiersz zaznacza gałąź zamiast ją rozwijać. */
+    selectable?: boolean;
+    selected?: KptTreeNode<T> | null;
+    defaultSelected?: KptTreeNode<T> | null;
+    onSelectedChange?: (node: KptTreeNode<T> | null) => void;
+    onNodeClick?: (node: KptTreeNode<T>) => void;
+}
+/**
+ * Drzewo hierarchiczne: rozwijanie, zaznaczanie, ikony.
+ *
+ * Stan rozwinięcia trzyma komponent w zbiorze węzłów, a nie pole `expanded` w danych: mutowanie
+ * cudzej tablicy przy każdym kliknięciu byłoby w Reakcie efektem ubocznym renderu, a `expanded`
+ * z danych zostaje tym, czym powinno być — stanem początkowym.
+ *
+ * @example
+ * <KptTree nodes={tree} selectable selected={node} onSelectedChange={setNode} />
+ */
+export declare function KptTree<T>({ nodes, selectable, selected, defaultSelected, onSelectedChange, onNodeClick, locale, dictionary, className, ...rest }: Readonly<KptTreeProps<T>>): import("react").JSX.Element;

package/dist/tree/tree.js

@@ -0,0 +1,62 @@
+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";
+/**
+ * Drzewo hierarchiczne: rozwijanie, zaznaczanie, ikony.
+ *
+ * Stan rozwinięcia trzyma komponent w zbiorze węzłów, a nie pole `expanded` w danych: mutowanie
+ * cudzej tablicy przy każdym kliknięciu byłoby w Reakcie efektem ubocznym renderu, a `expanded`
+ * z danych zostaje tym, czym powinno być — stanem początkowym.
+ *
+ * @example
+ * <KptTree nodes={tree} selectable selected={node} onSelectedChange={setNode} />
+ */
+export function KptTree({ nodes = [], selectable = false, selected, defaultSelected = null, onSelectedChange, onNodeClick, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [active, setActive] = useControllableState({
+        value: selected,
+        defaultValue: defaultSelected,
+        onChange: onSelectedChange,
+    });
+    // Węzły identyfikujemy referencją — te same obiekty, które przyszły w `nodes`.
+    const [open, setOpen] = useState(() => {
+        const initial = new Set();
+        const walk = (list) => {
+            for (const node of list) {
+                if (node.expanded)
+                    initial.add(node);
+                if (node.children?.length)
+                    walk(node.children);
+            }
+        };
+        walk(nodes);
+        return initial;
+    });
+    const hasChildren = (node) => !!node.children?.length;
+    const isOpen = (node) => open.has(node);
+    const toggle = (node) => {
+        const next = new Set(open);
+        if (next.has(node))
+            next.delete(node);
+        else
+            next.add(node);
+        setOpen(next);
+    };
+    const onRow = (node) => {
+        if (node.disabled)
+            return;
+        if (selectable)
+            setActive(node);
+        else if (hasChildren(node))
+            toggle(node);
+        onNodeClick?.(node);
+    };
+    const renderList = (list, level) => list.map((node, index) => (_jsxs("li", { className: "kpt-tree__node", role: "treeitem", "aria-expanded": hasChildren(node) ? isOpen(node) : undefined, children: [_jsxs("div", { className: cn('kpt-tree__row', active === node && 'is-selected', node.disabled && 'is-disabled'), style: { paddingInlineStart: `${0.5 + level * 1.1}rem` }, onClick: () => onRow(node), children: [hasChildren(node) ? (_jsx("button", { type: "button", className: "kpt-tree__toggle", "aria-label": isOpen(node) ? t('tree.collapse') : t('tree.expand'), onClick: (event) => {
+                            event.stopPropagation();
+                            toggle(node);
+                        }, children: _jsx(KptIcon, { name: "chevron-right", className: cn('kpt-tree__chevron', isOpen(node) && 'is-open') }) })) : (_jsx("span", { className: "kpt-tree__spacer" })), node.icon ? _jsx(KptIcon, { name: node.icon, className: "kpt-tree__icon" }) : null, _jsx("span", { className: "kpt-tree__label", children: node.label })] }), hasChildren(node) && isOpen(node) ? (_jsx("ul", { role: "group", children: renderList(node.children, level + 1) })) : null] }, index)));
+    return (_jsx("div", { className: cn('kpt-tree-host', className), ...rest, children: _jsx("ul", { className: "kpt-tree", role: "tree", children: renderList(nodes, 0) }) }));
+}