@ws-ui/ui-components 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
+import { ElementType } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { JSX } from 'react';
@@ -8,6 +10,9 @@ import { default as Qodly } from './Qodly.svg?react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
+import { UseComboboxReturnValue } from 'downshift';
+import { UseMultipleSelectionReturnValue } from 'downshift';
+import { UseSelectReturnValue } from 'downshift';
 
 export declare type BreadcrumbColorConfig = {
     active: string;
@@ -158,6 +163,18 @@ export declare interface CheckboxState {
     isRequired: boolean;
 }
 
+export declare const CloseButton: <T>({ tab, onClose, }: {
+    tab: T;
+    onClose: (e?: default_2.MouseEvent) => void;
+}) => JSX_2.Element;
+
+export declare function cn(...inputs: any[]): string;
+
+export declare interface DragState {
+    draggedIndex: number | null;
+    dragOverIndex: number | null;
+}
+
 /**
  * The Fd4dLogo icon
  * See in figma https://www.figma.com/file/YlxCihvTu1q27RwIJD9DSH?node-id=64%3A3714
@@ -2580,6 +2597,8 @@ export declare const FdWifi: (props: JSX.IntrinsicElements["svg"]) => JSX_2.Elem
  **/
 export declare const FdWindow: (props: JSX.IntrinsicElements["svg"]) => JSX_2.Element;
 
+export declare const generateId: () => string;
+
 /**
  * Default resize handle component
  * Displays a visual indicator when dragging
@@ -2596,6 +2615,48 @@ declare interface HandleProps {
 
 export declare type IconType = (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 
+export declare interface IDownshiftHookParams<T = unknown> {
+    options?: ISelectOption<T>[] | ISelectOptionGroup<T>[];
+    value?: SelectValue<T>;
+    defaultValue?: SelectValue<T>;
+    onChange?: ((value: SelectValue<T>) => void) | ((value: SelectValue<T> | ((prev: SelectValue<T>) => SelectValue<T>)) => void);
+    isMulti?: boolean;
+    isSearchable?: boolean;
+    isOpen?: boolean;
+    isFocused?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    getOptionLabel?: (option: ISelectOption<T>) => string;
+    getOptionValue?: (option: ISelectOption<T>) => string | number;
+    items?: ISelectOption<T>[];
+    customOptionGenerator?: OptionGenerator<T>;
+    disableInternalFiltering?: boolean;
+}
+
+export declare interface IDownshiftHookReturn<T = unknown> {
+    isOpen: boolean;
+    selectedItem: ISelectOption<T> | null;
+    highlightedIndex: number;
+    inputValue: string;
+    getToggleButtonProps: UseSelectReturnValue<ISelectOption<T>>['getToggleButtonProps'] | UseComboboxReturnValue<ISelectOption<T>>['getToggleButtonProps'];
+    getMenuProps: UseSelectReturnValue<ISelectOption<T>>['getMenuProps'] | UseComboboxReturnValue<ISelectOption<T>>['getMenuProps'];
+    getItemProps: UseSelectReturnValue<ISelectOption<T>>['getItemProps'] | UseComboboxReturnValue<ISelectOption<T>>['getItemProps'];
+    getInputProps?: UseComboboxReturnValue<ISelectOption<T>>['getInputProps'];
+    selectedItems: ISelectOption<T>[];
+    filteredItems: ISelectOption<T>[];
+    setInputValue: (value: string) => void;
+    setIsOpen: (isOpen: boolean) => void;
+    toggleMenu: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    clearSelection: () => void;
+    removeItem: (item: ISelectOption<T>) => void;
+    multipleSelection: UseMultipleSelectionReturnValue<ISelectOption<T>>;
+    isMulti: boolean;
+    isSearchable: boolean;
+}
+
 export declare interface IMultilineMessage {
     title?: string;
     messages: string[];
@@ -2727,6 +2788,77 @@ export declare interface InputSizeConfig {
     icon: string;
 }
 
+export declare interface InternalToastContextValue {
+    addToast: (item: Omit<ToastItem, 'id'>) => string;
+    close: (id: string) => void;
+    closeAll: (position?: ToastPosition) => void;
+}
+
+export declare interface ISelectContextValue<T = unknown> {
+    size: SelectSize;
+    color: SelectColor;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    hasMessage: boolean;
+    setHasMessage: default_2.Dispatch<default_2.SetStateAction<boolean>>;
+    options?: ISelectOption<T>[] | ISelectOptionGroup<T>[];
+    downshift: IDownshiftHookReturn<T>;
+}
+
+export declare interface ISelectOption<T = unknown> {
+    value: string | number;
+    label: string;
+    data?: T;
+    isDisabled?: boolean;
+    icon?: ReactNode;
+    [index: string]: string | number | boolean | ReactNode | T;
+}
+
+export declare interface ISelectOptionGroup<T = unknown> {
+    label: string;
+    options: ISelectOption<T>[];
+}
+
+export declare interface ISelectOptionProps<T = unknown> extends default_2.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+    data: ISelectOption<T>;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    innerProps?: default_2.HTMLAttributes<HTMLDivElement>;
+}
+
+export declare const ListItem: ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLElement>>;
+
+export declare interface ListItemProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Whether the item is currently active/selected.
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item has an error state.
+     */
+    error?: boolean;
+    /**
+     * Whether the item is in an "open" state (e.g., expanded folder).
+     */
+    isOpen?: boolean;
+    /**
+     * The content of the item.
+     */
+    children?: ReactNode;
+    /**
+     * The element type to render as (e.g., 'div', 'button', 'a').
+     * @default 'div'
+     */
+    as?: ElementType;
+}
+
 export declare const Menu: {
     ({ children, open: controlledOpen, defaultOpen, onOpenChange, }: MenuProps): JSX_2.Element;
     displayName: string;
@@ -2768,6 +2900,34 @@ export declare type NumberSize = {
     height: number;
 };
 
+export declare type OptionGenerator<T = unknown> = (inputValue: string, currentOptions: ISelectOption<T>[]) => ISelectOption<T>[];
+
+export declare const Panel: default_2.ForwardRefExoticComponent<PanelProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare type PanelDepth = 0 | 1 | 2 | 3 | 4;
+
+export declare interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The depth/elevation level of the panel (0-4)
+     * - 0: Root/Editor background (default)
+     * - 1: Primary panel/sidebar
+     * - 2: Secondary panel/card
+     * - 3: Elevated card/modal
+     * - 4: Highest elevation (tooltips, popovers)
+     */
+    depth?: PanelDepth;
+    children: ReactNode;
+    /**
+     * the type of border to apply diferent border color bor tabs and normal panel
+     */
+    contentType?: 'tabs' | 'primary' | 'normal';
+    /**
+     * Whether the panel is disabled.
+     * If true, changes text color to inactive-text.
+     */
+    disabled?: boolean;
+}
+
 export declare const Pill: ForwardRefExoticComponent<PillProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<PillRootProps & RefAttributes<HTMLDivElement>>;
     Text: ForwardRefExoticComponent<PillTextProps & RefAttributes<HTMLSpanElement>>;
@@ -2834,6 +2994,8 @@ export declare interface PillTextProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
 }
 
+export declare const POSITIONS: readonly ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right"];
+
 export { Qodly }
 
 export declare const Radio: {
@@ -3060,6 +3222,20 @@ export declare interface ResizableProps {
      * Ref to the resizable element
      */
     ref?: Ref<HTMLElement>;
+    /**
+     * The depth/elevation level of the panel (0-4)
+     * - 0: Root/Editor background (default)
+     * - 1: Primary panel/sidebar
+     * - 2: Secondary panel/card
+     * - 3: Elevated card/modal
+     * - 4: Highest elevation (tooltips, popovers)
+     */
+    depth?: PanelDepth;
+    /**
+     * Whether the resizable component is disabled.
+     * If true, changes text color to inactive-text.
+     */
+    disabled?: boolean;
 }
 
 export declare type ResizeCallback = (event: MouseEvent | TouchEvent, direction: ResizeDirection, elementRef: HTMLElement, delta: NumberSize) => void;
@@ -3079,6 +3255,287 @@ export declare type ResizeEnable = {
 
 export declare type ResizeStartCallback = (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, direction: ResizeDirection, elementRef: HTMLElement) => void | boolean;
 
+export declare const Select: {
+    Root: {
+        <T = unknown>({ size, color, isInvalid, isDisabled, className, children, downshiftParams, ...props }: SelectRootProps<T>): JSX_2.Element;
+        displayName: string;
+    };
+    Control: ForwardRefExoticComponent<SelectControlProps & RefAttributes<HTMLDivElement>>;
+    ValueContainer: {
+        ({ className, children, isMulti, }: SelectValueContainerProps): JSX_2.Element;
+        displayName: string;
+    };
+    Input: ForwardRefExoticComponent<SelectInputProps & RefAttributes<HTMLInputElement>>;
+    Placeholder: {
+        ({ className, children }: SelectPlaceholderProps): JSX_2.Element;
+        displayName: string;
+    };
+    SingleValue: {
+        <T>({ className, children, data, isDisabled, }: SelectSingleValueProps<T>): JSX_2.Element;
+        displayName: string;
+    };
+    MultiValue: {
+        <T>({ className, children, data, isDisabled, isFocused, onRemove, }: SelectMultiValueProps<T>): JSX_2.Element;
+        displayName: string;
+    };
+    ClearIndicator: {
+        ({ color: propColor, className, children, onClick, isDisabled: propIsDisabled, ...props }: SelectClearIndicatorProps): JSX_2.Element | null;
+        displayName: string;
+    };
+    ClearSearchIndicator: ({ className, children, onClick, isDisabled: propIsDisabled, ...props }: SelectClearSearchIndicatorProps) => JSX_2.Element | null;
+    DropdownIndicator: {
+        ({ color: propColor, className, children, onClick, isDisabled: propIsDisabled, ...props }: SelectDropdownIndicatorProps): JSX_2.Element;
+        displayName: string;
+    };
+    Menu: ForwardRefExoticComponent<SelectMenuProps & RefAttributes<HTMLDivElement>>;
+    MenuList: ForwardRefExoticComponent<SelectMenuListProps & RefAttributes<HTMLDivElement>>;
+    Option: {
+        <T>({ className, children, data, isDisabled, isFocused, isSelected, innerProps, ...props }: ISelectOptionProps<T>): JSX_2.Element;
+        displayName: string;
+    };
+    Group: {
+        <T>({ className, children, data, label, }: SelectGroupProps<T>): JSX_2.Element;
+        displayName: string;
+    };
+    GroupHeading: {
+        ({ className, children, }: SelectGroupHeadingProps): JSX_2.Element;
+        displayName: string;
+    };
+    NoOptionsMessage: {
+        ({ className, children, inputValue, }: SelectNoOptionsMessageProps): JSX_2.Element;
+        displayName: string;
+    };
+    Message: {
+        ({ icon, className, children, ...props }: SelectMessageProps): JSX_2.Element;
+        displayName: string;
+    };
+    Field: {
+        <T = unknown>({ placeholder, noOptionsMessage, hideNoOptions, loadingMessage, isClearable, isSearchClearable, isLoading, isRequired, hideIndicators, hideDropdownIndicator, searchPlacement, hideSelectedOptions, onFocus, onBlur, renderMenuHeader, formatOptionLabel, displayFormattedOption, isOptionDisabled, inputRef: propInputRef, controlShouldRenderValue, name, id, onSelectionComplete, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children, usePortal, ...props }: SelectFieldProps<T>): JSX_2.Element;
+        displayName: string;
+    };
+};
+
+export declare interface SelectClearIndicatorProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    color?: SelectColor;
+    className?: string;
+    children?: ReactNode;
+    onClick?: (event: default_2.MouseEvent) => void;
+    isDisabled?: boolean;
+}
+
+export declare interface SelectClearSearchIndicatorProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+    onClick?: (event: default_2.MouseEvent) => void;
+    isDisabled?: boolean;
+}
+
+export declare type SelectColor = 'primary' | 'positive' | 'warning' | 'negative';
+
+export declare interface SelectColorConfig {
+    control: string;
+    controlFocused: string;
+    controlDisabled: string;
+    controlInvalid: string;
+    placeholder: string;
+    singleValue: string;
+    singleValueDisabled: string;
+    multiValue: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    multiValueRemoveHover: string;
+    multiValueDisabled: string;
+    clearIndicator: string;
+    clearIndicatorHover: string;
+    dropdownIndicator: string;
+    dropdownIndicatorHover: string;
+    indicatorSeparator: string;
+    loadingIndicator: string;
+    menu: string;
+    menuList: string;
+    option: string;
+    optionFocused: string;
+    optionSelected: string;
+    optionDisabled: string;
+    group: string;
+    groupHeading: string;
+    noOptionsMessage: string;
+    loadingMessage: string;
+    message: string;
+    messageBackground: string;
+    messageBorder: string;
+    icon: string;
+    iconAction: string;
+    iconActionHover: string;
+}
+
+export declare interface SelectControlProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+    isFocused?: boolean;
+    isDisabled?: boolean;
+}
+
+export declare interface SelectDropdownIndicatorProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    color?: SelectColor;
+    className?: string;
+    children?: ReactNode;
+    onClick?: (event: default_2.MouseEvent) => void;
+    isDisabled?: boolean;
+}
+
+export declare interface SelectFieldProps<T = unknown> extends default_2.InputHTMLAttributes<HTMLInputElement> {
+    placeholder?: string;
+    noOptionsMessage?: string | ((inputValue: string) => string);
+    hideNoOptions?: boolean;
+    loadingMessage?: string;
+    isClearable?: boolean;
+    usePortal?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    hideIndicators?: boolean;
+    hideDropdownIndicator?: boolean;
+    closeMenuOnSelect?: boolean;
+    hideSelectedOptions?: boolean;
+    isSearchClearable?: boolean;
+    searchPlacement?: 'trigger' | 'menu';
+    onFocus?: (event: default_2.FocusEvent<HTMLElement>) => void;
+    onBlur?: (event: default_2.FocusEvent<HTMLElement>) => void;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    renderMenuHeader?: (props: IDownshiftHookReturn<T>) => ReactNode;
+    formatOptionLabel?: (option: ISelectOption<T> & {
+        data?: Record<string, unknown>;
+    }) => ReactNode;
+    displayFormattedOption?: boolean;
+    isOptionDisabled?: (option: ISelectOption<T>) => boolean;
+    name?: string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    inputRef?: default_2.Ref<HTMLInputElement>;
+    controlShouldRenderValue?: boolean;
+    blurInputOnSelect?: boolean;
+    tabSelectsValue?: boolean;
+    backspaceRemovesValue?: boolean;
+    onSelectionComplete?: (value: string, option: ISelectOption<T> | null) => void;
+    children?: ReactNode;
+}
+
+export declare interface SelectGroupHeadingProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface SelectGroupProps<T = unknown> {
+    className?: string;
+    children: ReactNode;
+    data: ISelectOptionGroup<T>;
+    label: string;
+    options: ISelectOption<T>[];
+}
+
+export declare interface SelectInputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    isHidden?: boolean;
+    inputClassName?: string;
+    inputStyle?: CSSProperties;
+}
+
+export declare interface SelectMenuListProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+    isLoading?: boolean;
+    maxHeight?: number;
+}
+
+export declare interface SelectMenuProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+    placement?: 'auto' | 'bottom' | 'top';
+    position?: 'absolute' | 'fixed';
+}
+
+export declare interface SelectMessageProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    icon?: default_2.ReactElement;
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface SelectMultiValueProps<T = unknown> {
+    className?: string;
+    children?: ReactNode;
+    data: ISelectOption<T>;
+    index: number;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+    onRemove?: (item: ISelectOption<T>) => void;
+}
+
+export declare interface SelectNoOptionsMessageProps {
+    className?: string;
+    children?: ReactNode;
+    inputValue?: string;
+}
+
+export declare interface SelectPlaceholderProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface SelectRootProps<T = unknown> extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    size?: SelectSize;
+    color?: 'primary' | 'positive' | 'warning' | 'negative';
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    children: ReactNode;
+    downshiftParams?: IDownshiftHookParams<T>;
+}
+
+export declare interface SelectSingleValueProps<T = unknown> {
+    className?: string;
+    children?: ReactNode;
+    data: ISelectOption<T>;
+    isDisabled?: boolean;
+}
+
+export declare type SelectSize = 'sm' | 'md' | 'lg';
+
+export declare interface SelectSizeConfig {
+    trigger: string;
+    control: string;
+    input: string;
+    placeholder: string;
+    singleValue: string;
+    multiValue: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    indicatorsContainer: string;
+    clearIndicator: string;
+    dropdownIndicator: string;
+    indicatorSeparator: string;
+    loadingIndicator: string;
+    menu: string;
+    menuList: string;
+    option: string;
+    group: string;
+    groupHeading: string;
+    noOptionsMessage: string;
+    loadingMessage: string;
+    message: string;
+    icon: string;
+}
+
+export declare type SelectValue<T = unknown> = ISelectOption<T> | ISelectOption<T>[] | null;
+
+export declare interface SelectValueContainerProps {
+    className?: string;
+    children: ReactNode;
+    isMulti?: boolean;
+}
+
 export declare type Size = {
     width: number | string;
     height: number | string;
@@ -3106,6 +3563,15 @@ export declare interface SnackbarProps extends default_2.HTMLAttributes<HTMLDivE
 
 export declare type SnackbarSize = 'sm' | 'md' | 'lg';
 
+export declare interface SortableFileTabProps<T = unknown> {
+    tab: T;
+    value: string;
+    isActive: boolean;
+    onTabClick: (value: string) => void;
+    dragOverlay?: boolean;
+    className?: string;
+}
+
 export declare interface SubMenuProps {
     label: string;
     icon?: React.ReactNode;
@@ -3114,45 +3580,28 @@ export declare interface SubMenuProps {
     className?: string;
 }
 
-export declare const Surface: default_2.FC<SurfaceProps>;
-
-export declare type SurfaceBorder = 'none' | 'subtle' | 'strong';
-
-export declare type SurfaceDepth = 0 | 1 | 2 | 3 | 4;
+export declare type TabColor = 'primary' | 'positive' | 'negative' | 'warning';
 
-export declare interface SurfaceProps {
-    /**
-     * The depth/elevation level of the surface (0-4)
-     * - 0: Root/Editor background (default)
-     * - 1: Primary panel/sidebar
-     * - 2: Secondary panel/card
-     * - 3: Elevated card/modal
-     * - 4: Highest elevation (tooltips, popovers)
-     */
-    depth?: SurfaceDepth;
-    /**
-     * Border style
-     * - 'none': No border
-     * - 'subtle': Subtle border using --ws-surface-border-subtle
-     * - 'strong': Strong border using --ws-surface-border-strong
-     */
-    border?: SurfaceBorder;
-    /**
-     * Surface variant
-     * - 'default': Standard depth-based surface
-     * - 'panel': VSCode panel style (uses panel background/border variables)
-     */
-    variant?: 'default' | 'panel';
-    className?: string;
-    children: ReactNode;
-    style?: React.CSSProperties;
+export declare interface TabColorConfig {
+    active: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    inactive: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    hover: {
+        bg: string;
+        text: string;
+    };
 }
 
-export declare type TabColor = 'primary' | 'positive' | 'negative' | 'warning';
-
-export declare interface TabItemProps<T = unknown> {
-    value: string;
-    label: string;
+export declare type TabItemProps<T = unknown> = {
+    value?: string;
+    label?: ReactNode;
     icon?: ReactNode;
     disabled?: boolean;
     content?: ReactNode;
@@ -3165,19 +3614,35 @@ export declare interface TabItemProps<T = unknown> {
         onClick: () => void;
         onClose?: () => void;
     }) => ReactNode;
-    data?: T;
-    [key: string]: unknown;
+} & (T extends object ? T : object);
+
+export declare const TabNavContainer: default_2.ForwardRefExoticComponent<TabNavContainerProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TabNavContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    isActive?: boolean;
+    isDesactive?: boolean;
+    children: ReactNode;
 }
 
 export declare const Tabs: {
-    <T = unknown>({ tabs, activeTab, defaultActiveTab, variant, color, size, draggable, showIcons, className, tabListClassName, onTabChange, onReorder, renderTabList, children, }: TabsProps<T>): JSX_2.Element;
+    <T = unknown>({ tabs, valueKey, labelKey, activeTab, defaultActiveTab, variant, color, size, draggable, showIcons, className, tabListClassName, onTabChange, onReorder, renderTabList, renderTab, children, }: TabsProps<T>): JSX_2.Element;
     displayName: string;
 };
 
-declare type TabSize = 'sm' | 'md' | 'lg';
+export declare type TabSize = 'sm' | 'md' | 'lg';
+
+export declare interface TabSizeConfig {
+    padding: string;
+    text: string;
+    icon: string;
+    gap: string;
+    badge?: string;
+}
 
 export declare interface TabsProps<T = unknown> {
-    tabs: TabItemProps<T>[];
+    tabs: T[];
+    valueKey?: string;
+    labelKey?: string;
     activeTab?: string;
     defaultActiveTab?: string;
     variant?: TabVariant;
@@ -3189,17 +3654,62 @@ export declare interface TabsProps<T = unknown> {
     tabListClassName?: string;
     contentClassName?: string;
     onTabChange?: (value: string) => void;
-    onReorder?: (tabs: TabItemProps<T>[]) => void;
+    onReorder?: (tabs: T[], droppedTab?: T) => void;
     renderTabList?: (props: {
-        tabs: TabItemProps<T>[];
+        tabs: T[];
         activeTab: string;
         onTabClick: (value: string) => void;
     }) => ReactNode;
+    renderTab?: (props: {
+        tab: TabItemProps<T>;
+        isActive: boolean;
+        onClick: () => void;
+        onClose?: () => void;
+    }) => ReactNode;
     children?: ReactNode;
 }
 
 export declare type TabVariant = 'default' | 'file';
 
+export declare interface ToastApi {
+    /** Displays a new toast notification. Returns the unique ID of the new toast. */
+    toast: (options: ToastOptions) => string;
+    /** Closes a specific toast by its ID. */
+    close: (id: string) => void;
+    /** Closes all currently visible toasts, optionally filtered by position. */
+    closeAll: (position?: ToastPosition) => void;
+}
+
+export declare const ToastContext: Context<InternalToastContextValue | undefined>;
+
+/** Options passed when calling useToast(options) */
+export declare interface ToastHookOptions {
+    containerStyle?: React.CSSProperties;
+}
+
+export declare interface ToastItem extends Omit<ToastOptions, 'render'> {
+    id: string;
+    render: ({ onClose }: {
+        onClose: () => void;
+    }) => React.ReactNode;
+    containerStyle?: React.CSSProperties;
+}
+
+export declare interface ToastOptions {
+    position?: ToastPosition;
+    duration?: number | 'infinite';
+    keepVisibleOnHover?: boolean;
+    render: ({ onClose }: {
+        onClose: () => void;
+    }) => React.ReactNode;
+}
+
+export declare type ToastPosition = (typeof POSITIONS)[number];
+
+export declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => JSX_2.Element;
+
 export declare const Toggle: {
     ({ label, checked, defaultChecked, disabled, size, color, icons, onChange, className, id, name, ...rest }: ToggleProps): JSX_2.Element;
     displayName: string;
@@ -3257,6 +3767,8 @@ export declare interface TooltipProps {
     trigger?: 'hover' | 'click';
 }
 
+export declare const useToast: (options?: ToastHookOptions) => ToastApi;
+
 export declare type variantTextClasses = {
     outline: string;
     solid: string;