@smworks-cz/ui-kit 0.1.0 → 1.1.0

package/dist/index.d.mts

@@ -193,6 +193,63 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
  */
 declare const InputGroup: React.FC<InputGroupProps>;
 
+type NumberInputSize = 'sm' | 'md' | 'lg';
+type NumberInputVariant = 'default' | 'compact';
+interface NumberInputProps {
+    /** Aktuální numerická hodnota. */
+    value: number;
+    /** Callback volaný při změně hodnoty. */
+    onChange: (value: number) => void;
+    /** Minimální povolená hodnota. */
+    min?: number;
+    /** Maximální povolená hodnota. */
+    max?: number;
+    /** Krok inkrementace / dekrementace. @default 1 */
+    step?: number;
+    /** Popisek zobrazený nad polem. Stylizován velkými písmeny dle SM-UI design systému. */
+    label?: string;
+    /** Při `true` se pole zobrazí jako nevalidní. Při zadání řetězce se zobrazí chybová zpráva. */
+    error?: boolean | string;
+    /** Zakáže celé pole včetně tlačítek. */
+    disabled?: boolean;
+    /**
+     * Velikostní preset.
+     * - `'sm'` -- kompaktní
+     * - `'md'` -- výchozí
+     * - `'lg'` -- velký
+     * @default 'md'
+     */
+    size?: NumberInputSize;
+    /**
+     * Varianta rozložení.
+     * - `'default'` -- tlačítka −/+ po stranách
+     * - `'compact'` -- šipky nahoru/dolů vpravo uvnitř pole
+     * @default 'default'
+     */
+    variant?: NumberInputVariant;
+    /** Text zobrazený před hodnotou (např. měna). */
+    prefix?: string;
+    /** Text zobrazený za hodnotou (např. jednotka). */
+    suffix?: string;
+    /** Další inline styly pro obalový `<div>`. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obalový `<div>`. */
+    className?: string;
+}
+/**
+ * Numerické vstupní pole s tlačítky +/− dle SM-UI design systému.
+ *
+ * Podržením tlačítka se hodnota plynule inkrementuje / dekrementuje.
+ * Hodnota je automaticky omezena na rozsah `min`–`max`.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput value={count} onChange={setCount} min={0} max={100} step={5} />
+ * <NumberInput value={price} onChange={setPrice} prefix="$" suffix="USD" />
+ * ```
+ */
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
 interface SelectOption {
     /** Unikátní hodnota položky. */
     value: string;
@@ -297,6 +354,74 @@ declare const Select: React.FC<SelectProps>;
  */
 declare const SelectGroup: React.FC<SelectGroupProps>;
 
+type ComboboxSize = 'sm' | 'md' | 'lg';
+interface ComboboxOption {
+    /** Unikátní hodnota položky. */
+    value: string;
+    /** Zobrazovaný popisek. Pokud chybí, použije se `value`. */
+    label?: string;
+}
+interface ComboboxProps {
+    /** Dostupné položky k výběru. */
+    options: ComboboxOption[];
+    /** Aktuální vybraná hodnota. */
+    value: string;
+    /** Callback volaný při výběru položky. */
+    onChange: (value: string) => void;
+    /** Callback volaný při změně textu ve vyhledávacím poli. Vhodné pro asynchronní filtrování. */
+    onInputChange?: (input: string) => void;
+    /** Zástupný text zobrazený při prázdném poli. */
+    placeholder?: string;
+    /** Popisek zobrazený nad polem. Stylizován velkými písmeny dle SM-UI design systému. */
+    label?: string;
+    /** Při `true` se pole zobrazí jako nevalidní. Při zadání řetězce se zobrazí chybová zpráva. */
+    error?: boolean | string;
+    /** Zakáže celou komponentu. */
+    disabled?: boolean;
+    /** Zobrazí spinner místo ikony vyhledávání. Vhodné při načítání položek. */
+    loading?: boolean;
+    /** Povolí uživateli zadat vlastní hodnotu, která není v seznamu. @default false */
+    allowCustom?: boolean;
+    /** Callback volaný při vytvoření vlastní hodnoty (Enter při `allowCustom`). */
+    onCreate?: (value: string) => void;
+    /** Vlastní renderování položky v seznamu. */
+    renderOption?: (option: {
+        value: string;
+        label?: string;
+    }, highlighted: boolean) => React.ReactNode;
+    /** Obsah zobrazený když žádné výsledky neodpovídají. @default "Žádné výsledky" */
+    notFoundContent?: React.ReactNode;
+    /** Obsah zobrazený pod seznamem položek uvnitř dropdownu. */
+    footer?: React.ReactNode;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: ComboboxSize;
+    /** Další inline styly pro obalový `<div>`. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obalový `<div>`. */
+    className?: string;
+}
+/**
+ * Kombinované vyhledávací pole se seznamem dle SM-UI design systému.
+ *
+ * Uživatel zadává text pro filtrování položek. Dropdown se vykresluje
+ * přes React portál. Podporuje navigaci klávesami, vlastní hodnoty
+ * a asynchronní filtrování přes `onInputChange`.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   options={[{ value: 'cz', label: 'Česko' }, { value: 'sk', label: 'Slovensko' }]}
+ *   value={zeme}
+ *   onChange={setZeme}
+ *   placeholder="Hledat zemi…"
+ * />
+ * ```
+ */
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+
 type DatePickerSize = 'sm' | 'md' | 'lg';
 interface DatePickerProps {
     /**
@@ -816,6 +941,175 @@ interface FileUploadProps {
  */
 declare const FileUpload: React.FC<FileUploadProps>;
 
+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>;
+
+interface ColorPickerProps {
+    /** Aktuální barva v hexadecimálním formátu (např. `#FC4F00`). */
+    value: string;
+    /** Callback volaný při změně barvy. */
+    onChange: (color: string) => void;
+    /** Přednastavené barvy zobrazené v mřížce. Pokud chybí, použije se výchozí paleta. */
+    presets?: string[];
+    /** Popisek zobrazený nad komponentou. Stylizován velkými písmeny dle SM-UI design systému. */
+    label?: string;
+    /** Zakáže celou komponentu. */
+    disabled?: boolean;
+    /** Další inline styly pro obalový `<div>`. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obalový `<div>`. */
+    className?: string;
+}
+/**
+ * Výběr barvy dle SM-UI design systému.
+ *
+ * Zobrazuje náhled aktuální barvy, hexadecimální vstup
+ * a po kliknutí popover s mřížkou přednastavených barev.
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker value={color} onChange={setColor} />
+ * <ColorPicker value={color} onChange={setColor} presets={['#FF0000', '#00FF00', '#0000FF']} />
+ * ```
+ */
+declare const ColorPicker: React.FC<ColorPickerProps>;
+
+type RatingSize = 'sm' | 'md' | 'lg';
+interface RatingProps {
+    /** Aktuální hodnota hodnocení (1–max). */
+    value: number;
+    /** Callback volaný při změně hodnocení. Pokud chybí, komponenta je v režimu pouze pro čtení. */
+    onChange?: (value: number) => void;
+    /** Maximální počet hvězd. @default 5 */
+    max?: number;
+    /**
+     * Velikostní preset.
+     * @default 'md'
+     */
+    size?: RatingSize;
+    /** Přepne komponentu do režimu pouze pro zobrazení. */
+    readOnly?: boolean;
+    /** Popisek zobrazený nad komponentou. Stylizován velkými písmeny dle SM-UI design systému. */
+    label?: string;
+    /** Další inline styly pro obalový `<div>`. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obalový `<div>`. */
+    className?: string;
+}
+/**
+ * Hodnocení hvězdičkami dle SM-UI design systému.
+ *
+ * Podporuje interaktivní výběr s náhledem při najetí myší
+ * a režim pouze pro čtení.
+ *
+ * @example
+ * ```tsx
+ * <Rating value={rating} onChange={setRating} />
+ * <Rating value={3} max={10} readOnly />
+ * <Rating value={4} size="lg" label="Hodnocení" />
+ * ```
+ */
+declare const Rating: React.FC<RatingProps>;
+
+interface OTPInputProps {
+    /** Počet polí (číslic). @default 6 */
+    length?: number;
+    /** Aktuální hodnota jako řetězec číslic. */
+    value: string;
+    /** Callback volaný při změně hodnoty. */
+    onChange: (value: string) => void;
+    /** Při `true` se pole zobrazí jako nevalidní. Při zadání řetězce se zobrazí chybová zpráva. */
+    error?: boolean | string;
+    /** Zakáže celou komponentu. */
+    disabled?: boolean;
+    /** Automaticky zaměří první pole při renderování. @default false */
+    autoFocus?: boolean;
+    /** Popisek zobrazený nad komponentou. Stylizován velkými písmeny dle SM-UI design systému. */
+    label?: string;
+    /** Vloží oddělovač po každých N polích. Např. `separatorAfter={3}` u 6místného kódu vytvoří skupiny 3-3. */
+    separatorAfter?: number;
+    /** Obsah oddělovače. @default '-' */
+    separator?: React.ReactNode;
+    /** Další inline styly pro obalový `<div>`. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída pro obalový `<div>`. */
+    className?: string;
+}
+/**
+ * Pole pro zadání jednorázového kódu (OTP) dle SM-UI design systému.
+ *
+ * Každá číslice má vlastní pole. Automaticky přesouvá fokus
+ * na další pole při zadání a na předchozí při smazání.
+ * Podporuje vložení celého kódu ze schránky.
+ *
+ * @example
+ * ```tsx
+ * <OTPInput value={otp} onChange={setOtp} autoFocus />
+ * <OTPInput value={otp} onChange={setOtp} length={4} error="Neplatný kód" />
+ * ```
+ */
+declare const OTPInput: React.FC<OTPInputProps>;
+
 interface TableColumn {
     /** Klíč odpovídající hodnotě v datovém objektu. */
     key: string;
@@ -875,6 +1169,73 @@ interface TableProps {
  */
 declare const Table: React.FC<TableProps>;
 
+/** Definice sloupce pro DataGrid. */
+interface DataGridColumn {
+    /** Klíč odpovídající hodnotě v datovém objektu. */
+    key: string;
+    /** Text záhlaví sloupce. */
+    header: string;
+    /** Šířka sloupce (CSS hodnota). */
+    width?: string | number;
+    /** Minimální šířka sloupce v pixelech. */
+    minWidth?: number;
+    /** Zarovnání obsahu. @default 'left' */
+    align?: 'left' | 'center' | 'right';
+    /** Povolí řazení podle tohoto sloupce. @default false */
+    sortable?: boolean;
+    /** Povolí editaci buňky (placeholder pro budoucí implementaci). @default false */
+    editable?: boolean;
+    /** Vlastní vykreslovací funkce pro buňku. */
+    render?: (value: any, row: any, index: number) => React.ReactNode;
+}
+interface DataGridProps {
+    /** Definice sloupců. */
+    columns: DataGridColumn[];
+    /** Data k zobrazení — pole objektů. */
+    data: any[];
+    /** Povolí výběr řádků pomocí zaškrtávacích políček. @default false */
+    selectable?: boolean;
+    /** Callback při změně výběru řádků. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Při `true` se zobrazí skeleton řádky. @default false */
+    loading?: boolean;
+    /** Klíč pro identifikaci řádků. @default 'id' */
+    rowKey?: string;
+    /** Callback při kliknutí na řádek. */
+    onRowClick?: (row: any) => void;
+    /** Fixní záhlaví při scrollování. @default false */
+    stickyHeader?: boolean;
+    /** Text zobrazený při prázdných datech. @default 'Žádná data' */
+    emptyText?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Pokročilá datová mřížka s výběrem řádků, sticky záhlavím a loading stavem.
+ *
+ * Rozšiřuje vzor Table o zaškrtávací políčka pro výběr,
+ * klikání na řádky a skeleton placeholder při načítání.
+ *
+ * @example
+ * ```tsx
+ * <DataGrid
+ *   columns={[
+ *     { key: 'name', header: 'Jméno', minWidth: 200 },
+ *     { key: 'email', header: 'E-mail' },
+ *     { key: 'role', header: 'Role', align: 'center' },
+ *   ]}
+ *   data={users}
+ *   selectable
+ *   stickyHeader
+ *   onSelectionChange={(ids) => console.log(ids)}
+ *   onRowClick={(row) => console.log(row)}
+ * />
+ * ```
+ */
+declare const DataGrid: React.FC<DataGridProps>;
+
 interface CardProps {
     /** Titulek karty. */
     title?: string;
@@ -1365,6 +1726,212 @@ declare const Badge: React.FC<BadgeProps>;
  */
 declare const TagItem: React.FC<TagItemProps>;
 
+/** Událost zobrazená v kalendáři. */
+interface CalendarEvent {
+    /** Datum události. */
+    date: Date;
+    /** Název události. */
+    title: string;
+    /** Barva tečky/indikátoru. @default '#FC4F00' */
+    color?: string;
+}
+interface CalendarProps {
+    /** Aktuálně vybraný datum. */
+    value?: Date | null;
+    /** Callback při výběru data. */
+    onChange?: (date: Date) => void;
+    /** Režim zobrazení. @default 'month' */
+    view?: 'month' | 'week';
+    /** Události k zobrazení (vizuální indikátory — barevné tečky). */
+    events?: CalendarEvent[];
+    /** Minimální povolený datum. */
+    minDate?: Date;
+    /** Maximální povolený datum. */
+    maxDate?: Date;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Kalendářní komponenta s měsíčním a týdenním zobrazením.
+ *
+ * Podporuje výběr data, zobrazení událostí (barevné tečky),
+ * navigaci mezi měsíci/týdny a omezení rozsahu dat.
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   events={[{ date: new Date(), title: 'Meeting', color: '#00A205' }]}
+ * />
+ * ```
+ */
+declare const Calendar: React.FC<CalendarProps>;
+
+/** Položka časové osy. */
+interface TimelineItem {
+    /** Nadpis události. */
+    title: string;
+    /** Volitelný popis události. */
+    description?: string;
+    /** Volitelný datum / časový údaj. */
+    date?: string;
+    /** Vlastní ikona místo výchozí tečky. */
+    icon?: React.ReactNode;
+    /** Barva tečky nebo pozadí ikony. @default '#FC4F00' */
+    color?: string;
+}
+interface TimelineProps {
+    /** Položky časové osy. */
+    items: TimelineItem[];
+    /** Orientace časové osy. @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal';
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Časová osa s tečkami nebo ikonami.
+ *
+ * Podporuje vertikální i horizontální orientaci.
+ * Každá položka zobrazuje nadpis, volitelný popis a datum.
+ * Ikona nebo barevná tečka je propojená čárou.
+ *
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { title: 'Odesláno', date: '10:00', description: 'Objednávka byla vytvořena.' },
+ *     { title: 'Doručeno', date: '14:30', color: '#00A205' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Timeline: React.FC<TimelineProps>;
+
+/** Položka klíč-hodnota v seznamu. */
+interface DataListItem {
+    /** Popisek (klíč). */
+    label: string;
+    /** Hodnota — řetězec nebo libovolný React uzel. */
+    value: React.ReactNode;
+}
+interface DataListProps {
+    /** Položky k zobrazení. */
+    items: DataListItem[];
+    /** Počet sloupců. @default 1 */
+    columns?: number;
+    /** Střídání barvy řádků. @default false */
+    striped?: boolean;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Seznam klíč-hodnota pro detailní zobrazení dat.
+ *
+ * Zobrazuje popisek vlevo (ztlumený) a hodnotu vpravo.
+ * Podporuje rozložení do libovolného počtu sloupců a střídání barvy řádků.
+ *
+ * @example
+ * ```tsx
+ * <DataList
+ *   items={[
+ *     { label: 'Jméno', value: 'Jan Novák' },
+ *     { label: 'E-mail', value: 'jan@example.com' },
+ *     { label: 'Stav', value: <Tag>Aktivní</Tag> },
+ *   ]}
+ *   columns={2}
+ *   striped
+ * />
+ * ```
+ */
+declare const DataList: React.FC<DataListProps>;
+
+/** Uzel stromové struktury. */
+interface TreeNode {
+    /** Unikátní identifikátor uzlu. */
+    id: string;
+    /** Zobrazený text uzlu. */
+    label: string;
+    /** Volitelná ikona vedle popisku. */
+    icon?: React.ReactNode;
+    /** Podřízené uzly. */
+    children?: TreeNode[];
+}
+interface TreeProps {
+    /** Stromová data k zobrazení. */
+    data: TreeNode[];
+    /** Callback při výběru uzlu. */
+    onSelect?: (node: TreeNode) => void;
+    /** ID aktuálně vybraného uzlu. */
+    selectedId?: string;
+    /** ID uzlů, které jsou ve výchozím stavu rozbalené. */
+    defaultExpanded?: string[];
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Stromový seznam s rozbalitelnými uzly.
+ *
+ * Podporuje ikony, výběr uzlu, animovanou šipku při rozbalení
+ * a spojovací čáry mezi rodičem a potomky.
+ *
+ * @example
+ * ```tsx
+ * <Tree
+ *   data={[
+ *     { id: '1', label: 'Složka', children: [
+ *       { id: '1-1', label: 'Soubor A' },
+ *       { id: '1-2', label: 'Soubor B' },
+ *     ]},
+ *   ]}
+ *   selectedId="1-1"
+ *   onSelect={(node) => console.log(node.id)}
+ * />
+ * ```
+ */
+declare const Tree: React.FC<TreeProps>;
+
+type StatusBadgeStatus = 'online' | 'offline' | 'away' | 'busy' | (string & {});
+interface StatusBadgeProps {
+    /** Stav k zobrazení. Předdefinované: online, offline, away, busy. Lze zadat i vlastní řetězec. */
+    status: StatusBadgeStatus;
+    /** Volitelný textový popis vedle indikátoru. */
+    label?: string;
+    /** Velikost indikátoru. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Zapne pulzující animaci. @default false */
+    pulse?: boolean;
+    /** Vlastní barva indikátoru — přepíše výchozí barvu stavu. */
+    color?: string;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Malý barevný indikátor stavu.
+ *
+ * Předdefinované stavy: online, offline, away, busy.
+ * Lze zadat i vlastní řetězec s vlastní barvou přes prop `color`.
+ * Pulzující animace funguje na libovolném stavu.
+ *
+ * @example
+ * ```tsx
+ * <StatusBadge status="online" pulse />
+ * <StatusBadge status="busy" label="Nerušit" size="lg" />
+ * <StatusBadge status="streaming" color="#9C27B0" label="Živě" pulse />
+ * ```
+ */
+declare const StatusBadge: React.FC<StatusBadgeProps>;
+
 interface ModalProps {
     /** Řídí zobrazení modálního okna. */
     open: boolean;
@@ -1444,6 +2011,39 @@ interface DrawerProps {
  */
 declare const Drawer: React.FC<DrawerProps>;
 
+interface SheetProps {
+    /** Řídí zobrazení sheetu. */
+    open: boolean;
+    /** Voláno při zavření sheetu. */
+    onClose: () => void;
+    /** Obsah sheetu. */
+    children: React.ReactNode;
+    /** Strana, ze které se sheet vysune. @default 'bottom' */
+    side?: 'bottom' | 'right' | 'left' | 'top';
+    /** Titulek zobrazený v záhlaví. */
+    title?: string;
+    /** Zobrazí zavírací tlačítko. @default true */
+    showClose?: boolean;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Lehký vysuvný panel, který může přijít z libovolné strany.
+ *
+ * Na rozdíl od Draweru je Sheet odlehčený a výchozí pozice je zdola
+ * (vhodné pro mobilní rozhraní). Používá glass efekt a portálové vykreslení.
+ *
+ * @example
+ * ```tsx
+ * <Sheet open={isOpen} onClose={() => setOpen(false)} title="Filtry">
+ *   <p>Obsah sheetu</p>
+ * </Sheet>
+ * ```
+ */
+declare const Sheet: React.FC<SheetProps>;
+
 interface BreadcrumbItem {
     /** Zobrazovaný text položky. */
     label: string;
@@ -1721,68 +2321,125 @@ interface SpotlightProps {
  */
 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 CommandItem {
+    /** Unikátní identifikátor příkazu. */
+    id: string;
+    /** Hlavní text příkazu. */
+    label: string;
+    /** Volitelný popis příkazu. */
+    description?: string;
+    /** Volitelná ikona příkazu. */
+    icon?: React.ReactNode;
+    /** Klávesová zkratka (zobrazena jako badge). */
+    shortcut?: string;
+    /** Voláno při výběru příkazu. */
+    onSelect: () => void;
 }
-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;
+interface CommandGroup {
+    /** Název skupiny příkazů. */
+    label: string;
+    /** Položky ve skupině. */
+    items: CommandItem[];
+}
+interface CommandMenuProps {
+    /** Řídí zobrazení command menu. */
+    open: boolean;
+    /** Voláno při zavření command menu. */
+    onClose: () => void;
+    /** Skupiny příkazů k zobrazení. */
+    groups: CommandGroup[];
+    /** Placeholder text vyhledávacího pole. @default 'Zadejte příkaz...' */
+    placeholder?: string;
+    /** Další inline styly pro kartu. */
+    style?: React.CSSProperties;
     /** Dodatečná CSS třída. */
     className?: string;
+}
+/**
+ * Rozšířený command palette s podporou skupin příkazů a klávesových zkratek.
+ *
+ * Filtruje příkazy podle vyhledávacího řetězce, podporuje klávesovou
+ * navigaci (šipky, Enter, Escape) a zobrazuje klávesové zkratky.
+ *
+ * @example
+ * ```tsx
+ * <CommandMenu
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   groups={[
+ *     { label: 'Akce', items: [{ id: '1', label: 'Uložit', shortcut: '⌘S', onSelect: save }] },
+ *   ]}
+ * />
+ * ```
+ */
+declare const CommandMenu: React.FC<CommandMenuProps>;
+
+interface AppSidebarProps {
+    /** Obsah postranního panelu (navigace, menu apod.). */
+    children: React.ReactNode;
+    /** Zda je panel sbalený. @default false */
+    collapsed?: boolean;
+    /** Voláno při změně stavu sbalení. */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Šířka rozbalené postranní lišty v px. @default 260 */
+    width?: number;
+    /** Šířka sbalené postranní lišty v px. @default 64 */
+    collapsedWidth?: number;
     /** Další inline styly. */
     style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
 }
 /**
- * Segmentovaný přepínač dle SM-UI design systému.
+ * Sbaletelný postranní panel pro navigaci aplikace.
  *
- * Podobný záložkám, ale v kompaktnějším inline formátu
- * s animovaným indikátorem posuvným mezi segmenty.
+ * Používá glass efekt a plynulou animaci šířky. Tlačítko pro sbalení/rozbalení
+ * si řeší konzument sám — komponenta je plně řízená přes `collapsed` a `onCollapse`.
  *
  * @example
  * ```tsx
- * const [view, setView] = useState('list');
+ * const [collapsed, setCollapsed] = useState(false);
+ * <AppSidebar collapsed={collapsed} onCollapse={setCollapsed}>
+ *   <button onClick={() => setCollapsed(c => !c)}>Toggle</button>
+ *   <nav>...</nav>
+ * </AppSidebar>
+ * ```
+ */
+declare const AppSidebar: React.FC<AppSidebarProps>;
+
+interface NavbarProps {
+    /** Logo nebo název aplikace (vykresleno vlevo). */
+    logo?: React.ReactNode;
+    /** Navigační obsah (vykresleno uprostřed). */
+    children?: React.ReactNode;
+    /** Akční prvky – tlačítka, avatar apod. (vykresleno vpravo). */
+    actions?: React.ReactNode;
+    /** Zda je navbar přilepený k hornímu okraji. @default true */
+    sticky?: boolean;
+    /** Zda použít glass efekt (průhledné pozadí s rozmazáním). @default true */
+    glass?: boolean;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Horní navigační lišta aplikace.
  *
- * <SegmentedControl
- *   data={['list', 'grid', 'table']}
- *   value={view}
- *   onChange={setView}
- * />
+ * Obsahuje tři sloty: logo (vlevo), children (uprostřed)
+ * a actions (vpravo). Podporuje glass efekt a sticky pozici.
+ *
+ * @example
+ * ```tsx
+ * <Navbar
+ *   logo={<span>MyApp</span>}
+ *   actions={<Button size="sm">Přihlásit</Button>}
+ * >
+ *   <a href="/about">O nás</a>
+ * </Navbar>
  * ```
  */
-declare const SegmentedControl: React.FC<SegmentedControlProps>;
+declare const Navbar: React.FC<NavbarProps>;
 
 type ToastVariant = 'info' | 'success' | 'error';
 interface ToastProps {
@@ -2014,6 +2671,50 @@ interface AlertProps {
  */
 declare const Alert: React.FC<AlertProps>;
 
+type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
+interface NotificationProps {
+    /** Vizuální varianta notifikace. @default 'info' */
+    variant?: NotificationVariant;
+    /** Titulek notifikace. */
+    title: string;
+    /** Obsah / popis notifikace. */
+    children?: React.ReactNode;
+    /** Zobrazí tlačítko zavření. @default false */
+    closable?: boolean;
+    /** Voláno při zavření notifikace. */
+    onClose?: () => void;
+    /** Vlastní ikona (nahradí výchozí ikonu varianty). */
+    icon?: React.ReactNode;
+    /** Akční prvek zobrazený na pravé straně (tlačítko apod.). */
+    action?: React.ReactNode;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Inline notifikační banner pro trvalé zobrazení v layoutu.
+ *
+ * Na rozdíl od `Toast` se nejedná o plovoucí overlay, ale o součást
+ * obsahu stránky. Podporuje varianty info/success/warning/error,
+ * volitelný akční prvek a zavírací tlačítko.
+ *
+ * @example
+ * ```tsx
+ * <Notification variant="success" title="Uloženo" closable>
+ *   Změny byly úspěšně uloženy.
+ * </Notification>
+ * <Notification
+ *   variant="warning"
+ *   title="Nová verze"
+ *   action={<Button size="sm">Aktualizovat</Button>}
+ * >
+ *   Je dostupná nová verze aplikace.
+ * </Notification>
+ * ```
+ */
+declare const Notification: React.FC<NotificationProps>;
+
 type ProgressBarSize = 'sm' | 'md' | 'lg';
 interface ProgressBarProps {
     /**
@@ -2160,6 +2861,85 @@ interface SpinnerProps {
  */
 declare const Spinner: React.FC<SpinnerProps>;
 
+interface ConfirmDialogProps {
+    /** Řídí zobrazení potvrzovacího dialogu. */
+    open: boolean;
+    /** Voláno při potvrzení akce. */
+    onConfirm: () => void;
+    /** Voláno při zrušení (zavření) dialogu. */
+    onCancel: () => void;
+    /** Titulek dialogu. */
+    title: string;
+    /** Volitelný popis akce. */
+    description?: string;
+    /** Text potvrzovacího tlačítka. @default 'Potvrdit' */
+    confirmLabel?: string;
+    /** Text zrušovacího tlačítka. @default 'Zrušit' */
+    cancelLabel?: string;
+    /** Varianta dialogu – 'danger' zvýrazní potvrzovací tlačítko červeně. @default 'default' */
+    variant?: 'default' | 'danger';
+    /** Stav načítání potvrzovacího tlačítka. @default false */
+    loading?: boolean;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Předpřipravený modální dialog pro potvrzení akce.
+ *
+ * Interně používá komponentu `Modal`. Podporuje standardní a danger variantu
+ * s volitelným stavem načítání.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   open={isOpen}
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setOpen(false)}
+ *   title="Smazat položku?"
+ *   description="Tato akce je nevratná."
+ *   variant="danger"
+ * />
+ * ```
+ */
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+
+interface CopyButtonProps {
+    /** Text ke zkopírování do schránky. */
+    text: string;
+    /** Vlastní obsah tlačítka (nahrazuje výchozí ikonu/text). */
+    children?: React.ReactNode;
+    /** Velikost tlačítka. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Varianta zobrazení. @default 'icon' */
+    variant?: 'icon' | 'button';
+    /** Popisek tlačítka ve variantě 'button'. @default 'Kopírovat' */
+    label?: string;
+    /** Popisek po úspěšném zkopírování. @default 'Zkopírováno' */
+    successLabel?: string;
+    /** Callback volaný po úspěšném zkopírování do schránky. */
+    onCopy?: () => void;
+    /** Další inline styly. */
+    style?: React.CSSProperties;
+    /** Dodatečná CSS třída. */
+    className?: string;
+}
+/**
+ * Tlačítko pro zkopírování textu do schránky.
+ *
+ * Podporuje dvě varianty: minimální ikonovou (jen ikona kopírování)
+ * a plnou tlačítkovou (s textem). Po úspěšném zkopírování se na 2 sekundy
+ * zobrazí ikona zaškrtnutí.
+ *
+ * @example
+ * ```tsx
+ * <CopyButton text="npm install sm-ui" variant="button" label="Kopírovat příkaz" />
+ * <CopyButton text={code} />
+ * ```
+ */
+declare const CopyButton: React.FC<CopyButtonProps>;
+
 type DividerOrientation = 'horizontal' | 'vertical';
 interface DividerProps {
     /**
@@ -2411,4 +3191,4 @@ type Theme = 'light' | 'dark';
  */
 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 };
+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, 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, 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 };