@konce-pt/react 0.8.0

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

@@ -0,0 +1,6 @@
+export { KptGrid } from '../grid/grid.tsx';
+export type { KptGridProps } from '../grid/grid.tsx';
+export { KptCol } from '../grid/col.tsx';
+export type { KptColProps, KptColSpan } from '../grid/col.tsx';
+export { KptFlex } from '../grid/flex.tsx';
+export type { KptFlexProps, KptFlexDirection, KptFlexWrap, KptAlignment } from '../grid/flex.tsx';

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

@@ -0,0 +1,8 @@
+/*
+ * @konce-pt/react/grid — ergonomia Reacta nad arkuszem `@konce-pt/grid`.
+ * Komponenty ustawiają wyłącznie custom properties inline; układ liczy natywny CSS.
+ * Osobny subpath, bo arkusz układu jest opcjonalny i nie każda aplikacja go ładuje.
+ */
+export { KptGrid } from "../grid/grid.js";
+export { KptCol } from "../grid/col.js";
+export { KptFlex } from "../grid/flex.js";

package/dist/i18n/i18n-context.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { type DeepPartial, type KptLocale, type KptMessages } from '@konce-pt/i18n';
+/** Kontrakt zwracany przez `useKptI18n()`. */
+export interface KptI18nContextValue {
+    /** Bieżący język. */
+    locale: KptLocale;
+    /** Zmiana języka w runtime — działa tylko w obrębie `KptI18nProvider`. */
+    setLocale: (locale: KptLocale) => void;
+    /** Aktywny słownik. */
+    messages: KptMessages;
+    /** Słownik zarejestrowany dla danego języka; nieznany język spada na EN. */
+    messagesFor: (locale: KptLocale) => KptMessages;
+    /** Tłumaczy klucz w notacji kropkowej (`'paginator.range'`) z interpolacją `{name}`. */
+    t: (key: string, params?: Record<string, string | number>) => string;
+}
+export interface KptI18nProviderProps {
+    /** Język początkowy (domyślnie 'en'). */
+    locale?: KptLocale;
+    /**
+     * Słowniki do zarejestrowania lub nadpisania, kluczowane kodem języka.
+     * Może dodać nowy język (`{ de }`) lub nadpisać istniejący
+     * (`{ en: { paginator: { rowsPerPage: 'Rows:' } } }`). Deep-merge na bazę EN/PL.
+     */
+    messages?: Record<string, DeepPartial<KptMessages>>;
+    children?: ReactNode;
+}
+/**
+ * Dostarcza tłumaczenia poddrzewu. Bez providera komponenty działają na EN —
+ * brak konfiguracji nigdy nie jest błędem.
+ */
+export declare function KptI18nProvider({ locale, messages, children }: Readonly<KptI18nProviderProps>): import("react").JSX.Element;
+/** Czyta tłumaczenia z kontekstu. Poza providerem zwraca słownik EN. */
+export declare function useKptI18n(): KptI18nContextValue;
+/** Nadpisania i18n dostępne w propsach każdego komponentu z etykietami. */
+export interface KptI18nOverrides {
+    /** Wymusza język tylko dla tego komponentu, niezależnie od `KptI18nProvider`. */
+    locale?: KptLocale;
+    /** Nadpisuje pojedyncze etykiety tego komponentu (deep-merge na aktywny słownik). */
+    dictionary?: DeepPartial<KptMessages>;
+}
+/**
+ * Tłumaczenia dla pojedynczego komponentu. `locale` i `dictionary` z propsów mają
+ * priorytet nad kontekstem — tak samo jak inputy etykiet biją słownik w Angularze.
+ */
+export declare function useKptMessages(overrides?: KptI18nOverrides): KptI18nContextValue;

package/dist/i18n/i18n-context.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { KPT_MESSAGES_EN, KPT_MESSAGES_PL, deepMerge, translate, } from '@konce-pt/i18n';
+const FALLBACK = {
+    locale: 'en',
+    setLocale: () => { },
+    messages: KPT_MESSAGES_EN,
+    messagesFor: () => KPT_MESSAGES_EN,
+    t: (key, params) => translate(KPT_MESSAGES_EN, key, params),
+};
+const KptI18nContext = createContext(null);
+/**
+ * Dostarcza tłumaczenia poddrzewu. Bez providera komponenty działają na EN —
+ * brak konfiguracji nigdy nie jest błędem.
+ */
+export function KptI18nProvider({ locale = 'en', messages, children }) {
+    const [current, setCurrent] = useState(locale);
+    const registry = useMemo(() => {
+        const base = new Map([
+            ['en', KPT_MESSAGES_EN],
+            ['pl', KPT_MESSAGES_PL],
+        ]);
+        for (const [code, patch] of Object.entries(messages ?? {})) {
+            base.set(code, deepMerge(base.get(code) ?? KPT_MESSAGES_EN, patch));
+        }
+        return base;
+    }, [messages]);
+    const messagesFor = useCallback((code) => registry.get(code) ?? KPT_MESSAGES_EN, [registry]);
+    const value = useMemo(() => {
+        const active = messagesFor(current);
+        return {
+            locale: current,
+            setLocale: setCurrent,
+            messages: active,
+            messagesFor,
+            t: (key, params) => translate(active, key, params),
+        };
+    }, [current, messagesFor]);
+    return _jsx(KptI18nContext.Provider, { value: value, children: children });
+}
+/** Czyta tłumaczenia z kontekstu. Poza providerem zwraca słownik EN. */
+export function useKptI18n() {
+    return useContext(KptI18nContext) ?? FALLBACK;
+}
+/**
+ * Tłumaczenia dla pojedynczego komponentu. `locale` i `dictionary` z propsów mają
+ * priorytet nad kontekstem — tak samo jak inputy etykiet biją słownik w Angularze.
+ */
+export function useKptMessages(overrides) {
+    const context = useKptI18n();
+    const { locale, dictionary } = overrides ?? {};
+    return useMemo(() => {
+        if (!locale && !dictionary)
+            return context;
+        const effectiveLocale = locale ?? context.locale;
+        const base = locale ? context.messagesFor(locale) : context.messages;
+        const merged = dictionary ? deepMerge(base, dictionary) : base;
+        return {
+            ...context,
+            locale: effectiveLocale,
+            messages: merged,
+            t: (key, params) => translate(merged, key, params),
+        };
+    }, [context, locale, dictionary]);
+}

package/dist/icon/icon-registry.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`.
+ *
+ * Treść jest sanityzowana do allowlisty geometrii SVG — mimo to `registerKptIcons()` wolno
+ * wołać wyłącznie z treścią kontrolowaną przez developera (build-time), nigdy bezpośrednio
+ * z danych runtime/CMS/uploadu bez własnej walidacji domenowej wyżej w stosie.
+ */
+export declare function registerKptIcons(next: Record<string, string>): void;
+/** Zwraca wewnętrzny SVG ikony lub `undefined`. */
+export declare function getKptIcon(name: string): string | undefined;
+/** Czy ikona o tej nazwie jest w rejestrze. */
+export declare function hasKptIcon(name: string): boolean;
+/** Subskrypcja zmian rejestru — używana przez `KptIcon` przez `useSyncExternalStore`. */
+export declare function subscribeKptIcons(listener: () => void): () => void;
+/** Licznik rejestracji; rośnie po każdym `registerKptIcons`. */
+export declare function getKptIconsVersion(): number;

package/dist/icon/icon-registry.js

@@ -0,0 +1,43 @@
+import { KPT_ICONS, sanitizeSvgFragment } from '@konce-pt/icons';
+/*
+ * Rejestr ikon dla `KptIcon`. Odpowiednik serwisu `KptIconRegistry` z portu Angulara,
+ * ale jako moduł-singleton: ikony są globalne dla aplikacji, więc nie ma czego wstrzykiwać.
+ * Zmiany są ogłaszane subskrybentom, żeby `KptIcon` przerysował się po późnej rejestracji.
+ */
+const icons = new Map(Object.entries(KPT_ICONS));
+const listeners = new Set();
+let version = 0;
+/**
+ * Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`.
+ *
+ * Treść jest sanityzowana do allowlisty geometrii SVG — mimo to `registerKptIcons()` wolno
+ * wołać wyłącznie z treścią kontrolowaną przez developera (build-time), nigdy bezpośrednio
+ * z danych runtime/CMS/uploadu bez własnej walidacji domenowej wyżej w stosie.
+ */
+export function registerKptIcons(next) {
+    for (const [name, svg] of Object.entries(next)) {
+        icons.set(name, sanitizeSvgFragment(svg));
+    }
+    version += 1;
+    for (const listener of listeners)
+        listener();
+}
+/** Zwraca wewnętrzny SVG ikony lub `undefined`. */
+export function getKptIcon(name) {
+    return icons.get(name);
+}
+/** Czy ikona o tej nazwie jest w rejestrze. */
+export function hasKptIcon(name) {
+    return icons.has(name);
+}
+/** Subskrypcja zmian rejestru — używana przez `KptIcon` przez `useSyncExternalStore`. */
+export function subscribeKptIcons(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Licznik rejestracji; rośnie po każdym `registerKptIcons`. */
+export function getKptIconsVersion() {
+    return version;
+}

package/dist/icon/icon.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface KptIconProps extends ComponentPropsWithRef<'span'> {
+    /** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
+    name: string;
+    /** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z `font-size`. */
+    size?: string;
+}
+/**
+ * Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
+ * (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze — wbudowany
+ * zestaw działa od razu, pełny dodaje `registerKptTablerIcons()` z `@konce-pt/react/icons`.
+ *
+ * @example
+ * <KptIcon name="menu" />
+ * <KptIcon name="check" size="1.25rem" />
+ */
+export declare function KptIcon({ name, size, className, style, ...rest }: Readonly<KptIconProps>): import("react").JSX.Element;

package/dist/icon/icon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderKptIconSvg } from '@konce-pt/icons';
+import { useSyncExternalStore } from 'react';
+import { cn } from "../internal/cn.js";
+import { getKptIcon, getKptIconsVersion, subscribeKptIcons } from "./icon-registry.js";
+/**
+ * Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
+ * (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze — wbudowany
+ * zestaw działa od razu, pełny dodaje `registerKptTablerIcons()` z `@konce-pt/react/icons`.
+ *
+ * @example
+ * <KptIcon name="menu" />
+ * <KptIcon name="check" size="1.25rem" />
+ */
+export function KptIcon({ name, size = '', className, style, ...rest }) {
+    // Rejestr bywa uzupełniany po pierwszym renderze (leniwy import zestawu Tabler),
+    // więc komponent słucha jego wersji zamiast czytać go raz.
+    useSyncExternalStore(subscribeKptIcons, getKptIconsVersion, getKptIconsVersion);
+    // Treść pochodzi z zaufanego rejestru i przeszła sanitizację przy rejestracji —
+    // to ten sam kontrakt, co `innerHTML` w porcie Angulara.
+    const html = renderKptIconSvg(getKptIcon(name));
+    return (_jsx("span", { className: cn('kpt-icon-host', className), "aria-hidden": "true", style: size ? { fontSize: size, ...style } : style, dangerouslySetInnerHTML: { __html: html }, ...rest }));
+}

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

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptButtonSize, KptButtonVariant } from '../button/button.tsx';
+import type { KptHostProps } from '../internal/types.ts';
+export interface KptIconButtonProps extends ComponentPropsWithRef<'button'> {
+    variant?: KptButtonVariant;
+    size?: KptButtonSize;
+    shape?: 'round' | 'square';
+    /** Spinner zamiast ikony + zablokowana interakcja; ustawia `aria-busy`. */
+    loading?: boolean;
+    /** Etykieta dostępności — wymagana, bo przycisk nie ma tekstu. */
+    'aria-label': string;
+    /** Propsy wrappera hosta (`.kpt-icon-button-host`). */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Przycisk ikonowy (tylko ikona). `aria-label` jest wymagany typem — bez tekstu przycisk nie ma
+ * dostępnej nazwy, a to najczęstszy błąd dostępności w tej rodzinie komponentów.
+ *
+ * @example
+ * <KptIconButton aria-label="Ustawienia"><KptIcon name="menu" /></KptIconButton>
+ * <KptIconButton variant="filled" shape="square" aria-label="Usuń"><KptIcon name="x" /></KptIconButton>
+ */
+export declare function KptIconButton({ variant, size, shape, type, loading, disabled, hostProps, className, children, ...rest }: Readonly<KptIconButtonProps>): import("react").JSX.Element;

package/dist/icon-button/icon-button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Przycisk ikonowy (tylko ikona). `aria-label` jest wymagany typem — bez tekstu przycisk nie ma
+ * dostępnej nazwy, a to najczęstszy błąd dostępności w tej rodzinie komponentów.
+ *
+ * @example
+ * <KptIconButton aria-label="Ustawienia"><KptIcon name="menu" /></KptIconButton>
+ * <KptIconButton variant="filled" shape="square" aria-label="Usuń"><KptIcon name="x" /></KptIconButton>
+ */
+export function KptIconButton({ variant = 'text', size = 'md', shape = 'round', type = 'button', loading = false, disabled = false, hostProps, className, children, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    return (_jsx("span", { className: cn('kpt-icon-button-host', hostClassName), ...hostRest, children: _jsx("button", { className: cn('kpt-icon-button', className), type: type, "data-variant": variant, "data-size": size, "data-shape": shape, disabled: disabled || loading, "aria-busy": loading || undefined, ...rest, children: loading ? _jsx("span", { className: "kpt-icon-button__spinner", "aria-hidden": "true" }) : children }) }));
+}

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

@@ -0,0 +1,12 @@
+export { KPT_TABLER_ICONS, KPT_TABLER_ICON_NAMES } from '@konce-pt/icons/tabler';
+/**
+ * Rejestruje pełny zestaw Tabler Icons (5130), dzięki czemu `KptIcon` może użyć dowolnej
+ * ikony po nazwie. Wywołaj raz, w wejściu aplikacji — rejestr jest globalny, więc nie ma
+ * potrzeby owijać drzewa żadnym providerem.
+ *
+ * @example
+ * // main.tsx
+ * import { registerKptTablerIcons } from '@konce-pt/react/icons';
+ * registerKptTablerIcons();
+ */
+export declare function registerKptTablerIcons(): void;

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

@@ -0,0 +1,20 @@
+/*
+ * @konce-pt/react/icons — pełny zestaw Tabler Icons (MIT) dla `KptIcon`.
+ * Opcjonalny (pobierany tylko przy imporcie), by nie powiększać rdzenia biblioteki.
+ */
+import { KPT_TABLER_ICONS } from '@konce-pt/icons/tabler';
+import { registerKptIcons } from "../icon/icon-registry.js";
+export { KPT_TABLER_ICONS, KPT_TABLER_ICON_NAMES } from '@konce-pt/icons/tabler';
+/**
+ * Rejestruje pełny zestaw Tabler Icons (5130), dzięki czemu `KptIcon` może użyć dowolnej
+ * ikony po nazwie. Wywołaj raz, w wejściu aplikacji — rejestr jest globalny, więc nie ma
+ * potrzeby owijać drzewa żadnym providerem.
+ *
+ * @example
+ * // main.tsx
+ * import { registerKptTablerIcons } from '@konce-pt/react/icons';
+ * registerKptTablerIcons();
+ */
+export function registerKptTablerIcons() {
+    registerKptIcons(KPT_TABLER_ICONS);
+}

package/dist/image/image.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptImageProps extends Omit<ComponentPropsWithRef<'div'>, 'onClick'>, KptI18nOverrides {
+    src: string;
+    alt?: string;
+    /** Szerokość jako długość CSS, np. '240px'. */
+    width?: string | null;
+    /** Kliknięcie otwiera pełnoekranowy podgląd. */
+    preview?: boolean;
+}
+/**
+ * Obraz z opcjonalnym podglądem pełnoekranowym.
+ *
+ * @example
+ * <KptImage src="/foto.jpg" alt="Zdjęcie" preview width="240px" />
+ */
+export declare function KptImage({ src, alt, width, preview, locale, dictionary, className, ...rest }: Readonly<KptImageProps>): import("react").JSX.Element;

package/dist/image/image.js

@@ -0,0 +1,16 @@
+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";
+/**
+ * Obraz z opcjonalnym podglądem pełnoekranowym.
+ *
+ * @example
+ * <KptImage src="/foto.jpg" alt="Zdjęcie" preview width="240px" />
+ */
+export function KptImage({ src, alt = '', width = null, preview = false, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: cn('kpt-image-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-image', preview && 'kpt-image--preview'), style: width ? { width } : undefined, onClick: () => preview && setOpen(true), children: [_jsx("img", { className: "kpt-image__img", src: src, alt: alt }), preview ? (_jsx("div", { className: "kpt-image__mask", "aria-hidden": "true", children: _jsx(KptIcon, { name: "zoom-in" }) })) : null] }), open ? (_jsxs("div", { className: "kpt-image__overlay", onClick: () => setOpen(false), children: [_jsx("button", { type: "button", className: "kpt-image__close", onClick: () => setOpen(false), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) }), _jsx("img", { className: "kpt-image__full", src: src, alt: alt, onClick: (event) => event.stopPropagation() })] })) : null] }));
+}

package/dist/input/input.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+export type KptInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'time';
+export interface KptInputProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'> {
+    /** Typ pola. */
+    type?: KptInputType;
+    /**
+     * Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`.
+     * Natywny blokowałby submit i uruchamiał walidację przeglądarki obok Twojej własnej.
+     */
+    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`,
+     * bo w Reakcie to zwykle biblioteka formularza decyduje, kiedy błąd jest gotowy.
+     * Podaj go, gdy chcesz bramkę „dopiero po dotknięciu" znaną z portu Angulara.
+     */
+    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-input-host`). `className` i `ref` idą na `<input>`. */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Pole tekstowe Koncept UI. Renderuje natywny `<input>` w hoście `.kpt-input-host`.
+ *
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) —
+ * w drugim trybie wartość należy do DOM, więc natywny `<form>`, `<form action>`, reset
+ * formularza i React Hook Form (`register`) działają bez adaptera.
+ *
+ * Wewnątrz `<KptFormField>` pole samo przejmuje `id` z wrappera, więc `label[for]` jest
+ * spięte bez konfiguracji.
+ *
+ * @example
+ * <KptInput name="email" type="email" defaultValue="" />
+ * <KptInput value={email} onValueChange={setEmail} invalid={!ok} touched={blurred} />
+ */
+export declare function KptInput({ type, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, 'aria-invalid': ariaInvalid, ...rest }: Readonly<KptInputProps>): import("react").JSX.Element;

package/dist/input/input.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { cn } from "../internal/cn.js";
+import { useKptId } from "../internal/use-id.js";
+import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+/**
+ * Pole tekstowe Koncept UI. Renderuje natywny `<input>` w hoście `.kpt-input-host`.
+ *
+ * Działa kontrolowane (`value` + `onValueChange`) i niekontrolowane (`defaultValue`) —
+ * w drugim trybie wartość należy do DOM, więc natywny `<form>`, `<form action>`, reset
+ * formularza i React Hook Form (`register`) działają bez adaptera.
+ *
+ * Wewnątrz `<KptFormField>` pole samo przejmuje `id` z wrappera, więc `label[for]` jest
+ * spięte bez konfiguracji.
+ *
+ * @example
+ * <KptInput name="email" type="email" defaultValue="" />
+ * <KptInput value={email} onValueChange={setEmail} invalid={!ok} touched={blurred} />
+ */
+export function KptInput({ type = 'text', required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, 'aria-invalid': ariaInvalid, ...rest }) {
+    const field = useKptFormFieldContext();
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const inputId = useKptId(id ?? field?.controlId, 'kpt-input');
+    // Stan nieprawidłowy pokazujemy dopiero po dotknięciu pola — jak natywne `:user-invalid`.
+    // Bez `touched` nie ma czego bramkować, więc decyduje samo `invalid`.
+    const showInvalid = invalid && (touched ?? true);
+    const handleChange = useCallback((event) => {
+        onChange?.(event);
+        onValueChange?.(event.target.value);
+    }, [onChange, onValueChange]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+        onTouch?.();
+    }, [onBlur, onTouch]);
+    return (_jsx("span", { className: cn('kpt-input-host', hostClassName), ...hostRest, children: _jsx("input", { className: cn('kpt-input__field', className), id: inputId, type: type, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }) }));
+}

package/dist/input-mask/input-mask.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface KptInputMaskProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Wzorzec maski; pozostałe znaki to literały (spacje, nawiasy, myślniki). */
+    mask?: string;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Pole z maską znakową. Tokeny: `9` = cyfra, `a` = litera, `*` = alfanumeryczny; reszta wzorca
+ * to literały wstawiane automatycznie.
+ *
+ * @example
+ * <KptInputMask mask="(999) 999-99-99" value={phone} onValueChange={setPhone} />
+ */
+export declare function KptInputMask({ value, defaultValue, onValueChange, mask, placeholder, invalid, touched, onTouch, disabled, className, id, onBlur, ...rest }: Readonly<KptInputMaskProps>): import("react").JSX.Element;

package/dist/input-mask/input-mask.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptId } from "../internal/use-id.js";
+import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+/** Tokeny maski: `9` = cyfra, `a` = litera, `*` = znak alfanumeryczny. */
+const TOKENS = {
+    '9': /\d/,
+    a: /[a-zA-Z]/,
+    '*': /[a-zA-Z0-9]/,
+};
+/**
+ * Pole z maską znakową. Tokeny: `9` = cyfra, `a` = litera, `*` = alfanumeryczny; reszta wzorca
+ * to literały wstawiane automatycznie.
+ *
+ * @example
+ * <KptInputMask mask="(999) 999-99-99" value={phone} onValueChange={setPhone} />
+ */
+export function KptInputMask({ value, defaultValue = '', onValueChange, mask = '', placeholder, invalid = false, touched, onTouch, disabled = false, className, id, onBlur, ...rest }) {
+    const field = useKptFormFieldContext();
+    const inputId = useKptId(id ?? field?.controlId, 'kpt-input-mask');
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const showInvalid = invalid && (touched ?? true);
+    /*
+     * Maska przepisuje wejście od zera: z tekstu bierzemy wyłącznie znaki pasujące do kolejnych
+     * tokenów, a literały wstawiamy same. Dzięki temu wklejenie „48123456789" i wpisanie
+     * „(48) 123…" dają ten sam wynik, a usunięcie literału nie zostawia dziury we wzorcu.
+     */
+    const applyMask = (raw) => {
+        if (!mask)
+            return raw;
+        const chars = raw.split('');
+        let charIndex = 0;
+        let out = '';
+        for (let maskIndex = 0; maskIndex < mask.length && charIndex < chars.length;) {
+            const token = mask[maskIndex];
+            const rule = TOKENS[token];
+            if (rule) {
+                while (charIndex < chars.length && !rule.test(chars[charIndex]))
+                    charIndex++;
+                if (charIndex >= chars.length)
+                    break;
+                out += chars[charIndex];
+                charIndex++;
+                maskIndex++;
+            }
+            else {
+                out += token;
+                maskIndex++;
+            }
+        }
+        return out;
+    };
+    const onInput = (event) => {
+        const formatted = applyMask(event.target.value);
+        setCurrent(formatted);
+        // Gdy maska odrzuci znak, wartość się nie zmienia i React nie przerysuje pola —
+        // wpisany znak zostałby na ekranie, więc DOM zrównujemy ręcznie.
+        event.target.value = formatted;
+    };
+    return (_jsx("span", { className: "kpt-input-mask-host", children: _jsx("input", { className: cn('kpt-input-mask__input', showInvalid && 'kpt-input-mask--invalid', className), id: inputId, type: "text", value: current, disabled: disabled, placeholder: placeholder || mask, onChange: onInput, onBlur: (event) => {
+                onBlur?.(event);
+                onTouch?.();
+            }, ...rest }) }));
+}

package/dist/input-number/input-number.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptInputNumberProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+    /** Dopisek pokazywany za liczbą, np. ' szt.' albo 'ms'. */
+    suffix?: string;
+    /** Przyciski krokowania. `false` daje samo pole — wariant do zakresów „od–do". */
+    showButtons?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Pole liczbowe ze strzałkami krokowania. Wartość to `number | null` — puste pole ma znaczenie,
+ * bo „brak wartości" to nie to samo co zero.
+ *
+ * @example
+ * <KptInputNumber value={qty} onValueChange={setQty} min={0} max={99} suffix=" szt." />
+ * <KptInputNumber value={from} onValueChange={setFrom} showButtons={false} suffix=" zł" />
+ */
+export declare function KptInputNumber({ value, defaultValue, onValueChange, min, max, step, placeholder, suffix, showButtons, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptInputNumberProps>): import("react").JSX.Element;

package/dist/input-number/input-number.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } 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";
+/**
+ * Pole liczbowe ze strzałkami krokowania. Wartość to `number | null` — puste pole ma znaczenie,
+ * bo „brak wartości" to nie to samo co zero.
+ *
+ * @example
+ * <KptInputNumber value={qty} onValueChange={setQty} min={0} max={99} suffix=" szt." />
+ * <KptInputNumber value={from} onValueChange={setFrom} showButtons={false} suffix=" zł" />
+ */
+export function KptInputNumber({ value, defaultValue = null, onValueChange, min, max, step = 1, placeholder = '', suffix = '', showButtons = true, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const showInvalid = invalid && (touched ?? true);
+    const clamp = useCallback((n) => {
+        if (min !== undefined && n < min)
+            return min;
+        if (max !== undefined && n > max)
+            return max;
+        return n;
+    }, [min, max]);
+    const display = current === null || current === undefined || Number.isNaN(current) ? '' : `${current}${suffix}`;
+    const canIncrement = max === undefined || (current ?? -Infinity) < max;
+    const canDecrement = min === undefined || (current ?? Infinity) > min;
+    const onInput = (event) => {
+        // Przecinek jako separator dziesiętny i dopisek trafiają do pola razem z liczbą —
+        // czyścimy je przed parsowaniem, żeby wpisywanie „12,5 zł" działało naturalnie.
+        const raw = event.target.value.replace(suffix, '').replace(',', '.').trim();
+        if (raw === '') {
+            setCurrent(null);
+            return;
+        }
+        const parsed = Number(raw);
+        if (!Number.isNaN(parsed))
+            setCurrent(clamp(parsed));
+    };
+    const stepBy = (direction) => {
+        const base = current ?? min ?? 0;
+        setCurrent(clamp(base + direction * step));
+        onTouch?.();
+    };
+    const onBlur = (_event) => onTouch?.();
+    return (_jsx("div", { className: cn('kpt-input-number-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-input-number', disabled && 'kpt-input-number--disabled', showInvalid && 'kpt-input-number--invalid', !showButtons && 'kpt-input-number--plain'), children: [showButtons ? (_jsx("button", { type: "button", className: "kpt-input-number__btn", disabled: disabled || !canDecrement, onClick: () => stepBy(-1), "aria-label": t('inputNumber.decrement'), children: _jsx(KptIcon, { name: "minus" }) })) : null, _jsx("input", { className: "kpt-input-number__input", type: "text", inputMode: "decimal", value: display, disabled: disabled, placeholder: placeholder, onChange: onInput, onBlur: onBlur }), showButtons ? (_jsx("button", { type: "button", className: "kpt-input-number__btn", disabled: disabled || !canIncrement, onClick: () => stepBy(1), "aria-label": t('inputNumber.increment'), children: _jsx(KptIcon, { name: "plus" }) })) : null] }) }));
+}

package/dist/input-otp/input-otp.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface KptInputOtpProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    length?: number;
+    /** Dopuszcza wyłącznie cyfry i przełącza klawiaturę mobilną na numeryczną. */
+    integerOnly?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Pole kodu jednorazowego (OTP/PIN) — N osobnych pól, automatyczne przejście do następnego
+ * i wklejanie całego kodu naraz. Wartością jest sklejony string.
+ *
+ * @example
+ * <KptInputOtp value={code} onValueChange={setCode} length={6} integerOnly />
+ */
+export declare function KptInputOtp({ value, defaultValue, onValueChange, length, integerOnly, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptInputOtpProps>): import("react").JSX.Element;