@konce-pt/react 0.8.0

package/dist/auth/auth.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useId, useRef, 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 { KptAlert } from "../alert/alert.js";
+import { KptButton } from "../button/button.js";
+import { KptCheckbox } from "../checkbox/checkbox.js";
+import { KptFormField } from "../form-field/form-field.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptInput } from "../input/input.js";
+import { KptPassword } from "../password/password.js";
+import { KPT_AUTH_MIN_PASSWORD, } from "./auth-types.js";
+function makeSlot(name) {
+    const Slot = (_props) => null;
+    Slot.kptAuthSlot = name;
+    Slot.displayName = `KptAuth.${name}`;
+    return Slot;
+}
+const Brand = makeSlot('brand');
+const Promo = makeSlot('promo');
+const Sso = makeSlot('sso');
+const Fields = makeSlot('fields');
+const Footer = makeSlot('footer');
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+/**
+ * Ekran uwierzytelniania: logowanie, rejestracja i odzyskiwanie hasła w jednym komponencie,
+ * z panelem promocyjnym i listą dostawców zewnętrznych.
+ *
+ * Komponent jest prezentacyjny — nie woła API ani nie nawiguje. Wywołania backendu podpina
+ * aplikacja pod `onSignIn` / `onSignUp` / `onResetPassword` / `onProviderSelect`, a stan
+ * operacji podaje z powrotem przez `busy`, `error` i `notice`.
+ *
+ * @example
+ * <KptAuth providers={providers} busy={loading} error={serverError} onSignIn={login}>
+ *   <KptAuth.Brand><img src="/logo.svg" alt="Konce" /></KptAuth.Brand>
+ * </KptAuth>
+ */
+export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = 'slider', providers = [], providerLayout = 'list', showName = true, requireTerms = true, showRemember = true, busy = false, error = null, notice = null, promoTitle = null, promoText = null, animated = true, animationDuration = 320, onSignIn, onSignUp, onResetPassword, onProviderSelect, renderProvider, locale, dictionary, className, style, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [activeMode, setActiveMode] = useControllableState({
+        value: mode,
+        defaultValue: defaultMode,
+        onChange: onModeChange,
+    });
+    const uid = useId();
+    const ids = {
+        signIn: `${uid}-signin`,
+        signUp: `${uid}-signup`,
+        forgot: `${uid}-forgot`,
+        email: `${uid}-email`,
+        password: `${uid}-password`,
+        name: `${uid}-name`,
+        regEmail: `${uid}-reg-email`,
+        regPassword: `${uid}-reg-password`,
+        regConfirm: `${uid}-reg-confirm`,
+        resetEmail: `${uid}-reset-email`,
+    };
+    const headingRef = useRef(null);
+    // ── Sloty ──
+    const slots = {};
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        const name = child.type?.kptAuthSlot;
+        if (name)
+            slots[name] = child.props.children;
+    });
+    // ── Modele formularzy ──
+    const [signInModel, setSignInModel] = useState({
+        email: '',
+        password: '',
+        remember: false,
+    });
+    const [signUpModel, setSignUpModel] = useState({
+        name: '',
+        email: '',
+        password: '',
+        confirm: '',
+        terms: false,
+    });
+    const [resetModel, setResetModel] = useState({ email: '' });
+    const [touched, setTouched] = useState(new Set());
+    const touch = (field) => setTouched((prev) => new Set(prev).add(field));
+    /*
+     * Walidacja jest bezwarunkowa i zwraca sam `kind` — komunikat składamy dopiero przy
+     * renderowaniu, dzięki czemu zmiana języka w runtime przerysowuje błędy. Bramka
+     * „nie strasz czerwienią świeżego pola" (`touched`) żyje w prezentacji, nie w walidatorze,
+     * więc `invalid` mówi prawdę także wtedy, gdy pola nikt jeszcze nie dotknął.
+     */
+    const signInErrors = {
+        email: !signInModel.email ? 'required' : !EMAIL_RE.test(signInModel.email) ? 'email' : null,
+        password: !signInModel.password ? 'required' : null,
+    };
+    const signUpErrors = {
+        name: showName && !signUpModel.name ? 'required' : null,
+        email: !signUpModel.email ? 'required' : !EMAIL_RE.test(signUpModel.email) ? 'email' : null,
+        password: !signUpModel.password
+            ? 'required'
+            : signUpModel.password.length < KPT_AUTH_MIN_PASSWORD
+                ? 'minLength'
+                : null,
+        // Puste „powtórz hasło" nie jest jeszcze niezgodnością — dopiero wpisana, inna wartość.
+        confirm: signUpModel.confirm && signUpModel.confirm !== signUpModel.password ? 'mismatch' : null,
+        terms: requireTerms && !signUpModel.terms ? 'required' : null,
+    };
+    const resetErrors = {
+        email: !resetModel.email ? 'required' : !EMAIL_RE.test(resetModel.email) ? 'email' : null,
+    };
+    const message = (kind) => {
+        switch (kind) {
+            case 'required':
+                return t('auth.errorRequired');
+            case 'email':
+                return t('auth.errorEmail');
+            case 'minLength':
+                return t('auth.errorMinLength', { min: KPT_AUTH_MIN_PASSWORD });
+            case 'mismatch':
+                return t('auth.errorMismatch');
+            default:
+                return null;
+        }
+    };
+    const errorFor = (form, field, kinds) => touched.has(`${form}.${field}`) ? message(kinds[field] ?? null) : null;
+    const anyError = (kinds) => Object.values(kinds).some((kind) => kind !== null);
+    const submitAll = (form, fields) => {
+        // Submit dotyka całego formularza — inaczej pola, których użytkownik nie ruszył, nie
+        // pokazałyby błędu i przycisk wyglądałby na zepsuty.
+        setTouched((prev) => {
+            const next = new Set(prev);
+            for (const field of fields)
+                next.add(`${form}.${field}`);
+            return next;
+        });
+    };
+    const changeMode = (next) => {
+        if (next === activeMode)
+            return;
+        setActiveMode(next);
+        // Fokus na nagłówku nowego trybu: bez tego czytnik nie ogłosi zmiany, a fokus zostaje
+        // na przycisku, który właśnie zjechał z ekranu.
+        requestAnimationFrame(() => headingRef.current?.focus());
+    };
+    const selectProvider = (provider) => {
+        if (busy)
+            return;
+        onProviderSelect?.(provider);
+    };
+    const signUpActive = activeMode === 'signUp';
+    const promoMode = signUpActive ? 'signIn' : 'signUp';
+    const promoHeading = promoTitle === null ? t(`auth.promo.${promoMode}Title`) : promoTitle;
+    const promoBody = promoText === null ? t(`auth.promo.${promoMode}Text`) : promoText;
+    return (_jsx("div", { className: cn('kpt-auth-host', className), "data-layout": layout, "data-mode": activeMode, style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsx("div", { className: "kpt-auth", children: _jsxs("div", { className: "kpt-auth__card", children: [_jsx("div", { className: "kpt-auth__form-side", children: _jsxs("div", { className: "kpt-auth__inner", "data-mode": activeMode, children: [_jsx("div", { className: "kpt-auth__brand", children: slots.brand }), _jsx("h2", { ref: headingRef, className: "kpt-auth__title", id: ids[activeMode], "data-mode": activeMode, tabIndex: -1, children: t(`auth.${activeMode}Title`) }), _jsx("p", { className: "kpt-auth__subtitle", children: t(`auth.${activeMode}Subtitle`) }), error ? _jsx(KptAlert, { variant: "danger", children: error }) : null, notice ? _jsx(KptAlert, { variant: "success", children: notice }) : null, activeMode === 'signIn' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.signIn, onSubmit: (event) => {
+                                        event.preventDefault();
+                                        submitAll('signIn', ['email', 'password']);
+                                        if (!anyError(signInErrors))
+                                            onSignIn?.({ ...signInModel });
+                                    }, children: [_jsx(KptFormField, { label: t('auth.email'), error: errorFor('signIn', 'email', signInErrors), required: true, controlId: ids.email, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.email, placeholder: t('auth.emailPlaceholder'), value: signInModel.email, onValueChange: (email) => setSignInModel({ ...signInModel, email }), onTouch: () => touch('signIn.email') }) }), _jsx(KptFormField, { label: t('auth.password'), error: errorFor('signIn', 'password', signInErrors), required: true, controlId: ids.password, children: _jsx(KptPassword, { autoComplete: "current-password", id: ids.password, value: signInModel.password, onValueChange: (password) => setSignInModel({ ...signInModel, password }), onTouch: () => touch('signIn.password') }) }), slots.fields, _jsxs("div", { className: "kpt-auth__row", children: [showRemember ? (_jsx(KptCheckbox, { label: t('auth.remember'), checked: signInModel.remember, onCheckedChange: (remember) => setSignInModel({ ...signInModel, remember }) })) : (_jsx("span", {})), _jsx("button", { type: "button", className: "kpt-auth__link", onClick: () => changeMode('forgot'), children: t('auth.forgotLink') })] }), _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, disabled: anyError(signInErrors), children: t('auth.signInSubmit') })] })) : null, activeMode === 'signUp' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.signUp, onSubmit: (event) => {
+                                        event.preventDefault();
+                                        submitAll('signUp', ['name', 'email', 'password', 'confirm', 'terms']);
+                                        if (!anyError(signUpErrors)) {
+                                            const { name, email, password, terms } = signUpModel;
+                                            onSignUp?.({ name, email, password, terms });
+                                        }
+                                    }, children: [showName ? (_jsx(KptFormField, { label: t('auth.name'), error: errorFor('signUp', 'name', signUpErrors), required: true, controlId: ids.name, children: _jsx(KptInput, { autoComplete: "name", id: ids.name, value: signUpModel.name, onValueChange: (name) => setSignUpModel({ ...signUpModel, name }), onTouch: () => touch('signUp.name') }) })) : null, _jsx(KptFormField, { label: t('auth.email'), error: errorFor('signUp', 'email', signUpErrors), required: true, controlId: ids.regEmail, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.regEmail, placeholder: t('auth.emailPlaceholder'), value: signUpModel.email, onValueChange: (email) => setSignUpModel({ ...signUpModel, email }), onTouch: () => touch('signUp.email') }) }), _jsx(KptFormField, { label: t('auth.password'), error: errorFor('signUp', 'password', signUpErrors), hint: t('auth.passwordHint', { min: KPT_AUTH_MIN_PASSWORD }), required: true, controlId: ids.regPassword, children: _jsx(KptPassword, { autoComplete: "new-password", feedback: true, id: ids.regPassword, value: signUpModel.password, onValueChange: (password) => setSignUpModel({ ...signUpModel, password }), onTouch: () => touch('signUp.password') }) }), _jsx(KptFormField, { label: t('auth.confirmPassword'), error: errorFor('signUp', 'confirm', signUpErrors), required: true, controlId: ids.regConfirm, children: _jsx(KptPassword, { autoComplete: "new-password", id: ids.regConfirm, value: signUpModel.confirm, onValueChange: (confirm) => setSignUpModel({ ...signUpModel, confirm }), onTouch: () => touch('signUp.confirm') }) }), slots.fields, requireTerms ? (_jsx(KptFormField, { error: errorFor('signUp', 'terms', signUpErrors), children: _jsx(KptCheckbox, { label: t('auth.terms'), checked: signUpModel.terms, onCheckedChange: (terms) => setSignUpModel({ ...signUpModel, terms }), onTouch: () => touch('signUp.terms') }) })) : null, _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, disabled: anyError(signUpErrors), children: t('auth.signUpSubmit') })] })) : null, activeMode === 'forgot' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.forgot, onSubmit: (event) => {
+                                        event.preventDefault();
+                                        submitAll('forgot', ['email']);
+                                        if (!anyError(resetErrors))
+                                            onResetPassword?.({ ...resetModel });
+                                    }, children: [_jsx(KptFormField, { label: t('auth.email'), error: errorFor('forgot', 'email', resetErrors), required: true, controlId: ids.resetEmail, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.resetEmail, placeholder: t('auth.emailPlaceholder'), value: resetModel.email, onValueChange: (email) => setResetModel({ email }), onTouch: () => touch('forgot.email') }) }), _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, disabled: anyError(resetErrors), children: t('auth.resetSubmit') }), _jsx("button", { type: "button", className: "kpt-auth__link kpt-auth__link--center", onClick: () => changeMode('signIn'), children: t('auth.backToSignIn') })] })) : null, activeMode !== 'forgot' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-auth__sso", children: slots.sso }), providers.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-auth__separator", role: "separator", "aria-label": t('auth.orContinueWith'), children: _jsx("span", { className: "kpt-auth__separator-text", children: t('auth.orContinueWith') }) }), _jsx("div", { className: "kpt-auth__providers", "data-layout": providerLayout, children: providers.map((provider) => {
+                                                        const custom = renderProvider?.(provider, () => selectProvider(provider));
+                                                        // Fragment, nie `<span>`: lista dostawców to grid, więc dodatkowy
+                                                        // element stałby się jej dzieckiem i własny przycisk przestałby
+                                                        // rozciągać się na szerokość kolumny (Angular wstawia `ng-container`).
+                                                        if (custom)
+                                                            return _jsx(Fragment, { children: custom }, provider.id);
+                                                        return (_jsxs("button", { type: "button", className: "kpt-auth__provider", disabled: busy, "aria-label": t('auth.continueWith', { provider: provider.label }), onClick: () => selectProvider(provider), children: [provider.iconUrl ? (_jsx("img", { className: "kpt-auth__provider-logo", src: provider.iconUrl, alt: "" })) : provider.icon ? (_jsx(KptIcon, { className: "kpt-auth__provider-logo", name: provider.icon })) : null, _jsx("span", { className: "kpt-auth__provider-label", children: provider.label }), provider.description && providerLayout === 'list' ? (_jsx("span", { className: "kpt-auth__provider-desc", children: provider.description })) : null] }, provider.id));
+                                                    }) })] })) : null, _jsxs("p", { className: "kpt-auth__switch", children: [signUpActive ? t('auth.haveAccount') : t('auth.noAccount'), ' ', _jsx("button", { type: "button", className: "kpt-auth__link", onClick: () => changeMode(signUpActive ? 'signIn' : 'signUp'), children: signUpActive ? t('auth.signInSwitch') : t('auth.signUpSwitch') })] })] })) : null, _jsx("div", { className: "kpt-auth__footer", children: slots.footer })] }) }), _jsx("aside", { className: "kpt-auth__promo", children: _jsxs("div", { className: "kpt-auth__promo-inner", children: [promoHeading ? _jsx("p", { className: "kpt-auth__promo-title", children: promoHeading }) : null, promoBody ? _jsx("p", { className: "kpt-auth__promo-text", children: promoBody }) : null, slots.promo, activeMode !== 'forgot' ? (_jsx(KptButton, { hostProps: { className: 'kpt-auth__promo-cta' }, variant: "outline", onClick: () => changeMode(promoMode), children: promoMode === 'signUp' ? t('auth.signUpSwitch') : t('auth.signInSwitch') })) : null] }) })] }) }) }));
+}
+KptAuth.Brand = Brand;
+KptAuth.Promo = Promo;
+KptAuth.Sso = Sso;
+KptAuth.Fields = Fields;
+KptAuth.Footer = Footer;

package/dist/autocomplete/autocomplete.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface KptAutocompleteProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange'> {
+    options?: string[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Pole z podpowiedziami. Wartością jest wpisany tekst, nie wybrana opcja — podpowiedzi
+ * skracają pisanie, ale nie ograniczają wpisu, więc pole nadaje się też do wartości spoza listy.
+ *
+ * @example
+ * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto…" />
+ */
+export declare function KptAutocomplete({ options, value, defaultValue, onValueChange, invalid, touched, onTouch, disabled, className, onBlur, onFocus, onKeyDown, ref, ...rest }: Readonly<KptAutocompleteProps>): import("react").JSX.Element;

package/dist/autocomplete/autocomplete.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+/**
+ * Pole z podpowiedziami. Wartością jest wpisany tekst, nie wybrana opcja — podpowiedzi
+ * skracają pisanie, ale nie ograniczają wpisu, więc pole nadaje się też do wartości spoza listy.
+ *
+ * @example
+ * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto…" />
+ */
+export function KptAutocomplete({ options = [], value, defaultValue = '', onValueChange, invalid = false, touched, onTouch, disabled = false, className, onBlur, onFocus, onKeyDown, ref, ...rest }) {
+    const inputRef = useRef(null);
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const showInvalid = invalid && (touched ?? true);
+    const filtered = useMemo(() => {
+        const q = current.trim().toLowerCase();
+        return q ? options.filter((option) => option.toLowerCase().includes(q)) : options;
+    }, [options, current]);
+    const pick = useCallback((option) => {
+        setCurrent(option);
+        setOpen(false);
+    }, [setCurrent]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setOpen(true);
+            setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveIndex((index) => Math.max(index - 1, 0));
+        }
+        else if (event.key === 'Enter') {
+            const option = filtered[activeIndex];
+            if (option) {
+                event.preventDefault();
+                pick(option);
+            }
+        }
+        else if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    };
+    return (_jsxs("span", { className: "kpt-autocomplete-host", children: [_jsx("input", { ref: composeRefs(inputRef, ref), className: cn('kpt-autocomplete__input', className), type: "text", role: "combobox", "aria-expanded": open, "aria-invalid": showInvalid || undefined, disabled: disabled, value: current, onChange: (event) => {
+                    setCurrent(event.target.value);
+                    setOpen(true);
+                    setActiveIndex(-1);
+                }, onFocus: (event) => {
+                    onFocus?.(event);
+                    setOpen(true);
+                }, onBlur: (event) => {
+                    onBlur?.(event);
+                    setOpen(false);
+                    onTouch?.();
+                }, onKeyDown: handleKeyDown, ...rest }), _jsx(KptOverlay, { open: open && filtered.length > 0, anchor: inputRef.current, onClose: () => setOpen(false), matchAnchorWidth: true, withBackdrop: false, children: _jsx("ul", { className: "kpt-autocomplete__panel", role: "listbox", children: filtered.map((option, index) => (_jsx("li", { className: cn('kpt-autocomplete__option', index === activeIndex && 'is-active'), role: "option", "aria-selected": index === activeIndex, 
+                        // `mousedown` z zablokowanym domyślnym zachowaniem: klik w opcję nie może
+                        // zabrać fokusu polu, bo `blur` zamknąłby panel przed wyborem.
+                        onMouseDown: (event) => {
+                            event.preventDefault();
+                            pick(option);
+                        }, onMouseEnter: () => setActiveIndex(index), children: option }, option))) }) })] }));
+}

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+export type KptAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type KptAvatarShape = 'circle' | 'square';
+export interface KptAvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+    /** Adres obrazu; ma pierwszeństwo przed inicjałami i ikoną. */
+    src?: string | null;
+    /** Imię i nazwisko — źródło inicjałów, `title` oraz etykiety dostępności. */
+    name?: string;
+    /** Nazwa ikony z rejestru, gdy nie ma obrazu ani nazwy. */
+    icon?: string | null;
+    size?: KptAvatarSize;
+    shape?: KptAvatarShape;
+    /**
+     * Propsy wrappera hosta (`.kpt-avatar-host`). To on jest elementem układu, więc klasy
+     * pozycjonujące awatar w rodzicu — jak `kpt-card__avatar` — idą właśnie tutaj.
+     */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Awatar — obraz, inicjały (z `name`) lub ikona.
+ *
+ * `name` trafia do natywnego `title` (podpowiedź spod kursora — inicjały same w sobie nie mówią,
+ * kto to jest). Bez `src` awatar dostaje dodatkowo `role="img"` i `aria-label`, a same inicjały
+ * są `aria-hidden`, żeby czytnik nie przeczytał „AK" litera po literze. Przy `src` etykietę
+ * niesie już `alt` obrazu — nie dublujemy jej.
+ *
+ * @example
+ * <KptAvatar src="/u/anna.jpg" />
+ * <KptAvatar name="Anna Kowalska" size="lg" />
+ * <KptAvatar icon="user" shape="square" />
+ */
+export declare function KptAvatar({ src, name, icon, size, shape, hostProps, className, ...rest }: Readonly<KptAvatarProps>): import("react").JSX.Element;

package/dist/avatar/avatar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Awatar — obraz, inicjały (z `name`) lub ikona.
+ *
+ * `name` trafia do natywnego `title` (podpowiedź spod kursora — inicjały same w sobie nie mówią,
+ * kto to jest). Bez `src` awatar dostaje dodatkowo `role="img"` i `aria-label`, a same inicjały
+ * są `aria-hidden`, żeby czytnik nie przeczytał „AK" litera po literze. Przy `src` etykietę
+ * niesie już `alt` obrazu — nie dublujemy jej.
+ *
+ * @example
+ * <KptAvatar src="/u/anna.jpg" />
+ * <KptAvatar name="Anna Kowalska" size="lg" />
+ * <KptAvatar icon="user" shape="square" />
+ */
+export function KptAvatar({ src = null, name = '', icon = null, size = 'md', shape = 'circle', hostProps, className, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const labelled = !src && !!name;
+    return (_jsx("span", { className: cn('kpt-avatar-host', hostClassName), ...hostRest, children: _jsx("span", { className: cn('kpt-avatar', className), ...rest, "data-size": size, "data-shape": shape, title: name || undefined, role: labelled ? 'img' : undefined, "aria-label": labelled ? name : undefined, children: src ? (_jsx("img", { className: "kpt-avatar__img", src: src, alt: name })) : name ? (_jsx("span", { className: "kpt-avatar__initials", "aria-hidden": "true", children: initialsOf(name) })) : icon ? (_jsx(KptIcon, { name: icon })) : null }) }));
+}
+/** Do dwóch pierwszych liter z kolejnych członów nazwy. */
+function initialsOf(name) {
+    return name
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((word) => word[0]?.toUpperCase() ?? '')
+        .join('');
+}

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

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptAvatarSize } from '../avatar/avatar.tsx';
+export interface KptAvatarItem {
+    name?: string;
+    src?: string;
+    icon?: string;
+}
+export interface KptAvatarGroupProps extends ComponentPropsWithRef<'div'> {
+    avatars?: KptAvatarItem[];
+    /** Ile awatarów pokazać, zanim pojawi się „+N". */
+    max?: number;
+    size?: KptAvatarSize;
+}
+/**
+ * Grupa nakładających się awatarów z licznikiem „+N". Buduje na `KptAvatar`, więc każdy element
+ * dziedziczy jego `title` z imieniem — inicjały same w sobie nie mówią, kto to jest.
+ *
+ * @example
+ * <KptAvatarGroup avatars={team} max={4} />
+ */
+export declare function KptAvatarGroup({ avatars, max, size, className, ...rest }: Readonly<KptAvatarGroupProps>): import("react").JSX.Element;

package/dist/avatar-group/avatar-group.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { KptAvatar } from "../avatar/avatar.js";
+/**
+ * Grupa nakładających się awatarów z licznikiem „+N". Buduje na `KptAvatar`, więc każdy element
+ * dziedziczy jego `title` z imieniem — inicjały same w sobie nie mówią, kto to jest.
+ *
+ * @example
+ * <KptAvatarGroup avatars={team} max={4} />
+ */
+export function KptAvatarGroup({ avatars = [], max = 4, size = 'md', className, ...rest }) {
+    const shown = avatars.slice(0, max);
+    const overflow = Math.max(0, avatars.length - max);
+    return (_jsx("div", { className: cn('kpt-avatar-group-host', className), ...rest, children: _jsxs("div", { className: "kpt-avatar-group", "data-size": size, children: [shown.map((avatar, index) => (_jsx("span", { className: "kpt-avatar-group__item", children: _jsx(KptAvatar, { name: avatar.name || '', src: avatar.src || null, icon: avatar.icon || null, size: size }) }, index))), overflow > 0 ? (_jsxs("span", { className: "kpt-avatar-group__item kpt-avatar-group__more", "data-size": size, children: ["+", overflow] })) : null] }) }));
+}

package/dist/badge/badge.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export type KptBadgeVariant = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+export type KptBadgeSize = 'sm' | 'md' | 'lg';
+export interface KptBadgeProps extends ComponentPropsWithRef<'span'> {
+    value?: string | number | null;
+    variant?: KptBadgeVariant;
+    /** Rozmiar — `sm` mieści się w wierszu tekstu, `md` to domyślny licznik. */
+    size?: KptBadgeSize;
+    /** Sama kropka statusu, bez liczby. */
+    dot?: boolean;
+    /** Nałożenie na treść podaną jako `children`. */
+    overlay?: boolean;
+    /** Powyżej tej wartości licznik pokazuje `99+`. */
+    max?: number;
+    children?: ReactNode;
+}
+/**
+ * Znacznik (badge) — licznik lub kropka statusu. Samodzielny albo nałożony na treść (`overlay`).
+ *
+ * @example
+ * <KptBadge value={3} variant="danger" />
+ * <KptBadge value={128} overlay><KptIcon name="menu" /></KptBadge>
+ * <KptBadge dot variant="success" overlay><KptAvatar name="AK" /></KptBadge>
+ */
+export declare function KptBadge({ value, variant, size, dot, overlay, max, className, children, ...rest }: Readonly<KptBadgeProps>): import("react").JSX.Element;

package/dist/badge/badge.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Znacznik (badge) — licznik lub kropka statusu. Samodzielny albo nałożony na treść (`overlay`).
+ *
+ * @example
+ * <KptBadge value={3} variant="danger" />
+ * <KptBadge value={128} overlay><KptIcon name="menu" /></KptBadge>
+ * <KptBadge dot variant="success" overlay><KptAvatar name="AK" /></KptBadge>
+ */
+export function KptBadge({ value = null, variant = 'primary', size = 'md', dot = false, overlay = false, max = 99, className, children, ...rest }) {
+    const display = typeof value === 'number' && value > max ? `${max}+` : (value ?? '');
+    return (_jsxs("span", { className: cn('kpt-badge-host', className), ...rest, children: [children, _jsx("span", { className: cn('kpt-badge', overlay && 'kpt-badge--overlay', dot && 'kpt-badge--dot'), "data-variant": variant, "data-size": size, children: dot ? '' : display })] }));
+}

package/dist/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptBottomSheetProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    header?: string;
+    closeOnBackdrop?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Arkusz wysuwany z dołu ekranu.
+ *
+ * Arkusz zostaje w DOM także zamknięty — chowa go `transform` i `visibility`, nigdy
+ * `display: none`, bo inaczej animacje wjazdu i zjazdu nie miałyby od czego wystartować.
+ * `visibility` wyjmuje go przy tym z kolejności Tab i z drzewa dostępności bez `inert`,
+ * i robi to już na pierwszej klatce.
+ *
+ * @example
+ * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">…</KptBottomSheet>
+ */
+export declare function KptBottomSheet({ open, onOpenChange, header, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptBottomSheetProps>): import("react").JSX.Element;

package/dist/bottom-sheet/bottom-sheet.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+/**
+ * Arkusz wysuwany z dołu ekranu.
+ *
+ * Arkusz zostaje w DOM także zamknięty — chowa go `transform` i `visibility`, nigdy
+ * `display: none`, bo inaczej animacje wjazdu i zjazdu nie miałyby od czego wystartować.
+ * `visibility` wyjmuje go przy tym z kolejności Tab i z drzewa dostępności bez `inert`,
+ * i robi to już na pierwszej klatce.
+ *
+ * @example
+ * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">…</KptBottomSheet>
+ */
+export function KptBottomSheet({ open, onOpenChange, header = '', closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const close = () => onOpenChange(false);
+    return (_jsxs("div", { className: cn('kpt-bottom-sheet-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-bottom-sheet__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("div", { className: cn('kpt-bottom-sheet__panel', open && 'is-open'), role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: (event) => {
+                    if (event.key === 'Escape')
+                        close();
+                }, children: [_jsx("button", { type: "button", className: "kpt-bottom-sheet__handle", onClick: close, "aria-label": t('common.close') }), header ? _jsx("div", { className: "kpt-bottom-sheet__header", children: header }) : null, _jsx("div", { className: "kpt-bottom-sheet__body", children: children })] })] }));
+}

package/dist/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptBreadcrumbItem {
+    label: string;
+    url?: string;
+}
+export interface KptBreadcrumbProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    items?: KptBreadcrumbItem[];
+}
+/**
+ * Ścieżka nawigacji (breadcrumbs).
+ *
+ * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` — to bieżąca strona, a link
+ * prowadzący w to samo miejsce, w którym już jesteś, tylko myli.
+ *
+ * @example
+ * <KptBreadcrumb items={[{ label: 'Start', url: '/' }, { label: 'Ustawienia' }]} />
+ */
+export declare function KptBreadcrumb({ items, locale, dictionary, className, ...rest }: Readonly<KptBreadcrumbProps>): import("react").JSX.Element;

package/dist/breadcrumb/breadcrumb.js

@@ -0,0 +1,20 @@
+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";
+/**
+ * Ścieżka nawigacji (breadcrumbs).
+ *
+ * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` — to bieżąca strona, a link
+ * prowadzący w to samo miejsce, w którym już jesteś, tylko myli.
+ *
+ * @example
+ * <KptBreadcrumb items={[{ label: 'Start', url: '/' }, { label: 'Ustawienia' }]} />
+ */
+export function KptBreadcrumb({ items = [], locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    return (_jsx("div", { className: cn('kpt-breadcrumb-host', className), ...rest, children: _jsx("nav", { className: "kpt-breadcrumb", "aria-label": t('breadcrumb.label'), children: items.map((item, index) => {
+                const last = index === items.length - 1;
+                return (_jsxs("span", { style: { display: 'contents' }, children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, index));
+            }) }) }));
+}

package/dist/button/button.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { AsChildProps, KptHostProps } from '../internal/types.ts';
+export type KptButtonVariant = 'filled' | 'tonal' | 'outline' | 'text' | 'danger';
+export type KptButtonSize = 'sm' | 'md' | 'lg';
+export interface KptButtonProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+    /** Wariant wizualny. */
+    variant?: KptButtonVariant;
+    /** Rozmiar. */
+    size?: KptButtonSize;
+    /** Spinner + zablokowana interakcja; ustawia `aria-busy`. */
+    loading?: boolean;
+    /** Pełna szerokość kontenera. */
+    fullWidth?: boolean;
+    /** Propsy wrappera hosta (`.kpt-button-host`). `className` i `ref` idą na `<button>`. */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
+ * w hoście `.kpt-button-host` — dwa poziomy DOM, dokładnie jak w porcie Angulara,
+ * bo host niesie własne style (`display: inline-flex`, wariant pełnej szerokości).
+ *
+ * @example
+ * <KptButton onClick={save}>Zapisz</KptButton>
+ * <KptButton variant="outline" size="sm">Anuluj</KptButton>
+ * <KptButton asChild><a href="/docs">Dokumentacja</a></KptButton>
+ */
+export declare function KptButton({ variant, size, type, loading, fullWidth, disabled, asChild, hostProps, className, children, ...rest }: Readonly<KptButtonProps>): import("react").JSX.Element;

package/dist/button/button.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { cn } from "../internal/cn.js";
+import { renderAsChild } from "../internal/slot.js";
+/**
+ * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
+ * w hoście `.kpt-button-host` — dwa poziomy DOM, dokładnie jak w porcie Angulara,
+ * bo host niesie własne style (`display: inline-flex`, wariant pełnej szerokości).
+ *
+ * @example
+ * <KptButton onClick={save}>Zapisz</KptButton>
+ * <KptButton variant="outline" size="sm">Anuluj</KptButton>
+ * <KptButton asChild><a href="/docs">Dokumentacja</a></KptButton>
+ */
+export function KptButton({ variant = 'filled', size = 'md', type = 'button', loading = false, fullWidth = false, disabled = false, asChild = false, hostProps, className, children, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const isDisabled = disabled || loading;
+    // Zawartość jest identyczna w obu trybach — w `asChild` podmieniamy tylko element
+    // zewnętrzny, nie strukturę środka, żeby SCSS (`__spinner`, `__content`) dalej działał.
+    const content = (_jsxs(_Fragment, { children: [loading ? _jsx("span", { className: "kpt-button__spinner", "aria-hidden": "true" }) : null, _jsx("span", { className: "kpt-button__content", children: asChildContent(asChild, children) })] }));
+    const buttonProps = {
+        className: cn('kpt-button', loading && 'kpt-button--loading', className),
+        'data-variant': variant,
+        'data-size': size,
+        // React serializuje atrybuty aria-* z booleana na "true"/"false" — wynikowy DOM
+        // ma `aria-busy="true"`, tak jak port Angulara.
+        'aria-busy': loading || undefined,
+        ...rest,
+    };
+    return (_jsx("span", { className: cn('kpt-button-host', fullWidth && 'kpt-button-host--full', hostClassName), ...hostRest, children: asChild && isValidElement(children) ? (renderAsChild(children, { ...buttonProps, ...disabledProps(children, isDisabled) }, content)) : (_jsx("button", { type: type, disabled: isDisabled, ...buttonProps, children: content })) }));
+}
+/**
+ * Stan wyłączenia dla podstawionego elementu. Natywny `<button>` dostaje `disabled`
+ * (SCSS stylizuje `:disabled`); każdy inny element — `aria-disabled`, bo `disabled`
+ * nie ma tam znaczenia. Element bez `:disabled` nie dostanie wyglądu wyłączonego,
+ * więc `asChild` + `disabled` to świadomie ograniczone połączenie.
+ */
+function disabledProps(child, isDisabled) {
+    if (!isDisabled)
+        return {};
+    const isNativeButton = isValidElement(child) && child.type === 'button';
+    return isNativeButton ? { disabled: true } : { 'aria-disabled': true };
+}
+/** W trybie `asChild` treścią są dzieci podstawionego elementu, nie on sam. */
+function asChildContent(asChild, children) {
+    if (!asChild || !isValidElement(children))
+        return children;
+    return children.props.children;
+}

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

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+import type { KptOption } from '../shared/types.ts';
+export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange' | 'defaultValue'> {
+    options?: KptOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Wywoływane po wyborze — moment, w którym kontrolka staje się dotknięta. */
+    onTouch?: () => void;
+    /** Propsy wrappera hosta (`.kpt-button-group-host`). */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
+ *
+ * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
+ *
+ * @example
+ * <KptButtonGroup value={view} onValueChange={setView}
+ *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
+ */
+export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, onTouch, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;