@konce-pt/react 0.8.1 → 0.8.3

package/dist/checkbox/llms.txt

@@ -0,0 +1,39 @@
+# KptCheckbox (@konce-pt/react)
+
+A checkbox. The whole layout is a `<label>`, so clicking the text toggles the field with no
+`htmlFor` — the native `<input>` inside carries the semantics and the keyboard.
+Import: `import { KptCheckbox } from '@konce-pt/react';`
+
+## DOM
+    <span class="kpt-checkbox-host">
+      <label class="kpt-checkbox">
+        <input type="checkbox" class="kpt-checkbox__input">
+        <span class="kpt-checkbox__box" aria-hidden="true"><svg class="kpt-checkbox__check">…</svg></span>
+        <span class="kpt-checkbox__label">I accept the terms</span>
+      </label>
+    </span>
+
+## Props
+- `label`: string — the text next to the field; richer content goes in `children`
+- `checked` / `defaultChecked` — controlled or uncontrolled, like a native checkbox
+- `onCheckedChange(checked)` — the boolean alone; `onChange` still fires with the full event
+- `onTouch()` — fires on blur
+- `required`: boolean — set as `aria-required`, not as the native attribute
+- `invalid`, `touched` — the error state, gated the same way as in `KptInput`
+- `hostProps` — props for the `.kpt-checkbox-host` wrapper
+- `className` goes to the `.kpt-checkbox` block; `name`, `value`, `ref` and the handlers go to the
+  native `<input>`, which is where a form expects them
+
+## Examples
+    <KptCheckbox name="terms" label="I accept the terms" />
+    <KptCheckbox checked={on} onCheckedChange={setOn} />
+    <KptCheckbox label="Newsletter" invalid={!!err} touched={blurred} />
+
+## Tokens
+`--kpt-form-field-border`, `--kpt-color-primary` (the checked box), `--kpt-color-on-primary`
+(the tick), `--kpt-form-field-border-error`.
+
+## Accessibility
+A native `<input type="checkbox">` inside a `<label>` — the label is the accessible name and the
+whole row is clickable. The box and the tick are `aria-hidden`, being pure decoration over the real
+control.

package/dist/chip/llms.txt

@@ -0,0 +1,41 @@
+# KptChip (@konce-pt/react)
+
+A chip / tag — a label, optionally removable.
+Import: `import { KptChip } from '@konce-pt/react';`
+
+## DOM
+    <span class="kpt-chip-host">
+      <span class="kpt-chip" data-variant="primary">
+        React
+        <button type="button" class="kpt-chip__remove" aria-label="Remove">…icon…</button>
+      </span>
+    </span>
+
+## Props
+- `variant`: 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' (default 'neutral')
+- `removable`: boolean — adds the remove button
+- `disabled`: boolean
+- `onRemove()` — fired by the remove button
+- `locale`, `dictionary` — i18n overrides for this component only
+- `hostProps` — props for the `.kpt-chip-host` wrapper
+- `className`, `ref` and every other `<span>` prop go to the inner `.kpt-chip`
+
+## Removing is your decision
+`onRemove` reports the intent; the chip does not remove itself from anything. Drop it from your own
+list — that keeps the chip usable both in a controlled collection and as a standalone label.
+
+## i18n
+The remove button's label comes from `common.remove` in the dictionary.
+
+## Examples
+    <KptChip>React</KptChip>
+    <KptChip variant="success" removable onRemove={() => drop(tag)}>UI</KptChip>
+    <KptCard.Tags><KptChip variant="info">Daily</KptChip></KptCard.Tags>
+
+## Tokens
+`--kpt-color-muted`, `--kpt-color-on-muted` and the semantic colour pairs of each variant
+(`--kpt-color-primary` / `-subtle`, `-success`, `-danger`, `-warning`, `-info`).
+
+## Accessibility
+The remove button is a native `<button>` with `aria-label`, so it is reachable by keyboard and goes
+`disabled` together with the chip.

package/dist/chips-input/llms.txt

@@ -0,0 +1,40 @@
+# KptChipsInput (@konce-pt/react)
+
+A tag field — add with Enter or a comma, remove with Backspace or ×.
+Import: `import { KptChipsInput } from '@konce-pt/react';`
+
+## DOM
+    <div class="kpt-chips-input-host">
+      <div class="kpt-chips-input">
+        …KptChip per tag…
+        <input class="kpt-chips-input__field" type="text">
+      </div>
+    </div>
+
+## Props
+- `value` / `defaultValue` / `onValueChange` — `string[]`
+- `placeholder`: string — omitted falls back to `chipsInput.placeholder`
+- `allowDuplicates`: boolean (default false)
+- `disabled`, `invalid`, `touched`, `onTouch()`
+- `locale`, `dictionary` — i18n overrides for this component only
+
+## The buffer is not state
+The text being typed lives in the DOM, not in React state: the component's value is the list of
+committed tags, and the typing buffer is the field's own business. Every keystroke therefore does
+not re-render the chips.
+
+## Keyboard
+Enter and a comma commit the tag. Backspace in an empty field eats the last chip — the behaviour
+every mail client teaches. Blur commits whatever is left in the field, so a half-typed tag is not
+lost by clicking away.
+
+## Examples
+    <KptChipsInput value={tags} onValueChange={setTags} placeholder="Add a tag…" />
+    <KptChipsInput value={tags} onValueChange={setTags} allowDuplicates />
+
+## Tokens
+`--kpt-form-field-{bg,border,border-focus,border-error,radius}` plus the chip tokens.
+
+## Accessibility
+Each chip is a `KptChip` with a labelled remove button, and the field itself is a native input, so
+tags are reachable and removable from the keyboard alone.

package/dist/clock/llms.txt

@@ -0,0 +1,50 @@
+# KptClock (@konce-pt/react)
+
+A clock dial — two stages: hours → minutes, by click or by drag. Used by `KptDatepicker` and
+`KptDateRange`, and available on its own.
+Import: `import { KptClock } from '@konce-pt/react';`
+
+## DOM
+    <div class="kpt-clock-host">
+      <div class="kpt-clock">
+        <div class="kpt-clock__time">
+          <button class="kpt-clock__seg is-active">15</button>:<button class="kpt-clock__seg">30</button>
+          <div class="kpt-clock__ampm">…12h only…</div>
+        </div>
+        <div class="kpt-clock__face">
+          <span class="kpt-clock__hand"></span>
+          <button class="kpt-clock__num kpt-clock__num--inner">15</button>…
+        </div>
+      </div>
+    </div>
+
+## Props
+- `value` / `onValueChange` — 'HH:mm', always 24h regardless of `hourFormat`
+- `hourFormat`: 12 | 24 (default 24)
+- `minuteStep`: number (default 1) — minute snapping while dragging
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The value is the only state
+Hours and minutes are derived from `value` on every render, so replacing it from outside needs no
+synchronisation. The component keeps one piece of state of its own: which stage the dial is on.
+
+## Two rings in 24h
+12 and 1–11 sit on the outer ring, 00 and 13–23 on the inner one, because 24 numbers on one circle
+are unreadable. While dragging, the click radius decides the ring; in 12h the AM/PM toggle decides
+the half-day instead.
+
+## Pointer moves without a button do nothing
+The dial updates on `pointerdown` and on `pointermove` with the primary button held. Without that
+check, merely moving the mouse across the clock would change the time.
+
+## Examples
+    <KptClock value={time} onValueChange={setTime} />
+    <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
+
+## Tokens
+The dial `--kpt-color-surface-raised`, the hand and the selection `--kpt-color-primary`,
+the numbers `--kpt-color-on-surface`.
+
+## Accessibility
+Every mark is a real `<button>`, so the dial can be used without a pointer; the hour and minute
+segments are buttons too and switch the stage.

package/dist/color-picker/color-picker.d.ts

@@ -5,7 +5,7 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     /** Paleta szybkiego wyboru. */
-    presets?: string[];
+    presets?: readonly string[];
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;

package/dist/color-picker/llms.txt

@@ -0,0 +1,40 @@
+# KptColorPicker (@konce-pt/react)
+
+Colour selection: a swatch, a hex field and presets. The value is a hex string.
+Import: `import { KptColorPicker } from '@konce-pt/react';`
+
+## DOM
+    <div class="kpt-color-picker-host">
+      <div class="kpt-color-picker">
+        <label class="kpt-color-picker__swatch" style="background-color:#3b82f6">
+          <input type="color">
+        </label>
+        <input type="text" class="kpt-color-picker__hex" maxlength="7" value="#3b82f6">
+        <div class="kpt-color-picker__presets">
+          <button class="kpt-color-picker__preset is-active" aria-label="#3b82f6"></button>…
+        </div>
+      </div>
+    </div>
+
+## Props
+- `value` / `defaultValue` / `onValueChange` — the hex colour (default `'#3b82f6'`)
+- `presets`: string[] — the quick-pick palette (8 colours by default; `[]` hides the row)
+- `disabled`, `invalid`, `touched`, `onTouch()`
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The swatch is a native colour input
+`<input type="color">` sits transparent under the coloured square, so the system palette is the
+browser's — it works on a phone and there is no picker of ours to maintain. The hex field edits the
+same value as text, and the presets write it directly.
+
+## Examples
+    <KptColorPicker value={color} onValueChange={setColor} />
+    <KptColorPicker value={color} onValueChange={setColor} presets={['#ef4444', '#3b82f6']} />
+
+## Tokens
+The border `--kpt-form-field-border`, the field `--kpt-form-field-{bg,text,radius}`, the active
+preset `--kpt-color-focus-ring`.
+
+## Accessibility
+Every preset is a `<button>` labelled with its hex value; the hex field carries `aria-invalid` once
+the field is touched.

package/dist/confirm/llms.txt

@@ -0,0 +1,44 @@
+# kptConfirm + KptConfirmContainer (@konce-pt/react)
+
+Confirmation built on `KptDialog`. Same pattern as `kptToast`: a module singleton plus one
+container rendered once.
+Import: `import { kptConfirm, KptConfirmContainer } from '@konce-pt/react';`
+
+## Usage
+1. Render `<KptConfirmContainer />` once in the app, next to `<KptToastContainer />`.
+2. `await kptConfirm(options)` from anywhere — it resolves to `true` or `false`.
+
+## KptConfirmOptions
+- `message`: string (required); `header?`: string
+- `acceptLabel?`, `rejectLabel?`: string
+- `variant?`: `'filled'` | `'danger'` — the accept button and the icon colour
+- `icon?`: an icon name from the registry
+
+## A store, not a hook
+The state is a module singleton, so `kptConfirm()` works outside the React tree too — a data layer,
+a navigation guard — without wrapping the app in a provider. `useKptConfirmRequest()` exposes the
+current request through `useSyncExternalStore` for anyone rendering their own container.
+
+## The promise always settles
+Escape and the × close the dialog through `onOpenChange`, which resolves `false` — an awaiting
+caller is never left hanging. A second `kptConfirm()` while one is open rejects the previous
+request for the same reason: one request at a time, and nothing is dropped silently.
+
+## Examples
+    <KptConfirmContainer />
+
+    if (await kptConfirm({ message: 'Delete this record?', variant: 'danger', acceptLabel: 'Delete', icon: 'alert-triangle' })) {
+      remove();
+    }
+
+## i18n
+The default header and the Confirm/Cancel labels come from the `confirm` namespace; the option
+fields take priority.
+
+## Tokens
+Inherited from `KptDialog`; the icon follows the variant (`--kpt-color-danger` /
+`--kpt-color-primary`).
+
+## Accessibility
+Everything comes from `KptDialog`, that is from the native `<dialog>`: the focus trap, Escape and
+the backdrop are the platform's, not ours.

package/dist/context-menu/context-menu.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { KptMenuItem } from '../menu/menu-item.ts';
 export interface KptContextMenuProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
-    items?: KptMenuItem<T>[];
+    items?: readonly KptMenuItem<T>[];
     /** Obszar reagujący na prawy przycisk myszy. */
     children?: ReactNode;
     onSelect?: (item: KptMenuItem<T>) => void;

package/dist/context-menu/llms.txt

@@ -0,0 +1,39 @@
+# KptContextMenu (@konce-pt/react)
+
+A context menu (right-click) over the area of its children. The panel is positioned at the cursor.
+Import: `import { KptContextMenu } from '@konce-pt/react';`
+
+## DOM
+    <div class="kpt-context-menu-host">
+      <div class="kpt-context-menu__area">…children…</div>
+      <div class="kpt-context-menu__backdrop"></div>
+      <div class="kpt-context-menu__panel" role="menu" style="left: 320px; top: 210px">…</div>
+    </div>
+
+## Props
+- `items`: `KptMenuItem<T>[]` — the same shape as `KptMenu`
+- `children`: ReactNode — the area that reacts to the right mouse button
+- `onSelect(item)` — the picked item
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## Not an overlay
+Unlike `KptMenu` this panel does not go through `KptOverlay`: there is no trigger to pin it to, so
+the position comes from the click coordinates, and the look and the layer come from the shared SCSS
+(`.kpt-context-menu__panel`). The panel therefore lives inside the host, not in a portal.
+
+## Closing
+A left click on the backdrop closes it; a right click on the backdrop closes it too and does not
+open the browser's own menu. Picking an item closes it and reports the choice.
+
+## Examples
+    <KptContextMenu items={items} onSelect={onSelect}>
+      <div className="area">Right-click here</div>
+    </KptContextMenu>
+
+## Tokens
+`--kpt-color-surface-raised`, `--kpt-color-border`, `--kpt-elevation-3`, `--kpt-color-danger`.
+
+## Accessibility
+The panel is `role="menu"` with `role="menuitem"` buttons. There is no keyboard path to open it —
+that is what the right mouse button and the platform's context key are for, so pair the same actions
+with a `KptMenu` when they must be reachable from the keyboard.

package/dist/data-table/data-table-types.d.ts

@@ -6,7 +6,7 @@ export type KptColumnEditType = 'text' | 'number' | 'date' | 'select' | 'multise
 export interface KptColumnEdit {
     type: KptColumnEditType;
     /** Opcje dla `type: 'select'` / `'multiselect'`. */
-    options?: KptOption<unknown>[];
+    options?: readonly KptOption<unknown>[];
     placeholder?: string;
     /** Dla `type: 'number'`. */
     min?: number;

package/dist/data-table/data-table.d.ts

@@ -9,7 +9,7 @@ export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     filterRowPosition?: 'top' | 'bottom';
     /** Rozmiar strony; 0 wyłącza paginację. */
     pageSize?: number;
-    pageSizeOptions?: number[];
+    pageSizeOptions?: readonly number[];
     selectable?: 'none' | 'single' | 'multiple';
     loading?: boolean;
     emptyMessage?: string;
@@ -51,12 +51,4 @@ export interface KptDataTableProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     /** Treść po lewej stronie paginatora (odpowiednik slotu `[kptPaginatorActions]`). */
     paginatorActions?: ReactNode;
 }
-/**
- * Flagowa tabela danych: kolumny konfiguracją, sortowanie, filtr globalny i filtry kolumn,
- * paginacja, zaznaczanie, kolumny zamrożone i przestawiane, edycja inline, wiersz podsumowania,
- * rozwijane wiersze, wirtualizacja i eksport CSV.
- *
- * @example
- * <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
- */
-export declare function KptDataTable<T extends Record<string, unknown>>({ columns, data, filterable, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, emptyMessage, rowKey, scrollHeight, virtualScroll, rowHeight, reorderable, exportable, exportFilename, lazy, totalRecords, expandable, multiExpand, summaryLabel, summaryValues, selection, defaultSelection, onSelectionChange, expandedRows, defaultExpandedRows, onExpandedRowsChange, hiddenFields, defaultHiddenFields, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }: Readonly<KptDataTableProps<T>>): import("react").JSX.Element;
+export declare function KptDataTable<T = Record<string, unknown>>({ columns, data, filterable, filterRowPosition, pageSize, pageSizeOptions, selectable, loading, emptyMessage, rowKey, scrollHeight, virtualScroll, rowHeight, reorderable, exportable, exportFilename, lazy, totalRecords, expandable, multiExpand, summaryLabel, summaryValues, selection, defaultSelection, onSelectionChange, expandedRows, defaultExpandedRows, onExpandedRowsChange, hiddenFields, defaultHiddenFields, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }: Readonly<KptDataTableProps<T>>): import("react").JSX.Element;

package/dist/data-table/data-table.js

@@ -38,6 +38,14 @@ const EMPTY_FIELDS = [];
  * @example
  * <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
  */
+/**
+ * Odczyt pola wiersza po nazwie. Generyk `T` celowo nie ma ograniczenia `Record<string, unknown>`
+ * (port Angulara też go nie ma): wymuszałoby ono deklarowanie modelu wiersza jako `type`, bo
+ * `interface` nie dostaje domyślnej sygnatury indeksu. Rzutowanie zamknięte w jednym miejscu.
+ */
+function getValue(row, field) {
+    return row[field];
+}
 export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, rowHeight = 41, reorderable = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [picked, setPicked] = useControllableState({
@@ -82,13 +90,13 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const visibleColumns = useMemo(() => order.filter((col) => !hidden.includes(col.field)), [order, hidden]);
     const hasColumnFilters = columns.some((col) => col.filter);
     const hasRowDetail = expandable && !!renderRowDetail;
-    const sameRow = (a, b) => rowKey ? a[rowKey] === b[rowKey] : a === b;
+    const sameRow = (a, b) => rowKey ? getValue(a, rowKey) === getValue(b, rowKey) : a === b;
     // ── Potok danych ──
     const filtered = useMemo(() => {
         const query = filterText.trim().toLowerCase();
         let rows = data;
         if (query) {
-            rows = rows.filter((row) => columns.some((col) => toText(row[col.field]).toLowerCase().includes(query)));
+            rows = rows.filter((row) => columns.some((col) => toText(getValue(row, col.field)).toLowerCase().includes(query)));
         }
         if (hasColumnFilters) {
             rows = rows.filter((row) => columns.every((col) => {
@@ -97,7 +105,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                 const value = columnFilters[col.field];
                 if (isEmptyFilterValue(value))
                     return true;
-                return matchesColumnFilter(col.filter, row[col.field], value);
+                return matchesColumnFilter(col.filter, getValue(row, col.field), value);
             }));
         }
         return rows;
@@ -107,8 +115,8 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
             return filtered;
         const sign = sortDir === 'asc' ? 1 : -1;
         return [...filtered].sort((a, b) => {
-            const av = a[sortField];
-            const bv = b[sortField];
+            const av = getValue(a, sortField);
+            const bv = getValue(b, sortField);
             // Puste komórki lądują na końcu niezależnie od kierunku — sortowanie ma pokazywać dane.
             if (av == null)
                 return 1;
@@ -294,7 +302,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         if (!isEditable(col) || isEditingCell(row, col.field))
             return;
         setEditingCell({ row, field: col.field });
-        setEditingValue(row[col.field]);
+        setEditingValue(getValue(row, col.field));
         // Edytory z panelem otwieramy od razu: ich zamknięcie jest jedynym momentem, w którym
         // wiadomo, że użytkownik skończył wybierać.
         setEditorPanelOpen(!!col.edit && OVERLAY_EDITORS.has(col.edit.type));
@@ -305,7 +313,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         const { row, field } = editingCell;
         setEditingCell(null);
         setEditorPanelOpen(false);
-        if (sameEditValue(value, row[field]))
+        if (sameEditValue(value, getValue(row, field)))
             return;
         onCellEdit?.({ row, field, value, updatedRow: { ...row, [field]: value } });
     };
@@ -429,8 +437,8 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                             }, onKeyDown: (event) => {
                                 if (event.key === 'Enter' && editable)
                                     startEdit(row, col, event);
-                            }, children: editing ? (_jsx("div", { ref: editorHostRef, className: "kpt-data-table__editor", onClick: (event) => event.stopPropagation(), onBlur: onEditorFocusOut, children: editor(row, col) })) : cells?.[col.field] ? (cells[col.field](row, row[col.field])) : row[col.field] }, col.field));
-                    })] }), hasRowDetail && isExpanded(row) && !virtualScroll ? (_jsx("tr", { className: "kpt-data-table__detail-row", children: _jsx("td", { className: "kpt-data-table__detail", colSpan: colspan, children: renderRowDetail?.(row) }) })) : null] }, rowKey ? String(row[rowKey]) : index));
+                            }, children: editing ? (_jsx("div", { ref: editorHostRef, className: "kpt-data-table__editor", onClick: (event) => event.stopPropagation(), onBlur: onEditorFocusOut, children: editor(row, col) })) : cells?.[col.field] ? (cells[col.field](row, getValue(row, col.field))) : getValue(row, col.field) }, col.field));
+                    })] }), hasRowDetail && isExpanded(row) && !virtualScroll ? (_jsx("tr", { className: "kpt-data-table__detail-row", children: _jsx("td", { className: "kpt-data-table__detail", colSpan: colspan, children: renderRowDetail?.(row) }) })) : null] }, rowKey ? String(getValue(row, rowKey)) : index));
     return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsx("input", { className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), value: filterText, onChange: (event) => {
                             setFilterText(event.target.value);
                             setPageIndex(0);

package/dist/data-table/llms.txt

@@ -0,0 +1,79 @@
+# KptDataTable (@konce-pt/react)
+
+The flagship data table: columns from configuration, sorting, a global filter and per-column
+filters, pagination, selection, frozen and reorderable columns, inline editing, a summary row,
+expandable rows, virtual scrolling and CSV export.
+Import: `import { KptDataTable, type KptColumn } from '@konce-pt/react';`
+
+## The column model (KptColumn)
+`{ field, header, sortable?, align?, width?, frozen?, filter?, edit?, summary? }`
+`frozen` columns (leading, adjacent) stick during horizontal scrolling — they require `width`.
+
+- `filter`: `KptColumnFilter` from `@konce-pt/table` — `text`, `number`, `select` (with `multiple`),
+  `numberRange`, `slider`, `dateRange`. Any column with a `filter` renders the filter row.
+- `edit`: `{ type: 'text' | 'number' | 'date' | 'select' | 'multiselect', options?, placeholder?, min?, max?, step? }`
+- `summary`: `{ fn: 'sum' | 'avg' | 'min' | 'max' | 'count' | ((rows) => unknown), format? }`
+
+## Props
+- `columns` (required), `data`
+- `filterable`, `filterRowPosition` (`'bottom'` default), `pageSize` (0 = no pagination),
+  `pageSizeOptions`, `selectable` (`'none' | 'single' | 'multiple'`), `loading`, `emptyMessage`,
+  `rowKey`, `scrollHeight`, `virtualScroll`, `rowHeight` (41), `reorderable`, `exportable`,
+  `exportFilename`, `lazy`, `totalRecords`, `expandable`, `multiExpand`, `summaryLabel`,
+  `summaryValues`
+- Controllable state: `selection`, `expandedRows`, `hiddenFields` (each with `default*` and
+  `on*Change`)
+- Events: `onRowClick`, `onLazyLoad`, `onCellEdit`
+
+## Templates are render props
+- `cells`: `Record<field, (row, value) => ReactNode>` — the equivalent of `kptCell`
+- `cellEditors`: `Record<field, (context) => ReactNode>` — the equivalent of `kptCellEdit`;
+  the context carries `value`, `row`, `commit(value)`, `cancel()`
+- `renderRowDetail(row)` — the expanded row's content
+- `paginatorActions` — the slot to the left of the paginator (a column-toggle button, say)
+
+## The logic lives in a package
+Filter matching, aggregations, CSV escaping and cell-to-text come from `@konce-pt/table` — pure
+functions with `node --test` coverage, shared with the Angular port. What stays here is the state
+and the markup.
+
+## Export as a function, not a method
+Angular exposes `exportCsv()` on the component instance; React has no equivalent, so the same job is
+`exportTableCsv(columns, rows, filename)`, exported from the package. The `exportable` toolbar
+button calls exactly that, over the currently visible columns and the filtered, sorted rows.
+
+## Inline editing never commits on blur of the control
+Controls with a panel (`date`, `select`, `multiselect`) open immediately and commit when the panel
+closes; the rest commit when focus leaves **the whole editor**. `KptInputNumber` has focusable
+`+`/`-` buttons beside the field, so reacting to the control's own blur would close the editor on
+every arrow click. `cellEdit` fires only when the value actually changed (arrays are compared by
+content).
+
+## The summary covers the filtered set, not the page
+Aggregations run over every row after filtering — page 1 and all the rest — so paging does not move
+them while the search box does. With `lazy` the table only holds one page, so it computes nothing:
+`summaryValues` is then the only source.
+
+## Examples
+    <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
+
+    <KptDataTable
+      columns={cols}
+      data={rows}
+      rowKey="id"
+      cells={{ status: (row, value) => <span className="badge">{String(value)}</span> }}
+      onCellEdit={(event) => save(event.updatedRow)}
+    />
+
+## i18n
+The toolbar, the states and the filter labels come from the `dataTable` namespace (`search`,
+`exportCsv`, `loading`, `empty`, `total`, `selectAll`, `selectRow`, `expandRow`, `editCell`,
+`filter` / `filterMin` / `filterMax` with `{column}`, `all`, `min`, `max`, `dateRange`).
+
+## Tokens
+`--kpt-table-{bg,fg,border,radius,header-bg,header-fg,row-hover,row-selected,cell-padding}`,
+the expanded row `--kpt-table-detail-bg`, the summary row `--kpt-table-summary-bg`.
+
+## Not ported yet
+Grouped columns (absent in the Angular port too). A ready column-toggle UI is not part of either
+port — `hiddenFields` is the hook to build one on.

package/dist/data-view/data-view.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export type KptDataViewLayout = 'list' | 'grid';
 export interface KptDataViewProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
-    items?: T[];
+    items?: readonly T[];
     layout?: KptDataViewLayout;
     defaultLayout?: KptDataViewLayout;
     onLayoutChange?: (layout: KptDataViewLayout) => void;

package/dist/data-view/llms.txt

@@ -0,0 +1,49 @@
+# KptDataView (@konce-pt/react)
+
+A list of items in a list or grid layout, with optional pagination.
+Import: `import { KptDataView } from '@konce-pt/react';`
+
+## DOM
+    <div class="kpt-data-view-host">
+      <div class="kpt-data-view">
+        <div class="kpt-data-view__toolbar">
+          <div class="kpt-data-view__count">8 items</div>
+          <div class="kpt-data-view__switch">…list, grid…</div>
+        </div>
+        <div class="kpt-data-view__content" data-layout="grid">
+          <div class="kpt-data-view__item">…</div>
+        </div>
+        <!-- KptPaginator -->
+      </div>
+    </div>
+
+## Props
+- `items`: `T[]`
+- `layout` / `defaultLayout` / `onLayoutChange` — `'list' | 'grid'` (default `'grid'`)
+- `pageSize`: number — 0 turns pagination off
+- `paginated`: boolean (default true)
+- `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## The layout is an attribute
+`data-layout` on the content switches the grid rules; the toolbar only flips it. Everything else —
+the item's markup — is the caller's, which is why there are no card props here.
+
+## The pager appears when it is needed
+Only when `paginated`, `pageSize > 0` and there are more items than fit on a page — a paginator
+under a single page of results is noise.
+
+## Examples
+    <KptDataView items={products} pageSize={6} renderItem={(p) => <div>{p.name}</div>} />
+    <KptDataView items={products} layout="list" paginated={false} renderItem={renderCard} />
+
+## i18n
+The count and the two switch buttons come from the `dataView` namespace (`count` with `{count}`,
+`list`, `grid`, `empty`).
+
+## Tokens
+The grid gap `--kpt-space-4`, the active switch `--kpt-color-primary`.
+
+## Accessibility
+Both layout buttons carry labels from the dictionary; an empty list renders a message instead of
+a bare empty area.

package/dist/date-range/llms.txt

@@ -0,0 +1,54 @@
+# KptDateRange (@konce-pt/react)
+
+Picking a date (and time) range with a calendar.
+Import: `import { KptDateRange, type KptDateRangeValue } from '@konce-pt/react';`
+
+## DOM
+    <div class="kpt-date-range-host">
+      <div class="kpt-date-range" role="button" tabindex="0">
+        <span class="kpt-date-range__value">08.09.2026 – 14.09.2026</span>
+        …clear, icon…
+      </div>
+    </div>
+    <!-- in a portal: <div class="kpt-calendar kpt-calendar--range kpt-calendar--multi">…</div> -->
+
+## Props
+- `value` / `defaultValue` / `onValueChange` — `{ start, end }`: dates 'YYYY-MM-DD',
+  datetime 'YYYY-MM-DDTHH:mm', times 'HH:mm'
+- `mode`: `'date'` (default) | `'datetime'` | `'time'`
+- `visibleMonths`: number (default 1, clamped to 1–3) — months side by side; ignored in 'time' mode
+- `hourFormat`: 12 | 24 (default 24); `minuteStep`: number (default 1)
+- `placeholder` — without one it falls back to `dateRange.placeholder`
+- `displayFormat`: `'pl'` (default) | `'iso'`
+- `disabled`, `invalid`, `touched`, `onTouch()`
+- `className`, `ref` and every other `<div>` prop go to the host
+
+## Two clicks, one band
+The first click sets `start`, the second `end`, a third starts over; clicking before the start
+normalizes the order rather than producing a reversed range (`pickRangeDay` in `@konce-pt/datetime`).
+The panel stays open until the range closes — the second click needs somewhere to land.
+
+With several panels the adjacent-month days become blank slots: otherwise the same date would be
+clickable twice, and the band would paint in both places.
+
+## The clock remounts when the end switches
+`key={timeEnd}` on `KptClock`, so the dial returns to the hours stage after the From/To toggle —
+in Angular that came for free from two separate template branches.
+
+## Examples
+    <KptDateRange value={period} onValueChange={setPeriod} />
+    <KptDateRange visibleMonths={2} value={period} onValueChange={setPeriod} />
+    <KptDateRange mode="datetime" hourFormat={12} value={span} onValueChange={setSpan} />
+    <KptDateRange mode="time" value={hours} onValueChange={setHours} />
+
+## i18n
+Day and month names come from `Intl`; "From/To", the navigation, "Done" and the placeholder come
+from the `dateRange`, `datepicker` and `common` namespaces.
+
+## Tokens
+The field `--kpt-form-field-*`; the calendar `--kpt-color-surface-raised`, the range
+`--kpt-color-primary`.
+
+## Accessibility
+The trigger is `role="button"` with Enter support; the days are real buttons, and the time ends are
+switched with a two-button toggle rather than a custom control.