@smworks-cz/ui-kit 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2414 @@
+import React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonIconPosition = 'left' | 'right';
+/** Sdílené props pro režim `<button>` i `<a>`. */
+interface ButtonBaseProps {
+    /**
+     * Vizuální varianta tlačítka.
+     * - `primary`   — oranžové vyplnění (#FC4F00)
+     * - `secondary` — průhledné, bez okraje
+     * - `outline`   — průhledné s bílým okrajem
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Volitelná ikona — libovolný React uzel (SVG, komponenta…).
+     * Při použití bez `children` se tlačítko vykreslí jako čtverec.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Na které straně se ikona zobrazí vzhledem k textu.
+     * @default 'left'
+     */
+    iconPosition?: ButtonIconPosition;
+    /**
+     * Při `true` je tlačítko neaktivní a místo ikony se zobrazí spinner
+     * (nebo samotný spinner, pokud ikona chybí).
+     * Ukazatel myši je blokován; `onClick` se nevyvolá.
+     */
+    loading?: boolean;
+    /**
+     * Roztáhne tlačítko na celou šířku kontejneru.
+     */
+    fullWidth?: boolean;
+    /**
+     * Další inline styly aplikované na kořenový element (`<button>` nebo `<a>`).
+     * Sloučeny za všechny variantní / velikostní styly — pro jednorázové přepsání.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Dodatečná CSS třída pro kořenový element.
+     */
+    className?: string;
+    /**
+     * Textový obsah tlačítka.
+     * Při vynechání (pokud je zadána `icon`) se tlačítko vykreslí jako čtverec.
+     */
+    children?: React.ReactNode;
+}
+/** Vykreslení jako nativní `<button>` (výchozí). Dědí všechny standardní atributy — včetně `onClick`, `type`, `form`, `name`, `value`, `aria-*` apod. */
+interface ButtonAsButtonProps extends ButtonBaseProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> {
+    /** Při vynechání se komponenta vykreslí jako `<button>`. */
+    href?: undefined;
+}
+/** Vykreslení jako `<a>` odkaz, pokud je zadáno `href`. Vhodné pro navigační tlačítka. */
+interface ButtonAsAnchorProps extends ButtonBaseProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> {
+    href: string;
+}
+type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Popisek zobrazený nad vstupním polem.
+     * Stylizován velkými písmeny dle SM-UI design systému.
+     * Pokud je `required`, zobrazí se hvězdička.
+     */
+    label?: string;
+    /**
+     * Ikona vykreslená uvnitř vstupního pole.
+     * Typicky SVG nebo komponenta ikony.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Na které straně se ikona zobrazí.
+     * @default 'left'
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Při `true` se pole zobrazí jako nevalidní (červený okraj).
+     * Při zadání řetězce se pod polem zobrazí chybová zpráva.
+     */
+    error?: boolean | string;
+    /**
+     * Nápovědný text zobrazený pod vstupním polem.
+     * Nezobrazí se pokud je aktivní chybová zpráva.
+     */
+    helperText?: string;
+    /**
+     * Při `true` se zobrazí spinner a pole přejde do režimu pouze pro čtení.
+     * Vhodné pro asynchronní validaci nebo načítání dat.
+     */
+    loading?: boolean;
+    /**
+     * Zobrazí tlačítko pro vymazání obsahu pole (✕).
+     * Funguje pouze pokud pole obsahuje hodnotu.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Zobrazí tlačítko pro přepínání viditelnosti hesla (oko).
+     * Při `type="password"` se aktivuje automaticky.
+     * Nastavte na `false` pro vypnutí.
+     */
+    passwordToggle?: boolean;
+    /**
+     * Velikostní preset.
+     * - `'sm'` — kompaktní (padding 6px, font 14px)
+     * - `'md'` — výchozí (padding 8px, font 16px)
+     * - `'lg'` — velký (padding 10px, font 18px)
+     * @default 'md'
+     */
+    size?: InputSize;
+    /**
+     * Roztáhne pole na celou šířku kontejneru.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Další inline styly pro **obalový** `<div>` (ne pro nativní input).
+     * Pro stylování nativního `<input>` použijte `inputStyle`.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Dodatečná CSS třída pro **obalový** `<div>`.
+     */
+    className?: string;
+    /**
+     * Další inline styly aplikované přímo na nativní `<input>` element.
+     */
+    inputStyle?: React.CSSProperties;
+}
+interface InputGroupProps {
+    /**
+     * Text popisku vykreslený nad vstupním polem.
+     * Zobrazuje se velkými písmeny dle SM-UI design systému.
+     */
+    label: string;
+    /**
+     * Hodnota `htmlFor` propojující `<label>` s potomkem `<input>`.
+     * Automaticky generováno, pokud není zadáno.
+     */
+    htmlFor?: string;
+    /**
+     * Vstupní element(y) vykreslené uvnitř skupiny.
+     * Při vynechání se vykreslí výchozí `<Input />`.
+     */
+    children?: React.ReactNode;
+    /** Další inline styly pro obalový `<div>`. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obalový `<div>`. */
+    className?: string;
+}
+/**
+ * Řízené / neřízené textové pole dle SM-UI design systému.
+ *
+ * Podporuje popisek, ikonu, chybový stav, nápovědný text,
+ * vymazání hodnoty, velikostní presety a tmavý / světlý režim.
+ *
+ * Všechny nativní atributy `<input>` (`value`, `onChange`, `onBlur`, `placeholder`,
+ * `type`, `autoComplete`, `maxLength`, `readOnly`, `disabled`, …) jsou přesměrovány.
+ *
+ * @example
+ * ```tsx
+ * <Input label="E-mail" placeholder="jmeno@priklad.cz" required />
+ * <Input icon={<SearchIcon />} placeholder="Hledat…" clearable />
+ * <Input error="Toto pole je povinné" value="" />
+ * <Input label="Heslo" type="password" helperText="Min. 8 znaků" />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Obalí `<Input>` (nebo jiný formulářový prvek) skupinou s popiskem.
+ * Popisek je stylizován velkými písmeny dle SM-UI design systému.
+ *
+ * Pro jednoduché případy lze použít přímo `<Input label="..." />`.
+ * `InputGroup` je vhodný pro kompozici více prvků pod jedním popiskem.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup label="Adresa">
+ *   <Input placeholder="Ulice" />
+ *   <Input placeholder="Město" />
+ * </InputGroup>
+ * ```
+ */
+declare const InputGroup: React.FC<InputGroupProps>;
+
+interface SelectOption {
+    /** Unikátní hodnota položky. */
+    value: string;
+    /** Zobrazovaný popisek. Pokud chybí, použije se `value`. */
+    label?: string;
+    /** Při `true` nelze položku vybrat. */
+    disabled?: boolean;
+}
+interface SelectProps {
+    /** Dostupné položky k výběru. */
+    options: SelectOption[];
+    /**
+     * Aktuální hodnota.
+     * - Jednoduchý výběr: `string | null`
+     * - Vícenásobný výběr: `string[]`
+     */
+    value?: string | string[] | null;
+    /**
+     * Voláno při změně výběru.
+     * - Jednoduchý výběr: `(value: string | null) => void`
+     * - Vícenásobný výběr: `(value: string[]) => void`
+     */
+    onChange?: (value: any) => void;
+    /** Umožní vybrat více položek najednou. @default false */
+    multiple?: boolean;
+    /** Zobrazí textové pole pro filtrování položek. @default false */
+    searchable?: boolean;
+    /** Zobrazí tlačítko pro vymazání výběru. @default false */
+    clearable?: boolean;
+    /** Zakáže celý select. @default false */
+    disabled?: boolean;
+    /**
+     * Při `true` je select neinteraktivní a místo šipky se zobrazí spinner.
+     * Vhodné při asynchronním načítání položek.
+     * @default false
+     */
+    loading?: boolean;
+    /** Označí select jako nevalidní — přijímá `true` nebo textovou chybovou zprávu. */
+    error?: boolean | string;
+    /** Zástupný text zobrazený při prázdném výběru. */
+    placeholder?: string;
+    /** Maximální výška (px) rozbalovacího seznamu před scrollováním. @default 240 */
+    maxDropdownHeight?: number;
+    /** Další inline styly pro kořenový obal. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový obal. */
+    className?: string;
+}
+interface SelectGroupProps {
+    /** Text popisku nad selectem, velkými písmeny dle SM-UI design systému. */
+    label: string;
+    /** `htmlFor` propojující `<label>` se selectem. Automaticky generováno, pokud chybí. */
+    htmlFor?: string;
+    /** Select element(y) vykreslené uvnitř skupiny. */
+    children?: React.ReactNode;
+    /** Další inline styly pro obal. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obal. */
+    className?: string;
+}
+/**
+ * Vlastní rozbalovací výběr dle SM-UI design systému.
+ *
+ * Podporuje jednoduchý / vícenásobný výběr, fulltextové vyhledávání,
+ * vymazání hodnoty, chybový stav a tmavý / světlý režim přes `useTheme`.
+ *
+ * Dropdown se vykresluje přes React portál, takže ho neořízne
+ * rodičovský kontejner s `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * // Jednoduchý výběr
+ * <Select
+ *   options={[{ value: 'cz', label: 'Česko' }, { value: 'sk', label: 'Slovensko' }]}
+ *   value={zeme}
+ *   onChange={setZeme}
+ *   placeholder="Vyberte zemi"
+ *   clearable
+ * />
+ *
+ * // Vícenásobný výběr s vyhledáváním
+ * <Select
+ *   options={tagy}
+ *   value={vybraneTaxy}
+ *   onChange={setVybraneTaxy}
+ *   multiple
+ *   searchable
+ *   placeholder="Vyberte tagy…"
+ * />
+ * ```
+ */
+declare const Select: React.FC<SelectProps>;
+/**
+ * Obalí `<Select>` skupinou s popiskem, vizuálně odpovídá `InputGroup`.
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup label="Země">
+ *   <Select options={zeme} value={zeme} onChange={setZeme} />
+ * </SelectGroup>
+ * ```
+ */
+declare const SelectGroup: React.FC<SelectGroupProps>;
+
+type DatePickerSize = 'sm' | 'md' | 'lg';
+interface DatePickerProps {
+    /**
+     * Režim výběru data.
+     * - `'single'` — výběr jednoho data
+     * - `'range'` — výběr rozsahu (od–do)
+     * @default 'single'
+     */
+    mode?: 'single' | 'range';
+    /**
+     * Zobrazí výběr času (hodiny a minuty) pod kalendářem.
+     * @default false
+     */
+    showTime?: boolean;
+    /**
+     * Aktuální hodnota.
+     * - `single` režim: `Date | null`
+     * - `range` režim: `[Date | null, Date | null]`
+     */
+    value?: Date | null | [Date | null, Date | null];
+    /**
+     * Voláno při změně výběru.
+     * - `single` režim: `(value: Date | null) => void`
+     * - `range` režim: `(value: [Date | null, Date | null]) => void`
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Popisek zobrazený nad vstupním polem.
+     * Stylizován velkými písmeny dle SM-UI design systému.
+     */
+    label?: string;
+    /** Zástupný text zobrazený při prázdné hodnotě. */
+    placeholder?: string;
+    /**
+     * Při `true` se pole zobrazí jako nevalidní (červený okraj).
+     * Při zadání řetězce se pod polem zobrazí chybová zpráva.
+     */
+    error?: boolean | string;
+    /** Nápovědný text zobrazený pod vstupním polem. */
+    helperText?: string;
+    /** Zakáže celý DatePicker. @default false */
+    disabled?: boolean;
+    /**
+     * Při `true` je DatePicker neinteraktivní a zobrazí spinner.
+     * @default false
+     */
+    loading?: boolean;
+    /** Zobrazí tlačítko pro vymazání výběru. @default false */
+    clearable?: boolean;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: DatePickerSize;
+    /** Roztáhne pole na celou šířku kontejneru. @default false */
+    fullWidth?: boolean;
+    /** Označí pole jako povinné (hvězdička u popisku). */
+    required?: boolean;
+    /** Minimální datum, které lze vybrat. */
+    minDate?: Date;
+    /** Maximální datum, které lze vybrat. */
+    maxDate?: Date;
+    /**
+     * První den v týdnu (ISO: 1=pondělí).
+     * @default 1
+     */
+    firstDayOfWeek?: number;
+    /** Další inline styly pro kořenový obal. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový obal. */
+    className?: string;
+}
+interface DatePickerGroupProps {
+    /** Text popisku nad DatePickerem, velkými písmeny dle SM-UI design systému. */
+    label: string;
+    /** `htmlFor` propojující `<label>` s DatePickerem. Automaticky generováno, pokud chybí. */
+    htmlFor?: string;
+    /** DatePicker element(y) vykreslené uvnitř skupiny. */
+    children?: React.ReactNode;
+    /** Další inline styly pro obal. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obal. */
+    className?: string;
+}
+/**
+ * Výběr data (a volitelně času) dle SM-UI design systému.
+ *
+ * Podporuje jednoduchý výběr / rozsah, volitelný výběr času,
+ * omezení min/max datem, chybový stav a tmavý / světlý režim.
+ *
+ * Dropdown se vykresluje přes React portál, takže ho neořízne
+ * rodičovský kontejner s `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * // Jednoduchý výběr
+ * <DatePicker
+ *   label="Datum narození"
+ *   value={datum}
+ *   onChange={setDatum}
+ *   clearable
+ * />
+ *
+ * // Rozsah s časem
+ * <DatePicker
+ *   mode="range"
+ *   showTime
+ *   value={rozsah}
+ *   onChange={setRozsah}
+ *   placeholder="Vyberte rozsah…"
+ * />
+ * ```
+ */
+declare const DatePicker: React.FC<DatePickerProps>;
+/**
+ * Obalí `<DatePicker>` skupinou s popiskem, vizuálně odpovídá `InputGroup`.
+ *
+ * @example
+ * ```tsx
+ * <DatePickerGroup label="Datum akce">
+ *   <DatePicker value={datum} onChange={setDatum} />
+ * </DatePickerGroup>
+ * ```
+ */
+declare const DatePickerGroup: React.FC<DatePickerGroupProps>;
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface CheckboxProps {
+    /** Stav zaškrtnutí. */
+    checked?: boolean;
+    /** Callback volaný při změně stavu. */
+    onChange?: (checked: boolean) => void;
+    /** Textový popisek zobrazený vedle zaškrtávacího pole. */
+    label?: string;
+    /** Deaktivuje zaškrtávací pole. */
+    disabled?: boolean;
+    /**
+     * Chybový stav. Při `true` se zobrazí červený okraj.
+     * Při zadání řetězce se pod polem zobrazí chybová zpráva.
+     */
+    error?: boolean | string;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /** Neurčitý stav — zobrazí pomlčku místo zaškrtnutí. */
+    indeterminate?: boolean;
+    /** Dodatečná CSS třída pro obalový element. */
+    className?: string;
+    /** Další inline styly pro obalový element. */
+    style?: React.CSSProperties;
+}
+interface CheckboxGroupProps {
+    /** Popisek skupiny. */
+    label?: string;
+    /** Potomci — typicky komponenty `<Checkbox>`. */
+    children: React.ReactNode;
+    /** Chybový stav skupiny. Při řetězci se zobrazí chybová zpráva. */
+    error?: boolean | string;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Zaškrtávací pole dle SM-UI design systému.
+ *
+ * Podporuje vlastní SVG zaškrtnutí, neurčitý stav,
+ * chybový stav, velikostní presety a tmavý / světlý režim.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Souhlasím s podmínkami" checked={agreed} onChange={setAgreed} />
+ * <Checkbox indeterminate label="Vybrat vše" />
+ * ```
+ */
+declare const Checkbox: React.FC<CheckboxProps>;
+/**
+ * Skupina zaškrtávacích polí s volitelným popiskem.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup label="Zájmy">
+ *   <Checkbox label="Sport" checked={...} onChange={...} />
+ *   <Checkbox label="Hudba" checked={...} onChange={...} />
+ * </CheckboxGroup>
+ * ```
+ */
+declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+
+type RadioSize = 'sm' | 'md' | 'lg';
+interface RadioProps {
+    /** Hodnota tohoto přepínače. */
+    value: string;
+    /** Zda je tento přepínač vybrán. */
+    checked?: boolean;
+    /** Callback volaný při výběru. */
+    onChange?: (value: string) => void;
+    /** Textový popisek. */
+    label?: string;
+    /** Deaktivuje přepínač. */
+    disabled?: boolean;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+interface RadioGroupOption {
+    /** Hodnota volby. */
+    value: string;
+    /** Zobrazený popisek. */
+    label: string;
+    /** Deaktivuje tuto volbu. */
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    /** Aktuálně vybraná hodnota. */
+    value?: string;
+    /** Callback volaný při změně výběru. */
+    onChange?: (value: string) => void;
+    /** Popisek skupiny. */
+    label?: string;
+    /** Seznam voleb. */
+    options: RadioGroupOption[];
+    /**
+     * Směr rozložení voleb.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Chybový stav. Při řetězci se zobrazí chybová zpráva.
+     */
+    error?: boolean | string;
+    /** Nápovědný text pod skupinou. */
+    helperText?: string;
+    /**
+     * Velikostní preset pro všechny přepínače ve skupině.
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Přepínací tlačítko (radio) dle SM-UI design systému.
+ *
+ * Používá vlastní SVG kruh s oranžovou tečkou při výběru.
+ * Podporuje velikostní presety a tmavý / světlý režim.
+ *
+ * @example
+ * ```tsx
+ * <Radio value="a" label="Volba A" checked={selected === 'a'} onChange={setSelected} />
+ * ```
+ */
+declare const Radio: React.FC<RadioProps>;
+/**
+ * Skupina přepínačů s popiskem, chybovým stavem a nápovědným textem.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   label="Pohlaví"
+ *   value={gender}
+ *   onChange={setGender}
+ *   options={[
+ *     { value: 'male', label: 'Muž' },
+ *     { value: 'female', label: 'Žena' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const RadioGroup: React.FC<RadioGroupProps>;
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+interface SwitchProps {
+    /** Stav přepínače. */
+    checked?: boolean;
+    /** Callback volaný při změně stavu. */
+    onChange?: (checked: boolean) => void;
+    /** Textový popisek zobrazený napravo od přepínače. */
+    label?: string;
+    /** Deaktivuje přepínač. */
+    disabled?: boolean;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: SwitchSize;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Přepínač (switch/toggle) dle SM-UI design systému.
+ *
+ * Pilulkový tvar s plynulou animací posunu.
+ * Oranžový ve stavu zapnuto, jemný okraj ve stavu vypnuto.
+ *
+ * @example
+ * ```tsx
+ * <Switch label="Noční režim" checked={dark} onChange={setDark} />
+ * ```
+ */
+declare const Switch: React.FC<SwitchProps>;
+
+type TextareaSize = 'sm' | 'md' | 'lg';
+type TextareaResize = 'none' | 'vertical' | 'both';
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /**
+     * Popisek zobrazený nad textovým polem.
+     * Stylizován velkými písmeny dle SM-UI design systému.
+     */
+    label?: string;
+    /**
+     * Při `true` se pole zobrazí jako nevalidní (červený okraj).
+     * Při zadání řetězce se pod polem zobrazí chybová zpráva.
+     */
+    error?: boolean | string;
+    /** Nápovědný text zobrazený pod polem. */
+    helperText?: string;
+    /** Při `true` se pole zobrazí jako neaktivní. */
+    disabled?: boolean;
+    /**
+     * Při `true` se pole zobrazí pouze pro čtení se sníženou opacitou.
+     */
+    loading?: boolean;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: TextareaSize;
+    /**
+     * Roztáhne pole na celou šířku kontejneru.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** Povinné pole — zobrazí hvězdičku u popisku. */
+    required?: boolean;
+    /**
+     * Počet řádků.
+     * @default 4
+     */
+    rows?: number;
+    /**
+     * Maximální počet znaků. Při zadání se zobrazí počítadlo.
+     */
+    maxLength?: number;
+    /**
+     * Režim změny velikosti textového pole.
+     * Ignorováno, pokud je `autoHeight` zapnuto.
+     * @default 'vertical'
+     */
+    resize?: TextareaResize;
+    /**
+     * Automatická výška — pole se přizpůsobí obsahu.
+     * Při zapnutí je `resize` automaticky nastaven na `'none'`.
+     * @default false
+     */
+    autoHeight?: boolean;
+    /**
+     * Minimální počet řádků (použito společně s `autoHeight`).
+     * Pokud `autoHeight` není zapnuto, funguje jako `rows`.
+     * @default 1
+     */
+    minRows?: number;
+    /**
+     * Maximální počet řádků (použito společně s `autoHeight`).
+     * Po dosažení se zobrazí scrollbar.
+     */
+    maxRows?: number;
+    /** Dodatečná CSS třída pro obalový element. */
+    className?: string;
+    /**
+     * Další inline styly pro **obalový** element.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Víceřádkové textové pole dle SM-UI design systému.
+ *
+ * Sdílí API s komponentou `Input` — podporuje popisek, chybový stav,
+ * nápovědný text, počítadlo znaků a velikostní presety.
+ *
+ * @example
+ * ```tsx
+ * <Textarea label="Poznámka" placeholder="Napište poznámku…" rows={5} />
+ * <Textarea label="Bio" maxLength={200} helperText="Krátký popis" />
+ * ```
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+type SliderSize = 'sm' | 'md' | 'lg';
+interface SliderProps {
+    /** Aktuální hodnota. Při `range` je to `[number, number]`. */
+    value: number | [number, number];
+    /** Callback volaný při změně hodnoty. */
+    onChange?: (value: number | [number, number]) => void;
+    /**
+     * Minimální hodnota.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximální hodnota.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Krok posunu.
+     * @default 1
+     */
+    step?: number;
+    /** Popisek nad sliderem. */
+    label?: string;
+    /** Deaktivuje slider. */
+    disabled?: boolean;
+    /**
+     * Zobrazí aktuální hodnotu vedle slideru.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Režim rozsahu — value musí být `[number, number]`.
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: SliderSize;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Posuvník dle SM-UI design systému.
+ *
+ * Podporuje jednoduchý i rozsahový režim, zobrazení hodnoty,
+ * velikostní presety a tmavý / světlý režim.
+ *
+ * @example
+ * ```tsx
+ * <Slider label="Hlasitost" value={volume} onChange={setVolume} showValue />
+ * <Slider range value={[20, 80]} onChange={setRange} label="Cenový rozsah" />
+ * ```
+ */
+declare const Slider: React.FC<SliderProps>;
+
+interface UploadedFile {
+    /** Objekt nativního souboru. */
+    file: File;
+    /** Unikátní ID pro klíč. */
+    id: string;
+}
+type FileUploadVariant = 'dropzone' | 'button';
+interface FileUploadProps {
+    /**
+     * Vizuální varianta.
+     * - `'dropzone'` — velká zóna s drag & drop (výchozí)
+     * - `'button'`   — kompaktní vstup ve stylu tlačítka/inputu
+     * @default 'dropzone'
+     */
+    variant?: FileUploadVariant;
+    /** Callback volaný při přidání souborů. Vrací pole nativních `File` objektů. */
+    onFiles?: (files: File[]) => void;
+    /**
+     * Povolené typy souborů (atribut `accept`).
+     * @example 'image/*,.pdf'
+     */
+    accept?: string;
+    /** Povolit výběr více souborů najednou. */
+    multiple?: boolean;
+    /** Maximální velikost souboru v bajtech. */
+    maxSize?: number;
+    /** Deaktivuje zónu pro nahrávání. */
+    disabled?: boolean;
+    /** Popisek nad zónou. */
+    label?: string;
+    /** Nápovědný text pod zónou. */
+    helperText?: string;
+    /**
+     * Chybový stav. Při řetězci se zobrazí chybová zpráva.
+     */
+    error?: boolean | string;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Zóna pro nahrávání souborů dle SM-UI design systému.
+ *
+ * Podporuje přetažení (drag & drop), výběr kliknutím,
+ * seznam nahraných souborů s možností odebrání a validaci velikosti.
+ *
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   label="Přílohy"
+ *   accept="image/*,.pdf"
+ *   multiple
+ *   maxSize={5 * 1024 * 1024}
+ *   onFiles={(files) => console.log(files)}
+ * />
+ * ```
+ */
+declare const FileUpload: React.FC<FileUploadProps>;
+
+interface TableColumn {
+    /** Klíč odpovídající hodnotě v datovém objektu. */
+    key: string;
+    /** Text záhlaví sloupce. */
+    header: string;
+    /** Povolí řazení podle tohoto sloupce. @default false */
+    sortable?: boolean;
+    /** Šířka sloupce (CSS hodnota). */
+    width?: string | number;
+    /** Vlastní vykreslovací funkce pro buňku. */
+    render?: (value: any, row: any, index: number) => React.ReactNode;
+}
+interface TableProps {
+    /** Definice sloupců tabulky. */
+    columns: TableColumn[];
+    /** Data k zobrazení — pole objektů. */
+    data: any[];
+    /** Při `true` se místo dat zobrazí skeleton řádky. @default false */
+    loading?: boolean;
+    /** Text zobrazený při prázdných datech. @default 'Žádná data' */
+    emptyText?: string;
+    /** Voláno při kliknutí na řaditelný sloupec. Řazení dat je na straně uživatele — komponenta pouze informuje o zvoleném klíči a směru. */
+    onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    /** Aktuální klíč řazení (pouze vizuální indikátor, samotné řazení provádí uživatel). */
+    sortKey?: string;
+    /** Aktuální směr řazení (pouze vizuální indikátor). */
+    sortDirection?: 'asc' | 'desc';
+    /** Střídání barvy řádků. @default false */
+    striped?: boolean;
+    /** Zvýraznění řádku při najetí myší. @default true */
+    hoverable?: boolean;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Datová tabulka dle SM-UI design systému.
+ *
+ * Podporuje řazení, loading stav se Skeleton řádky,
+ * prázdný stav, střídání barev řádků a tmavý / světlý režim.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', header: 'Jméno', sortable: true },
+ *     { key: 'email', header: 'E-mail' },
+ *   ]}
+ *   data={users}
+ *   onSort={handleSort}
+ *   sortKey="name"
+ *   sortDirection="asc"
+ *   striped
+ * />
+ * ```
+ */
+declare const Table: React.FC<TableProps>;
+
+interface CardProps {
+    /** Titulek karty. */
+    title?: string;
+    /** Podtitulek karty. */
+    subtitle?: string;
+    /** Vlastní obsah záhlaví — přepíše `title` a `subtitle`. */
+    header?: React.ReactNode;
+    /** Obsah patičky karty. */
+    footer?: React.ReactNode;
+    /** Obsah karty. */
+    children?: React.ReactNode;
+    /** Při `true` se karta jemně zvedne při najetí myší. @default false */
+    hoverable?: boolean;
+    /** Zobrazí rámeček kolem karty. @default true */
+    bordered?: boolean;
+    /**
+     * Velikost vnitřního odsazení.
+     * @default 'md'
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Karta dle SM-UI design systému.
+ *
+ * Podporuje titulek, záhlaví, patičku, hoverable efekt
+ * a tmavý / světlý režim přes `useTheme`.
+ *
+ * @example
+ * ```tsx
+ * <Card title="Statistiky" subtitle="Přehled za poslední měsíc">
+ *   <p>Obsah karty…</p>
+ * </Card>
+ * ```
+ */
+declare const Card: React.FC<CardProps>;
+
+interface AccordionItemProps {
+    /** Titulek položky. */
+    title: string;
+    /** Obsah zobrazený po rozbalení. */
+    children: React.ReactNode;
+    /** Při `true` bude položka výchozně rozbalena. @default false */
+    defaultOpen?: boolean;
+    /** Zakáže interakci s položkou. @default false */
+    disabled?: boolean;
+}
+interface AccordionProps {
+    /**
+     * Potomci — typicky komponenty `<AccordionItem>`.
+     */
+    children: React.ReactNode;
+    /** Povolí více současně otevřených položek. @default false */
+    multiple?: boolean;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Položka akordéonu. Používejte uvnitř `<Accordion>`.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem title="Sekce 1">
+ *   Obsah první sekce.
+ * </AccordionItem>
+ * ```
+ */
+declare const AccordionItem: React.FC<AccordionItemProps & {
+    /** @internal Řízeno rodičem Accordion. */
+    _controlled?: boolean;
+    /** @internal */
+    _open?: boolean;
+    /** @internal */
+    _onToggle?: () => void;
+}>;
+/**
+ * Akordéon dle SM-UI design systému.
+ *
+ * Obalí skupinu `<AccordionItem>` a řídí jejich otevírání.
+ * Ve výchozím stavu se otevře vždy pouze jedna položka najednou.
+ * Pro více současně otevřených položek nastavte `multiple`.
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem title="Sekce 1">Obsah 1</AccordionItem>
+ *   <AccordionItem title="Sekce 2">Obsah 2</AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.FC<AccordionProps>;
+
+interface TabsProps {
+    /** Aktuální aktivní hodnota. */
+    value: string;
+    /** Voláno při změně aktivní záložky. */
+    onChange: (value: string) => void;
+    /** Potomci — komponenty `<Tab>` a `<TabPanel>`. */
+    children: React.ReactNode;
+    /**
+     * Vizuální varianta.
+     * - `'underline'` — spodní linka na aktivní záložce
+     * - `'pills'` — oranžová pilulka na aktivní záložce
+     * @default 'underline'
+     */
+    variant?: 'underline' | 'pills';
+    /** Roztáhne záložky na celou šířku. @default false */
+    fullWidth?: boolean;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+interface TabProps {
+    /** Unikátní hodnota záložky. */
+    value: string;
+    /** Text záložky. */
+    label: string;
+    /** Zakáže záložku. @default false */
+    disabled?: boolean;
+    /** Ikona zobrazená před textem. */
+    icon?: React.ReactNode;
+}
+interface TabPanelProps {
+    /** Hodnota odpovídající záložce — panel se zobrazí, když je aktivní. */
+    value: string;
+    /** Obsah panelu. */
+    children: React.ReactNode;
+}
+/**
+ * Záložka uvnitř `<Tabs>`. Definuje jednu záložku v navigaci.
+ *
+ * @example
+ * ```tsx
+ * <Tab value="general" label="Obecné" />
+ * ```
+ */
+declare const Tab: React.FC<TabProps>;
+/**
+ * Panel obsahu spojený s konkrétní záložkou.
+ *
+ * @example
+ * ```tsx
+ * <TabPanel value="general">
+ *   Obsah záložky „Obecné".
+ * </TabPanel>
+ * ```
+ */
+declare const TabPanel: React.FC<TabPanelProps>;
+/**
+ * Záložkový komponent dle SM-UI design systému.
+ *
+ * Podporuje varianty `underline` a `pills`, velikostní presety
+ * a tmavý / světlý režim přes `useTheme`.
+ *
+ * @example
+ * ```tsx
+ * <Tabs value={active} onChange={setActive} variant="underline">
+ *   <Tab value="general" label="Obecné" />
+ *   <Tab value="advanced" label="Pokročilé" />
+ *   <TabPanel value="general">Obsah 1</TabPanel>
+ *   <TabPanel value="advanced">Obsah 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: React.FC<TabsProps>;
+
+interface TooltipProps {
+    /** Obsah tooltipu — text nebo ReactNode. */
+    content: string | React.ReactNode;
+    /** Trigger element obalený tooltipem. */
+    children: React.ReactElement;
+    /**
+     * Pozice tooltipu vůči triggeru.
+     * @default 'top'
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Prodleva před zobrazením (ms).
+     * @default 200
+     */
+    delay?: number;
+    /** Dodatečná CSS třída pro tooltip. */
+    className?: string;
+    /** Další inline styly pro tooltip. */
+    style?: React.CSSProperties;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Uložit změny">
+ *   <button>Uložit</button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.FC<TooltipProps>;
+
+interface PopoverProps {
+    /** Obsah popoveru. */
+    content: React.ReactNode;
+    /** Trigger element. */
+    children: React.ReactElement;
+    /**
+     * Pozice popoveru vůči triggeru.
+     * @default 'bottom'
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Způsob otevření.
+     * @default 'click'
+     */
+    trigger?: 'click' | 'hover';
+    /** Dodatečná CSS třída pro popover. */
+    className?: string;
+    /** Další inline styly pro popover. */
+    style?: React.CSSProperties;
+}
+/**
+ * Popover dle SM-UI design systému.
+ *
+ * Podobný Tooltipu, ale větší, s kartovým stylem.
+ * Otevírá se kliknutím nebo hoverem, zavírá kliknutím mimo nebo Escape.
+ * Vykresluje se přes React portál.
+ *
+ * @example
+ * ```tsx
+ * <Popover content={<div>Obsah popoveru</div>} trigger="click">
+ *   <button>Klikni</button>
+ * </Popover>
+ * ```
+ */
+declare const Popover: React.FC<PopoverProps>;
+
+interface SkeletonProps {
+    /**
+     * Tvar skeletonu.
+     * - `'text'` — obdélník s malou výškou, může vykreslovat více řádků
+     * - `'circle'` — kruh
+     * - `'rect'` — obdélník
+     * @default 'text'
+     */
+    variant?: 'text' | 'circle' | 'rect';
+    /** Šířka skeletonu. Přijímá číslo (px) nebo CSS řetězec. @default '100%' */
+    width?: number | string;
+    /** Výška skeletonu. Přijímá číslo (px) nebo CSS řetězec. */
+    height?: number | string;
+    /** Počet řádků pro variantu `'text'`. @default 1 */
+    lines?: number;
+    /** Zapne/vypne shimmer animaci. @default true */
+    animate?: boolean;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Zástupný prvek zobrazený při načítání obsahu.
+ *
+ * Podporuje tři varianty (`text`, `circle`, `rect`), shimmer animaci
+ * a tmavý / světlý režim přes `useTheme`.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" lines={3} />
+ * <Skeleton variant="circle" width={48} height={48} />
+ * <Skeleton variant="rect" width="100%" height={200} />
+ * ```
+ */
+declare const Skeleton: React.FC<SkeletonProps>;
+
+interface EmptyStateProps {
+    /** Ikona zobrazená nad titulkem. */
+    icon?: React.ReactNode;
+    /** Hlavní titulek prázdného stavu. */
+    title: string;
+    /** Doplňkový popis. */
+    description?: string;
+    /** Akční prvek — typicky tlačítko. */
+    action?: React.ReactNode;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Prázdný stav dle SM-UI design systému.
+ *
+ * Centrovaný layout s volitelnou ikonou, titulkem,
+ * popisem a akčním tlačítkem.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<InboxIcon />}
+ *   title="Žádné výsledky"
+ *   description="Zkuste upravit filtr nebo vytvořit nový záznam."
+ *   action={<Button>Vytvořit záznam</Button>}
+ * />
+ * ```
+ */
+declare const EmptyState: React.FC<EmptyStateProps>;
+
+interface StatProps {
+    /** Popisek statistiky. */
+    label: string;
+    /** Hodnota statistiky. */
+    value: string | number;
+    /** 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'
+     */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * 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`.
+ *
+ * @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" />
+ * ```
+ */
+declare const Stat: React.FC<StatProps>;
+
+type AvatarSize = 'sm' | 'md' | 'lg' | number;
+interface AvatarProps {
+    /**
+     * Iniciály zobrazené uvnitř avataru (např. `"DC"`, `"JN"`).
+     * Automaticky převedeny na velká písmena.
+     */
+    initials: string;
+    /**
+     * Velikost avataru.
+     * - `'sm'` — 40 px
+     * - `'md'` — 70 px  *(výchozí)*
+     * - `'lg'` — 96 px
+     * - `number` — přesná hodnota v pixelech
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Zaoblení rohů kontejneru avataru.
+     * @default '8px'
+     */
+    borderRadius?: React.CSSProperties['borderRadius'];
+    /**
+     * Přístupný popisek čtený čtečkami obrazovky.
+     * Pokud není zadán, použije se `"Avatar {initials}"`.
+     */
+    'aria-label'?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+}
+/**
+ * Kruhový / čtvercový avatar zobrazující iniciály uživatele
+ * na oranžovém gradientním pozadí.
+ *
+ * @example
+ * ```tsx
+ * <Avatar initials="DC" />
+ * <Avatar initials="JN" size="lg" />
+ * <Avatar initials="AB" size={56} borderRadius="50%" />
+ * ```
+ */
+declare const Avatar: React.FC<AvatarProps>;
+
+interface TagProps {
+    /**
+     * Textový popisek zobrazený uvnitř tagu.
+     */
+    label: string;
+    /**
+     * Callback volaný při kliknutí na tlačítko odebrání (✕).
+     * Pokud není zadán, tlačítko se nezobrazí.
+     */
+    onRemove?: () => void;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+}
+interface BadgeProps {
+    /**
+     * Text zobrazený uvnitř badge.
+     * Automaticky převeden na velká písmena dle SM-UI design systému.
+     */
+    label: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+}
+interface TagItemProps {
+    /**
+     * Hlavní popisek / název zobrazený v řádku seznamu.
+     */
+    label: string;
+    /**
+     * Callback volaný při kliknutí na tlačítko **filtrování**.
+     * Pokud není zadán, tlačítko se nezobrazí.
+     */
+    onFilter?: () => void;
+    /**
+     * Callback volaný při kliknutí na tlačítko **úpravy** (tužka).
+     * Pokud není zadán, tlačítko se nezobrazí.
+     */
+    onEdit?: () => void;
+    /**
+     * Callback volaný při kliknutí na tlačítko **smazání** (koš).
+     * Pokud není zadán, tlačítko se nezobrazí.
+     */
+    onDelete?: () => void;
+    /**
+     * Zda zobrazit sloupec s akcemi.
+     * Nastavte na `false` pro řádek pouze ke čtení.
+     * @default true
+     */
+    showActions?: boolean;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+}
+/**
+ * Malý odebíratelný štítek pro kategorizaci nebo označení položek.
+ * Tlačítko odebrání (✕) se zobrazí pouze pokud je zadáno `onRemove`.
+ *
+ * @example
+ * ```tsx
+ * <Tag label="React" />
+ * <Tag label="TypeScript" onRemove={() => removeTag('ts')} />
+ * ```
+ */
+declare const Tag: React.FC<TagProps>;
+/**
+ * Malý stavový badge vykreslený jako oranžová pilulka.
+ * Text je automaticky převeden na velká písmena.
+ *
+ * @example
+ * ```tsx
+ * <Badge label="Novinka" />
+ * <Badge label="Beta" />
+ * ```
+ */
+declare const Badge: React.FC<BadgeProps>;
+/**
+ * Řádek seznamu zobrazující pojmenovaný tag s volitelnými akčními tlačítky
+ * (filtrování, úprava, smazání).
+ *
+ * Tlačítka se jednotlivě skryjí, pokud nejsou zadány příslušné callbacky.
+ * Nastavte `showActions={false}` pro skrytí celého sloupce akcí.
+ *
+ * @example
+ * ```tsx
+ * <TagItem label="Domovská stránka" onEdit={editTag} onDelete={deleteTag} />
+ * <TagItem label="Blog" showActions={false} />
+ * ```
+ */
+declare const TagItem: React.FC<TagItemProps>;
+
+interface ModalProps {
+    /** Řídí zobrazení modálního okna. */
+    open: boolean;
+    /** Voláno při zavření modálu. */
+    onClose: () => void;
+    /** Titulek zobrazený v záhlaví modálu. */
+    title?: string;
+    /** 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';
+    /** 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;
+    /** Zobrazí zavírací tlačítko (×) v záhlaví. @default true */
+    showClose?: boolean;
+    /** Dodatečná CSS třída pro kartu modálu. */
+    className?: string;
+    /** Další inline styly pro kartu modálu. */
+    style?: React.CSSProperties;
+}
+/**
+ * Modální dialog dle SM-UI design systému.
+ *
+ * Vykresluje se přes React portál s překryvnou vrstvou,
+ * podporuje animace otevření / zavření, focus trap
+ * a zamezení scrollu pozadí.
+ *
+ * @example
+ * ```tsx
+ * <Modal open={isOpen} onClose={() => setOpen(false)} title="Potvrzení">
+ *   <p>Opravdu chcete pokračovat?</p>
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.FC<ModalProps>;
+
+interface DrawerProps {
+    /** Řídí zobrazení šuplíku. */
+    open: boolean;
+    /** Voláno při zavření šuplíku. */
+    onClose: () => void;
+    /** Strana, ze které se šuplík vysune. @default 'right' */
+    position?: 'left' | 'right';
+    /** Titulek zobrazený v záhlaví šuplíku. */
+    title?: string;
+    /** Obsah těla šuplíku. */
+    children: React.ReactNode;
+    /** Obsah patičky šuplíku. */
+    footer?: React.ReactNode;
+    /** Šířka panelu (px nebo CSS řetězec). @default 400 */
+    width?: string | number;
+    /** Zobrazí zavírací tlačítko (×). @default true */
+    showClose?: boolean;
+    /** Zavře šuplík kliknutím na překryvnou vrstvu. @default true */
+    closeOnOverlay?: boolean;
+    /** Dodatečná CSS třída pro panel šuplíku. */
+    className?: string;
+    /** Další inline styly pro panel šuplíku. */
+    style?: React.CSSProperties;
+}
+/**
+ * Vysuvný panel (Drawer) dle SM-UI design systému.
+ *
+ * Vykresluje se přes React portál, vysune se z levé nebo pravé strany
+ * s překryvnou vrstvou a plynulou animací.
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={isOpen} onClose={() => setOpen(false)} title="Nastavení">
+ *   <p>Obsah šuplíku</p>
+ * </Drawer>
+ * ```
+ */
+declare const Drawer: React.FC<DrawerProps>;
+
+interface BreadcrumbItem {
+    /** Zobrazovaný text položky. */
+    label: string;
+    /** URL odkazu. Pokud chybí, položka se vykreslí jako prostý text. */
+    href?: string;
+    /** Voláno při kliknutí na položku. */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Volitelná ikona vykreslená před textem. */
+    icon?: React.ReactNode;
+}
+interface BreadcrumbProps {
+    /** Seznam položek drobečkové navigace. */
+    items: BreadcrumbItem[];
+    /** Oddělovací znak mezi položkami. @default '/' */
+    separator?: React.ReactNode;
+    /** Dodatečná CSS třída pro obalový element. */
+    className?: string;
+    /** Další inline styly pro obalový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Drobečková navigace dle SM-UI design systému.
+ *
+ * Poslední položka je vždy zobrazena jako aktuální stránka
+ * (tučnější písmo, bez odkazu).
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Domů', href: '/' },
+ *     { label: 'Projekty', href: '/projekty' },
+ *     { label: 'Detail' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+
+interface PaginationProps {
+    /** Aktuální číslo stránky (1-indexed). */
+    page: number;
+    /** Celkový počet stránek. */
+    totalPages: number;
+    /** Voláno při změně stránky. */
+    onChange: (page: number) => void;
+    /** Počet stránek zobrazených kolem aktuální. @default 1 */
+    siblings?: number;
+    /** Zobrazí tlačítko pro první stránku. @default true */
+    showFirst?: boolean;
+    /** Zobrazí tlačítko pro poslední stránku. @default true */
+    showLast?: boolean;
+    /** Velikostní preset. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Dodatečná CSS třída pro obalový element. */
+    className?: string;
+    /** Další inline styly pro obalový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Stránkovací komponenta dle SM-UI design systému.
+ *
+ * Zobrazuje číselné tlačítka stránek s trojtečkami pro velké rozsahy,
+ * tlačítka Předchozí / Další a volitelně první / poslední stránku.
+ *
+ * @example
+ * ```tsx
+ * <Pagination page={3} totalPages={20} onChange={setPage} />
+ * ```
+ */
+declare const Pagination: React.FC<PaginationProps>;
+
+interface StepItem {
+    /** Popisek kroku. */
+    label: string;
+    /** Volitelný popis kroku. */
+    description?: string;
+}
+interface StepperProps {
+    /** Definice kroků. */
+    steps: StepItem[];
+    /** Index aktivního kroku (0-indexed). */
+    activeStep: number;
+    /** Orientace stepperu. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Umožní klikání na kroky pro přechod mezi nimi.
+     * Lze nastavit na `true` (klikatelné všechny kroky),
+     * `'completed'` (pouze dokončené a aktivní krok),
+     * nebo `false` (vypnuto).
+     * @default false
+     */
+    clickable?: boolean | 'completed';
+    /** Voláno při kliknutí na krok. Vrací index zvoleného kroku. */
+    onStepClick?: (stepIndex: number) => void;
+    /** Dodatečná CSS třída pro obalový element. */
+    className?: string;
+    /** Další inline styly pro obalový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Kroková komponenta (Stepper) dle SM-UI design systému.
+ *
+ * Zobrazuje číslované kroky s propojovacími čarami.
+ * Dokončené kroky mají oranžové pozadí se zaškrtnutím,
+ * aktivní krok má oranžový obrys, budoucí kroky jsou ztlumené.
+ *
+ * Lze zapnout klikatelnost kroků pomocí `clickable` a `onStepClick`,
+ * což uživateli umožní přecházet mezi kroky kliknutím.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   steps={[
+ *     { label: 'Kontaktní údaje' },
+ *     { label: 'Adresa', description: 'Doručovací adresa' },
+ *     { label: 'Platba' },
+ *     { label: 'Souhrn' },
+ *   ]}
+ *   activeStep={1}
+ *   clickable
+ *   onStepClick={(idx) => setStep(idx)}
+ * />
+ * ```
+ */
+declare const Stepper: React.FC<StepperProps>;
+
+interface DropdownMenuItem {
+    /** Zobrazovaný popisek položky. */
+    label: string;
+    /** Volitelná ikona vykreslená před textem. */
+    icon?: React.ReactNode;
+    /** Voláno při kliknutí na položku. */
+    onClick?: () => void;
+    /** Při `true` nelze položku vybrat. @default false */
+    disabled?: boolean;
+    /** Při `true` se položka zobrazí červeně (nebezpečná akce). @default false */
+    danger?: boolean;
+    /** Při `true` se místo položky vykreslí oddělovací čára. @default false */
+    divider?: boolean;
+}
+interface DropdownMenuProps {
+    /** Spouštěcí element (tlačítko apod.). */
+    trigger: React.ReactNode;
+    /** Seznam položek nabídky. */
+    items: DropdownMenuItem[];
+    /** Pozice rozbalovací nabídky vůči triggeru. @default 'bottom-left' */
+    position?: 'bottom-left' | 'bottom-right';
+    /** Dodatečná CSS třída pro obalový element. */
+    className?: string;
+    /** Další inline styly pro obalový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Rozbalovací nabídka dle SM-UI design systému.
+ *
+ * Otevírá se kliknutím na trigger element, zavírá se kliknutím
+ * mimo nebo klávesou Escape. Používá React portál
+ * s chytrým pozicováním (otevře se nad triggerem, pokud pod ním není místo).
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu
+ *   trigger={<Button>Akce</Button>}
+ *   items={[
+ *     { label: 'Upravit', onClick: () => {} },
+ *     { label: 'Duplikovat', onClick: () => {} },
+ *     { divider: true, label: '' },
+ *     { label: 'Smazat', danger: true, onClick: () => {} },
+ *   ]}
+ * />
+ * ```
+ */
+declare const DropdownMenu: React.FC<DropdownMenuProps>;
+
+type LinkVariant = 'default' | 'danger';
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    /**
+     * Barevná varianta.
+     * - `'default'` — bílá (tmavý režim) / tmavá (světlý režim)
+     * - `'danger'`  — červená `#EF3838` v obou režimech
+     * @default 'default'
+     */
+    variant?: LinkVariant;
+    /**
+     * Ikona vykreslená vedle textu odkazu.
+     * Typicky 14×14 SVG nebo komponenta ikony.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Na které straně se ikona zobrazí vzhledem k textu.
+     * @default 'left'
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Zda zobrazit ikonu.
+     * Umožňuje podmíněně skrýt ikonu bez odebrání prop.
+     * @default true
+     */
+    showIcon?: boolean;
+    /** Další inline styly pro `<a>` element. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro `<a>` element. */
+    className?: string;
+}
+/**
+ * Inline odkaz / akční trigger dle SM-UI design systému.
+ * Vykresluje se jako nativní `<a>` element a dědí všechny anchor atributy
+ * (`href`, `target`, `rel`, `onClick`, `aria-*`, …).
+ *
+ * Ve variantě `danger` používá červenou (#EF3838) pro destruktivní akce.
+ * Při hoveru se přidá jemné tmavé pozadí.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/nastaveni">Nastavení</Link>
+ * <Link variant="danger" onClick={onDelete} icon={<TrashIcon />}>Smazat</Link>
+ * <Link icon={<ArrowIcon />} iconPosition="right" href="/dalsi">Další krok</Link>
+ * ```
+ */
+declare const Link: React.FC<LinkProps>;
+
+interface SpotlightItem {
+    /** Unikátní identifikátor položky. */
+    id: string;
+    /** Hlavní zobrazovaný text. */
+    label: string;
+    /** Volitelný sekundární popis. */
+    description?: string;
+    /** Kategorie pro vizuální seskupení (např. "Komponenty", "Hooky"). */
+    category: string;
+    /** Volitelná ikona vedle textu. */
+    icon?: React.ReactNode;
+    /** Voláno při výběru položky (klik nebo Enter). */
+    onSelect: () => void;
+}
+interface SpotlightProps {
+    /** Řídí zobrazení spotlightu. */
+    open: boolean;
+    /** Voláno při zavření spotlightu. */
+    onClose: () => void;
+    /** Aktuální hodnota vyhledávacího vstupu (řízená komponenta). */
+    value: string;
+    /** Voláno při změně vyhledávacího vstupu. */
+    onChange: (value: string) => void;
+    /** Již filtrované výsledky k zobrazení, seskupené dle `category`. */
+    results: SpotlightItem[];
+    /** Placeholder text pro vyhledávací vstup. @default 'Hledat...' */
+    placeholder?: string;
+    /** Dodatečná CSS třída pro kartu spotlightu. */
+    className?: string;
+    /** Další inline styly pro kartu spotlightu. */
+    style?: React.CSSProperties;
+}
+/**
+ * Command-palette / spotlight overlay dle SM-UI design systému.
+ *
+ * Řízená komponenta – přijímá `value`, `onChange` a předfiltrované `results`.
+ * Logika filtrování zůstává na konzumentovi.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * const [query, setQuery] = useState('');
+ * const filtered = items.filter(i => i.label.toLowerCase().includes(query.toLowerCase()));
+ *
+ * <Spotlight
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   value={query}
+ *   onChange={setQuery}
+ *   results={filtered}
+ * />
+ * ```
+ */
+declare const Spotlight: React.FC<SpotlightProps>;
+
+type SegmentedControlSize = 'sm' | 'md' | 'lg';
+interface SegmentedControlItem {
+    /** Unikátní hodnota segmentu. */
+    value: string;
+    /** Zobrazovaný text. Výchozí: `value`. */
+    label?: string;
+    /** Zakáže tento segment. */
+    disabled?: boolean;
+}
+interface SegmentedControlProps {
+    /**
+     * Data — pole řetězců nebo objektů `{ value, label?, disabled? }`.
+     * Řetězce jsou automaticky převedeny na objekty s `value === label`.
+     */
+    data: (string | SegmentedControlItem)[];
+    /** Aktuálně vybraná hodnota (řízená komponenta). */
+    value: string;
+    /** Callback volaný při změně výběru. */
+    onChange: (value: string) => void;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: SegmentedControlSize;
+    /**
+     * Roztáhne komponentu na celou šířku kontejneru.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Orientace segmentů.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Zakáže celou komponentu.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Segmentovaný přepínač dle SM-UI design systému.
+ *
+ * Podobný záložkám, ale v kompaktnějším inline formátu
+ * s animovaným indikátorem posuvným mezi segmenty.
+ *
+ * @example
+ * ```tsx
+ * const [view, setView] = useState('list');
+ *
+ * <SegmentedControl
+ *   data={['list', 'grid', 'table']}
+ *   value={view}
+ *   onChange={setView}
+ * />
+ * ```
+ */
+declare const SegmentedControl: React.FC<SegmentedControlProps>;
+
+type ToastVariant = 'info' | 'success' | 'error';
+interface ToastProps {
+    /**
+     * Vizuální varianta určující barvu okraje a tón pozadí.
+     * - `'info'`    — bílý / neutrální okraj, tmavé pozadí
+     * - `'success'` — zelený okraj (#00A205), tmavé nazelenalé pozadí
+     * - `'error'`   — červený okraj (#DE0000), tmavé načervenalé pozadí
+     * @default 'info'
+     */
+    variant?: ToastVariant;
+    /**
+     * Tučný nadpis notifikace.
+     */
+    title: string;
+    /**
+     * Volitelný sekundární popis vykreslený pod nadpisem menším písmem.
+     */
+    content?: string;
+    /**
+     * Vlastní ikona vykreslená na levé straně.
+     * Pokud chybí, použije se vestavěná SVG ikona odpovídající variantě.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Callback volaný při kliknutí na tlačítko zavření (✕).
+     * Pokud není zadán, tlačítko zavření se nezobrazí.
+     */
+    onClose?: () => void;
+    /**
+     * ARIA role pro přístupnost.
+     * Použijte `'alert'` pro naléhavé zprávy, `'status'` pro běžné.
+     * @default 'alert'
+     */
+    role?: 'alert' | 'status' | 'log';
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+}
+/**
+ * Notifikace se třemi úrovněmi závažnosti.
+ * Vykresluje se s efektem rozmazaného skla, vždy v tmavém režimu.
+ *
+ * Tlačítko zavření se zobrazí pouze pokud je zadáno `onClose`.
+ * Vlastní ikona může nahradit výchozí variantní ikonu přes prop `icon`.
+ *
+ * @example
+ * ```tsx
+ * <Toast variant="success" title="Uloženo" content="Změny byly uloženy." onClose={dismiss} />
+ * <Toast variant="error"   title="Chyba" content="Něco se pokazilo." onClose={dismiss} />
+ * <Toast variant="info"    title="Upozornění" onClose={dismiss} />
+ * ```
+ */
+declare const Toast: React.FC<ToastProps>;
+
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** Nastavení předávaná do `toast()` při vyvolání notifikace. */
+interface ToastOptions {
+    /**
+     * Úroveň závažnosti — ovládá barvu okraje a výchozí ikonu.
+     * @default 'info'
+     */
+    variant?: ToastVariant;
+    /** Tučný nadpis notifikace. */
+    title: string;
+    /** Volitelný popis vykreslený pod nadpisem. */
+    content?: string;
+    /**
+     * Vlastní ikona nahrazující vestavěnou variantní ikonu.
+     * Libovolný React uzel — SVG, obrázek, komponenta…
+     */
+    icon?: React.ReactNode;
+    /**
+     * Časový limit automatického zavření v ms.
+     * Nastavte na `0` pro trvalou notifikaci, kterou je nutné zavřít ručně.
+     * @default 4000
+     */
+    duration?: number;
+}
+/** Hodnota vrácená hookem `useToast()`. */
+interface ToastContextValue {
+    /**
+     * Vyvolá novou notifikaci.
+     * Vrací vygenerované `id` pro případné ruční zavření.
+     *
+     * @example
+     * ```tsx
+     * const { toast } = useToast();
+     * toast({ variant: 'success', title: 'Uloženo', content: 'Změny byly uloženy.' });
+     * ```
+     */
+    toast: (options: ToastOptions) => string;
+    /**
+     * Ručně zavře notifikaci podle jejího `id`.
+     * Toast se nejprve animovaně vysune a poté se odebere z DOM.
+     *
+     * @example
+     * ```tsx
+     * const id = toast({ variant: 'info', title: 'Načítání…', duration: 0 });
+     * await work();
+     * dismiss(id);
+     * ```
+     */
+    dismiss: (id: string) => void;
+}
+/** Props pro `<ToasterProvider>`. */
+interface ToasterProviderProps {
+    children: React.ReactNode;
+    /**
+     * Pozice notifikací na obrazovce.
+     * @default 'bottom-right'
+     */
+    position?: ToastPosition;
+    /**
+     * Šířka jednotlivé notifikace v px.
+     * @default 380
+     */
+    toastWidth?: number;
+    /**
+     * Vertikální mezera mezi notifikacemi v **rozbalené** (hovered) podobě, v px.
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Vzdálenost od okraje obrazovky v px.
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * Maximální počet notifikací v DOM najednou.
+     * Nejstarší se odebírají při překročení limitu.
+     * @default 5
+     */
+    maxToasts?: number;
+    /**
+     * Globální výchozí doba trvání notifikace v ms.
+     * Přepíše se hodnotou `duration` v `toast()`, pokud je zadána.
+     * Nastavte na `0` pro trvalé notifikace.
+     * @default 4000
+     */
+    duration?: number;
+}
+/**
+ * Poskytuje toast kontext a vykresluje overlay s notifikacemi.
+ * Umístěte **jednou** blízko kořene vaší aplikace.
+ *
+ * @example
+ * ```tsx
+ * // main.tsx / App.tsx
+ * <ToasterProvider position="bottom-right">
+ *   <App />
+ * </ToasterProvider>
+ * ```
+ */
+declare const ToasterProvider: React.FC<ToasterProviderProps>;
+/**
+ * Vrací `{ toast, dismiss }` pro vyvolání a zavření notifikací.
+ * Musí být volán uvnitř stromu `<ToasterProvider>`.
+ *
+ * @throws Při volání mimo `<ToasterProvider>`.
+ *
+ * @example
+ * ```tsx
+ * function UlozitTlacitko() {
+ *   const { toast } = useToast();
+ *   return (
+ *     <Button onClick={() => toast({ variant: 'success', title: 'Uloženo!' })}>
+ *       Uložit
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
+declare const useToast: () => ToastContextValue;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    /**
+     * Vizuální varianta určující barvu levého okraje a tón pozadí.
+     * - `'info'`    — neutrální / informační
+     * - `'success'` — úspěch (zelená)
+     * - `'warning'` — varování (oranžovo-žlutá)
+     * - `'error'`   — chyba (červená)
+     * @default 'info'
+     */
+    variant?: AlertVariant;
+    /**
+     * Tučný nadpis upozornění.
+     */
+    title: string;
+    /**
+     * Volitelný popis vykreslený pod nadpisem menším písmem.
+     */
+    children?: React.ReactNode;
+    /**
+     * Vlastní ikona vykreslená na levé straně.
+     * Pokud chybí, použije se vestavěná SVG ikona odpovídající variantě.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Zobrazí tlačítko zavření (✕).
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * Callback volaný při kliknutí na tlačítko zavření.
+     */
+    onClose?: () => void;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Statický banner pro zobrazení důležitých informací, varování nebo chyb.
+ * Na rozdíl od `Toast` se jedná o inline prvek, nikoliv plovoucí notifikaci.
+ *
+ * Zobrazuje barevný levý okraj (4 px) a jemně tónované pozadí
+ * odpovídající zvolené variantě. Obsahuje vestavěné ikony pro každou
+ * variantu, které lze nahradit vlastní ikonou přes prop `icon`.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="success" title="Uloženo">Změny byly úspěšně uloženy.</Alert>
+ * <Alert variant="error" title="Chyba" closable onClose={handleClose}>Něco se pokazilo.</Alert>
+ * <Alert variant="warning" title="Pozor">Tato akce je nevratná.</Alert>
+ * ```
+ */
+declare const Alert: React.FC<AlertProps>;
+
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+interface ProgressBarProps {
+    /**
+     * Aktuální hodnota průběhu v rozsahu 0–100.
+     */
+    value: number;
+    /**
+     * Velikostní preset určující výšku lišty.
+     * - `'sm'` — 6 px
+     * - `'md'` — 10 px
+     * - `'lg'` — 16 px
+     * @default 'md'
+     */
+    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
+     */
+    striped?: boolean;
+    /**
+     * Animuje pruhovaný vzor (vyžaduje `striped`).
+     * @default false
+     */
+    animated?: boolean;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+interface ProgressCircleProps {
+    /**
+     * Aktuální hodnota průběhu v rozsahu 0–100.
+     */
+    value: number;
+    /**
+     * Velikost SVG v pixelech (šířka i výška).
+     * @default 64
+     */
+    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
+     */
+    showValue?: boolean;
+    /**
+     * Volitelný popisek zobrazený pod kruhem.
+     */
+    label?: string;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Horizontální lišta zobrazující průběh operace.
+ *
+ * Podporuje tři velikosti, volitelné pruhy (s animací),
+ * zobrazení procentuální hodnoty a popisek.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={45} showValue />
+ * <ProgressBar value={70} size="lg" striped animated label="Nahrávání" />
+ * ```
+ */
+declare const ProgressBar: React.FC<ProgressBarProps>;
+/**
+ * Kruhový indikátor průběhu pomocí 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.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircle value={75} showValue />
+ * <ProgressCircle value={50} size={80} strokeWidth={6} color="#00A205" label="Stahování" />
+ * ```
+ */
+declare const ProgressCircle: React.FC<ProgressCircleProps>;
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+interface SpinnerProps {
+    /**
+     * Velikost spinneru.
+     * - `'sm'` — 16 px
+     * - `'md'` — 24 px
+     * - `'lg'` — 40 px
+     * - `number` — vlastní velikost v pixelech
+     * @default 'md'
+     */
+    size?: SpinnerSize | number;
+    /**
+     * Barva spinneru. Pokud není zadána, dědí `currentColor`.
+     */
+    color?: string;
+    /**
+     * Text pro přístupnost (screen reader). Vykreslí se jako `aria-label`.
+     * @default 'Načítání'
+     */
+    label?: string;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Animovaný spinner (indikátor načítání) využívající requestAnimationFrame.
+ *
+ * Jedná se o samostatnou verzi interního spinneru používaného
+ * v komponentách Input, Select a Button. Rotace je řízena pomocí
+ * rAF pro plynulou animaci bez CSS keyframes.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" color="#E8612D" />
+ * <Spinner size={32} label="Ukládání dat" />
+ * ```
+ */
+declare const Spinner: React.FC<SpinnerProps>;
+
+type DividerOrientation = 'horizontal' | 'vertical';
+interface DividerProps {
+    /**
+     * Orientace oddělovače.
+     * - `'horizontal'` — plná šířka, horizontální čára
+     * - `'vertical'`   — plná výška, vertikální čára
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Volitelný text zobrazený uprostřed oddělovače.
+     * Podporováno pouze pro horizontální orientaci.
+     */
+    label?: string;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Vizuální oddělovač obsahu — horizontální nebo vertikální čára.
+ *
+ * V horizontálním režimu zabírá celou šířku kontejneru a volitelně
+ * zobrazí text uprostřed. Ve vertikálním režimu zabírá celou výšku.
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider label="nebo" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+declare const Divider: React.FC<DividerProps>;
+
+type StackDirection = 'row' | 'column';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+interface StackProps {
+    /**
+     * Směr rozložení potomků.
+     * @default 'column'
+     */
+    direction?: StackDirection;
+    /**
+     * Mezera mezi potomky v pixelech nebo jako CSS hodnota.
+     * @default 8
+     */
+    gap?: number | string;
+    /**
+     * Zarovnání na příčné ose (align-items).
+     * @default 'stretch'
+     */
+    align?: StackAlign;
+    /**
+     * Rozložení na hlavní ose (justify-content).
+     * @default 'start'
+     */
+    justify?: StackJustify;
+    /**
+     * Povolí zalamování prvků do dalších řádků / sloupců.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Roztáhne komponentu na celou šířku kontejneru.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Potomci rozmístění uvnitř stacku.
+     */
+    children?: React.ReactNode;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Jednoduchý layout helper využívající CSS flexbox.
+ *
+ * Usnadňuje běžné rozložení prvků ve sloupcích nebo řádcích
+ * s konzistentními mezerami, zarovnáním a zalamováním.
+ *
+ * @example
+ * ```tsx
+ * <Stack gap={16}>
+ *   <Input label="Jméno" />
+ *   <Input label="Příjmení" />
+ * </Stack>
+ *
+ * <Stack direction="row" gap={12} align="center">
+ *   <Button>Uložit</Button>
+ *   <Button variant="outline">Zrušit</Button>
+ * </Stack>
+ * ```
+ */
+declare const Stack: React.FC<StackProps>;
+
+type ContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl';
+interface ContainerProps {
+    /**
+     * Maximální šířka kontejneru.
+     * - `'sm'` — 640 px
+     * - `'md'` — 768 px
+     * - `'lg'` — 1024 px
+     * - `'xl'` — 1280 px
+     * - `number` — vlastní hodnota v pixelech
+     * @default 'lg'
+     */
+    maxWidth?: ContainerMaxWidth | number;
+    /**
+     * Vnitřní odsazení (padding). Číslo v pixelech nebo CSS hodnota.
+     * @default 16
+     */
+    padding?: number | string;
+    /**
+     * Vycentruje kontejner pomocí automatických okrajů.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Potomci vykreslení uvnitř kontejneru.
+     */
+    children?: React.ReactNode;
+    /** Dodatečná CSS třída pro kořenový element. */
+    className?: string;
+    /** Další inline styly pro kořenový element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Layout kontejner s maximální šířkou a volitelným centrováním.
+ *
+ * Usnadňuje tvorbu stránek s konzistentní šířkou obsahu
+ * a odsazením. Ve výchozím nastavení centruje obsah pomocí
+ * automatických okrajů a aplikuje vnitřní padding.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <h1>Obsah stránky</h1>
+ *   <p>Tento obsah bude omezený na 1024 px a vycentrovaný.</p>
+ * </Container>
+ *
+ * <Container maxWidth="sm" padding={24}>
+ *   <LoginForm />
+ * </Container>
+ * ```
+ */
+declare const Container: React.FC<ContainerProps>;
+
+interface DragListItem {
+    /** Unikátní identifikátor položky. */
+    id: string;
+    /** Textový popisek položky. */
+    label: string;
+    /** Volitelná ikona zobrazená před popiskem. */
+    icon?: React.ReactNode;
+    /** Potomci položky (pro stromový režim). */
+    children?: DragListItem[];
+    /** Zda je položka rozbalena (pro stromový režim). @default false */
+    expanded?: boolean;
+    /** Libovolná uživatelská data. */
+    data?: any;
+}
+/** Props předané do `renderItem` funkce pro ovládání drag handlu. */
+interface DragHandleProps {
+    /** Spread na element, který má sloužit jako drag handle. */
+    handleProps: {
+        onMouseDown: (e: React.MouseEvent) => void;
+        style: React.CSSProperties;
+        'aria-label': string;
+    };
+    /** Zda je položka právě přetahována. */
+    isDragging: boolean;
+    /** Hloubka vnoření (0 = root). */
+    depth: number;
+    /** Zda je položka rozbalena (stromový režim). */
+    isExpanded: boolean;
+    /** Přepne rozbalení/sbalení potomků. */
+    toggleExpand: () => void;
+    /** Zda má položka potomky. */
+    hasChildren: boolean;
+}
+interface DragListProps {
+    /** Seznam položek k zobrazení. */
+    items: DragListItem[];
+    /** Callback volaný při změně pořadí položek. */
+    onReorder: (items: DragListItem[]) => void;
+    /**
+     * Vlastní vykreslovací funkce pro položku.
+     * Přijímá `item`, `dragHandleProps` a další metadata.
+     * Pokud není zadána, použije se výchozí vykreslení s gripem a textem.
+     *
+     * @example
+     * ```tsx
+     * renderItem={(item, { handleProps, isDragging }) => (
+     *   <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+     *     <span {...handleProps}>⠿</span>
+     *     <span>{item.label}</span>
+     *   </div>
+     * )}
+     * ```
+     */
+    renderItem?: (item: DragListItem, props: DragHandleProps) => React.ReactNode;
+    /** Povolí vnořování položek (stromový režim). @default false */
+    allowNesting?: boolean;
+    /** Maximální hloubka vnoření. @default 3 */
+    maxDepth?: number;
+    /**
+     * Zda je celá karta přetahovatelná, nebo jen grip handle.
+     * Při `'handle'` je karta přetahovatelná jen za grip/handle element.
+     * @default 'full'
+     */
+    dragMode?: 'full' | 'handle';
+    /** Dodatečná CSS třída. */
+    className?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+}
+/**
+ * Přetahovací seznam dle SM-UI design systému.
+ *
+ * Umožňuje řazení položek přetažením (drag & drop).
+ * Volitelně podporuje stromovou strukturu s vnořováním.
+ * Využívá nativní HTML5 Drag and Drop API bez externích závislostí.
+ *
+ * Při přetahování na střed karty se položka vnoří jako potomek.
+ * Při podržení nad sbaleným uzlem se uzel automaticky rozbalí.
+ *
+ * @example
+ * ```tsx
+ * <DragList
+ *   items={[
+ *     { id: '1', label: 'Položka 1' },
+ *     { id: '2', label: 'Položka 2' },
+ *     { id: '3', label: 'Položka 3' },
+ *   ]}
+ *   onReorder={setItems}
+ * />
+ * ```
+ */
+declare const DragList: React.FC<DragListProps>;
+
+type Theme = 'light' | 'dark';
+/**
+ * Zjistí aktuální téma aplikace.
+ * Výchozí je 'light'. Pokud je na html/body nastaven `data-theme`, použije se.
+ * Jinak funguje fallback na systémové preference (prefers-color-scheme).
+ */
+declare const useTheme: () => Theme;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, 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, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Container, type ContainerMaxWidth, type ContainerProps, 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, Modal, type ModalProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, 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, 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, Toast, type ToastContextValue, type ToastOptions, type ToastPosition, type ToastProps, type ToastVariant, ToasterProvider, type ToasterProviderProps, Tooltip, type TooltipProps, type UploadedFile, useTheme, useToast };