@bioturing/components 0.29.2 → 0.31.0

package/dist/components/toast/style.css

@@ -1 +1 @@
-@layer components{.ds-toast-viewport{position:fixed;width:100%;max-width:30rem;margin:0 auto;bottom:2rem;left:50%;transform:translate(-50%);top:auto;z-index:2001;display:flex;justify-content:center}.ds-toast{--gap: .5rem;--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );font-family:var(--font-sans);position:absolute;box-sizing:border-box;background:var(--ds-color-bg-elevated);color:var(--ds-color-text);padding:.75rem 1rem;max-width:100%;display:inline-flex;gap:var(--gap);box-shadow:var(--ds-box-shadow-secondary);background-clip:padding-box;border-radius:.5rem;bottom:0;margin-right:0;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;cursor:default;z-index:calc(1000 - var(--toast-index));transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * -20%))) scale(calc(1 - (var(--toast-index) * .1)))}.ds-toast:after{top:100%}.ds-toast[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y))}.ds-toast[data-starting-style],.ds-toast[data-ending-style]:not([data-limited]){transform:translateY(150%)}.ds-toast[data-ending-style]{opacity:0}.ds-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.ds-toast[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.ds-toast:after{content:"";position:absolute;width:100%;left:0;height:calc(var(--gap) + 1px)}.ds-toast-content{display:flex;flex:1;flex-direction:column;gap:2}.ds-toast-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-toast-description{font-size:var(--ds-font-size);line-height:var(--ds-line-height)}.ds-toast-description:last-child{margin-bottom:0}.ds-toast-description-traceback p:not(:first-child){margin-top:.5rem}.ds-toast-icon-wrap{width:1.25rem;font-size:1.25rem;display:block;flex:0}.ds-toast-icon{width:1.25rem;height:1.25rem;display:block}.ds-toast-icon.ds-toast-icon-info{color:var(--ds-color-primary)}.ds-toast-icon.ds-toast-icon-success{color:var(--ds-color-success)}.ds-toast-icon.ds-toast-icon-warning{color:var(--ds-color-warning)}.ds-toast-icon.ds-toast-icon-error{color:var(--ds-color-error)}.ds-toast-icon.ds-toast-icon-progress{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}.ds-toast-close{margin-top:.125rem;display:flex}}
+@layer components{.ds-toast-viewport{position:fixed;width:100%;max-width:30rem;margin:0 auto;bottom:2rem;left:50%;transform:translate(-50%);top:auto;z-index:var(--ds-z-index-toast);display:flex;justify-content:center}.ds-toast{--gap: .5rem;--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );font-family:var(--font-sans);position:absolute;box-sizing:border-box;background:var(--ds-color-bg-elevated);color:var(--ds-color-text);padding:.75rem 1rem;max-width:100%;display:inline-flex;gap:var(--gap);box-shadow:var(--ds-box-shadow-secondary);background-clip:padding-box;border-radius:.5rem;bottom:0;margin-right:0;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;cursor:default;z-index:calc(1000 - var(--toast-index));transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * -20%))) scale(calc(1 - (var(--toast-index) * .1)))}.ds-toast:after{top:100%}.ds-toast[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y))}.ds-toast[data-starting-style],.ds-toast[data-ending-style]:not([data-limited]){transform:translateY(150%)}.ds-toast[data-ending-style]{opacity:0}.ds-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.ds-toast[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.ds-toast:after{content:"";position:absolute;width:100%;left:0;height:calc(var(--gap) + 1px)}.ds-toast-content{display:flex;flex:1;flex-direction:column;gap:2}.ds-toast-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-toast-description{font-size:var(--ds-font-size);line-height:var(--ds-line-height)}.ds-toast-description:last-child{margin-bottom:0}.ds-toast-description-traceback p:not(:first-child){margin-top:.5rem}.ds-toast-icon-wrap{width:1.25rem;font-size:1.25rem;display:block;flex:0}.ds-toast-icon{width:1.25rem;height:1.25rem;display:block}.ds-toast-icon.ds-toast-icon-info{color:var(--ds-color-primary)}.ds-toast-icon.ds-toast-icon-success{color:var(--ds-color-success)}.ds-toast-icon.ds-toast-icon-warning{color:var(--ds-color-warning)}.ds-toast-icon.ds-toast-icon-error{color:var(--ds-color-error)}.ds-toast-icon.ds-toast-icon-progress{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}.ds-toast-close{margin-top:.125rem;display:flex}}

package/dist/index.d.ts

@@ -21,7 +21,6 @@ import { BreadcrumbItemProps as BreadcrumbItemProps_2 } from 'antd/es/breadcrumb
 import { BreadcrumbItemType as BreadcrumbItemType_2 } from 'antd/es/breadcrumb/Breadcrumb';
 import { BreadcrumbProps as BreadcrumbProps_2 } from 'antd/es/breadcrumb';
 import { BreadcrumbSeparatorType } from 'antd/es/breadcrumb/Breadcrumb';
-import { Breakpoint } from 'antd';
 import { ButtonProps as ButtonProps_2 } from 'antd/es/button';
 import { Calendar } from 'antd';
 import { CalendarMode } from 'antd';
@@ -134,8 +133,7 @@ import { message } from 'antd';
 import { MessageArgsProps } from 'antd';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ModalFuncProps } from 'antd';
-import { ModalProps } from './Modal';
-import { ModalProps as ModalProps_3 } from 'antd/es/modal';
+import { ModalProps as ModalProps_2 } from 'antd/es/modal';
 import { ModalRef } from './functions';
 import { MoveValues } from 'react-use-resizable';
 import { notification } from 'antd';
@@ -173,6 +171,7 @@ import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { RefSelectProps } from 'antd';
 import { RefSelectProps as RefSelectProps_2 } from 'antd/es/select';
+import { ResizableProps as ResizableProps_2 } from 'react-use-resizable';
 import { Result } from 'antd';
 import { ResultProps } from 'antd';
 import { RibbonProps } from 'antd/es/badge/Ribbon';
@@ -350,6 +349,16 @@ export declare interface BreadcrumbProps<T extends AnyObject = AnyObject> extend
     itemRender?: (route: BreadcrumbItemType, params: T, routes: BreadcrumbItemType[], paths: string[]) => React.ReactNode;
 }
 
+declare type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+export declare const BREAKPOINTS: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    "2xl": number;
+};
+
 /**
  * Build Antd placement string from BaseUI side and align values
  * @param placement - Object with side and align properties
@@ -456,15 +465,15 @@ declare type Children = {
     children?: default_2.ReactNode;
 };
 
-export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, defaultValue, onChange, searchProps, showSelectAll, className, placeholder, disabled: disabledProp, status: statusProp, getItemKeywords, ...rest }: ChoiceListProps<M>) => JSX.Element;
+export declare const ChoiceList: <M extends boolean = false>({ options, multiple, value, defaultValue, onChange, searchProps, showSelectAll, className, placeholder, disabled: disabledProp, status: statusProp, getItemKeywords, ...rest }: ChoiceListProps<M>) => JSX.Element;
 
-export declare type ChoiceListItem = {
+export declare type ChoiceListOption = {
     label: React.ReactNode;
     value?: string;
 };
 
 export declare interface ChoiceListProps<M extends boolean = false> extends Omit<CommandProps, "value" | "onChange" | "defaultValue"> {
-    items: ChoiceListItem[];
+    options: ChoiceListOption[];
     multiple?: M;
     value?: M extends true ? string[] : string;
     defaultValue?: M extends true ? string[] : string;
@@ -489,7 +498,7 @@ export declare interface ChoiceListProps<M extends boolean = false> extends Omit
      * Function to extract keywords from the item for search filtering
      * @default (item) => [item.value, reactNodeToString(item.label)]
      */
-    getItemKeywords?: (item: ChoiceListItem) => string[];
+    getItemKeywords?: (item: ChoiceListOption) => string[];
 }
 
 export declare interface ClassArray extends Array<ClassValue> {
@@ -1076,10 +1085,58 @@ export declare interface ComboboxProps {
         checked: boolean;
         indeterminate: boolean;
     }) => default_2.ReactNode;
+    /**
+     * Function to extract keywords from the item for search filtering
+     * @default (option) => [String(option.key), reactNodeToString(option.label)]
+     */
+    getOptionKeywords?: (option: DropdownMenuItemType & {
+        type: "item";
+    }) => string[];
 }
 
 declare type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
 
+export declare const CommandPalette: default_2.FC<CommandPaletteProps>;
+
+export declare interface CommandPaletteProps {
+    /** Whether the command palette is open */
+    open?: boolean;
+    /** Callback fired when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state
+     */
+    defaultOpen?: boolean;
+    /** Items to display in the command palette */
+    items?: DropdownMenuItemType[];
+    /** Keyboard shortcuts to open the palette */
+    shortcuts?: CommandPaletteShortcut[];
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Text to show when no results are found */
+    emptyText?: string;
+    /** Accessible label for the command palette */
+    label?: string;
+    /** Additional CSS class names */
+    className?: string;
+    classNames?: {
+        root?: string;
+        mask?: string;
+        content?: string;
+        group?: string;
+        item?: string;
+        groupLabel?: string;
+    };
+}
+
+export declare type CommandPaletteShortcut = {
+    key: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+};
+
 declare type CommandProps = Children & DivProps & {
     /**
      * Accessible label for this command menu. Not shown visibly.
@@ -1370,6 +1427,14 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    Loader: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Feedback";
+        description: string;
+    };
     Spin: {
         name: string;
         link: string;
@@ -1529,6 +1594,23 @@ export declare const componentMetadata: {
         category: "Feedback";
         description: string;
     };
+    CommandPalette: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Navigation";
+        packages: string[];
+        description: string;
+    };
+    KeyboardShortcut: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Display";
+        description: string;
+    };
     VerticalCollapsiblePanel: {
         name: string;
         link: string;
@@ -1801,7 +1883,12 @@ 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, popupMatchTriggerWidth, beforeList, afterList, keepOpenOnSelect, highlightedItemKey, selectedItemKeys, showCheckbox, getItemKeywords, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, defaultOpen, className, itemRender, classNames, size, showSearch, inCombobox: inComboboxProp, searchProps, popupMatchTriggerWidth, beforeList, afterList, keepOpenOnSelect, highlightedItemKey, selectedItemKeys, getItemKeywords, showCheckbox, }: DropdownMenuProps) => JSX.Element;
+
+export declare interface DropdownMenuGroup {
+    label: default_2.ReactNode | null;
+    items: DropdownMenuItemType[];
+}
 
 export declare const DropdownMenuItem: default_2.FC<DropdownMenuItemProps>;
 
@@ -1819,8 +1906,11 @@ export declare interface DropdownMenuItemProps {
         item?: string;
         itemIcon?: string;
         itemText?: string;
+        itemSuffix?: string;
     };
-    onSelect?: () => void;
+    onSelect?: (item: DropdownMenuItemType & {
+        type: "item";
+    }) => void;
     /**
      * Whether the menu item is in a combobox
      */
@@ -1860,7 +1950,7 @@ export declare type DropdownMenuItemType = {
     /**
      * The label of the menu item
      */
-    label?: React.ReactNode;
+    label?: default_2.ReactNode;
     /**
      * Whether the menu item is disabled
      */
@@ -1868,31 +1958,41 @@ export declare type DropdownMenuItemType = {
     /**
      * The icon of the menu item
      */
-    icon?: React.ReactNode;
+    icon?: default_2.ReactNode;
+    /**
+     * The suffix of the menu item
+     */
+    suffix?: default_2.ReactNode;
     /**
      * The key of the menu item
      */
-    key: React.Key;
+    key: default_2.Key;
+    /**
+     * The onSelect event handler of the menu item
+     */
+    onSelect?: (item: DropdownMenuItemType & {
+        type: "item";
+    }) => void;
     /**
      * The onClick event handler of the menu item
      */
-    onClick?: React.HTMLAttributes<HTMLElement>["onClick"];
+    onClick?: default_2.HTMLAttributes<HTMLElement>["onClick"];
     /**
      * The onMouseEnter event handler of the menu item
      */
-    onMouseEnter?: React.HTMLAttributes<HTMLElement>["onMouseEnter"];
+    onMouseEnter?: default_2.HTMLAttributes<HTMLElement>["onMouseEnter"];
     /**
      * The onMouseLeave event handler of the menu item
      */
-    onMouseLeave?: React.HTMLAttributes<HTMLElement>["onMouseLeave"];
+    onMouseLeave?: default_2.HTMLAttributes<HTMLElement>["onMouseLeave"];
     /**
      * The onMouseOver event handler of the menu item
      */
-    onMouseOver?: React.HTMLAttributes<HTMLElement>["onMouseOver"];
+    onMouseOver?: default_2.HTMLAttributes<HTMLElement>["onMouseOver"];
     /**
      * The onMouseOut event handler of the menu item
      */
-    onMouseOut?: React.HTMLAttributes<HTMLElement>["onMouseOut"];
+    onMouseOut?: default_2.HTMLAttributes<HTMLElement>["onMouseOut"];
     /**
      * The className of the menu item
      */
@@ -1904,7 +2004,7 @@ export declare type DropdownMenuItemType = {
     /**
      * The ref of the menu item
      */
-    ref?: React.Ref<HTMLElement>;
+    ref?: default_2.Ref<HTMLElement>;
 } | {
     /**
      * The type of the menu item
@@ -1918,14 +2018,14 @@ export declare type DropdownMenuItemType = {
     /**
      * The title of the menu item
      */
-    title?: React.ReactNode;
+    title?: default_2.ReactNode;
     /**
      * The className of the menu item
      */
     className?: string;
 };
 
-export declare interface DropdownMenuProps {
+export declare interface DropdownMenuProps extends Omit<UseDropdownMenuProps, "classNames"> {
     /** Array of menu items to be displayed in the dropdown */
     items: DropdownMenuItemType[];
     /** Custom render function for the trigger element */
@@ -1948,6 +2048,10 @@ export declare interface DropdownMenuProps {
      * Callback fired when the dropdown open state changes
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state of the dropdown
+     */
+    defaultOpen?: boolean;
     /**
      * Additional CSS class for the dropdown component
      */
@@ -1960,18 +2064,10 @@ export declare interface DropdownMenuProps {
         root?: string;
         trigger?: string;
         popup?: string;
-        group?: string;
-        groupLabel?: string;
-        item?: string;
         itemIcon?: string;
         itemText?: string;
-        separator?: string;
         positioner?: string;
-    };
-    /**
-     * Custom render function for menu items
-     */
-    itemRender?: (item: DropdownMenuItemType, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
+    } & UseDropdownMenuProps["classNames"];
     /**
      * Whether to show search input
      * @default false
@@ -1999,31 +2095,6 @@ export declare interface DropdownMenuProps {
      * 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;
-    /**
-     * Function to extract keywords from the item for search filtering
-     * @default (item) => [String(item.key), reactNodeToString(item.label)]
-     */
-    getItemKeywords?: (item: DropdownMenuItemType & {
-        type: "item";
-    }) => string[];
 }
 
 export { DropDownProps }
@@ -2267,6 +2338,21 @@ export declare function isTracebackError(error: unknown): boolean;
 
 export declare const isValidHexColor: (hex: string, acceptWithoutPrefix?: boolean) => boolean;
 
+export declare const KeyboardShortcut: default_2.FC<KeyboardShortcutProps>;
+
+export declare interface KeyboardShortcutProps {
+    /** The keyboard shortcut keys to display (optional if using children) */
+    keys?: string[];
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: default_2.CSSProperties;
+    /** Size variant */
+    size?: "small" | "medium" | "large";
+    /** Children to display as keyboard shortcuts */
+    children?: default_2.ReactNode;
+}
+
 export { Layout }
 
 export { LayoutProps }
@@ -2277,6 +2363,12 @@ export { List }
 
 export { ListProps }
 
+export declare const Loader: ForwardRefExoticComponent<LoaderProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface LoaderProps extends React.ComponentPropsWithoutRef<"span"> {
+    text?: string;
+}
+
 declare const MainCheckboxInner: ({ variant, className, ...props }: CheckboxProps, ref: React.Ref<React.ComponentRef<typeof Checkbox_2>>) => JSX.Element;
 
 declare const MainInputInner: (props: InputProps, ref: React.Ref<InputRef>) => JSX.Element;
@@ -2325,7 +2417,7 @@ export declare const Modal: (({ open: externalOpen, closeIcon, children, size: s
 
 export { ModalFuncProps }
 
-declare type ModalFuncProps_2 = ModalProps_2 & {
+declare type ModalFuncProps_2 = ModalProps & {
     /**
      * Content to be displayed in the modal
      * Similar to children prop in Modal component
@@ -2334,7 +2426,7 @@ declare type ModalFuncProps_2 = ModalProps_2 & {
     content?: default_2.ReactNode;
 };
 
-declare interface ModalProps_2 extends Omit<ModalProps_3, "centered"> {
+export declare interface ModalProps extends Omit<ModalProps_2, "centered"> {
     /**
      * Predefined sizes for the modal
      * - xsmall: 400px
@@ -2479,6 +2571,8 @@ export { notification }
 
 export { NotificationArgsProps }
 
+declare type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
+
 export { Pagination }
 
 export { PaginationProps }
@@ -3291,9 +3385,9 @@ 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 const Resizable: ({ children, resizable, handles, absolutePositioning, classNames, className: containerClassName, style: containerStyle, resetKey, maxHeight, maxWidth, minHeight, minWidth, lockHorizontal, lockVertical, onResize, onDragEnd: onDragEndProp, onDragStart: onDragStartProp, disabled, maintainAspectRatio, interval, initialHeight: initialHeightProp, initialWidth: initialWidthProp, ...rest }: ResizableProps) => JSX.Element;
 
-export declare interface ResizableProps extends WithRenderPropProps {
+export declare interface ResizableProps extends Omit<WithRenderPropProps, keyof ResizableProps_2>, ResizableProps_2 {
     /**
      * Single React element child that will be enhanced with resize handles
      */
@@ -3978,7 +4072,35 @@ export declare const useAntdCssVarClassname: () => string;
 
 export { useApp }
 
-export declare const useBreakpoint: () => Partial<Record<Breakpoint, boolean>>;
+/**
+ * A responsive breakpoint hook using window.matchMedia for optimal performance.
+ *
+ * @param ssrBreakpoint - The breakpoint to use during SSR and before hydration.
+ *                       Defaults to "lg" for better SEO (search engines typically use desktop viewports).
+ *
+ * @example
+ * ```tsx
+ * // Default: uses "lg" for SSR
+ * const bp = useBreakpoint();
+ *
+ * // Custom SSR breakpoint
+ * const bp = useBreakpoint("md");
+ *
+ * // Usage
+ * bp.breakpoint     // Current breakpoint: "sm" | "md" | "lg" | "xl" | "2xl"
+ * bp.up("md")       // true if screen >= 768px
+ * bp.down("lg")     // true if screen < 1024px
+ * bp.between("md", "xl")  // true if 768px <= screen < 1280px
+ * bp.only("lg")     // true if screen is exactly in "lg" range
+ * ```
+ */
+export declare const useBreakpoint: (ssrBreakpoint?: Breakpoint) => {
+    breakpoint: Breakpoint;
+    up: (bp: Breakpoint) => boolean;
+    down: (bp: Breakpoint) => boolean;
+    between: (minBp: Breakpoint, maxBp: Breakpoint) => boolean;
+    only: (bp: Breakpoint) => boolean;
+};
 
 /**
  * Get chart colors and axis configuration based on the current theme.
@@ -4047,10 +4169,62 @@ export declare function useDraggable(enabled?: boolean): {
     ref: (element: HTMLElement | null) => () => void;
 };
 
+declare interface UseDropdownMenuProps {
+    /**
+     * Callback function to handle the open state change of the dropdown menu.
+     */
+    onOpenChange?: (open: boolean) => void;
+    items: DropdownMenuItemType[];
+    inCombobox?: boolean;
+    classNames?: {
+        item?: string;
+        itemIcon?: string;
+        itemSuffix?: string;
+        group?: string;
+        groupLabel?: string;
+        divider?: string;
+    };
+    /**
+     * Custom render function for menu items
+     */
+    itemRender?: (item: DropdownMenuItemType, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
+    /**
+     * 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;
+    /**
+     * Function to extract keywords from the item for search filtering
+     * @default (item) => [String(item.key), reactNodeToString(item.label)]
+     */
+    getItemKeywords?: (item: DropdownMenuItemType & {
+        type: "item";
+    }) => string[];
+}
+
 export declare const useDS: () => {
     theme: "light" | "dark";
 };
 
+export declare function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions): {
+    ref: RefObject<T>;
+    width: number;
+    height: number;
+};
+
 export declare const useEnhancedEffect: typeof useLayoutEffect;
 
 export declare function useEventCallback<Fn extends AnyFunction>(fn?: Fn): Fn;
@@ -4072,6 +4246,8 @@ export declare const useMessage: () => MessageInstance;
 
 export declare const useModal: () => HookAPI;
 
+export declare function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions): readonly [RefObject<T>, ObserverRect];
+
 export declare const useToken: () => {
     theme: Theme_2<SeedToken, AliasToken>;
     token: GlobalToken;
@@ -4117,6 +4293,11 @@ export declare type UseUploadItemRenderProps = {
 
 export { useWatch }
 
+export declare function useWindowSize(): {
+    width: any;
+    height: any;
+};
+
 export { version }
 
 export declare const VerticalCollapsiblePanel: default_2.FC<VerticalCollapsiblePanelProps>;