@konce-pt/react 0.10.0 → 0.11.0

package/dist/internal/overlay.d.ts

@@ -5,8 +5,13 @@ export interface KptOverlayProps {
     anchor: HTMLElement | null;
     /** Kliknięcie w backdrop albo Escape. */
     onClose: () => void;
-    /** Panel dostaje szerokość wyzwalacza (tak działa lista selecta). */
+    /** Panel dostaje szerokość wyzwalacza — dokładnie tę (podpowiedzi autocomplete pod polem). */
     matchAnchorWidth?: boolean;
+    /**
+     * Panel jest co najmniej tak szeroki jak wyzwalacz, ale rośnie do treści (lista selecta:
+     * w wąskim polu opcja dłuższa od niego wchodziłaby pod znacznik zaznaczenia).
+     */
+    minAnchorWidth?: boolean;
     /** Odstęp od wyzwalacza w pikselach. */
     offset?: number;
     /**
@@ -28,4 +33,4 @@ export interface KptOverlayProps {
     preferAbove?: boolean;
     children: ReactNode;
 }
-export declare function KptOverlay({ open, anchor, onClose, matchAnchorWidth, offset, align, withBackdrop, preferAbove, children, }: Readonly<KptOverlayProps>): import("react").ReactPortal | null;
+export declare function KptOverlay({ open, anchor, onClose, matchAnchorWidth, minAnchorWidth, offset, align, withBackdrop, preferAbove, children, }: Readonly<KptOverlayProps>): import("react").ReactPortal | null;

package/dist/internal/overlay.js

@@ -4,7 +4,7 @@ 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, preferAbove = false, children, }) {
+export function KptOverlay({ open, anchor, onClose, matchAnchorWidth = false, minAnchorWidth = false, offset = 4, align = 'start', withBackdrop = true, preferAbove = false, children, }) {
     const container = useKptOverlayContainer();
     const panelRef = useRef(null);
     const [position, setPosition] = useState(null);
@@ -24,8 +24,9 @@ export function KptOverlay({ open, anchor, onClose, matchAnchorWidth = false, of
             top: flip ? rect.top - panelHeight - offset : rect.bottom + offset,
             left: align === 'end' ? rect.right - panelWidth : rect.left,
             ...(matchAnchorWidth ? { width: rect.width } : {}),
+            ...(minAnchorWidth ? { minWidth: rect.width } : {}),
         });
-    }, [anchor, matchAnchorWidth, offset, align, preferAbove]);
+    }, [anchor, matchAnchorWidth, minAnchorWidth, offset, align, preferAbove]);
     useLayoutEffect(() => {
         if (!open) {
             setPosition(null);
@@ -58,6 +59,7 @@ export function KptOverlay({ open, anchor, onClose, matchAnchorWidth = false, of
                     top: position?.top ?? 0,
                     left: position?.left ?? 0,
                     width: position?.width,
+                    minWidth: position?.minWidth,
                     zIndex: Z_INDEX,
                     // Panel bez pozycji jeszcze nie został zmierzony — chowamy go na pierwszej klatce,
                     // żeby nie mrugnął w lewym górnym rogu.

package/dist/internal/tween.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Płynne dojście liczby do celu — dla kontrolek, które pokazują wartość rysunkiem (łuk pokrętła)
+ * i licznikiem. Pure TS bez frameworka; bliźniak portu Angulara: `shared/tween.ts`.
+ *
+ * Bez animacji, gdy użytkownik prosi o ograniczenie ruchu (`prefers-reduced-motion`) albo gdy nie
+ * ma `requestAnimationFrame` (render po stronie serwera) — wtedy cel ustawia się od razu.
+ */
+/** Czy animować — reguła wspólna dla wszystkich kontrolek, żeby „mniej ruchu" działało wszędzie. */
+export declare function kptMotionAllowed(): boolean;
+/**
+ * Animuje od `from` do `to` przez `duration` ms, wołając `onFrame` z wartością pośrednią.
+ * Zwraca funkcję przerwania — kolejny skok przerywa poprzedni i rusza z miejsca, w którym ten był,
+ * więc szybkie stuknięcia strzałką nie cofają łuku do startu.
+ */
+export declare function kptTween(from: number, to: number, duration: number, onFrame: (value: number) => void): () => void;
+/** Liczba miejsc po przecinku kroku (`0.25` → 2) — licznik w trakcie animacji nie pokazuje szumu. */
+export declare function kptStepDecimals(step: number): number;

package/dist/internal/tween.js

@@ -0,0 +1,40 @@
+/**
+ * Płynne dojście liczby do celu — dla kontrolek, które pokazują wartość rysunkiem (łuk pokrętła)
+ * i licznikiem. Pure TS bez frameworka; bliźniak portu Angulara: `shared/tween.ts`.
+ *
+ * Bez animacji, gdy użytkownik prosi o ograniczenie ruchu (`prefers-reduced-motion`) albo gdy nie
+ * ma `requestAnimationFrame` (render po stronie serwera) — wtedy cel ustawia się od razu.
+ */
+/** Zwolnienie pod koniec (ease-out cubic): ruch rusza od razu i dojeżdża miękko. */
+const easeOut = (t) => 1 - (1 - t) ** 3;
+/** Czy animować — reguła wspólna dla wszystkich kontrolek, żeby „mniej ruchu" działało wszędzie. */
+export function kptMotionAllowed() {
+    if (typeof requestAnimationFrame === 'undefined')
+        return false;
+    return !(typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+/**
+ * Animuje od `from` do `to` przez `duration` ms, wołając `onFrame` z wartością pośrednią.
+ * Zwraca funkcję przerwania — kolejny skok przerywa poprzedni i rusza z miejsca, w którym ten był,
+ * więc szybkie stuknięcia strzałką nie cofają łuku do startu.
+ */
+export function kptTween(from, to, duration, onFrame) {
+    if (from === to || duration <= 0 || !kptMotionAllowed()) {
+        onFrame(to);
+        return () => { };
+    }
+    const start = performance.now();
+    let frame = requestAnimationFrame(function tick(now) {
+        const t = Math.min(1, (now - start) / duration);
+        onFrame(from + (to - from) * easeOut(t));
+        if (t < 1)
+            frame = requestAnimationFrame(tick);
+    });
+    return () => cancelAnimationFrame(frame);
+}
+/** Liczba miejsc po przecinku kroku (`0.25` → 2) — licznik w trakcie animacji nie pokazuje szumu. */
+export function kptStepDecimals(step) {
+    const text = String(step);
+    const dot = text.indexOf('.');
+    return dot === -1 ? 0 : text.length - dot - 1;
+}

package/dist/knob/knob.d.ts

@@ -25,6 +25,10 @@ export interface KptKnobProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
 /**
  * Pokrętło — wybór wartości po łuku, przeciąganiem albo strzałkami.
  *
+ * Skok wartości (strzałka, `Home`/`End`, klik w łuk, zmiana z zewnątrz) łuk i licznik pokonują
+ * płynnie; przy przeciąganiu idą za kursorem bez opóźnienia. `prefers-reduced-motion` wyłącza
+ * animację, a `aria-valuenow` zawsze niesie wartość docelową, nie pośrednią.
+ *
  * @example
  * <KptKnob value={level} onValueChange={setLevel} min={0} max={100} step={5} suffix="%" />
  */

package/dist/knob/knob.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
+import { kptStepDecimals, kptTween } from "../internal/tween.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
 const TAU = Math.PI * 2;
@@ -8,9 +9,15 @@ const TAU = Math.PI * 2;
 const GAP = Math.PI / 4;
 const START_ANGLE = Math.PI / 2 + GAP;
 const SWEEP = TAU - GAP * 2;
+/** Czas dojścia łuku i licznika po skoku wartości (klawisz, klik, zmiana z zewnątrz). */
+const TWEEN_MS = 220;
 /**
  * Pokrętło — wybór wartości po łuku, przeciąganiem albo strzałkami.
  *
+ * Skok wartości (strzałka, `Home`/`End`, klik w łuk, zmiana z zewnątrz) łuk i licznik pokonują
+ * płynnie; przy przeciąganiu idą za kursorem bez opóźnienia. `prefers-reduced-motion` wyłącza
+ * animację, a `aria-valuenow` zawsze niesie wartość docelową, nie pośrednią.
+ *
  * @example
  * <KptKnob value={level} onValueChange={setLevel} min={0} max={100} step={5} suffix="%" />
  */
@@ -20,7 +27,23 @@ export function KptKnob({ value, defaultValue = 0, onValueChange, min = 0, max =
     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;
+    /** Wartość na rysunku — w trakcie animacji pośrednia, poza nią równa `current`. */
+    const [shown, setShown] = useState(current);
+    const shownRef = useRef(current);
+    /** Przeciąganie trwa — wtedy rysunek idzie za kursorem bez animacji. */
+    const dragging = useRef(false);
+    useEffect(() => {
+        const paint = (v) => {
+            shownRef.current = v;
+            setShown(v);
+        };
+        if (dragging.current) {
+            paint(current);
+            return;
+        }
+        return kptTween(shownRef.current, current, TWEEN_MS, paint);
+    }, [current]);
+    const ratio = range <= 0 ? 0 : Math.min(1, Math.max(0, (shown - 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;
@@ -54,17 +77,28 @@ export function KptKnob({ value, defaultValue = 0, onValueChange, min = 0, max =
     const onPointerDown = (event) => {
         if (disabled)
             return;
+        // Bez tego przeciąganie zaznacza tekst: licznik w środku i — przez SVG — całe koło, jak po
+        // `Ctrl+A`. Zablokowanie domyślnej akcji zabiera też fokus, więc oddajemy go ręcznie.
+        event.preventDefault();
+        event.currentTarget.focus();
+        // Klik w łuk to skok — animowany. Dopiero ruch po nim jest przeciąganiem.
         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 move = (e) => {
+            dragging.current = true;
+            setFromPoint(e.clientX, e.clientY);
+        };
         const up = () => {
             window.removeEventListener('pointermove', move);
             window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', up);
+            dragging.current = false;
             onTouch?.();
         };
         window.addEventListener('pointermove', move);
         window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
     };
     const onKeyDown = (event) => {
         if (disabled)
@@ -84,5 +118,5 @@ export function KptKnob({ value, defaultValue = 0, onValueChange, min = 0, max =
         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", id: field.id, tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": suffix ? `${current}${suffix}` : undefined, "aria-disabled": disabled || undefined, "aria-invalid": showInvalid || undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, 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] }) }) }));
+    return (_jsx("div", { className: cn('kpt-knob-host', className), ...rest, children: _jsx("div", { className: cn('kpt-knob', showInvalid && 'kpt-knob--invalid'), role: "slider", id: field.id, tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": suffix ? `${current}${suffix}` : undefined, "aria-disabled": disabled || undefined, "aria-invalid": showInvalid || undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, 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: [shown.toFixed(kptStepDecimals(step)), suffix] })) : null] }) }) }));
 }

package/dist/knob/llms.txt

@@ -48,6 +48,13 @@ lands on the wrapper.
 The background arc `--kpt-color-border`, the value `--kpt-color-primary`, the text
 `--kpt-color-on-surface`.
 
+## Motion
+A jump in value — an arrow key, Home/End, a click on the arc, a change from outside — moves the arc
+and counts the number up or down over ~220 ms (ease-out). Dragging follows the pointer with no
+delay, so it never feels laggy. `prefers-reduced-motion: reduce` turns the animation off.
+`aria-valuenow` always carries the target value, never an in-between frame. Dragging does not
+select the number or the arc.
+
 ## Accessibility
 `role="slider"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow`; arrows step by `step`,
 Home and End jump to the bounds. `disabled` sets `aria-disabled` and drops the knob out of the

package/dist/select/select.js

@@ -180,7 +180,7 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
                 }, ...rest, children: [_jsx("div", { className: "kpt-select__value", children: multiple && selectedOptions.length ? (selectedOptions.map((option) => (_jsxs("span", { className: "kpt-select__chip", children: [option.label, _jsx("button", { type: "button", className: "kpt-select__chip-remove", tabIndex: -1, "aria-label": `${t('select.removeChip')}: ${option.label}`, onClick: (event) => {
                                         event.stopPropagation();
                                         setCurrent(selectedValues.filter((v) => v !== option.value));
-                                    }, children: _jsx(KptIcon, { name: "x" }) })] }, String(option.value))))) : !multiple && filled ? (_jsx("span", { className: "kpt-select__single", children: selectedOptions[0]?.label })) : (_jsx("span", { className: "kpt-select__placeholder", children: placeholder })) }), _jsx(KptIcon, { className: "kpt-select__chevron", name: "chevron-down" })] }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, matchAnchorWidth: true, children: _jsxs("div", { className: "kpt-select__panel", children: [filter ? (_jsxs("div", { className: "kpt-select__search", children: [_jsx(KptIcon, { name: "search" }), _jsx("input", { ref: searchRef, type: "text", className: "kpt-select__search-input", role: "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listId, "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined, "aria-label": t('select.search'), value: filterText, placeholder: t('select.search'), onKeyDown: (event) => onKeyDown(event, 'search'), onChange: (event) => {
+                                    }, children: _jsx(KptIcon, { name: "x" }) })] }, String(option.value))))) : !multiple && filled ? (_jsx("span", { className: "kpt-select__single", children: selectedOptions[0]?.label })) : (_jsx("span", { className: "kpt-select__placeholder", children: placeholder })) }), _jsx(KptIcon, { className: "kpt-select__chevron", name: "chevron-down" })] }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, minAnchorWidth: true, children: _jsxs("div", { className: "kpt-select__panel", children: [filter ? (_jsxs("div", { className: "kpt-select__search", children: [_jsx(KptIcon, { name: "search" }), _jsx("input", { ref: searchRef, type: "text", className: "kpt-select__search-input", role: "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listId, "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined, "aria-label": t('select.search'), value: filterText, placeholder: t('select.search'), onKeyDown: (event) => onKeyDown(event, 'search'), onChange: (event) => {
                                         setFilterText(event.target.value);
                                         // Po zawężeniu aktywna jest pierwsza pasująca opcja — `Enter` wybiera ją od razu.
                                         const narrowed = filterOptions(event.target.value).map((o) => !!o.disabled);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Open-source React 19 component library on the Koncept UI design system — the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,17 +65,17 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/chat": "0.10.0",
-    "@konce-pt/chart": "0.10.0",
-    "@konce-pt/backdrop": "0.10.0",
-    "@konce-pt/i18n": "0.10.0",
-    "@konce-pt/datetime": "0.10.0",
-    "@konce-pt/mention": "0.10.0",
-    "@konce-pt/tokens": "0.10.0",
-    "@konce-pt/table": "0.10.0",
-    "@konce-pt/roadmap": "0.10.0",
-    "@konce-pt/map": "0.10.0",
-    "@konce-pt/icons": "0.10.0"
+    "@konce-pt/chart": "0.11.0",
+    "@konce-pt/icons": "0.11.0",
+    "@konce-pt/chat": "0.11.0",
+    "@konce-pt/backdrop": "0.11.0",
+    "@konce-pt/table": "0.11.0",
+    "@konce-pt/datetime": "0.11.0",
+    "@konce-pt/roadmap": "0.11.0",
+    "@konce-pt/tokens": "0.11.0",
+    "@konce-pt/i18n": "0.11.0",
+    "@konce-pt/mention": "0.11.0",
+    "@konce-pt/map": "0.11.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",