@vacano/ui 0.0.1 → 1.2.1

package/dist/index.d.ts

@@ -1,156 +1,79 @@
-import { ButtonHTMLAttributes } from 'react';
 import { ChangeEventHandler } from 'react';
+import { CSSProperties } from 'react';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX } from '@emotion/react/jsx-runtime';
 import { PropsWithChildren } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 import { Ref } from 'react';
 
-export declare const Button: ({ char, children, className, classnames, disabled, fullWidth, icon, loading, onClick, variant, ...rest }: ButtonProps) => JSX.Element;
+export declare const Button: ({ children, className, classnames, disabled, fullWidth, icon, loading, onClick, ref, keyBindings, size, type, variant, ...rest }: ButtonProps) => JSX.Element;
 
-export declare type ButtonClassnames = {
-    container?: string;
-    content?: string;
+export declare type ButtonClassNames = {
+    label?: string;
     icon?: string;
-    text?: string;
-    char?: string;
-    loader?: string;
+    binding?: string;
 };
 
-export declare type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
-    char?: string;
+export declare type ButtonProps = VacanoComponentProps<HTMLButtonElement, ButtonClassNames> & Omit<HTMLAttributes<HTMLButtonElement>, 'children' | 'className'> & {
     children?: string;
-    classnames?: ButtonClassnames;
-    'data-test-id'?: string;
+    disabled?: boolean;
     fullWidth?: boolean;
     icon?: ReactNode;
+    keyBindings?: KeyboardEventKey[];
     loading?: boolean;
+    size?: VacanoComponentSize;
+    type?: ButtonType;
     variant?: ButtonVariant;
 };
 
-export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
-
-declare type ButtonVariantTheme = {
-    color: string;
-    backgroundColor: string;
-    borderColor: string;
-    hover: {
-        backgroundColor: string;
-        borderColor: string;
-    };
-    active: {
-        backgroundColor: string;
-        borderColor: string;
-    };
-    focus: {
-        outlineColor: string;
-    };
-    disabled: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
-    };
-    char: {
-        color: string;
-        backgroundColor: string;
-    };
-    icon: {
-        color: string;
-    };
-};
-
-export declare const Checkbox: ({ checked, className, classnames, disabled, indeterminate, label, onChange, ref, state, ...rest }: CheckboxProps) => JSX.Element;
-
-export declare const CheckboxCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, state, ...rest }: CheckboxCardProps) => JSX.Element;
-
-export declare type CheckboxCardClassnames = {
-    container?: string;
+export declare type ButtonType = 'button' | 'submit' | 'reset' | 'link';
+
+export declare type ButtonVariant = 'normal' | 'system' | 'success' | 'warning' | 'danger' | 'transparent';
+
+export declare type CalendarView = 'days' | 'months' | 'years';
+
+export declare const Card: ({ children, className, ref, border, shadow, ...rest }: PropsWithChildren<CardProps>) => JSX.Element;
+
+export declare type CardProps = VacanoComponentProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    border?: boolean;
+    shadow?: boolean;
+};
+
+export declare const Checkbox: ({ checked, className, classnames, disabled, indeterminate, label, onChange, ref, variant, ...rest }: CheckboxProps) => JSX.Element;
+
+export declare const CheckboxCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, variant, ...rest }: CheckboxCardProps) => JSX.Element;
+
+export declare type CheckboxCardClassNames = {
     checkbox?: string;
     content?: string;
     label?: string;
     description?: string;
 };
 
-export declare type CheckboxCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+export declare type CheckboxCardProps = VacanoComponentProps<HTMLInputElement, CheckboxCardClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
     checked: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
     label: string;
     description?: string;
     fullWidth?: boolean;
-    state?: CheckboxCardState;
-    className?: string;
-    classnames?: CheckboxCardClassnames;
-    ref?: Ref<HTMLInputElement>;
-    'data-test-id'?: string;
+    variant?: CheckboxCardVariant;
 };
 
-export declare type CheckboxCardState = 'warning' | 'error';
-
-declare type CheckboxCardStateTheme = {
-    container: {
-        borderColor: string;
-        checked: {
-            borderColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-    description: {
-        color: string;
-    };
-};
-
-declare type CheckboxCardTheme = {
-    container: {
-        backgroundColor: string;
-        borderColor: string;
-        hover: {
-            borderColor: string;
-        };
-        checked: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-        focus: {
-            outlineColor: string;
-        };
-        disabled: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
-    label: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    description: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    state: {
-        warning: CheckboxCardStateTheme;
-        error: CheckboxCardStateTheme;
-    };
-};
-
-export declare type CheckboxClassnames = {
-    container?: string;
+export declare type CheckboxCardVariant = 'normal' | 'error';
+
+export declare type CheckboxClassNames = {
     input?: string;
     box?: string;
     icon?: string;
     label?: string;
 };
 
-export declare const CheckboxGroup: ({ className, classnames, disabled, label, onChange, options, value, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: ({ className, classnames, disabled, label, onChange, options, ref, value, ...rest }: CheckboxGroupProps) => JSX.Element;
 
-export declare type CheckboxGroupClassnames = {
-    container?: string;
+export declare type CheckboxGroupClassNames = {
     label?: string;
     options?: string;
     checkbox?: string;
@@ -161,318 +84,383 @@ export declare type CheckboxGroupOption = {
     value: string;
 };
 
-export declare type CheckboxGroupProps = {
+export declare type CheckboxGroupProps = VacanoComponentProps<HTMLDivElement, CheckboxGroupClassNames> & {
     options: CheckboxGroupOption[];
     value: string[];
     onChange: (values: string[]) => void;
     label?: string;
     disabled?: boolean;
-    className?: string;
-    classnames?: CheckboxGroupClassnames;
-    'data-test-id'?: string;
 };
 
-declare type CheckboxGroupTheme = {
-    label: {
-        color: string;
-    };
-};
-
-export declare type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+export declare type CheckboxProps = VacanoComponentProps<HTMLInputElement, CheckboxClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
     checked: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
-    'data-test-id'?: string;
-    classnames?: CheckboxClassnames;
     indeterminate?: boolean;
     label?: string;
-    ref?: Ref<HTMLInputElement>;
-    state?: CheckboxState;
-};
-
-export declare type CheckboxState = 'warning' | 'error';
-
-declare type CheckboxStateTheme = {
-    box: {
-        borderColor: string;
-        checked: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-        focus: {
-            shadowColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-};
-
-declare type CheckboxTheme = {
-    box: {
-        backgroundColor: string;
-        borderColor: string;
-        checked: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-        focus: {
-            shadowColor: string;
-        };
-    };
-    icon: {
-        color: string;
-    };
-    label: {
-        color: string;
-    };
-    state: {
-        warning: CheckboxStateTheme;
-        error: CheckboxStateTheme;
-    };
-};
-
-export declare const Chip: ({ children, className, classnames, fullWidth, status, ...rest }: PropsWithChildren<ChipProps>) => JSX.Element;
-
-export declare type ChipClassnames = {
-    container?: string;
-    text?: string;
-};
-
-export declare type ChipProps = HTMLAttributes<HTMLSpanElement> & {
-    classnames?: ChipClassnames;
-    'data-test-id'?: string;
+    variant?: CheckboxVariant;
+};
+
+export declare type CheckboxVariant = 'normal' | 'error';
+
+export declare const Chip: ({ children, className, classnames, deletable, onDelete, ref, variant, ...rest }: ChipProps) => JSX.Element;
+
+export declare type ChipClassNames = {
+    delete?: string;
+    label?: string;
+};
+
+export declare type ChipProps = VacanoComponentProps<HTMLSpanElement, ChipClassNames> & Omit<HTMLAttributes<HTMLSpanElement>, 'className'> & {
+    children: ReactNode;
+    variant?: ChipVariant;
+    deletable?: boolean;
+    onDelete?: () => void;
+};
+
+export declare type ChipVariant = 'gray' | 'red' | 'blue' | 'black';
+
+export declare const Confirmation: ({ cancelBindings, cancelLabel, className, classnames, confirmLabel, loading, message, onCancel, onConfirm, open, ref, submitBindings, ...rest }: ConfirmationProps) => JSX.Element | null;
+
+export declare type ConfirmationClassNames = {
+    message?: string;
+    actions?: string;
+    confirmButton?: string;
+    cancelButton?: string;
+};
+
+export declare type ConfirmationProps = VacanoComponentProps<HTMLDivElement, ConfirmationClassNames> & {
+    cancelBindings?: KeyboardEventKey[];
+    cancelLabel?: string;
+    confirmLabel?: string;
+    loading?: boolean;
+    message: ReactNode;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    open?: boolean;
+    style?: CSSProperties;
+    submitBindings?: KeyboardEventKey[];
+};
+
+export declare const Container: ({ children, className, ref, ...rest }: PropsWithChildren<ContainerProps>) => JSX.Element;
+
+export declare type ContainerProps = VacanoComponentProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+
+export declare const DatePicker: ({ value, onChange, mode, displayFormat, placeholder, locale, weekStartsOn, minDate, maxDate, size, variant, disabled, fullWidth, label, portalRenderNode, open: controlledOpen, onOpen, onClose, className, classnames, ref, ...rest }: DatePickerProps) => JSX.Element;
+
+export declare type DatePickerClassNames = {
+    trigger?: string;
+    calendar?: string;
+    header?: string;
+    grid?: string;
+    cell?: string;
+};
+
+export declare type DatePickerMode = 'date' | 'month' | 'year';
+
+export declare type DatePickerPosition = 'top' | 'bottom';
+
+export declare type DatePickerProps = VacanoComponentProps<HTMLDivElement, DatePickerClassNames> & {
+    /** Selected date value */
+    value?: Date | null;
+    /** Callback when date changes */
+    onChange?: (date: Date | null) => void;
+    /** Selection mode */
+    mode?: DatePickerMode;
+    /** Display format using Go-style date formatting (e.g., "02.01.2006", "January 2006") */
+    displayFormat?: string;
+    /** Placeholder text when no date selected */
+    placeholder?: string;
+    /** Locale for month/weekday names (e.g., "en-US", "ru", "de") */
+    locale?: string;
+    /** First day of week: 0 = Sunday, 1 = Monday */
+    weekStartsOn?: 0 | 1;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Input size variant */
+    size?: VacanoComponentSize;
+    /** Input style variant */
+    variant?: DatePickerVariant;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Full width mode */
     fullWidth?: boolean;
-    status?: ChipStatus;
+    /** Label text */
+    label?: string;
+    /** Portal render node for dropdown (for overflow hidden containers) */
+    portalRenderNode?: HTMLElement | null;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when dropdown opens */
+    onOpen?: () => void;
+    /** Callback when dropdown closes */
+    onClose?: () => void;
 };
 
-export declare type ChipStatus = 'neutral' | 'success' | 'warning' | 'error';
+export declare type DatePickerVariant = 'normal' | 'error';
 
-export declare const Dropdown: ({ trigger, children, placement, align, offset, open, onOpenChange, portalRenderNode, classnames, className, fullWidth, ...rest }: DropdownProps) => JSX.Element;
+export declare const Drawer: ({ animated, children, className, open, position, ref, size, ...rest }: DrawerProps) => ReactPortal | null;
 
-export declare type DropdownAlign = 'start' | 'end';
+export declare type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 
-export declare type DropdownClassnames = {
-    container?: string;
+export declare type DrawerProps = VacanoComponentProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    open: boolean;
+    animated?: boolean;
+    children?: ReactNode;
+    position?: DrawerPosition;
+    size?: string;
+};
+
+export declare const Dropdown: ({ align, children, className, classnames, onClose, onOpen, open: controlledOpen, portalRenderNode, ref, trigger, ...rest }: DropdownProps) => JSX.Element;
+
+export declare type DropdownAlign = 'left' | 'right';
+
+export declare type DropdownClassNames = {
     trigger?: string;
     content?: string;
 };
 
-export declare type DropdownPlacement = 'top' | 'bottom';
+export declare type DropdownPosition = 'top' | 'bottom';
 
-export declare type DropdownProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    trigger: ReactNode;
-    children: ReactNode;
-    placement?: DropdownPlacement;
+export declare type DropdownProps = VacanoComponentProps<HTMLDivElement, DropdownClassNames> & {
     align?: DropdownAlign;
-    offset?: number;
+    children?: ReactNode;
+    onClose?: () => void;
+    onOpen?: () => void;
     open?: boolean;
-    onOpenChange?: (open: boolean) => void;
     portalRenderNode?: HTMLElement | null;
-    classnames?: DropdownClassnames;
-    fullWidth?: boolean;
-    'data-test-id'?: string;
+    trigger: ReactElement;
 };
 
-declare type DropdownTheme = {
-    content: {
-        backgroundColor: string;
-        borderColor: string;
-        shadow: string;
-    };
-};
+export declare const FieldLabel: ({ children, className, ref, required, variant, ...rest }: FieldLabelProps) => JSX.Element | null;
+
+export declare type FieldLabelProps = VacanoComponentProps<HTMLSpanElement> & {
+    children?: string;
+    required?: boolean;
+    variant?: FieldLabelVariant;
+};
+
+export declare type FieldLabelVariant = 'normal' | 'error';
+
+/**
+ * Go-style date formatting
+ * Reference time: Mon Jan 2 15:04:05 MST 2006
+ *
+ * Tokens:
+ * - 2006: 4-digit year
+ * - 06: 2-digit year
+ * - January: full month name
+ * - Jan: short month name
+ * - 01: zero-padded month (01-12)
+ * - 1: month (1-12)
+ * - Monday: full weekday name
+ * - Mon: short weekday name
+ * - 02: zero-padded day (01-31)
+ * - 2: day (1-31)
+ * - _2: space-padded day
+ * - 15: 24-hour hour (00-23)
+ * - 03: 12-hour hour zero-padded (01-12)
+ * - 3: 12-hour hour (1-12)
+ * - 04: minute (00-59)
+ * - 05: second (00-59)
+ * - PM: AM/PM uppercase
+ * - pm: am/pm lowercase
+ */
+export declare const formatDateGo: (date: Date, format: string, locale?: string) => string;
 
 export declare const GlobalStyle: () => JSX.Element;
 
-export declare const Input: ({ className, classnames, fullWidth, icon, label, onChange, onBlur, onFocus, ref, state, type, value, ...rest }: InputProps) => JSX.Element;
+export declare const ImageCropper: ({ allowedTypes, applyLabel, buttonLabel, cancelLabel, className, classnames, compression, maxFileSize, onCrop, onError, outputSize, portalSize, previewSize, ref, type, value, ...rest }: ImageCropperProps) => JSX.Element;
 
-export declare type InputClassnames = {
-    container?: string;
-    label?: string;
-    wrapper?: string;
+export declare type ImageCropperClassNames = {
+    button?: string;
+    preview?: string;
+};
+
+export declare type ImageCropperError = {
+    code: string;
+    message: string;
+};
+
+export declare type ImageCropperOutputType = 'jpeg' | 'png';
+
+export declare type ImageCropperProps = VacanoComponentProps<HTMLDivElement, ImageCropperClassNames> & Omit<UseImageCropperOptions, 'onCrop'> & {
+    buttonLabel?: string;
+    onCrop?: (result: ImageCropperResult) => void;
+    previewSize?: number;
+    value?: string | null;
+};
+
+export declare type ImageCropperResult = {
+    base64: string;
+    blob: Blob;
+    state: ImageCropperState;
+};
+
+export declare type ImageCropperState = {
+    fileName: string;
+    sourceBase64: string;
+    sourceWidth: number;
+    sourceHeight: number;
+};
+
+export declare const Input: ({ className, classnames, disabled, fullWidth, label, ref, size, variant, ...rest }: InputProps) => JSX.Element;
+
+export declare type InputClassNames = {
     input?: string;
-    icon?: string;
-    toggle?: string;
+    label?: string;
+};
+
+export declare type InputProps = VacanoComponentProps<HTMLInputElement, InputClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> & {
+    fullWidth?: boolean;
+    label?: string;
+    size?: VacanoComponentSize;
+    variant?: InputVariant;
+};
+
+export declare type InputVariant = 'normal' | 'error';
+
+/**
+ * Keyboard key values based on KeyboardEvent.key
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+ */
+declare type KeyboardEventKey = 'Meta' | 'Control' | 'Alt' | 'Shift' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | 'PageUp' | 'PageDown' | ' ' | 'Enter' | 'Tab' | 'Backspace' | 'Delete' | 'Insert' | 'Escape' | '`' | '-' | '=' | '[' | ']' | '\\' | ';' | "'" | ',' | '.' | '/' | 'NumLock' | 'NumpadEnter' | 'NumpadAdd' | 'NumpadSubtract' | 'NumpadMultiply' | 'NumpadDivide' | 'NumpadDecimal' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'CapsLock' | 'ScrollLock' | 'Pause' | 'PrintScreen' | 'ContextMenu';
+
+export declare const KeysBindings: ({ className, classnames, keys, ref, variant, ...rest }: KeysBindingsProps) => JSX.Element | null;
+
+export declare type KeysBindingsClassNames = {
+    item?: string;
 };
 
-export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> & {
+export declare type KeysBindingsProps = VacanoComponentProps<HTMLDivElement, KeysBindingsClassNames> & {
+    keys?: KeyboardEventKey[];
+    variant?: KeysBindingsVariant;
+};
+
+export declare type KeysBindingsVariant = 'dark' | 'light';
+
+export declare const KeySymbol: ({ className, ref, symbol, variant, ...rest }: KeySymbolProps) => JSX.Element | null;
+
+export declare type KeySymbolProps = VacanoComponentProps<HTMLSpanElement> & {
+    symbol: string;
+    variant?: KeySymbolVariant;
+};
+
+export declare type KeySymbolVariant = 'dark' | 'light';
+
+export declare const Modal: ({ animated, children, className, classnames, open, ref, width, ...rest }: ModalProps) => ReactPortal | null;
+
+export declare type ModalClassNames = {
+    overlay?: string;
+    content?: string;
+};
+
+export declare type ModalProps = VacanoComponentProps<HTMLDivElement, ModalClassNames> & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    open: boolean;
+    animated?: boolean;
+    children?: ReactNode;
+    width?: string;
+};
+
+export declare const MultiSelect: ({ className, classnames, disabled, emptyMessage, label, maxVisible, modalTitle, onChange, options, placeholder, ref, searchPlaceholder, value, variant, ...rest }: MultiSelectProps) => JSX.Element;
+
+export declare type MultiSelectClassNames = {
+    trigger?: string;
+    chips?: string;
+    chip?: string;
+    placeholder?: string;
+    modal?: string;
+    search?: string;
+    options?: string;
+    option?: string;
+    empty?: string;
+};
+
+export declare type MultiSelectOption = {
     value: string;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    type?: InputType;
+    label: string;
+    disabled?: boolean;
+};
+
+export declare type MultiSelectProps = VacanoComponentProps<HTMLDivElement, MultiSelectClassNames> & {
+    value: string[];
+    options: MultiSelectOption[];
+    onChange: (value: string[]) => void;
     label?: string;
-    icon?: ReactNode;
-    state?: InputState;
-    fullWidth?: boolean;
-    className?: string;
-    classnames?: InputClassnames;
-    ref?: Ref<HTMLInputElement>;
-    'data-test-id'?: string;
+    placeholder?: string;
+    variant?: MultiSelectVariant;
+    disabled?: boolean;
+    maxVisible?: number;
+    emptyMessage?: ReactNode;
+    searchPlaceholder?: string;
+    modalTitle?: string;
 };
 
-export declare type InputState = 'warning' | 'error';
-
-declare type InputStateTheme = {
-    wrapper: {
-        backgroundColor: string;
-        borderColor: string;
-        focus: {
-            outlineColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-    input: {
-        color: string;
-        placeholderColor: string;
-    };
-    icon: {
-        color: string;
-    };
-};
-
-declare type InputTheme = {
-    wrapper: {
-        backgroundColor: string;
-        borderColor: string;
-        focus: {
-            outlineColor: string;
-        };
-        disabled: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-    input: {
-        color: string;
-        placeholderColor: string;
-        disabled: {
-            color: string;
-        };
-    };
-    icon: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    toggle: {
-        color: string;
-    };
-    state: {
-        warning: InputStateTheme;
-        error: InputStateTheme;
-    };
-};
-
-export declare type InputType = InputHTMLAttributes<HTMLInputElement>['type'];
-
-export declare const Loader: ({ "aria-label": ariaLabel, className, classnames, size, ...rest }: LoaderProps) => JSX.Element;
-
-export declare type LoaderClassnames = {
-    container?: string;
-};
-
-export declare type LoaderProps = HTMLAttributes<HTMLSpanElement> & {
-    'aria-label'?: string;
-    'data-test-id'?: string;
-    classnames?: LoaderClassnames;
-    size?: number;
+export declare type MultiSelectVariant = 'normal' | 'error';
+
+export declare const Panel: ({ children, className, classnames, description, ref, title, variant, ...rest }: PanelProps) => JSX.Element;
+
+export declare type PanelClassNames = {
+    title?: string;
+    description?: string;
+    content?: string;
 };
 
-export declare const Radio: ({ checked, className, classnames, disabled, label, onChange, ref, state, ...rest }: RadioProps) => JSX.Element;
+export declare type PanelProps = VacanoComponentProps<HTMLDivElement, PanelClassNames> & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> & {
+    children: ReactNode;
+    description?: string;
+    title?: string;
+    variant?: PanelVariant;
+};
+
+export declare type PanelVariant = 'light' | 'dark';
+
+export declare const Progress: ({ value, size, className, classnames, ref, ...rest }: ProgressProps) => JSX.Element;
+
+export declare type ProgressClassNames = {
+    track?: string;
+    bar?: string;
+};
 
-export declare const RadioCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, state, ...rest }: RadioCardProps) => JSX.Element;
+export declare type ProgressProps = VacanoComponentProps<HTMLDivElement, ProgressClassNames> & {
+    /** Progress value from 0 to 100 */
+    value: number;
+    /** Size variant */
+    size?: VacanoComponentSize;
+};
+
+export declare const Radio: ({ checked, className, classnames, disabled, label, onChange, ref, variant, ...rest }: RadioProps) => JSX.Element;
 
-export declare type RadioCardClassnames = {
-    container?: string;
+export declare const RadioCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, variant, ...rest }: RadioCardProps) => JSX.Element;
+
+export declare type RadioCardClassNames = {
     radio?: string;
     content?: string;
     label?: string;
     description?: string;
 };
 
-export declare type RadioCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+export declare type RadioCardProps = VacanoComponentProps<HTMLInputElement, RadioCardClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
     checked: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
     label: string;
     description?: string;
     fullWidth?: boolean;
-    state?: RadioCardState;
-    className?: string;
-    classnames?: RadioCardClassnames;
-    ref?: Ref<HTMLInputElement>;
-    'data-test-id'?: string;
+    variant?: RadioCardVariant;
 };
 
-export declare type RadioCardState = 'warning' | 'error';
-
-declare type RadioCardStateTheme = {
-    container: {
-        borderColor: string;
-        checked: {
-            borderColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-    description: {
-        color: string;
-    };
-};
-
-declare type RadioCardTheme = {
-    container: {
-        backgroundColor: string;
-        borderColor: string;
-        hover: {
-            borderColor: string;
-        };
-        checked: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-        focus: {
-            outlineColor: string;
-        };
-        disabled: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
-    label: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    description: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    state: {
-        warning: RadioCardStateTheme;
-        error: RadioCardStateTheme;
-    };
-};
-
-export declare type RadioClassnames = {
-    container?: string;
+export declare type RadioCardVariant = 'normal' | 'error';
+
+export declare type RadioClassNames = {
     input?: string;
-    circle?: string;
+    box?: string;
     dot?: string;
     label?: string;
 };
 
-export declare const RadioGroup: ({ className, classnames, disabled, label, name, onChange, options, value, ...rest }: RadioGroupProps) => JSX.Element;
+export declare const RadioGroup: ({ className, classnames, disabled, label, name, onChange, options, ref, value, ...rest }: RadioGroupProps) => JSX.Element;
 
-export declare type RadioGroupClassnames = {
-    container?: string;
+export declare type RadioGroupClassNames = {
     label?: string;
     options?: string;
     radio?: string;
@@ -483,417 +471,251 @@ export declare type RadioGroupOption = {
     value: string;
 };
 
-export declare type RadioGroupProps = {
-    value: string;
+export declare type RadioGroupProps = VacanoComponentProps<HTMLDivElement, RadioGroupClassNames> & {
     options: RadioGroupOption[];
+    value: string | null;
     onChange: (value: string) => void;
     label?: string;
     name?: string;
     disabled?: boolean;
-    className?: string;
-    classnames?: RadioGroupClassnames;
-    'data-test-id'?: string;
 };
 
-declare type RadioGroupTheme = {
-    label: {
-        color: string;
-    };
-};
-
-export declare type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+export declare type RadioProps = VacanoComponentProps<HTMLInputElement, RadioClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
     checked: boolean;
-    classnames?: RadioClassnames;
-    'data-test-id'?: string;
-    label?: string;
     onChange: ChangeEventHandler<HTMLInputElement>;
-    ref?: Ref<HTMLInputElement>;
-    state?: RadioState;
-};
-
-export declare type RadioState = 'warning' | 'error';
-
-declare type RadioStateTheme = {
-    circle: {
-        borderColor: string;
-        checked: {
-            borderColor: string;
-        };
-        focus: {
-            shadowColor: string;
-        };
-    };
-    dot: {
-        color: string;
-    };
-    label: {
-        color: string;
-    };
-};
-
-declare type RadioTheme = {
-    circle: {
-        borderColor: string;
-        checked: {
-            borderColor: string;
-        };
-        focus: {
-            shadowColor: string;
-        };
-    };
-    dot: {
-        color: string;
-    };
-    label: {
-        color: string;
-    };
-    state: {
-        warning: RadioStateTheme;
-        error: RadioStateTheme;
-    };
-};
-
-export declare const Select: ({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, label, icon, state, disabled, fullWidth, placement, maxHeight, virtualized, searchable, portalRenderNode, className, classnames, ...rest }: SelectProps) => JSX.Element;
-
-export declare type SelectClassnames = {
-    container?: string;
+    label?: string;
+    variant?: RadioVariant;
+};
+
+export declare type RadioVariant = 'normal' | 'error';
+
+export declare const Select: ({ className, classnames, disabled, fullWidth, label, onChange, options, placeholder, portalRenderNode, ref, size, value, variant, ...rest }: SelectProps) => JSX.Element;
+
+export declare type SelectClassNames = {
     label?: string;
     trigger?: string;
-    content?: string;
-    search?: string;
-    list?: string;
+    dropdown?: string;
     option?: string;
-    empty?: string;
 };
 
 export declare type SelectOption = {
-    label: string;
     value: string;
+    label: string;
+    disabled?: boolean;
 };
 
-export declare type SelectPlacement = 'top' | 'bottom';
-
-export declare type SelectProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+export declare type SelectProps = VacanoComponentProps<HTMLDivElement, SelectClassNames> & {
+    value: string;
     options: SelectOption[];
-    value?: string;
     onChange?: (value: string) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyMessage?: string;
     label?: string;
-    icon?: ReactNode;
-    state?: SelectState;
+    placeholder?: string;
+    variant?: SelectVariant;
+    size?: VacanoComponentSize;
     disabled?: boolean;
     fullWidth?: boolean;
-    placement?: SelectPlacement;
-    maxHeight?: number;
-    virtualized?: boolean;
-    searchable?: boolean;
     portalRenderNode?: HTMLElement | null;
-    classnames?: SelectClassnames;
-    'data-test-id'?: string;
 };
 
-export declare type SelectState = 'warning' | 'error';
-
-declare type SelectStateTheme = {
-    trigger: {
-        backgroundColor: string;
-        borderColor: string;
-        focus: {
-            outlineColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-    value: {
-        color: string;
-        placeholderColor: string;
-    };
-    icon: {
-        color: string;
-    };
-    chevron: {
-        color: string;
-    };
-};
-
-declare type SelectTheme = {
-    trigger: {
-        backgroundColor: string;
-        borderColor: string;
-        focus: {
-            outlineColor: string;
-        };
-        disabled: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
-    label: {
-        color: string;
-    };
-    value: {
-        color: string;
-        placeholderColor: string;
-        disabled: {
-            color: string;
-        };
-    };
-    icon: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    chevron: {
-        color: string;
-        disabled: {
-            color: string;
-        };
-    };
-    content: {
-        backgroundColor: string;
-        borderColor: string;
-        shadow: string;
-    };
-    option: {
-        color: string;
-        backgroundColor: string;
-        hover: {
-            backgroundColor: string;
-        };
-        selected: {
-            backgroundColor: string;
-            color: string;
-        };
-    };
-    search: {
-        backgroundColor: string;
-        borderColor: string;
-        color: string;
-        placeholderColor: string;
-    };
-    empty: {
-        color: string;
-    };
-    state: {
-        warning: SelectStateTheme;
-        error: SelectStateTheme;
-    };
-};
-
-export declare const Spinner: ({ "aria-label": ariaLabel, className, classnames, size, ...rest }: SpinnerProps) => JSX.Element;
-
-export declare type SpinnerClassnames = {
-    container?: string;
-};
-
-export declare type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
+export declare type SelectVariant = 'normal' | 'error';
+
+export declare const Spinner: ({ "aria-label": ariaLabel, className, ref, size, ...rest }: SpinnerProps) => JSX.Element;
+
+export declare type SpinnerClassNames = Record<string, never>;
+
+export declare type SpinnerProps = VacanoComponentProps<HTMLDivElement, SpinnerClassNames> & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children'> & {
+    size?: SpinnerSize;
     'aria-label'?: string;
-    classnames?: SpinnerClassnames;
-    'data-test-id'?: string;
-    size?: number;
 };
 
-export declare type StyledButtonCharProps = {
-    $variant: ButtonVariant;
-    $loading?: boolean;
-};
+export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 
-export declare type StyledButtonContainerProps = {
-    $variant: ButtonVariant;
-    $fullWidth?: boolean;
-    $loading?: boolean;
-    $iconOnly?: boolean;
-};
+export declare const StatusCard: ({ border, className, classnames, icon, label, ref, shadow, trend, trendVariant, value, ...rest }: StatusCardProps) => JSX.Element;
 
-export declare type StyledButtonIconWrapperProps = {
-    $variant: ButtonVariant;
-    $loading?: boolean;
+export declare type StatusCardClassNames = {
+    label?: string;
+    value?: string;
+    trend?: string;
 };
 
-export declare type StyledButtonTextProps = {
-    $loading?: boolean;
+export declare type StatusCardProps = VacanoComponentProps<HTMLDivElement, StatusCardClassNames> & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    border?: boolean;
+    icon?: ReactNode;
+    label: string;
+    shadow?: boolean;
+    trend?: string;
+    trendVariant?: StatusCardTrend;
+    value: string;
 };
 
-export declare type StyledCheckboxCardContainerProps = {
-    $checked?: boolean;
-    $disabled?: boolean;
-    $fullWidth?: boolean;
-    $state?: CheckboxCardState;
-};
+export declare type StatusCardTrend = 'positive' | 'negative' | 'neutral';
 
-export declare type StyledCheckboxCardDescriptionProps = {
-    $state?: CheckboxCardState;
+export declare type StepItem = {
+    value: string;
+    label: string;
 };
 
-export declare type StyledCheckboxCardLabelProps = {
-    $state?: CheckboxCardState;
-};
+export declare const Stepper: ({ className, classnames, onChange, orientation, ref, steps, value, ...rest }: StepperProps) => JSX.Element;
 
-export declare type StyledChipContainerProps = {
-    $status?: ChipStatus;
-    $fullWidth?: boolean;
+export declare type StepperClassNames = {
+    step?: string;
+    circle?: string;
+    label?: string;
+    line?: string;
 };
 
-export declare type StyledDropdownContainerProps = {
-    $fullWidth?: boolean;
-};
+export declare type StepperOrientation = 'horizontal' | 'vertical';
 
-export declare type StyledDropdownContentProps = {
-    $isOpen: boolean;
+export declare type StepperProps = VacanoComponentProps<HTMLDivElement, StepperClassNames> & {
+    value: string;
+    steps: StepItem[];
+    onChange?: (value: string) => void;
+    orientation?: StepperOrientation;
 };
 
-export declare type StyledDropdownTriggerProps = {
-    $fullWidth?: boolean;
+export declare type TabItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
 };
 
-export declare type StyledInputContainerProps = {
-    $fullWidth?: boolean;
-};
+export declare const Tabs: ({ className, classnames, onChange, ref, tabs, value, ...rest }: TabsProps) => JSX.Element;
 
-export declare type StyledInputFieldProps = {
-    $state?: InputState;
+export declare type TabsClassNames = {
+    tab?: string;
 };
 
-export declare type StyledInputIconWrapperProps = {
-    $disabled?: boolean;
-    $state?: InputState;
+export declare type TabsProps = VacanoComponentProps<HTMLDivElement, TabsClassNames> & {
+    value: string;
+    tabs: TabItem[];
+    onChange: (value: string) => void;
 };
 
-export declare type StyledInputLabelProps = {
-    $state?: InputState;
-};
+export declare const Tags: ({ className, classnames, createKey, disabled, emptyMessage, freeSolo, label, onChange, options, placeholder, portalRenderNode, ref, value, variant, ...rest }: TagsProps) => JSX.Element;
 
-export declare type StyledInputToggleProps = {
-    $state?: InputState;
-    $disabled?: boolean;
+export declare type TagsClassNames = {
+    trigger?: string;
+    chip?: string;
+    input?: string;
+    dropdown?: string;
+    option?: string;
+    empty?: string;
 };
 
-export declare type StyledInputWrapperProps = {
-    $state?: InputState;
-    $disabled?: boolean;
-};
+export declare type TagsCreateKey = 'Tab' | 'Enter';
 
-export declare type StyledLoaderContainerProps = {
-    $size: number;
+export declare type TagsOption = {
+    value: string;
+    label: string;
 };
 
-export declare type StyledRadioCardContainerProps = {
-    $checked?: boolean;
-    $disabled?: boolean;
-    $fullWidth?: boolean;
-    $state?: RadioCardState;
+export declare type TagsProps = VacanoComponentProps<HTMLDivElement, TagsClassNames> & {
+    value: string[];
+    onChange: (value: string[]) => void;
+    options?: TagsOption[];
+    label?: string;
+    placeholder?: string;
+    variant?: TagsVariant;
+    disabled?: boolean;
+    freeSolo?: boolean;
+    createKey?: TagsCreateKey;
+    emptyMessage?: ReactNode;
+    portalRenderNode?: HTMLElement | null;
 };
 
-export declare type StyledRadioCardDescriptionProps = {
-    $state?: RadioCardState;
-};
+export declare type TagsVariant = 'normal' | 'error';
 
-export declare type StyledRadioCardLabelProps = {
-    $state?: RadioCardState;
+export declare type Toast = {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration?: number;
 };
 
-export declare type StyledSelectChevronProps = {
-    $state?: SelectState;
-    $disabled?: boolean;
-    $isOpen?: boolean;
+export declare type ToastAction = {
+    type: 'ADD_TOAST';
+    payload: Toast;
+} | {
+    type: 'REMOVE_TOAST';
+    payload: string;
+} | {
+    type: 'SHOW_NEXT_FROM_QUEUE';
 };
 
-export declare type StyledSelectContainerProps = {
-    $fullWidth?: boolean;
+export declare type ToastContainerProps = {
+    toasts: Toast[];
+    queueCount: number;
+    removeToast: (id: string) => void;
 };
 
-export declare type StyledSelectContentProps = {
-    $isOpen: boolean;
-    $maxHeight: number;
+export declare type ToastContextValue = {
+    addToast: (message: string, variant?: ToastVariant, duration?: number) => void;
+    removeToast: (id: string) => void;
 };
 
-export declare type StyledSelectIconProps = {
-    $state?: SelectState;
-    $disabled?: boolean;
+export declare type ToastItemProps = {
+    toast: Toast;
+    onRemove: (id: string) => void;
 };
 
-export declare type StyledSelectLabelProps = {
-    $state?: SelectState;
-};
+export declare const ToastProvider: ({ children }: PropsWithChildren) => JSX.Element;
 
-export declare type StyledSelectOptionProps = {
-    $isSelected?: boolean;
-    $isHighlighted?: boolean;
+export declare type ToastState = {
+    toasts: Toast[];
+    queue: Toast[];
 };
 
-export declare type StyledSelectTriggerProps = {
-    $state?: SelectState;
-    $disabled?: boolean;
-    $isOpen?: boolean;
-};
+export declare type ToastVariant = 'default' | 'success' | 'warning' | 'danger';
 
-export declare type StyledSelectValueProps = {
-    $isPlaceholder?: boolean;
-    $state?: SelectState;
-    $disabled?: boolean;
-};
+export declare const Tooltip: ({ children, className, classnames, content, delay, placement, portalRenderNode, ref, variant, ...rest }: TooltipProps) => JSX.Element;
 
-export declare type StyledSpinnerContainerProps = {
-    $size: number;
+export declare type TooltipClassNames = {
+    content?: string;
 };
 
-export declare type Theme = {
-    chip: {
-        color: {
-            default: string;
-            neutral: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        backgroundColor: {
-            default: string;
-            neutral: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-    };
-    button: {
-        primary: ButtonVariantTheme;
-        secondary: ButtonVariantTheme;
-        ghost: ButtonVariantTheme;
-        danger: ButtonVariantTheme;
-    };
-    checkbox: CheckboxTheme;
-    checkboxCard: CheckboxCardTheme;
-    checkboxGroup: CheckboxGroupTheme;
-    input: InputTheme;
-    radio: RadioTheme;
-    radioCard: RadioCardTheme;
-    radioGroup: RadioGroupTheme;
-    dropdown: DropdownTheme;
-    select: SelectTheme;
+export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export declare type TooltipProps = VacanoComponentProps<HTMLDivElement, TooltipClassNames> & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'content'> & {
+    children: ReactNode;
+    content: ReactNode;
+    delay?: number;
+    placement?: TooltipPlacement;
+    variant?: TooltipVariant;
+    portalRenderNode?: HTMLElement | null;
 };
 
-export declare interface ThemeContextValue {
-    theme: Theme;
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-}
+export declare type TooltipVariant = 'dark' | 'light' | 'success' | 'warning' | 'danger';
 
-export declare const themeDark: Theme;
+export declare const useImageCropper: (options?: UseImageCropperOptions) => UseImageCropperReturn;
 
-export declare const themeLight: Theme;
+export declare type UseImageCropperOptions = {
+    allowedTypes?: string[];
+    applyLabel?: string;
+    cancelLabel?: string;
+    compression?: number;
+    maxFileSize?: number;
+    onCrop?: (result: ImageCropperResult) => void;
+    onError?: (error: ImageCropperError) => void;
+    outputSize?: number;
+    portalSize?: number;
+    type?: ImageCropperOutputType;
+};
 
-export declare type ThemeMode = 'light' | 'dark';
+export declare type UseImageCropperReturn = {
+    open: () => void;
+};
 
-export declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): JSX.Element;
+export declare const useToast: () => ToastContextValue;
 
-export declare interface ThemeProviderProps {
-    children: ReactNode;
-    defaultMode?: ThemeMode;
-}
+declare type VacanoComponentClassNames<T> = T;
+
+declare type VacanoComponentProps<E extends HTMLElement | null, T extends Record<string, string> = Record<string, never>> = {
+    'data-test-id'?: string;
+    className?: string;
+    classnames?: VacanoComponentClassNames<T>;
+    ref?: Ref<E>;
+};
 
-export declare const useTheme: () => ThemeContextValue;
+declare type VacanoComponentSize = 'compact' | 'default';
 
 export { }