@lobehub/ui 6.0.0 → 6.0.2

package/es/Drawer/atoms.mjs

@@ -4,6 +4,7 @@ import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
 import { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from "./constants.mjs";
@@ -242,7 +243,7 @@ const DrawerTrigger = ({ children, className, nativeButton, ref: refProp, ...res
 		return cloneElement(children, {
 			...mergedProps,
 			ref: mergeRefs([
-				children.ref,
+				getElementRef(children),
 				props.ref,
 				refProp
 			])

package/es/Drawer/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Drawer/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from './constants';\nimport { DrawerLayerProvider, useDrawerLayer } from './DrawerLayerContext';\nimport { styles } from './style';\nimport type { DrawerPlacement } from './type';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst popupPlacementClass = {\n  bottom: styles.popupBottom,\n  left: styles.popupLeft,\n  right: styles.popupRight,\n  top: styles.popupTop,\n};\n\nconst panelPlacementClass = {\n  bottom: styles.panelBottom,\n  left: styles.panelLeft,\n  right: styles.panelRight,\n  top: styles.panelTop,\n};\n\nconst panelRoundedClass = {\n  bottom: styles.panelRoundedBottom,\n  left: styles.panelRoundedLeft,\n  right: styles.panelRoundedRight,\n  top: styles.panelRoundedTop,\n};\n\nconst DrawerOpenContext = createContext<boolean | null>(null);\n\ninterface DrawerAnimationActions {\n  onExitComplete: () => void;\n}\nconst DrawerActionsContext = createContext<DrawerAnimationActions | null>(null);\n\nexport const useDrawerOpen = () => use(DrawerOpenContext);\nexport const useDrawerActions = () => use(DrawerActionsContext);\n\nexport type DrawerRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedDrawerRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<DrawerRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <DrawerOpenContext value={open}>\n      <DrawerActionsContext value={actions}>\n        <DrawerLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </DrawerLayerProvider>\n      </DrawerActionsContext>\n    </DrawerOpenContext>\n  );\n};\n\nconst NonAnimatedDrawerRoot = ({ zIndex: explicitZIndex, children, ...rest }: DrawerRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  return (\n    <DrawerLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </DrawerLayerProvider>\n  );\n};\n\nexport const DrawerRoot = ({ open, onExitComplete, ...rest }: DrawerRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedDrawerRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedDrawerRoot {...rest} />;\n};\n\nexport type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const DrawerPortal = ({ container, ...rest }: DrawerPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nexport type DrawerBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const DrawerBackdrop = ({ className, style, ...rest }: DrawerBackdropProps) => {\n  const open = useDrawerOpen();\n  const layer = useDrawerLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={drawerBackdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\nexport type DrawerPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  flush?: boolean;\n  height?: number | string;\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  panelStyle?: React.CSSProperties;\n  placement?: DrawerPlacement;\n  popupStyle?: React.CSSProperties;\n  pushOffset?: number;\n  width?: number | string;\n};\n\nexport const DrawerPopupImpl = ({\n  className,\n  children,\n  placement: placementProp = 'right',\n  width: widthProp,\n  height: heightProp,\n  flush,\n  pushOffset = 0,\n  motionProps,\n  panelClassName,\n  panelStyle,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: DrawerPopupProps & { panelXstyle?: XStyle }) => {\n  const open = useDrawerOpen();\n  const actions = useDrawerActions();\n  const layer = useDrawerLayer();\n  const Motion = useMotionComponent();\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  // The exiting panel lives inside AnimatePresence and keeps the props it had while open,\n  // but this popup re-renders with whatever the consumer passes now. Freezing the geometry\n  // during exit keeps the two in sync — otherwise a placement change on close teleports the\n  // popup to the new edge while the panel animates out along the old axis.\n  const openGeometryRef = useRef({\n    height: heightProp,\n    placement: placementProp,\n    width: widthProp,\n  });\n  if (open !== false) {\n    openGeometryRef.current = { height: heightProp, placement: placementProp, width: widthProp };\n  }\n  const { height, placement, width } = openGeometryRef.current;\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const sizeStyle: React.CSSProperties = isHorizontal ? { width } : { height };\n  const resolvedPopupStyle: React.CSSProperties = {\n    ...(layer?.zIndex === undefined ? undefined : { zIndex: layer.zIndex + 1 }),\n    ...sizeStyle,\n    ...popupStyle,\n  };\n  const popupXstyle = [styles.popup, popupPlacementClass[placement]];\n  const resolvedPanelClassName = clsx(\n    stylex.props(\n      styles.panel,\n      panelPlacementClass[placement],\n      flush ? styles.panelFlush : panelRoundedClass[placement],\n      panelXstyle,\n    ).className,\n    panelClassName,\n  );\n\n  if (open !== null && actions) {\n    const motionConfig = getDrawerMotionConfig(placement, pushOffset);\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(popupXstyle).className, className as string)}\n        data-drawer-anchor={placement}\n        ref={composedRef as any}\n        style={resolvedPopupStyle}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...motionConfig}\n              {...motionProps}\n              className={resolvedPanelClassName}\n              data-drawer-placement={placement}\n              key=\"drawer-popup-panel\"\n              style={{ transition: 'none', ...panelStyle }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  const { axis, sign } = pushAxis[placement];\n  const pushVars = {\n    [axis === 'x' ? '--drawer-push-x' : '--drawer-push-y']: `${pushOffset * sign}px`,\n  } as React.CSSProperties;\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(popupXstyle, className as any) as any}\n      data-drawer-anchor={placement}\n      ref={composedRef as any}\n      style={resolvedPopupStyle}\n    >\n      <div\n        className={resolvedPanelClassName}\n        data-drawer-placement={placement}\n        style={{ ...pushVars, ...panelStyle }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const DrawerPopup: React.FC<DrawerPopupProps> = DrawerPopupImpl;\n\nexport type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerHeader = ({ className, style, ...rest }: DrawerHeaderProps) => (\n  <div {...rest} {...styleProps(styles.header, className, style)} />\n);\n\nexport type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const DrawerTitle = ({ className, ...rest }: DrawerTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\nexport type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const DrawerDescription: React.FC<DrawerDescriptionProps> = Dialog.Description;\n\nexport type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: DrawerContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const DrawerContent: React.FC<DrawerContentProps> = DrawerContentImpl;\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerFooter = ({ className, style, ...rest }: DrawerFooterProps) => (\n  <div {...rest} {...styleProps(styles.footer, className, style)} />\n);\n\nexport type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const DrawerClose = ({ className, children, ...rest }: DrawerCloseProps) => (\n  <Dialog.Close\n    {...rest}\n    className={mergeStateClassName([styles.close, focusRing.info], className as any) as any}\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\n\nexport type DrawerTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const DrawerTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DrawerTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Drawer/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from './constants';\nimport { DrawerLayerProvider, useDrawerLayer } from './DrawerLayerContext';\nimport { styles } from './style';\nimport type { DrawerPlacement } from './type';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst popupPlacementClass = {\n  bottom: styles.popupBottom,\n  left: styles.popupLeft,\n  right: styles.popupRight,\n  top: styles.popupTop,\n};\n\nconst panelPlacementClass = {\n  bottom: styles.panelBottom,\n  left: styles.panelLeft,\n  right: styles.panelRight,\n  top: styles.panelTop,\n};\n\nconst panelRoundedClass = {\n  bottom: styles.panelRoundedBottom,\n  left: styles.panelRoundedLeft,\n  right: styles.panelRoundedRight,\n  top: styles.panelRoundedTop,\n};\n\nconst DrawerOpenContext = createContext<boolean | null>(null);\n\ninterface DrawerAnimationActions {\n  onExitComplete: () => void;\n}\nconst DrawerActionsContext = createContext<DrawerAnimationActions | null>(null);\n\nexport const useDrawerOpen = () => use(DrawerOpenContext);\nexport const useDrawerActions = () => use(DrawerActionsContext);\n\nexport type DrawerRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedDrawerRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<DrawerRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <DrawerOpenContext value={open}>\n      <DrawerActionsContext value={actions}>\n        <DrawerLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </DrawerLayerProvider>\n      </DrawerActionsContext>\n    </DrawerOpenContext>\n  );\n};\n\nconst NonAnimatedDrawerRoot = ({ zIndex: explicitZIndex, children, ...rest }: DrawerRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  return (\n    <DrawerLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </DrawerLayerProvider>\n  );\n};\n\nexport const DrawerRoot = ({ open, onExitComplete, ...rest }: DrawerRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedDrawerRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedDrawerRoot {...rest} />;\n};\n\nexport type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const DrawerPortal = ({ container, ...rest }: DrawerPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nexport type DrawerBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const DrawerBackdrop = ({ className, style, ...rest }: DrawerBackdropProps) => {\n  const open = useDrawerOpen();\n  const layer = useDrawerLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={drawerBackdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\nexport type DrawerPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  flush?: boolean;\n  height?: number | string;\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  panelStyle?: React.CSSProperties;\n  placement?: DrawerPlacement;\n  popupStyle?: React.CSSProperties;\n  pushOffset?: number;\n  width?: number | string;\n};\n\nexport const DrawerPopupImpl = ({\n  className,\n  children,\n  placement: placementProp = 'right',\n  width: widthProp,\n  height: heightProp,\n  flush,\n  pushOffset = 0,\n  motionProps,\n  panelClassName,\n  panelStyle,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: DrawerPopupProps & { panelXstyle?: XStyle }) => {\n  const open = useDrawerOpen();\n  const actions = useDrawerActions();\n  const layer = useDrawerLayer();\n  const Motion = useMotionComponent();\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  // The exiting panel lives inside AnimatePresence and keeps the props it had while open,\n  // but this popup re-renders with whatever the consumer passes now. Freezing the geometry\n  // during exit keeps the two in sync — otherwise a placement change on close teleports the\n  // popup to the new edge while the panel animates out along the old axis.\n  const openGeometryRef = useRef({\n    height: heightProp,\n    placement: placementProp,\n    width: widthProp,\n  });\n  if (open !== false) {\n    openGeometryRef.current = { height: heightProp, placement: placementProp, width: widthProp };\n  }\n  const { height, placement, width } = openGeometryRef.current;\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const sizeStyle: React.CSSProperties = isHorizontal ? { width } : { height };\n  const resolvedPopupStyle: React.CSSProperties = {\n    ...(layer?.zIndex === undefined ? undefined : { zIndex: layer.zIndex + 1 }),\n    ...sizeStyle,\n    ...popupStyle,\n  };\n  const popupXstyle = [styles.popup, popupPlacementClass[placement]];\n  const resolvedPanelClassName = clsx(\n    stylex.props(\n      styles.panel,\n      panelPlacementClass[placement],\n      flush ? styles.panelFlush : panelRoundedClass[placement],\n      panelXstyle,\n    ).className,\n    panelClassName,\n  );\n\n  if (open !== null && actions) {\n    const motionConfig = getDrawerMotionConfig(placement, pushOffset);\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(popupXstyle).className, className as string)}\n        data-drawer-anchor={placement}\n        ref={composedRef as any}\n        style={resolvedPopupStyle}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...motionConfig}\n              {...motionProps}\n              className={resolvedPanelClassName}\n              data-drawer-placement={placement}\n              key=\"drawer-popup-panel\"\n              style={{ transition: 'none', ...panelStyle }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  const { axis, sign } = pushAxis[placement];\n  const pushVars = {\n    [axis === 'x' ? '--drawer-push-x' : '--drawer-push-y']: `${pushOffset * sign}px`,\n  } as React.CSSProperties;\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(popupXstyle, className as any) as any}\n      data-drawer-anchor={placement}\n      ref={composedRef as any}\n      style={resolvedPopupStyle}\n    >\n      <div\n        className={resolvedPanelClassName}\n        data-drawer-placement={placement}\n        style={{ ...pushVars, ...panelStyle }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const DrawerPopup: React.FC<DrawerPopupProps> = DrawerPopupImpl;\n\nexport type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerHeader = ({ className, style, ...rest }: DrawerHeaderProps) => (\n  <div {...rest} {...styleProps(styles.header, className, style)} />\n);\n\nexport type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const DrawerTitle = ({ className, ...rest }: DrawerTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\nexport type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const DrawerDescription: React.FC<DrawerDescriptionProps> = Dialog.Description;\n\nexport type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: DrawerContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const DrawerContent: React.FC<DrawerContentProps> = DrawerContentImpl;\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerFooter = ({ className, style, ...rest }: DrawerFooterProps) => (\n  <div {...rest} {...styleProps(styles.footer, className, style)} />\n);\n\nexport type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const DrawerClose = ({ className, children, ...rest }: DrawerCloseProps) => (\n  <Dialog.Close\n    {...rest}\n    className={mergeStateClassName([styles.close, focusRing.info], className as any) as any}\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\n\nexport type DrawerTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const DrawerTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DrawerTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([getElementRef(children), (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}

package/es/DropdownMenu/atoms.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
@@ -45,7 +46,7 @@ const DropdownMenuTrigger = ({ children, className, nativeButton, ref: refProp,
 			...mergedProps,
 			className: clsx$1(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),
 			ref: mergeRefs([
-				children.ref,
+				getElementRef(children),
 				props.ref,
 				refProp
 			])

package/es/DropdownMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { MenuVirtualList, type VirtualListProps } from '@/internal/virtual';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { type styleProps } from '@/styles/stylex/props';\nimport Switch from '@/Switch';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { menuClassNames, menuStyles } from './style';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst sx = (styles: XStyle, stableClassName?: string) =>\n  clsx(stylex.props(styles).className, stableClassName);\n\nconst itemClassName = (danger: boolean | undefined) =>\n  sx([menuStyles.item, danger && menuStyles.danger]);\n\nexport type DropdownMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Menu.Trigger>,\n  'children' | 'render'\n> & {\n  children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DropdownMenuTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    // Base UI's trigger props include `type=\"button\"` by default.\n    // If we render into a non-<button> element, that prop is invalid and can warn.\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n  }\n\n  return (\n    <Menu.Trigger\n      {...rest}\n      className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Menu.Trigger>\n  );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n  className,\n  collisionPadding,\n  placement,\n  hoverTrigger,\n  align,\n  side,\n  sideOffset,\n  children,\n  style,\n  ...rest\n}: DropdownMenuPositionerProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Menu.Positioner\n      {...rest}\n      align={align ?? placementConfig?.align}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side}\n      sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n      style={resolvedStyle}\n      className={\n        mergeStateClassName(\n          sx(menuStyles.positioner, menuClassNames.positioner),\n          className as any,\n        ) as any\n      }\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </Menu.Positioner>\n  );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopupImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuPopupProps & { xstyle?: XStyle }) => {\n  return (\n    <Menu.Popup\n      {...rest}\n      className={\n        mergeStateClassName(\n          sx([menuStyles.popup, xstyle], menuClassNames.popup),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\n\nexport const DropdownMenuPopup = (props: DropdownMenuPopupProps) => (\n  <DropdownMenuPopupImpl {...props} />\n);\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuHeader = ({ className, ...rest }: DropdownMenuHeaderProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.header), className)} data-slot=\"header\" />;\n};\n\nDropdownMenuHeader.displayName = 'DropdownMenuHeader';\n\nexport type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuFooter = ({ className, ...rest }: DropdownMenuFooterProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.footer), className)} data-slot=\"footer\" />;\n};\n\nDropdownMenuFooter.displayName = 'DropdownMenuFooter';\n\nexport type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement> &\n  VirtualListProps;\n\nexport const DropdownMenuScrollViewport = ({\n  children,\n  className,\n  getItemLabel,\n  keepMounted,\n  listItemHeight,\n  virtual,\n  ...rest\n}: DropdownMenuScrollViewportProps) => {\n  if (!virtual) {\n    return (\n      <div {...rest} className={clsx(sx(menuStyles.slotViewport), className)}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MenuVirtualList\n      {...rest}\n      className={className}\n      getItemLabel={getItemLabel}\n      itemSize={listItemHeight}\n      keepMounted={keepMounted}\n    >\n      {children}\n    </MenuVirtualList>\n  );\n};\n\nDropdownMenuScrollViewport.displayName = 'DropdownMenuScrollViewport';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n  return (\n    <Menu.Item\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n  return (\n    <Menu.Separator\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.separator),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.groupLabel),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContentImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemContentProps & { xstyle?: XStyle }) => {\n  return <div {...rest} className={clsx(sx([menuStyles.itemContent, xstyle]), className)} />;\n};\n\nexport const DropdownMenuItemContent = (props: DropdownMenuItemContentProps) => (\n  <DropdownMenuItemContentImpl {...props} />\n);\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIconImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemIconProps & { xstyle?: XStyle }) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx([menuStyles.icon, xstyle], menuClassNames.icon), className)}\n    />\n  );\n};\n\nexport const DropdownMenuItemIcon = (props: DropdownMenuItemIconProps) => (\n  <DropdownMenuItemIconImpl {...props} />\n);\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.labelGroup), className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.label, menuClassNames.label), className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.desc), className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.extra), className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx(menuStyles.submenuArrow, menuClassNames.submenuArrow), className)}\n    />\n  );\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n  React.ComponentProps<typeof Menu.Item>,\n  'onClick'\n> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n  checked: checkedProp,\n  className,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  onCheckedChange,\n  children,\n  ...rest\n}: DropdownMenuSwitchItemProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <Menu.Item\n      {...rest}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAa,oBAAqC,UAAS,oBAAC,KAAK,MAAN;CAAW,OAAO;CAAO,GAAI;AAAQ,CAAA;AAChG,MAAa,0BAA0B,KAAK;AAC5C,MAAa,oCAAoC,KAAK;AAEtD,MAAM,uBAAgC,MAAc,cAA4E;CAC9H,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkBA,OAAK,MAAM,UAAU,KAAK,CAAC;CAC1F,OAAOA,OAAK,MAAM,SAAS;AAC7B;AACA,MAAM,MAAM,QAAgB,oBAA6BA,OAAK,OAAO,MAAM,MAAM,CAAC,CAAC,WAAW,eAAe;AAC7G,MAAM,iBAAiB,WAAgC,GAAG,CAAC,WAAW,MAAM,UAAU,WAAW,MAAM,CAAC;AAIxG,MAAa,uBAAuB,EAClC,UACA,WACA,cACA,KAAK,SACL,GAAG,WAC2B;CAC9B,MAAM,EACJ,8BACA,yBACE,gBAAgB;EAClB;EACA;CACF,CAAC;CACD,MAAM,YAAY,UAAe;EAG/B,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EACJ,MACA,GAAG,cACD;GACJ,OAAO;EACT,EAAA,CAAG;EACH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;EACrE,OAAO,aAAa,UAAiB;GACnC,GAAG;GACH,WAAWA,OAAK,WAAW,qBAAqB,WAAW,YAAY,SAAS;GAChF,KAAK,UAAU;IAAE,SAAiB;IAAM,MAAc;IAAK;GAAO,CAAC;EACrE,CAAC;CACH;CACA,IAAI,eAAe,QAAQ,GACzB,OAAO,oBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,cAAc;EAAsB,QAAQ;CAAkB,CAAA;CAE/F,OAAO,oBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAWA,OAAK,WAAW,qBAAqB,SAAS;EAAG,cAAc;EAAsB,KAAK;EAC/H;CACW,CAAA;AAClB;AACA,oBAAoB,cAAc;AAOlC,MAAa,sBAAsB,EACjC,WACA,GAAG,WAC0B;CAC7B,MAAM,aAAa,cAAc;CACjC,OAAO,oBAAC,KAAK,QAAN;EAAa,WAAW,aAAa,cAAc,KAAA;EAAW,GAAI;CAAO,CAAA;AAClF;AACA,mBAAmB,cAAc;AAKjC,MAAa,0BAA0B,EACrC,WACA,kBACA,WACA,cACA,OACA,MACA,YACA,UACA,OACA,GAAG,WAC8B;CACjC,MAAM,kBAAkB,YAAY,aAAa,aAAa,KAAA;CAC9D,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC,IAAI;CAChF,MAAM,iBAAiB,OAAO,UAAU,cAAc,OAAO,UAAU,QAAQ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS,KAAA;CACjI,MAAM,EACJ,QACA,KAAK,SACH,eAA+B,YAAY,cAAc;CAC7D,MAAM,cAAc,aAAa,CAAC,mBAAmB,IAAI,CAAC;CAC1D,MAAM,gBAAgB,OAAO,UAAU,cAAc,WAAgB;EACnE;EACA,GAAG,MAAM,KAAK;CAChB,KAAK;EACH;EACA,GAAG;CACL;CACA,OAAO,oBAAC,KAAK,YAAN;EAAiB,GAAI;EAAM,OAAO,SAAS,iBAAiB;EAAO,kBAAkB,oBAAoB,4BAA4B;EAAG,sBAAoB,gBAAgB,KAAA;EAAW,kBAAgB;EAAW,KAAK;EAAoB,MAAM,QAAQ,iBAAiB;EAAM,YAAY,eAAe,kBAAkB,IAAI,KAAA;EAAY,OAAO;EAAe,WAAW,oBAAoB,GAAG,WAAW,YAAY,eAAe,UAAU,GAAG,SAAgB;EAC3c,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAiB;EAAgC,CAAA;CAChE,CAAA;AACrB;AACA,uBAAuB,cAAc;AAErC,MAAa,yBAAyB,EACpC,WACA,QACA,GAAG,WAGC;CACJ,OAAO,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW,oBAAoB,GAAG,CAAC,WAAW,OAAO,MAAM,GAAG,eAAe,KAAK,GAAG,SAAgB;CAAW,CAAA;AAC/I;AACA,MAAa,qBAAqB,UAAkC,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA;AACvG,kBAAkB,cAAc;AAEhC,MAAa,sBAAsB,EACjC,WACA,GAAG,WAC0B;CAC7B,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,MAAM,GAAG,SAAS;EAAG,aAAU;CAAU,CAAA;AAC/F;AACA,mBAAmB,cAAc;AAEjC,MAAa,sBAAsB,EACjC,WACA,GAAG,WAC0B;CAC7B,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,MAAM,GAAG,SAAS;EAAG,aAAU;CAAU,CAAA;AAC/F;AACA,mBAAmB,cAAc;AAEjC,MAAa,8BAA8B,EACzC,UACA,WACA,cACA,aACA,gBACA,SACA,GAAG,WACkC;CACrC,IAAI,CAAC,SACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,YAAY,GAAG,SAAS;EACvE;CACE,CAAA;CAET,OAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAiB;EAAyB;EAAc,UAAU;EAA6B;EACtH;CACc,CAAA;AACrB;AACA,2BAA2B,cAAc;AAIzC,MAAa,oBAAoB,EAC/B,WACA,QACA,GAAG,WACwB;CAC3B,OAAO,oBAAC,KAAK,MAAN;EAAW,GAAI;EAAM,YAAW,UAASA,OAAK,cAAc,MAAM,GAAG,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAAI,CAAA;AAChJ;AACA,iBAAiB,cAAc;AAI/B,MAAa,qCAAqC,EAChD,WACA,QACA,GAAG,WACgC;CACnC,OAAO,oBAAC,KAAK,cAAN;EAAmB,GAAI;EAAM,YAAW,UAASA,OAAK,cAAc,MAAM,GAAG,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAAI,CAAA;AACxJ;AACA,kCAAkC,cAAc;AAEhD,MAAa,yBAAyB,EACpC,WACA,GAAG,WAC6B;CAChC,OAAO,oBAAC,KAAK,WAAN;EAAgB,GAAI;EAAM,YAAW,UAASA,OAAK,GAAG,WAAW,SAAS,GAAG,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAAI,CAAA;AACxJ;AACA,sBAAsB,cAAc;AACpC,MAAa,oBAAoB,KAAK;AAEtC,MAAa,0BAA0B,EACrC,WACA,GAAG,WAC8B;CACjC,OAAO,oBAAC,KAAK,YAAN;EAAiB,GAAI;EAAM,YAAW,UAASA,OAAK,GAAG,WAAW,UAAU,GAAG,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAAI,CAAA;AAC1J;AACA,uBAAuB,cAAc;AAIrC,MAAa,8BAA8B,EACzC,WACA,QACA,GAAG,WACkC;CACrC,OAAO,oBAAC,KAAK,gBAAN;EAAqB,GAAI;EAAM,YAAW,UAASA,OAAK,cAAc,MAAM,GAAG,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAAI,CAAA;AAC1J;AACA,2BAA2B,cAAc;AAEzC,MAAa,+BAA+B,EAC1C,WACA,QACA,GAAG,WAGC;CACJ,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAWA,OAAK,GAAG,CAAC,WAAW,aAAa,MAAM,CAAC,GAAG,SAAS;CAAI,CAAA;AAC3F;AACA,MAAa,2BAA2B,UAAwC,oBAAC,6BAAD,EAA6B,GAAI,MAAQ,CAAA;AACzH,wBAAwB,cAAc;AAEtC,MAAa,4BAA4B,EACvC,WACA,QACA,GAAG,WAGC;CACJ,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAWA,OAAK,GAAG,CAAC,WAAW,MAAM,MAAM,GAAG,eAAe,IAAI,GAAG,SAAS;CAAI,CAAA;AAC1G;AACA,MAAa,wBAAwB,UAAqC,oBAAC,0BAAD,EAA0B,GAAI,MAAQ,CAAA;AAChH,qBAAqB,cAAc;AAEnC,MAAa,8BAA8B,EACzC,WACA,GAAG,WACkC;CACrC,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,UAAU,GAAG,SAAS;CAAI,CAAA;AAChF;AACA,2BAA2B,cAAc;AAEzC,MAAa,yBAAyB,EACpC,WACA,GAAG,WAC6B;CAChC,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,OAAO,eAAe,KAAK,GAAG,SAAS;CAAI,CAAA;AAClG;AACA,sBAAsB,cAAc;AAEpC,MAAa,wBAAwB,EACnC,WACA,GAAG,WAC4B;CAC/B,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,IAAI,GAAG,SAAS;CAAI,CAAA;AAC3E;AACA,qBAAqB,cAAc;AAEnC,MAAa,yBAAyB,EACpC,WACA,GAAG,WAC6B;CAChC,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,KAAK,GAAG,SAAS;CAAI,CAAA;AAC5E;AACA,sBAAsB,cAAc;AAEpC,MAAa,4BAA4B,EACvC,WACA,GAAG,WACgC;CACnC,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAWA,OAAK,GAAG,WAAW,cAAc,eAAe,YAAY,GAAG,SAAS;CAAI,CAAA;AAChH;AACA,yBAAyB,cAAc;AAQvC,MAAa,0BAA0B,EACrC,SAAS,aACT,WACA,eAAe,OACf,QACA,gBACA,UACA,iBACA,UACA,GAAG,WAC8B;CACjC,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,kBAAkB,KAAK;CAC9E,MAAM,eAAe,gBAAgB,KAAA;CACrC,MAAM,UAAU,eAAe,cAAc;CAC7C,MAAM,sBAAsB,aAAa,eAAwB;EAC/D,IAAI,CAAC,cACH,mBAAmB,UAAU;EAE/B,kBAAkB,UAAU;CAC9B,GAAG,CAAC,cAAc,eAAe,CAAC;CAClC,OAAO,qBAAC,KAAK,MAAN;EAAW,GAAI;EAAoB;EAAwB;EAAU,YAAW,UAASA,OAAK,cAAc,MAAM,GAAG,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;EAAG,UAAS,MAAK;GACzM,EAAE,eAAe;GACjB,IAAI,CAAC,UACH,oBAAoB,CAAC,OAAO;EAEhC;EALO,UAAA,CAMF,UACD,oBAAC,QAAD;GAAM,OAAO;IACb,SAAS;IACT,mBAAmB;GACrB;GAAG,UAAS,MAAK,EAAE,gBAAgB;GAC/B,UAAA,oBAAC,QAAD;IAAiB;IAAmB;IAAU,MAAK;IAAQ,UAAU;IAAI,UAAU;IAAqB,UAAU,GAAG,MAAM,EAAE,gBAAgB;GAAI,CAAA;EAC7I,CAAA,CACG;;AACf;AACA,uBAAuB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { MenuVirtualList, type VirtualListProps } from '@/internal/virtual';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { type styleProps } from '@/styles/stylex/props';\nimport Switch from '@/Switch';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { menuClassNames, menuStyles } from './style';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst sx = (styles: XStyle, stableClassName?: string) =>\n  clsx(stylex.props(styles).className, stableClassName);\n\nconst itemClassName = (danger: boolean | undefined) =>\n  sx([menuStyles.item, danger && menuStyles.danger]);\n\nexport type DropdownMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Menu.Trigger>,\n  'children' | 'render'\n> & {\n  children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DropdownMenuTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    // Base UI's trigger props include `type=\"button\"` by default.\n    // If we render into a non-<button> element, that prop is invalid and can warn.\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n      ref: mergeRefs([getElementRef(children), (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n  }\n\n  return (\n    <Menu.Trigger\n      {...rest}\n      className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Menu.Trigger>\n  );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n  className,\n  collisionPadding,\n  placement,\n  hoverTrigger,\n  align,\n  side,\n  sideOffset,\n  children,\n  style,\n  ...rest\n}: DropdownMenuPositionerProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Menu.Positioner\n      {...rest}\n      align={align ?? placementConfig?.align}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side}\n      sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n      style={resolvedStyle}\n      className={\n        mergeStateClassName(\n          sx(menuStyles.positioner, menuClassNames.positioner),\n          className as any,\n        ) as any\n      }\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </Menu.Positioner>\n  );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopupImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuPopupProps & { xstyle?: XStyle }) => {\n  return (\n    <Menu.Popup\n      {...rest}\n      className={\n        mergeStateClassName(\n          sx([menuStyles.popup, xstyle], menuClassNames.popup),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\n\nexport const DropdownMenuPopup = (props: DropdownMenuPopupProps) => (\n  <DropdownMenuPopupImpl {...props} />\n);\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuHeader = ({ className, ...rest }: DropdownMenuHeaderProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.header), className)} data-slot=\"header\" />;\n};\n\nDropdownMenuHeader.displayName = 'DropdownMenuHeader';\n\nexport type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuFooter = ({ className, ...rest }: DropdownMenuFooterProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.footer), className)} data-slot=\"footer\" />;\n};\n\nDropdownMenuFooter.displayName = 'DropdownMenuFooter';\n\nexport type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement> &\n  VirtualListProps;\n\nexport const DropdownMenuScrollViewport = ({\n  children,\n  className,\n  getItemLabel,\n  keepMounted,\n  listItemHeight,\n  virtual,\n  ...rest\n}: DropdownMenuScrollViewportProps) => {\n  if (!virtual) {\n    return (\n      <div {...rest} className={clsx(sx(menuStyles.slotViewport), className)}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MenuVirtualList\n      {...rest}\n      className={className}\n      getItemLabel={getItemLabel}\n      itemSize={listItemHeight}\n      keepMounted={keepMounted}\n    >\n      {children}\n    </MenuVirtualList>\n  );\n};\n\nDropdownMenuScrollViewport.displayName = 'DropdownMenuScrollViewport';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n  return (\n    <Menu.Item\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n  return (\n    <Menu.Separator\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.separator),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.groupLabel),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContentImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemContentProps & { xstyle?: XStyle }) => {\n  return <div {...rest} className={clsx(sx([menuStyles.itemContent, xstyle]), className)} />;\n};\n\nexport const DropdownMenuItemContent = (props: DropdownMenuItemContentProps) => (\n  <DropdownMenuItemContentImpl {...props} />\n);\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIconImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemIconProps & { xstyle?: XStyle }) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx([menuStyles.icon, xstyle], menuClassNames.icon), className)}\n    />\n  );\n};\n\nexport const DropdownMenuItemIcon = (props: DropdownMenuItemIconProps) => (\n  <DropdownMenuItemIconImpl {...props} />\n);\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.labelGroup), className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.label, menuClassNames.label), className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.desc), className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.extra), className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx(menuStyles.submenuArrow, menuClassNames.submenuArrow), className)}\n    />\n  );\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n  React.ComponentProps<typeof Menu.Item>,\n  'onClick'\n> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n  checked: checkedProp,\n  className,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  onCheckedChange,\n  children,\n  ...rest\n}: DropdownMenuSwitchItemProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <Menu.Item\n      {...rest}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}

package/es/Input/InputPassword.mjs

@@ -7,13 +7,15 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { Eye, EyeOff } from "lucide-react";
 //#region src/Input/InputPassword.tsx
-const InputPassword = memo(({ visibilityToggle = true, suffix, ...rest }) => {
+const InputPassword = memo(({ visibilityToggle = true, visibilityToggleLabels, suffix, ...rest }) => {
 	const [visible, setVisible] = useState(false);
+	const toggleLabel = visible ? visibilityToggleLabels?.hide ?? "Hide password" : visibilityToggleLabels?.show ?? "Show password";
 	return /* @__PURE__ */ jsx(Input_default, {
 		type: visible ? "text" : "password",
 		suffix: /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, visibilityToggle && /* @__PURE__ */ jsx("button", {
-			"aria-label": visible ? "Hide password" : "Show password",
+			"aria-label": toggleLabel,
 			tabIndex: -1,
+			title: toggleLabel,
 			type: "button",
 			onClick: () => setVisible((v) => !v),
 			...stylex.props(styles.passwordToggle),

package/es/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","names":["Input"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport Input from './Input';\nimport { styles } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ visibilityToggle = true, suffix, ...rest }) => {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <Input\n      type={visible ? 'text' : 'password'}\n      suffix={\n        <>\n          {suffix}\n          {visibilityToggle && (\n            <button\n              aria-label={visible ? 'Hide password' : 'Show password'}\n              tabIndex={-1}\n              type={'button'}\n              onClick={() => setVisible((v) => !v)}\n              {...stylex.props(styles.passwordToggle)}\n            >\n              <Icon icon={visible ? Eye : EyeOff} size={16} />\n            </button>\n          )}\n        </>\n      }\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default Object.assign(InputPassword, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAC9C,mBAAmB,MACnB,QACA,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OAAO,oBAACA,eAAD;EAAO,MAAM,UAAU,SAAS;EAAY,QAAQ,qBAAA,YAAA,EAAA,UAAA,CAClD,QACA,oBAAoB,oBAAC,UAAD;GAAQ,cAAY,UAAU,kBAAkB;GAAiB,UAAU;GAAI,MAAM;GAAU,eAAe,YAAW,MAAK,CAAC,CAAC;GAAG,GAAI,OAAO,MAAM,OAAO,cAAc;GAC1L,UAAA,oBAAC,MAAD;IAAM,MAAM,UAAU,MAAM;IAAQ,MAAM;GAAK,CAAA;EACzC,CAAA,CACV,EAAA,CAAA;EAAG,GAAI;CAAO,CAAA;AACxB,CAAC;AACD,cAAc,cAAc;AAC5B,IAAA,wBAAe,OAAO,OAAO,eAAe,EAC1C,aAAa,EACX,YAAY,GACd,EACF,CAAC"}
+{"version":3,"file":"InputPassword.mjs","names":["Input"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport Input from './Input';\nimport { styles } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(\n  ({ visibilityToggle = true, visibilityToggleLabels, suffix, ...rest }) => {\n    const [visible, setVisible] = useState(false);\n    const toggleLabel = visible\n      ? (visibilityToggleLabels?.hide ?? 'Hide password')\n      : (visibilityToggleLabels?.show ?? 'Show password');\n\n    return (\n      <Input\n        type={visible ? 'text' : 'password'}\n        suffix={\n          <>\n            {suffix}\n            {visibilityToggle && (\n              <button\n                aria-label={toggleLabel}\n                tabIndex={-1}\n                title={toggleLabel}\n                type={'button'}\n                onClick={() => setVisible((v) => !v)}\n                {...stylex.props(styles.passwordToggle)}\n              >\n                <Icon icon={visible ? Eye : EyeOff} size={16} />\n              </button>\n            )}\n          </>\n        }\n        {...rest}\n      />\n    );\n  },\n);\n\nInputPassword.displayName = 'InputPassword';\n\nexport default Object.assign(InputPassword, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAC9C,mBAAmB,MACnB,wBACA,QACA,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,cAAc,UAAU,wBAAwB,QAAQ,kBAAkB,wBAAwB,QAAQ;CAChH,OAAO,oBAACA,eAAD;EAAO,MAAM,UAAU,SAAS;EAAY,QAAQ,qBAAA,YAAA,EAAA,UAAA,CAChD,QACA,oBAAoB,oBAAC,UAAD;GAAQ,cAAY;GAAa,UAAU;GAAI,OAAO;GAAa,MAAM;GAAU,eAAe,YAAW,MAAK,CAAC,CAAC;GAAG,GAAI,OAAO,MAAM,OAAO,cAAc;GAC9K,UAAA,oBAAC,MAAD;IAAM,MAAM,UAAU,MAAM;IAAQ,MAAM;GAAK,CAAA;EACzC,CAAA,CACV,EAAA,CAAA;EAAG,GAAI;CAAO,CAAA;AAC1B,CAAC;AACD,cAAc,cAAc;AAC5B,IAAA,wBAAe,OAAO,OAAO,eAAe,EAC1C,aAAa,EACX,YAAY,GACd,EACF,CAAC"}

package/es/Input/index.d.mts

@@ -1,8 +1,8 @@
-import { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps } from "./type.mjs";
+import { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputPasswordVisibilityToggleLabels, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps } from "./type.mjs";
 import _default from "./Input.mjs";
 import _default$1 from "./InputNumber.mjs";
 import InputOTP from "./InputOTP.mjs";
 import _default$2 from "./InputPassword.mjs";
 import { inputClassNames, rootVariants } from "./style.mjs";
 import _default$3 from "./TextArea.mjs";
-export { _default as Input, type InputClassNames, _default$1 as InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, _default$2 as InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, _default$3 as TextArea, type TextAreaAutoSize, type TextAreaProps, inputClassNames as inputStyles, rootVariants as inputVariants };
+export { _default as Input, type InputClassNames, _default$1 as InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, _default$2 as InputPassword, type InputPasswordProps, type InputPasswordVisibilityToggleLabels, type InputProps, type InputSize, type InputStyles, type InputVariant, _default$3 as TextArea, type TextAreaAutoSize, type TextAreaProps, inputClassNames as inputStyles, rootVariants as inputVariants };

package/es/Input/type.d.mts

@@ -62,6 +62,21 @@ export interface InputPasswordProps extends Omit<InputProps, 'type'> {
    * @default true
    */
   visibilityToggle?: boolean;
+  /**
+   * Accessible labels (`aria-label` / `title`) of the eye toggle button
+   * @default { hide: 'Hide password', show: 'Show password' }
+   */
+  visibilityToggleLabels?: InputPasswordVisibilityToggleLabels;
+}
+export interface InputPasswordVisibilityToggleLabels {
+  /**
+   * Label while the password is visible (clicking hides it)
+   */
+  hide?: string;
+  /**
+   * Label while the password is hidden (clicking shows it)
+   */
+  show?: string;
 }
 type BaseNumberFieldProps = Omit<ComponentProps<typeof NumberField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'prefix'>;
 export interface InputNumberProps extends BaseNumberFieldProps {

package/es/Modal/atoms.mjs

@@ -4,6 +4,7 @@ import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
 import { backdropTransition, modalMotionConfig } from "./constants.mjs";
@@ -216,7 +217,7 @@ const ModalTrigger = ({ children, className, nativeButton, ref: refProp, ...rest
 		return cloneElement(children, {
 			...mergedProps,
 			ref: mergeRefs([
-				children.ref,
+				getElementRef(children),
 				props.ref,
 				refProp
 			])

package/es/Modal/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n              className={clsx(\n                stylex.props(styles.popupInner, panelXstyle).className,\n                panelClassName,\n              )}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n              className={clsx(\n                stylex.props(styles.popupInner, panelXstyle).className,\n                panelClassName,\n              )}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([getElementRef(children), (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}

package/es/Popover/PopoverInGroup.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs } from "../utils/mergeRefs.mjs";
 import { parseTrigger } from "../utils/parseTrigger.mjs";
 import { PopoverGroupHandleContext } from "./groupContext.mjs";
@@ -48,7 +49,7 @@ const PopoverInGroup = ({ children, ref: refProp, ...props }) => {
 				...mergedProps,
 				className: clsx$1(mergedProps.className, triggerClassName),
 				ref: mergeRefs([
-					children.ref,
+					getElementRef(children),
 					renderProps.ref,
 					refProp
 				])

package/es/Popover/PopoverInGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverInGroup.mjs","names":["BasePopover","clsx"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { cloneElement, type FC, isValidElement, useMemo } from 'react';\nimport { use } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { HOVER_ONLY_TRIGGER_ATTR } from './hoverOnlyPress';\nimport { type PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = use(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnClick, openOnHover } = useMemo(\n    () => parseTrigger(item.trigger ?? 'hover'),\n    [item.trigger],\n  );\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    [HOVER_ONLY_TRIGGER_ATTR]: openOnClick ? undefined : '',\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    ...item.triggerProps,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,KAAK;CAExC,MAAM,EAAE,aAAa,gBAAgB,cAC7B,aAAa,KAAK,WAAW,OAAO,GAC1C,CAAC,KAAK,OAAO,CACf;CAEA,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;CACrB,CAAC;CAGD,IAAI,CAAC,KAAK,SACR,OAAO;CAGT,MAAM,eAAe;GAClB,0BAA0B,cAAc,KAAA,IAAY;EACrD,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,GAAG,KAAK;EACR,SAAS;CACX;CAEA,MAAM,mBAAmB,KAAK,YAAY;CAE1C,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAWC,OAAK,YAAY,WAAW,gBAAgB;IACvD,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;IAAO,CAAC;GAC3E,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACD,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}
+{"version":3,"file":"PopoverInGroup.mjs","names":["BasePopover","clsx"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { cloneElement, type FC, isValidElement, useMemo } from 'react';\nimport { use } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { HOVER_ONLY_TRIGGER_ATTR } from './hoverOnlyPress';\nimport { type PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = use(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnClick, openOnHover } = useMemo(\n    () => parseTrigger(item.trigger ?? 'hover'),\n    [item.trigger],\n  );\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    [HOVER_ONLY_TRIGGER_ATTR]: openOnClick ? undefined : '',\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    ...item.triggerProps,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([getElementRef(children), (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,KAAK;CAExC,MAAM,EAAE,aAAa,gBAAgB,cAC7B,aAAa,KAAK,WAAW,OAAO,GAC1C,CAAC,KAAK,OAAO,CACf;CAEA,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;CACrB,CAAC;CAGD,IAAI,CAAC,KAAK,SACR,OAAO;CAGT,MAAM,eAAe;GAClB,0BAA0B,cAAc,KAAA,IAAY;EACrD,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,GAAG,KAAK;EACR,SAAS;CACX;CAEA,MAAM,mBAAmB,KAAK,YAAY;CAE1C,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAWC,OAAK,YAAY,WAAW,gBAAgB;IACvD,KAAK,UAAU;KAAC,cAAc,QAAQ;KAAI,YAAoB;KAAK;IAAO,CAAC;GAC7E,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACD,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}

package/es/Popover/atoms.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
@@ -38,7 +39,7 @@ const PopoverTriggerElement = ({ children, className, nativeButton, ref: refProp
 				...mergedProps,
 				className: clsx$1(baseClassName, extraClassName),
 				ref: mergeRefs([
-					children.ref,
+					getElementRef(children),
 					props.ref,
 					refProp
 				])

package/es/Popover/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BasePopover","clsx"],"sources":["../../src/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  collisionPadding,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        clsx(\n          stylex.props(styles.positioner).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport const PopoverPopup = ({ className, xstyle, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        clsx(\n          stylex.props(styles.popup, xstyle).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        clsx(\n          stylex.props(styles.arrow).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        clsx(\n          stylex.props(styles.viewport).className,\n          'lobe-popover-viewport',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["BasePopover","clsx"],"sources":["../../src/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, extraClassName),\n            ref: mergeRefs([getElementRef(children), (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  collisionPadding,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        clsx(\n          stylex.props(styles.positioner).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport const PopoverPopup = ({ className, xstyle, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        clsx(\n          stylex.props(styles.popup, xstyle).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        clsx(\n          stylex.props(styles.arrow).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        clsx(\n          stylex.props(styles.viewport).className,\n          'lobe-popover-viewport',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}

package/es/Segmented/Segmented.mjs

@@ -62,11 +62,12 @@ const Segmented = ({ block = false, className, classNames, defaultValue, disable
 	const groupValue = useMemo(() => innerValue != null ? [innerValue] : [], [innerValue]);
 	const rootStyle = {
 		...style,
+		...customStyles?.list,
 		...customStyles?.root
 	};
 	return /* @__PURE__ */ jsxs(SegmentedRoot, {
 		block,
-		className: clsx$1(classNames?.root, className),
+		className: clsx$1(classNames?.root, classNames?.list, className),
 		disabled,
 		glass,
 		id,

package/es/Segmented/Segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.mjs","names":["clsx"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n  SegmentedIndicator,\n  SegmentedItem,\n  SegmentedItemIcon,\n  SegmentedItemLabel,\n  SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n  option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n  typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n  block = false,\n  className,\n  classNames,\n  defaultValue,\n  disabled = false,\n  glass = false,\n  id,\n  name,\n  onChange,\n  options,\n  ref,\n  shadow = false,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  value,\n  variant = 'filled',\n  vertical = false,\n}: SegmentedProps<Value>) => {\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n    defaultValue,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  const normalizedOptions = useMemo(\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n    [options],\n  );\n\n  const updateIndicator = useCallback(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n    if (!active) {\n      list.style.setProperty('--active-item-left', '0px');\n      list.style.setProperty('--active-item-top', '0px');\n      list.style.setProperty('--active-item-right', '0px');\n      list.style.setProperty('--active-item-width', '0px');\n      list.style.setProperty('--active-item-height', '0px');\n      return;\n    }\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n    list.style.setProperty(\n      '--active-item-right',\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n    );\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n  }, []);\n\n  useLayoutEffect(() => {\n    updateIndicator();\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(() => updateIndicator());\n    ro.observe(list);\n    return () => ro.disconnect();\n  }, [updateIndicator]);\n\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n  return (\n    <SegmentedRoot<Value>\n      block={block}\n      className={clsx(classNames?.root, className)}\n      disabled={disabled}\n      glass={glass}\n      id={id}\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      ref={mergedRef}\n      shadow={shadow}\n      style={rootStyle}\n      value={groupValue}\n      variant={variant}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked != null) setInnerValue(picked);\n      }}\n    >\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n      {normalizedOptions.map((opt) => (\n        <SegmentedItem<Value>\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n          block={block}\n          className={clsx(classNames?.item, opt.className)}\n          data-segmented-item=\"\"\n          disabled={disabled || opt.disabled}\n          key={opt.value}\n          name={name}\n          size={size}\n          style={customStyles?.item}\n          title={opt.title}\n          value={opt.value}\n        >\n          {opt.icon != null && (\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n              {opt.icon}\n            </SegmentedItemIcon>\n          )}\n          {opt.label != null && (\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n              {opt.label}\n            </SegmentedItemLabel>\n          )}\n        </SegmentedItem>\n      ))}\n    </SegmentedRoot>\n  );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}
+{"version":3,"file":"Segmented.mjs","names":["clsx"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n  SegmentedIndicator,\n  SegmentedItem,\n  SegmentedItemIcon,\n  SegmentedItemLabel,\n  SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n  option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n  typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n  block = false,\n  className,\n  classNames,\n  defaultValue,\n  disabled = false,\n  glass = false,\n  id,\n  name,\n  onChange,\n  options,\n  ref,\n  shadow = false,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  value,\n  variant = 'filled',\n  vertical = false,\n}: SegmentedProps<Value>) => {\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n    defaultValue,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  const normalizedOptions = useMemo(\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n    [options],\n  );\n\n  const updateIndicator = useCallback(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n    if (!active) {\n      list.style.setProperty('--active-item-left', '0px');\n      list.style.setProperty('--active-item-top', '0px');\n      list.style.setProperty('--active-item-right', '0px');\n      list.style.setProperty('--active-item-width', '0px');\n      list.style.setProperty('--active-item-height', '0px');\n      return;\n    }\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n    list.style.setProperty(\n      '--active-item-right',\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n    );\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n  }, []);\n\n  useLayoutEffect(() => {\n    updateIndicator();\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(() => updateIndicator());\n    ro.observe(list);\n    return () => ro.disconnect();\n  }, [updateIndicator]);\n\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n  // `list` is the same element as `root` (the toggle group holds the items directly).\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.list, ...customStyles?.root };\n\n  return (\n    <SegmentedRoot<Value>\n      block={block}\n      className={clsx(classNames?.root, classNames?.list, className)}\n      disabled={disabled}\n      glass={glass}\n      id={id}\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      ref={mergedRef}\n      shadow={shadow}\n      style={rootStyle}\n      value={groupValue}\n      variant={variant}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked != null) setInnerValue(picked);\n      }}\n    >\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n      {normalizedOptions.map((opt) => (\n        <SegmentedItem<Value>\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n          block={block}\n          className={clsx(classNames?.item, opt.className)}\n          data-segmented-item=\"\"\n          disabled={disabled || opt.disabled}\n          key={opt.value}\n          name={name}\n          size={size}\n          style={customStyles?.item}\n          title={opt.title}\n          value={opt.value}\n        >\n          {opt.icon != null && (\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n              {opt.icon}\n            </SegmentedItemIcon>\n          )}\n          {opt.label != null && (\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n              {opt.label}\n            </SegmentedItemLabel>\n          )}\n        </SegmentedItem>\n      ))}\n    </SegmentedRoot>\n  );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}