@smworks-cz/ui-kit 1.3.1 → 1.5.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg';
@@ -35,6 +36,13 @@ interface ButtonBaseProps {
      * Ukazatel myši je blokován; `onClick` se nevyvolá.
      */
     loading?: boolean;
+    /**
+     * Pozice spinneru při loading.
+     * - `'replace'` — spinner nahradí ikonu (výchozí)
+     * - `'after-text'` — spinner se zobrazí za textem vedle ikony
+     * @default 'replace'
+     */
+    loadingPosition?: 'replace' | 'after-text';
     /**
      * Roztáhne tlačítko na celou šířku kontejneru.
      */
@@ -66,6 +74,81 @@ interface ButtonAsAnchorProps extends ButtonBaseProps, Omit<React.AnchorHTMLAttr
 type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
+interface IconButtonProps {
+    /** Ikona. */
+    icon: React.ReactNode;
+    /** Callback při kliknutí. */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Povinný aria-label pro přístupnost. */
+    label: string;
+    /** Varianta. @default 'default' */
+    variant?: 'default' | 'ghost' | 'outline' | 'danger';
+    /** Velikost. @default 'md' */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Zakáže tlačítko. @default false */
+    disabled?: boolean;
+    /** Zobrazí spinner. @default false */
+    loading?: boolean;
+    /** Automaticky obalí tooltipem. */
+    tooltip?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Čtvercové tlačítko pro ikonu.
+ *
+ * Optimalizované pro akce bez textu — klikací plocha je čtvercová,
+ * varianta a velikost se řídí samostatně.
+ *
+ * @example
+ * ```tsx
+ * <IconButton icon={<TrashIcon />} label="Smazat" variant="danger" onClick={handleDelete} />
+ * <IconButton icon={<PencilIcon />} label="Upravit" tooltip="Upravit záznam" />
+ * ```
+ */
+declare const IconButton: React.FC<IconButtonProps>;
+
+interface FormFieldProps {
+    /** Popisek pole. */
+    label?: string | React.ReactNode;
+    /** Povinné pole — zobrazí hvězdičku. @default false */
+    required?: boolean;
+    /** Nápovědný text pod polem. */
+    helperText?: string | React.ReactNode;
+    /** Chybová zpráva — zobrazí se červeně pod polem. */
+    error?: string | React.ReactNode;
+    /** Formulářový prvek (input, select, atd.). */
+    children: React.ReactNode;
+    /** Vodorovný layout (label vlevo, field vpravo). @default false */
+    inline?: boolean;
+    /** Šířka labelu v inline režimu. @default '120px' */
+    labelWidth?: number | string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Konzistentní obal pro formulářový prvek.
+ *
+ * Sjednocuje label, required indikátor, helper text a error message
+ * do jednoho komponenty. Podporuje vertikální i inline layout.
+ *
+ * @example
+ * ```tsx
+ * <FormField label="Email" required error={errors.email} helperText="Pracovní email">
+ *   <Input value={email} onChange={setEmail} />
+ * </FormField>
+ *
+ * <FormField label="Jméno" inline labelWidth={140}>
+ *   <Input value={name} onChange={setName} />
+ * </FormField>
+ * ```
+ */
+declare const FormField: React.FC<FormFieldProps>;
+
 type InputSize = 'sm' | 'md' | 'lg';
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /**
@@ -290,6 +373,26 @@ interface SelectProps {
     loading?: boolean;
     /** Označí select jako nevalidní — přijímá `true` nebo textovou chybovou zprávu. */
     error?: boolean | string;
+    /**
+     * Async vyhledávání — když zadáno, filtrace nejede client-side.
+     * Voláno s textem hledání, vrací Promise s novými options.
+     */
+    onSearch?: (query: string) => Promise<SelectOption[]>;
+    /** Povolí uživateli vytvořit novou hodnotu. @default false */
+    creatable?: boolean;
+    /** Callback při vytvoření nové hodnoty. */
+    onCreateOption?: (label: string) => void;
+    /**
+     * Způsob zobrazení vybraných hodnot v multiple režimu.
+     * - `'inline'` — tagy (výchozí)
+     * - `'count'` — "N vybraných"
+     * @default 'inline'
+     */
+    chipDisplay?: 'inline' | 'count';
+    /** Vlastní renderování položky v seznamu. */
+    renderOption?: (option: SelectOption, selected: boolean) => React.ReactNode;
+    /** Vlastní renderování vybrané hodnoty v triggeru. */
+    renderValue?: (option: SelectOption) => React.ReactNode;
     /**
      * Popisek zobrazený nad selectem.
      * Stylizován velkými písmeny dle SM-UI design systému.
@@ -533,6 +636,15 @@ interface DatePickerProps {
     minDate?: Date;
     /** Maximální datum, které lze vybrat. */
     maxDate?: Date;
+    /** Předvolby zobrazené v levém sloupci popoveru. */
+    presets?: Array<{
+        label: string;
+        value: Date | [Date, Date];
+    }>;
+    /** Hlavička sekce předvoleb. @default 'Rychlý výběr' */
+    presetsLabel?: string;
+    /** Disable specific dates. Vrací true = den je grayed-out. */
+    disabledDates?: (date: Date) => boolean;
     /**
      * První den v týdnu (ISO: 1=pondělí).
      * @default 1
@@ -1184,6 +1296,107 @@ interface OTPInputProps {
  */
 declare const OTPInput: React.FC<OTPInputProps>;
 
+interface Country {
+    /** ISO 3166-1 alpha-2 kód. */
+    code: string;
+    /** Název země. */
+    name: string;
+    /** Předvolba. */
+    dialCode: string;
+    /** Vlaječka emoji. */
+    flag: string;
+}
+type PhoneInputSize = 'sm' | 'md' | 'lg';
+interface PhoneInputProps {
+    /** Plná mezinárodní hodnota, např. "+420123456789". */
+    value?: string;
+    /** Callback s plnou mezinárodní hodnotou. */
+    onChange?: (value: string) => void;
+    /** Výchozí kód země. @default 'CZ' */
+    defaultCountry?: string;
+    /** Vlastní seznam zemí. */
+    countries?: Country[];
+    /** Popisek. */
+    label?: string;
+    /** Chybový stav nebo zpráva. */
+    error?: boolean | string;
+    /** Nápovědný text. */
+    helperText?: string;
+    /** Zakáže komponentu. @default false */
+    disabled?: boolean;
+    /** Velikost. @default 'md' */
+    size?: PhoneInputSize;
+    /** Placeholder pro číslo. */
+    placeholder?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Telefonní vstup s výběrem předvolby země.
+ *
+ * Obsahuje rozbalovací seznam zemí s vlajkami a předvolbami.
+ * Hodnota je plné mezinárodní číslo (např. "+420123456789").
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   value={phone}
+ *   onChange={setPhone}
+ *   defaultCountry="CZ"
+ *   label="Telefon"
+ * />
+ * ```
+ */
+declare const PhoneInput: React.FC<PhoneInputProps>;
+
+type CropShape = 'rect' | 'circle';
+interface CropArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface ImageCropperProps {
+    /** Zdroj obrázku — URL string nebo File objekt. */
+    src: string | File;
+    /** Callback s oříznutým výsledkem jako Blob. */
+    onCrop: (result: Blob) => void;
+    /** Callback při zrušení. */
+    onCancel?: () => void;
+    /** Poměr stran (šířka/výška). Undefined = volný. */
+    aspectRatio?: number;
+    /** Minimální šířka ořezu v px. @default 50 */
+    minWidth?: number;
+    /** Minimální výška ořezu v px. @default 50 */
+    minHeight?: number;
+    /** Tvar ořezu. @default 'rect' */
+    shape?: CropShape;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Ořezávání obrázku na canvasu.
+ *
+ * Umožňuje přetahování a změnu velikosti ořezové oblasti.
+ * Podporuje obdélníkový a kruhový tvar, poměr stran a minimální rozměry.
+ *
+ * @example
+ * ```tsx
+ * <ImageCropper
+ *   src={file}
+ *   aspectRatio={1}
+ *   shape="circle"
+ *   onCrop={(blob) => uploadAvatar(blob)}
+ *   onCancel={() => setShowCropper(false)}
+ * />
+ * ```
+ */
+declare const ImageCropper: React.FC<ImageCropperProps>;
+
 interface TableColumn {
     /** Klíč odpovídající hodnotě v datovém objektu. */
     key: string;
@@ -1215,6 +1428,10 @@ interface TableProps {
     striped?: boolean;
     /** Zvýraznění řádku při najetí myší. @default true */
     hoverable?: boolean;
+    /** Callback při kliknutí na řádek. */
+    onRowClick?: (row: any, index: number) => void;
+    /** Render akčních tlačítek v posledním sloupci. */
+    rowActions?: (row: any) => React.ReactNode;
     /** Dodatečná CSS třída. */
     className?: string;
     /** Další inline styly. */
@@ -1580,11 +1797,37 @@ interface TooltipProps {
      * @default 'top'
      */
     position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Režim pozicování.
+     * - `'anchor'` — klasický, tooltip u středu triggeru (výchozí)
+     * - `'cursor'` — tooltip sleduje kurzor myši
+     * @default 'anchor'
+     */
+    mode?: 'anchor' | 'cursor';
+    /**
+     * Automaticky otočí pozici když tooltip vyjede za viewport.
+     * @default true
+     */
+    autoFlip?: boolean;
+    /**
+     * Posun od triggeru (anchor) nebo kurzoru (cursor) v px: [x, y].
+     * @default [0, 0]
+     */
+    offset?: [number, number];
     /**
      * Prodleva před zobrazením (ms).
-     * @default 200
+     * @default 0
      */
     delay?: number;
+    /**
+     * Prodleva před zobrazením (ms). Přepíše `delay` pro otevření.
+     */
+    openDelay?: number;
+    /**
+     * Prodleva před skrytím (ms). Umožňuje hover-out grace period.
+     * @default 0
+     */
+    closeDelay?: number;
     /** Dodatečná CSS třída pro tooltip. */
     className?: string;
     /** Další inline styly pro tooltip. */
@@ -1594,13 +1837,19 @@ interface TooltipProps {
  * Tooltip dle SM-UI design systému.
  *
  * Zobrazí se po najetí myší na trigger element s volitelnou prodlevou.
- * Vykresluje se přes React portál, takže ho neořízne rodičovský kontejner.
+ * Vykresluje se přes React portál. Podporuje sledování kurzoru (`mode="cursor"`)
+ * pro široké elementy a automatické otočení pozice při přetečení viewportu.
  *
  * @example
  * ```tsx
  * <Tooltip content="Uložit změny">
  *   <button>Uložit</button>
  * </Tooltip>
+ *
+ * // Cursor-following pro široké elementy (Gantt bary):
+ * <Tooltip content={<TaskDetail />} mode="cursor" position="bottom">
+ *   <div className="gantt-bar" />
+ * </Tooltip>
  * ```
  */
 declare const Tooltip: React.FC<TooltipProps>;
@@ -1678,15 +1927,23 @@ interface SkeletonProps {
  */
 declare const Skeleton: React.FC<SkeletonProps>;
 
+type EmptyStatePreset = 'no-data' | 'no-results' | 'no-permission' | 'error' | 'coming-soon';
 interface EmptyStateProps {
     /** Ikona zobrazená nad titulkem. */
     icon?: React.ReactNode;
     /** Hlavní titulek prázdného stavu. */
-    title: string;
+    title?: string;
     /** Doplňkový popis. */
     description?: string;
-    /** Akční prvek — typicky tlačítko. */
+    /** Akční prvky — typicky tlačítka. */
     action?: React.ReactNode;
+    /**
+     * Přednastavený prázdný stav s ikonou, titulkem a popisem.
+     * Vlastní `icon`, `title`, `description` přepíší preset hodnoty.
+     */
+    preset?: EmptyStatePreset;
+    /** Velikost. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
     /** Dodatečná CSS třída. */
     className?: string;
     /** Další inline styly. */
@@ -1696,15 +1953,20 @@ interface EmptyStateProps {
  * Prázdný stav dle SM-UI design systému.
  *
  * Centrovaný layout s volitelnou ikonou, titulkem,
- * popisem a akčním tlačítkem.
+ * popisem a akčními tlačítky. Podporuje presety pro běžné scénáře.
  *
  * @example
  * ```tsx
  * <EmptyState
+ *   preset="no-results"
+ *   action={<Button>Vytvořit záznam</Button>}
+ * />
+ *
+ * <EmptyState
  *   icon={<InboxIcon />}
  *   title="Žádné výsledky"
- *   description="Zkuste upravit filtr nebo vytvořit nový záznam."
- *   action={<Button>Vytvořit záznam</Button>}
+ *   description="Zkuste upravit filtr."
+ *   action={<Button>Reset</Button>}
  * />
  * ```
  */
@@ -1714,18 +1976,21 @@ interface StatProps {
     /** Popisek statistiky. */
     label: string;
     /** Hodnota statistiky. */
-    value: string | number;
+    value?: string | number | React.ReactNode;
     /** Procentuální změna (zobrazí se se znaménkem). */
     change?: number;
     /** Doplňkový text k procentuální změně. */
     changeLabel?: string;
     /** Ikona zobrazená vedle hodnoty. */
     icon?: React.ReactNode;
-    /**
-     * Směr trendu — ovlivňuje barvu a ikonu šipky.
-     * @default 'neutral'
-     */
+    /** Směr trendu. @default 'neutral' */
     trend?: 'up' | 'down' | 'neutral';
+    /** Skeleton stav. @default false */
+    loading?: boolean;
+    /** Klikatelná karta s hover efektem. */
+    onClick?: () => void;
+    /** Sekundární text pod hodnotou. */
+    helper?: string | React.ReactNode;
     /** Dodatečná CSS třída. */
     className?: string;
     /** Další inline styly. */
@@ -1735,17 +2000,17 @@ interface StatProps {
  * Statistický ukazatel dle SM-UI design systému.
  *
  * Kompaktní kartička s popiskem, hodnotou, procentuální změnou
- * a volitelnou ikonou. Barva trendu se řídí hodnotou `trend`.
+ * a volitelnou ikonou. Podporuje loading skeleton a klikatelnost.
  *
  * @example
  * ```tsx
  * <Stat label="Objednávky" value={1284} change={12.5} trend="up" />
- * <Stat label="Náklady" value="€ 45 320" change={-3.2} trend="down" />
+ * <Stat label="Aktivní" value={loading ? undefined : 127} loading={loading} onClick={() => navigate('/tasks')} helper="z toho 12 po termínu" />
  * ```
  */
 declare const Stat: React.FC<StatProps>;
 
-type AvatarSize = 'sm' | 'md' | 'lg' | number;
+type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 interface AvatarProps {
     /**
      * Iniciály zobrazené uvnitř avataru (např. `"DC"`, `"JN"`).
@@ -1754,9 +2019,12 @@ interface AvatarProps {
     initials: string;
     /**
      * Velikost avataru.
-     * - `'sm'` — 40 px
-     * - `'md'` — 70 px  *(výchozí)*
-     * - `'lg'` — 96 px
+     * - `'2xs'` — 16 px
+     * - `'xs'` — 20 px
+     * - `'sm'` — 32 px
+     * - `'md'` — 40 px  *(výchozí)*
+     * - `'lg'` — 64 px
+     * - `'xl'` — 96 px
      * - `number` — přesná hodnota v pixelech
      * @default 'md'
      */
@@ -1789,6 +2057,42 @@ interface AvatarProps {
  */
 declare const Avatar: React.FC<AvatarProps>;
 
+interface AvatarStackProps {
+    /** Avatar elementy. Každý dostane forced consistent size a circular shape. */
+    children: React.ReactNode;
+    /** Max viditelných avatarů. Ostatní se sbalí do „+N" badge. @default 3 */
+    max?: number;
+    /** Forced size pro všechny avatary uvnitř. @default 'sm' */
+    size?: AvatarSize;
+    /** Mezera mezi avatary (negative margin). @default 'normal' */
+    spacing?: 'tight' | 'normal' | 'loose';
+    /** Z-stacking směr — který avatar je nahoře. @default 'ltr' */
+    direction?: 'ltr' | 'rtl';
+    /** Tooltip nad „+N" badge. String nebo funkce (hiddenCount) => string. */
+    overflowTooltip?: string | ((hiddenCount: number) => string);
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Overlap pattern pro více avatarů.
+ *
+ * Zobrazí max N avatarů s překrytím + „+N" badge pro zbytek.
+ * Children avatary se forced-resize na zadaný size a kruhový tvar.
+ *
+ * @example
+ * ```tsx
+ * <AvatarStack max={3} size="sm">
+ *   <Avatar initials="JD" />
+ *   <Avatar initials="AB" />
+ *   <Avatar initials="MK" />
+ *   <Avatar initials="PV" />
+ * </AvatarStack>
+ * ```
+ */
+declare const AvatarStack: React.FC<AvatarStackProps>;
+
 interface TagProps {
     /**
      * Textový popisek zobrazený uvnitř tagu.
@@ -2127,20 +2431,35 @@ interface ModalProps {
     open: boolean;
     /** Voláno při zavření modálu. */
     onClose: () => void;
-    /** Titulek zobrazený v záhlaví modálu. */
-    title?: string;
+    /** Titulek zobrazený v záhlaví modálu. String nebo ReactNode pro vlastní hlavičku. */
+    title?: string | React.ReactNode;
+    /** Alternativní slot pro celou hlavičku (nahrazuje title + close button). */
+    titleSlot?: React.ReactNode;
     /** Obsah těla modálu. */
     children: React.ReactNode;
     /** Obsah patičky modálu (tlačítka apod.). */
     footer?: React.ReactNode;
     /** Velikostní preset modálu. @default 'md' */
     size?: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Explicitní šířka modálu. Přepíše `size`.
+     * Přijímá číslo (px) nebo CSS string (např. '90vw').
+     */
+    width?: number | string;
     /** Zavře modál kliknutím na překryvnou vrstvu. @default true */
     closeOnOverlay?: boolean;
     /** Zavře modál stisknutím klávesy Escape. @default true */
     closeOnEscape?: boolean;
+    /**
+     * Umožní zavření modálu (overlay click + ESC + close button).
+     * Když false, modál lze zavřít jen programově.
+     * @default true
+     */
+    dismissable?: boolean;
     /** Zobrazí zavírací tlačítko (×) v záhlaví. @default true */
     showClose?: boolean;
+    /** Zobrazí oddělovací čáru pod hlavičkou. @default true */
+    showHeaderDivider?: boolean;
     /** Dodatečná CSS třída pro kartu modálu. */
     className?: string;
     /** Další inline styly pro kartu modálu. */
@@ -2361,9 +2680,62 @@ interface StepperProps {
  */
 declare const Stepper: React.FC<StepperProps>;
 
-interface DropdownMenuItem {
-    /** Zobrazovaný popisek položky. */
+interface FormWizardStep {
+    /** Popisek kroku zobrazený ve Stepperu. */
     label: string;
+    /** Volitelný popis kroku. */
+    description?: string;
+    /** Obsah kroku (formulář, komponenta). */
+    content: React.ReactNode;
+    /** Validace před pokračováním. Vrací boolean nebo Promise<boolean>. */
+    validate?: () => boolean | Promise<boolean>;
+}
+interface FormWizardProps {
+    /** Definice kroků. */
+    steps: FormWizardStep[];
+    /** Index aktivního kroku (0-indexed). */
+    activeStep: number;
+    /** Callback při změně kroku. Při posledním kroku volá s `steps.length`. */
+    onStepChange: (step: number) => void;
+    /** Orientace stepperu. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Zobrazit navigační tlačítka (Předchozí/Další). @default true */
+    showNavigation?: boolean;
+    /** Text tlačítka na posledním kroku. @default 'Dokončit' */
+    finishLabel?: string;
+    /** Text tlačítka Další. @default 'Další' */
+    nextLabel?: string;
+    /** Text tlačítka Předchozí. @default 'Předchozí' */
+    prevLabel?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Vícekrokový formulářový průvodce.
+ *
+ * Kombinuje Stepper s obsahem kroků a navigačními tlačítky.
+ * Podporuje synchronní i asynchronní validaci před pokračováním.
+ *
+ * @example
+ * ```tsx
+ * <FormWizard
+ *   steps={[
+ *     { label: 'Kontakt', content: <ContactForm />, validate: () => isValid },
+ *     { label: 'Adresa', content: <AddressForm /> },
+ *     { label: 'Souhrn', content: <Summary /> },
+ *   ]}
+ *   activeStep={step}
+ *   onStepChange={setStep}
+ * />
+ * ```
+ */
+declare const FormWizard: React.FC<FormWizardProps>;
+
+interface DropdownMenuItem {
+    /** Zobrazovaný popisek položky. Může být text nebo ReactNode pro vlastní obsah. */
+    label: React.ReactNode;
     /** Volitelná ikona vykreslená před textem. */
     icon?: React.ReactNode;
     /** Voláno při kliknutí na položku. */
@@ -2374,6 +2746,14 @@ interface DropdownMenuItem {
     danger?: boolean;
     /** Při `true` se místo položky vykreslí oddělovací čára. @default false */
     divider?: boolean;
+    /** Text kategorie — zobrazí se jako malý nadpis sekce (uppercase label). */
+    category?: string;
+    /** Klávesová zkratka zobrazená vpravo (např. '⌘S', '⌘⌫'). */
+    shortcut?: string;
+    /** Při `true` se dropdown po kliknutí nezavře. Pro toggle položky. @default false */
+    keepOpenOnClick?: boolean;
+    /** Kaskádové submenu. Když nastaveno, klik/hover otevře submenu místo zavření. */
+    subItems?: DropdownMenuItem[];
 }
 interface DropdownMenuProps {
     /** Spouštěcí element (tlačítko apod.). */
@@ -2382,6 +2762,8 @@ interface DropdownMenuProps {
     items: DropdownMenuItem[];
     /** Pozice rozbalovací nabídky vůči triggeru. @default 'bottom-left' */
     position?: 'bottom-left' | 'bottom-right';
+    /** Otevřít nabídku pravým kliknutím místo levým. @default false */
+    triggerOnRightClick?: boolean;
     /** Dodatečná CSS třída pro obalový element. */
     className?: string;
     /** Další inline styly pro obalový element. */
@@ -2481,6 +2863,8 @@ interface SpotlightProps {
     onChange: (value: string) => void;
     /** Již filtrované výsledky k zobrazení, seskupené dle `category`. */
     results: SpotlightItem[];
+    /** Zobrazí stav načítání místo výsledků. @default false */
+    loading?: boolean;
     /** Placeholder text pro vyhledávací vstup. @default 'Hledat...' */
     placeholder?: string;
     /** Dodatečná CSS třída pro kartu spotlightu. */
@@ -2906,6 +3290,49 @@ interface AlertProps {
  */
 declare const Alert: React.FC<AlertProps>;
 
+type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+type BannerPosition = 'top' | 'bottom';
+interface BannerProps {
+    /** Vizuální varianta. @default 'info' */
+    variant?: BannerVariant;
+    /** Tučný titulek. */
+    title?: string;
+    /** Obsah banneru. */
+    children?: React.ReactNode;
+    /** Zobrazí zavírací tlačítko. @default false */
+    closable?: boolean;
+    /** Callback při zavření. */
+    onClose?: () => void;
+    /** Vlastní ikona. Pokud není zadána, použije se výchozí dle varianty. */
+    icon?: React.ReactNode;
+    /** Akční tlačítka na pravé straně. */
+    actions?: React.ReactNode;
+    /** Persistentní dismiss přes localStorage key. */
+    dismissKey?: string;
+    /** Pozice akcentního proužku. @default 'top' */
+    position?: BannerPosition;
+    /** Přilepí banner na pozici. @default false */
+    sticky?: boolean;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Oznámovací banner na celou šířku.
+ *
+ * Plnohodnotný banner pro oznámení, varování nebo chybové hlášky.
+ * Lze přilepit na horní nebo dolní okraj pomocí `sticky`.
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="warning" title="Údržba" sticky>
+ *   Systém bude nedostupný 12. dubna od 22:00.
+ * </Banner>
+ * ```
+ */
+declare const Banner: React.FC<BannerProps>;
+
 type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
 interface NotificationProps {
     /** Vizuální varianta notifikace. @default 'info' */
@@ -2950,107 +3377,84 @@ interface NotificationProps {
  */
 declare const Notification: React.FC<NotificationProps>;
 
-type ProgressBarSize = 'sm' | 'md' | 'lg';
+type ProgressBarSize = 'xs' | 'sm' | 'md';
+type ProgressVariant = 'default' | 'success' | 'warning' | 'danger';
+interface ProgressThreshold {
+    /** Hodnota (0-max) od které se aktivuje varianta. */
+    value: number;
+    /** Varianta použitá od této hodnoty. */
+    variant: ProgressVariant;
+}
 interface ProgressBarProps {
-    /**
-     * Aktuální hodnota průběhu v rozsahu 0–100.
-     */
+    /** Aktuální hodnota. */
     value: number;
-    /**
-     * Velikostní preset určující výšku lišty.
-     * - `'sm'` — 6 px
-     * - `'md'` — 10 px
-     * - `'lg'` — 16 px
-     * @default 'md'
-     */
+    /** Maximální hodnota. @default 100 */
+    max?: number;
+    /** Label: true = "X%", string = custom. @default false */
+    label?: string | boolean;
+    /** Barevný preset. @default 'default' */
+    variant?: ProgressVariant;
+    /** Auto-switch variant podle thresholds. */
+    thresholds?: ProgressThreshold[];
+    /** Velikost (výška). @default 'sm' */
     size?: ProgressBarSize;
-    /**
-     * Barva vyplněné části lišty.
-     * @default '#E8612D'
-     */
-    color?: string;
-    /**
-     * Zobrazí procentuální hodnotu vedle lišty.
-     * @default false
-     */
-    showValue?: boolean;
-    /**
-     * Volitelný popisek zobrazený nad lištou.
-     */
-    label?: string;
-    /**
-     * Zobrazí pruhovaný vzor na vyplněné části.
-     * @default false
-     */
+    /** Pruhovaný vzor. @default false */
     striped?: boolean;
-    /**
-     * Animuje pruhovaný vzor (vyžaduje `striped`).
-     * @default false
-     */
+    /** Animované pruhy. @default false */
     animated?: boolean;
-    /** Dodatečná CSS třída pro kořenový element. */
+    /** Neznámý progress — animovaný shimmer. @default false */
+    indeterminate?: boolean;
+    /** Dodatečná CSS třída. */
     className?: string;
-    /** Další inline styly pro kořenový element. */
+    /** Další inline styly. */
     style?: React.CSSProperties;
 }
 interface ProgressCircleProps {
-    /**
-     * Aktuální hodnota průběhu v rozsahu 0–100.
-     */
+    /** Aktuální hodnota. */
     value: number;
-    /**
-     * Velikost SVG v pixelech (šířka i výška).
-     * @default 64
-     */
+    /** Maximální hodnota. @default 100 */
+    max?: number;
+    /** Barevný preset. @default 'default' */
+    variant?: ProgressVariant;
+    /** Auto-switch variant podle thresholds. */
+    thresholds?: ProgressThreshold[];
+    /** Diameter v px. @default 48 */
     size?: number;
-    /**
-     * Šířka tahu (stroke) kruhu.
-     * @default 4
-     */
-    strokeWidth?: number;
-    /**
-     * Barva vyplněné části kruhu.
-     * @default '#E8612D'
-     */
-    color?: string;
-    /**
-     * Zobrazí procentuální hodnotu uprostřed kruhu.
-     * @default false
-     */
+    /** Tloušťka stroke. @default 4 */
+    thickness?: number;
+    /** Zobrazí "X%" uprostřed. @default false */
     showValue?: boolean;
-    /**
-     * Volitelný popisek zobrazený pod kruhem.
-     */
+    /** Custom render obsahu uprostřed (override showValue). */
+    valueLabel?: (value: number, max: number) => React.ReactNode;
+    /** Volitelný popisek pod kruhem. */
     label?: string;
-    /** Dodatečná CSS třída pro kořenový element. */
+    /** Dodatečná CSS třída. */
     className?: string;
-    /** Další inline styly pro kořenový element. */
+    /** Další inline styly. */
     style?: React.CSSProperties;
 }
 /**
- * Horizontální lišta zobrazující průběh operace.
+ * Horizontální progress indikátor.
  *
- * Podporuje tři velikosti, volitelné pruhy (s animací),
- * zobrazení procentuální hodnoty a popisek.
+ * Podporuje varianty, thresholds, pruhy, indeterminate stav a a11y.
  *
  * @example
  * ```tsx
- * <ProgressBar value={45} showValue />
- * <ProgressBar value={70} size="lg" striped animated label="Nahrávání" />
+ * <ProgressBar value={45} label />
+ * <ProgressBar value={80} variant="success" size="md" striped animated />
+ * <ProgressBar indeterminate />
  * ```
  */
 declare const ProgressBar: React.FC<ProgressBarProps>;
 /**
- * Kruhový indikátor průběhu pomocí SVG.
+ * Kruhový progress indikátor (SVG).
  *
- * Hodnota 0–100 se vykresluje jako oblouk kolem kruhu pomocí
- * `stroke-dasharray` / `stroke-dashoffset`. Volitelně zobrazí
- * procentuální hodnotu uprostřed a popisek pod kruhem.
+ * Podporuje varianty, thresholds, custom obsah uprostřed a a11y.
  *
  * @example
  * ```tsx
  * <ProgressCircle value={75} showValue />
- * <ProgressCircle value={50} size={80} strokeWidth={6} color="#00A205" label="Stahování" />
+ * <ProgressCircle value={45} max={60} variant="warning" valueLabel={(v, m) => `${v}/${m}`} />
  * ```
  */
 declare const ProgressCircle: React.FC<ProgressCircleProps>;
@@ -3418,6 +3822,92 @@ interface DragListProps {
  */
 declare const DragList: React.FC<DragListProps>;
 
+interface SortableListProps<T> {
+    /** Datové položky. */
+    items: T[];
+    /** Stable key pro React reconciliation + drag tracking. */
+    keyExtractor: (item: T) => string | number;
+    /** Render každé položky. dragHandle je DOM node co lze umístit kdekoli. */
+    renderItem: (item: T, dragHandle: React.ReactNode) => React.ReactNode;
+    /** Po dokončení dragu, nové pořadí celého arraye. */
+    onReorder: (newOrder: T[]) => void;
+    /** Osa řazení. @default 'vertical' */
+    direction?: 'vertical' | 'horizontal';
+    /** whole = drag celé položky; explicit = jen z handle node. @default 'whole' */
+    handle?: 'whole' | 'explicit';
+    /** Vypne drag. @default false */
+    disabled?: boolean;
+    /** Mezera mezi položkami. */
+    gap?: number | string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Drag-to-reorder generic list.
+ *
+ * Podporuje myš i touch, klávesové ovládání (Tab → Space pick → arrows move → Space drop),
+ * insertion line indikátor a explicit/whole handle mode.
+ *
+ * @example
+ * ```tsx
+ * <SortableList
+ *   items={priorities}
+ *   keyExtractor={(p) => p.id}
+ *   onReorder={savePriorities}
+ *   renderItem={(item, dragHandle) => (
+ *     <div style={{ display: 'flex', gap: 8 }}>
+ *       {dragHandle}
+ *       <span>{item.label}</span>
+ *     </div>
+ *   )}
+ *   handle="explicit"
+ * />
+ * ```
+ */
+declare function SortableList<T>({ items, keyExtractor, renderItem, onReorder, direction, handle, disabled, gap, style, className, }: SortableListProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SplitterProps {
+    /** Směr rozdělení. horizontal = vertikální separátor. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Dva nebo více panelů. */
+    children: React.ReactNode[];
+    /** Iniciální velikosti v procentech. @default rovnoměrně */
+    defaultSizes?: number[];
+    /** Min velikost per panel v px. */
+    minSizes?: number[];
+    /** Max velikost per panel v px. */
+    maxSizes?: number[];
+    /** Callback s aktuálními velikostmi (px) během dragu. */
+    onResize?: (sizes: number[]) => void;
+    /** localStorage key — uloží + obnoví velikosti. */
+    persistKey?: string;
+    /** Šířka separátoru v px. @default 4 */
+    dividerSize?: number;
+    /** Vypne resize. @default false */
+    disabled?: boolean;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Draggable separator mezi panely.
+ *
+ * Podporuje horizontální i vertikální dělení, min/max constraints,
+ * persist do localStorage a touch ovládání.
+ *
+ * @example
+ * ```tsx
+ * <Splitter defaultSizes={[30, 70]} minSizes={[200, 400]} persistKey="main-split">
+ *   <div>Sidebar</div>
+ *   <div>Content</div>
+ * </Splitter>
+ * ```
+ */
+declare const Splitter: React.FC<SplitterProps>;
+
 type Theme = 'light' | 'dark';
 /**
  * Zjistí aktuální téma aplikace.
@@ -3426,4 +3916,4 @@ type Theme = 'light' | 'dark';
  */
 declare const useTheme: () => Theme;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, AppSidebar, type AppSidebarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchorProps, type ButtonAsButtonProps, type ButtonIconPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerMaxWidth, type ContainerProps, CopyButton, type CopyButtonProps, DataGrid, type DataGridColumn, type DataGridProps, DataList, type DataListItem, type DataListProps, DatePicker, DatePickerGroup, type DatePickerGroupProps, type DatePickerProps, type DatePickerSize, Divider, type DividerOrientation, type DividerProps, type DragHandleProps, DragList, type DragListItem, type DragListProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, Link, type LinkProps, type LinkVariant, MobileDataCard, type MobileDataCardColumn, type MobileDataCardProps, Modal, type ModalProps, Navbar, type NavbarProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputVariant, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, Rating, type RatingProps, type RatingSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, Sheet, type SheetProps, SidebarItem, type SidebarItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, Spinner, type SpinnerProps, type SpinnerSize, Spotlight, type SpotlightItem, type SpotlightProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type StepItem, Stepper, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, TagItem, type TagItemProps, type TagProps, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type Theme, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UploadedFile, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, AppSidebar, type AppSidebarProps, Avatar, type AvatarProps, type AvatarSize, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, Banner, type BannerPosition, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchorProps, type ButtonAsButtonProps, type ButtonIconPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerMaxWidth, type ContainerProps, CopyButton, type CopyButtonProps, type Country, type CropArea, type CropShape, DataGrid, type DataGridColumn, type DataGridProps, DataList, type DataListItem, type DataListProps, DatePicker, DatePickerGroup, type DatePickerGroupProps, type DatePickerProps, type DatePickerSize, Divider, type DividerOrientation, type DividerProps, type DragHandleProps, DragList, type DragListItem, type DragListProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStatePreset, type EmptyStateProps, FileUpload, type FileUploadProps, FormField, type FormFieldProps, FormWizard, type FormWizardProps, type FormWizardStep, IconButton, type IconButtonProps, ImageCropper, type ImageCropperProps, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, Link, type LinkProps, type LinkVariant, MobileDataCard, type MobileDataCardColumn, type MobileDataCardProps, Modal, type ModalProps, Navbar, type NavbarProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputVariant, OTPInput, type OTPInputProps, Pagination, type PaginationProps, PhoneInput, type PhoneInputProps, type PhoneInputSize, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressThreshold, type ProgressVariant, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, Rating, type RatingProps, type RatingSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, Sheet, type SheetProps, SidebarItem, type SidebarItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, SortableList, type SortableListProps, Spinner, type SpinnerProps, type SpinnerSize, Splitter, type SplitterProps, Spotlight, type SpotlightItem, type SpotlightProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type StepItem, Stepper, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, TagItem, type TagItemProps, type TagProps, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type Theme, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UploadedFile, useTheme, useToast };