@bioturing/components 0.25.0 → 0.27.0

package/dist/index.d.ts

@@ -111,6 +111,7 @@ import { InputNumber } from 'antd';
 import { InputNumberProps } from 'antd';
 import { InputProps as InputProps_2 } from 'antd';
 import { InputRef } from 'antd';
+import { InternalPanelProps } from 'antd/es/splitter/interface';
 import { JSX } from 'react/jsx-runtime';
 import { JSX as JSX_2 } from 'react';
 import { JSXElementConstructor } from 'react';
@@ -136,13 +137,13 @@ 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';
 import { OptionGroupFC } from 'rc-select/lib/OptGroup';
 import { Pagination } from 'antd';
 import { PaginationProps } from 'antd';
-import { PanelProps } from 'antd/es/splitter/interface';
 import { PasswordProps as PasswordProps_2 } from 'antd/es/input';
 import { Popconfirm } from 'antd';
 import { PopconfirmProps } from 'antd';
@@ -150,6 +151,7 @@ import { Popover as Popover_2 } from '@base-ui-components/react/popover';
 import { PopoverProps as PopoverProps_2 } from 'antd/es/popover';
 import { Progress } from 'antd';
 import { ProgressProps } from 'antd';
+import { PropsWithChildren } from 'react';
 import { QRCode } from 'antd';
 import { QRCodeProps } from 'antd';
 import { QRPropsCanvas } from 'antd';
@@ -268,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>;
@@ -317,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;
@@ -336,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>;
@@ -409,6 +429,11 @@ export { CheckboxChangeEvent }
 export { CheckboxOptionType }
 
 export declare interface CheckboxProps extends CheckboxProps_2 {
+    /**
+     * Checkbox appearance variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'outlined';
 }
 
 export { CheckboxRef }
@@ -430,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;
@@ -930,6 +955,48 @@ export { ColProps }
 
 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";
 
 /**
@@ -1122,6 +1189,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;
@@ -1748,7 +1824,7 @@ export declare const Form: (<Values = unknown>({ ...rest }: InternalFormProps<Va
     useForm: typeof useForm;
     useFormInstance: typeof default_9;
     useWatch: typeof useWatch;
-    Item: <Values = unknown>({ tooltip, label, optionalMark, requiredMark, required, rules, ...rest }: FormItemProps<Values>) => JSX.Element;
+    Item: <Values = unknown>({ tooltip, label, optionalMark, requiredMark, labelRender, required, rules, children, ...rest }: FormItemProps<Values>) => JSX.Element;
     List: React_2.FC<FormListProps>;
     ErrorList: React_2.FC<ErrorListProps>;
     Provider: React_2.FC<FormProviderProps>;
@@ -1759,17 +1835,25 @@ export declare const Form: (<Values = unknown>({ ...rest }: InternalFormProps<Va
 
 export { FormInstance }
 
-export declare interface FormItemProps<Values = unknown> extends FormItemProps_2<Values> {
+export declare interface FormItemProps<Values = unknown> extends Omit<FormItemProps_2<Values>, "children"> {
     /**
      * Whether show the optional mark. By default, optional item will not show the optional mark.
      * @default false
      */
-    optionalMark?: boolean | React.ReactNode;
+    optionalMark?: boolean | default_2.ReactNode;
     /**
      * Whether show the asterisk when the field is required
      * @default true
      */
-    requiredMark?: boolean | React.ReactNode;
+    requiredMark?: boolean | default_2.ReactNode;
+    /**
+     * Custom render function for the label
+     */
+    labelRender?: (label: default_2.ReactElement) => default_2.ReactElement;
+    /**
+     * Form item children - can be React nodes or render functions
+     */
+    children?: FormItemProps_2<Values>["children"];
 }
 
 export { FormListFieldData }
@@ -1804,6 +1888,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
  */
@@ -1917,11 +2003,11 @@ export { List }
 
 export { ListProps }
 
-declare const MainCheckboxInner: (props: CheckboxProps, ref: React.Ref<React.ComponentRef<typeof Checkbox_2>>) => JSX.Element;
+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;
 
-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;
 
@@ -2123,10 +2209,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;
 
@@ -2322,7 +2410,7 @@ 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, classNames, modal, closeOnClickOutside, onPlacementChange, }: PopupPanelProps) => JSX.Element;
 
 export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children"> {
     /** The trigger element that opens the popup panel */
@@ -2403,6 +2491,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 {
@@ -2913,6 +3005,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
@@ -3024,25 +3184,36 @@ 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: default_2.FC<SplitterProps> & {
-    Panel: default_2.FC<SplitterPanelProps>;
+export declare const Split: FC<PropsWithChildren<SplitterProps>> & {
+    Panel: ForwardRefExoticComponent<Omit<SplitterPanelProps, "ref"> & RefAttributes<HTMLElement>>;
 };
 
-export declare const Splitter: default_2.FC<SplitterProps> & {
-    Panel: default_2.FC<SplitterPanelProps>;
+export declare const Splitter: FC<PropsWithChildren<SplitterProps>> & {
+    Panel: ForwardRefExoticComponent<Omit<SplitterPanelProps, "ref"> & RefAttributes<HTMLElement>>;
 };
 
-export declare type SplitterPanelProps = default_2.PropsWithChildren<PanelProps>;
+export declare type SplitterPanelProps = InternalPanelProps & {
+    children?: default_2.ReactNode;
+} & default_2.RefAttributes<HTMLElement> & {
+    /**
+     * Default size of the panel. Can be a percentage string, number, or CSS intrinsic sizing values
+     */
+    defaultSize?: string | number | "max-content" | "min-content" | "fit-content";
+};
 
-export declare type SplitterProps = default_2.PropsWithChildren<SplitterProps_2> & {
+export declare interface SplitterProps extends SplitterProps_2 {
+    /**
+     * Whether to show the split bars between panels
+     * @default true
+     */
     showSplitBar?: boolean;
-};
+}
 
 export declare const Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>> & {
     Child: ForwardRefExoticComponent<StackChildProps & RefAttributes<HTMLDivElement>>;
@@ -3404,8 +3575,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 }
@@ -3414,7 +3585,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;