@choice-ui/react 1.6.0 → 1.6.2

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

@@ -3,11 +3,12 @@ import { MenuValue } from '../../menus/src';
 import { KbdKey } from '../../kbd/src';
 import * as react from 'react';
 
-interface ListContentProps extends React.HTMLProps<HTMLDivElement> {
+interface ListContentProps extends Omit<React.HTMLAttributes<HTMLElement>, "as"> {
+    as?: React.ElementType;
     children: React.ReactNode;
     parentId?: string;
 }
-declare const ListContent: react.ForwardRefExoticComponent<Omit<ListContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ListContent: react.ForwardRefExoticComponent<ListContentProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const ListDivider: react.ForwardRefExoticComponent<Omit<react.HTMLProps<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
@@ -21,6 +22,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
         shortcut?: string;
     };
     disabled?: boolean;
+    href?: string;
     id?: string;
     parentId?: string;
     prefixElement?: ReactNode;
@@ -30,6 +32,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
         modifier?: KbdKey | KbdKey[] | undefined;
     };
     suffixElement?: ReactNode;
+    target?: string;
+    rel?: string;
 }
 declare const ListItem: react.MemoExoticComponent<react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLElement>>>;
 
@@ -56,7 +60,8 @@ interface ListSubTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 declare const ListSubTrigger: react.MemoExoticComponent<react.ForwardRefExoticComponent<ListSubTriggerProps & react.RefAttributes<HTMLButtonElement>>>;
 
-interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size"> {
+interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"> {
+    as?: React.ElementType;
     children: React.ReactNode;
     interactive?: boolean;
     selection?: boolean;

package/dist/components/list/src/components/list-content.d.ts

@@ -1,5 +1,6 @@
-export interface ListContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface ListContentProps extends Omit<React.HTMLAttributes<HTMLElement>, "as"> {
+    as?: React.ElementType;
     children: React.ReactNode;
     parentId?: string;
 }
-export declare const ListContent: import('react').ForwardRefExoticComponent<Omit<ListContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ListContent: import('react').ForwardRefExoticComponent<ListContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/list/src/components/list-content.js

@@ -4,7 +4,7 @@ import { ListContentTv } from "../tv.js";
 import { useExpandContext, useStructureContext, LevelContext } from "../context/list-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListContent = forwardRef((props, ref) => {
-  const { children, className, parentId, ...rest } = props;
+  const { as: As = "div", children, className, parentId, ...rest } = props;
   const { isSubListExpanded } = useExpandContext();
   const { itemsMap, shouldShowReferenceLine, size } = useStructureContext();
   const level = useMemo(() => {
@@ -35,7 +35,7 @@ const ListContent = forwardRef((props, ref) => {
     size
   });
   return /* @__PURE__ */ jsx(LevelContext.Provider, { value: { level: safeLevel }, children: /* @__PURE__ */ jsx(
-    "div",
+    As,
     {
       ref,
       role: "group",

package/dist/components/list/src/components/list-item.d.ts

@@ -10,6 +10,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
         shortcut?: string;
     };
     disabled?: boolean;
+    href?: string;
     id?: string;
     parentId?: string;
     prefixElement?: ReactNode;
@@ -19,5 +20,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
         modifier?: KbdKey | KbdKey[] | undefined;
     };
     suffixElement?: ReactNode;
+    target?: string;
+    rel?: string;
 }
 export declare const ListItem: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLElement>>>;

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

@@ -5,7 +5,8 @@ import { ListDivider } from './components/list-divider';
 import { ListItem } from './components/list-item';
 import { ListLabel } from './components/list-label';
 import { ListSubTrigger } from './components/list-sub-trigger';
-export interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size"> {
+export interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"> {
+    as?: React.ElementType;
     children: React.ReactNode;
     interactive?: boolean;
     selection?: boolean;

package/dist/components/list/src/list.js

@@ -13,6 +13,7 @@ import { useActiveItemContext } from "./context/list-context.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const ListBase = forwardRef((props, ref) => {
   const {
+    as,
     children,
     className,
     interactive = true,
@@ -34,6 +35,7 @@ const ListBase = forwardRef((props, ref) => {
         ListRoot,
         {
           ref,
+          as,
           className,
           ...rest,
           children
@@ -43,12 +45,12 @@ const ListBase = forwardRef((props, ref) => {
   );
 });
 const ListRoot = forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
+  const { as: As = "div", children, className, ...rest } = props;
   const handleKeyDown = useListKeyboard();
   const { setActiveItem } = useActiveItemContext();
   const tv = ListTv();
   return /* @__PURE__ */ jsx(
-    "div",
+    As,
     {
       ref,
       role: "list",

package/dist/components/md-render/src/tv.js

@@ -44,7 +44,7 @@ const mdRenderTv = tcv({
     },
     variant: {
       github: {
-        root: "markdown-body",
+        root: "github-md",
         tableWrapper: "table-wrapper"
       },
       default: {

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

@@ -1,13 +1,13 @@
 import { Button } from "../../button/dist/index.js";
-import React__default, { memo, forwardRef, useMemo, useContext, createContext, startTransition, useCallback, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1 } from "react";
+import React__default, { memo, forwardRef, useContext, createContext, useMemo, startTransition, useCallback, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1 } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ChevronDownSmall, Check, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
 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 { useEventCallback } from "usehooks-ts";
 import { Input } from "../../input/dist/index.js";
+import { useEventCallback } from "usehooks-ts";
 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,29 +638,24 @@ var MenuTrigger = memo(
       isEmpty: empty,
       size: size2
     });
-    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
-        };
+    const slotProps = enterForwardedProps ? {
+      ...rest,
+      active,
+      selected,
+      disabled,
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (rest.onClick) {
+          rest.onClick(e);
+        }
       }
-      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]);
+    } : {
+      ...rest,
+      ...active !== void 0 ? { "data-active": active } : {},
+      ...selected !== void 0 ? { "data-selected": selected } : {},
+      ...disabled !== void 0 ? { "data-disabled": disabled } : {}
+    };
     return asChild ? /* @__PURE__ */ jsx(
       Slot,
       {
@@ -722,7 +717,7 @@ var MenuValue = memo(({ children, ...rest }) => {
 });
 MenuValue.displayName = "MenuValue";
 var MenusBase = forwardRef((props, ref) => {
-  const { children, className, matchTriggerWidth, variant = "default", ...rest } = props;
+  const { children, className, matchTriggerWidth, variant, ...rest } = props;
   const tv = MenusTv({ matchTriggerWidth, variant });
   const processChildren = (children2) => {
     return Children.map(children2, (child) => {

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

@@ -45,7 +45,8 @@ interface ModalTextareaProps extends Omit<TextareaProps, "children" | "label"> {
 }
 declare const ModalTextarea: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ModalTextareaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>>;
 
-interface ModalProps extends Omit<HTMLProps<HTMLDivElement>, "title"> {
+interface ModalProps extends Omit<HTMLProps<HTMLDivElement>, "title" | "as"> {
+    as?: React.ElementType;
     className?: string;
     onClose?: () => void;
     title?: ReactNode;

package/dist/components/modal/dist/index.js

@@ -186,10 +186,10 @@ var ModalTextarea = memo(
 );
 ModalTextarea.displayName = "ModalTextarea";
 var ModalBase = forwardRef((props, ref) => {
-  const { className, title, onClose, ...rest } = props;
+  const { as: As = "div", className, title, onClose, ...rest } = props;
   const tv = ModalTv();
   return /* @__PURE__ */ jsx(
-    "div",
+    As,
     {
       ref,
       className: tcx(tv.root(), className),

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

@@ -1,6 +1,7 @@
 import { HTMLProps, ReactNode } from 'react';
 import { ModalBackdrop, ModalContent, ModalFooter, ModalHeader, ModalInput, ModalSelect, ModalTextarea } from './components';
-interface ModalProps extends Omit<HTMLProps<HTMLDivElement>, "title"> {
+interface ModalProps extends Omit<HTMLProps<HTMLDivElement>, "title" | "as"> {
+    as?: React.ElementType;
     className?: string;
     onClose?: () => void;
     title?: ReactNode;

package/dist/components/modal/src/modal.js

@@ -10,10 +10,10 @@ import { ModalTextarea } from "./components/modal-textarea.js";
 import { ModalBackdrop } from "./components/modal-backdrop.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const ModalBase = forwardRef((props, ref) => {
-  const { className, title, onClose, ...rest } = props;
+  const { as: As = "div", className, title, onClose, ...rest } = props;
   const tv = ModalTv();
   return /* @__PURE__ */ jsx(
-    "div",
+    As,
     {
       ref,
       className: tcx(tv.root(), className),

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

@@ -740,21 +740,6 @@ 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"
@@ -766,7 +751,17 @@ var MultiSelectComponent = memo(
         Slot,
         {
           ref: refs.setReference,
-          ...slotProps,
+          ...getReferenceProps({
+            disabled,
+            onTouchStart() {
+              setTouch(true);
+            },
+            onPointerMove({ pointerType }) {
+              if (pointerType !== "touch") {
+                setTouch(false);
+              }
+            }
+          }),
           children: enhancedTriggerElement
         }
       ),

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

@@ -1,21 +1,22 @@
 import { ModalHeaderProps, ModalContent, ModalFooter } from '../../modal/src';
 import { FloatingFocusManagerProps, OffsetOptions, Placement } from '@floating-ui/react';
-import { default as react__default } from 'react';
-import * as react from 'react';
+import { default as React__default } from 'react';
+import * as React$1 from 'react';
 
-declare const PopoverHeader: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ModalHeaderProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+declare const PopoverHeader: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ModalHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>>;
 
-declare const PopoverTrigger: react.MemoExoticComponent<react.ForwardRefExoticComponent<{
+declare const PopoverTrigger: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<{
     children: React.ReactNode;
-} & react.RefAttributes<HTMLElement>>>;
+} & React$1.RefAttributes<HTMLElement>>>;
 
-interface PopoverProps {
+interface PopoverProps extends Omit<React__default.HTMLAttributes<HTMLElement>, "title"> {
+    as?: React__default.ElementType;
     autoSize?: boolean;
     autoUpdate?: boolean;
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     className?: string;
     closeOnEscape?: boolean;
-    contentRef?: react__default.RefObject<HTMLDivElement>;
+    contentRef?: React__default.RefObject<HTMLDivElement>;
     defaultOpen?: boolean;
     delay?: {
         close?: number;
@@ -39,9 +40,9 @@ interface PopoverProps {
      * If not specified, will auto-detect from triggerRef's ownerDocument.
      */
     root?: HTMLElement | null;
-    triggerRef?: react__default.RefObject<HTMLElement>;
+    triggerRef?: React__default.RefObject<HTMLElement>;
 }
-interface PopoverComponent extends react__default.FC<PopoverProps> {
+interface PopoverComponent extends React__default.FC<PopoverProps> {
     Content: typeof ModalContent;
     Footer: typeof ModalFooter;
     Header: typeof PopoverHeader;

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

@@ -405,6 +405,7 @@ function useFloatingPopover({
 var PORTAL_ROOT_ID = "floating-popover-root";
 var DEFAULT_OFFSET = { mainAxis: 8, crossAxis: 0 };
 var DragPopover = memo(function DragPopover2({
+  as,
   className,
   children,
   triggerRef: externalTriggerRef,
@@ -430,7 +431,8 @@ var DragPopover = memo(function DragPopover2({
   autoSize = true,
   rememberPosition = false,
   maxWidth,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  ...restProps
 }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -564,6 +566,7 @@ var DragPopover = memo(function DragPopover2({
               Modal,
               {
                 ref: handleFloatingRef,
+                as,
                 style: combinedStyles,
                 className: tcx(matchTriggerWidth && "max-w-none", className),
                 "data-state": floating.positionReady ? "open" : "opening",
@@ -571,6 +574,7 @@ var DragPopover = memo(function DragPopover2({
                 "data-draggable": draggable ? "true" : void 0,
                 "data-closing": floating.isClosing ? "true" : void 0,
                 ...floating.getFloatingProps(),
+                ...restProps,
                 role: "dialog",
                 "aria-modal": "true",
                 "aria-labelledby": titleId,

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

@@ -2,7 +2,8 @@ import { ModalContent, ModalFooter } from '../../modal/src';
 import { FloatingFocusManagerProps, Placement, OffsetOptions } from '@floating-ui/react';
 import { default as React } from 'react';
 import { PopoverHeader, PopoverTrigger } from './components';
-export interface PopoverProps {
+export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    as?: React.ElementType;
     autoSize?: boolean;
     autoUpdate?: boolean;
     children?: React.ReactNode;

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

@@ -14,6 +14,7 @@ import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const PORTAL_ROOT_ID = "floating-popover-root";
 const DEFAULT_OFFSET = { mainAxis: 8, crossAxis: 0 };
 const DragPopover = memo(function DragPopover2({
+  as,
   className,
   children,
   triggerRef: externalTriggerRef,
@@ -39,7 +40,8 @@ const DragPopover = memo(function DragPopover2({
   autoSize = true,
   rememberPosition = false,
   maxWidth,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  ...restProps
 }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -173,6 +175,7 @@ const DragPopover = memo(function DragPopover2({
               Modal,
               {
                 ref: handleFloatingRef,
+                as,
                 style: combinedStyles,
                 className: tcx(matchTriggerWidth && "max-w-none", className),
                 "data-state": floating.positionReady ? "open" : "opening",
@@ -180,6 +183,7 @@ const DragPopover = memo(function DragPopover2({
                 "data-draggable": draggable ? "true" : void 0,
                 "data-closing": floating.isClosing ? "true" : void 0,
                 ...floating.getFloatingProps(),
+                ...restProps,
                 role: "dialog",
                 "aria-modal": "true",
                 "aria-labelledby": titleId,

package/dist/components/scroll-area/dist/index.d.ts

@@ -1,5 +1,10 @@
+import { default as react__default } from 'react';
 import * as react from 'react';
 
+interface ScrollAreaContentProps extends Omit<react__default.HTMLAttributes<HTMLElement>, "as"> {
+    as?: react__default.ElementType;
+}
+
 type ScrollbarVisibilityType = "auto" | "always" | "scroll" | "hover";
 type ScrollbarMode = "default" | "padding-y" | "padding-x" | "padding-b" | "padding-t" | "padding-l" | "padding-r";
 type ScrollAreaVariant = "default" | "light" | "dark";
@@ -49,7 +54,7 @@ interface ThumbProps extends React.ComponentPropsWithoutRef<"div"> {
 declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>> & {
     Root: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
     Viewport: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    Content: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Content: react.ForwardRefExoticComponent<ScrollAreaContentProps & react.RefAttributes<HTMLDivElement>>;
     Scrollbar: react.ForwardRefExoticComponent<ScrollbarProps & react.RefAttributes<HTMLDivElement>>;
     Thumb: react.ForwardRefExoticComponent<ThumbProps & react.RefAttributes<HTMLDivElement>>;
     Corner: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area/dist/index.js

@@ -917,7 +917,7 @@ var ScrollAreaViewport = forwardRef(
 );
 ScrollAreaViewport.displayName = "ScrollArea.Viewport";
 var ScrollAreaContent = forwardRef(
-  ({ className, children, ...props }, ref) => {
+  ({ as: As = "div", className, children, ...props }, ref) => {
     const { setContent, orientation } = useScrollAreaContext();
     const setRef = useCallback(
       (node) => {
@@ -943,7 +943,7 @@ var ScrollAreaContent = forwardRef(
       }
     }, [orientation]);
     return /* @__PURE__ */ jsx(
-      "div",
+      As,
       {
         ref: setRef,
         className: tcx(sizeClasses, className),

package/dist/components/scroll-area/src/components/scroll-area-content.d.ts

@@ -1,2 +1,5 @@
 import { default as React } from 'react';
-export declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollAreaContentProps extends Omit<React.HTMLAttributes<HTMLElement>, "as"> {
+    as?: React.ElementType;
+}
+export declare const ScrollAreaContent: React.ForwardRefExoticComponent<ScrollAreaContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area/src/components/scroll-area-content.js

@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useMemo } from "react";
 import { useScrollAreaContext } from "../context/scroll-area-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ScrollAreaContent = forwardRef(
-  ({ className, children, ...props }, ref) => {
+  ({ as: As = "div", className, children, ...props }, ref) => {
     const { setContent, orientation } = useScrollAreaContext();
     const setRef = useCallback(
       (node) => {
@@ -29,7 +29,7 @@ const ScrollAreaContent = forwardRef(
       }
     }, [orientation]);
     return /* @__PURE__ */ jsx(
-      "div",
+      As,
       {
         ref: setRef,
         className: tcx(sizeClasses, className),

package/dist/components/scroll-area/src/scroll-area.d.ts

@@ -2,7 +2,7 @@ import { ScrollAreaProps, ScrollbarProps, ThumbProps } from './types';
 export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>> & {
     Root: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;
     Viewport: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<import('./components/scroll-area-content').ScrollAreaContentProps & import('react').RefAttributes<HTMLDivElement>>;
     Scrollbar: import('react').ForwardRefExoticComponent<ScrollbarProps & import('react').RefAttributes<HTMLDivElement>>;
     Thumb: import('react').ForwardRefExoticComponent<ThumbProps & import('react').RefAttributes<HTMLDivElement>>;
     Corner: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -94,7 +94,6 @@ 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,
@@ -103,8 +102,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
       allowSelect: allowSelectRef,
       allowMouseUp: allowMouseUpRef,
       selectTimeout: selectTimeoutRef,
-      scroll: scrollRef,
-      isMouseDownFromTrigger: isMouseDownFromTriggerRef
+      scroll: scrollRef
     }),
     []
     // refs are stable references, no dependencies needed
@@ -234,7 +232,6 @@ 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({
@@ -322,13 +319,6 @@ 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);
           }
@@ -373,38 +363,6 @@ 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;
@@ -414,7 +372,20 @@ var SelectComponent = memo(function SelectComponent2(props) {
       Slot,
       {
         ref: floating.refs.setReference,
-        ...slotProps,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isControlledOpen,
+        "aria-controls": menuId,
+        ...getReferenceProps({
+          disabled,
+          onTouchStart() {
+            setTouch(true);
+          },
+          onPointerMove({ pointerType }) {
+            if (pointerType !== "touch") {
+              setTouch(false);
+            }
+          }
+        }),
         children: enhancedTriggerElement
       }
     ),
@@ -428,9 +399,6 @@ 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/slot/dist/index.d.ts

@@ -1,21 +1,25 @@
-import * as React from 'react';
-
+import { default as React } from 'react';
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
 /**
- * Slot component - Lightweight implementation
+ * Optimized Slot component implementation
  *
- * 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)
+ * Compared to performance optimization of @radix-ui/react-slot:
+ * 1. Use useMemo to cache children processing results
+ * 2. Simplify props merging logic
+ * 3. Avoid unnecessary deep traversal
+ * 4. Better type safety
  */
 declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
  * Hook version of Slot logic
+ * Used for scenarios that require more granular control
  */
 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
+ * Performance optimized asChild mode Hook
+ * Used to replace `const Component = asChild ? Slot : "button"` mode
  */
 declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;