@lobehub/ui 6.0.0-beta.3 → 6.0.0-beta.5

package/es/DatePicker/DateRangePicker.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import Icon from "../Icon/Icon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import datePicker_default from "../i18n/resources/en/datePicker.mjs";
 import { DEFAULT_FORMAT, clampToBounds, orderRange } from "./calendar.mjs";
@@ -12,7 +13,6 @@ import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { ArrowRight, CalendarIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 import dayjs from "dayjs";
 //#region src/DatePicker/DateRangePicker.tsx
 const EMPTY = [null, null];

package/es/DatePicker/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport { formatDate } from './DatePicker';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DateRangePickerProps, DateRangeValue } from './type';\n\nconst EMPTY: DateRangeValue = [null, null];\n\nconst DateRangePicker = memo<DateRangePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = EMPTY,\n    disabled,\n    disabledDate,\n    format,\n    max,\n    min,\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\n    const [hovered, setHovered] = useState<Date | null>(null);\n    const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\n\n    const shown = open && draft[0] ? draft : current;\n    const nextMonth = dayjs(month).add(1, 'month').toDate();\n    const bounds = { disabledDate, max, min };\n\n    const half = (date: Date | null, fallback: string, active: boolean) => (\n      <span {...stylex.props(styles.rangeHalf)} data-active={active ? '' : undefined}>\n        {date ? (\n          formatDate(date, format, DEFAULT_FORMAT.date)\n        ) : (\n          <span {...stylex.props(styles.placeholder)}>{fallback}</span>\n        )}\n      </span>\n    );\n\n    const select = (date: Date) => {\n      if (!draft[0] || draft[1]) {\n        setDraft([date, null]);\n        return;\n      }\n      const ordered = orderRange(draft[0], date);\n      setDraft(EMPTY);\n      setCurrent(ordered);\n      setOpen(false);\n    };\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!(current[0] || current[1])}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button {...stylex.props(focusRing.info, styles.trigger)} disabled={disabled} type=\"button\">\n            <span {...stylex.props(styles.rangeTrigger)}>\n              {half(\n                shown[0],\n                placeholder?.[0] ?? t('datePicker.startPlaceholder'),\n                open && !draft[0],\n              )}\n              <span {...stylex.props(styles.icon)}>\n                <Icon icon={ArrowRight} size={14} />\n              </span>\n              {half(\n                shown[1],\n                placeholder?.[1] ?? t('datePicker.endPlaceholder'),\n                open && !!draft[0],\n              )}\n            </span>\n          </button>\n        }\n        onClear={() => setCurrent(EMPTY)}\n        onOpenChange={(next) => {\n          if (next) {\n            setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\n            setDraft(EMPTY);\n          }\n          setOpen(next);\n        }}\n      >\n        <div {...stylex.props(styles.range)}>\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={month}\n            range={draft[0] ? draft : current}\n            showNav={false}\n            onHover={setHovered}\n            onMonthChange={setMonth}\n            onSelect={select}\n          />\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={nextMonth}\n            range={draft[0] ? draft : current}\n            onHover={setHovered}\n            onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\n            onSelect={select}\n          />\n        </div>\n      </PickerShell>\n    );\n  },\n);\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport { formatDate } from './DatePicker';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DateRangePickerProps, DateRangeValue } from './type';\n\nconst EMPTY: DateRangeValue = [null, null];\n\nconst DateRangePicker = memo<DateRangePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = EMPTY,\n    disabled,\n    disabledDate,\n    format,\n    max,\n    min,\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\n    const [hovered, setHovered] = useState<Date | null>(null);\n    const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\n\n    const shown = open && draft[0] ? draft : current;\n    const nextMonth = dayjs(month).add(1, 'month').toDate();\n    const bounds = { disabledDate, max, min };\n\n    const half = (date: Date | null, fallback: string, active: boolean) => (\n      <span {...stylex.props(styles.rangeHalf)} data-active={active ? '' : undefined}>\n        {date ? (\n          formatDate(date, format, DEFAULT_FORMAT.date)\n        ) : (\n          <span {...stylex.props(styles.placeholder)}>{fallback}</span>\n        )}\n      </span>\n    );\n\n    const select = (date: Date) => {\n      if (!draft[0] || draft[1]) {\n        setDraft([date, null]);\n        return;\n      }\n      const ordered = orderRange(draft[0], date);\n      setDraft(EMPTY);\n      setCurrent(ordered);\n      setOpen(false);\n    };\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!(current[0] || current[1])}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button\n            {...stylex.props(focusRing.info, styles.trigger)}\n            disabled={disabled}\n            type=\"button\"\n          >\n            <span {...stylex.props(styles.rangeTrigger)}>\n              {half(\n                shown[0],\n                placeholder?.[0] ?? t('datePicker.startPlaceholder'),\n                open && !draft[0],\n              )}\n              <span {...stylex.props(styles.icon)}>\n                <Icon icon={ArrowRight} size={14} />\n              </span>\n              {half(\n                shown[1],\n                placeholder?.[1] ?? t('datePicker.endPlaceholder'),\n                open && !!draft[0],\n              )}\n            </span>\n          </button>\n        }\n        onClear={() => setCurrent(EMPTY)}\n        onOpenChange={(next) => {\n          if (next) {\n            setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\n            setDraft(EMPTY);\n          }\n          setOpen(next);\n        }}\n      >\n        <div {...stylex.props(styles.range)}>\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={month}\n            range={draft[0] ? draft : current}\n            showNav={false}\n            onHover={setHovered}\n            onMonthChange={setMonth}\n            onSelect={select}\n          />\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={nextMonth}\n            range={draft[0] ? draft : current}\n            onHover={setHovered}\n            onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\n            onSelect={select}\n          />\n        </div>\n      </PickerShell>\n    );\n  },\n);\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"mappings":"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"}

package/es/DraggablePanel/atoms.mjs

@@ -2,6 +2,7 @@
 import { useMotionComponent } from "../MotionProvider/index.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { DraggablePanelContext, useDraggablePanelContext } from "./context.mjs";
 import { AXES } from "./core/axes.mjs";
 import { coarsePointer, handleSize } from "./core/env.mjs";
@@ -15,7 +16,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft } from "lucide-react";
-import useControlledState from "use-merge-value";
 import { useTransform } from "motion/react";
 //#region src/DraggablePanel/atoms.tsx
 const prefix = "base-draggable-panel";

package/es/DraggablePanel/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst prefix = 'base-draggable-panel';\n\nconst floatStyles = {\n  bottom: styles.bottomFloat,\n  left: styles.leftFloat,\n  right: styles.rightFloat,\n  top: styles.topFloat,\n};\n\nconst toggleStyles = {\n  bottom: styles.toggleTop,\n  left: styles.toggleRight,\n  right: styles.toggleLeft,\n  top: styles.toggleBottom,\n};\n\nconst togglePlacementClass = {\n  bottom: `${prefix}-toggle-top`,\n  left: `${prefix}-toggle-right`,\n  right: `${prefix}-toggle-left`,\n  top: `${prefix}-toggle-bottom`,\n};\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n  const { depth: d, half: h, lead } = SEAM_ARROW;\n  const c = ARROW_C;\n  const r = 0.12;\n  return [\n    `M${c} ${c - h - lead}`,\n    `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n    `L${c - d * (1 - r)} ${c - h * r}`,\n    `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n    `L${c - d * r} ${c + h - h * r}`,\n    `Q${c} ${c + h} ${c} ${c + h + lead}`,\n  ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n  (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          className={\n            styleProps(\n              [\n                styles.root,\n                mode === 'float' ? floatStyles[placement] : styles.fixed,\n                draggablePanelMarker,\n              ],\n              clsx(prefix, className),\n            ).className\n          }\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={styleProps(styles.content, clsx(`${prefix}-content`, className)).className}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        className={\n          styleProps(\n            [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n            clsx(`${prefix}-handle`, className),\n          ).className\n        }\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n      useDraggablePanelContext();\n    const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n    if (!expandable) return null;\n\n    const bend = bendSign(placement, expand);\n    const edgeOpacity = expand && showBorder ? 1 : 0;\n\n    return (\n      <div\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        className={\n          styleProps(\n            [styles.toggleRoot, toggleStyles[placement]],\n            clsx(`${prefix}-toggle`, togglePlacementClass[placement], className),\n          ).className\n        }\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n          {...stylex.props(\n            styles.toggleButton,\n            axis.vertical && styles.toggleButtonHorizontal,\n            draggablePanelToggleMarker,\n          )}\n        >\n          <svg\n            {...stylex.props(styles.toggleSvg)}\n            fill=\"none\"\n            height={ARROW_BOX}\n            style={{ '--seam-bend': bend } as CSSProperties}\n            viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n            width={ARROW_BOX}\n          >\n            <defs>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id={gradientId}\n                x1={ARROW_C}\n                x2={ARROW_C}\n                y1={0}\n                y2={ARROW_BOX}\n              >\n                <stop\n                  data-end=\"\"\n                  offset={0}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n                <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n                <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n                <stop\n                  data-end=\"\"\n                  offset={1}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                {...stylex.props(styles.togglePath)}\n                d={ARROW_PATH}\n                stroke={`url(#${gradientId})`}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={SEAM_ARROW.stroke}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => (\n    <div className={styleProps(styles.container, className).className} {...rest} />\n  ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div {...styleProps(styles.body, className, { flex: 1, ...style })} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={styleProps(styles.footer, className).className} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={styleProps(styles.header, className).className} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst prefix = 'base-draggable-panel';\n\nconst floatStyles = {\n  bottom: styles.bottomFloat,\n  left: styles.leftFloat,\n  right: styles.rightFloat,\n  top: styles.topFloat,\n};\n\nconst toggleStyles = {\n  bottom: styles.toggleTop,\n  left: styles.toggleRight,\n  right: styles.toggleLeft,\n  top: styles.toggleBottom,\n};\n\nconst togglePlacementClass = {\n  bottom: `${prefix}-toggle-top`,\n  left: `${prefix}-toggle-right`,\n  right: `${prefix}-toggle-left`,\n  top: `${prefix}-toggle-bottom`,\n};\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n  const { depth: d, half: h, lead } = SEAM_ARROW;\n  const c = ARROW_C;\n  const r = 0.12;\n  return [\n    `M${c} ${c - h - lead}`,\n    `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n    `L${c - d * (1 - r)} ${c - h * r}`,\n    `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n    `L${c - d * r} ${c + h - h * r}`,\n    `Q${c} ${c + h} ${c} ${c + h + lead}`,\n  ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n  (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          className={\n            styleProps(\n              [\n                styles.root,\n                mode === 'float' ? floatStyles[placement] : styles.fixed,\n                draggablePanelMarker,\n              ],\n              clsx(prefix, className),\n            ).className\n          }\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={styleProps(styles.content, clsx(`${prefix}-content`, className)).className}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        className={\n          styleProps(\n            [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n            clsx(`${prefix}-handle`, className),\n          ).className\n        }\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n      useDraggablePanelContext();\n    const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n    if (!expandable) return null;\n\n    const bend = bendSign(placement, expand);\n    const edgeOpacity = expand && showBorder ? 1 : 0;\n\n    return (\n      <div\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        className={\n          styleProps(\n            [styles.toggleRoot, toggleStyles[placement]],\n            clsx(`${prefix}-toggle`, togglePlacementClass[placement], className),\n          ).className\n        }\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n          {...stylex.props(\n            styles.toggleButton,\n            axis.vertical && styles.toggleButtonHorizontal,\n            draggablePanelToggleMarker,\n          )}\n        >\n          <svg\n            {...stylex.props(styles.toggleSvg)}\n            fill=\"none\"\n            height={ARROW_BOX}\n            style={{ '--seam-bend': bend } as CSSProperties}\n            viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n            width={ARROW_BOX}\n          >\n            <defs>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id={gradientId}\n                x1={ARROW_C}\n                x2={ARROW_C}\n                y1={0}\n                y2={ARROW_BOX}\n              >\n                <stop\n                  data-end=\"\"\n                  offset={0}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n                <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n                <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n                <stop\n                  data-end=\"\"\n                  offset={1}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                {...stylex.props(styles.togglePath)}\n                d={ARROW_PATH}\n                stroke={`url(#${gradientId})`}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={SEAM_ARROW.stroke}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => (\n    <div className={styleProps(styles.container, className).className} {...rest} />\n  ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div {...styleProps(styles.body, className, { flex: 1, ...style })} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={styleProps(styles.footer, className).className} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={styleProps(styles.header, className).className} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -3,14 +3,14 @@ import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
+import { useHover } from "../hooks/useHover.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import useControlledState from "use-merge-value";
-import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
 //#region src/DraggableSideNav/DraggableSideNav.tsx
 const DEFAULT_MIN_WIDTH = 64;

package/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSideNav.mjs","names":["Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useHover } from 'ahooks';\nimport clsx from 'clsx';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            {...stylex.props(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n            style={handleRootStyle}\n          >\n            <Center\n              {...styleProps(\n                [styles.handle, placement === 'left' ? styles.handleLeft : styles.handleRight],\n                classNames?.handle,\n                handleCenterStyle,\n              )}\n              onClick={toggleExpand}\n            >\n              <div style={handleIconWrapperStyle}>\n                <Icon\n                  className={stylex.props(styles.handlerIcon).className}\n                  icon={ArrowIcon}\n                  size={16}\n                />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth,\n        minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: stylex.props(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ).className,\n      }),\n      [placement, showHandleHighlight],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = styleProps(\n      styles.container,\n      clsx(classNames?.container, className),\n    ).className;\n\n    const contentClassName = styleProps(\n      [styles.contentContainer, !showBorder && styles.contentContainerNoBorder],\n      classNames?.content,\n    ).className;\n\n    const headerClassName = styleProps(styles.header, classNames?.header).className;\n\n    const bodyClassName = styleProps(\n      styles.body,\n      clsx('lobe-draggable-side-nav-body', classNames?.body),\n    ).className;\n\n    const footerClassName = styleProps(styles.footer, classNames?.footer).className;\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AAGjC,MAAM,kBAAkB;CACtB,QAAQ;CACR,YAAY;CACZ,aAAa;CACb,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,UAAU;AACZ;AAkCA,SAAS,eAAe,OAAqB,QAAqC;CAChF,QAAQ,OAAO,MAAf;EACE,KAAK,gBAED,OAAO;GACL,GAAG;GACH,YAAY;EACd;EAEJ,KAAK,eAED,OAAO;GACL,GAAG;GACH,YAAY;EACd;EAEJ,KAAK,mBAED,OAAO;GACL,GAAG;GACH,aAAa;EACf;EAEJ,KAAK,kBAED,OAAO;GACL,GAAG;GACH,aAAa;EACf;EAEJ,KAAK,aAED,OAAO;GACL,GAAG;GACH,eAAe,OAAO;EACxB;EAEJ,KAAK,sBAED,OAAO;GACL,GAAG;GACH,eAAe,OAAO;EACxB;EAEJ,KAAK,qBAED,OAAO;GACL,GAAG;GACH,cAAc,OAAO;EACvB;EAEJ,KAAK,kBAED,OAAO;GACL,GAAG;GACH,eAAe,OAAO;GACtB,cAAc;EAChB;EAEJ,KAAK,oBAED,OAAO;GACL,GAAG;GACH,eAAe,OAAO;EACxB;EAEJ,SAEI,OAAO;CAEb;AACF;AACA,MAAM,mBAAmB,MAA6B,EACpD,MACA,WACA,YACA,gBAAgB,gBAChB,cACA,QACA,aAAa,MACb,QACA,QACA,UACA,WAAW,mBACX,gBACA,eACA,iBACA,YAAY,QACZ,YAAY,MACZ,aAAa,MACb,aAAa,MACb,0BAA0B,OAC1B,sBAAsB,OACtB,iBACA,QAAQ,cACR,OACA,GAAG,WACC;CACJ,MAAM,eAAe,eAAuC,EAC1D,2BAA2B,mBAAmB,GAChD,IAAI,CAAC,eAAe,CAAC;CACrB,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,aAAa,SAAS,GAAG;CAG/B,MAAM,CAAC,UAAU,eAAe,mBAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,sBAAsB,OAAY,KAAA,CAAS;CACjD,MAAM,qBAAqB,OAAY,KAAA,CAAS;CAGhD,MAAM,+BAA+B,cAAc,gBAAgB,wBAAwB,CAAC,YAAY,CAAC;CAUzG,MAAM,CAAC,OAAO,YAAY,WAAW,gBAAgB;EANnD,eAAe,SAAS;EACxB,eAAe,WAAW,SAAS,+BAA+B;EAClE,aAAa;EACb,YAAY;EACZ,cAAc;CAEgD,CAAC;CAGjE,MAAM,oBAAoB,cAAc;EACtC,OAAO,YAAY,MAAM,gBAAgB,YAAY;CACvD,GAAG,CAAC,UAAU,MAAM,aAAa,CAAC;CAGlC,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,YAAY;EAGjB,IAAI,MAAM,eAAe,MAAM,YAAY;EAG3C,IAAI,oBAAoB,SACtB,aAAa,oBAAoB,OAAO;EAI1C,SAAS,EACP,MAAM,kBACR,CAAC;EACD,YAAY,CAAC,QAAQ;EAGrB,oBAAoB,UAAU,iBAAiB;GAC7C,SAAS,EACP,MAAM,iBACR,CAAC;EACH,GAAG,kBAAkB;CACvB,GAAG;EAAC;EAAY;EAAU;EAAa,MAAM;EAAa,MAAM;CAAU,CAAC;CAG3E,MAAM,gBAAgB,OAAO,QAAQ;CAGrC,gBAAgB;EAEd,IAAI,cAAc,YAAY,YAAY,CAAC,MAAM,cAAc,CAAC,MAAM,aAAa;GACjF,IAAI,oBAAoB,SACtB,aAAa,oBAAoB,OAAO;GAI1C,SAAS,EACP,MAAM,kBACR,CAAC;GACD,oBAAoB,UAAU,iBAAiB;IAC7C,SAAS,EACP,MAAM,iBACR,CAAC;GACH,GAAG,kBAAkB;GACrB,cAAc,UAAU;EAC1B;CACF,GAAG;EAAC;EAAU,MAAM;EAAY,MAAM;CAAW,CAAC;CAGlD,gBAAgB;EACd,IAAI,MAAM,aAAa;GAErB,MAAM,QAAQ,4BAA4B;IACxC,IAAI,UAEF,SAAS;KACP,SAAS,MAAM;KACf,MAAM;IACR,CAAC;SACI;KAEL,SAAS;MACP,SAAS;MACT,MAAM;KACR,CAAC;KACD,IAAI,mBAAmB,SACrB,aAAa,mBAAmB,OAAO;KAEzC,mBAAmB,UAAU,iBAAiB;MAC5C,SAAS;OACP,SAAS;OACT,MAAM;MACR,CAAC;KACH,GAAG,wBAAwB;IAC7B;GACF,CAAC;GACD,aAAa;IACX,qBAAqB,KAAK;GAC5B;EACF;CACF,GAAG;EAAC;EAAU,MAAM;EAAa;EAAU,MAAM;CAAa,CAAC;CAI/D,MAAM,oBAAoB,OAAO,MAAM,UAAU;CACjD,gBAAgB;EACd,MAAM,cAAc,kBAAkB;EACtC,kBAAkB,UAAU,MAAM;EAGlC,IAAI,eAAe,CAAC,MAAM,cAAc,CAAC,MAAM,aAC7C,SAAS;GACP,SAAS;GACT,MAAM;EACR,CAAC;CAEL,GAAG;EAAC;EAAU,MAAM;EAAa,MAAM;CAAU,CAAC;CAIlD,gBAAgB;EACd,IAAI,UAAU,KAAA,KAAa,CAAC,MAAM,cAAc,CAAC,MAAM,aAAa;GAElE,SAAS;IACP,SAAS;IACT,MAAM;GACR,CAAC;GAED,IAAI,UACF,SAAS;IACP,SAAS;IACT,MAAM;GACR,CAAC;EAGL;CACF,GAAG;EAAC;EAAO,MAAM;EAAY,MAAM;EAAa;CAAQ,CAAC;CAGzD,MAAM,cAAc,cAAc;EAChC,OAAO,KAAK,MAAM,YAAY;CAChC,GAAG,CAAC,MAAM,MAAM,YAAY,CAAC;CAG7B,MAAM,gBAAgB,cAAc;EAClC,OAAO,OAAO,WAAW,aAAa,OAAO,MAAM,YAAY,IAAI;CACrE,GAAG,CAAC,QAAQ,MAAM,YAAY,CAAC;CAG/B,MAAM,gBAAgB,cAAc;EAClC,OAAO,OAAO,WAAW,aAAa,OAAO,MAAM,YAAY,IAAI;CACrE,GAAG,CAAC,QAAQ,MAAM,YAAY,CAAC;CAG/B,MAAM,eAA+B,aAAa,GAAG,IAAI,KAAK,UAAU;EACtE,MAAM,eAAe,IAAI;EACzB,SAAS;GACP,SAAS;GACT,MAAM;EACR,CAAC;EACD,kBAAkB,OAAO,YAAY;CACvC,GAAG,CAAC,eAAe,CAAC;CACpB,MAAM,oBAAoB,kBAAkB;EAC1C,SAAS,EACP,MAAM,eACR,CAAC;CACH,GAAG,CAAC,CAAC;CACL,MAAM,mBAAmC,aAAa,GAAG,IAAI,KAAK,UAAU;EAC1E,SAAS,EACP,MAAM,cACR,CAAC;EACD,MAAM,eAAe,IAAI;EAGzB,IAAI,oBAAoB,SACtB,aAAa,oBAAoB,OAAO;EAI1C,IAAI,YAAY;GACd,MAAM,iBAAiB,gBAAgB,YAAY,eAAe;GAElE,IAAI,kBADiB,CAAC,YAAY,eAAe,YAAY,gBAAgB,mBACzC;IAElC,SAAS,EACP,MAAM,kBACR,CAAC;IACD,IAAI,gBAAgB;KAClB,YAAY,KAAK;KACjB,SAAS;MACP,SAAS;MACT,MAAM;KACR,CAAC;IACH,OAAO;KACL,YAAY,IAAI;KAChB,SAAS;MACP,SAAS;MACT,MAAM;KACR,CAAC;KACD,SAAS;MACP,SAAS;MACT,MAAM;KACR,CAAC;IACH;IACA,oBAAoB,UAAU,iBAAiB;KAC7C,SAAS,EACP,MAAM,iBACR,CAAC;IACH,GAAG,kBAAkB;GACvB,OAAO,IAAI,UAAU;IAEnB,SAAS;KACP,SAAS;KACT,MAAM;IACR,CAAC;IACD,SAAS;KACP,SAAS;KACT,MAAM;IACR,CAAC;GACH;EACF,OAAO;GAEL,SAAS;IACP,SAAS;IACT,MAAM;GACR,CAAC;GACD,SAAS;IACP,SAAS;IACT,MAAM;GACR,CAAC;EACH;EACA,gBAAgB,OAAO,YAAY;CACrC,GAAG;EAAC;EAAY;EAAU;EAAmB;EAAU;EAAe;CAAW,CAAC;CAGlF,MAAM,YAAY,cAAc;EAC9B,IAAI,cAAc,QAEhB,OAAO;EAGT,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAGd,MAAM,kBAAkB,eAA8B;EACpD,SAAS;EACT,SAAS,CAAC,YAAY,0BAA0B,IAAI,aAAa,IAAI;EACrE,YAAY;CACd,IAAI;EAAC;EAAU;EAAyB;CAAU,CAAC;CACnD,MAAM,oBAAoB,eAA8B;EACtD,GAAG,cAAc;EACjB,QAAQ;CACV,IAAI,CAAC,cAAc,MAAM,CAAC;CAC1B,MAAM,yBAAyB,eAA8B;EAC3D,YAAY,cAAc,UAAU,IAAI;EACxC,aAAa,cAAc,SAAS,IAAI;EACxC,WAAW,WAAW,iBAAiB;EACvC,YAAY,aAAa,yBAAyB;CACpD,IAAI,CAAC,WAAW,QAAQ,CAAC;CAGzB,MAAM,SAAS,cAAc,cAAc,cAAc,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,YAAY,cAAc,SAAS,OAAO,aAAa,OAAO,WAAW;EAAG,OAAO;EAC/J,UAAA,oBAAC,QAAD;GAAQ,GAAI,WAAW,CAAC,OAAO,QAAQ,cAAc,SAAS,OAAO,aAAa,OAAO,WAAW,GAAG,YAAY,QAAQ,iBAAiB;GAAG,SAAS;GACtJ,UAAA,oBAAC,OAAD;IAAK,OAAO;IACV,UAAA,oBAAC,MAAD;KAAM,WAAW,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC;KAAW,MAAM;KAAW,MAAM;IAAK,CAAA;GACtF,CAAA;EACC,CAAA;CACL,CAAA,GAAG;EAAC;EAAY;EAAY;EAAW;EAAiB,YAAY;EAAQ;EAAc;EAAmB;EAAwB;CAAS,CAAC;CAG5J,MAAM,aAAa,cAAc;EAC/B,OAAO;GACL;GACA;GACA,MAAM;IACJ,QAAQ;IACR,OAAO,MAAM;GACf;EACF;CACF,GAAG;EAAC,MAAM;EAAe;EAAU;CAAQ,CAAC;CAG5C,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,WACH,OAAO;EAET,OAAO;GACL,QAAQ;GACR,YAAY;GACZ,aAAa;GACb,MAAM,cAAc;GACpB,OAAO,cAAc;GACrB,KAAK;GACL,SAAS;GACT,UAAU;EACZ;CACF,GAAG,CAAC,WAAW,SAAS,CAAC;CAGzB,MAAM,gBAAgB,eAAe,GAClC,cAAc,SAAS,UAAU,SAAS,OAAO,MAAM,OAAO,cAAc,uBAAuB,OAAO,uBAAuB,cAAc,SAAS,OAAO,mBAAmB,OAAO,iBAAiB,CAAC,CAAC,UAC/M,IAAI,CAAC,WAAW,mBAAmB,CAAC;CAGpC,MAAM,iBAAiB,eAA8B;EACnD,GAAG,cAAc;EACjB,GAAG,KAAK;EAER,YAAY,MAAM,aAAa,SAAS,MAAM,cAAc,SAAS,mBAAmB,qCAAqC;CAC/H,IAAI;EAAC,cAAc;EAAW,KAAK;EAAO,MAAM;EAAY,MAAM;CAAW,CAAC;CAG9E,MAAM,qBAAqB,WAAW,OAAO,WAAW,KAAK,YAAY,WAAW,SAAS,CAAC,CAAC,CAAC;CAChG,MAAM,mBAAmB,WAAW,CAAC,OAAO,kBAAkB,CAAC,cAAc,OAAO,wBAAwB,GAAG,YAAY,OAAO,CAAC,CAAC;CACpI,MAAM,kBAAkB,WAAW,OAAO,QAAQ,YAAY,MAAM,CAAC,CAAC;CACtE,MAAM,gBAAgB,WAAW,OAAO,MAAM,KAAK,gCAAgC,YAAY,IAAI,CAAC,CAAC,CAAC;CACtG,MAAM,kBAAkB,WAAW,OAAO,QAAQ,YAAY,MAAM,CAAC,CAAC;CAGtE,gBAAgB;EACd,aAAa;GACX,IAAI,oBAAoB,SACtB,aAAa,oBAAoB,OAAO;GAE1C,IAAI,mBAAmB,SACrB,aAAa,mBAAmB,OAAO;EAE3C;CACF,GAAG,CAAC,CAAC;CACL,OAAO,oBAAC,SAAD;EAAY;EACb,UAAA,qBAAC,WAAD;GAAW,GAAI;GAAY,WAAW;GAAoB,QAAQ;GAA6B;GAAe,OAAO;GAAgB,UAAU;GAAc,eAAe;GAAmB,cAAc;GAA7M,UAAA,CACG,QACD,qBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAC/C,GAAG;KACH,GAAG,cAAc;IACnB;IAHI,UAAA;KAIG,iBAAiB,oBAAC,OAAD;MAAK,WAAW;MAAiB,OAAO,cAAc;MACnE,UAAA;KACE,CAAA;KACP,oBAAC,OAAD;MAAK,WAAW;MAAe,OAAO,cAAc;MACjD,UAAA;KACE,CAAA;KACJ,iBAAiB,oBAAC,OAAD;MAAK,WAAW;MAAiB,OAAO,cAAc;MACnE,UAAA;KACE,CAAA;IACA;GACA,CAAA,CAAA;;CACN,CAAA;AACb,CAAC;AACD,iBAAiB,cAAc"}
+{"version":3,"file":"DraggableSideNav.mjs","names":["Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\n\nimport { Center, Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useHover } from '@/hooks/useHover';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            {...stylex.props(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n            style={handleRootStyle}\n          >\n            <Center\n              {...styleProps(\n                [styles.handle, placement === 'left' ? styles.handleLeft : styles.handleRight],\n                classNames?.handle,\n                handleCenterStyle,\n              )}\n              onClick={toggleExpand}\n            >\n              <div style={handleIconWrapperStyle}>\n                <Icon\n                  className={stylex.props(styles.handlerIcon).className}\n                  icon={ArrowIcon}\n                  size={16}\n                />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth,\n        minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: stylex.props(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ).className,\n      }),\n      [placement, showHandleHighlight],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = styleProps(\n      styles.container,\n      clsx(classNames?.container, className),\n    ).className;\n\n    const contentClassName = styleProps(\n      [styles.contentContainer, !showBorder && styles.contentContainerNoBorder],\n      classNames?.content,\n    ).className;\n\n    const headerClassName = styleProps(styles.header, classNames?.header).className;\n\n    const bodyClassName = styleProps(\n      styles.body,\n      clsx('lobe-draggable-side-nav-body', classNames?.body),\n    ).className;\n\n    const footerClassName = styleProps(styles.footer, classNames?.footer).className;\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}

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 { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
 import { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from "./constants.mjs";
 import { DrawerLayerProvider, useDrawerLayer } from "./DrawerLayerContext.mjs";
@@ -14,7 +15,6 @@ import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { X } from "lucide-react";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Dialog } from "@base-ui/react/dialog";
 import { AnimatePresence } from "motion/react";
 //#region src/Drawer/atoms.tsx

package/es/Drawer/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"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';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\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';\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":[],"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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"}

package/es/DropdownMenu/atoms.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
 import { placementMap } from "../utils/placement.mjs";
@@ -14,7 +15,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Menu } from "@base-ui/react/menu";
 //#region src/DropdownMenu/atoms.tsx
 const DropdownMenuRoot = (props) => /* @__PURE__ */ jsx(Menu.Root, {

package/es/DropdownMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"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';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\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 { 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":"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"}
+{"version":3,"file":"atoms.mjs","names":[],"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":"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"}