@konce-pt/react 0.8.5 → 0.9.0

package/dist/button/button.d.ts

@@ -1,8 +1,8 @@
 import { type ComponentPropsWithRef } from 'react';
 import type { AsChildProps, KptHostProps } from '../internal/types.ts';
-export type KptButtonVariant = 'filled' | 'tonal' | 'outline' | 'text' | 'danger';
-export type KptButtonSize = 'sm' | 'md' | 'lg';
-export interface KptButtonProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+export type KptButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outline' | 'text' | 'link' | 'danger' | 'success' | 'warning' | 'info';
+export type KptButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface KptButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'href'>, AsChildProps {
     /** Wariant wizualny. */
     variant?: KptButtonVariant;
     /** Rozmiar. */
@@ -11,17 +11,33 @@ export interface KptButtonProps extends ComponentPropsWithRef<'button'>, AsChild
     loading?: boolean;
     /** Pełna szerokość kontenera. */
     fullWidth?: boolean;
+    /** Nazwa ikony wiodącej z rejestru (`KptIconRegistry`). */
+    icon?: string;
+    /** Nazwa ikony zamykającej — zwykle znacznik kierunku, nie akcja. */
+    iconEnd?: string;
+    /** Klasa dokładana do ikony wiodącej; obok stałego haka `.kpt-button__icon`. */
+    iconClassName?: string;
+    iconEndClassName?: string;
+    /** Podany adres zamienia `<button>` na `<a>`. Ignorowany przy `asChild`. */
+    href?: string;
+    target?: string;
+    rel?: string;
     /** Propsy wrappera hosta (`.kpt-button-host`). `className` i `ref` idą na `<button>`. */
     hostProps?: KptHostProps<'span'>;
 }
 /**
  * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
- * w hoście `.kpt-button-host` — dwa poziomy DOM, dokładnie jak w porcie Angulara,
- * bo host niesie własne style (`display: inline-flex`, wariant pełnej szerokości).
+ * albo `<a>`, gdy podasz `href` — w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
+ * dokładnie jak w porcie Angulara, bo host niesie własne style.
+ *
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` — oba sposoby
+ * dostają ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
  * <KptButton onClick={save}>Zapisz</KptButton>
- * <KptButton variant="outline" size="sm">Anuluj</KptButton>
+ * <KptButton icon="device-floppy" onClick={save}>Zapisz</KptButton>
+ * <KptButton iconEnd="chevron-right" variant="outline">Dalej</KptButton>
+ * <KptButton variant="link" href="/docs">Dokumentacja</KptButton>
  * <KptButton asChild><a href="/docs">Dokumentacja</a></KptButton>
  */
-export declare function KptButton({ variant, size, type, loading, fullWidth, disabled, asChild, hostProps, className, children, ...rest }: Readonly<KptButtonProps>): import("react").JSX.Element;
+export declare function KptButton({ variant, size, type, loading, fullWidth, disabled, asChild, icon, iconEnd, iconClassName, iconEndClassName, href, target, rel, hostProps, className, children, ...rest }: Readonly<KptButtonProps>): import("react").JSX.Element;

package/dist/button/button.js

@@ -2,22 +2,28 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { isValidElement } from 'react';
 import { cn } from "../internal/cn.js";
 import { renderAsChild } from "../internal/slot.js";
+import { KptIcon } from "../icon/icon.js";
 /**
  * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
- * w hoście `.kpt-button-host` — dwa poziomy DOM, dokładnie jak w porcie Angulara,
- * bo host niesie własne style (`display: inline-flex`, wariant pełnej szerokości).
+ * albo `<a>`, gdy podasz `href` — w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
+ * dokładnie jak w porcie Angulara, bo host niesie własne style.
+ *
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` — oba sposoby
+ * dostają ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
  * <KptButton onClick={save}>Zapisz</KptButton>
- * <KptButton variant="outline" size="sm">Anuluj</KptButton>
+ * <KptButton icon="device-floppy" onClick={save}>Zapisz</KptButton>
+ * <KptButton iconEnd="chevron-right" variant="outline">Dalej</KptButton>
+ * <KptButton variant="link" href="/docs">Dokumentacja</KptButton>
  * <KptButton asChild><a href="/docs">Dokumentacja</a></KptButton>
  */
-export function KptButton({ variant = 'filled', size = 'md', type = 'button', loading = false, fullWidth = false, disabled = false, asChild = false, hostProps, className, children, ...rest }) {
+export function KptButton({ variant = 'filled', size = 'md', type = 'button', loading = false, fullWidth = false, disabled = false, asChild = false, icon, iconEnd, iconClassName, iconEndClassName, href, target, rel, hostProps, className, children, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const isDisabled = disabled || loading;
-    // Zawartość jest identyczna w obu trybach — w `asChild` podmieniamy tylko element
+    // Zawartość jest identyczna we wszystkich trybach — w `asChild` podmieniamy tylko element
     // zewnętrzny, nie strukturę środka, żeby SCSS (`__spinner`, `__content`) dalej działał.
-    const content = (_jsxs(_Fragment, { children: [loading ? _jsx("span", { className: "kpt-button__spinner", "aria-hidden": "true" }) : null, _jsx("span", { className: "kpt-button__content", children: asChildContent(asChild, children) })] }));
+    const content = (_jsxs(_Fragment, { children: [loading ? (_jsx("span", { className: "kpt-button__spinner", "aria-hidden": "true" })) : icon ? (_jsx(KptIcon, { className: cn('kpt-button__icon', iconClassName), name: icon })) : null, _jsx("span", { className: "kpt-button__content", children: asChildContent(asChild, children) }), iconEnd ? (_jsx(KptIcon, { className: cn('kpt-button__icon', 'kpt-button__icon--end', iconEndClassName), name: iconEnd })) : null] }));
     const buttonProps = {
         className: cn('kpt-button', loading && 'kpt-button--loading', className),
         'data-variant': variant,
@@ -27,13 +33,31 @@ export function KptButton({ variant = 'filled', size = 'md', type = 'button', lo
         'aria-busy': loading || undefined,
         ...rest,
     };
-    return (_jsx("span", { className: cn('kpt-button-host', fullWidth && 'kpt-button-host--full', hostClassName), ...hostRest, children: asChild && isValidElement(children) ? (renderAsChild(children, { ...buttonProps, ...disabledProps(children, isDisabled) }, content)) : (_jsx("button", { type: type, disabled: isDisabled, ...buttonProps, children: content })) }));
+    return (_jsx("span", { className: cn('kpt-button-host', fullWidth && 'kpt-button-host--full', hostClassName), ...hostRest, children: renderInner({ asChild, children, buttonProps, content, href, target, rel, type, isDisabled }) }));
+}
+/**
+ * Element wewnętrzny. `asChild` ma pierwszeństwo przed `href` — kto podstawia własny
+ * element, ten decyduje o znaczniku.
+ */
+function renderInner(args) {
+    const { asChild, children, buttonProps, content, href, target, rel, type, isDisabled } = args;
+    if (asChild && isValidElement(children)) {
+        return renderAsChild(children, { ...buttonProps, ...disabledProps(children, isDisabled) }, content);
+    }
+    if (href !== undefined) {
+        return (_jsx("a", { 
+            // Wyłączony odnośnik traci `href`, a nie tylko dostaje atrybut — inaczej dałoby się go
+            // kliknąć i wejść na niego z klawiatury.
+            href: isDisabled ? undefined : href, target: target, 
+            // `target="_blank"` bez `rel` to wektor na `window.opener` — dokładamy domyślne.
+            rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, ...buttonProps, children: content }));
+    }
+    return (_jsx("button", { type: type, disabled: isDisabled, ...buttonProps, children: content }));
 }
 /**
  * Stan wyłączenia dla podstawionego elementu. Natywny `<button>` dostaje `disabled`
  * (SCSS stylizuje `:disabled`); każdy inny element — `aria-disabled`, bo `disabled`
- * nie ma tam znaczenia. Element bez `:disabled` nie dostanie wyglądu wyłączonego,
- * więc `asChild` + `disabled` to świadomie ograniczone połączenie.
+ * nie ma tam znaczenia.
  */
 function disabledProps(child, isDisabled) {
     if (!isDisabled)

package/dist/button/llms.txt

@@ -1,35 +1,68 @@
 # KptButton (@konce-pt/react)
 
-The Koncept UI button. It renders a native `<button>` (semantics + form submit) inside a
-`.kpt-button-host` wrapper — two DOM levels, exactly like the Angular port, because the host
-carries its own styles. Import: `import { KptButton } from '@konce-pt/react';`
+The Koncept UI button. It renders a native `<button>` (semantics + form submit) — or an `<a>` when
+you pass `href` — inside a `.kpt-button-host` wrapper: two DOM levels, exactly like the Angular port,
+because the host carries its own styles. Import: `import { KptButton } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-button-host">
       <button class="kpt-button" type="button" data-variant="filled" data-size="md">
+        <span class="kpt-button__icon kpt-icon-host">…</span>
         <span class="kpt-button__content">…</span>
+        <span class="kpt-button__icon kpt-button__icon--end kpt-icon-host">…</span>
       </button>
     </span>
 
 ## Props
-- `variant`: 'filled' | 'tonal' | 'outline' | 'text' | 'danger' (default 'filled')
-- `size`: 'sm' | 'md' | 'lg' (default 'md')
+- `variant`: 'filled' | 'elevated' | 'tonal' | 'outline' | 'text' | 'link' | 'danger' | 'success' | 'warning' | 'info' (default 'filled')
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (default 'md')
 - `type`: 'button' | 'submit' | 'reset' (default 'button')
 - `disabled`: boolean
 - `loading`: boolean — a spinner + blocked interaction, sets `aria-busy`
 - `fullWidth`: boolean — the full width of the container
+- `icon` / `iconEnd`: string — a name from the icon registry
+- `iconClassName` / `iconEndClassName`: string — an extra class on that icon
+- `href`, `target`, `rel`: string — render an `<a>` instead of a `<button>`
 - `asChild`: boolean — render the single child instead of `<button>`, keeping every class
 - `hostProps`: props for the `.kpt-button-host` wrapper
-- `className`, `ref` and every other `<button>` prop go to the INNER `<button>`
+- `className`, `ref` and every other `<button>` prop go to the INNER element
 
 ## Events
 No events of its own — bind `onClick` and it lands on the native `<button>`.
 
+## Icons
+Two ways in, one result. `icon` and `iconEnd` take a name from the icon registry and the component
+renders it; anything put in `children` is laid out the same way. Both get the gap from
+`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) — the
+content box is a flex container, so an icon sits on the centre line rather than on the text baseline.
+
+`loading` replaces the leading icon with the spinner instead of standing next to it, and the
+spinner takes that icon's size, so the label does not jump when loading starts. The trailing icon
+stays put — it usually marks direction rather than the action.
+
+`iconClassName` / `iconEndClassName` add a class next to the permanent `.kpt-button__icon` hook, for
+the cases where one instance needs a different colour or a rotation.
+
+## Link and the `link` variant
+Two different things. `variant="link"` only changes the looks — underline, transparent background,
+no side padding, so it sits inside a sentence. `href` changes the element: the component renders
+`<a class="kpt-button">` instead of `<button>`, and the two combine freely (a filled button can be
+a link, a `link` variant can be a plain button). `asChild` wins over `href`: whoever substitutes
+their own element decides the tag.
+
+A disabled link loses its `href` rather than just gaining an attribute — otherwise it would stay
+clickable and reachable with the keyboard; it also gets `aria-disabled="true"` and `tabindex="-1"`.
+`target="_blank"` without an explicit `rel` gets `rel="noopener noreferrer"`.
+
 ## Examples
     <KptButton onClick={save}>Save</KptButton>
-    <KptButton variant="outline" size="sm">Cancel</KptButton>
+    <KptButton icon="device-floppy" onClick={save}>Save</KptButton>
+    <KptButton iconEnd="chevron-right" variant="outline">Next</KptButton>
+    <KptButton icon="printer" variant="text" size="sm">Print</KptButton>
+    <KptButton variant="success">Approve</KptButton>
+    <KptButton variant="link" href="/docs">Documentation</KptButton>
     <KptButton variant="danger" loading={deleting}>Delete</KptButton>
-    <form action={submitAction}><KptButton type="submit">Send</KptButton></form>
+    <KptButton variant="outline"><KptIcon name="printer" />Print</KptButton>
     <KptButton asChild><a href="/docs">Documentation</a></KptButton>
 
 ## asChild
@@ -39,10 +72,12 @@ element gets `disabled` when it is a native `<button>`, and `aria-disabled` othe
 element with no `:disabled` state therefore does not get the dimmed look.
 
 ## Tokens (styling)
-`--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`,
-`--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-tonal-{bg,fg,bg-hover}`,
-`--kpt-button-outline-{border,fg,bg-hover}`, `--kpt-button-text-{fg,bg-hover}`.
-The 'danger' variant uses `--kpt-color-danger` / `--kpt-color-on-danger`.
+`--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`, and one group per variant:
+`--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-elevated-{bg,fg,bg-hover}`,
+`--kpt-button-tonal-{bg,fg,bg-hover}`, `--kpt-button-outline-{border,fg,bg-hover}`,
+`--kpt-button-text-{fg,bg-hover}`, `--kpt-button-link-{fg,fg-hover}`,
+`--kpt-button-danger-{bg,fg,bg-hover}` and the same triplet for success, warning and info.
+The elevated variant also reaches for `--kpt-shadow-sm` and `--kpt-shadow-md`.
 
 ## The state layer (hover / active)
 Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 → 1), not by
@@ -53,4 +88,5 @@ along with the stylesheet.
 ## Accessibility
 - A native `<button>` — full keyboard and screen reader support.
 - `loading` sets `aria-busy="true"` and disables the button.
+- An `<a>` matches no `:disabled`, so the disabled look keys off `[aria-disabled='true']` as well.
 - The focus ring comes from `@konce-pt/styles` (`--kpt-color-focus-ring`).

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

@@ -10,6 +10,8 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     disabled?: boolean;
     /** Wywoływane po wyborze — moment, w którym kontrolka staje się dotknięta. */
     onTouch?: () => void;
+    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i `title`. */
+    iconOnly?: boolean;
     /** Propsy wrappera hosta (`.kpt-button-group-host`). */
     hostProps?: KptHostProps<'span'>;
 }
@@ -17,9 +19,13 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
  *
  * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
  *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
+ * <KptButtonGroup value={view} onValueChange={setView} iconOnly
+ *   options={[{ icon: 'list', label: 'Lista', value: 'list' }]} />
  */
-export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, onTouch, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;
+export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, onTouch, iconOnly, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;

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

@@ -1,16 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 { KptIcon } from "../icon/icon.js";
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
  *
  * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
  *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
+ * <KptButtonGroup value={view} onValueChange={setView} iconOnly
+ *   options={[{ icon: 'list', label: 'Lista', value: 'list' }]} />
  */
-export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, onTouch, hostProps, className, ...rest }) {
+export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, onTouch, iconOnly = false, hostProps, className, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const [current, setCurrent] = useControllableState({
         value,
@@ -23,8 +28,8 @@ export function KptButtonGroup({ options = [], value, defaultValue, onValueChang
         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) => {
+    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, "data-icon-only": iconOnly ? '' : undefined, ...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)));
+                return (_jsxs("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, "aria-label": iconOnly ? option.label : undefined, title: iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }, String(option.value)));
             }) }) }));
 }

package/dist/button-group/llms.txt

@@ -6,20 +6,39 @@ Import: `import { KptButtonGroup } from '@konce-pt/react';`
 ## DOM
     <span class="kpt-button-group-host">
       <div class="kpt-button-group" role="group" data-size="md">
-        <button type="button" class="kpt-button-group__item is-active" aria-pressed="true">List</button>
-        <button type="button" class="kpt-button-group__item" aria-pressed="false">Grid</button>
+        <button type="button" class="kpt-button-group__item is-active" aria-pressed="true">
+          <span class="kpt-button-group__icon kpt-icon-host">…</span>
+          <span class="kpt-button-group__label">List</span>
+        </button>
+        <button type="button" class="kpt-button-group__item" aria-pressed="false">
+          <span class="kpt-button-group__label">Grid</span>
+        </button>
       </div>
     </span>
 
 ## Props
-- `options`: `KptOption<T>[]` — `{ label, value, disabled? }`
+- `options`: `KptOption<T>[]` — `{ label, value, disabled?, icon? }`
 - `value` / `defaultValue` / `onValueChange` — controlled or uncontrolled
 - `size`: 'sm' | 'md' | 'lg' (default 'md')
 - `disabled`: boolean — disables the whole group; a single option disables itself
+- `iconOnly`: boolean — hides the labels and leaves the icons alone
 - `onTouch()` — fires on a pick, the moment the control becomes touched
 - `hostProps` — props for the `.kpt-button-group-host` wrapper
 - `className`, `ref` and every other `<div>` prop go to `.kpt-button-group`
 
+## Icons
+An option carries its icon by name: `KptOption.icon` is a key from the icon registry, and the group
+renders it before the label. The item is a flex box, so the icon gets the `--kpt-button-gap` spacing
+and a size that follows `size` (1rem at `sm` up to 1.25rem at `lg`) — the same scale as `KptButton`,
+so a group standing next to a button matches it.
+
+`iconOnly` drops the label from the page but keeps it as the accessible name: the item gets both
+`aria-label` and `title`, so a screen reader still says "Grid" and a mouse user gets a tooltip.
+Each item also becomes a square, because a lone icon inside a 1rem side padding looks adrift.
+
+The icon takes its colour from `currentColor`, so the active item — filled with
+`--kpt-color-primary` — flips the icon to `--kpt-color-on-primary` with no extra rule.
+
 ## Values of any type
 The value is generic, so options can carry objects, not just strings. Keys come from
 `String(option.value)`, so distinct options need distinct string forms — for object values give
@@ -29,12 +48,18 @@ each one a stable id and map back to the object yourself.
     <KptButtonGroup value={view} onValueChange={setView}
       options={[{ label: 'List', value: 'list' }, { label: 'Grid', value: 'grid' }]} />
 
+    <KptButtonGroup value={view} onValueChange={setView}
+      options={[{ icon: 'list', label: 'List', value: 'list' }]} />
+
+    <KptButtonGroup value={align} onValueChange={setAlign} iconOnly options={alignOptions} />
+
     <KptButtonGroup size="sm" defaultValue="M" options={sizeOptions} />
 
 ## Tokens
 `--kpt-color-surface`, `--kpt-color-muted`, `--kpt-color-primary` (the active segment),
-`--kpt-color-border-strong`, `--kpt-radius-md`.
+`--kpt-color-border-strong`, `--kpt-radius-md`, `--kpt-button-gap`.
 
 ## Accessibility
 A `role="group"` of native buttons, each with `aria-pressed` — a screen reader announces which
-segment is on, and the keyboard walks them like any other buttons.
+segment is on, and the keyboard walks them like any other buttons. With `iconOnly` the name comes
+from `aria-label`, so the announcement does not degrade to a bare "button".

package/dist/dialog/dialog.d.ts

@@ -1,9 +1,17 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/** Szerokość okna. `md` to wartość domyślna i zarazem jedyna, jaką okno miało wcześniej. */
+export type KptDialogSize = 'sm' | 'md' | 'lg';
 export interface KptDialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open' | 'onClose'>, KptI18nOverrides {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     header?: string;
+    /**
+     * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem — zawsze przycięta do szerokości
+     * okna przeglądarki. `lg` jest dla treści, której nie da się sensownie zwęzić: kodu, tabeli,
+     * porównania dwóch kolumn.
+     */
+    size?: KptDialogSize;
     /** Pozwala zamknąć klawiszem Esc i przyciskiem ×. */
     dismissible?: boolean;
     children?: ReactNode;
@@ -21,7 +29,7 @@ export interface KptDialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'o
  *   </KptDialog.Footer>
  * </KptDialog>
  */
-export declare function KptDialog({ open, onOpenChange, header, dismissible, locale, dictionary, className, children, ref, ...rest }: Readonly<KptDialogProps>): import("react").JSX.Element;
+export declare function KptDialog({ open, onOpenChange, header, size, dismissible, locale, dictionary, className, children, ref, ...rest }: Readonly<KptDialogProps>): import("react").JSX.Element;
 export declare namespace KptDialog {
     var Footer: typeof KptDialogFooter;
 }

package/dist/dialog/dialog.js

@@ -18,7 +18,7 @@ import { KptIcon } from "../icon/icon.js";
  *   </KptDialog.Footer>
  * </KptDialog>
  */
-export function KptDialog({ open, onOpenChange, header = '', dismissible = true, locale, dictionary, className, children, ref, ...rest }) {
+export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismissible = true, locale, dictionary, className, children, ref, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const dialogRef = useRef(null);
     // Element trafia do kontekstu, więc musi wywołać render — sam `ref` by nie wystarczył.
@@ -46,7 +46,7 @@ export function KptDialog({ open, onOpenChange, header = '', dismissible = true,
         }
         onOpenChange(false);
     };
-    return (_jsx(KptOverlayContainerContext.Provider, { value: open ? dialogEl : null, children: _jsxs("dialog", { ref: composeRefs(dialogRef, setDialogEl, ref), className: cn('kpt-dialog', className), onClose: () => onOpenChange(false), onCancel: onCancel, ...rest, children: [header ? (_jsxs("div", { className: "kpt-dialog__header", children: [_jsx("h2", { className: "kpt-dialog__title", children: header }), dismissible ? (_jsx("button", { className: "kpt-dialog__close", type: "button", onClick: () => onOpenChange(false), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-dialog__body", children: body }), footers] }) }));
+    return (_jsx(KptOverlayContainerContext.Provider, { value: open ? dialogEl : null, children: _jsxs("dialog", { ref: composeRefs(dialogRef, setDialogEl, ref), className: cn('kpt-dialog', className), "data-size": size, onClose: () => onOpenChange(false), onCancel: onCancel, ...rest, children: [header ? (_jsxs("div", { className: "kpt-dialog__header", children: [_jsx("h2", { className: "kpt-dialog__title", children: header }), dismissible ? (_jsx("button", { className: "kpt-dialog__close", type: "button", onClick: () => onOpenChange(false), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-dialog__body", children: body }), footers] }) }));
 }
 /**
  * Stopka okna. Nosi atrybut `kptdialogfooter`, w który celuje wspólny SCSS (nazwy atrybutów

package/dist/progress/llms.txt

@@ -1,47 +1,95 @@
 # KptProgress (@konce-pt/react)
 
-A progress indicator — linear or circular, determinate (0–100) or indeterminate (`value` = null).
+A progress indicator — linear or circular, determinate (`min`–`max`) or indeterminate (`value` = null).
 Import: `import { KptProgress } from '@konce-pt/react';`
 
 ## DOM
-    <!-- linear -->
-    <div class="kpt-progress-host">
-      <div class="kpt-progress__linear" data-variant="primary" role="progressbar" aria-valuenow="65">
-        <div class="kpt-progress__bar" style="width: 65%"></div>
+    <!-- linear, with a label, a buffer and a value -->
+    <div class="kpt-progress-host" data-type="linear" data-size="md" data-variant="primary" data-label-position="top">
+      <span class="kpt-progress__label">Loading…</span>
+      <div class="kpt-progress__linear" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
+        <div class="kpt-progress__buffer" style="width: 92%"></div>
+        <div class="kpt-progress__bar" style="width: 80%"></div>
       </div>
+      <span class="kpt-progress__value" aria-hidden="true">80%</span>
     </div>
 
     <!-- circular -->
-    <svg class="kpt-progress__circular" data-variant="success" viewBox="0 0 40 40" role="progressbar" aria-valuenow="75">
-      <circle class="kpt-progress__track" cx="20" cy="20" r="16"></circle>
-      <circle class="kpt-progress__bar" cx="20" cy="20" r="16" style="stroke-dasharray: 100.531; stroke-dashoffset: 25.1327"></circle>
-    </svg>
+    <div class="kpt-progress-host" data-type="circular" data-size="md" data-variant="success">
+      <svg class="kpt-progress__circular" viewBox="0 0 40 40" role="progressbar" aria-valuenow="75">
+        <circle class="kpt-progress__track" cx="20" cy="20" r="16"></circle>
+        <circle class="kpt-progress__bar" cx="20" cy="20" r="16" style="stroke-dasharray: 100.531; stroke-dashoffset: 25.1327"></circle>
+      </svg>
+      <span class="kpt-progress__value" aria-hidden="true">75%</span>
+    </div>
+
+The label, the track and the value are siblings straight under the host — there is no wrapper element.
+`data-variant`, `data-type`, `data-size` and `data-label-position` all sit on the host, which is also
+where the private `--_color` and `--_thickness` are resolved. This markup matches the Angular port
+element for element, so both share one stylesheet.
 
 ## Props
-- `value`: number | null (default null) — 0–100, or null for indeterminate
+- `value`: number | null (default null) — a value on the `min`–`max` scale, or null for indeterminate
+- `min`: number (default 0); `max`: number (default 100)
 - `variant`: 'primary' | 'success' | 'danger' | 'warning' | 'info' (default 'primary')
 - `type`: 'linear' | 'circular' (default 'linear')
+- `size`: 'sm' | 'md' | 'lg' (default 'md') — track thickness, and arc width on the circular variant
 - `diameter`: number (default 40) — the circular variant's size in pixels
+- `bufferValue`: number | null (default null) — a second, dimmed bar behind the main one; linear only
+- `showValue`: boolean (default false) — turns the value area on; `children` needs it too
+- `valueFormat`: 'percent' | 'fraction' | 'none' (default 'percent')
+- `label`: string — descriptive text next to the bar; it also becomes the `aria-label`
+- `labelPosition`: 'top' | 'bottom' | 'end' (default 'top') — ignored by the circular variant
+- `locale`, `dictionary` — per-instance dictionary overrides
 - `className`, `ref` and every other `<div>` prop go to the host
 
+## Value label
+`showValue` opens the value area; `valueFormat` decides what goes in it — `percent` renders `80%`,
+`fraction` renders `152 / 160` from `value` and `max`, `none` leaves it empty. Both strings come from
+the `KptMessages` dictionary (`progress.percent`, `progress.fraction`), so a new locale can reshape them.
+
+`children` replaces the formatted value instead of adding to it, which is how a circle shows a headline
+number over a caption. It still requires `showValue`, because that prop is what renders the element the
+content lands in.
+
+The circular variant always centres the value over the arc; `label` is not drawn there, it only feeds
+the accessible name.
+
 ## How the arc is drawn
-The circle lives in a fixed `viewBox="0 0 40 40"` with `r=16`, so the circumference is computed
-from that radius, not from `diameter` — the SVG scales, the maths does not change. The arc is the
-dash offset: full circumference means empty, zero means complete. An indeterminate circle is pinned
-at a quarter of the circumference and spun by CSS.
+The circle lives in a fixed `viewBox="0 0 40 40"` with `r=16`, so the circumference is computed from
+that radius, not from `diameter` — the SVG scales, the maths does not change. The arc is the dash
+offset: full circumference means empty, zero means complete. `size` only changes `stroke-width`, and
+the widest step still fits inside the box, so no arc is ever clipped.
 
-Values outside 0–100 are clamped rather than rejected, so a computed percentage that briefly
-overshoots cannot break the drawing.
+Values outside the range are clamped rather than rejected, `max` ≤ `min` collapses to zero, and the
+buffer is never allowed behind the main bar — a computed percentage that briefly overshoots cannot
+break the drawing.
 
 ## Examples
-    <KptProgress value={65} />
-    <KptProgress value={null} variant="info" />
-    <KptProgress type="circular" value={75} variant="success" diameter={64} />
+    <KptProgress value={60} />
+    <KptProgress value={80} label="Loading…" showValue />
+    <KptProgress value={152} max={160} size="lg" showValue valueFormat="fraction" labelPosition="bottom" />
+    <KptProgress value={65} showValue labelPosition="end" />
+    <KptProgress value={38} bufferValue={62} />
+    <KptProgress type="circular" value={80} showValue />
+    <KptProgress type="circular" value={72} diameter={140} size="lg" showValue>
+      <strong>29</strong>
+      <small>Excellent</small>
+    </KptProgress>
+    <KptProgress value={null} />
 
 ## Tokens
 The semantic colour of each variant (`--kpt-color-primary` / `-success` / `-danger` / `-warning` /
-`-info`), `--kpt-color-muted` for the track.
+`-info`), plus the component layer: `--kpt-progress-track-bg`, `--kpt-progress-thickness-sm`,
+`--kpt-progress-thickness-md`, `--kpt-progress-thickness-lg`, `--kpt-progress-buffer-opacity`,
+`--kpt-progress-label-fg`, `--kpt-progress-value-fg`, `--kpt-progress-gap`.
 
 ## Accessibility
-`role="progressbar"` with `aria-valuenow`; an indeterminate bar leaves the value out, which is how
-a screen reader learns the progress is unknown rather than zero.
+`role="progressbar"` with `aria-valuemin`, `aria-valuemax` and `aria-valuenow`; an indeterminate bar
+leaves the value out, which is how a screen reader learns the progress is unknown rather than zero.
+`valueFormat="fraction"` also sets `aria-valuetext`, so the reader says "152 / 160" instead of
+announcing the raw number as a percentage. The visible value is `aria-hidden`, so it is never read
+twice. The accessible name comes from `label`, or from the dictionary when there is none.
+
+Under `prefers-reduced-motion: reduce` the indeterminate animation slows down instead of stopping —
+a frozen progress indicator reads as a hung application.

package/dist/progress/progress.d.ts

@@ -1,19 +1,46 @@
-import type { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export type KptProgressVariant = 'primary' | 'success' | 'danger' | 'warning' | 'info';
-export interface KptProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
-    /** 0–100 albo `null` = postęp nieokreślony. */
+export type KptProgressType = 'linear' | 'circular';
+export type KptProgressSize = 'sm' | 'md' | 'lg';
+/** Postać etykiety wartości: procent, „ile z ilu" albo brak. */
+export type KptProgressValueFormat = 'percent' | 'fraction' | 'none';
+/** Gdzie siada wiersz etykiety względem paska (tylko `type="linear"`). */
+export type KptProgressLabelPosition = 'top' | 'bottom' | 'end';
+export interface KptProgressProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
+    /** Wartość w skali `min`–`max` albo `null` = postęp nieokreślony. */
     value?: number | null;
+    min?: number;
+    max?: number;
     variant?: KptProgressVariant;
-    type?: 'linear' | 'circular';
+    type?: KptProgressType;
+    /** Grubość toru: `sm` 0.25rem, `md` 0.5rem, `lg` 0.75rem. */
+    size?: KptProgressSize;
     /** Średnica wariantu kołowego w pikselach. */
     diameter?: number;
+    /** Postęp buforowania — drugi, przygaszony pasek pod głównym (tylko liniowy). */
+    bufferValue?: number | null;
+    /** Włącza obszar etykiety wartości — razem z nim renderuje się `children`. */
+    showValue?: boolean;
+    valueFormat?: KptProgressValueFormat;
+    /** Tekst opisowy obok paska; służy też za `aria-label`. */
+    label?: string;
+    labelPosition?: KptProgressLabelPosition;
+    /** Zastępuje sformatowaną wartość — wymaga `showValue`. */
+    children?: ReactNode;
 }
 /**
- * Wskaźnik postępu — liniowy lub kołowy, określony (0–100) albo nieokreślony (`value` = null).
+ * Wskaźnik postępu — liniowy lub kołowy, określony (`min`–`max`) albo nieokreślony (`value` = null).
+ *
+ * Etykietę wartości włącza `showValue`; `children` zastępuje sformatowaną wartość,
+ * więc w środku koła można pokazać cokolwiek.
  *
  * @example
  * <KptProgress value={60} />
- * <KptProgress type="circular" value={75} variant="success" />
+ * <KptProgress value={80} label="Ładowanie…" showValue />
+ * <KptProgress value={152} max={160} showValue valueFormat="fraction" labelPosition="bottom" />
+ * <KptProgress value={38} bufferValue={62} />
+ * <KptProgress type="circular" value={75} variant="success" showValue />
  * <KptProgress value={null} />
  */
-export declare function KptProgress({ value, variant, type, diameter, className, ...rest }: Readonly<KptProgressProps>): import("react").JSX.Element;
+export declare function KptProgress({ value, min, max, variant, type, size, diameter, bufferValue, showValue, valueFormat, label, labelPosition, locale, dictionary, className, children, ...rest }: Readonly<KptProgressProps>): import("react").JSX.Element;

package/dist/progress/progress.js

@@ -1,21 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
 /** Promień okręgu w viewBox 0 0 40 40 — obwód liczymy z niego, nie ze średnicy w pikselach. */
 const RADIUS = 16;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 /**
- * Wskaźnik postępu — liniowy lub kołowy, określony (0–100) albo nieokreślony (`value` = null).
+ * Wskaźnik postępu — liniowy lub kołowy, określony (`min`–`max`) albo nieokreślony (`value` = null).
+ *
+ * Etykietę wartości włącza `showValue`; `children` zastępuje sformatowaną wartość,
+ * więc w środku koła można pokazać cokolwiek.
  *
  * @example
  * <KptProgress value={60} />
- * <KptProgress type="circular" value={75} variant="success" />
+ * <KptProgress value={80} label="Ładowanie…" showValue />
+ * <KptProgress value={152} max={160} showValue valueFormat="fraction" labelPosition="bottom" />
+ * <KptProgress value={38} bufferValue={62} />
+ * <KptProgress type="circular" value={75} variant="success" showValue />
  * <KptProgress value={null} />
  */
-export function KptProgress({ value = null, variant = 'primary', type = 'linear', diameter = 40, className, ...rest }) {
+export function KptProgress({ value = null, min = 0, max = 100, variant = 'primary', type = 'linear', size = 'md', diameter = 40, bufferValue = null, showValue = false, valueFormat = 'percent', label, labelPosition = 'top', locale, dictionary, className, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
     const indeterminate = value == null;
-    // Nieokreślony postęp pokazuje wycinek 25% obwodu, który obraca CSS — stąd stały offset.
-    const offset = indeterminate
-        ? CIRCUMFERENCE * 0.75
-        : CIRCUMFERENCE * (1 - Math.min(100, Math.max(0, value)) / 100);
-    return (_jsx("div", { className: cn('kpt-progress-host', className), ...rest, children: type === 'circular' ? (_jsxs("svg", { className: cn('kpt-progress__circular', indeterminate && 'kpt-progress--indeterminate'), "data-variant": variant, width: diameter, height: diameter, viewBox: "0 0 40 40", role: "progressbar", "aria-valuenow": value ?? undefined, children: [_jsx("circle", { className: "kpt-progress__track", cx: "20", cy: "20", r: RADIUS }), _jsx("circle", { className: "kpt-progress__bar", cx: "20", cy: "20", r: RADIUS, style: { strokeDasharray: CIRCUMFERENCE, strokeDashoffset: offset } })] })) : (_jsx("div", { className: "kpt-progress__linear", "data-variant": variant, role: "progressbar", "aria-valuenow": value ?? undefined, children: _jsx("div", { className: cn('kpt-progress__bar', indeterminate && 'kpt-progress--indeterminate'), style: { width: `${value ?? 0}%` } }) })) }));
+    /** Ułamek 0–1. Odporny na `max` ≤ `min` i na wartości spoza zakresu. */
+    const toRatio = (v) => {
+        if (v == null)
+            return 0;
+        const span = max - min;
+        if (span <= 0)
+            return 0;
+        return Math.min(1, Math.max(0, (v - min) / span));
+    };
+    const ratio = toRatio(value);
+    const percent = Math.round(ratio * 100);
+    // Bufor nigdy nie cofa się za pasek główny — inaczej wyglądałby jak błąd renderowania.
+    const bufferRatio = Math.max(ratio, toRatio(bufferValue));
+    const offset = CIRCUMFERENCE * (1 - ratio);
+    const fractionText = () => t('progress.fraction', { value: value ?? 0, max });
+    let valueText = '';
+    if (!indeterminate && valueFormat !== 'none') {
+        valueText = valueFormat === 'fraction' ? fractionText() : t('progress.percent', { value: percent });
+    }
+    /**
+     * Czytnik ekranu domyślnie odczytuje `aria-valuenow` jako procent, więc przy formacie „ile z ilu"
+     * podajemy mu ten sam napis, który widzi użytkownik.
+     */
+    const ariaValueText = indeterminate || valueFormat !== 'fraction' ? undefined : fractionText();
+    const ariaLabel = label ?? t(indeterminate ? 'progress.loading' : 'progress.label');
+    const barAria = {
+        role: 'progressbar',
+        'aria-label': ariaLabel,
+        'aria-valuemin': min,
+        'aria-valuemax': max,
+        'aria-valuenow': indeterminate ? undefined : (value ?? undefined),
+        'aria-valuetext': ariaValueText,
+    };
+    return (_jsxs("div", { className: cn('kpt-progress-host', className), "data-type": type, "data-size": size, "data-variant": variant, "data-label-position": labelPosition, ...rest, children: [type === 'circular' ? (_jsxs("svg", { className: cn('kpt-progress__circular', indeterminate && 'kpt-progress--indeterminate'), width: diameter, height: diameter, viewBox: "0 0 40 40", ...barAria, children: [_jsx("circle", { className: "kpt-progress__track", cx: "20", cy: "20", r: RADIUS }), _jsx("circle", { className: "kpt-progress__bar", cx: "20", cy: "20", r: RADIUS, style: indeterminate ? undefined : { strokeDasharray: CIRCUMFERENCE, strokeDashoffset: offset } })] })) : (_jsxs(_Fragment, { children: [label ? _jsx("span", { className: "kpt-progress__label", children: label }) : null, _jsxs("div", { className: "kpt-progress__linear", ...barAria, children: [bufferValue != null && !indeterminate ? (_jsx("div", { className: "kpt-progress__buffer", style: { width: `${bufferRatio * 100}%` } })) : null, _jsx("div", { className: cn('kpt-progress__bar', indeterminate && 'kpt-progress--indeterminate'), style: indeterminate ? undefined : { width: `${ratio * 100}%` } })] })] })), showValue ? (_jsx("span", { className: "kpt-progress__value", "aria-hidden": "true", children: children ?? valueText })) : null] }));
 }

package/dist/public-api.d.ts

@@ -23,7 +23,7 @@ export type { KptDividerOrientation, KptDividerProps } from './divider/divider.t
 export { KptEmpty } from './empty/empty.tsx';
 export type { KptEmptyProps } from './empty/empty.tsx';
 export { KptProgress } from './progress/progress.tsx';
-export type { KptProgressProps, KptProgressVariant } from './progress/progress.tsx';
+export type { KptProgressProps, KptProgressVariant, KptProgressType, KptProgressSize, KptProgressValueFormat, KptProgressLabelPosition, } from './progress/progress.tsx';
 export { KptSpinner } from './spinner/spinner.tsx';
 export type { KptSpinnerProps } from './spinner/spinner.tsx';
 export { KptSkeleton } from './skeleton/skeleton.tsx';
@@ -43,7 +43,7 @@ export { KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF,
 export { KptChip } from './chip/chip.tsx';
 export type { KptChipProps, KptChipTextTransform, KptChipVariant } from './chip/chip.tsx';
 export { KptDialog, KptDialogFooter } from './dialog/dialog.tsx';
-export type { KptDialogProps } from './dialog/dialog.tsx';
+export type { KptDialogProps, KptDialogSize } from './dialog/dialog.tsx';
 export { KptDrawer } from './drawer/drawer.tsx';
 export type { KptDrawerPosition, KptDrawerProps } from './drawer/drawer.tsx';
 export { KptBottomSheet } from './bottom-sheet/bottom-sheet.tsx';

package/dist/shared/types.d.ts

@@ -3,6 +3,8 @@ export interface KptOption<T = unknown> {
     label: string;
     value: T;
     disabled?: boolean;
+    /** Nazwa ikony z rejestru. Renderuje ją dziś wyłącznie `kpt-button-group`. */
+    icon?: string;
 }
 /** Wariant komunikatu — wspólny dla alertu i toastów. */
 export type KptAlertVariant = 'info' | 'success' | 'warning' | 'danger';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.8.5",
+  "version": "0.9.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/chart": "0.8.5",
-    "@konce-pt/backdrop": "0.8.5",
-    "@konce-pt/datetime": "0.8.5",
-    "@konce-pt/mention": "0.8.5",
-    "@konce-pt/chat": "0.8.5",
-    "@konce-pt/icons": "0.8.5",
-    "@konce-pt/roadmap": "0.8.5",
-    "@konce-pt/table": "0.8.5",
-    "@konce-pt/map": "0.8.5",
-    "@konce-pt/tokens": "0.8.5",
-    "@konce-pt/i18n": "0.8.5"
+    "@konce-pt/datetime": "0.9.0",
+    "@konce-pt/chat": "0.9.0",
+    "@konce-pt/backdrop": "0.9.0",
+    "@konce-pt/chart": "0.9.0",
+    "@konce-pt/icons": "0.9.0",
+    "@konce-pt/roadmap": "0.9.0",
+    "@konce-pt/table": "0.9.0",
+    "@konce-pt/mention": "0.9.0",
+    "@konce-pt/tokens": "0.9.0",
+    "@konce-pt/map": "0.9.0",
+    "@konce-pt/i18n": "0.9.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",