@bioturing/components 0.26.2 → 0.28.1

package/dist/index.d.ts

@@ -137,6 +137,7 @@ import { ModalFuncProps } from 'antd';
 import { ModalProps } from './Modal';
 import { ModalProps as ModalProps_3 } from 'antd/es/modal';
 import { ModalRef } from './functions';
+import { MoveValues } from 'react-use-resizable';
 import { notification } from 'antd';
 import { NotificationArgsProps } from 'antd';
 import { OptionFC } from 'rc-select/lib/Option';
@@ -269,6 +270,8 @@ export { AnchorProps }
 
 export declare const antdColorTokens: ColorTokens;
 
+export declare type AntdPlacement = PopoverProps_2["placement"];
+
 declare type AnyFunction = (...args: any[]) => any;
 
 declare type AnyObject = Record<PropertyKey, any>;
@@ -318,6 +321,15 @@ declare interface BaseFieldProps extends React.HTMLAttributes<HTMLDivElement> {
     colon?: boolean;
 }
 
+export declare type BaseUIAlign = "start" | "end" | "center";
+
+export declare interface BaseUIPlacement {
+    side: BaseUISide;
+    align: BaseUIAlign;
+}
+
+export declare type BaseUISide = "top" | "bottom" | "left" | "right";
+
 export declare const Breadcrumb: (({ className, items, noWrap, itemRender: outsideItemRender, ...rest }: BreadcrumbProps) => JSX.Element) & {
     Item: (props: BreadcrumbItemProps) => JSX.Element;
     Separator: (props: React.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
@@ -337,6 +349,13 @@ export declare interface BreadcrumbProps<T extends AnyObject = AnyObject> extend
     itemRender?: (route: BreadcrumbItemType, params: T, routes: BreadcrumbItemType[], paths: string[]) => React.ReactNode;
 }
 
+/**
+ * Build Antd placement string from BaseUI side and align values
+ * @param placement - Object with side and align properties
+ * @returns Antd placement string
+ */
+export declare function buildAntdPlacement(placement: BaseUIPlacement): AntdPlacement;
+
 export declare const Button: (props: ButtonProps & {
     ref?: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>;
 }) => ReturnType<typeof ButtonInner>;
@@ -414,7 +433,7 @@ export declare interface CheckboxProps extends CheckboxProps_2 {
      * Checkbox appearance variant
      * @default 'default'
      */
-    variant?: 'default' | 'outlined';
+    variant?: "default" | "outlined";
 }
 
 export { CheckboxRef }
@@ -436,14 +455,14 @@ declare type Children = {
     children?: default_2.ReactNode;
 };
 
-export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, onChange, searchProps, }: ChoiceListProps<M>) => JSX.Element;
+export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, onChange, searchProps, className, ...rest }: ChoiceListProps<M>) => JSX.Element;
 
 export declare type ChoiceListItem = {
     label: React.ReactNode;
     value?: string;
 };
 
-export declare interface ChoiceListProps<M extends boolean = false> {
+export declare interface ChoiceListProps<M extends boolean = false> extends Omit<CommandProps, "value" | "onChange"> {
     items: ChoiceListItem[];
     multiple?: M;
     value?: M extends true ? string[] : string;
@@ -934,8 +953,184 @@ export declare type ColorTokenValue = {
 
 export { ColProps }
 
+export declare const Combobox: default_2.ForwardRefExoticComponent<ComboboxProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ComboboxOption {
+    value: string | number;
+    label: default_2.ReactNode;
+    disabled?: boolean;
+    icon?: default_2.ReactNode;
+}
+
+export declare interface ComboboxProps {
+    /** Array of options to be displayed in the combobox */
+    options?: ComboboxOption[];
+    /** Current value of the combobox */
+    value?: string | number | Array<string | number>;
+    /** Default value when uncontrolled */
+    defaultValue?: string | number | Array<string | number>;
+    /** Callback when value changes */
+    onChange?: (value: string | number | Array<string | number>) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Whether to allow clearing the selection */
+    allowClear?: boolean;
+    /** Whether to allow multiple selections */
+    multiple?: boolean;
+    /** Maximum number of tags to show */
+    maxTagCount?: number;
+    /** Whether to show search functionality */
+    showSearch?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement of the dropdown */
+    placement?: PopoverProps_2["placement"];
+    /** Custom className for the component */
+    className?: string;
+    /** Custom class names for different parts */
+    classNames?: {
+        trigger?: string;
+        input?: string;
+        option?: string;
+        optionIcon?: string;
+        optionText?: string;
+    };
+    /** Size of the combobox */
+    size?: "small" | "middle" | "large";
+    /** Loading state */
+    loading?: boolean;
+    /** Custom render for options */
+    optionRender?: (option: ComboboxOption, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
+    /** Filter function for search */
+    filterOption?: boolean | ((input: string, option: ComboboxOption) => boolean);
+    /** Callback when search input changes */
+    onSearch?: (value: string) => void;
+    /** Custom dropdown render */
+    dropdownRender?: (menu: default_2.ReactElement) => default_2.ReactElement;
+    /** Custom clear icon */
+    clearIcon?: default_2.ReactNode;
+    /** Custom suffix icon */
+    suffixIcon?: default_2.ReactNode;
+    /**
+     * Props to pass to the dropdown menu
+     */
+    dropdownMenuProps?: DropdownMenuProps;
+    /**
+     * Props to pass to the combobox trigger
+     */
+    triggerProps?: ComboboxTriggerProps;
+    searchProps?: {
+        placeholder?: string;
+        onValueChange?: (value: string) => void;
+        value?: string;
+    };
+    /**
+     * Show selection summary instead of individual tags when multiple
+     * @default false
+     */
+    showSelectionSummary?: boolean;
+    /**
+     * Render function for the selection summary in multiple case
+     * @default (selectedValues) => `${selectedValues.length} items selected`
+     */
+    selectionSummaryRender?: (selectedValues: Array<string | number>) => default_2.ReactNode;
+    /**
+     * Show select all option when in multiple mode
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * Render function for the select all option
+     */
+    selectAllRender?: (props: {
+        onSelectAll: () => void;
+        onDeselectAll: () => void;
+        checked: boolean;
+        indeterminate: boolean;
+    }) => default_2.ReactNode;
+}
+
+export declare const ComboboxTrigger: default_2.ForwardRefExoticComponent<ComboboxTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface ComboboxTriggerProps extends default_2.ComponentPropsWithoutRef<"button"> {
+    /** Selected options */
+    selectedOptions: ComboboxOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether multiple selection is enabled */
+    multiple?: boolean;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown is open */
+    open?: boolean;
+    /** Size variant */
+    size?: "small" | "middle" | "large";
+    /** Whether to show clear button */
+    allowClear?: boolean;
+    /** Custom suffix icon */
+    suffixIcon?: default_2.ReactNode;
+    /** Custom clear icon */
+    clearIcon?: default_2.ReactNode;
+    /** Custom class names */
+    classNames?: {
+        trigger?: string;
+    };
+    /** Clear handler */
+    onClear?: () => void;
+    /** Show selection summary instead of individual tags when multiple */
+    showSelectionSummary?: boolean;
+    /** Render function for the selection summary in multiple case */
+    selectionSummaryRender?: (selectedValues: Array<string | number>) => default_2.ReactNode;
+}
+
 declare type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
 
+declare type CommandProps = Children & DivProps & {
+    /**
+     * Accessible label for this command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering and sorting.
+     * If `false`, you must conditionally render valid items based on the search query yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * Custom filter function for whether each command menu item should matches the given search query.
+     * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+     * By default, uses the `command-score` library.
+     */
+    filter?: CommandFilter;
+    /**
+     * Optional default item value when it is initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Optional controlled state of the selected command menu item.
+     */
+    value?: string;
+    /**
+     * Event handler called when the selected item of the menu changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean;
+};
+
 export declare type ComponentCategory = "Actions" | "General" | "Layout" | "Navigation" | "Data Entry" | "Data Display" | "Feedback" | "Overlay" | "Utility";
 
 /**
@@ -1128,6 +1323,15 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    Resizable: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Utility";
+        packages: string[];
+        description: string;
+    };
     Radio: {
         name: string;
         link: string;
@@ -1227,6 +1431,15 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    Combobox: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Entry";
+        packages: string[];
+        description: string;
+    };
     ColorSelect: {
         name: string;
         link: string;
@@ -1597,26 +1810,121 @@ export declare const DROPDOWN_COLLISION_AVOIDANCE: {
     readonly fallbackAxisSide: "none";
 };
 
-export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, size, showSearch, searchProps, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, size, showSearch, searchProps, popupMatchTriggerWidth, beforeList, afterList, keepOpenOnSelect, highlightedItemKey, selectedItemKeys, showCheckbox, }: DropdownMenuProps) => JSX.Element;
+
+export declare const DropdownMenuItem: default_2.FC<DropdownMenuItemProps>;
+
+export declare interface DropdownMenuItemProps {
+    /** The menu item data */
+    item: DropdownMenuItemType & {
+        type: "item";
+    };
+    /** Custom render function for the item */
+    itemRender?: (item: DropdownMenuItemType, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
+    /** Additional props to pass to the item */
+    itemProps?: default_2.HTMLAttributes<HTMLElement>;
+    /** Class names from parent DropdownMenu */
+    classNames?: {
+        item?: string;
+        itemIcon?: string;
+        itemText?: string;
+    };
+    onSelect?: () => void;
+    /**
+     * Whether the menu item is in a combobox
+     */
+    inCombobox?: boolean;
+    /**
+     * Whether the menu item is in a menu
+     */
+    renderAsNativeElement?: boolean;
+    /**
+     * Whether the menu item is selected (for combobox)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether to show checkbox (only for decoration purpose)
+     */
+    showCheckbox?: boolean;
+    /**
+     * Whether the menu item checkbox is indeterminate (for combobox)
+     * @default false
+     */
+    indeterminate?: boolean;
+}
 
 export declare type DropdownMenuItemType = {
+    /**
+     * The type of the menu item
+     */
     type: "item";
+    /**
+     * The label of the menu item
+     */
     label?: React.ReactNode;
+    /**
+     * Whether the menu item is disabled
+     */
     disabled?: boolean;
+    /**
+     * The icon of the menu item
+     */
     icon?: React.ReactNode;
+    /**
+     * The key of the menu item
+     */
     key: React.Key;
+    /**
+     * The onClick event handler of the menu item
+     */
     onClick?: React.HTMLAttributes<HTMLElement>["onClick"];
+    /**
+     * The onMouseEnter event handler of the menu item
+     */
     onMouseEnter?: React.HTMLAttributes<HTMLElement>["onMouseEnter"];
+    /**
+     * The onMouseLeave event handler of the menu item
+     */
     onMouseLeave?: React.HTMLAttributes<HTMLElement>["onMouseLeave"];
+    /**
+     * The onMouseOver event handler of the menu item
+     */
     onMouseOver?: React.HTMLAttributes<HTMLElement>["onMouseOver"];
+    /**
+     * The onMouseOut event handler of the menu item
+     */
     onMouseOut?: React.HTMLAttributes<HTMLElement>["onMouseOut"];
+    /**
+     * The className of the menu item
+     */
+    className?: string;
+    /**
+     * Whether the menu item is a danger item
+     */
     danger?: boolean;
+    /**
+     * The ref of the menu item
+     */
     ref?: React.Ref<HTMLElement>;
 } | {
+    /**
+     * The type of the menu item
+     */
     type: "divider";
 } | {
+    /**
+     * The type of the menu item
+     */
     type: "header";
+    /**
+     * The title of the menu item
+     */
     title?: React.ReactNode;
+    /**
+     * The className of the menu item
+     */
+    className?: string;
 };
 
 export declare interface DropdownMenuProps {
@@ -1680,6 +1988,37 @@ export declare interface DropdownMenuProps {
      * Search placeholder
      */
     searchProps?: Omit<React.ComponentProps<typeof pkg.Input>, "size" | "ref">;
+    /**
+     * Whether to match the width of the popup with the trigger
+     * @default false
+     */
+    popupMatchTriggerWidth?: boolean;
+    /**
+     * Content to display before the list
+     */
+    beforeList?: React.ReactNode;
+    /**
+     * Content to display after the list
+     */
+    afterList?: React.ReactNode;
+    /**
+     * Whether to keep the dropdown open when an item is selected
+     * @default false
+     */
+    keepOpenOnSelect?: boolean;
+    /**
+     * Control the highlighted state of the menu item
+     */
+    highlightedItemKey?: React.Key;
+    /**
+     * Control the selected state of the menu item
+     */
+    selectedItemKeys?: React.Key[];
+    /**
+     * Whether to show checkbox
+     * @default false
+     */
+    showCheckbox?: boolean;
 }
 
 export { DropDownProps }
@@ -1818,6 +2157,8 @@ export declare const getColorsByTheme: <T extends ColorTokens>(colorsOrTokens: T
  */
 export declare const getComponentsByCategory: () => Record<ComponentCategory, ComponentMetadata[]>;
 
+export declare const getReactElementProp: <T>(el: React.ReactElement, propKey: string, defaultValue?: T) => T;
+
 /**
  * Get sequential chart colors for a specific palette and theme
  */
@@ -1935,9 +2276,9 @@ declare const MainCheckboxInner: ({ variant, className, ...props }: CheckboxProp
 
 declare const MainInputInner: (props: InputProps, ref: React.Ref<InputRef>) => JSX.Element;
 
-declare const MainSegmentedInner: <T>({ className, ...rest }: SegmentedProps<T>, ref: React.Ref<React.ComponentRef<typeof default_5>>) => JSX.Element;
+declare const MainSegmentedInner: <T>(props: SegmentedProps<T>, ref: React.Ref<React.ComponentRef<typeof default_5>>) => JSX.Element;
 
-declare const MainSelectInner: <ValueType = unknown, OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType>({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, dropdownRender, classNames, styles, ...rest }: SelectProps<ValueType, OptionType>, ref: default_2.Ref<default_2.ComponentRef<typeof default_3>>) => JSX.Element;
+declare const MainSelectInner: <ValueType = unknown, OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType>({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, dropdownRender, classNames, styles, showSelectionSummary, selectionSummaryRender, value: valueProp, onChange: onChangeProp, defaultValue, showSelectAll, selectAllRender, options, ...rest }: SelectProps<ValueType, OptionType>, ref: default_2.Ref<default_2.ComponentRef<typeof default_3>>) => JSX.Element;
 
 declare const MainSwitchInner: ({ ...rest }: SwitchProps, ref: React.Ref<React.ComponentRef<typeof default_4>>) => JSX.Element;
 
@@ -2137,10 +2478,12 @@ export { Pagination }
 
 export { PaginationProps }
 
-export declare const parseAntdPlacement: (placement?: PopoverProps_2["placement"]) => {
-    placement: "top" | "bottom" | "left" | "right";
-    align: "start" | "end" | "center";
-};
+/**
+ * Parse Antd placement string into BaseUI side and align values
+ * @param placement - Antd placement string (e.g., "bottomLeft", "top", "rightTop")
+ * @returns Object with side and align properties for BaseUI components
+ */
+export declare function parseAntdPlacement(placement?: AntdPlacement): BaseUIPlacement;
 
 declare const PasswordInner: (props: PasswordProps, ref: React.Ref<InputRef>) => JSX.Element;
 
@@ -2336,9 +2679,9 @@ export declare const POPUP_COLLISION_AVOIDANCE: {
     readonly fallbackAxisSide: "end";
 };
 
-export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, classNames, modal, closeOnClickOutside, }: PopupPanelProps) => JSX.Element;
+export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, draggable, maintainAspectRatio, classNames, modal, closeOnClickOutside, onPlacementChange, ...rest }: PopupPanelProps) => JSX.Element;
 
-export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children"> {
+export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children">, Omit<Popover_2.Root.Props, "children"> {
     /** The trigger element that opens the popup panel */
     children?: React.ComponentProps<typeof Popover_2.Trigger>["render"];
     /** Placement of the popup panel relative to its trigger */
@@ -2393,6 +2736,17 @@ export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRe
      * @default false
      */
     resizable?: boolean;
+    /**
+     * Whether the panel should be draggable
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * Whether to maintain aspect ratio when resizing
+     * Only applies when resizable is true
+     * @default false
+     */
+    maintainAspectRatio?: boolean;
     /**
      * Custom class names for different parts of the popup panel
      * @default {}
@@ -2417,6 +2771,10 @@ export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRe
      * @default false
      */
     modal?: Popover_2.Root.Props["modal"];
+    /**
+     * Callback function when the placement changes
+     */
+    onPlacementChange?: (placement: PopoverProps_2["placement"]) => void;
 }
 
 declare enum PopupPanelSize {
@@ -2927,6 +3285,74 @@ export { RefSelectProps }
 
 declare type RefType<T extends FieldType> = T extends "input" ? InputRef : T extends "select" ? RefSelectProps_2 : never;
 
+export declare const Resizable: ({ children, resizable, handles, absolutePositioning, classNames, className: containerClassName, style: containerStyle, resetKey, maxWidth, maxHeight, minWidth, minHeight, onResize, maintainAspectRatio, ...rest }: ResizableProps) => JSX.Element;
+
+export declare interface ResizableProps extends WithRenderPropProps {
+    /**
+     * Single React element child that will be enhanced with resize handles
+     */
+    children: default_2.ReactNode;
+    /**
+     * Whether the component should be resizable
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Configure which resize handles to show
+     * @default { bottom: true, right: true, left: true, top: true }
+     */
+    handles?: {
+        bottom?: boolean;
+        right?: boolean;
+        left?: boolean;
+        top?: boolean;
+    };
+    /**
+     * Whether to use absolute positioning for left handle resizing
+     * Set to true when used in absolutely positioned containers like PopupPanel
+     * @default false
+     */
+    absolutePositioning?: boolean;
+    /**
+     * Custom class names for different parts of the resizable component
+     */
+    classNames?: {
+        root?: string;
+        resizeHandle?: string;
+    };
+    /**
+     * Key to reset dimensions to current element size
+     * When this value changes, the component will recalculate its dimensions
+     * Similar to React's key prop pattern for forcing component resets
+     */
+    resetKey?: default_2.Key;
+    /**
+     * Maximum width the component can be resized to
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height the component can be resized to
+     */
+    maxHeight?: number;
+    /**
+     * Minimum width the component can be resized to
+     */
+    minWidth?: number;
+    /**
+     * Minimum height the component can be resized to
+     */
+    minHeight?: number;
+    /**
+     * Callback fired during resize operations
+     */
+    onResize?: (values: MoveValues) => void;
+    /**
+     * Whether to maintain aspect ratio during resize
+     * @default false
+     */
+    maintainAspectRatio?: boolean;
+}
+
 /**
  * Resolves chart color tokens by replacing reference strings with actual values.
  * @returns Record of token names to resolved light/dark color objects
@@ -3012,6 +3438,29 @@ export declare interface SelectProps<ValueType = unknown, OptionType extends Sel
      * Will be ignored if enhancePositioner is false
      */
     popupSize?: string | number | PopupPanelSize;
+    /**
+     * Show selection summary instead of tags in multiple case
+     * @default false
+     */
+    showSelectionSummary?: boolean;
+    /**
+     * Render function for the selection summary in multiple case
+     * @default (value) => `${value.length} items selected`
+     */
+    selectionSummaryRender?: (value: ValueType) => default_2.ReactNode;
+    /**
+     * Show select all option when in multiple mode
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * Render function for the select all option
+     */
+    selectAllRender?: (props: {
+        onClick: () => void;
+        checked: CheckboxProps["checked"];
+        indeterminate: CheckboxProps["indeterminate"];
+    }) => default_2.ReactNode;
 }
 
 export declare const SEQUENTIAL_PALETTE_NAMES: readonly ["YlOrBr", "YlOrRd", "OrRd", "PuRd", "RdPu", "BuPu", "GnBu", "PuBu", "YlGnBu", "PuBuGn", "BuGn", "YlGn"];
@@ -3038,23 +3487,23 @@ export { Space }
 
 export { SpaceProps }
 
-export declare const Spin: ({ indicator, size, ...rest }: SpinProps) => JSX.Element;
+export declare const Spin: ({ indicator, size, className, ...rest }: SpinProps) => JSX.Element;
 
 export declare type SpinProps = Omit<SpinProps_2, "size"> & {
     size?: "small" | "default" | "large" | number;
 };
 
 export declare const Split: FC<PropsWithChildren<SplitterProps>> & {
-    Panel: FC<SplitterPanelProps>;
+    Panel: ForwardRefExoticComponent<Omit<SplitterPanelProps, "ref"> & RefAttributes<HTMLElement>>;
 };
 
 export declare const Splitter: FC<PropsWithChildren<SplitterProps>> & {
-    Panel: FC<SplitterPanelProps>;
+    Panel: ForwardRefExoticComponent<Omit<SplitterPanelProps, "ref"> & RefAttributes<HTMLElement>>;
 };
 
 export declare type SplitterPanelProps = InternalPanelProps & {
-    children?: default_2.ReactNode | undefined;
-} & default_2.RefAttributes<HTMLDivElement> & {
+    children?: default_2.ReactNode;
+} & default_2.RefAttributes<HTMLElement> & {
     /**
      * Default size of the panel. Can be a percentage string, number, or CSS intrinsic sizing values
      */
@@ -3429,8 +3878,8 @@ declare type UniqueIdentifier = string | number;
 export { unstableSetRender }
 
 export declare const Upload: (({ showRemoveButton, className, fileList, children, ...restProps }: UploadProps) => JSX.Element) & {
-    Dragger: ({ children, uploadTitle, uploadDescription, itemRender, ...rest }: DraggerProps) => JSX.Element;
-    Item: ({ fileName, fileType, status, percent, removable, onRemove, extraActions, }: UploadItemProps_2) => JSX.Element;
+    Dragger: ({ children, uploadTitle, uploadDescription, itemRender, className, ...rest }: DraggerProps) => JSX.Element;
+    Item: ({ fileName, fileType, status, percent, removable, onRemove, extraActions, className, ...rest }: UploadItemProps_2) => JSX.Element;
 };
 
 export { UploadChangeParam }
@@ -3439,7 +3888,7 @@ export { UploadFile }
 
 export declare type UploadFileStatus = "error" | "done" | "uploading" | "removed" | "pending";
 
-export declare interface UploadItemProps {
+export declare interface UploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
     fileName: string;
     fileType?: string;
     status?: UploadFileStatus;
@@ -3535,6 +3984,10 @@ T | undefined,
  */
 export declare const useCSSVariables: (variables: string | string[]) => Record<string, string>;
 
+export declare function useDraggable(enabled?: boolean): {
+    ref: (element: HTMLElement | null) => () => void;
+};
+
 export declare const useDS: () => {
     theme: "light" | "dark";
 };
@@ -3549,6 +4002,11 @@ export declare const useGetPrefixCls: () => {
     getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
 };
 
+export declare function useHover<T extends HTMLElement>(): [
+(node: T) => void,
+boolean
+];
+
 export declare function useLatestRef<T>(value: T): RefObject<T>;
 
 export declare const useMessage: () => MessageInstance;