@konce-pt/react 0.8.0

package/dist/input-otp/input-otp.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+/**
+ * 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 function KptInputOtp({ value, defaultValue = '', onValueChange, length = 6, integerOnly = false, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const showInvalid = invalid && (touched ?? true);
+    const charAt = (index) => current[index] ?? '';
+    /*
+     * Wartość jest jednym stringiem, a pól jest N — pozycje pośrodku muszą więc dać się zostawić
+     * puste. Dopełniamy spacjami, podmieniamy znak i obcinamy końcowe spacje, żeby „a__c" dało się
+     * zapisać, a „a" nie zamieniło się w „a   ".
+     */
+    const setChar = (index, char) => {
+        const chars = current.padEnd(length, ' ').split('');
+        chars[index] = char || ' ';
+        setCurrent(chars.join('').replace(/ +$/, ''));
+    };
+    const focusSibling = (el, direction) => {
+        const target = direction === 1 ? el.nextElementSibling : el.previousElementSibling;
+        target?.focus();
+    };
+    const onInput = (index, event) => {
+        const el = event.target;
+        let char = el.value.slice(-1);
+        if (integerOnly && !/\d/.test(char))
+            char = '';
+        setChar(index, char);
+        // DOM trzeba zsynchronizować ręcznie: odrzucony znak nie zmienia wartości, więc React
+        // nie przerysuje pola, a wpisany znak zostałby na ekranie.
+        el.value = char;
+        if (char)
+            focusSibling(el, 1);
+    };
+    const onKeyDown = (index, event) => {
+        const el = event.currentTarget;
+        if (event.key === 'Backspace' && !charAt(index))
+            focusSibling(el, -1);
+        else if (event.key === 'ArrowLeft')
+            focusSibling(el, -1);
+        else if (event.key === 'ArrowRight')
+            focusSibling(el, 1);
+    };
+    const onPaste = (event) => {
+        event.preventDefault();
+        let text = event.clipboardData.getData('text');
+        if (integerOnly)
+            text = text.replace(/\D/g, '');
+        setCurrent(text.slice(0, length));
+        onTouch?.();
+    };
+    return (_jsx("div", { className: cn('kpt-input-otp-host', className), ...rest, children: _jsx("div", { className: cn('kpt-input-otp', showInvalid && 'kpt-input-otp--invalid'), children: Array.from({ length }, (_, index) => (_jsx("input", { className: "kpt-input-otp__cell", type: "text", inputMode: integerOnly ? 'numeric' : 'text', maxLength: 1, value: charAt(index), disabled: disabled, onChange: (event) => onInput(index, event), onKeyDown: (event) => onKeyDown(index, event), onPaste: onPaste, onFocus: (event) => event.target.select() }, index))) }) }));
+}

package/dist/internal/cn.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Sklejanie klas CSS. Odpowiednik `clsx` w kilkunastu linijkach — biblioteka
+ * zostaje bez zależności runtime, a konsument nie ryzykuje konfliktu wersji.
+ *
+ * Wartości fałszywe są pomijane, tablice spłaszczane, duplikaty usuwane
+ * (ostatnie wystąpienie wygrywa kolejnością, co ma znaczenie tylko wizualnie).
+ */
+export type ClassValue = string | number | false | null | undefined | ClassValue[];
+export declare function cn(...values: ClassValue[]): string;

package/dist/internal/cn.js

@@ -0,0 +1,19 @@
+export function cn(...values) {
+    const out = [];
+    const push = (value) => {
+        if (!value && value !== 0)
+            return;
+        if (Array.isArray(value)) {
+            for (const item of value)
+                push(item);
+            return;
+        }
+        for (const token of String(value).split(/\s+/)) {
+            if (token && !out.includes(token))
+                out.push(token);
+        }
+    };
+    for (const value of values)
+        push(value);
+    return out.join(' ');
+}

package/dist/internal/compose-refs.d.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'react';
+/**
+ * Łączy kilka refów w jeden callback. Potrzebne wszędzie, gdzie komponent trzyma
+ * własny ref do elementu, a jednocześnie oddaje go na zewnątrz przez prop `ref`.
+ */
+export declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void;

package/dist/internal/compose-refs.js

@@ -0,0 +1,16 @@
+/**
+ * Łączy kilka refów w jeden callback. Potrzebne wszędzie, gdzie komponent trzyma
+ * własny ref do elementu, a jednocześnie oddaje go na zewnątrz przez prop `ref`.
+ */
+export function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref && typeof ref === 'object') {
+                ref.current = node;
+            }
+        }
+    };
+}

package/dist/internal/overlay-container.d.ts

@@ -0,0 +1,3 @@
+export declare const KptOverlayContainerContext: import("react").Context<HTMLElement | null>;
+/** Kontener dla portalu nakładki; poza modalem to `document.body`. */
+export declare function useKptOverlayContainer(): HTMLElement | null;

package/dist/internal/overlay-container.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+/*
+ * Miejsce, do którego portalują się panele nakładek.
+ *
+ * `showModal()` wynosi `<dialog>` do warstwy szczytowej przeglądarki, a ta stoi ponad całym
+ * drzewem dokumentu — żaden `z-index` tego nie przebije. Panel selecta czy menu otwarty
+ * z wnętrza modala portalowałby się na `document.body` i byłby NIEWIDOCZNY, schowany za tłem
+ * okna. `KptDialog` podstawia więc siebie jako kontener na czas, gdy jest otwarty.
+ *
+ * Port Angulara rozwiązuje to samo, przenosząc kontener CDK Overlay do wnętrza `<dialog>`.
+ */
+export const KptOverlayContainerContext = createContext(null);
+/** Kontener dla portalu nakładki; poza modalem to `document.body`. */
+export function useKptOverlayContainer() {
+    const container = useContext(KptOverlayContainerContext);
+    if (container)
+        return container;
+    return typeof document === 'undefined' ? null : document.body;
+}

package/dist/internal/overlay.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export interface KptOverlayProps {
+    open: boolean;
+    /** Element, względem którego pozycjonujemy panel. */
+    anchor: HTMLElement | null;
+    /** Kliknięcie w backdrop albo Escape. */
+    onClose: () => void;
+    /** Panel dostaje szerokość wyzwalacza (tak działa lista selecta). */
+    matchAnchorWidth?: boolean;
+    /** Odstęp od wyzwalacza w pikselach. */
+    offset?: number;
+    /**
+     * Krawędź, do której wyrównujemy panel: `start` (lewa, domyślnie) albo `end` (prawa).
+     * `end` przydaje się, gdy wyzwalacz siedzi przy prawej krawędzi kontrolki — panel otwiera się
+     * wtedy w lewo i nie wychodzi poza nią.
+     */
+    align?: 'start' | 'end';
+    /**
+     * Przezroczysty backdrop przechwytujący kliknięcie poza panelem. Wyłącz go tam, gdzie panel
+     * ma zostawić wyzwalacz klikalnym — autocomplete zamyka się na `blur` pola, a backdrop
+     * zasłoniłby to pole i zabrałby mu każde kliknięcie.
+     */
+    withBackdrop?: boolean;
+    children: ReactNode;
+}
+export declare function KptOverlay({ open, anchor, onClose, matchAnchorWidth, offset, align, withBackdrop, children, }: Readonly<KptOverlayProps>): import("react").ReactPortal | null;

package/dist/internal/overlay.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useKptOverlayContainer } from "./overlay-container.js";
+/** Ta sama warstwa co `--kpt-z-overlay` w tokenach — panel ma być nad treścią aplikacji. */
+const Z_INDEX = 'var(--kpt-z-overlay, 1100)';
+export function KptOverlay({ open, anchor, onClose, matchAnchorWidth = false, offset = 4, align = 'start', withBackdrop = true, children, }) {
+    const container = useKptOverlayContainer();
+    const panelRef = useRef(null);
+    const [position, setPosition] = useState(null);
+    const update = useCallback(() => {
+        if (!anchor)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const panelHeight = panelRef.current?.offsetHeight ?? 0;
+        const panelWidth = panelRef.current?.offsetWidth ?? 0;
+        const below = window.innerHeight - rect.bottom;
+        // Odbicie w górę tylko wtedy, gdy pod spodem naprawdę brakuje miejsca, a nad wyzwalaczem
+        // jest go więcej — inaczej panel skakałby przy każdym przewinięciu o kilka pikseli.
+        const flip = panelHeight > 0 && below < panelHeight + offset && rect.top > below;
+        setPosition({
+            top: flip ? rect.top - panelHeight - offset : rect.bottom + offset,
+            left: align === 'end' ? rect.right - panelWidth : rect.left,
+            ...(matchAnchorWidth ? { width: rect.width } : {}),
+        });
+    }, [anchor, matchAnchorWidth, offset, align]);
+    useLayoutEffect(() => {
+        if (!open) {
+            setPosition(null);
+            return;
+        }
+        update();
+    }, [open, update]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onScrollOrResize = () => update();
+        // `capture` łapie też przewijanie kontenerów w środku strony, nie tylko okna.
+        window.addEventListener('scroll', onScrollOrResize, true);
+        window.addEventListener('resize', onScrollOrResize);
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('scroll', onScrollOrResize, true);
+            window.removeEventListener('resize', onScrollOrResize);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open, update, onClose]);
+    if (!open || !container)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [withBackdrop ? (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: Z_INDEX }, onMouseDown: onClose })) : null, _jsx("div", { ref: panelRef, style: {
+                    position: 'fixed',
+                    top: position?.top ?? 0,
+                    left: position?.left ?? 0,
+                    width: position?.width,
+                    zIndex: Z_INDEX,
+                    // Panel bez pozycji jeszcze nie został zmierzony — chowamy go na pierwszej klatce,
+                    // żeby nie mrugnął w lewym górnym rogu.
+                    visibility: position ? 'visible' : 'hidden',
+                }, children: children })] }), container);
+}

package/dist/internal/slot.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from 'react';
+type AnyProps = Record<string, unknown>;
+/**
+ * Scala propsy slotu z propsami dziecka. Zasady, w kolejności ważności:
+ * handlery są komponowane (najpierw dziecka, potem slotu), `className` sklejane,
+ * `style` nakładane (dziecko wygrywa), `ref` łączony, reszta — dziecko nadpisuje slot.
+ */
+export declare function mergeSlotProps(slotProps: AnyProps, childProps: AnyProps): AnyProps;
+/**
+ * Renderuje `child` z propsami slotu i podmienioną treścią. Używane przez komponenty,
+ * które w trybie `asChild` muszą zachować własne opakowanie treści — na przykład
+ * przycisk owija zawartość w `.kpt-button__content` niezależnie od tego, jakim
+ * elementem ostatecznie jest.
+ */
+export declare function renderAsChild(child: ReactElement, slotProps: AnyProps, content: ReactNode): ReactElement;
+export interface SlotProps {
+    /** Dokładnie jeden element — to on przejmie propsy slotu. */
+    children?: ReactNode;
+    [prop: string]: unknown;
+}
+/** Renderuje swoje dziecko z doklejonymi propsami. Bez dziecka-elementu zwraca `null`. */
+export declare function Slot({ children, ...slotProps }: Readonly<SlotProps>): ReactElement | null;
+export {};

package/dist/internal/slot.js

@@ -0,0 +1,49 @@
+import { cloneElement, isValidElement } from 'react';
+import { cn } from "./cn.js";
+import { composeRefs } from "./compose-refs.js";
+/**
+ * Scala propsy slotu z propsami dziecka. Zasady, w kolejności ważności:
+ * handlery są komponowane (najpierw dziecka, potem slotu), `className` sklejane,
+ * `style` nakładane (dziecko wygrywa), `ref` łączony, reszta — dziecko nadpisuje slot.
+ */
+export function mergeSlotProps(slotProps, childProps) {
+    const merged = { ...slotProps };
+    for (const [key, childValue] of Object.entries(childProps)) {
+        const slotValue = slotProps[key];
+        if (/^on[A-Z]/.test(key) && typeof childValue === 'function' && typeof slotValue === 'function') {
+            merged[key] = (...args) => {
+                childValue(...args);
+                slotValue(...args);
+            };
+        }
+        else if (key === 'className') {
+            merged[key] = cn(slotValue, childValue);
+        }
+        else if (key === 'style') {
+            merged[key] = { ...slotValue, ...childValue };
+        }
+        else if (key === 'ref') {
+            merged[key] = composeRefs(slotValue, childValue);
+        }
+        else if (childValue !== undefined) {
+            merged[key] = childValue;
+        }
+    }
+    return merged;
+}
+/**
+ * Renderuje `child` z propsami slotu i podmienioną treścią. Używane przez komponenty,
+ * które w trybie `asChild` muszą zachować własne opakowanie treści — na przykład
+ * przycisk owija zawartość w `.kpt-button__content` niezależnie od tego, jakim
+ * elementem ostatecznie jest.
+ */
+export function renderAsChild(child, slotProps, content) {
+    return cloneElement(child, mergeSlotProps(slotProps, child.props), content);
+}
+/** Renderuje swoje dziecko z doklejonymi propsami. Bez dziecka-elementu zwraca `null`. */
+export function Slot({ children, ...slotProps }) {
+    if (!isValidElement(children))
+        return null;
+    const child = children;
+    return cloneElement(child, mergeSlotProps(slotProps, child.props));
+}

package/dist/internal/types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+/**
+ * Propsy wrappera hosta. Port odtwarza dwupoziomowy DOM Angulara
+ * (`<kpt-button class="kpt-button-host">` wokół `<button class="kpt-button">`),
+ * bo host niesie własne style. `className` i `ref` komponentu trafiają na element
+ * wewnętrzny — wrapper konfiguruje się właśnie tym propem.
+ */
+export type KptHostProps<E extends ElementType = 'span'> = Omit<ComponentPropsWithoutRef<E>, 'children'> & {
+    /**
+     * Atrybuty `data-*` hosta. JSX przepuszcza je na elementach wbudowanych sam z siebie,
+     * ale ten typ opisuje zwykły obiekt — bez tego wpisu stan wariantu, który w Angularze
+     * siedzi na hoście (`[attr.data-on]`), nie miałby jak tam trafić.
+     */
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/** Wspólny fragment propsów dla komponentów wspierających wzorzec `asChild`. */
+export interface AsChildProps {
+    /**
+     * Zamiast renderować własny element, oddaje propsy jedynemu dziecku.
+     * Pozwala podstawić `<Link>`, `<a>` albo dowolny inny komponent
+     * bez utraty klas i atrybutów `data-*`.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+}

package/dist/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/use-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/** Nazwa breakpointa z tokenów `--kpt-breakpoint-*` (mobile-first). */
+export type KptBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Progi breakpointów w pikselach — czytane wprost z `@konce-pt/tokens`, więc nie da się
+ * ich rozjechać z `@media` biblioteki ani z portem Angulara (tam ta sama tabela powstaje
+ * w kroku generowania).
+ */
+export declare const KPT_BREAKPOINTS: Record<KptBreakpoint, number>;
+/** Dowolne media query jako wartość reaktywna. Poza przeglądarką zawsze `false`. */
+export declare function useKptMediaQuery(query: string): boolean;
+/**
+ * Czy viewport ma szerokość co najmniej danego breakpointa (mobile-first).
+ *
+ * O UKŁADZIE komponentów decyduje wyłącznie CSS — ten hook odpowiada tylko za zachowania,
+ * których CSS nie wyrazi (np. w którą stronę ma zadziałać przycisk). Dzięki temu nic nie
+ * migocze przed hydracją.
+ */
+export declare function useKptBreakpointUp(breakpoint: KptBreakpoint): boolean;

package/dist/internal/use-breakpoint.js

@@ -0,0 +1,52 @@
+import { useSyncExternalStore } from 'react';
+import { KPT_BREAKPOINT_2XL, KPT_BREAKPOINT_LG, KPT_BREAKPOINT_MD, KPT_BREAKPOINT_SM, KPT_BREAKPOINT_XL, } from '@konce-pt/tokens';
+const toPx = (value) => Number.parseFloat(value);
+/**
+ * Progi breakpointów w pikselach — czytane wprost z `@konce-pt/tokens`, więc nie da się
+ * ich rozjechać z `@media` biblioteki ani z portem Angulara (tam ta sama tabela powstaje
+ * w kroku generowania).
+ */
+export const KPT_BREAKPOINTS = {
+    sm: toPx(KPT_BREAKPOINT_SM),
+    md: toPx(KPT_BREAKPOINT_MD),
+    lg: toPx(KPT_BREAKPOINT_LG),
+    xl: toPx(KPT_BREAKPOINT_XL),
+    '2xl': toPx(KPT_BREAKPOINT_2XL),
+};
+/**
+ * Jeden `MediaQueryList` i jeden nasłuch na zapytanie, współdzielone przez wszystkie
+ * komponenty — tak samo jak memoizacja w `KptBreakpointObserver` po stronie Angulara.
+ */
+const stores = new Map();
+function storeFor(query) {
+    const cached = stores.get(query);
+    if (cached)
+        return cached;
+    const list = typeof window === 'undefined' ? null : window.matchMedia(query);
+    const store = list
+        ? {
+            subscribe: (onChange) => {
+                list.addEventListener('change', onChange);
+                return () => list.removeEventListener('change', onChange);
+            },
+            getSnapshot: () => list.matches,
+        }
+        : { subscribe: () => () => { }, getSnapshot: () => false };
+    stores.set(query, store);
+    return store;
+}
+/** Dowolne media query jako wartość reaktywna. Poza przeglądarką zawsze `false`. */
+export function useKptMediaQuery(query) {
+    const store = storeFor(query);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot, () => false);
+}
+/**
+ * Czy viewport ma szerokość co najmniej danego breakpointa (mobile-first).
+ *
+ * O UKŁADZIE komponentów decyduje wyłącznie CSS — ten hook odpowiada tylko za zachowania,
+ * których CSS nie wyrazi (np. w którą stronę ma zadziałać przycisk). Dzięki temu nic nie
+ * migocze przed hydracją.
+ */
+export function useKptBreakpointUp(breakpoint) {
+    return useKptMediaQuery(`(min-width: ${KPT_BREAKPOINTS[breakpoint]}px)`);
+}

package/dist/internal/use-controllable-state.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Stan działający w obu trybach naraz: kontrolowanym (`value` podane z zewnątrz)
+ * i niekontrolowanym (`defaultValue` + stan wewnętrzny). Kontrakt jest ten sam
+ * co w natywnych polach formularza, więc komponenty współpracują z natywnym
+ * `<form>`, React 19 Actions i React Hook Form bez adapterów.
+ */
+export declare function useControllableState<T>(options: {
+    value: T | undefined;
+    defaultValue: T;
+    onChange?: (next: T) => void;
+}): [T, (next: T) => void];

package/dist/internal/use-controllable-state.js

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+/**
+ * Stan działający w obu trybach naraz: kontrolowanym (`value` podane z zewnątrz)
+ * i niekontrolowanym (`defaultValue` + stan wewnętrzny). Kontrakt jest ten sam
+ * co w natywnych polach formularza, więc komponenty współpracują z natywnym
+ * `<form>`, React 19 Actions i React Hook Form bez adapterów.
+ */
+export function useControllableState(options) {
+    const { value, defaultValue, onChange } = options;
+    const isControlled = value !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const setValue = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    return [isControlled ? value : uncontrolled, setValue];
+}

package/dist/internal/use-id.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Stabilny identyfikator elementu w konwencji Angulara (`kpt-input-…`), z tą samą
+ * zasadą pierwszeństwa: własne `id` przekazane przez propsy wygrywa.
+ *
+ * `useId()` z Reacta zwraca wartość ze znakami spoza [A-Za-z0-9] (React 19 używa
+ * `«r0»`), która jest poprawna w atrybucie `id`, ale nie w selektorze CSS —
+ * dlatego zostawiamy z niej tylko część alfanumeryczną.
+ */
+export declare function useKptId(provided: string | undefined, prefix: string): string;

package/dist/internal/use-id.js

@@ -0,0 +1,13 @@
+import { useId } from 'react';
+/**
+ * Stabilny identyfikator elementu w konwencji Angulara (`kpt-input-…`), z tą samą
+ * zasadą pierwszeństwa: własne `id` przekazane przez propsy wygrywa.
+ *
+ * `useId()` z Reacta zwraca wartość ze znakami spoza [A-Za-z0-9] (React 19 używa
+ * `«r0»`), która jest poprawna w atrybucie `id`, ale nie w selektorze CSS —
+ * dlatego zostawiamy z niej tylko część alfanumeryczną.
+ */
+export function useKptId(provided, prefix) {
+    const generated = useId().replace(/[^a-zA-Z0-9]/g, '');
+    return provided ?? `${prefix}-${generated}`;
+}

package/dist/knob/knob.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface KptKnobProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Bok kwadratu SVG w pikselach. */
+    size?: number;
+    /** Grubość łuku w pikselach. */
+    stroke?: number;
+    /** Dopisek za wartością w środku (np. '%'). */
+    suffix?: string;
+    showValue?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Pokrętło — wybór wartości po łuku, przeciąganiem albo strzałkami.
+ *
+ * @example
+ * <KptKnob value={level} onValueChange={setLevel} min={0} max={100} step={5} suffix="%" />
+ */
+export declare function KptKnob({ value, defaultValue, onValueChange, min, max, step, size, stroke, suffix, showValue, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptKnobProps>): import("react").JSX.Element;

package/dist/knob/knob.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+const TAU = Math.PI * 2;
+/** Przerwa u dołu — kąt „otwarcia" łuku, żeby początek i koniec były rozróżnialne. */
+const GAP = Math.PI / 4;
+const START_ANGLE = Math.PI / 2 + GAP;
+const SWEEP = TAU - GAP * 2;
+/**
+ * Pokrętło — wybór wartości po łuku, przeciąganiem albo strzałkami.
+ *
+ * @example
+ * <KptKnob value={level} onValueChange={setLevel} min={0} max={100} step={5} suffix="%" />
+ */
+export function KptKnob({ value, defaultValue = 0, onValueChange, min = 0, max = 100, step = 1, size = 96, stroke = 10, suffix = '', showValue = true, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+    const svgRef = useRef(null);
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const showInvalid = invalid && (touched ?? true);
+    const range = max - min;
+    const ratio = range <= 0 ? 0 : (current - min) / range;
+    /** Wycinek łuku jako ścieżka SVG; `to <= from` daje samo `M`, czyli nic widocznego. */
+    const arc = (from, to) => {
+        const r = (size - stroke) / 2;
+        const c = size / 2;
+        const a0 = START_ANGLE + SWEEP * from;
+        const a1 = START_ANGLE + SWEEP * Math.max(from, to);
+        const x0 = c + r * Math.cos(a0);
+        const y0 = c + r * Math.sin(a0);
+        const x1 = c + r * Math.cos(a1);
+        const y1 = c + r * Math.sin(a1);
+        if (Math.abs(a1 - a0) < 1e-4)
+            return `M ${x0} ${y0}`;
+        return `M ${x0} ${y0} A ${r} ${r} 0 ${a1 - a0 > Math.PI ? 1 : 0} 1 ${x1} ${y1}`;
+    };
+    const clamp = (raw) => Math.min(max, Math.max(min, Math.round(raw / step) * step));
+    const setFromPoint = (clientX, clientY) => {
+        const svg = svgRef.current;
+        if (!svg)
+            return;
+        const rect = svg.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        let angle = Math.atan2(clientY - cy, clientX - cx) - START_ANGLE;
+        angle = ((angle % TAU) + TAU) % TAU;
+        // Kursor w przerwie u dołu nie ma swojej wartości — przyciągamy go do bliższego końca łuku,
+        // inaczej przeciągnięcie przez dół przeskakiwałoby z maksimum na minimum.
+        if (angle > SWEEP + GAP)
+            angle = angle > SWEEP + GAP / 2 ? 0 : SWEEP;
+        setCurrent(clamp(min + Math.min(1, Math.max(0, angle / SWEEP)) * range));
+    };
+    const onPointerDown = (event) => {
+        if (disabled)
+            return;
+        setFromPoint(event.clientX, event.clientY);
+        // Nasłuch wisi na oknie, a nie na pokrętle: przeciąganie ma nie gubić wartości,
+        // gdy kursor wyjedzie poza koło — a wyjeżdża praktycznie zawsze.
+        const move = (e) => setFromPoint(e.clientX, e.clientY);
+        const up = () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+            onTouch?.();
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+    };
+    const onKeyDown = (event) => {
+        if (disabled)
+            return;
+        let next = current;
+        if (event.key === 'ArrowUp' || event.key === 'ArrowRight')
+            next += step;
+        else if (event.key === 'ArrowDown' || event.key === 'ArrowLeft')
+            next -= step;
+        else if (event.key === 'Home')
+            next = min;
+        else if (event.key === 'End')
+            next = max;
+        else
+            return;
+        event.preventDefault();
+        setCurrent(Math.min(max, Math.max(min, next)));
+        onTouch?.();
+    };
+    return (_jsx("div", { className: cn('kpt-knob-host', className), ...rest, children: _jsx("div", { className: cn('kpt-knob', showInvalid && 'kpt-knob--invalid'), role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-disabled": disabled || undefined, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsxs("svg", { ref: svgRef, viewBox: `0 0 ${size} ${size}`, style: { width: size, height: size }, children: [_jsx("path", { className: "kpt-knob__range", d: arc(0, 1), fill: "none", strokeWidth: stroke, strokeLinecap: "round" }), _jsx("path", { className: "kpt-knob__value", d: arc(0, ratio), fill: "none", strokeWidth: stroke, strokeLinecap: "round" }), showValue ? (_jsxs("text", { className: "kpt-knob__text", x: size / 2, y: size / 2, textAnchor: "middle", dominantBaseline: "central", children: [current, suffix] })) : null] }) }) }));
+}

package/dist/listbox/listbox.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptOption } from '../shared/types.ts';
+export interface KptListboxProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    options?: KptOption<T>[];
+    value?: T | T[] | null;
+    defaultValue?: T | T[] | null;
+    onValueChange?: (value: T | T[] | null) => void;
+    multiple?: boolean;
+    /** Pole filtrowania nad listą. */
+    filter?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Lista wyboru widoczna w całości, bez rozwijania. Pojedynczy albo wielokrotny wybór,
+ * opcjonalny filtr.
+ *
+ * W trybie pojedynczym ponowny klik w zaznaczoną opcję odznacza ją — lista bywa filtrem,
+ * a filtr trzeba dać się wyczyścić bez sięgania po osobny przycisk.
+ *
+ * @example
+ * <KptListbox options={roles} value={role} onValueChange={setRole} filter />
+ * <KptListbox options={tags} value={tags} onValueChange={setTags} multiple />
+ */
+export declare function KptListbox<T>({ options, value, defaultValue, onValueChange, multiple, filter, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptListboxProps<T>>): import("react").JSX.Element;