@konce-pt/react 0.8.0

package/dist/button-group/button-group.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+/**
+ * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
+ *
+ * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
+ *
+ * @example
+ * <KptButtonGroup value={view} onValueChange={setView}
+ *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
+ */
+export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, onTouch, hostProps, className, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const select = (option) => {
+        if (option.disabled || disabled)
+            return;
+        setCurrent(option.value);
+        onTouch?.();
+    };
+    return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', className), role: "group", "data-size": size, ...rest, children: options.map((option) => {
+                const active = option.value === current;
+                return (_jsx("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, onClick: () => select(option), children: option.label }, String(option.value)));
+            }) }) }));
+}

package/dist/card/card.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentPropsWithRef } from 'react';
+export type KptCardVariant = 'elevated' | 'outlined';
+export interface KptCardProps extends ComponentPropsWithRef<'div'> {
+    /** Wariant wizualny. */
+    variant?: KptCardVariant;
+    /** Opcjonalny tekst nagłówka. Dla bogatszego nagłówka użyj `<KptCard.Header>`. */
+    header?: string;
+    /** Body bez wewnętrznego paddingu — dla układów zarządzających własnymi sekcjami. */
+    flush?: boolean;
+}
+/**
+ * Karta Koncept UI — powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
+ *
+ * Ciało karty renderuje sama karta; `flush` zdejmuje jego padding. Do bogatych układów
+ * służą komponenty składane: `KptCard.Media`, `.Lead`, `.Title`, `.Subtitle`, `.Section`,
+ * `.Tags`, `.Meta`, `.Actions`, `.Header`, `.Footer`.
+ *
+ * @example
+ * <KptCard header="Ustawienia" variant="outlined">
+ *   <p>Treść…</p>
+ *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
+ * </KptCard>
+ */
+export declare function KptCard({ variant, header, flush, className, children, ...rest }: Readonly<KptCardProps>): import("react").JSX.Element;
+export declare namespace KptCard {
+    var Header: typeof KptCardHeader;
+    var Footer: typeof KptCardFooter;
+    var Media: typeof KptCardMedia;
+    var Lead: typeof KptCardLead;
+    var Title: typeof KptCardTitle;
+    var Subtitle: typeof KptCardSubtitle;
+    var Section: typeof KptCardSection;
+    var Tags: typeof KptCardTags;
+    var Meta: typeof KptCardMeta;
+    var Actions: typeof KptCardActions;
+}
+/** Nagłówek karty — alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
+export declare function KptCardHeader({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+export declare namespace KptCardHeader {
+    var kptCardSlot: "header";
+}
+/**
+ * Stopka karty. Nosi atrybut `kptcardfooter` — to po nim celuje wspólny SCSS
+ * (nazwy atrybutów w selektorach CSS są w HTML case-insensitive, więc ta sama
+ * reguła `[kptCardFooter]` obsługuje oba porty).
+ */
+export declare function KptCardFooter({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+export declare namespace KptCardFooter {
+    var kptCardSlot: "footer";
+}
+/** Obraz na pełną szerokość, przycięty do promienia karty. Ustaw `aspect-ratio`/`height`. */
+export declare function KptCardMedia({ className, alt, ...rest }: Readonly<ComponentPropsWithRef<'img'>>): import("react").JSX.Element;
+/** Wiersz nagłówkowy (awatar + tytuły), z paddingiem. */
+export declare function KptCardLead({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+/** Typografia tytułu. */
+export declare function KptCardTitle({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+/** Typografia podtytułu (kolor przygaszony). */
+export declare function KptCardSubtitle({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+/** Sekcja z paddingiem — kolumna z odstępami. */
+export declare function KptCardSection({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+/** Wiersz chipów/tagów. */
+export declare function KptCardTags({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+/** Wiersz „ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
+export declare function KptCardMeta({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
+/** Wiersz przycisków o równych szerokościach. */
+export declare function KptCardActions({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;

package/dist/card/card.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { cn } from "../internal/cn.js";
+/*
+ * Karta odtwarza projekcję treści z Angulara: nagłówek i stopka są wyjmowane
+ * z dzieci i renderowane poza `.kpt-card__body`, dokładnie tam, gdzie stawia je
+ * szablon Angulara. Dzięki temu drzewo DOM jest identyczne, a wspólny SCSS
+ * (`[kptCardFooter]` poza body) trafia we właściwe węzły.
+ */
+/**
+ * Karta Koncept UI — powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
+ *
+ * Ciało karty renderuje sama karta; `flush` zdejmuje jego padding. Do bogatych układów
+ * służą komponenty składane: `KptCard.Media`, `.Lead`, `.Title`, `.Subtitle`, `.Section`,
+ * `.Tags`, `.Meta`, `.Actions`, `.Header`, `.Footer`.
+ *
+ * @example
+ * <KptCard header="Ustawienia" variant="outlined">
+ *   <p>Treść…</p>
+ *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
+ * </KptCard>
+ */
+export function KptCard({ variant = 'elevated', header, flush = false, className, children, ...rest }) {
+    const headers = [];
+    const footers = [];
+    const body = [];
+    Children.forEach(children, (child) => {
+        const bucket = isValidElement(child) ? slotOf(child) : 'body';
+        if (bucket === 'header')
+            headers.push(child);
+        else if (bucket === 'footer')
+            footers.push(child);
+        else
+            body.push(child);
+    });
+    return (_jsxs("div", { className: cn('kpt-card', className), "data-variant": variant, ...rest, children: [header ? _jsx("div", { className: "kpt-card__header", children: header }) : null, headers, _jsx("div", { className: cn('kpt-card__body', flush && 'kpt-card__body--flush'), children: body }), footers] }));
+}
+function slotOf(child) {
+    return child.type?.kptCardSlot ?? 'body';
+}
+/** Nagłówek karty — alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
+export function KptCardHeader({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__header', className), ...rest });
+}
+KptCardHeader.kptCardSlot = 'header';
+/**
+ * Stopka karty. Nosi atrybut `kptcardfooter` — to po nim celuje wspólny SCSS
+ * (nazwy atrybutów w selektorach CSS są w HTML case-insensitive, więc ta sama
+ * reguła `[kptCardFooter]` obsługuje oba porty).
+ */
+export function KptCardFooter({ className, ...rest }) {
+    return _jsx("div", { kptcardfooter: '', className: className, ...rest });
+}
+KptCardFooter.kptCardSlot = 'footer';
+/** Obraz na pełną szerokość, przycięty do promienia karty. Ustaw `aspect-ratio`/`height`. */
+export function KptCardMedia({ className, alt = '', ...rest }) {
+    return _jsx("img", { className: cn('kpt-card__media', className), alt: alt, ...rest });
+}
+/** Wiersz nagłówkowy (awatar + tytuły), z paddingiem. */
+export function KptCardLead({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__lead', className), ...rest });
+}
+/** Typografia tytułu. */
+export function KptCardTitle({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__title', className), ...rest });
+}
+/** Typografia podtytułu (kolor przygaszony). */
+export function KptCardSubtitle({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__subtitle', className), ...rest });
+}
+/** Sekcja z paddingiem — kolumna z odstępami. */
+export function KptCardSection({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__section', className), ...rest });
+}
+/** Wiersz chipów/tagów. */
+export function KptCardTags({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__tags', className), ...rest });
+}
+/** Wiersz „ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
+export function KptCardMeta({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__meta', className), ...rest });
+}
+/** Wiersz przycisków o równych szerokościach. */
+export function KptCardActions({ className, ...rest }) {
+    return _jsx("div", { className: cn('kpt-card__actions', className), ...rest });
+}
+KptCard.Header = KptCardHeader;
+KptCard.Footer = KptCardFooter;
+KptCard.Media = KptCardMedia;
+KptCard.Lead = KptCardLead;
+KptCard.Title = KptCardTitle;
+KptCard.Subtitle = KptCardSubtitle;
+KptCard.Section = KptCardSection;
+KptCard.Tags = KptCardTags;
+KptCard.Meta = KptCardMeta;
+KptCard.Actions = KptCardActions;

package/dist/carousel/carousel.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children'>, KptI18nOverrides {
+    items?: T[];
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+    /** Szablon slajdu — odpowiednik `<ng-template let-item let-i="index">` z Angulara. */
+    renderSlide: (item: T, index: number) => ReactNode;
+}
+/**
+ * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
+ *
+ * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
+ * zostaje zamontowany — przewijanie nie gubi stanu treści.
+ *
+ * @example
+ * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
+ */
+export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;

package/dist/carousel/carousel.js

@@ -0,0 +1,24 @@
+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 { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
+ *
+ * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
+ * zostaje zamontowany — przewijanie nie gubi stanu treści.
+ *
+ * @example
+ * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
+ */
+export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [active, setActive] = useControllableState({
+        value: activeIndex,
+        defaultValue: defaultActiveIndex,
+        onChange: onActiveIndexChange,
+    });
+    const goTo = (index) => setActive(Math.min(Math.max(index, 0), items.length - 1));
+    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", style: { transform: `translateX(-${active * 100}%)` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", disabled: active === 0, "aria-label": t('common.previous'), onClick: () => goTo(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", disabled: active >= items.length - 1, "aria-label": t('common.next'), onClick: () => goTo(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
+}

package/dist/charts/chart-legend.d.ts

@@ -0,0 +1,23 @@
+import type { KptAlign, KptLegendPosition, KptLegendTitle, KptPointStyle } from '@konce-pt/chart';
+export interface KptChartLegendItem {
+    key: string;
+    name: string;
+    color: string;
+    hidden: boolean;
+}
+export interface KptChartLegendProps {
+    items?: KptChartLegendItem[];
+    position?: KptLegendPosition;
+    align?: KptAlign;
+    pointStyle?: KptPointStyle;
+    title?: KptLegendTitle;
+    /** Kliknięcie elementu — przełącz widoczność serii albo wycinka. */
+    onToggle?: (key: string) => void;
+    /** Wejście i wyjście kursora — podświetl serię albo wyczyść podświetlenie. */
+    onHighlight?: (key: string | null) => void;
+}
+/**
+ * Legenda wykresu — klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
+ * punktu. Element wewnętrzny biblioteki, nie część publicznego API.
+ */
+export declare function KptChartLegend({ items, position, align, pointStyle, title, onToggle, onHighlight, }: Readonly<KptChartLegendProps>): import("react").JSX.Element;

package/dist/charts/chart-legend.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Legenda wykresu — klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
+ * punktu. Element wewnętrzny biblioteki, nie część publicznego API.
+ */
+export function KptChartLegend({ items = [], position = 'bottom', align = 'center', pointStyle = 'circle', title, onToggle, onHighlight, }) {
+    return (_jsx("div", { className: "kpt-chart-legend-host", children: _jsxs("div", { className: "kpt-chart__legend", "data-position": position, "data-align": align, children: [title?.display && title.text ? (_jsx("div", { className: "kpt-chart__legend-title", "data-align": title.position ?? 'start', children: title.text })) : null, _jsx("ul", { className: "kpt-chart__legend-list", children: items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: cn('kpt-chart__legend-item', item.hidden && 'kpt-chart__legend-item--hidden'), onClick: () => onToggle?.(item.key), onPointerEnter: () => onHighlight?.(item.key), onPointerLeave: () => onHighlight?.(null), children: [_jsx("span", { className: "kpt-chart__legend-marker", "data-style": pointStyle, style: { ['--kpt-chart-legend-color']: item.color } }), _jsx("span", { className: "kpt-chart__legend-label", children: item.name })] }) }, item.key))) })] }) }));
+}

package/dist/charts/chart-tooltip.d.ts

@@ -0,0 +1,21 @@
+export interface KptChartTooltipRow {
+    name: string;
+    value: string;
+    color: string;
+}
+export interface KptChartTooltipState {
+    /** Pozycja pozioma w % szerokości kontenera (0–100). */
+    x: number;
+    /** Pozycja pionowa w % wysokości kontenera (0–100). */
+    y: number;
+    label: string;
+    rows: KptChartTooltipRow[];
+}
+export interface KptChartTooltipProps {
+    state: KptChartTooltipState | null;
+}
+/**
+ * Dymek wykresu — pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
+ * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
+ */
+export declare function KptChartTooltip({ state }: Readonly<KptChartTooltipProps>): import("react").JSX.Element | null;

package/dist/charts/chart-tooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Dymek wykresu — pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
+ * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
+ */
+export function KptChartTooltip({ state }) {
+    if (!state)
+        return null;
+    // Margines 6% trzyma dymek w granicach kontenera przy skrajnych punktach.
+    const left = Math.min(94, Math.max(6, state.x));
+    return (_jsx("div", { className: "kpt-chart-tooltip-host", children: _jsxs("div", { className: cn('kpt-chart__tooltip', state.y < 22 && 'kpt-chart__tooltip--flip'), style: { left: `${left}%`, top: `${state.y}%` }, role: "tooltip", children: [state.label ? _jsx("div", { className: "kpt-chart__tooltip-title", children: state.label }) : null, state.rows.map((row, index) => (_jsxs("div", { className: "kpt-chart__tooltip-row", children: [_jsx("span", { className: "kpt-chart__tooltip-dot", style: { backgroundColor: row.color } }), _jsx("span", { className: "kpt-chart__tooltip-name", children: row.name }), _jsx("span", { className: "kpt-chart__tooltip-val", children: row.value })] }, index)))] }) }));
+}

package/dist/charts/chart.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptChartConfig } from '@konce-pt/chart';
+export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    config: KptChartConfig;
+    /** Szerokość viewBoxa w jednostkach SVG; wykres skaluje się do kontenera. */
+    width?: number;
+    /** Wysokość viewBoxa w jednostkach SVG. */
+    height?: number;
+}
+/**
+ * Wykres SVG sterowany jednym obiektem `config`: line, bar, pie, doughnut, polarArea, radar.
+ * Cała geometria pochodzi z `@konce-pt/chart` — paczki bez frameworka, wspólnej z portem
+ * Angulara; komponent renderuje wyłącznie SVG, bez manipulacji DOM.
+ *
+ * @example
+ * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
+ */
+export declare function KptChart({ config, width, height, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;

package/dist/charts/chart.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { areaPath, bandScale, barLayout, extent, formatNumber, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, seriesColor, } from '@konce-pt/chart';
+import { cn } from "../internal/cn.js";
+import { KptChartLegend } from "./chart-legend.js";
+import { KptChartTooltip } from "./chart-tooltip.js";
+const VERTICAL_INSETS = { top: 12, right: 16, bottom: 28, left: 46 };
+const HORIZONTAL_INSETS = { top: 12, right: 16, bottom: 28, left: 76 };
+function styleFor(align) {
+    if (align === 'center')
+        return 'center';
+    if (align === 'end')
+        return 'right';
+    return 'left';
+}
+/**
+ * Wykres SVG sterowany jednym obiektem `config`: line, bar, pie, doughnut, polarArea, radar.
+ * Cała geometria pochodzi z `@konce-pt/chart` — paczki bez frameworka, wspólnej z portem
+ * Angulara; komponent renderuje wyłącznie SVG, bez manipulacji DOM.
+ *
+ * @example
+ * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
+ */
+export function KptChart({ config, width = 600, height = 360, className, style, ...rest }) {
+    const [hidden, setHidden] = useState(new Set());
+    const [highlighted, setHighlighted] = useState(null);
+    const [tooltip, setTooltip] = useState(null);
+    /** Indeks kategorii pod kursorem — prowadnica crosshair w wykresie liniowym. */
+    const [activeIndex, setActiveIndex] = useState(null);
+    const anim = {
+        enabled: config.animation?.enabled ?? true,
+        duration: config.animation?.duration ?? 400,
+        delay: config.animation?.delay ?? 0,
+        stagger: config.animation?.stagger ?? 60,
+    };
+    const legendOpts = {
+        display: config.legend?.display ?? true,
+        position: config.legend?.position ?? 'bottom',
+        align: config.legend?.align ?? 'center',
+        pointStyle: config.legend?.pointStyle ?? 'circle',
+        title: config.legend?.title,
+    };
+    const isPieLike = config.type === 'pie' || config.type === 'doughnut' || config.type === 'polarArea';
+    const legendItems = isPieLike
+        ? config.labels.map((label, i) => ({
+            key: `cat:${i}`,
+            name: label,
+            color: seriesColor(config.series[0]?.color, i),
+            hidden: hidden.has(`cat:${i}`),
+        }))
+        : config.series.map((s, i) => ({
+            key: `ser:${s.name}`,
+            name: s.name,
+            color: seriesColor(s.color, i),
+            hidden: hidden.has(`ser:${s.name}`),
+        }));
+    const dim = (key) => highlighted !== null && highlighted !== key;
+    const showTip = (tipX, tipY, name, label, value, color) => {
+        if (config.tooltip?.enabled === false)
+            return;
+        const format = config.tooltip?.format;
+        const text = format ? format({ series: name, label, value }) : formatNumber(value);
+        setTooltip({ x: (tipX / width) * 100, y: (tipY / height) * 100, label, rows: [{ name, value: text, color }] });
+    };
+    const hideTip = () => setTooltip(null);
+    const toggle = (key) => {
+        const next = new Set(hidden);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        setHidden(next);
+    };
+    // ── Wykres liniowy ──
+    const lineVm = (() => {
+        if (config.type !== 'line')
+            return null;
+        const active = config.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
+        const values = active.flatMap(({ s }) => s.data);
+        const [mn, mx] = extent(values.length ? values : [0]);
+        const scale = niceScale(Math.min(0, mn), Math.max(0, mx), 5);
+        const plot = plotArea(width, height, VERTICAL_INSETS);
+        const yScale = linearScale(scale.min, scale.max, plot.y + plot.height, plot.y);
+        const count = config.labels.length;
+        const xAt = (i) => count > 1 ? plot.x + (i / (count - 1)) * plot.width : plot.x + plot.width / 2;
+        const baseline = yScale(0);
+        const interpolation = config.interpolation ?? 'linear';
+        const showPoints = config.points ?? true;
+        const grid = scale.ticks.map((t) => ({
+            x1: plot.x,
+            y1: yScale(t),
+            x2: plot.x + plot.width,
+            y2: yScale(t),
+        }));
+        const valueLabels = scale.ticks.map((t) => ({
+            x: plot.x - 8,
+            y: yScale(t) + 3,
+            text: formatNumber(t),
+            anchor: 'end',
+        }));
+        const catLabels = config.labels.map((label, i) => ({
+            x: xAt(i),
+            y: plot.y + plot.height + 18,
+            text: label,
+            anchor: 'middle',
+        }));
+        const crosshairCat = config.crosshair && activeIndex !== null ? catLabels[activeIndex] : undefined;
+        const pillWidth = crosshairCat ? Math.max(28, crosshairCat.text.length * 7 + 16) : 0;
+        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), crosshairCat ? (_jsx("line", { className: "kpt-chart__crosshair", x1: crosshairCat.x, y1: plot.y, x2: crosshairCat.x, y2: plot.y + plot.height })) : null, _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), crosshairCat ? (_jsxs("g", { className: "kpt-chart__cat-active", children: [_jsx("rect", { x: crosshairCat.x - pillWidth / 2, y: crosshairCat.y - 13, width: pillWidth, height: 18, rx: 9 }), _jsx("text", { x: crosshairCat.x, y: crosshairCat.y, textAnchor: "middle", children: crosshairCat.text })] })) : null, active.map(({ s, i }) => {
+                    const key = `ser:${s.name}`;
+                    const color = seriesColor(s.color, i);
+                    const points = s.data.map((v, idx) => ({
+                        x: xAt(idx),
+                        y: yScale(v),
+                        value: v,
+                        label: config.labels[idx] ?? '',
+                    }));
+                    return (_jsxs("g", { className: cn('kpt-chart__series', dim(key) && 'kpt-chart__series--dim'), children: [config.area ? (_jsx("path", { className: "kpt-chart__area", d: areaPath(points, baseline, interpolation), style: { fill: color } })) : null, _jsx("path", { className: "kpt-chart__line", d: linePath(points, interpolation), style: { stroke: color }, pathLength: 1 }), points.map((p, idx) => (_jsxs("g", { children: [showPoints ? (_jsx("circle", { className: cn('kpt-chart__point', activeIndex === idx && 'kpt-chart__point--active'), cx: p.x, cy: p.y, r: 4, style: { fill: color, ['--kpt-chart-i']: idx } })) : null, _jsx("circle", { className: "kpt-chart__hit", cx: p.x, cy: p.y, r: 12, onPointerEnter: () => {
+                                            setActiveIndex(idx);
+                                            showTip(p.x, p.y, s.name, p.label, p.value, color);
+                                        }, onPointerLeave: () => {
+                                            setActiveIndex(null);
+                                            hideTip();
+                                        } })] }, idx)))] }, key));
+                })] }));
+    })();
+    // ── Wykres słupkowy ──
+    const barVm = (() => {
+        if (config.type !== 'bar')
+            return null;
+        const orientation = config.orientation ?? 'vertical';
+        const active = config.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
+        const plot = plotArea(width, height, orientation === 'vertical' ? VERTICAL_INSETS : HORIZONTAL_INSETS);
+        const layout = barLayout(active.map(({ s }) => s.data), config.labels.length, plot, orientation, config.borderRadius ?? 4);
+        const colors = active.map(({ s, i }) => seriesColor(s.color, i));
+        const names = active.map(({ s }) => s.name);
+        const cat = orientation === 'vertical'
+            ? bandScale(config.labels.length, plot.x, plot.x + plot.width, 0.2)
+            : bandScale(config.labels.length, plot.y, plot.y + plot.height, 0.2);
+        const grid = orientation === 'vertical'
+            ? layout.ticks.map((t) => ({ x1: plot.x, y1: t.pos, x2: plot.x + plot.width, y2: t.pos }))
+            : layout.ticks.map((t) => ({ x1: t.pos, y1: plot.y, x2: t.pos, y2: plot.y + plot.height }));
+        const valueLabels = orientation === 'vertical'
+            ? layout.ticks.map((t) => ({ x: plot.x - 8, y: t.pos + 3, text: formatNumber(t.value), anchor: 'end' }))
+            : layout.ticks.map((t) => ({
+                x: t.pos,
+                y: plot.y + plot.height + 18,
+                text: formatNumber(t.value),
+                anchor: 'middle',
+            }));
+        const catLabels = orientation === 'vertical'
+            ? config.labels.map((l, i) => ({ x: cat.center(i), y: plot.y + plot.height + 18, text: l, anchor: 'middle' }))
+            : config.labels.map((l, i) => ({ x: plot.x - 8, y: cat.center(i) + 3, text: l, anchor: 'end' }));
+        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), _jsx("g", { className: "kpt-chart__bars", "data-orientation": orientation, children: layout.bars.map((b, order) => {
+                        const key = `ser:${names[b.seriesIndex]}`;
+                        const color = colors[b.seriesIndex];
+                        const tipX = orientation === 'vertical' ? b.rect.x + b.rect.width / 2 : b.rect.x + b.rect.width;
+                        const tipY = orientation === 'vertical' ? b.rect.y : b.rect.y + b.rect.height / 2;
+                        return (_jsx("path", { className: cn('kpt-chart__bar', dim(key) && 'kpt-chart__series--dim'), d: b.path, style: { fill: color, ['--kpt-chart-i']: order }, onPointerEnter: () => showTip(tipX, tipY, names[b.seriesIndex], config.labels[b.categoryIndex] ?? '', b.value, color), onPointerLeave: hideTip }, `${key}#${order}`));
+                    }) })] }));
+    })();
+    // ── Pie / doughnut / polar area ──
+    const pieVm = (() => {
+        if (!isPieLike)
+            return null;
+        const first = config.series[0];
+        if (!first)
+            return null;
+        const { cx, cy, radius } = radialArea(width, height, 8);
+        const entries = config.labels
+            .map((label, i) => ({ label, i, value: first.data[i] ?? 0, color: seriesColor(first.color, i) }))
+            .filter((entry) => !hidden.has(`cat:${entry.i}`));
+        const values = entries.map((entry) => entry.value);
+        const slices = config.type === 'polarArea'
+            ? polarSlices(values, cx, cy, radius, Math.max(1, ...values.map((v) => Math.max(0, v))))
+            : pieSlices(values, cx, cy, radius, config.type === 'doughnut' ? radius * (config.innerRadius ?? 0.6) : 0);
+        const tipRadius = config.type === 'polarArea'
+            ? radius * 0.62
+            : (radius + (config.type === 'doughnut' ? radius * (config.innerRadius ?? 0.6) : 0)) / 2;
+        return (_jsx("g", { className: "kpt-chart__slices", children: slices.map((slice, k) => {
+                const entry = entries[k];
+                const tip = polarToCartesian(cx, cy, tipRadius, slice.midAngle);
+                const key = `cat:${entry.i}`;
+                return (_jsx("path", { className: cn('kpt-chart__slice', dim(key) && 'kpt-chart__series--dim'), d: slice.path, style: { fill: entry.color, ['--kpt-chart-i']: k }, onPointerEnter: () => showTip(tip.x, tip.y, entry.label, '', entry.value, entry.color), onPointerLeave: hideTip }, key));
+            }) }));
+    })();
+    // ── Radar ──
+    const radarVm = (() => {
+        if (config.type !== 'radar')
+            return null;
+        const { cx, cy, radius } = radialArea(width, height, 30);
+        const grid = radarGrid(config.labels.length, cx, cy, radius, 4);
+        const active = config.series.map((s, i) => ({ s, i })).filter(({ s }) => !hidden.has(`ser:${s.name}`));
+        let max = 1;
+        for (const { s } of active)
+            for (const v of s.data)
+                max = Math.max(max, v);
+        return (_jsxs(_Fragment, { children: [_jsxs("g", { className: "kpt-chart__grid", children: [grid.rings.map((ring, i) => (_jsx("path", { className: "kpt-chart__ring", d: ring }, i))), grid.axes.map((axis, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: cx, y1: cy, x2: axis.end.x, y2: axis.end.y }, i)))] }), _jsx("g", { className: "kpt-chart__axis", children: grid.axes.map((axis, i) => {
+                        const p = polarToCartesian(cx, cy, radius + 14, axis.angle);
+                        const anchor = Math.abs(p.x - cx) < 1 ? 'middle' : p.x > cx ? 'start' : 'end';
+                        return (_jsx("text", { x: p.x, y: p.y + 3, textAnchor: anchor, children: config.labels[axis.labelIndex] ?? '' }, i));
+                    }) }), active.map(({ s, i }) => {
+                    const key = `ser:${s.name}`;
+                    const color = seriesColor(s.color, i);
+                    const points = radarPoints(s.data, cx, cy, radius, max);
+                    return (_jsxs("g", { className: cn('kpt-chart__series kpt-chart__radar', dim(key) && 'kpt-chart__series--dim'), children: [_jsx("path", { className: "kpt-chart__radar-area", d: polygonPath(points), style: { fill: color, stroke: color } }), points.map((p, idx) => (_jsx("circle", { className: "kpt-chart__point", cx: p.x, cy: p.y, r: 4, style: { fill: color, ['--kpt-chart-i']: idx }, onPointerEnter: () => showTip(p.x, p.y, s.name, config.labels[idx] ?? '', s.data[idx] ?? 0, color), onPointerLeave: hideTip }, idx)))] }, key));
+                })] }));
+    })();
+    return (_jsx("div", { className: cn('kpt-chart-host', !anim.enabled && 'kpt-chart--no-anim', className), style: {
+            ['--kpt-chart-duration']: `${anim.duration}ms`,
+            ['--kpt-chart-stagger']: `${anim.stagger}ms`,
+            ['--kpt-chart-delay']: `${anim.delay}ms`,
+            ...style,
+        }, ...rest, children: _jsxs("div", { className: "kpt-chart", "data-legend": legendOpts.display ? legendOpts.position : undefined, children: [config.title?.display && config.title.text ? (_jsx("div", { className: "kpt-chart__title", style: {
+                        textAlign: styleFor(config.title.align),
+                        color: config.title.color,
+                        fontFamily: config.title.font?.family,
+                        fontSize: config.title.font?.size,
+                        fontWeight: config.title.font?.weight,
+                        paddingTop: config.title.padding?.top,
+                        paddingBottom: config.title.padding?.bottom,
+                    }, children: config.title.text })) : null, config.subtitle?.display && config.subtitle.text ? (_jsx("div", { className: "kpt-chart__subtitle", style: {
+                        textAlign: styleFor(config.subtitle.align),
+                        color: config.subtitle.color,
+                        fontFamily: config.subtitle.font?.family,
+                        fontSize: config.subtitle.font?.size,
+                        fontWeight: config.subtitle.font?.weight,
+                        paddingTop: config.subtitle.padding?.top,
+                        paddingBottom: config.subtitle.padding?.bottom,
+                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", preserveAspectRatio: "xMidYMid meet", children: [lineVm, barVm, radarVm, pieVm] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
+}

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

@@ -0,0 +1,4 @@
+export { KptChart } from '../charts/chart.tsx';
+export type { KptChartProps } from '../charts/chart.tsx';
+export type { KptChartConfig, KptChartSeries, KptChartType, KptLineInterpolation, KptBarOrientation, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptAlign, KptPointStyle, KptTitleOptions, KptTooltipOptions, KptTooltipContext, KptAnimationOptions, KptFont, KptPadding, } from '@konce-pt/chart';
+export { KPT_CHART_PALETTE, seriesColor, linePath, areaPath, pieSlices, polarSlices, barLayout, radarGrid, radarPoints, niceScale, } from '@konce-pt/chart';

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

@@ -0,0 +1,7 @@
+/*
+ * @konce-pt/react/charts — wykresy SVG. Osobny subpath, bo geometria i style wykresów są
+ * ciężkie względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
+ */
+export { KptChart } from "../charts/chart.js";
+// Rdzeń obliczeniowy — przydatny do własnych rozszerzeń i renderowania po stronie serwera.
+export { KPT_CHART_PALETTE, seriesColor, linePath, areaPath, pieSlices, polarSlices, barLayout, radarGrid, radarPoints, niceScale, } from '@konce-pt/chart';

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+export interface KptCheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'> {
+    /** Etykieta obok pola. Bogatszą treść podaj jako `children`. */
+    label?: string;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
+    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`. */
+    touched?: boolean;
+    /** Wygodniejszy odpowiednik `onChange` — dostaje samo zaznaczenie. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Wywoływane na `blur`. */
+    onTouch?: () => void;
+    /** Propsy wrappera hosta (`.kpt-checkbox-host`). */
+    hostProps?: KptHostProps<'span'>;
+    children?: ReactNode;
+}
+/**
+ * Pole wyboru (checkbox). Cały układ niesie `<label>`, więc kliknięcie w etykietę przełącza pole
+ * bez `htmlFor` — natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
+ *
+ * Działa kontrolowane (`checked` + `onCheckedChange`) i niekontrolowane (`defaultChecked`).
+ *
+ * `className` trafia na blok `.kpt-checkbox`, a pozostałe propsy (`name`, `value`, `ref`,
+ * handlery) na natywny `<input>` — tam, gdzie oczekuje ich formularz.
+ *
+ * @example
+ * <KptCheckbox name="terms" label="Akceptuję regulamin" />
+ * <KptCheckbox checked={on} onCheckedChange={setOn} />
+ */
+export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, onChange, onBlur, children, 'aria-invalid': ariaInvalid, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;