@konce-pt/react 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 konce.pt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+<p align="center">
+  <img src="https://ui.konce.pt/images/koncept_ui_lib.png" alt="Koncept UI — component library" width="100%" />
+</p>
+
+# @konce-pt/react
+
+Komponenty React 19 systemu projektowego [Koncept UI](https://gitlab.com/konce-pt/koncept-ui).
+Ta sama warstwa CSS co port Angulara — te same klasy `kpt-*`, te same tokeny `--kpt-*` —
+więc oba frameworki wyglądają identycznie. **Zero zależności runtime.**
+
+```bash
+npm i @konce-pt/react @konce-pt/styles @konce-pt/tokens
+```
+
+CSS ładujesz raz, w wejściu aplikacji (pakiet wysyła wyłącznie JavaScript):
+
+```ts
+import '@konce-pt/tokens/css';
+import '@konce-pt/tokens/css/dark';
+import '@konce-pt/styles'; // reset, warstwy, motyw
+import '@konce-pt/styles/components'; // warstwa komponentów — wymagane
+import '@konce-pt/grid'; // opcjonalnie — klasy układu
+```
+
+```tsx
+import { KptI18nProvider, useKptI18n } from '@konce-pt/react';
+
+export function App() {
+  return (
+    <KptI18nProvider locale="pl">
+      <Toolbar />
+    </KptI18nProvider>
+  );
+}
+
+function Toolbar() {
+  const { t } = useKptI18n();
+  return <span>{t('paginator.range', { start: 1, end: 10, total: 42 })}</span>;
+}
+```
+
+## Zasady portu
+
+- Drzewo DOM odpowiada wersji Angulara węzeł w węzeł — host jest odtwarzany jako wrapper
+  (`<span class="kpt-button-host">` wokół `<button class="kpt-button">`), dzięki czemu SCSS
+  jest reużyty bez zmian.
+- `ref` i `className` trafiają na element wewnętrzny; wrapper konfiguruje `hostProps`.
+- Warianty i rozmiary przez atrybuty `data-*`, nie przez klasy modyfikatorów.
+- React 19: `ref` jest zwykłym propem — bez `forwardRef`.
+- Kontrolki formularza działają kontrolowane i niekontrolowane, z natywnym `name`/`form`
+  (React 19 Actions i React Hook Form bez adaptera).
+- Tłumaczenia pochodzą z `@konce-pt/i18n`, wspólnego z portem Angulara.
+
+Pełna dokumentacja dla modeli: [`llms.txt`](./llms.txt) (EN) i [`llms-pl.txt`](./llms-pl.txt) (PL).
+
+## Licencja
+
+MIT © konce.pt

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,45 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface KptAccordionProps extends ComponentPropsWithRef<'div'> {
+    /** Pozwala trzymać otwartych wiele paneli naraz. */
+    multi?: boolean;
+    animated?: boolean;
+    animationDuration?: number;
+    /** Indeksy otwartych paneli. */
+    openIndexes?: number[];
+    defaultOpenIndexes?: number[];
+    onOpenIndexesChange?: (indexes: number[]) => void;
+    children?: ReactNode;
+}
+/**
+ * Akordeon — grupa rozwijanych paneli. `multi` pozwala otworzyć wiele naraz.
+ *
+ * Stan otwarcia trzyma akordeon, a panele dostają swój indeks przez klonowanie — inaczej
+ * pojedynczy tryb nie miałby jak zamknąć rodzeństwa. Panel użyty samodzielnie, poza akordeonem,
+ * zarządza sobą sam.
+ *
+ * @example
+ * <KptAccordion>
+ *   <KptAccordion.Panel title="Sekcja 1">…</KptAccordion.Panel>
+ *   <KptAccordion.Panel title="Sekcja 2">…</KptAccordion.Panel>
+ * </KptAccordion>
+ */
+export declare function KptAccordion({ multi, animated, animationDuration, openIndexes, defaultOpenIndexes, onOpenIndexesChange, className, children, ...rest }: Readonly<KptAccordionProps>): import("react").JSX.Element;
+export declare namespace KptAccordion {
+    var Panel: typeof KptAccordionPanel;
+}
+export interface KptAccordionPanelProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    title: string;
+    disabled?: boolean;
+    /** Używane, gdy panel stoi poza akordeonem. */
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Wstawiany przez akordeon — nie podawaj ręcznie. */
+    index?: number;
+    children?: ReactNode;
+}
+/** Panel akordeonu. Umieszczaj w `<KptAccordion>` albo używaj samodzielnie. */
+export declare function KptAccordionPanel({ title, disabled, expanded, defaultExpanded, onExpandedChange, index, className, style, children, ...rest }: Readonly<KptAccordionPanelProps>): import("react").JSX.Element;
+export declare namespace KptAccordionPanel {
+    var kptAccordionSlot: "panel";
+}

package/dist/accordion/accordion.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useContext, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { KptIcon } from "../icon/icon.js";
+const AccordionContext = createContext(null);
+/**
+ * Akordeon — grupa rozwijanych paneli. `multi` pozwala otworzyć wiele naraz.
+ *
+ * Stan otwarcia trzyma akordeon, a panele dostają swój indeks przez klonowanie — inaczej
+ * pojedynczy tryb nie miałby jak zamknąć rodzeństwa. Panel użyty samodzielnie, poza akordeonem,
+ * zarządza sobą sam.
+ *
+ * @example
+ * <KptAccordion>
+ *   <KptAccordion.Panel title="Sekcja 1">…</KptAccordion.Panel>
+ *   <KptAccordion.Panel title="Sekcja 2">…</KptAccordion.Panel>
+ * </KptAccordion>
+ */
+export function KptAccordion({ multi = false, animated = true, animationDuration = 500, openIndexes, defaultOpenIndexes = [], onOpenIndexesChange, className, children, ...rest }) {
+    const [open, setOpen] = useControllableState({
+        value: openIndexes,
+        defaultValue: defaultOpenIndexes,
+        onChange: onOpenIndexesChange,
+    });
+    const context = {
+        isOpen: (index) => open.includes(index),
+        toggle: (index, willOpen) => {
+            if (!willOpen)
+                setOpen(open.filter((i) => i !== index));
+            else
+                setOpen(multi ? [...open, index] : [index]);
+        },
+        animMs: `${animated ? animationDuration : 0}ms`,
+    };
+    let index = -1;
+    const panels = Children.map(children, (child) => {
+        if (!isValidElement(child) || child.type?.kptAccordionSlot !== 'panel') {
+            return child;
+        }
+        index += 1;
+        return cloneElement(child, { index });
+    });
+    return (_jsx(AccordionContext.Provider, { value: context, children: _jsx("div", { className: cn('kpt-accordion-host', className), ...rest, children: panels }) }));
+}
+/** Panel akordeonu. Umieszczaj w `<KptAccordion>` albo używaj samodzielnie. */
+export function KptAccordionPanel({ title, disabled = false, expanded, defaultExpanded = false, onExpandedChange, index, className, style, children, ...rest }) {
+    const accordion = useContext(AccordionContext);
+    const [standalone, setStandalone] = useControllableState({
+        value: expanded,
+        defaultValue: defaultExpanded,
+        onChange: onExpandedChange,
+    });
+    const managed = accordion !== null && index !== undefined;
+    const isOpen = managed ? accordion.isOpen(index) : standalone;
+    const toggle = () => {
+        if (disabled)
+            return;
+        const willOpen = !isOpen;
+        if (managed)
+            accordion.toggle(index, willOpen);
+        else
+            setStandalone(willOpen);
+        onExpandedChange?.(willOpen);
+    };
+    return (_jsx("div", { className: cn('kpt-accordion-panel-host', className), style: { ['--kpt-anim-duration']: accordion?.animMs ?? '500ms', ...style }, ...rest, children: _jsxs("div", { className: cn('kpt-accordion-panel', isOpen && 'is-open'), children: [_jsxs("button", { type: "button", className: "kpt-accordion-panel__header", "aria-expanded": isOpen, disabled: disabled, onClick: toggle, children: [_jsx("span", { className: "kpt-accordion-panel__title", children: title }), _jsx(KptIcon, { name: "chevron-down", className: cn('kpt-accordion-panel__chevron', isOpen && 'is-open') })] }), _jsx("div", { className: cn('kpt-accordion-panel__collapse', isOpen && 'is-open'), inert: !isOpen, "aria-hidden": !isOpen, children: _jsx("div", { className: "kpt-accordion-panel__collapse-inner", children: _jsx("div", { className: "kpt-accordion-panel__body", children: children }) }) })] }) }));
+}
+KptAccordionPanel.kptAccordionSlot = 'panel';
+KptAccordion.Panel = KptAccordionPanel;

package/dist/alert/alert.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptAlertVariant } from '../shared/types.ts';
+export type { KptAlertVariant };
+export interface KptAlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title'>, KptI18nOverrides {
+    variant?: KptAlertVariant;
+    title?: string;
+    /** Dokłada przycisk zamykania. */
+    dismissible?: boolean;
+    /** Wywoływane po zamknięciu przez użytkownika. */
+    onClosed?: () => void;
+    children?: ReactNode;
+}
+/**
+ * Komunikat inline (alert). Warianty info/success/warning/danger, opcjonalny tytuł i zamykanie.
+ *
+ * Zamknięcie chowa komunikat atrybutem `hidden` (tak samo jak port Angulara), a nie odmontowuje
+ * go — dzięki temu ten sam alert da się pokazać ponownie bez przebudowy drzewa. Gdy wolisz nim
+ * sterować z zewnątrz, po prostu nie renderuj komponentu.
+ *
+ * @example
+ * <KptAlert variant="success" title="Zapisano">Zmiany zostały zapisane.</KptAlert>
+ * <KptAlert variant="warning" dismissible onClosed={onClosed}>Uwaga…</KptAlert>
+ */
+export declare function KptAlert({ variant, title, dismissible, onClosed, locale, dictionary, className, children, ...rest }: Readonly<KptAlertProps>): import("react").JSX.Element;

package/dist/alert/alert.js

@@ -0,0 +1,31 @@
+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 { KptIcon } from "../icon/icon.js";
+const ICONS = {
+    info: 'info',
+    success: 'circle-check',
+    warning: 'alert-triangle',
+    danger: 'circle-x',
+};
+/**
+ * Komunikat inline (alert). Warianty info/success/warning/danger, opcjonalny tytuł i zamykanie.
+ *
+ * Zamknięcie chowa komunikat atrybutem `hidden` (tak samo jak port Angulara), a nie odmontowuje
+ * go — dzięki temu ten sam alert da się pokazać ponownie bez przebudowy drzewa. Gdy wolisz nim
+ * sterować z zewnątrz, po prostu nie renderuj komponentu.
+ *
+ * @example
+ * <KptAlert variant="success" title="Zapisano">Zmiany zostały zapisane.</KptAlert>
+ * <KptAlert variant="warning" dismissible onClosed={onClosed}>Uwaga…</KptAlert>
+ */
+export function KptAlert({ variant = 'info', title = '', dismissible = false, onClosed, locale, dictionary, className, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [visible, setVisible] = useState(true);
+    const dismiss = () => {
+        setVisible(false);
+        onClosed?.();
+    };
+    return (_jsx("div", { className: cn('kpt-alert-host', className), hidden: !visible, ...rest, children: _jsxs("div", { className: "kpt-alert", "data-variant": variant, role: "alert", children: [_jsx(KptIcon, { className: "kpt-alert__icon", name: ICONS[variant] }), _jsxs("div", { className: "kpt-alert__content", children: [title ? _jsx("div", { className: "kpt-alert__title", children: title }) : null, _jsx("div", { className: "kpt-alert__message", children: children })] }), dismissible ? (_jsx("button", { className: "kpt-alert__close", type: "button", onClick: dismiss, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] }) }));
+}

package/dist/app-shell/app-shell.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptBreakpoint } from '../internal/use-breakpoint.ts';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/**
+ * Zachowanie panelu bocznego:
+ * - `auto` — zależne od szerokości okna (domyślne),
+ * - `side` — zawsze zadokowany, rozpycha treść,
+ * - `over` — zawsze nakładka nad treścią.
+ */
+export type KptSidenavMode = 'side' | 'over' | 'auto';
+export interface KptAppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    /** Slot górnego paska — renderowany nad obszarem treści (zwykle `<KptToolbar>`). */
+    toolbar?: ReactNode;
+    /** Slot panelu bocznego (zwykle `<KptSidenav>`). */
+    sidenav?: ReactNode;
+    /** Treść aplikacji. */
+    children?: ReactNode;
+    /** Czy panel jest otwarty w układzie zadokowanym (oraz w wymuszonym trybie `over`). */
+    sidenavOpen?: boolean;
+    defaultSidenavOpen?: boolean;
+    onSidenavOpenChange?: (open: boolean) => void;
+    /**
+     * Czy nakładka jest wysunięta w trybie `auto` poniżej `sidenavBreakpoint`.
+     *
+     * Celowo osobny od `sidenavOpen`: gdyby oba układy dzieliły jeden stan, wejście na wąski
+     * ekran musiałoby nadpisać stan konsumenta, a powrót na szeroki nie miałby czego przywrócić.
+     */
+    sidenavCompactOpen?: boolean;
+    defaultSidenavCompactOpen?: boolean;
+    onSidenavCompactOpenChange?: (open: boolean) => void;
+    /** `auto` przełącza układ na breakpoincie; `side`/`over` wymuszają go niezależnie od szerokości. */
+    sidenavMode?: KptSidenavMode;
+    /** Od tego breakpointa w górę tryb `auto` dokuje panel; poniżej robi z niego nakładkę. */
+    sidenavBreakpoint?: KptBreakpoint;
+    /**
+     * Włącza szynę ikon w paśmie od `sidenavBreakpoint` do tego breakpointa: zamknięty panel
+     * nie chowa się wtedy całkowicie, tylko zwęża do `--kpt-sidenav-rail-width`. Wartość musi
+     * być wyższa niż `sidenavBreakpoint`. `null` (domyślnie) wyłącza szynę.
+     */
+    sidenavRailBreakpoint?: KptBreakpoint | null;
+    /** Etykieta dostępności panelu; puste = `appShell.navigation` ze słownika. */
+    sidenavLabel?: string;
+}
+/** Kontrakt kontekstu shella — czytany przez `useKptAppShell()` i przełącznik panelu. */
+export interface KptAppShellContextValue {
+    /** Efektywny stan otwarcia — ten, który obowiązuje w bieżącym układzie. */
+    isSidenavOpen: boolean;
+    /** Czy panel zachowuje się TERAZ jak nakładka nad treścią. */
+    isOverlay: boolean;
+    /** Identyfikator panelu dla `aria-controls`. */
+    sidenavId: string;
+    toggleSidenav: () => void;
+    openSidenav: () => void;
+    closeSidenav: () => void;
+}
+/**
+ * Szkielet aplikacji: pasek u góry, panel boczny i treść.
+ *
+ * Domyślny tryb `auto` jest responsywny bez konfiguracji: od `sidenavBreakpoint` w górę panel
+ * jest zadokowany, poniżej zachowuje się jak nakładka ze scrimem i startuje zamknięty.
+ *
+ * O układzie decyduje wyłącznie CSS — nic nie migocze przed hydracją i nic nie zależy od
+ * `matchMedia`. JavaScript odpowiada tylko za to, KTÓRY stan przełącza przycisk.
+ *
+ * @example
+ * <KptAppShell
+ *   toolbar={<KptToolbar>…</KptToolbar>}
+ *   sidenav={<KptSidenav>…</KptSidenav>}
+ * >
+ *   <Routes />
+ * </KptAppShell>
+ */
+export declare function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSidenavOpen, onSidenavOpenChange, sidenavCompactOpen, defaultSidenavCompactOpen, onSidenavCompactOpenChange, sidenavMode, sidenavBreakpoint, sidenavRailBreakpoint, sidenavLabel, locale, dictionary, className, ...rest }: Readonly<KptAppShellProps>): import("react").JSX.Element;
+/** Dostęp do stanu shella. Poza `KptAppShell` rzuca — to zawsze błąd użycia. */
+export declare function useKptAppShell(): KptAppShellContextValue;
+/**
+ * Propsy przycisku przełączającego panel boczny. Rozłóż je na natywnym `<button>`
+ * (albo na `<KptButton>`, który przekazuje je do swojego wewnętrznego `<button>`) —
+ * atrybuty ARIA muszą wylądować na elemencie z rolą, nie na opakowaniu.
+ *
+ * Trafia w stan właściwy dla bieżącego układu, więc jeden przycisk obsługuje desktop
+ * i wąski ekran.
+ *
+ * @example
+ * <KptButton variant="text" {...useKptShellNavToggle()}>Menu</KptButton>
+ */
+export declare function useKptShellNavToggle(options?: {
+    label?: string;
+} & KptI18nOverrides): {
+    readonly 'aria-expanded': boolean;
+    readonly 'aria-controls': string;
+    readonly 'aria-label': string;
+    readonly onClick: () => void;
+};

package/dist/app-shell/app-shell.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptId } from "../internal/use-id.js";
+import { useKptBreakpointUp } from "../internal/use-breakpoint.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+const KptAppShellContext = createContext(null);
+/**
+ * Szkielet aplikacji: pasek u góry, panel boczny i treść.
+ *
+ * Domyślny tryb `auto` jest responsywny bez konfiguracji: od `sidenavBreakpoint` w górę panel
+ * jest zadokowany, poniżej zachowuje się jak nakładka ze scrimem i startuje zamknięty.
+ *
+ * O układzie decyduje wyłącznie CSS — nic nie migocze przed hydracją i nic nie zależy od
+ * `matchMedia`. JavaScript odpowiada tylko za to, KTÓRY stan przełącza przycisk.
+ *
+ * @example
+ * <KptAppShell
+ *   toolbar={<KptToolbar>…</KptToolbar>}
+ *   sidenav={<KptSidenav>…</KptSidenav>}
+ * >
+ *   <Routes />
+ * </KptAppShell>
+ */
+export function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSidenavOpen = true, onSidenavOpenChange, sidenavCompactOpen, defaultSidenavCompactOpen = false, onSidenavCompactOpenChange, sidenavMode = 'auto', sidenavBreakpoint = 'lg', sidenavRailBreakpoint = null, sidenavLabel = '', locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const sidenavId = useKptId(undefined, 'kpt-app-shell-nav');
+    const [dockedOpen, setDockedOpen] = useControllableState({
+        value: sidenavOpen,
+        defaultValue: defaultSidenavOpen,
+        onChange: onSidenavOpenChange,
+    });
+    const [compactOpen, setCompactOpen] = useControllableState({
+        value: sidenavCompactOpen,
+        defaultValue: defaultSidenavCompactOpen,
+        onChange: onSidenavCompactOpenChange,
+    });
+    const isWide = useKptBreakpointUp(sidenavBreakpoint);
+    const isOverlay = sidenavMode === 'over' ? true : sidenavMode === 'side' ? false : !isWide;
+    const usesCompactState = sidenavMode === 'auto' && isOverlay;
+    const isSidenavOpen = usesCompactState ? compactOpen : dockedOpen;
+    const setSidenavOpen = useCallback((open) => {
+        if (usesCompactState)
+            setCompactOpen(open);
+        else
+            setDockedOpen(open);
+    }, [usesCompactState, setCompactOpen, setDockedOpen]);
+    // Wyjście z nakładki chowa ją na wejściu: inaczej wróciłaby otwarta przy kolejnym
+    // zwężeniu okna, mimo że użytkownik jej wtedy nie otwierał.
+    useEffect(() => {
+        if (!isOverlay)
+            setCompactOpen(false);
+    }, [isOverlay, setCompactOpen]);
+    const closeSidenav = useCallback(() => setSidenavOpen(false), [setSidenavOpen]);
+    useEffect(() => {
+        if (!isOverlay || !isSidenavOpen)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                closeSidenav();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [isOverlay, isSidenavOpen, closeSidenav]);
+    const context = useMemo(() => ({
+        isSidenavOpen,
+        isOverlay,
+        sidenavId,
+        toggleSidenav: () => setSidenavOpen(!isSidenavOpen),
+        openSidenav: () => setSidenavOpen(true),
+        closeSidenav,
+    }), [isSidenavOpen, isOverlay, sidenavId, setSidenavOpen, closeSidenav]);
+    // Scrim blokuje wskaźnik, ale nie klawiaturę — treść pod nakładką nie może łapać fokusu.
+    const contentInert = isOverlay && isSidenavOpen;
+    return (_jsx(KptAppShellContext.Provider, { value: context, children: _jsxs("div", { className: cn('kpt-app-shell', dockedOpen && 'kpt-app-shell--nav-open', compactOpen && 'kpt-app-shell--nav-compact-open', className), "data-sidenav-mode": sidenavMode, "data-sidenav-breakpoint": sidenavBreakpoint, "data-sidenav-rail": sidenavRailBreakpoint ?? undefined, ...rest, children: [toolbar, _jsxs("div", { className: "kpt-app-shell__body", children: [_jsx("aside", { className: "kpt-app-shell__sidenav", role: "navigation", tabIndex: -1, id: sidenavId, "aria-label": sidenavLabel || t('appShell.navigation'), children: sidenav }), _jsx("div", { className: "kpt-app-shell__scrim", "aria-hidden": "true", onClick: closeSidenav }), _jsx("main", { className: "kpt-app-shell__content", inert: contentInert, children: children })] })] }) }));
+}
+/** Dostęp do stanu shella. Poza `KptAppShell` rzuca — to zawsze błąd użycia. */
+export function useKptAppShell() {
+    const context = useContext(KptAppShellContext);
+    if (!context)
+        throw new Error('useKptAppShell() wymaga otaczajacego <KptAppShell>.');
+    return context;
+}
+/**
+ * Propsy przycisku przełączającego panel boczny. Rozłóż je na natywnym `<button>`
+ * (albo na `<KptButton>`, który przekazuje je do swojego wewnętrznego `<button>`) —
+ * atrybuty ARIA muszą wylądować na elemencie z rolą, nie na opakowaniu.
+ *
+ * Trafia w stan właściwy dla bieżącego układu, więc jeden przycisk obsługuje desktop
+ * i wąski ekran.
+ *
+ * @example
+ * <KptButton variant="text" {...useKptShellNavToggle()}>Menu</KptButton>
+ */
+export function useKptShellNavToggle(options) {
+    const { isSidenavOpen, sidenavId, toggleSidenav } = useKptAppShell();
+    const { t } = useKptMessages({ locale: options?.locale, dictionary: options?.dictionary });
+    return {
+        'aria-expanded': isSidenavOpen,
+        'aria-controls': sidenavId,
+        'aria-label': options?.label || t('appShell.toggleNavigation'),
+        onClick: toggleSidenav,
+    };
+}

package/dist/auth/auth-types.d.ts

@@ -0,0 +1,44 @@
+/** Tryb ekranu — logowanie, rejestracja, odzyskiwanie hasła. */
+export type KptAuthMode = 'signIn' | 'signUp' | 'forgot';
+/**
+ * Układ ekranu:
+ * - `slider` — panel promo przesuwa się nad formularzami przy zmianie trybu,
+ * - `split` — panel promo stoi w miejscu, zmienia się tylko formularz.
+ */
+export type KptAuthLayout = 'slider' | 'split';
+/** Układ przycisków dostawców: pełnowymiarowa lista albo siatka ikon z podpisami. */
+export type KptAuthProviderLayout = 'list' | 'grid';
+/** Dostawca logowania zewnętrznego (OAuth/SSO/dowolny własny). */
+export interface KptAuthProvider {
+    /** Identyfikator zwracany w `onProviderSelect`. */
+    id: string;
+    /** Widoczna etykieta — jednocześnie nazwa dostępna przycisku. */
+    label: string;
+    /** Nazwa ikony z rejestru `KptIcon` (np. `brand-google` z pełnego zestawu Tabler). */
+    icon?: string;
+    /** Alternatywa dla `icon`: adres obrazka (wierne, wielokolorowe logo marki). */
+    iconUrl?: string;
+    /** Drugi wiersz opisu — tylko w układzie `list`. */
+    description?: string;
+}
+/** Wartość formularza logowania. */
+export interface KptAuthSignInValue {
+    email: string;
+    password: string;
+    remember: boolean;
+}
+/** Wartość formularza rejestracji. */
+export interface KptAuthSignUpValue {
+    name: string;
+    email: string;
+    password: string;
+    terms: boolean;
+}
+/** Wartość formularza odzyskiwania hasła. */
+export interface KptAuthResetValue {
+    email: string;
+}
+/** Rodzaj błędu pola — komunikat składamy z niego dopiero przy renderowaniu. */
+export type KptAuthErrorKind = 'required' | 'email' | 'minLength' | 'mismatch';
+/** Minimalna długość hasła w rejestracji. */
+export declare const KPT_AUTH_MIN_PASSWORD = 8;

package/dist/auth/auth-types.js

@@ -0,0 +1,2 @@
+/** Minimalna długość hasła w rejestracji. */
+export const KPT_AUTH_MIN_PASSWORD = 8;

package/dist/auth/auth.d.ts

@@ -0,0 +1,76 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import { type KptAuthLayout, type KptAuthMode, type KptAuthProvider, type KptAuthProviderLayout, type KptAuthResetValue, type KptAuthSignInValue, type KptAuthSignUpValue } from './auth-types.ts';
+type SlotName = 'brand' | 'promo' | 'sso' | 'fields' | 'footer';
+interface SlotProps {
+    children?: ReactNode;
+}
+export interface KptAuthProps extends Omit<ComponentPropsWithRef<'div'>, 'onSubmit' | 'children'>, KptI18nOverrides {
+    mode?: KptAuthMode;
+    defaultMode?: KptAuthMode;
+    onModeChange?: (mode: KptAuthMode) => void;
+    layout?: KptAuthLayout;
+    providers?: KptAuthProvider[];
+    providerLayout?: KptAuthProviderLayout;
+    showName?: boolean;
+    requireTerms?: boolean;
+    showRemember?: boolean;
+    /** Operacja w toku — przyciski w stanie ładowania, dostawcy zablokowani. */
+    busy?: boolean;
+    error?: string | null;
+    notice?: string | null;
+    /** `null` = tekst z i18n zależny od trybu, `''` = brak (miejsce dla slotu `KptAuth.Promo`). */
+    promoTitle?: string | null;
+    promoText?: string | null;
+    animated?: boolean;
+    animationDuration?: number;
+    onSignIn?: (value: KptAuthSignInValue) => void;
+    onSignUp?: (value: KptAuthSignUpValue) => void;
+    onResetPassword?: (value: KptAuthResetValue) => void;
+    onProviderSelect?: (provider: KptAuthProvider) => void;
+    /** Własny wygląd pojedynczego dostawcy; `select` zgłasza wybór. */
+    renderProvider?: (provider: KptAuthProvider, select: () => void) => ReactNode;
+    children?: ReactNode;
+}
+/**
+ * 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 declare function KptAuth({ mode, defaultMode, onModeChange, layout, providers, providerLayout, showName, requireTerms, showRemember, busy, error, notice, promoTitle, promoText, animated, animationDuration, onSignIn, onSignUp, onResetPassword, onProviderSelect, renderProvider, locale, dictionary, className, style, children, ...rest }: Readonly<KptAuthProps>): import("react").JSX.Element;
+export declare namespace KptAuth {
+    var Brand: {
+        (_props: Readonly<SlotProps>): ReactNode;
+        kptAuthSlot: SlotName;
+        displayName: string;
+    };
+    var Promo: {
+        (_props: Readonly<SlotProps>): ReactNode;
+        kptAuthSlot: SlotName;
+        displayName: string;
+    };
+    var Sso: {
+        (_props: Readonly<SlotProps>): ReactNode;
+        kptAuthSlot: SlotName;
+        displayName: string;
+    };
+    var Fields: {
+        (_props: Readonly<SlotProps>): ReactNode;
+        kptAuthSlot: SlotName;
+        displayName: string;
+    };
+    var Footer: {
+        (_props: Readonly<SlotProps>): ReactNode;
+        kptAuthSlot: SlotName;
+        displayName: string;
+    };
+}
+export {};