@konce-pt/angular 0.1.0

package/dist/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@konce-pt/angular",
+  "version": "0.0.0",
+  "description": "Komponenty Koncept UI dla Angular 22 (sygnały, Signal Forms). Selektory kpt-*, klasy Kpt*.",
+  "license": "MIT",
+  "author": "konce.pt",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "module": "fesm2022/konce-pt-angular.mjs",
+  "types": "./dist/types/konce-pt-angular.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/konce-pt-angular.d.ts",
+      "default": "./fesm2022/konce-pt-angular.mjs"
+    },
+    "./icons": {
+      "types": "./types/konce-pt-angular-icons.d.ts",
+      "default": "./fesm2022/konce-pt-angular-icons.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/dist"
+        ],
+        "cache": true
+      }
+    }
+  },
+  "typings": "types/konce-pt-angular.d.ts",
+  "type": "module"
+}

package/dist/src/lib/accordion/llms.txt

@@ -0,0 +1,18 @@
+# KptAccordion (kpt-accordion) + KptAccordionPanel (kpt-accordion-panel)
+
+Akordeon — grupa rozwijanych paneli.
+Import: `import { KptAccordion, KptAccordionPanel } from '@konce-pt/angular';`
+
+## KptAccordion
+- `multi`: boolean — pozwala otworzyć wiele naraz (domyślnie: tylko jeden)
+
+## KptAccordionPanel
+- `title`: string (wymagane); `disabled`: boolean; `expanded`: model<boolean>
+
+## Przykład
+    <kpt-accordion>
+      <kpt-accordion-panel title="Sekcja 1" [expanded]="true">…</kpt-accordion-panel>
+      <kpt-accordion-panel title="Sekcja 2">…</kpt-accordion-panel>
+    </kpt-accordion>
+
+Koordynacja single/multi: panel woła rodzica przez inject(KptAccordion).

package/dist/src/lib/alert/llms.txt

@@ -0,0 +1,19 @@
+# KptAlert (kpt-alert)
+
+Komunikat inline. Warianty info/success/warning/danger, tytuł, zamykanie.
+Import: `import { KptAlert } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-alert`
+
+## Wejścia / wyjścia
+- `variant`: 'info'|'success'|'warning'|'danger' (domyślnie 'info')
+- `title`: string; `dismissible`: boolean (przycisk ×)
+- `closed`: output<void>
+
+## Przykład
+    <kpt-alert variant="success" title="Zapisano">Zmiany zapisane.</kpt-alert>
+    <kpt-alert variant="danger" dismissible (closed)="onClose()">Błąd.</kpt-alert>
+
+## Tokeny
+Akcent z `--kpt-color-{info,success,warning,danger}`; tło color-mix na `--kpt-color-surface`.

package/dist/src/lib/app-shell/llms.txt

@@ -0,0 +1,29 @@
+# KptAppShell (kpt-app-shell)
+
+Szkielet aplikacji w stylu Material: toolbar u góry, panel boczny, treść.
+Import: `import { KptAppShell } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-app-shell`
+
+## Wejścia / wyjścia
+- `sidenavOpen`: model<boolean> (domyślnie true) — dwukierunkowe `[(sidenavOpen)]`
+- `sidenavMode`: 'side' | 'over' (domyślnie 'side'); 'over' nakłada panel ze scrimem
+
+## Sloty projekcji
+- `[kptShellToolbar]` → pasek u góry
+- `[kptShellSidenav]` → panel boczny
+- treść domyślna → obszar główny
+
+## Przykład
+    <kpt-app-shell [(sidenavOpen)]="navOpen" sidenavMode="side">
+      <kpt-toolbar kptShellToolbar>
+        <kpt-button variant="text" (click)="navOpen.set(!navOpen())">☰</kpt-button>
+      </kpt-toolbar>
+      <kpt-sidenav kptShellSidenav>…</kpt-sidenav>
+      <router-outlet />
+    </kpt-app-shell>
+
+## Zachowanie
+- 'side': zamknięty panel chowa się (ujemny margines) i rozpycha treść.
+- 'over': panel absolutny z `translateX`, klik w scrim zamyka. Szerokość: `--kpt-sidenav-width`.

package/dist/src/lib/autocomplete/llms.txt

@@ -0,0 +1,16 @@
+# KptAutocomplete (kpt-autocomplete)
+
+Pole z podpowiedziami na CDK Overlay, Signal Forms. Wartość = wpisany tekst.
+Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
+Import: `import { KptAutocomplete } from '@konce-pt/angular';`
+
+## Wejścia
+- `value`: model<string>; `options`: string[]; `placeholder`: string
+- `disabled`/`invalid`/`touched`: boolean; `touch`: output
+- Klawiatura: ↑/↓ nawigacja, Enter wybiera, Esc zamyka.
+
+## Przykład
+    <kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="Miasto…" />
+
+## Tokeny
+`--kpt-form-field-*`, panel `--kpt-color-surface-raised`.

package/dist/src/lib/avatar/llms.txt

@@ -0,0 +1,15 @@
+# KptAvatar (kpt-avatar)
+
+Awatar — obraz, inicjały (z `name`) lub ikona. Import: `import { KptAvatar } from '@konce-pt/angular';`
+
+## Wejścia
+- `src`: string|null (obraz); `name`: string (inicjały, do 2 liter); `icon`: string|null
+- `size`: 'sm'|'md'|'lg'|'xl'; `shape`: 'circle'|'square'
+
+## Przykłady
+    <kpt-avatar src="/u/anna.jpg" />
+    <kpt-avatar name="Anna Kowalska" size="lg" />
+    <kpt-avatar icon="user" shape="square" />
+
+## Tokeny
+`--kpt-color-muted`, `--kpt-color-on-muted`, `--kpt-radius-full`/`--kpt-radius-md`.

package/dist/src/lib/avatar-group/llms.txt

@@ -0,0 +1,15 @@
+# KptAvatarGroup (kpt-avatar-group)
+
+Grupa nakładających się awatarów z licznikiem „+N". Buduje na `kpt-avatar`.
+Import: `import { KptAvatarGroup } from '@konce-pt/angular';`
+
+## Wejścia
+- `avatars`: KptAvatarItem[] — { name?, src?, icon? }
+- `max`: number (domyślnie 4) — ile pokazać przed „+N"
+- `size`: 'sm' | 'md' | 'lg' | 'xl'
+
+## Przykład
+    <kpt-avatar-group [avatars]="team" [max]="4" />
+
+## Tokeny
+Nakładka z obwódką `--kpt-color-surface`; „+N" `--kpt-color-muted`.

package/dist/src/lib/badge/llms.txt

@@ -0,0 +1,16 @@
+# KptBadge (kpt-badge)
+
+Znacznik — licznik lub kropka statusu; standalone lub nałożony na treść (`overlay`).
+Import: `import { KptBadge } from '@konce-pt/angular';`
+
+## Wejścia
+- `value`: string|number|null; `variant`: 'neutral'|'primary'|'success'|'danger'|'warning'|'info'
+- `dot`: boolean (kropka bez liczby); `overlay`: boolean (róg treści); `max`: number (domyślnie 99 → '99+')
+
+## Przykłady
+    <kpt-badge [value]="3" variant="danger" />
+    <kpt-badge [value]="128" overlay><kpt-icon name="menu" /></kpt-badge>
+    <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
+
+## Tokeny
+`--kpt-color-{primary,muted,success,danger,warning,info}`, obwódka overlay z `--kpt-color-surface`.

package/dist/src/lib/bottom-sheet/llms.txt

@@ -0,0 +1,16 @@
+# KptBottomSheet (kpt-bottom-sheet)
+
+Arkusz wysuwany z dołu ekranu. Sterowany sygnałem `open`, z uchwytem i backdrop.
+Import: `import { KptBottomSheet } from '@konce-pt/angular';`
+
+## Wejścia / model
+- `open`: model<boolean> (dwukierunkowe)
+- `header`: string; `closeOnBackdrop`: boolean
+- Treść przez projekcję.
+
+## Przykład
+    <kpt-button (click)="sheetOpen.set(true)">Udostępnij</kpt-button>
+    <kpt-bottom-sheet [(open)]="sheetOpen" header="Udostępnij">…</kpt-bottom-sheet>
+
+## Tokeny
+Panel `--kpt-color-surface-raised`, zaokrąglenie górne `--kpt-radius-lg`, `--kpt-elevation-4`.

package/dist/src/lib/breadcrumb/llms.txt

@@ -0,0 +1,12 @@
+# KptBreadcrumb (kpt-breadcrumb)
+
+Ścieżka nawigacji. Import: `import { KptBreadcrumb, KptBreadcrumbItem } from '@konce-pt/angular';`
+
+## Wejścia
+- `items`: KptBreadcrumbItem[] `{ label: string; url?: string }` (element bez `url` lub ostatni = bieżąca strona)
+
+## Przykład
+    <kpt-breadcrumb [items]="[{label:'Start',url:'/'},{label:'Ustawienia',url:'/s'},{label:'Profil'}]" />
+
+## Tokeny
+Separator ikoną `chevron-right`; linki `--kpt-color-on-surface-muted` → hover `--kpt-color-primary`.

package/dist/src/lib/button/llms.txt

@@ -0,0 +1,35 @@
+# KptButton (kpt-button)
+
+Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza).
+Standalone, OnPush, sygnały. Import: `import { KptButton } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-button`
+
+## Wejścia (input signals)
+- `variant`: 'filled' | 'tonal' | 'outline' | 'text' | 'danger' (domyślnie 'filled')
+- `size`: 'sm' | 'md' | 'lg' (domyślnie 'md')
+- `type`: 'button' | 'submit' | 'reset' (domyślnie 'button')
+- `disabled`: boolean (booleanAttribute)
+- `loading`: boolean — spinner + blokada interakcji, ustawia aria-busy
+- `fullWidth`: boolean — pełna szerokość kontenera
+
+## Zdarzenia
+Brak własnych — natywny `click` bąbelkuje z wewnętrznego `<button>`; wiąż `(click)` na `<kpt-button>`.
+
+## Przykłady
+    <kpt-button (click)="save()">Zapisz</kpt-button>
+    <kpt-button variant="outline" size="sm">Anuluj</kpt-button>
+    <kpt-button variant="danger" [loading]="deleting()">Usuń</kpt-button>
+    <form (submit)="onSubmit()"><kpt-button type="submit">Wyślij</kpt-button></form>
+
+## Tokeny (stylowanie)
+`--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}`.
+Wariant 'danger' korzysta z `--kpt-color-danger` / `--kpt-color-on-danger`.
+
+## Dostępność
+- Natywny `<button>` — pełna obsługa klawiatury i czytników.
+- `loading` ustawia `aria-busy="true"` i blokuje przycisk (`disabled`).
+- Pierścień fokusa z `@konce-pt/styles` (`--kpt-color-focus-ring`).

package/dist/src/lib/button-group/llms.txt

@@ -0,0 +1,14 @@
+# KptButtonGroup (kpt-button-group)
+
+Segmentowana grupa przycisków (toggle, pojedynczy wybór). Signal Forms.
+Import: `import { KptButtonGroup, KptOption } from '@konce-pt/angular';`
+
+## Wejścia
+- `options`: KptOption<T>[]; `value`: model<T>; `size`: 'sm'|'md'|'lg'; `disabled`/`invalid`/`touched`; `touch`
+
+## Przykłady
+    <kpt-button-group [(value)]="view" [options]="[{label:'Lista',value:'list'},{label:'Siatka',value:'grid'}]" />
+    <kpt-button-group [formField]="f.period" [options]="periods" />
+
+## Tokeny
+`--kpt-color-primary`, `--kpt-color-border-strong`, `--kpt-color-muted`.

package/dist/src/lib/card/llms.txt

@@ -0,0 +1,24 @@
+# KptCard (kpt-card)
+
+Karta — powierzchnia z wyniesieniem (elevated) lub obramowaniem (outlined).
+Import: `import { KptCard } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-card`
+
+## Wejścia
+- `variant`: 'elevated' | 'outlined' (domyślnie 'elevated')
+- `header`: string — opcjonalny tekst nagłówka
+
+## Projekcja
+- treść domyślna → body karty
+- element z atrybutem `kptCardFooter` (bezpośrednie dziecko `kpt-card`) → stopka
+
+## Przykład
+    <kpt-card header="Ustawienia" variant="outlined">
+      <p>Treść…</p>
+      <div kptCardFooter><kpt-button>Zapisz</kpt-button></div>
+    </kpt-card>
+
+## Tokeny
+`--kpt-card-{bg,fg,border,radius,padding,shadow}`.

package/dist/src/lib/carousel/llms.txt

@@ -0,0 +1,24 @@
+# KptCarousel (kpt-carousel)
+
+Karuzela slajdów (generyczna). Import: `import { KptCarousel } from '@konce-pt/angular';`
+Dane przez `items`, szablon slajdu przez projekcję `<ng-template let-item>`.
+
+## Wejścia / model
+- `items`: T[] — dane slajdów
+- `activeIndex`: model<number> (domyślnie 0) — dwukierunkowy indeks aktywnego slajdu
+
+## Projekcja
+- `<ng-template let-item let-i="index">` — szablon pojedynczego slajdu; kontekst: `$implicit` = item, `index`.
+
+## Metody
+- `next()`, `prev()`, `goTo(index)`
+
+## Przykład
+    <kpt-carousel [items]="photos">
+      <ng-template let-photo>
+        <img [src]="photo" style="width:100%" />
+      </ng-template>
+    </kpt-carousel>
+
+## Tokeny
+Nawigacja/kropki `--kpt-color-primary`; tło strzałek `--kpt-color-surface-raised`.

package/dist/src/lib/checkbox/llms.txt

@@ -0,0 +1,15 @@
+# KptCheckbox (kpt-checkbox)
+
+Pole wyboru na Signal Forms (`FormCheckboxControl`, model `checked`).
+Import: `import { KptCheckbox } from '@konce-pt/angular';`
+
+## Użycie
+    <kpt-checkbox [formField]="f.terms" label="Akceptuję regulamin" />
+
+## Wejścia
+- `checked`: model<boolean> (kontrakt FormCheckboxControl)
+- `label`: string
+- `disabled` / `invalid` / `touched`: boolean (wiąże FormField); output `touch` (blur)
+
+## Tokeny
+`--kpt-color-primary`, `--kpt-color-on-primary`, `--kpt-form-field-border`, `--kpt-form-field-border-error`.

package/dist/src/lib/chip/llms.txt

@@ -0,0 +1,14 @@
+# KptChip (kpt-chip)
+
+Chip / tag — etykieta, opcjonalnie usuwalna. Import: `import { KptChip } from '@konce-pt/angular';`
+
+## Wejścia / wyjścia
+- `variant`: 'neutral'|'primary'|'success'|'danger'|'warning'|'info'
+- `removable`: boolean (przycisk ×); `disabled`: boolean; `removed`: output<void>
+
+## Przykłady
+    <kpt-chip>Angular</kpt-chip>
+    <kpt-chip variant="success" removable (removed)="onRemove()">UI</kpt-chip>
+
+## Tokeny
+Tło color-mix na wariancie, `--kpt-color-muted` (neutral).

package/dist/src/lib/chips-input/llms.txt

@@ -0,0 +1,18 @@
+# KptChipsInput (kpt-chips-input)
+
+Pole tagów — dodawanie Enter/przecinkiem, usuwanie Backspace/×. Signal Forms.
+Wartość = string[]. Renderuje elementy przez `kpt-chip`.
+Import: `import { KptChipsInput } from '@konce-pt/angular';`
+
+## Wejścia / model
+- `value`: model<string[]> (lub `formField`)
+- `placeholder`: string
+- `allowDuplicates`: boolean (domyślnie false)
+- `disabled`/`invalid`/`touched`: boolean; `touch`: output
+
+## Przykład
+    <kpt-chips-input [formField]="f.tags" placeholder="Dodaj tag…" />
+    <kpt-chips-input [(value)]="tags" />
+
+## Tokeny
+Pole `--kpt-form-field-*`; tagi dziedziczą z `kpt-chip`.

package/dist/src/lib/color-picker/llms.txt

@@ -0,0 +1,18 @@
+# KptColorPicker (kpt-color-picker)
+
+Wybór koloru (swatch + hex + presety) na Signal Forms. Wartość = hex, np. '#3b82f6'.
+Import: `import { KptColorPicker } from '@konce-pt/angular';`
+
+## Wejścia / model
+- `value`: model<string> (lub `formField`) — kolor hex
+- `presets`: string[] — paleta szybkiego wyboru (domyślnie 8 kolorów)
+- `disabled`/`invalid`/`touched`: boolean; `touch`: output
+
+## Przykład
+    <kpt-color-picker [formField]="f.brand" />
+    <kpt-color-picker [(value)]="color" [presets]="['#ef4444','#3b82f6']" />
+
+    color = signal('#3b82f6');
+
+## Tokeny
+Obramowanie `--kpt-form-field-border`; aktywny preset `--kpt-color-primary`.

package/dist/src/lib/confirm/llms.txt

@@ -0,0 +1,21 @@
+# KptConfirm (KptConfirmService + kpt-confirm-container)
+
+Serwis potwierdzeń oparty na `kpt-dialog`. Wzór jak `KptToastService`.
+Import: `import { KptConfirmService, KptConfirmContainer } from '@konce-pt/angular';`
+
+## Użycie
+1. Umieść `<kpt-confirm-container />` raz w aplikacji (obok `<kpt-toast-container />`).
+2. Wstrzyknij `KptConfirmService` i wywołaj `confirm(options)` → Promise<boolean>.
+
+## KptConfirmOptions
+- `message`: string (wymagane); `header?`: string
+- `acceptLabel?`/`rejectLabel?`: string; `variant?`: 'filled' | 'danger'; `icon?`: string
+
+## Przykład
+    const ok = await this.confirm.confirm({
+      message: 'Usunąć rekord?', variant: 'danger', acceptLabel: 'Usuń', icon: 'alert-triangle',
+    });
+    if (ok) { /* ... */ }
+
+## Tokeny
+Dziedziczy z `kpt-dialog`; ikona wg wariantu (`--kpt-color-danger` / `--kpt-color-primary`).

package/dist/src/lib/context-menu/llms.txt

@@ -0,0 +1,17 @@
+# KptContextMenu (kpt-context-menu)
+
+Menu kontekstowe (prawy przycisk myszy) na obszarze projekcji. Panel pozycjonowany do kursora.
+Import: `import { KptContextMenu } from '@konce-pt/angular';`
+
+## Wejścia / wyjścia
+- `items`: KptMenuItem<T>[] — { label, icon?, danger?, disabled?, separator? }
+- `select`: KptMenuItem<T> — wybór pozycji
+- Obszar reagujący na PPM przez projekcję `<ng-content>`.
+
+## Przykład
+    <kpt-context-menu [items]="items" (select)="onSelect($event)">
+      <div class="obszar">Kliknij prawym przyciskiem</div>
+    </kpt-context-menu>
+
+## Tokeny
+Panel `--kpt-color-surface-raised`, `--kpt-elevation-3`.

package/dist/src/lib/data-table/llms.txt

@@ -0,0 +1,62 @@
+# KptDataTable (kpt-data-table)
+
+Flagowa tabela danych (w duchu PrimeNG): kolumny konfiguracją, sortowanie, filtr globalny,
+paginacja, zaznaczanie wierszy i własne szablony komórek. Sygnałowa, OnPush.
+Import: `import { KptDataTable, KptColumn, KptCellDef } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-data-table`
+
+## Model kolumny (KptColumn)
+`{ field: string; header: string; sortable?: boolean; align?: 'start'|'center'|'end'; width?: string; frozen?: boolean }`
+Kolumny `frozen` (wiodące, sąsiadujące) przyklejają się przy poziomym przewijaniu — wymagają `width`.
+
+## Wejścia
+- `columns`: KptColumn[] (wymagane)
+- `data`: T[] (domyślnie [])
+- `filterable`: boolean — pole filtra globalnego
+- `pageSize`: number — 0 wyłącza paginację
+- `pageSizeOptions`: number[] (domyślnie [5,10,20,50])
+- `selectable`: 'none' | 'single' | 'multiple'
+- `loading`: boolean — wiersz „Ładowanie…"
+- `emptyMessage`: string (domyślnie „Brak danych")
+- `rowKey`: string | null — pole identyfikujące wiersz (dla zaznaczania); bez niego porównanie po referencji
+- `reorderable`: boolean — przestawianie kolumn przeciągnij-i-upuść (natywny HTML5 DnD)
+- `exportable`: boolean — przycisk „Eksport CSV" w toolbarze
+- `exportFilename`: string (domyślnie 'export.csv')
+- `lazy`: boolean — tryb serwerowy (bez filtr/sort/paginacji po stronie klienta)
+- `totalRecords`: number | null — łączna liczba rekordów (wymagane przy lazy)
+- `scrollHeight`: string | null — wysokość przewijalnego obszaru (np. '400px'); sticky header pozostaje
+- `virtualScroll`: boolean — wirtualizacja wierszy (renderuje tylko widoczne); wymaga `scrollHeight`
+- `rowHeight`: number — stała wysokość wiersza w px (domyślnie 41), potrzebna przy virtualScroll
+
+## Model / zdarzenia
+- `selection`: model<T[]> — dwukierunkowe `[(selection)]`
+- `rowClick`: output<T>
+- `lazyLoad`: output<KptTableLazyState> — { pageIndex, pageSize, sortField, sortDir, filter }; emitowane w trybie lazy przy każdej zmianie stanu
+
+## Eksport / metody
+- `exportCsv()`: publiczna metoda — eksportuje bieżące (filtr+sort) dane do CSV (separator `;`, BOM dla Excela).
+
+## Własne szablony komórek (dyrektywa kptCell)
+Kontekst: `$implicit` = wiersz, `value` = wartość pola.
+
+    <kpt-data-table [columns]="cols" [data]="rows" filterable [pageSize]="10"
+                    selectable="multiple" rowKey="id" [(selection)]="picked">
+      <ng-template kptCell="status" let-row let-value="value">
+        <span class="badge">{{ value }}</span>
+      </ng-template>
+    </kpt-data-table>
+
+## Zachowanie
+- Sortowanie: klik w nagłówek sortowalnej kolumny cyklicznie asc → desc → brak.
+- Filtr: dopasowanie tekstu we wszystkich polach kolumn; reset strony do 0.
+- Zaznaczanie 'multiple': nagłówkowy checkbox zaznacza/odznacza bieżącą stronę.
+- Sticky header, stany pusty/ładowanie, wyrównanie i szerokości per kolumna.
+
+## Tokeny
+`--kpt-table-{bg,fg,border,radius,header-bg,header-fg,row-hover,row-selected,cell-padding}`.
+Paginacja: komponent `kpt-paginator`.
+
+## Do zrobienia (roadmap)
+Kolumny grupowane, edycja komórek inline, wiersze rozwijane.

package/dist/src/lib/data-view/llms.txt

@@ -0,0 +1,18 @@
+# KptDataView (kpt-data-view)
+
+Prezentacja listy elementów w układzie lista/siatka, z opcjonalną paginacją (reuse `kpt-paginator`).
+Szablon elementu przez projekcję `<ng-template let-item>`.
+Import: `import { KptDataView } from '@konce-pt/angular';`
+
+## Wejścia / model
+- `items`: T[]
+- `layout`: model<'list' | 'grid'> (przełącznik w pasku)
+- `pageSize`: number (0 = bez paginacji); `paginated`: boolean
+
+## Przykład
+    <kpt-data-view [items]="products" [pageSize]="6">
+      <ng-template let-p><div>{{ p.name }}</div></ng-template>
+    </kpt-data-view>
+
+## Tokeny
+Karty elementów `--kpt-color-surface-raised`; przełącznik `--kpt-color-primary`.

package/dist/src/lib/date-range/llms.txt

@@ -0,0 +1,24 @@
+# KptDateRange (kpt-date-range)
+
+Wybór zakresu dat z kalendarzem (CDK Overlay) na Signal Forms.
+Wartość: `{ start: 'RRRR-MM-DD', end: 'RRRR-MM-DD' }` (KptDateRangeValue).
+Import: `import { KptDateRange, KptDateRangeValue } from '@konce-pt/angular';`
+Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
+
+## Wejścia / model
+- `value`: model<KptDateRangeValue> (lub `formField`)
+- `placeholder`: string (domyślnie 'Wybierz zakres')
+- `disabled`/`invalid`/`touched`: boolean; `touch`: output
+
+## Zachowanie
+Pierwszy klik ustawia `start`, drugi `end` (kolejność jest normalizowana). Zakres podświetlany;
+przycisk „×" czyści wartość.
+
+## Przykład
+    <kpt-date-range [formField]="f.period" />
+    <kpt-date-range [(value)]="period" />
+
+    period = signal<KptDateRangeValue>({ start: '', end: '' });
+
+## Tokeny
+Pole `--kpt-form-field-*`; kalendarz `--kpt-color-surface-raised`, zakres `--kpt-color-primary`.

package/dist/src/lib/datepicker/llms.txt

@@ -0,0 +1,17 @@
+# KptDatepicker (kpt-datepicker)
+
+Wybór daty z własnym kalendarzem (CDK Overlay), Signal Forms. Wartość ISO 'RRRR-MM-DD',
+wyświetlana jako 'DD.MM.RRRR'. Tydzień od poniedziałku, dziś zaznaczone, zakres min/max.
+Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
+Import: `import { KptDatepicker } from '@konce-pt/angular';`
+
+## Użycie
+    <kpt-datepicker [formField]="f.birthDate" minDate="1900-01-01" maxDate="2030-12-31" />
+
+## Wejścia
+- `value`: model<string> (ISO); `minDate`/`maxDate`: string|null; `placeholder`: string
+- `disabled`/`invalid`/`touched`: boolean; output `touch`.
+- Panel: nawigacja miesięcy (‹ ›), przycisk czyszczenia (×).
+
+## Tokeny
+`--kpt-form-field-{bg,text,border,border-focus,border-error,radius}`.

package/dist/src/lib/dialog/llms.txt

@@ -0,0 +1,27 @@
+# KptDialog (kpt-dialog)
+
+Okno modalne na natywnym `<dialog>` (focus trap, Esc, backdrop w standardzie).
+Import: `import { KptDialog } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-dialog`
+
+## Wejścia
+- `open`: model<boolean> — dwukierunkowe `[(open)]`
+- `header`: string; `dismissible`: boolean (Esc/× zamyka; domyślnie true)
+
+## Sloty
+- treść domyślna → body; element z atrybutem `kptDialogFooter` → stopka
+
+## Przykład
+    <kpt-dialog [(open)]="confirmOpen" header="Usunąć?">
+      Nieodwracalne.
+      <div kptDialogFooter>
+        <kpt-button variant="text" (click)="confirmOpen.set(false)">Anuluj</kpt-button>
+        <kpt-button variant="danger" (click)="remove()">Usuń</kpt-button>
+      </div>
+    </kpt-dialog>
+
+## Tokeny
+`--kpt-color-surface-raised`, `--kpt-color-overlay-scrim` (::backdrop), `--kpt-elevation-4`.
+Uwaga: globalny reset zeruje margin — komponent przywraca `margin:auto` (centrowanie).

package/dist/src/lib/divider/llms.txt

@@ -0,0 +1,19 @@
+# KptDivider (kpt-divider)
+
+Separator (linia pozioma lub pionowa). `role="separator"`.
+Import: `import { KptDivider } from '@konce-pt/angular';`
+
+## Selektor
+`kpt-divider`
+
+## Wejścia
+- `orientation`: 'horizontal' | 'vertical' (domyślnie 'horizontal')
+- `inset`: boolean — odstęp od krawędzi kontenera
+
+## Przykład
+    <kpt-divider />
+    <kpt-divider inset />
+    <kpt-divider orientation="vertical" />   <!-- w kontenerze flex -->
+
+## Tokeny
+Kolor z `--kpt-color-border`. Pionowy wymaga rodzica flex (align-self: stretch).

package/dist/src/lib/drawer/llms.txt

@@ -0,0 +1,17 @@
+# KptDrawer (kpt-drawer)
+
+Panel wysuwany (drawer / off-canvas) sterowany sygnałem `open`. Niezależny od app-shell
+(pozycja fixed + backdrop, animacja transform). Import: `import { KptDrawer } from '@konce-pt/angular';`
+
+## Wejścia / model
+- `open`: model<boolean> (dwukierunkowe)
+- `position`: 'left' | 'right' | 'top' | 'bottom' (KptDrawerPosition)
+- `header`: string; `dismissible`: boolean (× i Esc); `closeOnBackdrop`: boolean
+- Treść przez projekcję `<ng-content>`.
+
+## Przykład
+    <kpt-button (click)="menuOpen.set(true)">Menu</kpt-button>
+    <kpt-drawer [(open)]="menuOpen" position="right" header="Filtry">…</kpt-drawer>
+
+## Tokeny
+Panel `--kpt-color-surface-raised`, `--kpt-elevation-4`; backdrop półprzezroczysty.

package/dist/src/lib/empty/llms.txt

@@ -0,0 +1,17 @@
+# KptEmpty (kpt-empty)
+
+Stan pusty (empty state) — ikona, tytuł, opis i opcjonalne akcje (projekcja).
+Import: `import { KptEmpty } from '@konce-pt/angular';`
+
+## Wejścia
+- `icon`: string | null (domyślnie 'info-circle')
+- `title`: string; `description`: string
+- Akcje: `<ng-content>` (np. przyciski).
+
+## Przykład
+    <kpt-empty icon="search" title="Brak wyników" description="Zmień kryteria.">
+      <kpt-button>Wyczyść filtry</kpt-button>
+    </kpt-empty>
+
+## Tokeny
+Ikona w kółku `--kpt-color-muted`; tekst `--kpt-color-on-surface(-muted)`.