@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/DatePicker/usePickerShared.mjs

@@ -0,0 +1,106 @@
+"use client";
+import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
+import Icon from "../Icon/Icon.mjs";
+import Button from "../Button/Button.mjs";
+import { useFloatingLayer } from "../hooks/useFloatingLayer.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { rootVariants } from "../Input/style.mjs";
+import generateConfig from "./generateConfig.mjs";
+import { PREFIX_CLS, ROOT_CLS } from "./style.mjs";
+import { mergePickerSemantic } from "./semantic.mjs";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { CalendarIcon, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Clock, X } from "lucide-react";
+//#region src/DatePicker/usePickerShared.tsx
+const PickerButton = (props) => /* @__PURE__ */ jsx(Button, {
+	size: "small",
+	type: "primary",
+	...props
+});
+const defaultClearIcon = /* @__PURE__ */ jsx(Icon, {
+	icon: X,
+	size: 10,
+	style: { strokeWidth: 3 }
+});
+const withDefault = (node, fallback) => node === void 0 ? fallback : node;
+const usePickerShared = ({ allowClear = true, changeOnBlur, className, clearIcon, classNames, components, defaultOpen, dropdownClassName, generateConfig: generateConfig$1 = generateConfig, getPopupContainer, maxDate, minDate, needConfirm, nextIcon, onKeyDown, onOpenChange, open, picker, popupClassName, popupStyle, prevIcon, rootClassName, semanticProps, shadow, size, status, styles, suffixIcon, superNextIcon, superPrevIcon, variant }) => {
+	const { isDarkMode } = useThemeMode();
+	const floatingLayer = useFloatingLayer();
+	const appElement = useAppElement();
+	const mergedVariant = variant ?? (isDarkMode ? "filled" : "outlined");
+	const [innerOpen, setInnerOpen] = useState(!!defaultOpen);
+	const mergedOpen = open ?? innerOpen;
+	const defaultPopupContainer = useCallback((trigger) => floatingLayer ?? trigger.closest("[role=\"dialog\"]") ?? appElement ?? document.body, [appElement, floatingLayer]);
+	const [semanticClassNames, semanticStyles] = mergePickerSemantic({
+		classNames,
+		popupClassName: popupClassName ?? dropdownClassName,
+		popupStyle,
+		props: {
+			...semanticProps,
+			size: size ?? "medium"
+		},
+		styles
+	});
+	return {
+		allowClear: allowClear && { clearIcon: (typeof allowClear === "object" ? allowClear.clearIcon : void 0) ?? clearIcon ?? defaultClearIcon },
+		classNames: {
+			...semanticClassNames,
+			popup: {
+				...semanticClassNames.popup,
+				root: clsx$1(isDarkMode && `lobe-picker-dropdown-dark`, semanticClassNames.popup.root)
+			}
+		},
+		className: clsx$1(rootVariants({
+			shadow,
+			size: size === "medium" ? "middle" : size,
+			variant: mergedVariant === "underlined" ? "borderless" : mergedVariant
+		}), (size === "small" || size === "large") && `lobe-picker-${size}`, status && `lobe-picker-status-${status}`, `${PREFIX_CLS}-${mergedVariant}`, className),
+		components: {
+			button: PickerButton,
+			...components
+		},
+		defaultOpen,
+		generateConfig: generateConfig$1,
+		getPopupContainer: getPopupContainer ?? defaultPopupContainer,
+		maxDate,
+		minDate,
+		needConfirm: needConfirm ?? (changeOnBlur ? false : void 0),
+		nextIcon: withDefault(nextIcon, /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronRight,
+			size: 16
+		})),
+		onKeyDown: (event, preventDefault) => {
+			if (event.key === "Escape" && mergedOpen) event.stopPropagation();
+			onKeyDown?.(event, preventDefault);
+		},
+		onOpenChange: (next) => {
+			setInnerOpen(next);
+			onOpenChange?.(next);
+		},
+		open,
+		prefixCls: PREFIX_CLS,
+		prevIcon: withDefault(prevIcon, /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronLeft,
+			size: 16
+		})),
+		rootClassName: clsx$1(ROOT_CLS, rootClassName),
+		styles: semanticStyles,
+		suffixIcon: withDefault(suffixIcon, /* @__PURE__ */ jsx(Icon, {
+			icon: picker === "time" ? Clock : CalendarIcon,
+			size: 14
+		})),
+		superNextIcon: withDefault(superNextIcon, /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronsRight,
+			size: 16
+		})),
+		superPrevIcon: withDefault(superPrevIcon, /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronsLeft,
+			size: 16
+		}))
+	};
+};
+//#endregion
+export { usePickerShared, withDefault };
+
+//# sourceMappingURL=usePickerShared.mjs.map

package/es/DatePicker/usePickerShared.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePickerShared.mjs","names":["dayjsGenerateConfig","clsx"],"sources":["../../src/DatePicker/usePickerShared.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  Clock,\n  X,\n} from 'lucide-react';\nimport { type ReactNode, useCallback, useState } from 'react';\n\nimport Button from '@/Button';\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport Icon from '@/Icon';\nimport { rootVariants } from '@/Input/style';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport type { PickerProps as RcPickerProps } from './core';\nimport type { GenerateConfig } from './core/generate';\nimport dayjsGenerateConfig from './generateConfig';\nimport {\n  type FilledPickerClassNames,\n  type FilledPickerStyles,\n  mergePickerSemantic,\n} from './semantic';\nimport { PREFIX_CLS, ROOT_CLS } from './style';\nimport type { DatePickerBaseProps, PickerClassNames, PickerStyles } from './type';\n\ntype SharedInput = Pick<\n  DatePickerBaseProps<any>,\n  | 'allowClear'\n  | 'changeOnBlur'\n  | 'className'\n  | 'clearIcon'\n  | 'components'\n  | 'defaultOpen'\n  | 'getPopupContainer'\n  | 'maxDate'\n  | 'minDate'\n  | 'needConfirm'\n  | 'nextIcon'\n  | 'onKeyDown'\n  | 'onOpenChange'\n  | 'open'\n  | 'picker'\n  | 'prevIcon'\n  | 'rootClassName'\n  | 'dropdownClassName'\n  | 'popupClassName'\n  | 'popupStyle'\n  | 'shadow'\n  | 'size'\n  | 'status'\n  | 'suffixIcon'\n  | 'superNextIcon'\n  | 'superPrevIcon'\n  | 'variant'\n> & {\n  classNames?: PickerClassNames;\n  generateConfig?: GenerateConfig<any>;\n  semanticProps: object;\n  styles?: PickerStyles;\n};\n\ntype SharedOutput = Pick<\n  RcPickerProps<any>,\n  | 'allowClear'\n  | 'className'\n  | 'components'\n  | 'defaultOpen'\n  | 'generateConfig'\n  | 'getPopupContainer'\n  | 'maxDate'\n  | 'minDate'\n  | 'needConfirm'\n  | 'nextIcon'\n  | 'onKeyDown'\n  | 'onOpenChange'\n  | 'open'\n  | 'prefixCls'\n  | 'prevIcon'\n  | 'rootClassName'\n  | 'suffixIcon'\n  | 'superNextIcon'\n  | 'superPrevIcon'\n> & { classNames: FilledPickerClassNames; styles: FilledPickerStyles };\n\nconst PickerButton = (props: {\n  children?: ReactNode;\n  disabled?: boolean;\n  onClick?: () => void;\n}) => <Button size=\"small\" type=\"primary\" {...props} />;\n\nconst defaultClearIcon = <Icon icon={X} size={10} style={{ strokeWidth: 3 }} />;\n\n// `undefined` falls back to the lobe icon; `null` (as in antd) renders nothing.\nexport const withDefault = (node: ReactNode, fallback: ReactNode) =>\n  node === undefined ? fallback : node;\n\n// The popup mounts on the app element / body, except inside a floating layer or dialog, where\n// it nests so picking a date is not an outside press for the host.\nexport const usePickerShared = ({\n  allowClear = true,\n  changeOnBlur,\n  className,\n  clearIcon,\n  classNames,\n  components,\n  defaultOpen,\n  dropdownClassName,\n  generateConfig = dayjsGenerateConfig,\n  getPopupContainer,\n  maxDate,\n  minDate,\n  needConfirm,\n  nextIcon,\n  onKeyDown,\n  onOpenChange,\n  open,\n  picker,\n  popupClassName,\n  popupStyle,\n  prevIcon,\n  rootClassName,\n  semanticProps,\n  shadow,\n  size,\n  status,\n  styles,\n  suffixIcon,\n  superNextIcon,\n  superPrevIcon,\n  variant,\n}: SharedInput): SharedOutput => {\n  const { isDarkMode } = useThemeMode();\n  const floatingLayer = useFloatingLayer();\n  const appElement = useAppElement();\n\n  const mergedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n\n  const [innerOpen, setInnerOpen] = useState(!!defaultOpen);\n  const mergedOpen = open ?? innerOpen;\n  const defaultPopupContainer = useCallback(\n    (trigger: HTMLElement) =>\n      floatingLayer ??\n      trigger.closest<HTMLElement>('[role=\"dialog\"]') ??\n      appElement ??\n      document.body,\n    [appElement, floatingLayer],\n  );\n\n  // As in antd, `info.props` carries the merged size.\n  const [semanticClassNames, semanticStyles] = mergePickerSemantic({\n    classNames,\n    popupClassName: popupClassName ?? dropdownClassName,\n    popupStyle,\n    props: { ...semanticProps, size: size ?? 'medium' },\n    styles,\n  });\n\n  return {\n    allowClear: allowClear && {\n      clearIcon:\n        (typeof allowClear === 'object' ? allowClear.clearIcon : undefined) ??\n        clearIcon ??\n        defaultClearIcon,\n    },\n    classNames: {\n      ...semanticClassNames,\n      popup: {\n        ...semanticClassNames.popup,\n        root: clsx(isDarkMode && `${PREFIX_CLS}-dropdown-dark`, semanticClassNames.popup.root),\n      },\n    },\n    className: clsx(\n      rootVariants({\n        shadow,\n        size: size === 'medium' ? 'middle' : size,\n        variant: mergedVariant === 'underlined' ? 'borderless' : mergedVariant,\n      }),\n      (size === 'small' || size === 'large') && `${PREFIX_CLS}-${size}`,\n      status && `${PREFIX_CLS}-status-${status}`,\n      `${PREFIX_CLS}-${mergedVariant}`,\n      className,\n    ),\n    components: { button: PickerButton, ...components },\n    defaultOpen,\n    generateConfig,\n    getPopupContainer: getPopupContainer ?? defaultPopupContainer,\n    maxDate,\n    minDate,\n    // rc-picker dropped `changeOnBlur`; committing on close is what `needConfirm={false}` does.\n    needConfirm: needConfirm ?? (changeOnBlur ? false : undefined),\n    nextIcon: withDefault(nextIcon, <Icon icon={ChevronRight} size={16} />),\n    // Escape closes only the popup, not a Modal / Popover hosting the picker.\n    onKeyDown: (event, preventDefault) => {\n      if (event.key === 'Escape' && mergedOpen) event.stopPropagation();\n      onKeyDown?.(event, preventDefault);\n    },\n    onOpenChange: (next: boolean) => {\n      setInnerOpen(next);\n      onOpenChange?.(next);\n    },\n    open,\n    prefixCls: PREFIX_CLS,\n    prevIcon: withDefault(prevIcon, <Icon icon={ChevronLeft} size={16} />),\n    rootClassName: clsx(ROOT_CLS, rootClassName),\n    styles: semanticStyles,\n    suffixIcon: withDefault(\n      suffixIcon,\n      <Icon icon={picker === 'time' ? Clock : CalendarIcon} size={14} />,\n    ),\n    superNextIcon: withDefault(superNextIcon, <Icon icon={ChevronsRight} size={16} />),\n    superPrevIcon: withDefault(superPrevIcon, <Icon icon={ChevronsLeft} size={16} />),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;AA2FA,MAAM,gBAAgB,UAIhB,oBAAC,QAAD;CAAQ,MAAK;CAAQ,MAAK;CAAU,GAAI;AAAQ,CAAA;AAEtD,MAAM,mBAAmB,oBAAC,MAAD;CAAM,MAAM;CAAG,MAAM;CAAI,OAAO,EAAE,aAAa,EAAE;AAAI,CAAA;AAG9E,MAAa,eAAe,MAAiB,aAC3C,SAAS,KAAA,IAAY,WAAW;AAIlC,MAAa,mBAAmB,EAC9B,aAAa,MACb,cACA,WACA,WACA,YACA,YACA,aACA,mBACA,gBAAA,mBAAiBA,gBACjB,mBACA,SACA,SACA,aACA,UACA,WACA,cACA,MACA,QACA,gBACA,YACA,UACA,eACA,eACA,QACA,MACA,QACA,QACA,YACA,eACA,eACA,cAC+B;CAC/B,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,aAAa,cAAc;CAEjC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,CAAC,WAAW;CACxD,MAAM,aAAa,QAAQ;CAC3B,MAAM,wBAAwB,aAC3B,YACC,iBACA,QAAQ,QAAqB,mBAAiB,KAC9C,cACA,SAAS,MACX,CAAC,YAAY,aAAa,CAC5B;CAGA,MAAM,CAAC,oBAAoB,kBAAkB,oBAAoB;EAC/D;EACA,gBAAgB,kBAAkB;EAClC;EACA,OAAO;GAAE,GAAG;GAAe,MAAM,QAAQ;EAAS;EAClD;CACF,CAAC;CAED,OAAO;EACL,YAAY,cAAc,EACxB,YACG,OAAO,eAAe,WAAW,WAAW,YAAY,KAAA,MACzD,aACA,iBACJ;EACA,YAAY;GACV,GAAG;GACH,OAAO;IACL,GAAG,mBAAmB;IACtB,MAAMC,OAAK,cAAc,6BAA+B,mBAAmB,MAAM,IAAI;GACvF;EACF;EACA,WAAWA,OACT,aAAa;GACX;GACA,MAAM,SAAS,WAAW,WAAW;GACrC,SAAS,kBAAkB,eAAe,eAAe;EAC3D,CAAC,IACA,SAAS,WAAW,SAAS,YAAY,eAAiB,QAC3D,UAAU,sBAAwB,UAClC,GAAG,WAAW,GAAG,iBACjB,SACF;EACA,YAAY;GAAE,QAAQ;GAAc,GAAG;EAAW;EAClD;EACA,gBAAA;EACA,mBAAmB,qBAAqB;EACxC;EACA;EAEA,aAAa,gBAAgB,eAAe,QAAQ,KAAA;EACpD,UAAU,YAAY,UAAU,oBAAC,MAAD;GAAM,MAAM;GAAc,MAAM;EAAK,CAAA,CAAC;EAEtE,YAAY,OAAO,mBAAmB;GACpC,IAAI,MAAM,QAAQ,YAAY,YAAY,MAAM,gBAAgB;GAChE,YAAY,OAAO,cAAc;EACnC;EACA,eAAe,SAAkB;GAC/B,aAAa,IAAI;GACjB,eAAe,IAAI;EACrB;EACA;EACA,WAAW;EACX,UAAU,YAAY,UAAU,oBAAC,MAAD;GAAM,MAAM;GAAa,MAAM;EAAK,CAAA,CAAC;EACrE,eAAeA,OAAK,UAAU,aAAa;EAC3C,QAAQ;EACR,YAAY,YACV,YACA,oBAAC,MAAD;GAAM,MAAM,WAAW,SAAS,QAAQ;GAAc,MAAM;EAAK,CAAA,CACnE;EACA,eAAe,YAAY,eAAe,oBAAC,MAAD;GAAM,MAAM;GAAe,MAAM;EAAK,CAAA,CAAC;EACjF,eAAe,YAAY,eAAe,oBAAC,MAAD;GAAM,MAAM;GAAc,MAAM;EAAK,CAAA,CAAC;CAClF;AACF"}

package/es/DatePicker/usePresetActive.mjs

@@ -0,0 +1,49 @@
+import { PREFIX_CLS } from "./style.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/DatePicker/usePresetActive.tsx
+const sameDay = (a, b) => {
+	if (!a || !b) return !a && !b;
+	if (typeof a.isSame === "function") return a.isSame(b, "day");
+	if (a instanceof Date && b instanceof Date) return a.toDateString() === b.toDateString();
+	return a === b;
+};
+const sameValue = (a, b) => {
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+		return a.every((item, i) => sameDay(item, b[i]));
+	}
+	return sameDay(a, b);
+};
+const PRESET_ACTIVE_CLS = `${PREFIX_CLS}-preset-active`;
+/**
+* rc-picker renders `presets` as the popup sidebar but has no "current preset" state.
+* Mirror the picked value (controlled or not) and wrap the matching preset's label so the
+* sidebar can show it as selected (`li:has(> .lobe-picker-preset-active)`).
+*/
+const usePresetActive = (presets, value, defaultValue) => {
+	const [inner, setInner] = useState(defaultValue);
+	const current = value !== void 0 ? value : inner;
+	const track = useCallback((next) => setInner(next), []);
+	return {
+		presets: useMemo(() => {
+			if (!presets?.length || !current) return presets;
+			return presets.map((preset) => {
+				const v = typeof preset.value === "function" ? preset.value() : preset.value;
+				if (!sameValue(v, current)) return preset;
+				return {
+					...preset,
+					label: /* @__PURE__ */ jsx("span", {
+						className: PRESET_ACTIVE_CLS,
+						children: preset.label
+					})
+				};
+			});
+		}, [presets, current]),
+		track
+	};
+};
+//#endregion
+export { PRESET_ACTIVE_CLS, usePresetActive };
+
+//# sourceMappingURL=usePresetActive.mjs.map

package/es/DatePicker/usePresetActive.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresetActive.mjs","names":[],"sources":["../../src/DatePicker/usePresetActive.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { PREFIX_CLS } from './style';\n\ninterface Preset {\n  label: ReactNode;\n  value: unknown;\n}\n\nconst sameDay = (a: any, b: any): boolean => {\n  if (!a || !b) return !a && !b;\n  if (typeof a.isSame === 'function') return a.isSame(b, 'day');\n  if (a instanceof Date && b instanceof Date) return a.toDateString() === b.toDateString();\n  return a === b;\n};\n\nconst sameValue = (a: any, b: any): boolean => {\n  if (Array.isArray(a) || Array.isArray(b)) {\n    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;\n    return a.every((item, i) => sameDay(item, b[i]));\n  }\n  return sameDay(a, b);\n};\n\nexport const PRESET_ACTIVE_CLS = `${PREFIX_CLS}-preset-active`;\n\n/**\n * rc-picker renders `presets` as the popup sidebar but has no \"current preset\" state.\n * Mirror the picked value (controlled or not) and wrap the matching preset's label so the\n * sidebar can show it as selected (`li:has(> .lobe-picker-preset-active)`).\n */\nexport const usePresetActive = <P extends Preset>(\n  presets: P[] | undefined,\n  value: unknown,\n  defaultValue: unknown,\n) => {\n  const [inner, setInner] = useState<unknown>(defaultValue);\n  const current = value !== undefined ? value : inner;\n\n  const track = useCallback((next: unknown) => setInner(next), []);\n\n  const mapped = useMemo(() => {\n    if (!presets?.length || !current) return presets;\n    return presets.map((preset) => {\n      const v =\n        typeof preset.value === 'function' ? (preset.value as () => unknown)() : preset.value;\n      if (!sameValue(v, current)) return preset;\n      return { ...preset, label: <span className={PRESET_ACTIVE_CLS}>{preset.label}</span> };\n    });\n  }, [presets, current]);\n\n  return { presets: mapped, track };\n};\n"],"mappings":";;;;AASA,MAAM,WAAW,GAAQ,MAAoB;CAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;CAC5B,IAAI,OAAO,EAAE,WAAW,YAAY,OAAO,EAAE,OAAO,GAAG,KAAK;CAC5D,IAAI,aAAa,QAAQ,aAAa,MAAM,OAAO,EAAE,aAAa,MAAM,EAAE,aAAa;CACvF,OAAO,MAAM;AACf;AAEA,MAAM,aAAa,GAAQ,MAAoB;CAC7C,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GAAG;EACxC,IAAI,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,OAAO;EAC5E,OAAO,EAAE,OAAO,MAAM,MAAM,QAAQ,MAAM,EAAE,EAAE,CAAC;CACjD;CACA,OAAO,QAAQ,GAAG,CAAC;AACrB;AAEA,MAAa,oBAAoB,GAAG,WAAW;;;;;;AAO/C,MAAa,mBACX,SACA,OACA,iBACG;CACH,MAAM,CAAC,OAAO,YAAY,SAAkB,YAAY;CACxD,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAE9C,MAAM,QAAQ,aAAa,SAAkB,SAAS,IAAI,GAAG,CAAC,CAAC;CAY/D,OAAO;EAAE,SAVM,cAAc;GAC3B,IAAI,CAAC,SAAS,UAAU,CAAC,SAAS,OAAO;GACzC,OAAO,QAAQ,KAAK,WAAW;IAC7B,MAAM,IACJ,OAAO,OAAO,UAAU,aAAc,OAAO,MAAwB,IAAI,OAAO;IAClF,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,OAAO;IACnC,OAAO;KAAE,GAAG;KAAQ,OAAO,oBAAC,QAAD;MAAM,WAAW;MAAoB,UAAA,OAAO;KAAY,CAAA;IAAE;GACvF,CAAC;EACH,GAAG,CAAC,SAAS,OAAO,CAEG;EAAG;CAAM;AAClC"}

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";
@@ -12,10 +13,9 @@ import { draggablePanelMarker, draggablePanelToggleMarker } from "./marker.style
 import { SEAM_ARROW, styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 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";
@@ -139,7 +139,7 @@ const DraggablePanelRoot = memo(({ backgroundColor, children, className, collaps
 				styles.root,
 				mode === "float" ? floatStyles[placement] : styles.fixed,
 				draggablePanelMarker
-			], clsx(prefix, className)).className,
+			], clsx$1(prefix, className)).className,
 			style: {
 				"--draggable-panel-bg": backgroundColor || "",
 				"flexDirection": axis.vertical ? "column" : "row",
@@ -171,7 +171,7 @@ const DraggablePanelContent = memo(({ children, className, style, ...rest }) =>
 		},
 		children: /* @__PURE__ */ jsx(Motion.div, {
 			animate: { scale: shrunk ? COLLAPSED_SCALE : 1 },
-			className: styleProps(styles.content, clsx(`${prefix}-content`, className)).className,
+			className: styleProps(styles.content, clsx$1(`${prefix}-content`, className)).className,
 			transition: timing(),
 			style: {
 				transformOrigin: ORIGIN_MAP[placement],
@@ -205,7 +205,7 @@ const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest
 		"data-resizing": state.dragging || void 0,
 		role: "separator",
 		tabIndex: 0,
-		className: styleProps([styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical], clsx(`${prefix}-handle`, className)).className,
+		className: styleProps([styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical], clsx$1(`${prefix}-handle`, className)).className,
 		style: {
 			"--draggable-panel-handle-size": `${size}px`,
 			[EDGE_INSET[axis.edge]]: -size / 2,
@@ -269,7 +269,7 @@ const DraggablePanelToggle = memo(({ className, showHandleWhenCollapsed, style,
 			opacity: expand ? void 0 : showHandleWhenCollapsed ? 1 : 0,
 			...style
 		},
-		className: styleProps([styles.toggleRoot, toggleStyles[placement]], clsx(`${prefix}-toggle`, togglePlacementClass[placement], className)).className,
+		className: styleProps([styles.toggleRoot, toggleStyles[placement]], clsx$1(`${prefix}-toggle`, togglePlacementClass[placement], className)).className,
 		...rest,
 		children: /* @__PURE__ */ jsx("button", {
 			"aria-label": expand ? "Collapse panel" : "Expand 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":["clsx","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":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,SAAS;AACf,MAAM,cAAc;CAClB,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AACA,MAAM,eAAe;CACnB,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AACA,MAAM,uBAAuB;CAC3B,QAAQ,GAAG,OAAO;CAClB,MAAM,GAAG,OAAO;CAChB,OAAO,GAAG,OAAO;CACjB,KAAK,GAAG,OAAO;AACjB;AACA,MAAM,gBAAgB;AACtB,MAAM,aAAa,WAAW,OAAO,WAAW,QAAQ;AACxD,MAAM,UAAU,YAAY;AAC5B,MAAM,oBAAoB;CACxB,MAAM,EACJ,OAAO,GACP,MAAM,GACN,SACE;CACJ,MAAM,IAAI;CACV,MAAM,IAAI;CACV,OAAO;EAAC,IAAI,EAAE,GAAG,IAAI,IAAI;EAAQ,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAAK,IAAI,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAAK,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAAK,IAAI,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAAK,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI;CAAM,CAAC,CAAC,KAAK,GAAG;AAC1P,EAAA,CAAG;AAGH,MAAM,YAAY,WAAsB,YAAqB,cAAc,UAAU,cAAc,QAAQ,IAAI,OAAO,SAAS,IAAI;AACnI,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AACA,MAAM,kBAAkB;AACxB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAkBA,MAAa,qBAAqB,MAA+B,EAC/D,iBACA,UACA,WACA,mBACA,gBAAgB,MAChB,aACA,QACA,aAAa,MACb,KACA,MAAM,GACN,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,MACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,KAAK;CAClB,MAAM,eAAe,KAAK,WAAW,MAAM;CAC3C,MAAM,sBAAsB,eAAe;CAC3C,MAAM,CAAC,UAAU,eAAe,mBAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAK5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAXiB,aAAa,MAAc,UAAkB;GAC9D,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GAAG,CAAC,cAAc,IAAI,CAQG;EACvB;EACA;EACA,MAAM;CACR;CACA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAC3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CACD,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CACf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CACtC,MAAM,UAAU,eAAe;EAC7B;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IAAI;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CAAC;CACxF,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAC/B,UAAA,oBAAC,SAAD;GAAO,eAAa;GAAU,mBAAiB;GAAY,iBAAe,MAAM;GAAU,KAAK;GAAY,WAAW,WAAW;IAAC,OAAO;IAAM,SAAS,UAAU,YAAY,aAAa,OAAO;IAAO;GAAoB,GAAGA,OAAK,QAAQ,SAAS,CAAC,CAAC,CAAC;GAAW,OAAO;IAC7Q,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAAoB,GAAI;GACjB;EACI,CAAA;CACc,CAAA;AAC7B,CAAC;AACD,mBAAmB,cAAc;AAEjC,MAAa,wBAAwB,MAAkC,EACrE,UACA,WACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,mBAAmB;CAClC,MAAM,EACJ,MACA,YACA,QACA,WACA,UACE,yBAAyB;CAC7B,MAAM,SAAS,aAAa,WAAW,OAAO,OAAM,UAAS,KAAK,IAAI,GAAG,KAAK,CAAC;CAG/E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CACpC,OAAO,oBAAC,OAAO,KAAR;EAAY,OAAO,CAAC;EAAQ,OAAO;GACxC,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EACM,UAAA,oBAAC,OAAO,KAAR;GAAY,SAAS,EACvB,OAAO,SAAS,kBAAkB,EACpC;GAAG,WAAW,WAAW,OAAO,SAASA,OAAK,GAAG,OAAO,WAAW,SAAS,CAAC,CAAC,CAAC;GAAW,YAAY,OAAO;GAAG,OAAO;IACrH,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAAkB,GAAI;GACf;EACS,CAAA;CACF,CAAA;AAClB,CAAC;AACD,sBAAsB,cAAc;AAIpC,MAAa,uBAAuB,MAAiC,EACnE,WACA,OACA,WAAW,MACX,GAAG,WACC;CACJ,MAAM,EACJ,MACA,YACA,QACA,YACA,UACE,yBAAyB;CAC7B,MAAM,OAAO,SAAS,cAAc,iBAAiBC,WAAc,QAAQ,CAAC;CAC5E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,sBAAsB,WAAW,KAAK,OAAO,GAAG,CAAC,UAAU,CAAC;CAC5D,MAAM,aAAa,OAGT,IAAI;CACd,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EACJ,KACA,QACE,WAAW,OAAO;CACtB,IAAI,CAAC,QAAQ,OAAO;CACpB,OAAO,oBAAC,OAAD;EAAK,oBAAkB,KAAK;EAAiB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAAW,iBAAe;EAAK,iBAAe;EAAQ,kBAAgB,GAAG,OAAO;EAAU,eAAa;EAAY,iBAAe,MAAM,YAAY,KAAA;EAAW,MAAK;EAAY,UAAU;EAAG,WAAW,WAAW,CAAC,OAAO,QAAQ,KAAK,WAAW,OAAO,mBAAmB,OAAO,cAAc,GAAGD,OAAK,GAAG,OAAO,UAAU,SAAS,CAAC,CAAC,CAAC;EAAW,OAAO;GAC1b,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAAoB,YAAW,UAAS,WAAW,YAAY,KAAK;EAAG,qBAAqB;GAC1F,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EAIA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EAAG,uBAAuB;GACxB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EAAG,gBAAe,UAAS;GACzB,WAAW,UAAU;GACrB,WAAW,UAAU;IACnB,GAAG,MAAM;IACT,GAAG,MAAM;GACX;GAEA,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EAAG,gBAAe,UAAS;GACzB,IAAI,CAAC,WAAW,SAAS;GACzB,MAAM,SAAS;IACb,GAAG,MAAM,UAAU,WAAW,QAAQ;IACtC,GAAG,MAAM,UAAU,WAAW,QAAQ;GACxC;GACA,IAAI,CAAC,YAAY,SAAS;IACxB,IAAI,KAAK,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,eAAe;IACpD,YAAY,UAAU;IACtB,WAAW,UAAU;IACrB,WAAW,KAAK,MAAM;GACxB;GACA,WAAW,KAAK,KAAK,MAAM;EAC7B;EAAG,mBAAmB;GACpB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EAAG,GAAI;CAAO,CAAA;AAChB,CAAC;AACD,qBAAqB,cAAc;AAInC,MAAa,uBAAuB,MAAiC,EACnE,WACA,yBACA,OACA,GAAG,WACC;CACJ,MAAM,EACJ,MACA,QACA,YACA,WACA,YACA,iBACE,yBAAyB;CAC7B,MAAM,aAAa,cAAc,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CACjE,IAAI,CAAC,YAAY,OAAO;CACxB,MAAM,OAAO,SAAS,WAAW,MAAM;CACvC,MAAM,cAAc,UAAU,aAAa,IAAI;CAC/C,OAAO,oBAAC,OAAD;EAAK,OAAO;GACjB,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAC5D,GAAG;EACL;EAAG,WAAW,WAAW,CAAC,OAAO,YAAY,aAAa,UAAU,GAAGA,OAAK,GAAG,OAAO,UAAU,qBAAqB,YAAY,SAAS,CAAC,CAAC,CAAC;EAAW,GAAI;EACtJ,UAAA,oBAAC,UAAD;GAAQ,cAAY,SAAS,mBAAmB;GAAgB,MAAK;GAAS,SAAS;GAAc,GAAI,OAAO,MAAM,OAAO,cAAc,KAAK,YAAY,OAAO,wBAAwB,0BAA0B;GACnN,UAAA,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,SAAS;IAAG,MAAK;IAAO,QAAQ;IAAW,OAAO,EACjF,eAAe,KACjB;IAAoB,SAAS,OAAO,UAAU,GAAG;IAAa,OAAO;IAFjE,UAAA,CAGE,oBAAC,QAAD,EAAA,UACE,qBAAC,kBAAD;KAAgB,eAAc;KAAiB,IAAI;KAAY,IAAI;KAAS,IAAI;KAAS,IAAI;KAAG,IAAI;KAApG,UAAA;MACE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;OAAa,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;MAChG,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAK,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;MACxE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAK,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;MACxE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;OAAa,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;KAClF;IACZ,CAAA,EAAA,CAAA,GACN,oBAAC,KAAD;KAAG,WAAW,KAAK,WAAW,aAAa,QAAQ,GAAG,QAAQ,KAAK,KAAA;KACjE,UAAA,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAM,OAAO,UAAU;MAAG,GAAG;MAAY,QAAQ,QAAQ,WAAW;MAAI,eAAc;MAAQ,gBAAe;MAAQ,aAAa,WAAW;KAAS,CAAA;IACtK,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AACX,CAAC;AACD,qBAAqB,cAAc;AAEnC,MAAa,0BAA0B,MAAoC,EACzE,WACA,GAAG,WACC,oBAAC,OAAD;CAAK,WAAW,WAAW,OAAO,WAAW,SAAS,CAAC,CAAC;CAAW,GAAI;AAAO,CAAA,CAAC;AACrF,wBAAwB,cAAc;AAEtC,MAAa,qBAAqB,MAA+B,EAC/D,WACA,OACA,GAAG,WACC,oBAAC,OAAD;CAAK,GAAI,WAAW,OAAO,MAAM,WAAW;EAChD,MAAM;EACN,GAAG;CACL,CAAC;CAAG,GAAI;AAAO,CAAA,CAAC;AAChB,mBAAmB,cAAc;AAEjC,MAAa,uBAAuB,MAAiC,EACnE,WACA,GAAG,WACC,oBAAC,OAAD;CAAK,WAAW,WAAW,OAAO,QAAQ,SAAS,CAAC,CAAC;CAAW,GAAI;AAAO,CAAA,CAAC;AAClF,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MAAiC,EACnE,WACA,OACA,YACA,OACA,GAAG,WACC;CACJ,MAAM,EACJ,iBACE,yBAAyB;CAC7B,OAAO,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,QAAQ,SAAS,CAAC,CAAC;EAAW,GAAI;EAApE,UAAA;GACD,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AACX,CAAC;AACD,qBAAqB,cAAc"}

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 clsx$1 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;
@@ -347,10 +347,10 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 		state.isResizing,
 		state.isAnimating
 	]);
-	const containerClassName = styleProps(styles.container, clsx(classNames?.container, className)).className;
+	const containerClassName = styleProps(styles.container, clsx$1(classNames?.container, className)).className;
 	const contentClassName = styleProps([styles.contentContainer, !showBorder && styles.contentContainerNoBorder], classNames?.content).className;
 	const headerClassName = styleProps(styles.header, classNames?.header).className;
-	const bodyClassName = styleProps(styles.body, clsx("lobe-draggable-side-nav-body", classNames?.body)).className;
+	const bodyClassName = styleProps(styles.body, clsx$1("lobe-draggable-side-nav-body", classNames?.body)).className;
 	const footerClassName = styleProps(styles.footer, classNames?.footer).className;
 	useEffect(() => {
 		return () => {

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":"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"}
+{"version":3,"file":"DraggableSideNav.mjs","names":["clsx","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/Drawer.mjs

@@ -7,7 +7,7 @@ import { DrawerBackdrop, DrawerContentImpl, DrawerFooter, DrawerHeader, DrawerPo
 import { DrawerPushProvider, useDrawerPush } from "./DrawerPushContext.mjs";
 import { memo, useCallback, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { X } from "lucide-react";
 //#region src/Drawer/Drawer.tsx
 const resolvePushDistance = (push) => {
@@ -91,7 +91,7 @@ const Drawer = memo(({ open, placement = "right", width, height, mask = true, ma
 				flush: isFlush,
 				height: resolvedHeight,
 				motionProps: { onAnimationComplete: handleAnimationComplete },
-				panelClassName: clsx(className, classNames?.panel),
+				panelClassName: clsx$1(className, classNames?.panel),
 				panelStyle: {
 					...style,
 					...semanticStyles?.panel

package/es/Drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","names":[],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { CSSProperties } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  DrawerBackdrop,\n  DrawerContentImpl,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPopupImpl,\n  DrawerPortal,\n  DrawerRoot,\n  type DrawerRootProps,\n  DrawerTitle,\n} from './atoms';\nimport {\n  DEFAULT_CONTAINER_MAX_WIDTH,\n  DEFAULT_DRAWER_HEIGHT,\n  DEFAULT_DRAWER_WIDTH,\n  DEFAULT_PUSH_DISTANCE,\n  DEFAULT_SIDEBAR_WIDTH,\n} from './constants';\nimport { DrawerPushProvider, useDrawerPush } from './DrawerPushContext';\nimport { styles } from './style';\nimport type { DrawerProps, DrawerPush } from './type';\n\nconst resolvePushDistance = (push: DrawerPush) => {\n  if (push === false) return 0;\n  if (push === true) return DEFAULT_PUSH_DISTANCE;\n  return push.distance ?? DEFAULT_PUSH_DISTANCE;\n};\n\nconst FULL_SIZES = new Set(['100%', '100dvh', '100dvw', '100vh', '100vw']);\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    open,\n    placement = 'right',\n    width,\n    height,\n    mask = true,\n    maskClosable = true,\n    keyboard = true,\n    closable = true,\n    closeIcon,\n    extra,\n    title,\n    footer,\n    noHeader,\n    sidebar,\n    sidebarWidth = DEFAULT_SIDEBAR_WIDTH,\n    containerMaxWidth = DEFAULT_CONTAINER_MAX_WIDTH,\n    push = true,\n    zIndex,\n    getContainer,\n    className,\n    classNames,\n    style,\n    styles: semanticStyles,\n    afterOpenChange,\n    onClose,\n    children,\n  }) => {\n    const isOpen = open ?? false;\n    const { childValue, pushed } = useDrawerPush(isOpen);\n    const pushOffset = pushed ? resolvePushDistance(push) : 0;\n\n    const handleOpenChange = useCallback<NonNullable<DrawerRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (nextOpen || !isOpen) return;\n        if (!keyboard && eventDetails.reason === 'escape-key') return;\n        if (!maskClosable && eventDetails.reason === 'outside-press') return;\n        onClose?.();\n      },\n      [isOpen, keyboard, maskClosable, onClose],\n    );\n\n    const handleExitComplete = useCallback(() => afterOpenChange?.(false), [afterOpenChange]);\n    const handleAnimationComplete = useCallback(() => {\n      if (isOpen) afterOpenChange?.(true);\n    }, [isOpen, afterOpenChange]);\n\n    const isHorizontal = placement === 'left' || placement === 'right';\n    const resolvedWidth = isHorizontal ? (width ?? DEFAULT_DRAWER_WIDTH) : width;\n    const resolvedHeight = isHorizontal ? height : (height ?? DEFAULT_DRAWER_HEIGHT);\n\n    const isFlush = FULL_SIZES.has(String(isHorizontal ? resolvedWidth : resolvedHeight));\n    const surfaceWeight = (() => {\n      if (isFlush) return undefined;\n      if (pushed) return styles.panelRecessed;\n      return mask ? undefined : styles.panelBoosted;\n    })();\n\n    const showTitle = title !== undefined && title !== null;\n    const showHeader = !noHeader && (showTitle || closable || !!extra);\n    const hasSidebar = !!sidebar;\n\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({ maxWidth: containerMaxWidth }),\n      [containerMaxWidth],\n    );\n\n    const closeNode = closable && (\n      <button\n        aria-label=\"Close\"\n        {...styleProps([styles.close, focusRing.info], classNames?.close, semanticStyles?.close)}\n        type=\"button\"\n        onClick={onClose}\n      >\n        {closeIcon ?? <X size={16} />}\n      </button>\n    );\n\n    const extraNode = (extra || closeNode) && (\n      <div\n        {...styleProps(\n          [styles.extra, !showHeader && styles.extraFloating],\n          classNames?.extra,\n          semanticStyles?.extra,\n        )}\n      >\n        {extra}\n        {closeNode}\n      </div>\n    );\n\n    const bodyNode = hasSidebar ? (\n      <>\n        <div\n          {...styleProps(styles.sidebar, classNames?.sidebar, {\n            width: sidebarWidth,\n            ...semanticStyles?.sidebar,\n          })}\n        >\n          {sidebar}\n        </div>\n        <div\n          {...styleProps(\n            styles.sidebarContent,\n            classNames?.sidebarContent,\n            semanticStyles?.sidebarContent,\n          )}\n        >\n          {children}\n        </div>\n      </>\n    ) : (\n      children\n    );\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    return (\n      <DrawerRoot\n        modal={mask}\n        open={isOpen}\n        zIndex={zIndex}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <DrawerPortal container={container}>\n          {mask && (\n            <DrawerBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <DrawerPopupImpl\n            className={classNames?.popup}\n            flush={isFlush}\n            height={resolvedHeight}\n            motionProps={{ onAnimationComplete: handleAnimationComplete }}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelStyle={{ ...style, ...semanticStyles?.panel }}\n            panelXstyle={surfaceWeight}\n            placement={placement}\n            popupStyle={semanticStyles?.popup}\n            pushOffset={pushOffset}\n            width={resolvedWidth}\n          >\n            <DrawerPushProvider value={childValue}>\n              {showHeader ? (\n                <DrawerHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <div {...styleProps(styles.containerInner, undefined, containerStyle)}>\n                    {showTitle ? (\n                      <DrawerTitle className={classNames?.title} style={semanticStyles?.title}>\n                        {title}\n                      </DrawerTitle>\n                    ) : (\n                      <span />\n                    )}\n                    {extraNode}\n                  </div>\n                </DrawerHeader>\n              ) : (\n                extraNode\n              )}\n              <DrawerContentImpl\n                className={classNames?.content}\n                style={semanticStyles?.content}\n                xstyle={hasSidebar && styles.contentSidebar}\n              >\n                <div\n                  {...styleProps(\n                    [styles.bodyContent, hasSidebar && styles.bodyContentSidebar],\n                    classNames?.bodyContent,\n                    { ...containerStyle, ...semanticStyles?.bodyContent },\n                  )}\n                >\n                  {bodyNode}\n                </div>\n              </DrawerContentImpl>\n              {footer && (\n                <DrawerFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                  <div\n                    {...styleProps(\n                      [styles.containerInner, styles.containerInnerFooter],\n                      undefined,\n                      containerStyle,\n                    )}\n                  >\n                    {footer}\n                  </div>\n                </DrawerFooter>\n              )}\n            </DrawerPushProvider>\n          </DrawerPopupImpl>\n        </DrawerPortal>\n      </DrawerRoot>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.mjs","names":["clsx"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { CSSProperties } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  DrawerBackdrop,\n  DrawerContentImpl,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPopupImpl,\n  DrawerPortal,\n  DrawerRoot,\n  type DrawerRootProps,\n  DrawerTitle,\n} from './atoms';\nimport {\n  DEFAULT_CONTAINER_MAX_WIDTH,\n  DEFAULT_DRAWER_HEIGHT,\n  DEFAULT_DRAWER_WIDTH,\n  DEFAULT_PUSH_DISTANCE,\n  DEFAULT_SIDEBAR_WIDTH,\n} from './constants';\nimport { DrawerPushProvider, useDrawerPush } from './DrawerPushContext';\nimport { styles } from './style';\nimport type { DrawerProps, DrawerPush } from './type';\n\nconst resolvePushDistance = (push: DrawerPush) => {\n  if (push === false) return 0;\n  if (push === true) return DEFAULT_PUSH_DISTANCE;\n  return push.distance ?? DEFAULT_PUSH_DISTANCE;\n};\n\nconst FULL_SIZES = new Set(['100%', '100dvh', '100dvw', '100vh', '100vw']);\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    open,\n    placement = 'right',\n    width,\n    height,\n    mask = true,\n    maskClosable = true,\n    keyboard = true,\n    closable = true,\n    closeIcon,\n    extra,\n    title,\n    footer,\n    noHeader,\n    sidebar,\n    sidebarWidth = DEFAULT_SIDEBAR_WIDTH,\n    containerMaxWidth = DEFAULT_CONTAINER_MAX_WIDTH,\n    push = true,\n    zIndex,\n    getContainer,\n    className,\n    classNames,\n    style,\n    styles: semanticStyles,\n    afterOpenChange,\n    onClose,\n    children,\n  }) => {\n    const isOpen = open ?? false;\n    const { childValue, pushed } = useDrawerPush(isOpen);\n    const pushOffset = pushed ? resolvePushDistance(push) : 0;\n\n    const handleOpenChange = useCallback<NonNullable<DrawerRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (nextOpen || !isOpen) return;\n        if (!keyboard && eventDetails.reason === 'escape-key') return;\n        if (!maskClosable && eventDetails.reason === 'outside-press') return;\n        onClose?.();\n      },\n      [isOpen, keyboard, maskClosable, onClose],\n    );\n\n    const handleExitComplete = useCallback(() => afterOpenChange?.(false), [afterOpenChange]);\n    const handleAnimationComplete = useCallback(() => {\n      if (isOpen) afterOpenChange?.(true);\n    }, [isOpen, afterOpenChange]);\n\n    const isHorizontal = placement === 'left' || placement === 'right';\n    const resolvedWidth = isHorizontal ? (width ?? DEFAULT_DRAWER_WIDTH) : width;\n    const resolvedHeight = isHorizontal ? height : (height ?? DEFAULT_DRAWER_HEIGHT);\n\n    const isFlush = FULL_SIZES.has(String(isHorizontal ? resolvedWidth : resolvedHeight));\n    const surfaceWeight = (() => {\n      if (isFlush) return undefined;\n      if (pushed) return styles.panelRecessed;\n      return mask ? undefined : styles.panelBoosted;\n    })();\n\n    const showTitle = title !== undefined && title !== null;\n    const showHeader = !noHeader && (showTitle || closable || !!extra);\n    const hasSidebar = !!sidebar;\n\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({ maxWidth: containerMaxWidth }),\n      [containerMaxWidth],\n    );\n\n    const closeNode = closable && (\n      <button\n        aria-label=\"Close\"\n        {...styleProps([styles.close, focusRing.info], classNames?.close, semanticStyles?.close)}\n        type=\"button\"\n        onClick={onClose}\n      >\n        {closeIcon ?? <X size={16} />}\n      </button>\n    );\n\n    const extraNode = (extra || closeNode) && (\n      <div\n        {...styleProps(\n          [styles.extra, !showHeader && styles.extraFloating],\n          classNames?.extra,\n          semanticStyles?.extra,\n        )}\n      >\n        {extra}\n        {closeNode}\n      </div>\n    );\n\n    const bodyNode = hasSidebar ? (\n      <>\n        <div\n          {...styleProps(styles.sidebar, classNames?.sidebar, {\n            width: sidebarWidth,\n            ...semanticStyles?.sidebar,\n          })}\n        >\n          {sidebar}\n        </div>\n        <div\n          {...styleProps(\n            styles.sidebarContent,\n            classNames?.sidebarContent,\n            semanticStyles?.sidebarContent,\n          )}\n        >\n          {children}\n        </div>\n      </>\n    ) : (\n      children\n    );\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    return (\n      <DrawerRoot\n        modal={mask}\n        open={isOpen}\n        zIndex={zIndex}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <DrawerPortal container={container}>\n          {mask && (\n            <DrawerBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <DrawerPopupImpl\n            className={classNames?.popup}\n            flush={isFlush}\n            height={resolvedHeight}\n            motionProps={{ onAnimationComplete: handleAnimationComplete }}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelStyle={{ ...style, ...semanticStyles?.panel }}\n            panelXstyle={surfaceWeight}\n            placement={placement}\n            popupStyle={semanticStyles?.popup}\n            pushOffset={pushOffset}\n            width={resolvedWidth}\n          >\n            <DrawerPushProvider value={childValue}>\n              {showHeader ? (\n                <DrawerHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <div {...styleProps(styles.containerInner, undefined, containerStyle)}>\n                    {showTitle ? (\n                      <DrawerTitle className={classNames?.title} style={semanticStyles?.title}>\n                        {title}\n                      </DrawerTitle>\n                    ) : (\n                      <span />\n                    )}\n                    {extraNode}\n                  </div>\n                </DrawerHeader>\n              ) : (\n                extraNode\n              )}\n              <DrawerContentImpl\n                className={classNames?.content}\n                style={semanticStyles?.content}\n                xstyle={hasSidebar && styles.contentSidebar}\n              >\n                <div\n                  {...styleProps(\n                    [styles.bodyContent, hasSidebar && styles.bodyContentSidebar],\n                    classNames?.bodyContent,\n                    { ...containerStyle, ...semanticStyles?.bodyContent },\n                  )}\n                >\n                  {bodyNode}\n                </div>\n              </DrawerContentImpl>\n              {footer && (\n                <DrawerFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                  <div\n                    {...styleProps(\n                      [styles.containerInner, styles.containerInnerFooter],\n                      undefined,\n                      containerStyle,\n                    )}\n                  >\n                    {footer}\n                  </div>\n                </DrawerFooter>\n              )}\n            </DrawerPushProvider>\n          </DrawerPopupImpl>\n        </DrawerPortal>\n      </DrawerRoot>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/es/Drawer/atoms.d.mts

@@ -55,4 +55,5 @@ export type DrawerTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.
 };
 export declare const DrawerTrigger: ({ children, className, nativeButton, ref: refProp, ...rest }: DrawerTriggerProps) => React.JSX.Element;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map