@konce-pt/react 0.8.0

package/dist/fab/fab.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { KptHostProps } from '../internal/types.ts';
+export interface KptFabProps extends ComponentPropsWithRef<'button'> {
+    variant?: 'filled' | 'tonal';
+    size?: 'md' | 'mini';
+    /** Pigułka z tekstem obok ikony. */
+    extended?: boolean;
+    /** Propsy wrappera hosta (`.kpt-fab-host`). */
+    hostProps?: KptHostProps<'span'>;
+}
+/**
+ * Floating Action Button — okrągły, wyniesiony przycisk akcji. `extended` robi z niego pigułkę
+ * z tekstem.
+ *
+ * W wariancie okrągłym `aria-label` jest niezbędny, bo przycisk nie ma tekstu; w `extended`
+ * etykietę niesie już treść, więc `aria-label` jest tam pomijany, żeby nie dublować nazwy.
+ *
+ * @example
+ * <KptFab aria-label="Dodaj"><KptIcon name="plus" /></KptFab>
+ * <KptFab extended><KptIcon name="plus" /> Nowy</KptFab>
+ */
+export declare function KptFab({ variant, size, extended, type, hostProps, className, 'aria-label': ariaLabel, ...rest }: Readonly<KptFabProps>): import("react").JSX.Element;

package/dist/fab/fab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/cn.js";
+/**
+ * Floating Action Button — okrągły, wyniesiony przycisk akcji. `extended` robi z niego pigułkę
+ * z tekstem.
+ *
+ * W wariancie okrągłym `aria-label` jest niezbędny, bo przycisk nie ma tekstu; w `extended`
+ * etykietę niesie już treść, więc `aria-label` jest tam pomijany, żeby nie dublować nazwy.
+ *
+ * @example
+ * <KptFab aria-label="Dodaj"><KptIcon name="plus" /></KptFab>
+ * <KptFab extended><KptIcon name="plus" /> Nowy</KptFab>
+ */
+export function KptFab({ variant = 'filled', size = 'md', extended = false, type = 'button', hostProps, className, 'aria-label': ariaLabel, ...rest }) {
+    const { className: hostClassName, ...hostRest } = hostProps ?? {};
+    return (_jsx("span", { className: cn('kpt-fab-host', hostClassName), ...hostRest, children: _jsx("button", { className: cn('kpt-fab', extended && 'kpt-fab--extended', className), type: type, "data-variant": variant, "data-size": size, "aria-label": extended ? undefined : ariaLabel, ...rest }) }));
+}

package/dist/fieldset/fieldset.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export interface KptFieldsetProps extends ComponentPropsWithRef<'div'> {
+    legend?: string;
+    /** Legenda staje się przyciskiem zwijającym zawartość. */
+    toggleable?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    animated?: boolean;
+    animationDuration?: number;
+    children?: ReactNode;
+}
+/**
+ * Grupa pól z legendą (`<fieldset>` + `<legend>`), opcjonalnie zwijana.
+ *
+ * Zwijanie idzie przez `grid-template-rows: 0fr → 1fr`, więc animuje się do naturalnej wysokości
+ * treści — bez mierzenia czegokolwiek w JS.
+ *
+ * @example
+ * <KptFieldset legend="Dane osobowe" toggleable>…</KptFieldset>
+ */
+export declare function KptFieldset({ legend, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptFieldsetProps>): import("react").JSX.Element;

package/dist/fieldset/fieldset.js

@@ -0,0 +1,24 @@
+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";
+/**
+ * Grupa pól z legendą (`<fieldset>` + `<legend>`), opcjonalnie zwijana.
+ *
+ * Zwijanie idzie przez `grid-template-rows: 0fr → 1fr`, więc animuje się do naturalnej wysokości
+ * treści — bez mierzenia czegokolwiek w JS.
+ *
+ * @example
+ * <KptFieldset legend="Dane osobowe" toggleable>…</KptFieldset>
+ */
+export function KptFieldset({ legend = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+    const [isCollapsed, setCollapsed] = useControllableState({
+        value: collapsed,
+        defaultValue: defaultCollapsed,
+        onChange: onCollapsedChange,
+    });
+    return (_jsx("div", { className: cn('kpt-fieldset-host', className), style: {
+            ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
+            ...style,
+        }, ...rest, children: _jsxs("fieldset", { className: "kpt-fieldset", children: [_jsx("legend", { className: "kpt-fieldset__legend", children: toggleable ? (_jsxs("button", { type: "button", className: "kpt-fieldset__toggle", "aria-expanded": !isCollapsed, onClick: () => setCollapsed(!isCollapsed), children: [_jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }), _jsx("span", { children: legend })] })) : (_jsx("span", { children: legend })) }), _jsx("div", { className: cn('kpt-fieldset__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-fieldset__collapse-inner", children: _jsx("div", { className: "kpt-fieldset__body", children: children }) }) })] }) }));
+}

package/dist/file-upload/file-upload.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptFileUploadProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
+    value?: File[];
+    defaultValue?: File[];
+    onValueChange?: (files: File[]) => void;
+    /** Filtr natywnego okna wyboru, np. 'image/*'. */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Wgrywanie plików: strefa reagująca na kliknięcie i na upuszczenie, plus lista wybranych plików.
+ * Wartością jest tablica `File`.
+ *
+ * @example
+ * <KptFileUpload value={files} onValueChange={setFiles} accept="image/*" multiple />
+ */
+export declare function KptFileUpload({ value, defaultValue, onValueChange, accept, multiple, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptFileUploadProps>): import("react").JSX.Element;

package/dist/file-upload/file-upload.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+const EMPTY = [];
+/** Rozmiar pliku w KB albo MB — bez bibliotek, bo to jedna reguła. */
+function formatSize(file) {
+    const kb = file.size / 1024;
+    return kb < 1024 ? `${kb.toFixed(0)} KB` : `${(kb / 1024).toFixed(1)} MB`;
+}
+/**
+ * Wgrywanie plików: strefa reagująca na kliknięcie i na upuszczenie, plus lista wybranych plików.
+ * Wartością jest tablica `File`.
+ *
+ * @example
+ * <KptFileUpload value={files} onValueChange={setFiles} accept="image/*" multiple />
+ */
+export function KptFileUpload({ value, defaultValue = EMPTY, onValueChange, accept = '', multiple = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const inputRef = useRef(null);
+    const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const [dragover, setDragover] = useState(false);
+    const addFiles = (list) => {
+        if (!list?.length)
+            return;
+        const added = Array.from(list);
+        setCurrent(multiple ? [...current, ...added] : added.slice(0, 1));
+        onTouch?.();
+    };
+    const onSelect = (event) => {
+        addFiles(event.target.files);
+        // Czyszczenie pola pozwala wybrać ten sam plik drugi raz — inaczej `change` by nie poleciał.
+        event.target.value = '';
+    };
+    return (_jsxs("div", { className: cn('kpt-file-upload-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-file-upload__zone', dragover && 'is-dragover', disabled && 'is-disabled'), onClick: () => !disabled && inputRef.current?.click(), onDragOver: (event) => {
+                    event.preventDefault();
+                    if (!disabled)
+                        setDragover(true);
+                }, onDragLeave: () => setDragover(false), onDrop: (event) => {
+                    event.preventDefault();
+                    setDragover(false);
+                    if (!disabled)
+                        addFiles(event.dataTransfer?.files);
+                }, children: [_jsx("input", { ref: inputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: onSelect }), _jsx(KptIcon, { name: "upload", className: "kpt-file-upload__icon" }), _jsx("div", { className: "kpt-file-upload__text", dangerouslySetInnerHTML: { __html: t('fileUpload.hint') } }), accept ? _jsx("div", { className: "kpt-file-upload__hint", children: accept }) : null] }), current.length ? (_jsx("ul", { className: "kpt-file-upload__list", children: current.map((file) => (_jsxs("li", { className: "kpt-file-upload__file", children: [_jsx(KptIcon, { name: "photo" }), _jsx("span", { className: "kpt-file-upload__name", children: file.name }), _jsx("span", { className: "kpt-file-upload__size", children: formatSize(file) }), _jsx("button", { type: "button", className: "kpt-file-upload__remove", "aria-label": t('fileUpload.remove'), onClick: (event) => {
+                                event.stopPropagation();
+                                setCurrent(current.filter((item) => item !== file));
+                            }, children: _jsx(KptIcon, { name: "trash" }) })] }, file.name))) })) : null] }));
+}

package/dist/form-field/form-field-context.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Kontrakt między `KptFormField` a kontrolką w środku.
+ *
+ * Odpowiednik tokenu `KPT_FORM_FIELD_CONTROL` z portu Angulara. Wrapper sam odczytuje
+ * wypełnienie natywnego `input`/`textarea` z DOM; kontrolki bez natywnego pola (np. select
+ * zbudowany na liście) zgłaszają je przez `useKptFormFieldFilled`.
+ */
+export interface KptFormFieldContextValue {
+    /** Id, którym wrapper wiąże `label[for]` — kontrolka powinna nadać je swojemu elementowi. */
+    controlId: string;
+    /** Czy pole jest oznaczone jako nieprawidłowe (niepusty `error` na wrapperze). */
+    invalid: boolean;
+    /** Zgłasza wypełnienie kontrolki, gdy nie da się go odczytać z DOM. */
+    reportFilled: (filled: boolean) => void;
+}
+export declare const KptFormFieldContext: import("react").Context<KptFormFieldContextValue | null>;
+/** Kontekst pola formularza albo `null`, gdy kontrolka stoi poza `KptFormField`. */
+export declare function useKptFormFieldContext(): KptFormFieldContextValue | null;
+/**
+ * Zgłasza wrapperowi wypełnienie kontrolki, która nie ma natywnego `input`/`textarea`.
+ * Steruje uniesieniem etykiety w wariantach float.
+ */
+export declare function useKptFormFieldFilled(filled: boolean): void;

package/dist/form-field/form-field-context.js

@@ -0,0 +1,17 @@
+import { createContext, useContext, useEffect } from 'react';
+export const KptFormFieldContext = createContext(null);
+/** Kontekst pola formularza albo `null`, gdy kontrolka stoi poza `KptFormField`. */
+export function useKptFormFieldContext() {
+    return useContext(KptFormFieldContext);
+}
+/**
+ * Zgłasza wrapperowi wypełnienie kontrolki, która nie ma natywnego `input`/`textarea`.
+ * Steruje uniesieniem etykiety w wariantach float.
+ */
+export function useKptFormFieldFilled(filled) {
+    const context = useKptFormFieldContext();
+    const reportFilled = context?.reportFilled;
+    useEffect(() => {
+        reportFilled?.(filled);
+    }, [reportFilled, filled]);
+}

package/dist/form-field/form-field.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/**
+ * Wariant etykiety: `fixed` (statyczna nad kontrolką) albo Float Label — `over`
+ * (nad obramowaniem), `in` (u góry wewnątrz pola), `on` (na obramowaniu, notch).
+ */
+export type KptFormFieldLabelType = 'fixed' | 'over' | 'in' | 'on';
+export interface KptFormFieldProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /** Tekst etykiety. */
+    label?: string;
+    /** Podpowiedź pod kontrolką (ukrywana, gdy jest błąd). */
+    hint?: string;
+    /** Komunikat błędu — gdy niepusty, pole jest oznaczone jako nieprawidłowe. */
+    error?: string | null;
+    /** Oznacz pole jako wymagane (gwiazdka przy etykiecie). */
+    required?: boolean;
+    /**
+     * Id kontrolki dla powiązania `label[for]`. Puste = wrapper wygeneruje własne i poda je
+     * kontrolce przez kontekst, więc `<KptInput>` w środku nie wymaga żadnej konfiguracji.
+     */
+    controlId?: string;
+    /** Wariant etykiety; uniesienie następuje przy focusie lub wypełnieniu pola. */
+    labelType?: KptFormFieldLabelType;
+    children?: ReactNode;
+}
+/**
+ * Wrapper pola formularza: etykieta, podpowiedź i komunikat błędu wokół dowolnej kontrolki.
+ * Prezentacyjny — stan błędu przekazuje się przez `error`.
+ *
+ * Wypełnienie (sterujące uniesieniem etykiety) wrapper odczytuje z natywnego `input`/`textarea`
+ * w środku, po zdarzeniach `input`/`change` oraz z wartości początkowej. Działa więc tak samo
+ * dla pola kontrolowanego i niekontrolowanego. Kontrolki bez natywnego pola zgłaszają
+ * wypełnienie hookiem `useKptFormFieldFilled`.
+ *
+ * @example
+ * <KptFormField label="E-mail" error={errors.email} hint="Adres firmowy">
+ *   <KptInput type="email" name="email" />
+ * </KptFormField>
+ */
+export declare function KptFormField({ label, hint, error, required, controlId, labelType, className, children, ref, ...rest }: Readonly<KptFormFieldProps>): import("react").JSX.Element;

package/dist/form-field/form-field.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
+import { useKptId } from "../internal/use-id.js";
+import { KptFormFieldContext } from "./form-field-context.js";
+/**
+ * Wrapper pola formularza: etykieta, podpowiedź i komunikat błędu wokół dowolnej kontrolki.
+ * Prezentacyjny — stan błędu przekazuje się przez `error`.
+ *
+ * Wypełnienie (sterujące uniesieniem etykiety) wrapper odczytuje z natywnego `input`/`textarea`
+ * w środku, po zdarzeniach `input`/`change` oraz z wartości początkowej. Działa więc tak samo
+ * dla pola kontrolowanego i niekontrolowanego. Kontrolki bez natywnego pola zgłaszają
+ * wypełnienie hookiem `useKptFormFieldFilled`.
+ *
+ * @example
+ * <KptFormField label="E-mail" error={errors.email} hint="Adres firmowy">
+ *   <KptInput type="email" name="email" />
+ * </KptFormField>
+ */
+export function KptFormField({ label = '', hint = '', error = null, required = false, controlId = '', labelType = 'fixed', className, children, ref, ...rest }) {
+    const hostRef = useRef(null);
+    const [nativeFilled, setNativeFilled] = useState(false);
+    const [reportedFilled, setReportedFilled] = useState(null);
+    const generatedId = useKptId(undefined, 'kpt-form-field-control');
+    const id = controlId || generatedId;
+    /** Odczytuje wartość projektowanego `input`/`textarea` i aktualizuje stan wypełnienia. */
+    const updateFilled = useCallback(() => {
+        const el = hostRef.current?.querySelector('.kpt-form-field__control input, .kpt-form-field__control textarea');
+        setNativeFilled(!!el && el.value !== '');
+    }, []);
+    // Wartość początkowa (np. pole prefill) — po pierwszym renderze projekcji, przed malowaniem,
+    // żeby uniesiona etykieta nie przeskoczyła na oczach użytkownika.
+    useLayoutEffect(updateFilled, [updateFilled]);
+    // Kontrolowana wartość zmieniana z zewnątrz nie emituje zdarzenia `input`, więc odczyt
+    // powtarzamy po każdym renderze — to jeden `querySelector`, nie warto tu optymalizować.
+    useEffect(updateFilled);
+    const filled = reportedFilled ?? nativeFilled;
+    const context = useMemo(() => ({ controlId: id, invalid: !!error, reportFilled: setReportedFilled }), [id, error]);
+    return (_jsx(KptFormFieldContext.Provider, { value: context, children: _jsx("div", { className: cn('kpt-form-field-host', className), ref: composeRefs(hostRef, ref), onInput: updateFilled, onChange: updateFilled, ...rest, children: _jsxs("div", { className: cn('kpt-form-field', `kpt-form-field--${labelType}`, labelType !== 'fixed' && 'kpt-form-field--float', error && 'kpt-form-field--invalid'), children: [_jsxs("div", { className: cn('kpt-form-field__box', filled && 'is-filled'), children: [label ? (_jsxs("label", { className: "kpt-form-field__label", htmlFor: id || undefined, children: [label, required ? (_jsx("span", { className: "kpt-form-field__required", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: "kpt-form-field__control", children: children })] }), error ? (_jsx("p", { className: "kpt-form-field__message kpt-form-field__message--error", role: "alert", children: error })) : hint ? (_jsx("p", { className: "kpt-form-field__message kpt-form-field__message--hint", children: hint })) : null] }) }) }));
+}

package/dist/galleria/galleria.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptGalleriaItem {
+    src: string;
+    /** Miniatura; bez niej pasek pokazuje pomniejszony obraz główny. */
+    thumbnail?: string;
+    alt?: string;
+}
+export interface KptGalleriaProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
+    items?: KptGalleriaItem[];
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+    showThumbnails?: boolean;
+}
+/**
+ * Galleria — duży podgląd obrazu z paskiem miniatur i nawigacją.
+ *
+ * @example
+ * <KptGalleria items={photos} activeIndex={index} onActiveIndexChange={setIndex} />
+ */
+export declare function KptGalleria({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, showThumbnails, locale, dictionary, className, ...rest }: Readonly<KptGalleriaProps>): import("react").JSX.Element;

package/dist/galleria/galleria.js

@@ -0,0 +1,21 @@
+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 { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+/**
+ * Galleria — duży podgląd obrazu z paskiem miniatur i nawigacją.
+ *
+ * @example
+ * <KptGalleria items={photos} activeIndex={index} onActiveIndexChange={setIndex} />
+ */
+export function KptGalleria({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, showThumbnails = true, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [active, setActive] = useControllableState({
+        value: activeIndex,
+        defaultValue: defaultActiveIndex,
+        onChange: onActiveIndexChange,
+    });
+    const current = items[active] ?? null;
+    return (_jsx("div", { className: cn('kpt-galleria-host', className), ...rest, children: _jsxs("div", { className: "kpt-galleria", children: [_jsxs("div", { className: "kpt-galleria__stage", children: [_jsx("button", { type: "button", className: "kpt-galleria__nav kpt-galleria__nav--prev", disabled: active === 0, "aria-label": t('common.previous'), onClick: () => setActive(Math.max(active - 1, 0)), children: _jsx(KptIcon, { name: "chevron-left" }) }), current ? _jsx("img", { className: "kpt-galleria__image", src: current.src, alt: current.alt || '' }) : null, _jsx("button", { type: "button", className: "kpt-galleria__nav kpt-galleria__nav--next", disabled: active >= items.length - 1, "aria-label": t('common.next'), onClick: () => setActive(Math.min(active + 1, items.length - 1)), children: _jsx(KptIcon, { name: "chevron-right" }) })] }), showThumbnails ? (_jsx("div", { className: "kpt-galleria__thumbs", children: items.map((item, index) => (_jsx("button", { type: "button", className: cn('kpt-galleria__thumb', index === active && 'is-active'), "aria-label": t('galleria.image', { index: index + 1 }), onClick: () => setActive(index), children: _jsx("img", { src: item.thumbnail || item.src, alt: item.alt || '' }) }, index))) })) : null] }) }));
+}

package/dist/grid/col.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AsChildProps } from '../internal/types.ts';
+/** Rozpiętość kolumny: liczba, `'full'` (cała szerokość) albo dowolna wartość CSS. */
+export type KptColSpan = number | string;
+export interface KptColProps extends ComponentPropsWithRef<'div'>, AsChildProps {
+    /** Rozpiętość kolumny — baza mobile-first. */
+    span?: KptColSpan;
+    /** Rozpiętość od breakpointa SM (>= 640px). */
+    spanSm?: KptColSpan;
+    /** Rozpiętość od breakpointa MD (>= 768px). */
+    spanMd?: KptColSpan;
+    /** Rozpiętość od breakpointa LG (>= 1024px). */
+    spanLg?: KptColSpan;
+    /** Rozpiętość od breakpointa XL (>= 1280px). */
+    spanXl?: KptColSpan;
+    /** Rozpiętość od breakpointa 2XL (>= 1536px). */
+    span2xl?: KptColSpan;
+    /** Numer linii, od której zaczyna się kolumna (1-based) — pozwala robić offsety. */
+    start?: number | string;
+    /** Kolejność wizualna (`order`). Nie zmienia kolejności w DOM ani dla czytników ekranu. */
+    order?: number | string;
+    /** Wyrównanie w poprzek osi (`align-self`): `start`, `end`, `center`, `stretch`, `baseline`. */
+    self?: 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:
+ * `span={12} spanLg={5}` daje 12 na mobile, tablecie i `md`, a dopiero od `lg` — 5.
+ *
+ * Ustawia wyłącznie custom properties inline; nie dodaje ani nie usuwa klas. Z `asChild`
+ * przejmuje Twój element, więc kolumną może być `<li>`, `<article>` czy komponent biblioteki.
+ *
+ * @example
+ * <KptGrid>
+ *   <KptCol span={12} spanSm={6} spanMd={4}>Karta</KptCol>
+ * </KptGrid>
+ */
+export declare function KptCol({ span, spanSm, spanMd, spanLg, spanXl, span2xl, start, order, self, asChild, className, style, children, ...rest }: Readonly<KptColProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/grid/col.js

@@ -0,0 +1,32 @@
+import { layoutStyle, renderLayout } from "./layout.js";
+/**
+ * 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:
+ * `span={12} spanLg={5}` daje 12 na mobile, tablecie i `md`, a dopiero od `lg` — 5.
+ *
+ * Ustawia wyłącznie custom properties inline; nie dodaje ani nie usuwa klas. Z `asChild`
+ * przejmuje Twój element, więc kolumną może być `<li>`, `<article>` czy komponent biblioteki.
+ *
+ * @example
+ * <KptGrid>
+ *   <KptCol span={12} spanSm={6} spanMd={4}>Karta</KptCol>
+ * </KptGrid>
+ */
+export function KptCol({ span, spanSm, spanMd, spanLg, spanXl, span2xl, start, order, self, asChild = false, className, style, children, ...rest }) {
+    return renderLayout(asChild, children, {
+        className,
+        style: layoutStyle({
+            '--kpt-col': span,
+            '--kpt-col-sm': spanSm,
+            '--kpt-col-md': spanMd,
+            '--kpt-col-lg': spanLg,
+            '--kpt-col-xl': spanXl,
+            '--kpt-col-2xl': span2xl,
+            '--kpt-col-start': start,
+            '--kpt-order': order,
+            '--kpt-self': self,
+        }, style),
+        ...rest,
+    }, 'div');
+}

package/dist/grid/flex.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AsChildProps } from '../internal/types.ts';
+export type KptFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type KptFlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export type KptAlignment = 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly';
+export interface KptFlexProps extends ComponentPropsWithRef<'div'>, AsChildProps {
+    /** Kierunek osi głównej — baza mobile-first. */
+    direction?: KptFlexDirection;
+    /** Kierunek od breakpointa MD (>= 768px). */
+    directionMd?: KptFlexDirection;
+    /** Kierunek od breakpointa LG (>= 1024px). */
+    directionLg?: KptFlexDirection;
+    /** Zawijanie elementów. */
+    wrap?: KptFlexWrap;
+    /** Rozkład wzdłuż osi głównej (`justify-content`). */
+    justify?: KptAlignment;
+    /** Rozkład wzdłuż osi głównej od breakpointa MD. */
+    justifyMd?: KptAlignment;
+    /** Wyrównanie w poprzek osi (`align-items`). */
+    align?: KptAlignment;
+    /** Wyrównanie w poprzek osi od breakpointa MD. */
+    alignMd?: KptAlignment;
+    /** Odstęp w obu osiach. */
+    gap?: string;
+    /** Odstęp w poziomie. */
+    gapX?: string;
+    /** Odstęp w pionie. */
+    gapY?: string;
+    /** Tryb kontenerowy — zmienne dzieci reagują na szerokość tego kontenera. */
+    container?: boolean;
+}
+/**
+ * Kontener flexbox Koncept UI — te same zmienne i breakpointy co `KptGrid`.
+ * Dla wartości bez odpowiednika w propsach (`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
+ * <KptFlex direction="column" directionMd="row" justify="space-between" gap="1rem">
+ *   <span>Lewa</span>
+ *   <span className="kpt-order-first kpt-order-md-none">Prawa</span>
+ * </KptFlex>
+ */
+export declare function KptFlex({ direction, directionMd, directionLg, wrap, justify, justifyMd, align, alignMd, gap, gapX, gapY, container, asChild, className, style, children, ...rest }: Readonly<KptFlexProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/grid/flex.js

@@ -0,0 +1,35 @@
+import { cn } from "../internal/cn.js";
+import { layoutStyle, renderLayout } from "./layout.js";
+/**
+ * Kontener flexbox Koncept UI — te same zmienne i breakpointy co `KptGrid`.
+ * Dla wartości bez odpowiednika w propsach (`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
+ * <KptFlex direction="column" directionMd="row" justify="space-between" gap="1rem">
+ *   <span>Lewa</span>
+ *   <span className="kpt-order-first kpt-order-md-none">Prawa</span>
+ * </KptFlex>
+ */
+export function KptFlex({ direction, directionMd, directionLg, wrap, justify, justifyMd, align, alignMd, gap, gapX, gapY, container = false, asChild = false, className, style, children, ...rest }) {
+    return renderLayout(asChild, children, {
+        className: cn('kpt-flex', className),
+        'data-container': container ? '' : undefined,
+        style: layoutStyle({
+            '--kpt-flex-direction': direction,
+            '--kpt-flex-direction-md': directionMd,
+            '--kpt-flex-direction-lg': directionLg,
+            '--kpt-flex-wrap': wrap,
+            '--kpt-justify': justify,
+            '--kpt-justify-md': justifyMd,
+            '--kpt-align': align,
+            '--kpt-align-md': alignMd,
+            '--kpt-gap': gap,
+            '--kpt-gap-x': gapX,
+            '--kpt-gap-y': gapY,
+        }, style),
+        ...rest,
+    }, 'div');
+}

package/dist/grid/grid.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AsChildProps } from '../internal/types.ts';
+export interface KptGridProps extends ComponentPropsWithRef<'div'>, AsChildProps {
+    /** Liczba kolumn — baza mobile-first. Domyślnie 12 (z CSS). */
+    columns?: number;
+    /** Liczba kolumn od breakpointa SM (>= 640px). */
+    columnsSm?: number;
+    /** Liczba kolumn od breakpointa MD (>= 768px). */
+    columnsMd?: number;
+    /** Liczba kolumn od breakpointa LG (>= 1024px). */
+    columnsLg?: number;
+    /** Liczba kolumn od breakpointa XL (>= 1280px). */
+    columnsXl?: number;
+    /** Liczba kolumn od breakpointa 2XL (>= 1536px). */
+    columns2xl?: number;
+    /** Odstęp w obu osiach, np. `'1.5rem'` albo `'var(--kpt-space-6)'`. */
+    gap?: string;
+    /** Odstęp między kolumnami — nadpisuje `gap` w poziomie. */
+    gapX?: string;
+    /** Odstęp między wierszami — nadpisuje `gap` w pionie. */
+    gapY?: string;
+    /**
+     * 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.
+     */
+    container?: boolean;
+}
+/**
+ * Siatka Koncept UI — CSS Grid sterowany custom properties z `@konce-pt/grid`.
+ *
+ * Odpowiednik dyrektywy `kptGrid` z portu Angulara. Dyrektyw w Reakcie nie ma, więc siatka jest
+ * komponentem — ale takim, który w trybie `asChild` niczego nie dokłada do DOM: przejmuje element,
+ * który i tak renderujesz (`<section>`, `<ul>`, `<main>`).
+ *
+ * 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
+ * <KptGrid columns={18} gap="1.5rem">
+ *   <KptCol span={18} spanLg={5}>Sidebar</KptCol>
+ *   <KptCol span={18} spanLg={13}>Treść</KptCol>
+ * </KptGrid>
+ */
+export declare function KptGrid({ columns, columnsSm, columnsMd, columnsLg, columnsXl, columns2xl, gap, gapX, gapY, container, asChild, className, style, children, ...rest }: Readonly<KptGridProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/grid/grid.js

@@ -0,0 +1,38 @@
+import { cn } from "../internal/cn.js";
+import { layoutStyle, renderLayout } from "./layout.js";
+/**
+ * Siatka Koncept UI — CSS Grid sterowany custom properties z `@konce-pt/grid`.
+ *
+ * Odpowiednik dyrektywy `kptGrid` z portu Angulara. Dyrektyw w Reakcie nie ma, więc siatka jest
+ * komponentem — ale takim, który w trybie `asChild` niczego nie dokłada do DOM: przejmuje element,
+ * który i tak renderujesz (`<section>`, `<ul>`, `<main>`).
+ *
+ * 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
+ * <KptGrid columns={18} gap="1.5rem">
+ *   <KptCol span={18} spanLg={5}>Sidebar</KptCol>
+ *   <KptCol span={18} spanLg={13}>Treść</KptCol>
+ * </KptGrid>
+ */
+export function KptGrid({ columns, columnsSm, columnsMd, columnsLg, columnsXl, columns2xl, gap, gapX, gapY, container = false, asChild = false, className, style, children, ...rest }) {
+    return renderLayout(asChild, children, {
+        className: cn('kpt-grid', className),
+        'data-container': container ? '' : undefined,
+        style: layoutStyle({
+            '--kpt-grid-columns': columns,
+            '--kpt-grid-columns-sm': columnsSm,
+            '--kpt-grid-columns-md': columnsMd,
+            '--kpt-grid-columns-lg': columnsLg,
+            '--kpt-grid-columns-xl': columnsXl,
+            '--kpt-grid-columns-2xl': columns2xl,
+            '--kpt-gap': gap,
+            '--kpt-gap-x': gapX,
+            '--kpt-gap-y': gapY,
+        }, style),
+        ...rest,
+    }, 'div');
+}

package/dist/grid/layout.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+/** Wartość custom property układu: liczba, dowolna wartość CSS albo brak. */
+export type KptLayoutValue = number | string | undefined;
+/**
+ * Składa custom properties układu w obiekt `style`, pomijając te bez wartości.
+ *
+ * Pominięcie jest istotne: `--kpt-col: undefined` nadpisałoby wartość z klasy utility albo
+ * z arkusza, a dyrektywy Angulara w takiej sytuacji nic nie ustawiają (`?? null`).
+ * Styl podany przez wołającego idzie na końcu, więc wygrywa.
+ */
+export declare function layoutStyle(vars: Readonly<Record<string, KptLayoutValue>>, style: CSSProperties | undefined): CSSProperties;
+/**
+ * Renderuje element układu albo — w trybie `asChild` — oddaje propsy jedynemu dziecku.
+ *
+ * To reactowy odpowiednik dyrektywy: `<KptCol asChild><li>…</li></KptCol>` nie dokłada żadnego
+ * elementu do DOM, dokładnie jak `<li kptCol="6">` w Angularze.
+ */
+export declare function renderLayout(asChild: boolean, children: ReactNode, props: Record<string, unknown>, element: 'div' | 'span'): ReactElement;

package/dist/grid/layout.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { mergeSlotProps } from "../internal/slot.js";
+/**
+ * Składa custom properties układu w obiekt `style`, pomijając te bez wartości.
+ *
+ * Pominięcie jest istotne: `--kpt-col: undefined` nadpisałoby wartość z klasy utility albo
+ * z arkusza, a dyrektywy Angulara w takiej sytuacji nic nie ustawiają (`?? null`).
+ * Styl podany przez wołającego idzie na końcu, więc wygrywa.
+ */
+export function layoutStyle(vars, style) {
+    const result = {};
+    for (const [name, value] of Object.entries(vars)) {
+        if (value !== undefined && value !== null && value !== '')
+            result[name] = value;
+    }
+    return { ...result, ...style };
+}
+/**
+ * Renderuje element układu albo — w trybie `asChild` — oddaje propsy jedynemu dziecku.
+ *
+ * To reactowy odpowiednik dyrektywy: `<KptCol asChild><li>…</li></KptCol>` nie dokłada żadnego
+ * elementu do DOM, dokładnie jak `<li kptCol="6">` w Angularze.
+ */
+export function renderLayout(asChild, children, props, element) {
+    if (asChild && isValidElement(children)) {
+        const child = children;
+        return cloneElement(child, mergeSlotProps(props, child.props));
+    }
+    const Tag = element;
+    return _jsx(Tag, { ...props, children: children });
+}