@smworks-cz/ui-kit 1.2.0 → 1.3.0

package/dist/index.d.mts

@@ -370,10 +370,18 @@ interface ComboboxOption {
 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;
+    /**
+     * Aktuální vybraná hodnota.
+     * - Jednoduchý výběr: `string`
+     * - Vícenásobný výběr: `string[]`
+     */
+    value: string | string[];
+    /**
+     * Callback volaný při výběru položky.
+     * - Jednoduchý výběr: `(value: string) => void`
+     * - Vícenásobný výběr: `(value: string[]) => void`
+     */
+    onChange: (value: any) => 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. */
@@ -386,6 +394,22 @@ interface ComboboxProps {
     disabled?: boolean;
     /** Zobrazí spinner místo ikony vyhledávání. Vhodné při načítání položek. */
     loading?: boolean;
+    /** Umožní vybrat více položek najednou. @default false */
+    multiple?: boolean;
+    /** Zobrazí tlačítko pro vymazání výběru. @default false */
+    clearable?: boolean;
+    /** Voláno při otevření/zavření dropdownu. */
+    onOpenChange?: (open: boolean) => void;
+    /** Voláno při výběru položky. */
+    onSelect?: (value: string, option: ComboboxOption) => void;
+    /** Voláno při odebrání položky (multiple). */
+    onDeselect?: (value: string, option: ComboboxOption) => void;
+    /** Voláno při vymazání výběru (clearable). */
+    onClear?: () => void;
+    /** Voláno při focus. */
+    onFocus?: (event: React.FocusEvent) => void;
+    /** Voláno při blur. */
+    onBlur?: (event: React.FocusEvent) => void;
     /** 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`). */
@@ -395,10 +419,19 @@ interface ComboboxProps {
         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;
+    /**
+     * Obsah zobrazený když žádné výsledky neodpovídají.
+     * Může být ReactNode nebo funkce `(close: () => void) => ReactNode`
+     * pro přístup k zavření dropdownu.
+     * @default "Žádné výsledky"
+     */
+    notFoundContent?: React.ReactNode | ((close: () => void) => React.ReactNode);
+    /**
+     * Obsah zobrazený pod seznamem položek uvnitř dropdownu.
+     * Může být ReactNode nebo funkce `(close: () => void) => ReactNode`
+     * pro přístup k zavření dropdownu.
+     */
+    footer?: React.ReactNode | ((close: () => void) => React.ReactNode);
     /**
      * Velikostní preset.
      * @default 'md'
@@ -413,17 +446,27 @@ interface ComboboxProps {
  * 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`.
+ * přes React portál. Podporuje navigaci klávesami, vlastní hodnoty,
+ * vícenásobný výběr a asynchronní filtrování přes `onInputChange`.
  *
  * @example
  * ```tsx
+ * // Jednoduchý výběr
  * <Combobox
  *   options={[{ value: 'cz', label: 'Česko' }, { value: 'sk', label: 'Slovensko' }]}
  *   value={zeme}
  *   onChange={setZeme}
  *   placeholder="Hledat zemi…"
  * />
+ *
+ * // Vícenásobný výběr
+ * <Combobox
+ *   multiple
+ *   options={options}
+ *   value={selectedCountries}
+ *   onChange={setSelectedCountries}
+ *   placeholder="Vyberte země…"
+ * />
  * ```
  */
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
@@ -930,11 +973,22 @@ interface FileUploadProps {
      * @default 'default'
      */
     buttonStyle?: 'default' | 'primary';
+    /**
+     * Řízená hodnota — pole souborů. Pokud je nastaveno, komponenta je plně
+     * řízená a interní stav se nepoužívá. Předejte prázdné pole `[]`
+     * pro reset / skrytí souborů.
+     */
+    value?: File[];
     /**
      * Zda zobrazit seznam nahraných souborů pod komponentou.
      * @default true
      */
     showFileList?: boolean;
+    /**
+     * Text tlačítka u button varianty.
+     * Pokud zadáno, zobrazí se vždy tento text místo názvu souboru.
+     */
+    buttonLabel?: string;
     /** Dodatečná CSS třída. */
     className?: string;
     /** Další inline styly. */
@@ -965,6 +1019,8 @@ interface SegmentedControlItem {
     value: string;
     /** Zobrazovaný text. Výchozí: `value`. */
     label?: string;
+    /** Ikona zobrazená v segmentu. Může být samostatně nebo s label. */
+    icon?: React.ReactNode;
     /** Zakáže tento segment. */
     disabled?: boolean;
 }
@@ -1746,12 +1802,22 @@ declare const TagItem: React.FC<TagItemProps>;
 
 /** Událost zobrazená v kalendáři. */
 interface CalendarEvent {
-    /** Datum události. */
+    /** Unikátní ID události. */
+    id?: string;
+    /** Datum události (začátek). */
     date: Date;
+    /** Konec události (pro vícedenní). Pokud není zadáno, rovná se `date`. */
+    endDate?: Date;
     /** Název události. */
     title: string;
-    /** Barva tečky/indikátoru. @default '#FC4F00' */
+    /** Barva pozadí baru/tečky. @default '#FC4F00' */
     color?: string;
+    /** Barva textu na baru. @default '#ffffff' */
+    textColor?: string;
+    /** Emoji zobrazené před názvem. */
+    emoji?: string;
+    /** Obsah tooltipu. Pokud je nastaveno, event bar se obalí tooltipem. */
+    tooltip?: string | React.ReactNode;
 }
 interface CalendarProps {
     /** Aktuálně vybraný datum. */
@@ -1760,8 +1826,24 @@ interface CalendarProps {
     onChange?: (date: Date) => void;
     /** Režim zobrazení. @default 'month' */
     view?: 'month' | 'week';
-    /** Události k zobrazení (vizuální indikátory — barevné tečky). */
+    /** Události k zobrazení. */
     events?: CalendarEvent[];
+    /** Callback při kliknutí na událost (fullSize mode). */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Plnohodnotný kalendář s event bary místo teček. @default false */
+    fullSize?: boolean;
+    /** První den v týdnu: 0 = neděle, 1 = pondělí. @default 1 */
+    firstDay?: 0 | 1;
+    /** Jazyk. @default 'cs' */
+    locale?: 'cs' | 'en';
+    /** Max viditelných událostí v buňce (fullSize). @default 3 */
+    maxEventsPerDay?: number;
+    /** Zobrazit navigační hlavičku (měsíc + šipky). @default true */
+    showHeader?: boolean;
+    /** Callback při změně zobrazeného měsíce/týdne. Vrací první den zobrazeného období. */
+    onNavigate?: (date: Date) => void;
+    /** Počáteční datum pro navigaci (neřízený). @default new Date() */
+    initialDate?: Date;
     /** Minimální povolený datum. */
     minDate?: Date;
     /** Maximální povolený datum. */
@@ -1774,15 +1856,22 @@ interface CalendarProps {
 /**
  * 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.
+ * V kompaktním režimu (`fullSize={false}`) zobrazuje malý datepicker
+ * s barevnými tečkami pro události.
+ *
+ * V plnohodnotném režimu (`fullSize={true}`) zobrazuje velký měsíční
+ * kalendář s event bary, které mohou přesahovat přes více dní.
  *
  * @example
  * ```tsx
+ * // Kompaktní
+ * <Calendar value={date} onChange={setDate} events={events} />
+ *
+ * // Plnohodnotný
  * <Calendar
- *   value={selectedDate}
- *   onChange={setSelectedDate}
- *   events={[{ date: new Date(), title: 'Meeting', color: '#00A205' }]}
+ *   fullSize
+ *   events={events}
+ *   onEventClick={(ev) => console.log(ev)}
  * />
  * ```
  */

package/dist/index.d.ts

@@ -370,10 +370,18 @@ interface ComboboxOption {
 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;
+    /**
+     * Aktuální vybraná hodnota.
+     * - Jednoduchý výběr: `string`
+     * - Vícenásobný výběr: `string[]`
+     */
+    value: string | string[];
+    /**
+     * Callback volaný při výběru položky.
+     * - Jednoduchý výběr: `(value: string) => void`
+     * - Vícenásobný výběr: `(value: string[]) => void`
+     */
+    onChange: (value: any) => 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. */
@@ -386,6 +394,22 @@ interface ComboboxProps {
     disabled?: boolean;
     /** Zobrazí spinner místo ikony vyhledávání. Vhodné při načítání položek. */
     loading?: boolean;
+    /** Umožní vybrat více položek najednou. @default false */
+    multiple?: boolean;
+    /** Zobrazí tlačítko pro vymazání výběru. @default false */
+    clearable?: boolean;
+    /** Voláno při otevření/zavření dropdownu. */
+    onOpenChange?: (open: boolean) => void;
+    /** Voláno při výběru položky. */
+    onSelect?: (value: string, option: ComboboxOption) => void;
+    /** Voláno při odebrání položky (multiple). */
+    onDeselect?: (value: string, option: ComboboxOption) => void;
+    /** Voláno při vymazání výběru (clearable). */
+    onClear?: () => void;
+    /** Voláno při focus. */
+    onFocus?: (event: React.FocusEvent) => void;
+    /** Voláno při blur. */
+    onBlur?: (event: React.FocusEvent) => void;
     /** 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`). */
@@ -395,10 +419,19 @@ interface ComboboxProps {
         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;
+    /**
+     * Obsah zobrazený když žádné výsledky neodpovídají.
+     * Může být ReactNode nebo funkce `(close: () => void) => ReactNode`
+     * pro přístup k zavření dropdownu.
+     * @default "Žádné výsledky"
+     */
+    notFoundContent?: React.ReactNode | ((close: () => void) => React.ReactNode);
+    /**
+     * Obsah zobrazený pod seznamem položek uvnitř dropdownu.
+     * Může být ReactNode nebo funkce `(close: () => void) => ReactNode`
+     * pro přístup k zavření dropdownu.
+     */
+    footer?: React.ReactNode | ((close: () => void) => React.ReactNode);
     /**
      * Velikostní preset.
      * @default 'md'
@@ -413,17 +446,27 @@ interface ComboboxProps {
  * 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`.
+ * přes React portál. Podporuje navigaci klávesami, vlastní hodnoty,
+ * vícenásobný výběr a asynchronní filtrování přes `onInputChange`.
  *
  * @example
  * ```tsx
+ * // Jednoduchý výběr
  * <Combobox
  *   options={[{ value: 'cz', label: 'Česko' }, { value: 'sk', label: 'Slovensko' }]}
  *   value={zeme}
  *   onChange={setZeme}
  *   placeholder="Hledat zemi…"
  * />
+ *
+ * // Vícenásobný výběr
+ * <Combobox
+ *   multiple
+ *   options={options}
+ *   value={selectedCountries}
+ *   onChange={setSelectedCountries}
+ *   placeholder="Vyberte země…"
+ * />
  * ```
  */
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
@@ -930,11 +973,22 @@ interface FileUploadProps {
      * @default 'default'
      */
     buttonStyle?: 'default' | 'primary';
+    /**
+     * Řízená hodnota — pole souborů. Pokud je nastaveno, komponenta je plně
+     * řízená a interní stav se nepoužívá. Předejte prázdné pole `[]`
+     * pro reset / skrytí souborů.
+     */
+    value?: File[];
     /**
      * Zda zobrazit seznam nahraných souborů pod komponentou.
      * @default true
      */
     showFileList?: boolean;
+    /**
+     * Text tlačítka u button varianty.
+     * Pokud zadáno, zobrazí se vždy tento text místo názvu souboru.
+     */
+    buttonLabel?: string;
     /** Dodatečná CSS třída. */
     className?: string;
     /** Další inline styly. */
@@ -965,6 +1019,8 @@ interface SegmentedControlItem {
     value: string;
     /** Zobrazovaný text. Výchozí: `value`. */
     label?: string;
+    /** Ikona zobrazená v segmentu. Může být samostatně nebo s label. */
+    icon?: React.ReactNode;
     /** Zakáže tento segment. */
     disabled?: boolean;
 }
@@ -1746,12 +1802,22 @@ declare const TagItem: React.FC<TagItemProps>;
 
 /** Událost zobrazená v kalendáři. */
 interface CalendarEvent {
-    /** Datum události. */
+    /** Unikátní ID události. */
+    id?: string;
+    /** Datum události (začátek). */
     date: Date;
+    /** Konec události (pro vícedenní). Pokud není zadáno, rovná se `date`. */
+    endDate?: Date;
     /** Název události. */
     title: string;
-    /** Barva tečky/indikátoru. @default '#FC4F00' */
+    /** Barva pozadí baru/tečky. @default '#FC4F00' */
     color?: string;
+    /** Barva textu na baru. @default '#ffffff' */
+    textColor?: string;
+    /** Emoji zobrazené před názvem. */
+    emoji?: string;
+    /** Obsah tooltipu. Pokud je nastaveno, event bar se obalí tooltipem. */
+    tooltip?: string | React.ReactNode;
 }
 interface CalendarProps {
     /** Aktuálně vybraný datum. */
@@ -1760,8 +1826,24 @@ interface CalendarProps {
     onChange?: (date: Date) => void;
     /** Režim zobrazení. @default 'month' */
     view?: 'month' | 'week';
-    /** Události k zobrazení (vizuální indikátory — barevné tečky). */
+    /** Události k zobrazení. */
     events?: CalendarEvent[];
+    /** Callback při kliknutí na událost (fullSize mode). */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Plnohodnotný kalendář s event bary místo teček. @default false */
+    fullSize?: boolean;
+    /** První den v týdnu: 0 = neděle, 1 = pondělí. @default 1 */
+    firstDay?: 0 | 1;
+    /** Jazyk. @default 'cs' */
+    locale?: 'cs' | 'en';
+    /** Max viditelných událostí v buňce (fullSize). @default 3 */
+    maxEventsPerDay?: number;
+    /** Zobrazit navigační hlavičku (měsíc + šipky). @default true */
+    showHeader?: boolean;
+    /** Callback při změně zobrazeného měsíce/týdne. Vrací první den zobrazeného období. */
+    onNavigate?: (date: Date) => void;
+    /** Počáteční datum pro navigaci (neřízený). @default new Date() */
+    initialDate?: Date;
     /** Minimální povolený datum. */
     minDate?: Date;
     /** Maximální povolený datum. */
@@ -1774,15 +1856,22 @@ interface CalendarProps {
 /**
  * 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.
+ * V kompaktním režimu (`fullSize={false}`) zobrazuje malý datepicker
+ * s barevnými tečkami pro události.
+ *
+ * V plnohodnotném režimu (`fullSize={true}`) zobrazuje velký měsíční
+ * kalendář s event bary, které mohou přesahovat přes více dní.
  *
  * @example
  * ```tsx
+ * // Kompaktní
+ * <Calendar value={date} onChange={setDate} events={events} />
+ *
+ * // Plnohodnotný
  * <Calendar
- *   value={selectedDate}
- *   onChange={setSelectedDate}
- *   events={[{ date: new Date(), title: 'Meeting', color: '#00A205' }]}
+ *   fullSize
+ *   events={events}
+ *   onEventClick={(ev) => console.log(ev)}
  * />
  * ```
  */