@konce-pt/react 0.11.2 → 0.14.0

package/dist/update/update.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptLoaderColor } from '@konce-pt/motion';
+import type { KptHostProps } from '../internal/types.ts';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/** `pending` - czeka na decyzję albo w kolejce; `downloading` - pobiera; potem wynik. */
+export type KptUpdateStatus = 'pending' | 'downloading' | 'success' | 'error';
+/** Co kliknął użytkownik - zależy od stanu: aktualizuj, anuluj, otwórz, ponów. */
+export type KptUpdateAction = 'update' | 'cancel' | 'open' | 'retry';
+export interface KptUpdateProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    /** Nazwa aplikacji albo pakietu. */
+    name: string;
+    status?: KptUpdateStatus;
+    /** Pobrane bajty; z `total` daje postęp i linię "x z y". */
+    loaded?: number | null;
+    /** Rozmiar całości w bajtach; bez niego pobieranie jest nieokreślone. */
+    total?: number | null;
+    /** Rozmiar pierścienia (100 jednostek rysunku `KptLoader`). Domyślnie `5.5rem`. */
+    size?: string;
+    /** Barwa pierścienia i kafla ikony - rola motywu albo kolor CSS. Domyślnie `info`. */
+    color?: KptLoaderColor;
+    /** `false` chowa przycisk akcji. */
+    showAction?: boolean;
+    /** Nadpisania napisów; pominięte = słownik `update.*`. */
+    pendingText?: string;
+    downloadingText?: string;
+    successText?: string;
+    errorText?: string;
+    updateLabel?: string;
+    cancelLabel?: string;
+    openLabel?: string;
+    retryLabel?: string;
+    /** Klik w przycisk: `update`, `cancel`, `open` albo `retry` - wg stanu w chwili kliknięcia. */
+    onAction?: (action: KptUpdateAction) => void;
+    /** Ikona aplikacji; pominięta = `download`. */
+    children?: ReactNode;
+    /** Propsy wrappera `kpt-update-host` (odpowiednik hosta Angulara). */
+    hostProps?: KptHostProps<'div'>;
+}
+/**
+ * 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 declare function KptUpdate({ name, status, loaded, total, size, color, showAction, pendingText, downloadingText, successText, errorText, updateLabel, cancelLabel, openLabel, retryLabel, onAction, locale, dictionary, children, hostProps, className, style, ...rest }: Readonly<KptUpdateProps>): import("react").JSX.Element;

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.11.2",
-  "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.14.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",
@@ -60,22 +60,24 @@
     }
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/chat": "0.11.2",
-    "@konce-pt/backdrop": "0.11.2",
-    "@konce-pt/chart": "0.11.2",
-    "@konce-pt/i18n": "0.11.2",
-    "@konce-pt/mention": "0.11.2",
-    "@konce-pt/table": "0.11.2",
-    "@konce-pt/roadmap": "0.11.2",
-    "@konce-pt/tokens": "0.11.2",
-    "@konce-pt/map": "0.11.2",
-    "@konce-pt/datetime": "0.11.2",
-    "@konce-pt/icons": "0.11.2"
+    "@konce-pt/chart": "0.14.0",
+    "@konce-pt/chat": "0.14.0",
+    "@konce-pt/mention": "0.14.0",
+    "@konce-pt/i18n": "0.14.0",
+    "@konce-pt/backdrop": "0.14.0",
+    "@konce-pt/motion": "0.14.0",
+    "@konce-pt/icons": "0.14.0",
+    "@konce-pt/datetime": "0.14.0",
+    "@konce-pt/table": "0.14.0",
+    "@konce-pt/speech": "0.14.0",
+    "@konce-pt/tokens": "0.14.0",
+    "@konce-pt/roadmap": "0.14.0",
+    "@konce-pt/map": "0.14.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -93,6 +95,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node scripts/copy-llms.mjs",
+    "lint": "eslint .",
     "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
   }
 }