@choice-ui/react 1.5.5 → 1.5.7

package/dist/components/dropdown/dist/index.js

@@ -279,27 +279,52 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     }),
     [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
   );
+  const parentActiveIndex = parent == null ? void 0 : parent.activeIndex;
+  const parentGetItemProps = parent == null ? void 0 : parent.getItemProps;
+  const slotProps = useMemo(() => {
+    const referenceProps = getReferenceProps(
+      parentGetItemProps ? parentGetItemProps({
+        onFocus: handleFocus
+      }) : {}
+    );
+    return {
+      tabIndex: !isNested ? void 0 : parentActiveIndex === item.index ? 0 : -1,
+      role: isNested ? "menuitem" : void 0,
+      "data-open": isControlledOpen ? "" : void 0,
+      "data-nested": isNested ? "" : void 0,
+      "data-focus-inside": hasFocusInside ? "" : void 0,
+      onTouchStart: handleTouchStart,
+      onPointerMove: handlePointerMove,
+      "aria-haspopup": "menu",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...referenceProps
+    };
+  }, [
+    isNested,
+    parentActiveIndex,
+    parentGetItemProps,
+    item.index,
+    isControlledOpen,
+    hasFocusInside,
+    handleTouchStart,
+    handlePointerMove,
+    menuId,
+    getReferenceProps,
+    handleFocus
+  ]);
+  const slotChildren = useMemo(() => {
+    const element = isNested ? subTriggerElement : triggerElement;
+    if (!element) return null;
+    return cloneElement(element, { active: isControlledOpen });
+  }, [isNested, subTriggerElement, triggerElement, isControlledOpen]);
   return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
     !isCoordinateMode && !hasExternalTrigger && /* @__PURE__ */ jsx(
       Slot,
       {
         ref: refs.setReference,
-        tabIndex: !isNested ? void 0 : (parent == null ? void 0 : parent.activeIndex) === item.index ? 0 : -1,
-        role: isNested ? "menuitem" : void 0,
-        "data-open": isControlledOpen ? "" : void 0,
-        "data-nested": isNested ? "" : void 0,
-        "data-focus-inside": hasFocusInside ? "" : void 0,
-        onTouchStart: handleTouchStart,
-        onPointerMove: handlePointerMove,
-        "aria-haspopup": "menu",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps(
-          parent ? parent.getItemProps({
-            onFocus: handleFocus
-          }) : {}
-        ),
-        children: isNested ? subTriggerElement && cloneElement(subTriggerElement, { active: isControlledOpen }) : triggerElement && cloneElement(triggerElement, { active: isControlledOpen })
+        ...slotProps,
+        children: slotChildren
       }
     ),
     /* @__PURE__ */ jsx(

package/dist/components/dropdown/src/dropdown.js

@@ -279,27 +279,52 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     }),
     [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
   );
+  const parentActiveIndex = parent == null ? void 0 : parent.activeIndex;
+  const parentGetItemProps = parent == null ? void 0 : parent.getItemProps;
+  const slotProps = useMemo(() => {
+    const referenceProps = getReferenceProps(
+      parentGetItemProps ? parentGetItemProps({
+        onFocus: handleFocus
+      }) : {}
+    );
+    return {
+      tabIndex: !isNested ? void 0 : parentActiveIndex === item.index ? 0 : -1,
+      role: isNested ? "menuitem" : void 0,
+      "data-open": isControlledOpen ? "" : void 0,
+      "data-nested": isNested ? "" : void 0,
+      "data-focus-inside": hasFocusInside ? "" : void 0,
+      onTouchStart: handleTouchStart,
+      onPointerMove: handlePointerMove,
+      "aria-haspopup": "menu",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...referenceProps
+    };
+  }, [
+    isNested,
+    parentActiveIndex,
+    parentGetItemProps,
+    item.index,
+    isControlledOpen,
+    hasFocusInside,
+    handleTouchStart,
+    handlePointerMove,
+    menuId,
+    getReferenceProps,
+    handleFocus
+  ]);
+  const slotChildren = useMemo(() => {
+    const element = isNested ? subTriggerElement : triggerElement;
+    if (!element) return null;
+    return cloneElement(element, { active: isControlledOpen });
+  }, [isNested, subTriggerElement, triggerElement, isControlledOpen]);
   return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
     !isCoordinateMode && !hasExternalTrigger && /* @__PURE__ */ jsx(
       Slot,
       {
         ref: refs.setReference,
-        tabIndex: !isNested ? void 0 : (parent == null ? void 0 : parent.activeIndex) === item.index ? 0 : -1,
-        role: isNested ? "menuitem" : void 0,
-        "data-open": isControlledOpen ? "" : void 0,
-        "data-nested": isNested ? "" : void 0,
-        "data-focus-inside": hasFocusInside ? "" : void 0,
-        onTouchStart: handleTouchStart,
-        onPointerMove: handlePointerMove,
-        "aria-haspopup": "menu",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps(
-          parent ? parent.getItemProps({
-            onFocus: handleFocus
-          }) : {}
-        ),
-        children: isNested ? subTriggerElement && cloneElement(subTriggerElement, { active: isControlledOpen }) : triggerElement && cloneElement(triggerElement, { active: isControlledOpen })
+        ...slotProps,
+        children: slotChildren
       }
     ),
     /* @__PURE__ */ jsx(

package/dist/components/menus/dist/index.js

@@ -6,8 +6,8 @@ import { Kbd } from "../../kbd/dist/index.js";
 import { flushSync } from "react-dom";
 import { SearchInput } from "../../search-input/dist/index.js";
 import { Slot } from "../../slot/dist/index.js";
-import { Input } from "../../input/dist/index.js";
 import { useEventCallback } from "usehooks-ts";
+import { Input } from "../../input/dist/index.js";
 import { useListItem, useFloatingTree, useFloatingNodeId, useFloatingParentNodeId } from "@floating-ui/react";
 import { useIsomorphicLayoutEffect } from "../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -638,24 +638,29 @@ var MenuTrigger = memo(
       isEmpty: empty,
       size: size2
     });
-    const slotProps = enterForwardedProps ? {
-      ...rest,
-      active,
-      selected,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (rest.onClick) {
-          rest.onClick(e);
-        }
+    const handleClick = useEventCallback((e) => {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
+    });
+    const slotProps = useMemo(() => {
+      if (enterForwardedProps) {
+        return {
+          ...rest,
+          active,
+          selected,
+          disabled,
+          onClick: handleClick
+        };
       }
-    } : {
-      ...rest,
-      ...active !== void 0 ? { "data-active": active } : {},
-      ...selected !== void 0 ? { "data-selected": selected } : {},
-      ...disabled !== void 0 ? { "data-disabled": disabled } : {}
-    };
+      return {
+        ...rest,
+        ...active !== void 0 ? { "data-active": active } : {},
+        ...selected !== void 0 ? { "data-selected": selected } : {},
+        ...disabled !== void 0 ? { "data-disabled": disabled } : {}
+      };
+    }, [enterForwardedProps, rest, active, selected, disabled, handleClick]);
     return asChild ? /* @__PURE__ */ jsx(
       Slot,
       {

package/dist/components/menus/src/components/menu-trigger.js

@@ -2,7 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../../../button/dist/index.js";
 import { Slot } from "../../../slot/dist/index.js";
 import { ChevronDownSmall } from "@choiceform/icons-react";
-import { memo, forwardRef } from "react";
+import { memo, forwardRef, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
 import { MenuTriggerTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const MenuTrigger = memo(
@@ -28,24 +29,29 @@ const MenuTrigger = memo(
       isEmpty: empty,
       size
     });
-    const slotProps = enterForwardedProps ? {
-      ...rest,
-      active,
-      selected,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (rest.onClick) {
-          rest.onClick(e);
-        }
+    const handleClick = useEventCallback((e) => {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
+    });
+    const slotProps = useMemo(() => {
+      if (enterForwardedProps) {
+        return {
+          ...rest,
+          active,
+          selected,
+          disabled,
+          onClick: handleClick
+        };
       }
-    } : {
-      ...rest,
-      ...active !== void 0 ? { "data-active": active } : {},
-      ...selected !== void 0 ? { "data-selected": selected } : {},
-      ...disabled !== void 0 ? { "data-disabled": disabled } : {}
-    };
+      return {
+        ...rest,
+        ...active !== void 0 ? { "data-active": active } : {},
+        ...selected !== void 0 ? { "data-selected": selected } : {},
+        ...disabled !== void 0 ? { "data-disabled": disabled } : {}
+      };
+    }, [enterForwardedProps, rest, active, selected, disabled, handleClick]);
     return asChild ? /* @__PURE__ */ jsx(
       Slot,
       {

package/dist/components/multi-select/dist/index.js

@@ -740,6 +740,21 @@ var MultiSelectComponent = memo(
       chipVariant,
       valueDisabledMap
     ]);
+    const handleTouchStart = useEventCallback(() => {
+      setTouch(true);
+    });
+    const handlePointerMove = useEventCallback(({ pointerType }) => {
+      if (pointerType !== "touch") {
+        setTouch(false);
+      }
+    });
+    const slotProps = useMemo(() => {
+      return getReferenceProps({
+        disabled,
+        onTouchStart: handleTouchStart,
+        onPointerMove: handlePointerMove
+      });
+    }, [getReferenceProps, disabled, handleTouchStart, handlePointerMove]);
     if (!triggerElement || !contentElement) {
       console.error(
         "MultiSelect requires both MultiSelect.Trigger and MultiSelect.Content components as children"
@@ -751,17 +766,7 @@ var MultiSelectComponent = memo(
         Slot,
         {
           ref: refs.setReference,
-          ...getReferenceProps({
-            disabled,
-            onTouchStart() {
-              setTouch(true);
-            },
-            onPointerMove({ pointerType }) {
-              if (pointerType !== "touch") {
-                setTouch(false);
-              }
-            }
-          }),
+          ...slotProps,
           children: enhancedTriggerElement
         }
       ),

package/dist/components/multi-select/src/multi-select.js

@@ -355,6 +355,21 @@ const MultiSelectComponent = memo(
       chipVariant,
       valueDisabledMap
     ]);
+    const handleTouchStart = useEventCallback(() => {
+      setTouch(true);
+    });
+    const handlePointerMove = useEventCallback(({ pointerType }) => {
+      if (pointerType !== "touch") {
+        setTouch(false);
+      }
+    });
+    const slotProps = useMemo(() => {
+      return getReferenceProps({
+        disabled,
+        onTouchStart: handleTouchStart,
+        onPointerMove: handlePointerMove
+      });
+    }, [getReferenceProps, disabled, handleTouchStart, handlePointerMove]);
     if (!triggerElement || !contentElement) {
       console.error(
         "MultiSelect requires both MultiSelect.Trigger and MultiSelect.Content components as children"
@@ -366,17 +381,7 @@ const MultiSelectComponent = memo(
         Slot,
         {
           ref: refs.setReference,
-          ...getReferenceProps({
-            disabled,
-            onTouchStart() {
-              setTouch(true);
-            },
-            onPointerMove({ pointerType }) {
-              if (pointerType !== "touch") {
-                setTouch(false);
-              }
-            }
-          }),
+          ...slotProps,
           children: enhancedTriggerElement
         }
       ),

package/dist/components/popover/dist/index.js

@@ -1,7 +1,7 @@
 import { Slot } from "../../slot/dist/index.js";
 import { ModalFooter, ModalContent, ModalHeader, Modal } from "../../modal/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, offset, flip, shift, size, useFloating, autoUpdate, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
-import { memo, forwardRef, useId, useRef, useEffect, useMemo, useCallback, createContext, useContext, useState } from "react";
+import { memo, forwardRef, useMemo, useId, useRef, useEffect, useCallback, createContext, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEventCallback } from "usehooks-ts";
 import { findChildByType } from "../../../shared/utils/assertion.js";
@@ -37,11 +37,14 @@ var PopoverTrigger = memo(
   forwardRef((props, forwardedRef) => {
     const { children } = props;
     const { getReferenceProps, refs } = usePopoverContext();
+    const slotProps = useMemo(() => {
+      return getReferenceProps();
+    }, [getReferenceProps]);
     return /* @__PURE__ */ jsx(
       Slot,
       {
         ref: mergeRefs(refs.setReference, forwardedRef),
-        ...getReferenceProps(),
+        ...slotProps,
         children
       }
     );

package/dist/components/popover/src/components/popover-trigger.js

@@ -1,17 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "../../../slot/dist/index.js";
-import { memo, forwardRef } from "react";
+import { memo, forwardRef, useMemo } from "react";
 import { usePopoverContext } from "../popover-context.js";
 import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
 const PopoverTrigger = memo(
   forwardRef((props, forwardedRef) => {
     const { children } = props;
     const { getReferenceProps, refs } = usePopoverContext();
+    const slotProps = useMemo(() => {
+      return getReferenceProps();
+    }, [getReferenceProps]);
     return /* @__PURE__ */ jsx(
       Slot,
       {
         ref: mergeRefs(refs.setReference, forwardedRef),
-        ...getReferenceProps(),
+        ...slotProps,
         children
       }
     );

package/dist/components/select/dist/index.js

@@ -94,6 +94,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
   const allowMouseUpRef = useRef(true);
   const selectTimeoutRef = useRef();
   const scrollRef = useRef(null);
+  const isMouseDownFromTriggerRef = useRef(false);
   const refs = useMemo(
     () => ({
       list: listRef,
@@ -102,7 +103,8 @@ var SelectComponent = memo(function SelectComponent2(props) {
       allowSelect: allowSelectRef,
       allowMouseUp: allowMouseUpRef,
       selectTimeout: selectTimeoutRef,
-      scroll: scrollRef
+      scroll: scrollRef,
+      isMouseDownFromTrigger: isMouseDownFromTriggerRef
     }),
     []
     // refs are stable references, no dependencies needed
@@ -232,6 +234,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
     } else {
       refs.allowSelect.current = false;
       refs.allowMouseUp.current = true;
+      refs.isMouseDownFromTrigger.current = false;
     }
   }, [isControlledOpen]);
   const { handleArrowScroll, handleArrowHide, scrollProps } = useMenuScroll({
@@ -319,6 +322,13 @@ var SelectComponent = memo(function SelectComponent2(props) {
         },
         onMouseUp: () => {
           if (!refs.allowMouseUp.current || customActive) return;
+          if (refs.isMouseDownFromTrigger.current) {
+            refs.isMouseDownFromTrigger.current = false;
+            if (!isDisabled) {
+              handleSelect(currentSelectableIndex);
+            }
+            return;
+          }
           if (refs.allowSelect.current) {
             handleSelect(currentSelectableIndex);
           }
@@ -363,6 +373,38 @@ var SelectComponent = memo(function SelectComponent2(props) {
       size: sizeProp
     });
   }, [triggerElement, isControlledOpen, sizeProp]);
+  const handleTouchStart = useEventCallback(() => {
+    setTouch(true);
+  });
+  const handleMouseDown = useEventCallback(() => {
+    refs.isMouseDownFromTrigger.current = true;
+  });
+  const handlePointerMove = useEventCallback(({ pointerType }) => {
+    if (pointerType !== "touch") {
+      setTouch(false);
+    }
+  });
+  const slotProps = useMemo(() => {
+    return {
+      "aria-haspopup": "listbox",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...getReferenceProps({
+        disabled,
+        onTouchStart: handleTouchStart,
+        onMouseDown: handleMouseDown,
+        onPointerMove: handlePointerMove
+      })
+    };
+  }, [
+    isControlledOpen,
+    menuId,
+    getReferenceProps,
+    disabled,
+    handleTouchStart,
+    handleMouseDown,
+    handlePointerMove
+  ]);
   if (!triggerElement || !contentElement) {
     console.error("Select requires both Select.Trigger and Select.Content components as children");
     return null;
@@ -372,20 +414,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
       Slot,
       {
         ref: floating.refs.setReference,
-        "aria-haspopup": "listbox",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps({
-          disabled,
-          onTouchStart() {
-            setTouch(true);
-          },
-          onPointerMove({ pointerType }) {
-            if (pointerType !== "touch") {
-              setTouch(false);
-            }
-          }
-        }),
+        ...slotProps,
         children: enhancedTriggerElement
       }
     ),
@@ -399,6 +428,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
           {
             lockScroll: !touch,
             className: tcx("z-menu", focusManagerProps.modal ? "" : "pointer-events-none"),
+            onMouseUp: () => {
+              refs.isMouseDownFromTrigger.current = false;
+            },
             children: /* @__PURE__ */ jsx(
               FloatingFocusManager,
               {

package/dist/components/select/src/select.js

@@ -94,6 +94,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
   const allowMouseUpRef = useRef(true);
   const selectTimeoutRef = useRef();
   const scrollRef = useRef(null);
+  const isMouseDownFromTriggerRef = useRef(false);
   const refs = useMemo(
     () => ({
       list: listRef,
@@ -102,7 +103,8 @@ const SelectComponent = memo(function SelectComponent2(props) {
       allowSelect: allowSelectRef,
       allowMouseUp: allowMouseUpRef,
       selectTimeout: selectTimeoutRef,
-      scroll: scrollRef
+      scroll: scrollRef,
+      isMouseDownFromTrigger: isMouseDownFromTriggerRef
     }),
     []
     // refs are stable references, no dependencies needed
@@ -232,6 +234,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
     } else {
       refs.allowSelect.current = false;
       refs.allowMouseUp.current = true;
+      refs.isMouseDownFromTrigger.current = false;
     }
   }, [isControlledOpen]);
   const { handleArrowScroll, handleArrowHide, scrollProps } = useMenuScroll({
@@ -319,6 +322,13 @@ const SelectComponent = memo(function SelectComponent2(props) {
         },
         onMouseUp: () => {
           if (!refs.allowMouseUp.current || customActive) return;
+          if (refs.isMouseDownFromTrigger.current) {
+            refs.isMouseDownFromTrigger.current = false;
+            if (!isDisabled) {
+              handleSelect(currentSelectableIndex);
+            }
+            return;
+          }
           if (refs.allowSelect.current) {
             handleSelect(currentSelectableIndex);
           }
@@ -363,6 +373,38 @@ const SelectComponent = memo(function SelectComponent2(props) {
       size: sizeProp
     });
   }, [triggerElement, isControlledOpen, sizeProp]);
+  const handleTouchStart = useEventCallback(() => {
+    setTouch(true);
+  });
+  const handleMouseDown = useEventCallback(() => {
+    refs.isMouseDownFromTrigger.current = true;
+  });
+  const handlePointerMove = useEventCallback(({ pointerType }) => {
+    if (pointerType !== "touch") {
+      setTouch(false);
+    }
+  });
+  const slotProps = useMemo(() => {
+    return {
+      "aria-haspopup": "listbox",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...getReferenceProps({
+        disabled,
+        onTouchStart: handleTouchStart,
+        onMouseDown: handleMouseDown,
+        onPointerMove: handlePointerMove
+      })
+    };
+  }, [
+    isControlledOpen,
+    menuId,
+    getReferenceProps,
+    disabled,
+    handleTouchStart,
+    handleMouseDown,
+    handlePointerMove
+  ]);
   if (!triggerElement || !contentElement) {
     console.error("Select requires both Select.Trigger and Select.Content components as children");
     return null;
@@ -372,20 +414,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
       Slot,
       {
         ref: floating.refs.setReference,
-        "aria-haspopup": "listbox",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps({
-          disabled,
-          onTouchStart() {
-            setTouch(true);
-          },
-          onPointerMove({ pointerType }) {
-            if (pointerType !== "touch") {
-              setTouch(false);
-            }
-          }
-        }),
+        ...slotProps,
         children: enhancedTriggerElement
       }
     ),
@@ -399,6 +428,9 @@ const SelectComponent = memo(function SelectComponent2(props) {
           {
             lockScroll: !touch,
             className: tcx("z-menu", focusManagerProps.modal ? "" : "pointer-events-none"),
+            onMouseUp: () => {
+              refs.isMouseDownFromTrigger.current = false;
+            },
             children: /* @__PURE__ */ jsx(
               FloatingFocusManager,
               {

package/dist/components/slot/dist/index.d.ts

@@ -1,25 +1,21 @@
-import { default as React } from 'react';
+import * as React from 'react';
+
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
 /**
- * 优化的 Slot 组件实现
+ * Slot component - Lightweight implementation
  *
- * 相比 @radix-ui/react-slot 的性能优化：
- * 1. 使用 useMemo 缓存 children 处理结果
- * 2. 简化 props 合并逻辑
- * 3. 避免不必要的深度遍历
- * 4. 更好的类型安全
+ * Based on @radix-ui/react-slot design, used for asChild pattern prop forwarding
+ * Performance optimization should be done at the consumer level (e.g., useMemo to cache props)
  */
 declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
- * Hook 版本的 Slot 逻辑
- * 用于需要更细粒度控制的场景
+ * Hook version of Slot logic
  */
 declare function useSlot(children: React.ReactNode, slotProps: Record<string, unknown>, forwardedRef?: React.Ref<unknown>): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
 /**
- * 性能优化的 asChild 模式 Hook
- * 用于替代 `const Component = asChild ? Slot : "button"` 模式
+ * asChild 模式 Hook
  */
 declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;
 

package/dist/components/slot/dist/index.js

@@ -1,68 +1,57 @@
-import React__default, { forwardRef, useMemo } from "react";
+import * as React from "react";
+import { forwardRef } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
 var Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    const slottedChild = useMemo(() => {
-      if (!React__default.isValidElement(children)) {
-        return children;
-      }
-      const childRef = children.ref;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React__default.cloneElement(children, {
+      return React.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
       });
-    }, [children, slotProps, forwardedRef]);
-    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
 );
 Slot.displayName = "Slot";
 var SlotClone = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    const slottedChild = useMemo(() => {
-      if (!React__default.isValidElement(children)) {
-        return children;
-      }
-      const childRef = children.ref;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React__default.cloneElement(children, {
+      return React.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
       });
-    }, [children, slotProps, forwardedRef]);
-    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
 );
 SlotClone.displayName = "SlotClone";
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
-  if (slotProps.className && childProps.className) {
-    overrideProps.className = `${slotProps.className} ${childProps.className}`;
-  } else if (slotProps.className) {
-    overrideProps.className = slotProps.className;
-  }
-  if (slotProps.style && childProps.style) {
-    overrideProps.style = { ...slotProps.style, ...childProps.style };
-  } else if (slotProps.style) {
-    overrideProps.style = slotProps.style;
-  }
-  for (const propName in slotProps) {
-    if (propName.startsWith("on") && typeof slotProps[propName] === "function") {
-      const slotHandler = slotProps[propName];
-      const childHandler = childProps[propName];
-      if (childHandler && typeof childHandler === "function") {
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
         overrideProps[propName] = (...args) => {
-          childHandler(...args);
-          slotHandler(...args);
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
         };
-      } else {
-        overrideProps[propName] = slotHandler;
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
       }
-    } else if (propName !== "className" && propName !== "style") {
-      overrideProps[propName] = slotProps[propName];
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
     }
   }
-  return overrideProps;
+  return { ...slotProps, ...overrideProps };
 }
 function composeRefs(...refs) {
   return (node) => {
@@ -70,12 +59,25 @@ function composeRefs(...refs) {
       if (typeof ref === "function") {
         ref(node);
       } else if (ref != null) {
-        const mutableRef = ref;
-        mutableRef.current = node;
+        ref.current = node;
       }
     });
   };
 }
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 export {
   Slot
 };

package/dist/components/slot/src/slot.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import * as React from "react";
 export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
@@ -6,28 +6,22 @@ interface SlotCloneProps {
     children: React.ReactNode;
 }
 /**
- * 优化的 Slot 组件实现
+ * Slot component - Lightweight implementation
  *
- * 相比 @radix-ui/react-slot 的性能优化：
- * 1. 使用 useMemo 缓存 children 处理结果
- * 2. 简化 props 合并逻辑
- * 3. 避免不必要的深度遍历
- * 4. 更好的类型安全
+ * Based on @radix-ui/react-slot design, used for asChild pattern prop forwarding
+ * Performance optimization should be done at the consumer level (e.g., useMemo to cache props)
  */
 export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
- * SlotClone 组件 - 用于深度克隆
- * 当需要处理嵌套结构时使用
+ * SlotClone 组件
  */
 export declare const SlotClone: React.ForwardRefExoticComponent<SlotCloneProps & React.RefAttributes<HTMLElement>>;
 /**
- * Hook 版本的 Slot 逻辑
- * 用于需要更细粒度控制的场景
+ * Hook version of Slot logic
  */
 export declare function useSlot(children: React.ReactNode, slotProps: Record<string, unknown>, forwardedRef?: React.Ref<unknown>): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
 /**
- * 性能优化的 asChild 模式 Hook
- * 用于替代 `const Component = asChild ? Slot : "button"` 模式
+ * asChild 模式 Hook
  */
 export declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;
 export {};

package/dist/components/slot/src/slot.js

@@ -1,68 +1,57 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import React__default, { forwardRef, useMemo } from "react";
+import * as React from "react";
+import { forwardRef, useMemo } from "react";
 const Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    const slottedChild = useMemo(() => {
-      if (!React__default.isValidElement(children)) {
-        return children;
-      }
-      const childRef = children.ref;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React__default.cloneElement(children, {
+      return React.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
       });
-    }, [children, slotProps, forwardedRef]);
-    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
 );
 Slot.displayName = "Slot";
 const SlotClone = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    const slottedChild = useMemo(() => {
-      if (!React__default.isValidElement(children)) {
-        return children;
-      }
-      const childRef = children.ref;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React__default.cloneElement(children, {
+      return React.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
       });
-    }, [children, slotProps, forwardedRef]);
-    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
 );
 SlotClone.displayName = "SlotClone";
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
-  if (slotProps.className && childProps.className) {
-    overrideProps.className = `${slotProps.className} ${childProps.className}`;
-  } else if (slotProps.className) {
-    overrideProps.className = slotProps.className;
-  }
-  if (slotProps.style && childProps.style) {
-    overrideProps.style = { ...slotProps.style, ...childProps.style };
-  } else if (slotProps.style) {
-    overrideProps.style = slotProps.style;
-  }
-  for (const propName in slotProps) {
-    if (propName.startsWith("on") && typeof slotProps[propName] === "function") {
-      const slotHandler = slotProps[propName];
-      const childHandler = childProps[propName];
-      if (childHandler && typeof childHandler === "function") {
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
         overrideProps[propName] = (...args) => {
-          childHandler(...args);
-          slotHandler(...args);
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
         };
-      } else {
-        overrideProps[propName] = slotHandler;
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
       }
-    } else if (propName !== "className" && propName !== "style") {
-      overrideProps[propName] = slotProps[propName];
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
     }
   }
-  return overrideProps;
+  return { ...slotProps, ...overrideProps };
 }
 function composeRefs(...refs) {
   return (node) => {
@@ -70,22 +59,35 @@ function composeRefs(...refs) {
       if (typeof ref === "function") {
         ref(node);
       } else if (ref != null) {
-        const mutableRef = ref;
-        mutableRef.current = node;
+        ref.current = node;
       }
     });
   };
 }
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 function useSlot(children, slotProps, forwardedRef) {
   return useMemo(() => {
-    if (!React__default.isValidElement(children)) {
+    if (!React.isValidElement(children)) {
       return children;
     }
-    const childRef = children.ref;
+    const childrenRef = getElementRef(children);
     const mergedProps = mergeProps(slotProps, children.props);
-    return React__default.cloneElement(children, {
+    return React.cloneElement(children, {
       ...mergedProps,
-      ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+      ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     });
   }, [children, slotProps, forwardedRef]);
 }

package/dist/components/tooltip/dist/index.js

@@ -184,12 +184,17 @@ var TooltipTrigger = forwardRef(
   function TooltipTrigger2({ children, ...props }, propRef) {
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setReference, propRef]);
+    const slotProps = useMemo(() => {
+      return {
+        ...state.disabled && { disabled: true },
+        ...state.getReferenceProps(props)
+      };
+    }, [state.disabled, state.getReferenceProps, props]);
     return /* @__PURE__ */ jsx(
       Slot,
       {
         ref,
-        ...state.disabled && { disabled: true },
-        ...state.getReferenceProps(props),
+        ...slotProps,
         children
       }
     );

package/dist/components/tooltip/src/components/tooltip-trigger.js

@@ -1,18 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "../../../slot/dist/index.js";
 import { useMergeRefs } from "@floating-ui/react";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { useTooltipState } from "../context/tooltip-context.js";
 const TooltipTrigger = forwardRef(
   function TooltipTrigger2({ children, ...props }, propRef) {
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setReference, propRef]);
+    const slotProps = useMemo(() => {
+      return {
+        ...state.disabled && { disabled: true },
+        ...state.getReferenceProps(props)
+      };
+    }, [state.disabled, state.getReferenceProps, props]);
     return /* @__PURE__ */ jsx(
       Slot,
       {
         ref,
-        ...state.disabled && { disabled: true },
-        ...state.getReferenceProps(props),
+        ...slotProps,
         children
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",