@konce-pt/angular 0.4.0 → 0.6.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
   "license": "MIT",
   "author": "konce.pt",
@@ -43,6 +43,14 @@
       "types": "./types/konce-pt-angular-icons.d.ts",
       "default": "./fesm2022/konce-pt-angular-icons.mjs"
     },
+    "./charts": {
+      "types": "./types/konce-pt-angular-charts.d.ts",
+      "default": "./fesm2022/konce-pt-angular-charts.mjs"
+    },
+    "./grid": {
+      "types": "./types/konce-pt-angular-grid.d.ts",
+      "default": "./fesm2022/konce-pt-angular-grid.mjs"
+    },
     "./package.json": {
       "default": "./package.json"
     }

package/dist/types/konce-pt-angular-charts.d.ts

@@ -0,0 +1,356 @@
+import * as _konce_pt_angular_charts from '@konce-pt/angular/charts';
+import * as _angular_core from '@angular/core';
+
+type KptChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'polarArea' | 'radar';
+/** Tryb interpolacji linii dla wykresu liniowego. */
+type KptLineInterpolation = 'linear' | 'cubic' | 'cubic-monotonic';
+/** Orientacja słupków. */
+type KptBarOrientation = 'vertical' | 'horizontal';
+/** Pojedyncza seria danych. Kolejność wartości odpowiada `labels`. */
+interface KptChartSeries {
+    /** Nazwa serii (legenda, tooltip). */
+    name: string;
+    /** Wartości; długość zwykle równa liczbie etykiet. */
+    data: number[];
+    /** Kolor (CSS). Domyślnie z palety tokenów. */
+    color?: string;
+}
+type KptLegendPosition = 'top' | 'bottom' | 'left' | 'right';
+type KptAlign = 'start' | 'center' | 'end';
+type KptPointStyle = 'circle' | 'rect' | 'rectRot' | 'triangle' | 'line';
+interface KptLegendTitle {
+    display?: boolean;
+    text?: string;
+    position?: KptAlign;
+}
+interface KptLegendOptions {
+    display?: boolean;
+    position?: KptLegendPosition;
+    align?: KptAlign;
+    pointStyle?: KptPointStyle;
+    title?: KptLegendTitle;
+}
+interface KptFont {
+    family?: string;
+    size?: number;
+    weight?: string | number;
+}
+interface KptPadding {
+    top?: number;
+    bottom?: number;
+}
+interface KptTitleOptions {
+    display?: boolean;
+    text?: string;
+    align?: KptAlign;
+    color?: string;
+    font?: KptFont;
+    padding?: KptPadding;
+}
+/** Kontekst przekazywany do formatera tooltipa. */
+interface KptTooltipContext {
+    series: string;
+    label: string;
+    value: number;
+}
+interface KptTooltipOptions {
+    enabled?: boolean;
+    format?: (ctx: KptTooltipContext) => string;
+}
+interface KptAnimationOptions {
+    enabled?: boolean;
+    /** Czas trwania w ms (domyślnie 400). */
+    duration?: number;
+    /** Opóźnienie startu w ms (domyślnie 0). */
+    delay?: number;
+    /** Przesunięcie kolejnych elementów w ms (`delay = index * stagger`). */
+    stagger?: number;
+}
+/** Pełna konfiguracja wykresu. Jeden kształt dla wszystkich typów. */
+interface KptChartConfig {
+    type: KptChartType;
+    /** Etykiety osi kategorii / wycinków. */
+    labels: string[];
+    series: KptChartSeries[];
+    /** Bar: orientacja słupków (domyślnie 'vertical'). */
+    orientation?: KptBarOrientation;
+    /** Line: tryb interpolacji (domyślnie 'linear'). */
+    interpolation?: KptLineInterpolation;
+    /** Line: wypełnienie obszaru pod linią. */
+    area?: boolean;
+    /** Line: punkty danych widoczne (domyślnie true). */
+    points?: boolean;
+    /** Line: pionowa prowadnica + podświetlona etykieta osi X przy hoverze punktu. */
+    crosshair?: boolean;
+    /** Doughnut/PolarArea/Radar: promień wewnętrzny 0..1 (doughnut, domyślnie 0.6). */
+    innerRadius?: number;
+    /** Bar: promień zaokrąglenia rogów w px (domyślnie 4). */
+    borderRadius?: number;
+    animation?: KptAnimationOptions;
+    legend?: KptLegendOptions;
+    title?: KptTitleOptions;
+    subtitle?: KptTitleOptions;
+    tooltip?: KptTooltipOptions;
+}
+/** Punkt w układzie SVG. */
+interface KptPoint {
+    x: number;
+    y: number;
+}
+/** Prostokąt obszaru rysowania (plot area). */
+interface KptRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+interface KptChartLegendItem {
+    key: string;
+    name: string;
+    color: string;
+    hidden: boolean;
+}
+
+interface KptChartTooltipRow {
+    name: string;
+    value: string;
+    color: string;
+}
+interface KptChartTooltipState {
+    /** Pozycja pozioma w % szerokości kontenera (0..100). */
+    x: number;
+    /** Pozycja pionowa w % wysokości kontenera (0..100). */
+    y: number;
+    label: string;
+    rows: KptChartTooltipRow[];
+}
+
+interface AxisLabel {
+    x: number;
+    y: number;
+    text: string;
+    anchor: 'start' | 'middle' | 'end';
+}
+interface GridLine {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+interface LinePoint {
+    x: number;
+    y: number;
+    value: number;
+    label: string;
+}
+interface LineSeriesVm {
+    key: string;
+    name: string;
+    color: string;
+    path: string;
+    area: string | null;
+    points: LinePoint[];
+}
+interface LineVm {
+    plot: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    series: LineSeriesVm[];
+    grid: GridLine[];
+    valueLabels: AxisLabel[];
+    catLabels: AxisLabel[];
+    showPoints: boolean;
+}
+interface BarVm {
+    orientation: 'vertical' | 'horizontal';
+    bars: {
+        key: string;
+        path: string;
+        color: string;
+        name: string;
+        label: string;
+        value: number;
+        tipX: number;
+        tipY: number;
+        index: number;
+    }[];
+    grid: GridLine[];
+    valueLabels: AxisLabel[];
+    catLabels: AxisLabel[];
+}
+interface SliceVm {
+    key: string;
+    path: string;
+    color: string;
+    label: string;
+    value: number;
+    tipX: number;
+    tipY: number;
+}
+interface RadarSeriesVm {
+    key: string;
+    name: string;
+    color: string;
+    polygon: string;
+    points: LinePoint[];
+}
+interface RadarVm {
+    rings: string[];
+    axisLines: GridLine[];
+    axisLabels: AxisLabel[];
+    series: RadarSeriesVm[];
+}
+/**
+ * Wykres SVG w pełni konfigurowalny przez obiekt `config`.
+ * Typy: line, bar, pie, doughnut, polarArea, radar. Sygnały + zoneless,
+ * natywne renderowanie SVG (bez manipulacji DOM). Rdzeń obliczeń: `../core`.
+ *
+ * @example
+ * <kpt-chart [config]="{ type: 'line', labels: ['Sty','Lut','Mar'],
+ *   series: [{ name: 'Sprzedaż', data: [12, 19, 7] }] }" />
+ */
+declare class KptChart {
+    readonly config: _angular_core.InputSignal<KptChartConfig>;
+    /** Szerokość viewBoxa (jednostki SVG). Wykres skaluje się do kontenera. */
+    readonly width: _angular_core.InputSignal<number>;
+    /** Wysokość viewBoxa (jednostki SVG). */
+    readonly height: _angular_core.InputSignal<number>;
+    protected readonly hidden: _angular_core.WritableSignal<ReadonlySet<string>>;
+    protected readonly highlighted: _angular_core.WritableSignal<string | null>;
+    protected readonly tooltip: _angular_core.WritableSignal<KptChartTooltipState | null>;
+    /** Indeks kategorii pod kursorem (dla prowadnicy crosshair w wykresie liniowym). */
+    protected readonly activeIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly type: _angular_core.Signal<_konce_pt_angular_charts.KptChartType>;
+    protected readonly anim: _angular_core.Signal<Required<KptAnimationOptions>>;
+    protected readonly legendOpts: _angular_core.Signal<{
+        display: boolean;
+        position: _konce_pt_angular_charts.KptLegendPosition;
+        align: KptAlign;
+        pointStyle: _konce_pt_angular_charts.KptPointStyle;
+        title: _konce_pt_angular_charts.KptLegendTitle | undefined;
+    }>;
+    protected readonly titleOpts: _angular_core.Signal<_konce_pt_angular_charts.KptTitleOptions | undefined>;
+    protected readonly subtitleOpts: _angular_core.Signal<_konce_pt_angular_charts.KptTitleOptions | undefined>;
+    protected readonly titleStyle: _angular_core.Signal<string>;
+    protected readonly subtitleStyle: _angular_core.Signal<string>;
+    protected readonly legendItems: _angular_core.Signal<KptChartLegendItem[]>;
+    protected readonly lineVm: _angular_core.Signal<LineVm | null>;
+    protected readonly barVm: _angular_core.Signal<BarVm | null>;
+    protected readonly pieVm: _angular_core.Signal<SliceVm[] | null>;
+    protected readonly radarVm: _angular_core.Signal<RadarVm | null>;
+    protected readonly crosshair: _angular_core.Signal<{
+        x: number;
+        y1: number;
+        y2: number;
+        text: string;
+        labelX: number;
+        labelY: number;
+        pillX: number;
+        pillY: number;
+        pillW: number;
+        pillH: number;
+    } | null>;
+    protected onLineEnter(idx: number, tipX: number, tipY: number, name: string, label: string, value: number, color: string): void;
+    protected onLineLeave(): void;
+    protected showTip(tipX: number, tipY: number, name: string, label: string, value: number, color: string): void;
+    protected hideTip(): void;
+    protected onToggle(key: string): void;
+    protected onHighlight(key: string | null): void;
+    /** Czy dany element ma być wygaszony (aktywne podświetlenie innego). */
+    protected dim(key: string): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptChart, "kpt-chart", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface NiceScale {
+    min: number;
+    max: number;
+    step: number;
+    ticks: number[];
+}
+/**
+ * „Ładna" skala obejmująca [dataMin, dataMax] z ~`maxTicks` podziałkami.
+ * Wynikowy zakres jest rozszerzony do równych kroków; zawsze zawiera 0,
+ * gdy dane są jednoznakowe (typowe dla słupków/linii wartościowych).
+ */
+declare function niceScale(dataMin: number, dataMax: number, maxTicks?: number): NiceScale;
+
+/** Ścieżka linii dla wybranego trybu interpolacji. */
+declare function linePath(points: KptPoint[], mode?: KptLineInterpolation): string;
+/** Ścieżka obszaru pod linią (domknięta do `baselineY`). */
+declare function areaPath(points: KptPoint[], baselineY: number, mode?: KptLineInterpolation): string;
+
+interface BarGeom {
+    rect: KptRect;
+    /** Ścieżka słupka z zaokrąglonymi rogami „od strony wzrostu". */
+    path: string;
+    seriesIndex: number;
+    categoryIndex: number;
+    value: number;
+}
+interface BarLayout {
+    bars: BarGeom[];
+    /** Podziałki osi wartości (wartość → współrzędna). */
+    ticks: {
+        value: number;
+        pos: number;
+    }[];
+    /** Współrzędna linii bazowej (0). */
+    baseline: number;
+    scale: ReturnType<typeof niceScale>;
+}
+/**
+ * Wylicza słupki dla obszaru `plot`.
+ * @param seriesData  wartości[serie][kategorie]
+ * @param plot        obszar rysowania {x,y,width,height}
+ * @param orientation pionowa (rośnie w górę) lub pozioma (rośnie w prawo)
+ * @param borderRadius promień zaokrąglenia w px
+ */
+declare function barLayout(seriesData: number[][], categoryCount: number, plot: KptRect, orientation: KptBarOrientation, borderRadius: number): BarLayout;
+
+interface ArcSlice {
+    path: string;
+    /** Kąt środka wycinka (do pozycjonowania etykiet/tooltipa). */
+    midAngle: number;
+    startAngle: number;
+    endAngle: number;
+    value: number;
+}
+/**
+ * Wycinki pie/doughnut: kąt proporcjonalny do wartości (Σ = 2π).
+ * `innerRadius` w px (0 dla pie).
+ */
+declare function pieSlices(values: number[], cx: number, cy: number, outerRadius: number, innerRadius?: number): ArcSlice[];
+/**
+ * Wycinki polar area: równy kąt (2π/N), promień proporcjonalny do wartości.
+ * `maxValue` skaluje promień do `outerRadius`.
+ */
+declare function polarSlices(values: number[], cx: number, cy: number, outerRadius: number, maxValue?: number): ArcSlice[];
+
+interface RadarAxis {
+    /** Punkt na obwodzie (koniec osi). */
+    end: KptPoint;
+    angle: number;
+    labelIndex: number;
+}
+interface RadarGrid {
+    /** Poziomy siatki (pierścienie) jako ścieżki wielokątów. */
+    rings: string[];
+    axes: RadarAxis[];
+}
+/** Siatka radaru: `levels` koncentrycznych wielokątów + osie do etykiet. */
+declare function radarGrid(count: number, cx: number, cy: number, radius: number, levels?: number): RadarGrid;
+/** Punkty wielokąta serii (wartość → promień, skalowane do `maxValue`). */
+declare function radarPoints(values: number[], cx: number, cy: number, radius: number, maxValue: number): KptPoint[];
+
+/** Kolejność kolorów dla kolejnych serii / wycinków. */
+declare const KPT_CHART_PALETTE: readonly string[];
+/** Kolor serii/wycinka: jawny z danych albo z palety (cyklicznie). */
+declare function seriesColor(explicit: string | undefined, index: number, palette?: readonly string[]): string;
+
+export { KPT_CHART_PALETTE, KptChart, areaPath, barLayout, linePath, niceScale, pieSlices, polarSlices, radarGrid, radarPoints, seriesColor };
+export type { KptAlign, KptAnimationOptions, KptBarOrientation, KptChartConfig, KptChartSeries, KptChartType, KptFont, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptLineInterpolation, KptPadding, KptPointStyle, KptTitleOptions, KptTooltipContext, KptTooltipOptions };

package/dist/types/konce-pt-angular-grid.d.ts

@@ -0,0 +1,136 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Siatka Koncept UI — CSS Grid sterowany custom properties z `@konce-pt/grid`.
+ * Dyrektywa, nie komponent: nie dokłada elementu do DOM i działa na dowolnym
+ * tagu (`<section>`, `<ul>`, `<main>`). Alias `kpt-grid` dla zgodności.
+ *
+ * Zmiana `columns` nie manipuluje klasami — ustawia zmienną inline, a układ
+ * przelicza natywny silnik CSS.
+ *
+ * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).
+ *
+ * @example
+ * <div kptGrid [columns]="18" gap="1.5rem">
+ *   <div [kptCol]="18" [kptColLg]="5">Sidebar</div>
+ *   <div [kptCol]="18" [kptColLg]="13">Treść</div>
+ * </div>
+ */
+declare class KptGrid {
+    /** Liczba kolumn — baza mobile-first. Domyślnie 12 (z CSS). */
+    readonly columns: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa SM (>= 640px). */
+    readonly columnsSm: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa MD (>= 768px). */
+    readonly columnsMd: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa LG (>= 1024px). */
+    readonly columnsLg: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa XL (>= 1280px). */
+    readonly columnsXl: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa 2XL (>= 1536px). */
+    readonly columns2xl: _angular_core.InputSignal<number | undefined>;
+    /** Odstęp w obu osiach, np. `'1.5rem'` albo `'var(--kpt-space-6)'`. */
+    readonly gap: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp między kolumnami — nadpisuje `gap` w poziomie. */
+    readonly gapX: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp między wierszami — nadpisuje `gap` w pionie. */
+    readonly gapY: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Tryb kontenerowy: spany dzieci reagują na szerokość TEJ siatki, nie okna.
+     * Liczba kolumn i odstępy nadal idą za viewportem — `@container` nie potrafi
+     * odpytać elementu o jego własny kontener.
+     */
+    readonly container: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptGrid, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptGrid, "[kptGrid], kpt-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnsSm": { "alias": "columnsSm"; "required": false; "isSignal": true; }; "columnsMd": { "alias": "columnsMd"; "required": false; "isSignal": true; }; "columnsLg": { "alias": "columnsLg"; "required": false; "isSignal": true; }; "columnsXl": { "alias": "columnsXl"; "required": false; "isSignal": true; }; "columns2xl": { "alias": "columns2xl"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "gapX": { "alias": "gapX"; "required": false; "isSignal": true; }; "gapY": { "alias": "gapY"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Rozpiętość kolumny: liczba, `'full'` (cała szerokość) albo dowolna wartość CSS. */
+type KptColSpan = number | string;
+/**
+ * Kolumna siatki `kptGrid` — rozpiętość mobile-first z nadpisaniami per breakpoint.
+ *
+ * Wartość podana dla mniejszego breakpointa obowiązuje aż do następnego, który ją
+ * nadpisze: `[kptCol]="12" [kptColLg]="5"` daje 12 na mobile, tablecie i `md`,
+ * a dopiero od `lg` — 5.
+ *
+ * Dyrektywa ustawia wyłącznie custom properties inline; nie dodaje ani nie usuwa klas.
+ *
+ * @example
+ * <div kptGrid>
+ *   <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
+ * </div>
+ */
+declare class KptCol {
+    /** Rozpiętość kolumny — baza mobile-first. */
+    readonly span: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa SM (>= 640px). */
+    readonly spanSm: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa MD (>= 768px). */
+    readonly spanMd: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa LG (>= 1024px). */
+    readonly spanLg: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa XL (>= 1280px). */
+    readonly spanXl: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa 2XL (>= 1536px). */
+    readonly span2xl: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Numer linii, od której zaczyna się kolumna (1-based) — pozwala robić offsety. */
+    readonly start: _angular_core.InputSignal<string | number | undefined>;
+    /** Kolejność wizualna (`order`). Nie zmienia kolejności w DOM ani dla czytników ekranu. */
+    readonly order: _angular_core.InputSignal<string | number | undefined>;
+    /** Wyrównanie w poprzek osi (`align-self`): `start`, `end`, `center`, `stretch`, `baseline`. */
+    readonly self: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptCol, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptCol, "[kptCol], [kptColSm], [kptColMd], [kptColLg], [kptColXl], [kptCol2xl], [kptColStart], [kptColOrder], [kptColSelf]", never, { "span": { "alias": "kptCol"; "required": false; "isSignal": true; }; "spanSm": { "alias": "kptColSm"; "required": false; "isSignal": true; }; "spanMd": { "alias": "kptColMd"; "required": false; "isSignal": true; }; "spanLg": { "alias": "kptColLg"; "required": false; "isSignal": true; }; "spanXl": { "alias": "kptColXl"; "required": false; "isSignal": true; }; "span2xl": { "alias": "kptCol2xl"; "required": false; "isSignal": true; }; "start": { "alias": "kptColStart"; "required": false; "isSignal": true; }; "order": { "alias": "kptColOrder"; "required": false; "isSignal": true; }; "self": { "alias": "kptColSelf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type KptFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type KptFlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type KptAlignment = 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * Kontener flexbox Koncept UI — te same zmienne i breakpointy co `kptGrid`.
+ * Dla wartości bez odpowiednika w inputach (`grow`, `shrink`, `order` na dziecku)
+ * używa się klas utility: `kpt-grow-1`, `kpt-order-first`, `kpt-self-end`.
+ *
+ * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).
+ *
+ * @example
+ * <div kptFlex direction="column" directionMd="row" justify="space-between" gap="1rem">
+ *   <span>Lewa</span>
+ *   <span class="kpt-order-first kpt-order-md-none">Prawa</span>
+ * </div>
+ */
+declare class KptFlex {
+    /** Kierunek osi głównej — baza mobile-first. */
+    readonly direction: _angular_core.InputSignal<KptFlexDirection | undefined>;
+    /** Kierunek od breakpointa MD (>= 768px). */
+    readonly directionMd: _angular_core.InputSignal<KptFlexDirection | undefined>;
+    /** Kierunek od breakpointa LG (>= 1024px). */
+    readonly directionLg: _angular_core.InputSignal<KptFlexDirection | undefined>;
+    /** Zawijanie elementów. */
+    readonly wrap: _angular_core.InputSignal<KptFlexWrap | undefined>;
+    /** Rozkład wzdłuż osi głównej (`justify-content`). */
+    readonly justify: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Rozkład wzdłuż osi głównej od breakpointa MD. */
+    readonly justifyMd: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Wyrównanie w poprzek osi (`align-items`). */
+    readonly align: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Wyrównanie w poprzek osi od breakpointa MD. */
+    readonly alignMd: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Odstęp w obu osiach. */
+    readonly gap: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp w poziomie. */
+    readonly gapX: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp w pionie. */
+    readonly gapY: _angular_core.InputSignal<string | undefined>;
+    /** Tryb kontenerowy — zmienne dzieci reagują na szerokość tego kontenera. */
+    readonly container: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptFlex, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptFlex, "[kptFlex]", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "directionMd": { "alias": "directionMd"; "required": false; "isSignal": true; }; "directionLg": { "alias": "directionLg"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "justifyMd": { "alias": "justifyMd"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignMd": { "alias": "alignMd"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "gapX": { "alias": "gapX"; "required": false; "isSignal": true; }; "gapY": { "alias": "gapY"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Komplet dyrektyw układu — `imports: [...KPT_GRID_IMPORTS]`. */
+declare const KPT_GRID_IMPORTS: readonly [typeof KptGrid, typeof KptCol, typeof KptFlex];
+
+export { KPT_GRID_IMPORTS, KptCol, KptFlex, KptGrid };
+export type { KptAlignment, KptColSpan, KptFlexDirection, KptFlexWrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
   "license": "MIT",
   "author": "konce.pt",
@@ -42,6 +42,14 @@
     "./icons": {
       "types": "./dist/types/konce-pt-angular-icons.d.ts",
       "default": "./dist/fesm2022/konce-pt-angular-icons.mjs"
+    },
+    "./charts": {
+      "types": "./dist/types/konce-pt-angular-charts.d.ts",
+      "default": "./dist/fesm2022/konce-pt-angular-charts.mjs"
+    },
+    "./grid": {
+      "types": "./dist/types/konce-pt-angular-grid.d.ts",
+      "default": "./dist/fesm2022/konce-pt-angular-grid.mjs"
     }
   },
   "peerDependencies": {