@konce-pt/react 0.8.0

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

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptOption } from '../shared/types.ts';
+export interface KptRadioGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    options?: KptOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+    /** Nazwa grupy w formularzu; pominięta = generowana. */
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Grupa przycisków opcji (radio). Opcje przez `options`.
+ *
+ * Wszystkie pola dzielą jedną nazwę `name` — to ona, a nie kod komponentu, sprawia, że
+ * przeglądarka traktuje je jako jedną grupę i pozwala chodzić po niej strzałkami.
+ *
+ * @example
+ * <KptRadioGroup options={plans} value={plan} onValueChange={setPlan} />
+ */
+export declare function KptRadioGroup<T>({ options, value, defaultValue, onValueChange, name, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptRadioGroupProps<T>>): import("react").JSX.Element;

package/dist/radio-group/radio-group.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } 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";
+/**
+ * Grupa przycisków opcji (radio). Opcje przez `options`.
+ *
+ * Wszystkie pola dzielą jedną nazwę `name` — to ona, a nie kod komponentu, sprawia, że
+ * przeglądarka traktuje je jako jedną grupę i pozwala chodzić po niej strzałkami.
+ *
+ * @example
+ * <KptRadioGroup options={plans} value={plan} onValueChange={setPlan} />
+ */
+export function KptRadioGroup({ options = [], value, defaultValue, onValueChange, name, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+    const groupName = useKptId(name, 'kpt-radio');
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const showInvalid = invalid && (touched ?? true);
+    return (_jsx("div", { className: cn('kpt-radio-group-host', className), ...rest, children: _jsx("div", { className: "kpt-radio-group", role: "radiogroup", "aria-invalid": showInvalid || undefined, children: options.map((option) => (_jsxs("label", { className: cn('kpt-radio', (disabled || option.disabled) && 'kpt-radio--disabled'), children: [_jsx("input", { type: "radio", className: "kpt-radio__input", name: groupName, checked: option.value === current, disabled: disabled || option.disabled, onChange: () => setCurrent(option.value), onBlur: () => onTouch?.() }), _jsx("span", { className: "kpt-radio__dot", "aria-hidden": "true" }), _jsx("span", { className: "kpt-radio__label", children: option.label })] }, String(option.value)))) }) }));
+}

package/dist/rating/rating.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptRatingProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Liczba gwiazdek. */
+    count?: number;
+    /** Ocena tylko do odczytu — bez klikania i bez podglądu pod kursorem. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Ocena gwiazdkami. Kliknięcie zapalonej gwiazdki zeruje ocenę, więc wystawioną można cofnąć
+ * bez osobnego przycisku „wyczyść".
+ *
+ * @example
+ * <KptRating value={score} onValueChange={setScore} count={5} />
+ * <KptRating value={4} readOnly />
+ */
+export declare function KptRating({ value, defaultValue, onValueChange, count, readOnly, disabled, onTouch, locale, dictionary, className, ...rest }: Readonly<KptRatingProps>): import("react").JSX.Element;

package/dist/rating/rating.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Ocena gwiazdkami. Kliknięcie zapalonej gwiazdki zeruje ocenę, więc wystawioną można cofnąć
+ * bez osobnego przycisku „wyczyść".
+ *
+ * @example
+ * <KptRating value={score} onValueChange={setScore} count={5} />
+ * <KptRating value={4} readOnly />
+ */
+export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, readOnly = false, disabled = false, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const [hover, setHover] = useState(0);
+    const locked = readOnly || disabled;
+    // Podgląd pod kursorem wygrywa z oceną, ale tylko dopóki kursor jest nad gwiazdkami —
+    // po `mouseleave` wraca 0 i zapalona zostaje sama wartość.
+    const shown = hover || current;
+    const pick = (star) => {
+        if (locked)
+            return;
+        setCurrent(current === star ? 0 : star);
+        onTouch?.();
+    };
+    return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { className: "kpt-rating", role: "slider", "aria-valuenow": current, "aria-valuemax": count, children: Array.from({ length: count }, (_, index) => index + 1).map((star) => (_jsx("button", { type: "button", className: cn('kpt-rating__star', star <= shown && 'is-filled'), disabled: locked, onClick: () => pick(star), onMouseEnter: () => setHover(star), onMouseLeave: () => setHover(0), "aria-label": t('rating.star', { value: star, max: count }), children: _jsx(KptIcon, { name: "star" }) }, star))) }) }));
+}

package/dist/rich-text/lists.d.ts

@@ -0,0 +1,17 @@
+/** Najbliższy punkt listy zawierający węzeł, ale tylko wewnątrz edytora. */
+export declare function closestItem(editor: HTMLElement | null, node: Node | null): HTMLLIElement | null;
+/** Poziom punktu w obrębie edytora (1 = najwyższy). */
+export declare function level(editor: HTMLElement | null, li: HTMLLIElement): number;
+export declare function canIndentItem(editor: HTMLElement | null, li: HTMLLIElement, maxLevel: number): boolean;
+export declare function canOutdentItem(li: HTMLLIElement): boolean;
+/**
+ * Punkty listy objęte zaznaczeniem. Przy wielu punktach operujemy na ich wspólnym poziomie
+ * zagnieżdżenia — inaczej podpunkt dostałby wcięcie dwa razy: raz sam, raz z rodzicem.
+ */
+export declare function selectedItems(editor: HTMLElement | null): HTMLLIElement[];
+/**
+ * Przesuwa zaznaczone punkty o poziom. Zwraca `true`, gdy DOM faktycznie się zmienił — od tego
+ * zależy, czy Tab dostanie `preventDefault()`, a więc czy edytor nie stanie się pułapką
+ * klawiaturową (WCAG 2.1.2).
+ */
+export declare function shiftItems(editor: HTMLElement | null, dir: 'indent' | 'outdent', maxLevel: number): boolean;

package/dist/rich-text/lists.js

@@ -0,0 +1,144 @@
+/*
+ * Wcięcia list. `execCommand('indent')` daje w Chrome nieprawidłowe `ul > ul` (albo `blockquote`
+ * z marginesem, który i tak zdjąłby sanitizer), więc zagnieżdżanie robimy własnym kodem DOM.
+ * Plik nie zna Reacta — to czyste operacje na węzłach.
+ */
+/** Najbliższy punkt listy zawierający węzeł, ale tylko wewnątrz edytora. */
+export function closestItem(editor, node) {
+    const el = node instanceof Element ? node : (node?.parentElement ?? null);
+    const li = el?.closest('li') ?? null;
+    return li instanceof HTMLLIElement && editor?.contains(li) ? li : null;
+}
+/** Poziom punktu w obrębie edytora (1 = najwyższy). */
+export function level(editor, li) {
+    let depth = 1;
+    let parent = li.parentElement?.closest('li') ?? null;
+    while (parent && editor?.contains(parent)) {
+        depth++;
+        parent = parent.parentElement?.closest('li') ?? null;
+    }
+    return depth;
+}
+/** Najgłębszy poziom w poddrzewie punktu — wcięcie przenosi podpunkty razem z rodzicem. */
+function deepest(editor, li) {
+    let max = level(editor, li);
+    for (const nested of li.querySelectorAll('li')) {
+        max = Math.max(max, level(editor, nested));
+    }
+    return max;
+}
+export function canIndentItem(editor, li, maxLevel) {
+    return li.previousElementSibling instanceof HTMLLIElement && deepest(editor, li) < maxLevel;
+}
+export function canOutdentItem(li) {
+    return li.parentElement?.parentElement instanceof HTMLLIElement;
+}
+/**
+ * Punkty listy objęte zaznaczeniem. Przy wielu punktach operujemy na ich wspólnym poziomie
+ * zagnieżdżenia — inaczej podpunkt dostałby wcięcie dwa razy: raz sam, raz z rodzicem.
+ */
+export function selectedItems(editor) {
+    const selection = window.getSelection();
+    if (!editor || !selection || selection.rangeCount === 0)
+        return [];
+    const range = selection.getRangeAt(0);
+    if (!editor.contains(range.commonAncestorContainer))
+        return [];
+    const start = closestItem(editor, range.startContainer);
+    const end = closestItem(editor, range.endContainer);
+    if (!start)
+        return [];
+    if (!end || start === end)
+        return [start];
+    // Podnieś głębszy koniec, aż oba będą rodzeństwem w tej samej liście.
+    let a = start;
+    let b = end;
+    while (a && b && a.parentElement !== b.parentElement) {
+        if (level(editor, a) >= level(editor, b))
+            a = closestItem(editor, a.parentElement);
+        else
+            b = closestItem(editor, b.parentElement);
+    }
+    if (!a || !b || !a.parentElement)
+        return [start];
+    const siblings = [...a.parentElement.children].filter((el) => el instanceof HTMLLIElement);
+    const from = siblings.indexOf(a);
+    const to = siblings.indexOf(b);
+    if (from < 0 || to < 0)
+        return [start];
+    return siblings.slice(Math.min(from, to), Math.max(from, to) + 1);
+}
+/** Zagnieżdża punkt w podliście poprzedniego punktu — poprawne `li > ul > li`. */
+function indentItem(editor, li, maxLevel) {
+    if (!canIndentItem(editor, li, maxLevel))
+        return false;
+    const prev = li.previousElementSibling;
+    let sub = prev.lastElementChild;
+    if (!(sub instanceof HTMLUListElement || sub instanceof HTMLOListElement)) {
+        // Ta sama numeracja co poziom wyżej.
+        sub = document.createElement(li.parentElement?.tagName ?? 'UL');
+        prev.append(sub);
+    }
+    sub.append(li);
+    return true;
+}
+/** Wyciąga punkt poziom wyżej; rodzeństwo po nim trafia do jego podlisty, więc kolejność zostaje. */
+function outdentItem(li) {
+    const list = li.parentElement;
+    const host = list?.parentElement;
+    if (!list || !(host instanceof HTMLLIElement))
+        return false;
+    const children = [...list.children];
+    const after = children.slice(children.indexOf(li) + 1);
+    if (after.length > 0) {
+        let own = li.lastElementChild;
+        if (!(own instanceof HTMLUListElement || own instanceof HTMLOListElement)) {
+            own = document.createElement(list.tagName);
+            li.append(own);
+        }
+        own.append(...after);
+    }
+    host.after(li);
+    if (list.children.length === 0)
+        list.remove();
+    return true;
+}
+/**
+ * Przesuwa zaznaczone punkty o poziom. Zwraca `true`, gdy DOM faktycznie się zmienił — od tego
+ * zależy, czy Tab dostanie `preventDefault()`, a więc czy edytor nie stanie się pułapką
+ * klawiaturową (WCAG 2.1.2).
+ */
+export function shiftItems(editor, dir, maxLevel) {
+    const items = selectedItems(editor);
+    if (items.length === 0)
+        return false;
+    // Migawka granic kursora: przy usunięciu węzła spec DOM przestawia *żywy* Range na starego
+    // rodzica, więc zapamiętanie samego zakresu wyprowadziłoby kursor poza przenoszony punkt.
+    const selection = window.getSelection();
+    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+    const caret = range
+        ? { sc: range.startContainer, so: range.startOffset, ec: range.endContainer, eo: range.endOffset }
+        : null;
+    // Outdent od końca — inaczej `host.after()` odwróciłby kolejność przenoszonych punktów.
+    const order = dir === 'outdent' ? [...items].reverse() : items;
+    let changed = false;
+    for (const li of order) {
+        const done = dir === 'indent' ? indentItem(editor, li, maxLevel) : outdentItem(li);
+        changed = done || changed;
+    }
+    if (!changed)
+        return false;
+    if (caret && selection && caret.sc.isConnected && caret.ec.isConnected) {
+        try {
+            const restored = document.createRange();
+            restored.setStart(caret.sc, caret.so);
+            restored.setEnd(caret.ec, caret.eo);
+            selection.removeAllRanges();
+            selection.addRange(restored);
+        }
+        catch {
+            /* offset przestał pasować po przeniesieniu rodzeństwa — zostaw kursor tam, gdzie jest */
+        }
+    }
+    return true;
+}

package/dist/rich-text/rich-text.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export type KptRichTool = 'copy' | 'paste' | 'pasteText' | 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'indent' | 'outdent' | 'foreColor' | 'backColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'table' | 'clear' | 'html';
+/** Pasek: płaska lista narzędzi albo grupy — sekcje rozdzielone separatorem. */
+export type KptRichToolbar = KptRichTool[] | KptRichTool[][];
+export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children'>, KptI18nOverrides {
+    /** Wartość jako HTML. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    toolbar?: KptRichToolbar;
+    placeholder?: string;
+    /** Maksymalna głębokość zagnieżdżenia list (Tab, „Dodaj wcięcie"). */
+    maxListLevel?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Lekki edytor tekstu sformatowanego na `contenteditable`, z konfigurowalnym paskiem sekcji
+ * i edycją tabel. Wartością jest HTML.
+ *
+ * @example
+ * <KptRichText value={html} onValueChange={setHtml} />
+ * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
+ */
+export declare function KptRichText({ value, defaultValue, onValueChange, toolbar, placeholder, maxListLevel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptRichTextProps>): import("react").JSX.Element;