@konce-pt/react 0.12.0 → 0.15.0

package/dist/update/update.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { byteUnitOf, formatBytes } from '@konce-pt/i18n';
+import { loaderColor, loaderOnColor, setText, swapText } from '@konce-pt/motion';
+import { KptButton } from "../button/button.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptLoader } from "../loader/loader.js";
+import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { useKptMotion } from "../motion/motion-context.js";
+const ACTION = {
+    pending: 'update',
+    downloading: 'cancel',
+    success: 'open',
+    error: 'retry',
+};
+/**
+ * Wiersz aktualizacji aplikacji: ikona w pierścieniu `KptLoader variant="ring"`, nazwa, linia
+ * stanu ("12,3 MB z 24 MB") i przycisk, którego napis idzie za stanem. Napisy przenikają się
+ * przy zmianie stanu. Komponent nic nie pobiera - stan, bajty i reakcję na `onAction` daje aplikacja.
+ *
+ * @example
+ * <KptUpdate name="Kompas" status={status} loaded={loaded} total={total} onAction={handle}>
+ *   <img src="/kompas.svg" alt="" />
+ * </KptUpdate>
+ */
+export function KptUpdate({ name, status = 'pending', loaded = null, total = null, size = '5.5rem', color = 'info', showAction = true, pendingText, downloadingText, successText, errorText, updateLabel, cancelLabel, openLabel, retryLabel, onAction, locale, dictionary, children, hostProps, className, style, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const motion = useKptMotion();
+    const lineRef = useRef(null);
+    const buttonRef = useRef(null);
+    const lastStatus = useRef(null);
+    const [ready, setReady] = useState(false);
+    const loaderStatus = status === 'success' || status === 'error' ? status : 'loading';
+    // Postęp tylko w trakcie pobierania i tylko ze znaną całością.
+    const progressValue = status === 'downloading' && total && total > 0 ? (loaded ?? 0) : null;
+    const statusText = {
+        pending: pendingText ?? t('update.pending'),
+        downloading: downloadingText ?? t('update.downloading'),
+        success: successText ?? t('update.success'),
+        error: errorText ?? t('update.error'),
+    }[status];
+    let lineText = statusText;
+    if (status === 'downloading' && loaded != null) {
+        if (!total)
+            lineText = formatBytes(loaded, activeLocale);
+        else {
+            const unit = byteUnitOf(total);
+            lineText = t('update.size', { loaded: formatBytes(loaded, activeLocale, unit, true), total: formatBytes(total, activeLocale, unit) });
+        }
+    }
+    const actionLabel = {
+        update: updateLabel ?? t('update.update'),
+        cancel: cancelLabel ?? t('update.cancel'),
+        open: openLabel ?? t('update.open'),
+        retry: retryLabel ?? t('update.retry'),
+    }[ACTION[status]];
+    // Napisy idą przez `swapText` (przenikanie): przy zmianie stanu albo języka nowy wjeżdża,
+    // a przy samym liczniku bajtów zmienia się na miejscu, bez mrugania.
+    const motionOn = motion?.enabled !== false;
+    useEffect(() => {
+        const line = lineRef.current;
+        if (!line)
+            return;
+        const animate = motionOn && lastStatus.current !== null;
+        if (status === lastStatus.current && status === 'downloading')
+            setText(line, lineText);
+        else
+            swapText(line, lineText, animate);
+        if (buttonRef.current)
+            swapText(buttonRef.current, actionLabel, animate);
+        lastStatus.current = status;
+    }, [status, lineText, actionLabel, motionOn, showAction]);
+    useEffect(() => {
+        // Region statusu dostaje tekst klatkę po pojawieniu się - pusty region nie jest ogłaszany.
+        const frame = requestAnimationFrame(() => setReady(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    return (_jsx("div", { className: cn('kpt-update-host', hostClassName), ...hostRest, children: _jsxs("div", { className: cn('kpt-update', className), "data-status": status, style: { '--_tile': loaderColor(color), '--_tile-on': loaderOnColor(color), ...style }, ...rest, children: [_jsx(KptLoader, { hostProps: { className: 'kpt-update__ring' }, variant: "ring", status: loaderStatus, value: progressValue, max: total ?? 100, size: size, colors: [color], label: statusText, announce: false, children: _jsx("span", { className: "kpt-update__icon", children: children ?? _jsx(KptIcon, { name: "download" }) }) }), _jsxs("div", { className: "kpt-update__meta", children: [_jsx("span", { className: "kpt-update__name", children: name }), _jsx("span", { ref: lineRef, className: "kpt-update__line kpt-update__swap", "aria-hidden": "true" }), showAction ? (_jsx(KptButton, { hostProps: { className: 'kpt-update__action' }, variant: "tonal", size: "sm", onClick: () => onAction?.(ACTION[status]), children: _jsx("span", { ref: buttonRef, className: "kpt-update__swap" }) })) : null] }), _jsx("span", { className: "kpt-update__live", role: "status", children: ready ? `${name}: ${statusText}` : '' })] }) }));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.12.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.",
+  "version": "0.15.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",
   "homepage": "https://ui.konce.pt/react",
@@ -65,17 +65,19 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/datetime": "0.12.0",
-    "@konce-pt/icons": "0.12.0",
-    "@konce-pt/chart": "0.12.0",
-    "@konce-pt/backdrop": "0.12.0",
-    "@konce-pt/map": "0.12.0",
-    "@konce-pt/tokens": "0.12.0",
-    "@konce-pt/i18n": "0.12.0",
-    "@konce-pt/table": "0.12.0",
-    "@konce-pt/mention": "0.12.0",
-    "@konce-pt/chat": "0.12.0",
-    "@konce-pt/roadmap": "0.12.0"
+    "@konce-pt/backdrop": "0.15.0",
+    "@konce-pt/motion": "0.15.0",
+    "@konce-pt/chart": "0.15.0",
+    "@konce-pt/icons": "0.15.0",
+    "@konce-pt/mention": "0.15.0",
+    "@konce-pt/datetime": "0.15.0",
+    "@konce-pt/roadmap": "0.15.0",
+    "@konce-pt/i18n": "0.15.0",
+    "@konce-pt/table": "0.15.0",
+    "@konce-pt/tokens": "0.15.0",
+    "@konce-pt/chat": "0.15.0",
+    "@konce-pt/map": "0.15.0",
+    "@konce-pt/speech": "0.15.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",