@lobehub/ui 5.24.0 → 5.25.0

package/es/base-ui/Drawer/Drawer.mjs

@@ -0,0 +1,152 @@
+"use client";
+import { DEFAULT_CONTAINER_MAX_WIDTH } from "./constants.mjs";
+import { styles } from "./style.mjs";
+import { DrawerBackdrop, DrawerContent, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle } from "./atoms.mjs";
+import { DrawerPushProvider, useDrawerPush } from "./DrawerPushContext.mjs";
+import { memo, useCallback, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/Drawer/Drawer.tsx
+const resolvePushDistance = (push) => {
+	if (push === false) return 0;
+	if (push === true) return 180;
+	return push.distance ?? 180;
+};
+const FULL_SIZES = /* @__PURE__ */ new Set([
+	"100%",
+	"100dvh",
+	"100dvw",
+	"100vh",
+	"100vw"
+]);
+const Drawer = memo(({ open, placement = "right", width, height, mask = true, maskClosable = true, keyboard = true, closable = true, closeIcon, extra, title, footer, noHeader, sidebar, sidebarWidth = 280, containerMaxWidth = DEFAULT_CONTAINER_MAX_WIDTH, push = true, zIndex, getContainer, className, classNames, style, styles: semanticStyles, afterOpenChange, onClose, children }) => {
+	const isOpen = open ?? false;
+	const { childValue, pushed } = useDrawerPush(isOpen);
+	const pushOffset = pushed ? resolvePushDistance(push) : 0;
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (nextOpen || !isOpen) return;
+		if (!keyboard && eventDetails.reason === "escape-key") return;
+		if (!maskClosable && eventDetails.reason === "outside-press") return;
+		onClose?.();
+	}, [
+		isOpen,
+		keyboard,
+		maskClosable,
+		onClose
+	]);
+	const handleExitComplete = useCallback(() => afterOpenChange?.(false), [afterOpenChange]);
+	const handleAnimationComplete = useCallback(() => {
+		if (isOpen) afterOpenChange?.(true);
+	}, [isOpen, afterOpenChange]);
+	const isHorizontal = placement === "left" || placement === "right";
+	const resolvedWidth = isHorizontal ? width ?? 378 : width;
+	const resolvedHeight = isHorizontal ? height : height ?? 378;
+	const isFlush = FULL_SIZES.has(String(isHorizontal ? resolvedWidth : resolvedHeight));
+	const surfaceWeightClass = (() => {
+		if (isFlush) return void 0;
+		if (pushed) return styles.panelRecessed;
+		return mask ? void 0 : styles.panelBoosted;
+	})();
+	const showTitle = title !== void 0 && title !== null;
+	const showHeader = !noHeader && (showTitle || closable || !!extra);
+	const hasSidebar = !!sidebar;
+	const containerStyle = useMemo(() => ({ maxWidth: containerMaxWidth }), [containerMaxWidth]);
+	const closeNode = closable && /* @__PURE__ */ jsx("button", {
+		"aria-label": "Close",
+		className: cx(styles.close, classNames?.close),
+		style: semanticStyles?.close,
+		type: "button",
+		onClick: onClose,
+		children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 16 })
+	});
+	const extraNode = (extra || closeNode) && /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.extra, !showHeader && styles.extraFloating, classNames?.extra),
+		style: semanticStyles?.extra,
+		children: [extra, closeNode]
+	});
+	const bodyNode = hasSidebar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: cx(styles.sidebar, classNames?.sidebar),
+		style: {
+			width: sidebarWidth,
+			...semanticStyles?.sidebar
+		},
+		children: sidebar
+	}), /* @__PURE__ */ jsx("div", {
+		className: cx(styles.sidebarContent, classNames?.sidebarContent),
+		style: semanticStyles?.sidebarContent,
+		children
+	})] }) : children;
+	return /* @__PURE__ */ jsx(DrawerRoot, {
+		modal: mask,
+		open: isOpen,
+		zIndex,
+		onExitComplete: handleExitComplete,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(DrawerPortal, {
+			container: getContainer === false ? void 0 : getContainer ?? void 0,
+			children: [mask && /* @__PURE__ */ jsx(DrawerBackdrop, {
+				className: classNames?.backdrop,
+				style: semanticStyles?.backdrop
+			}), /* @__PURE__ */ jsx(DrawerPopup, {
+				className: classNames?.popup,
+				flush: isFlush,
+				height: resolvedHeight,
+				motionProps: { onAnimationComplete: handleAnimationComplete },
+				panelClassName: cx(surfaceWeightClass, className, classNames?.panel),
+				panelStyle: {
+					...style,
+					...semanticStyles?.panel
+				},
+				placement,
+				popupStyle: semanticStyles?.popup,
+				pushOffset,
+				width: resolvedWidth,
+				children: /* @__PURE__ */ jsxs(DrawerPushProvider, {
+					value: childValue,
+					children: [
+						showHeader ? /* @__PURE__ */ jsx(DrawerHeader, {
+							className: classNames?.header,
+							style: semanticStyles?.header,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: styles.containerInner,
+								style: containerStyle,
+								children: [showTitle ? /* @__PURE__ */ jsx(DrawerTitle, {
+									className: classNames?.title,
+									style: semanticStyles?.title,
+									children: title
+								}) : /* @__PURE__ */ jsx("span", {}), extraNode]
+							})
+						}) : extraNode,
+						/* @__PURE__ */ jsx(DrawerContent, {
+							className: cx(hasSidebar && styles.contentSidebar, classNames?.content),
+							style: semanticStyles?.content,
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									...containerStyle,
+									...semanticStyles?.bodyContent
+								},
+								className: cx(styles.bodyContent, hasSidebar && styles.bodyContentSidebar, classNames?.bodyContent),
+								children: bodyNode
+							})
+						}),
+						footer && /* @__PURE__ */ jsx(DrawerFooter, {
+							className: classNames?.footer,
+							style: semanticStyles?.footer,
+							children: /* @__PURE__ */ jsx("div", {
+								className: cx(styles.containerInner, styles.containerInnerFooter),
+								style: containerStyle,
+								children: footer
+							})
+						})
+					]
+				})
+			})]
+		})
+	});
+});
+Drawer.displayName = "Drawer";
+//#endregion
+export { Drawer as default };
+
+//# sourceMappingURL=Drawer.mjs.map

package/es/base-ui/Drawer/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.mjs","names":[],"sources":["../../../src/base-ui/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport type { CSSProperties } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport {\n  DrawerBackdrop,\n  DrawerContent,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPopup,\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 surfaceWeightClass = (() => {\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        className={cx(styles.close, classNames?.close)}\n        style={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        className={cx(styles.extra, !showHeader && styles.extraFloating, classNames?.extra)}\n        style={semanticStyles?.extra}\n      >\n        {extra}\n        {closeNode}\n      </div>\n    );\n\n    const bodyNode = hasSidebar ? (\n      <>\n        <div\n          className={cx(styles.sidebar, classNames?.sidebar)}\n          style={{ width: sidebarWidth, ...semanticStyles?.sidebar }}\n        >\n          {sidebar}\n        </div>\n        <div\n          className={cx(styles.sidebarContent, classNames?.sidebarContent)}\n          style={semanticStyles?.sidebarContent}\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          <DrawerPopup\n            className={classNames?.popup}\n            flush={isFlush}\n            height={resolvedHeight}\n            motionProps={{ onAnimationComplete: handleAnimationComplete }}\n            panelClassName={cx(surfaceWeightClass, className, classNames?.panel)}\n            panelStyle={{ ...style, ...semanticStyles?.panel }}\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 className={styles.containerInner} style={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              <DrawerContent\n                className={cx(hasSidebar && styles.contentSidebar, classNames?.content)}\n                style={semanticStyles?.content}\n              >\n                <div\n                  style={{ ...containerStyle, ...semanticStyles?.bodyContent }}\n                  className={cx(\n                    styles.bodyContent,\n                    hasSidebar && styles.bodyContentSidebar,\n                    classNames?.bodyContent,\n                  )}\n                >\n                  {bodyNode}\n                </div>\n              </DrawerContent>\n              {footer && (\n                <DrawerFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                  <div\n                    className={cx(styles.containerInner, styles.containerInnerFooter)}\n                    style={containerStyle}\n                  >\n                    {footer}\n                  </div>\n                </DrawerFooter>\n              )}\n            </DrawerPushProvider>\n          </DrawerPopup>\n        </DrawerPortal>\n      </DrawerRoot>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/es/base-ui/Drawer/DrawerLayerContext.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/Drawer/DrawerLayerContext.tsx
+const DrawerLayerContext = createContext(null);
+const useDrawerLayer = () => use(DrawerLayerContext);
+const DrawerLayerProvider = DrawerLayerContext.Provider;
+//#endregion
+export { DrawerLayerProvider, useDrawerLayer };
+
+//# sourceMappingURL=DrawerLayerContext.mjs.map

package/es/base-ui/Drawer/DrawerLayerContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerLayerContext.mjs","names":[],"sources":["../../../src/base-ui/Drawer/DrawerLayerContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nexport interface DrawerLayer {\n  popupRef: (node: HTMLElement | null) => void;\n  zIndex: number | undefined;\n}\n\nconst DrawerLayerContext = createContext<DrawerLayer | null>(null);\n\nexport const useDrawerLayer = () => use(DrawerLayerContext);\nexport const DrawerLayerProvider = DrawerLayerContext.Provider;\n"],"mappings":";;;AASA,MAAM,qBAAqB,cAAkC,IAAI;AAEjE,MAAa,uBAAuB,IAAI,kBAAkB;AAC1D,MAAa,sBAAsB,mBAAmB"}

package/es/base-ui/Drawer/DrawerPushContext.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
+//#region src/base-ui/Drawer/DrawerPushContext.tsx
+const DrawerPushContext = createContext(null);
+const DrawerPushProvider = DrawerPushContext.Provider;
+const useDrawerPush = (open) => {
+	const parent = use(DrawerPushContext);
+	const [pushedCount, setPushedCount] = useState(0);
+	const push = useCallback(() => setPushedCount((count) => count + 1), []);
+	const pull = useCallback(() => setPushedCount((count) => Math.max(0, count - 1)), []);
+	useEffect(() => {
+		if (!open || !parent) return;
+		parent.push();
+		return () => parent.pull();
+	}, [open, parent]);
+	return {
+		childValue: useMemo(() => ({
+			pull,
+			push
+		}), [pull, push]),
+		pushed: pushedCount > 0
+	};
+};
+//#endregion
+export { DrawerPushProvider, useDrawerPush };
+
+//# sourceMappingURL=DrawerPushContext.mjs.map

package/es/base-ui/Drawer/DrawerPushContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerPushContext.mjs","names":[],"sources":["../../../src/base-ui/Drawer/DrawerPushContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\n\nexport interface DrawerPushParent {\n  pull: () => void;\n  push: () => void;\n}\n\nconst DrawerPushContext = createContext<DrawerPushParent | null>(null);\n\nexport const DrawerPushProvider = DrawerPushContext.Provider;\n\nexport const useDrawerPush = (open: boolean) => {\n  const parent = use(DrawerPushContext);\n  const [pushedCount, setPushedCount] = useState(0);\n\n  const push = useCallback(() => setPushedCount((count) => count + 1), []);\n  const pull = useCallback(() => setPushedCount((count) => Math.max(0, count - 1)), []);\n\n  useEffect(() => {\n    if (!open || !parent) return;\n    parent.push();\n    return () => parent.pull();\n  }, [open, parent]);\n\n  const childValue = useMemo<DrawerPushParent>(() => ({ pull, push }), [pull, push]);\n\n  return { childValue, pushed: pushedCount > 0 };\n};\n"],"mappings":";;;AASA,MAAM,oBAAoB,cAAuC,IAAI;AAErE,MAAa,qBAAqB,kBAAkB;AAEpD,MAAa,iBAAiB,SAAkB;CAC9C,MAAM,SAAS,IAAI,iBAAiB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAEhD,MAAM,OAAO,kBAAkB,gBAAgB,UAAU,QAAQ,CAAC,GAAG,CAAC,CAAC;CACvE,MAAM,OAAO,kBAAkB,gBAAgB,UAAU,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;CAEpF,gBAAgB;EACd,IAAI,CAAC,QAAQ,CAAC,QAAQ;EACtB,OAAO,KAAK;EACZ,aAAa,OAAO,KAAK;CAC3B,GAAG,CAAC,MAAM,MAAM,CAAC;CAIjB,OAAO;EAAE,YAFU,eAAiC;GAAE;GAAM;EAAK,IAAI,CAAC,MAAM,IAAI,CAE9D;EAAG,QAAQ,cAAc;CAAE;AAC/C"}

package/es/base-ui/Drawer/atoms.d.mts

@@ -0,0 +1,58 @@
+import { DrawerPlacement } from "./type.mjs";
+import React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/base-ui/Drawer/atoms.d.ts
+interface DrawerAnimationActions {
+  onExitComplete: () => void;
+}
+declare const useDrawerOpen: () => boolean | null;
+declare const useDrawerActions: () => DrawerAnimationActions | null;
+type DrawerRootProps = Dialog.Root.Props & {
+  onExitComplete?: () => void;
+  zIndex?: number;
+};
+declare const DrawerRoot: ({ open, onExitComplete, ...rest }: DrawerRootProps) => React.JSX.Element;
+type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal> & {
+  container?: HTMLElement | null;
+};
+declare const DrawerPortal: ({ container, ...rest }: DrawerPortalProps) => React.JSX.Element;
+type DrawerBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;
+declare const DrawerBackdrop: ({ className, style, ...rest }: DrawerBackdropProps) => React.JSX.Element;
+type DrawerPopupProps = React.ComponentProps<typeof Dialog.Popup> & {
+  flush?: boolean;
+  height?: number | string;
+  motionProps?: Record<string, any>;
+  panelClassName?: string;
+  panelStyle?: React.CSSProperties;
+  placement?: DrawerPlacement;
+  popupStyle?: React.CSSProperties;
+  pushOffset?: number;
+  width?: number | string;
+};
+declare const DrawerPopup: ({ className, children, placement: placementProp, width: widthProp, height: heightProp, flush, pushOffset, motionProps, panelClassName, panelStyle, popupStyle, ref: forwardedRef, ...rest }: DrawerPopupProps) => React.JSX.Element;
+type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const DrawerHeader: ({ className, ...rest }: DrawerHeaderProps) => React.JSX.Element;
+type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;
+declare const DrawerTitle: ({ className, ...rest }: DrawerTitleProps) => React.JSX.Element;
+type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;
+declare const DrawerDescription: React.FC<DrawerDescriptionProps>;
+type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const DrawerContent: ({ className, ...rest }: DrawerContentProps) => React.JSX.Element;
+type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+declare const DrawerFooter: ({ className, ...rest }: DrawerFooterProps) => React.JSX.Element;
+type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
+declare const DrawerClose: ({ className, children, ...rest }: DrawerCloseProps) => React.JSX.Element;
+type DrawerTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.Trigger>, 'children' | 'render'> & {
+  children?: React.ReactNode;
+  nativeButton?: boolean;
+};
+declare const DrawerTrigger: ({ children, className, nativeButton, ref: refProp, ...rest }: DrawerTriggerProps) => React.JSX.Element;
+//#endregion
+export { DrawerBackdrop, DrawerBackdropProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerPopup, DrawerPopupProps, DrawerPortal, DrawerPortalProps, DrawerRoot, DrawerRootProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, useDrawerActions, useDrawerOpen };
+//# sourceMappingURL=atoms.d.mts.map

package/es/base-ui/Drawer/atoms.mjs

@@ -0,0 +1,262 @@
+"use client";
+import { useMotionComponent } from "../../MotionProvider/index.mjs";
+import { useNativeButton } from "../../hooks/useNativeButton.mjs";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
+import { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from "./constants.mjs";
+import { DrawerLayerProvider, useDrawerLayer } from "./DrawerLayerContext.mjs";
+import { styles } from "./style.mjs";
+import { cloneElement, createContext, createElement, isValidElement, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { AnimatePresence } from "motion/react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { mergeRefs, useMergeRefs } from "react-merge-refs";
+import { X } from "lucide-react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/base-ui/Drawer/atoms.tsx
+const mergeStateClassName = (base, className) => {
+	if (typeof className === "function") return (state) => cx(base, className(state));
+	return cx(base, className);
+};
+const popupPlacementClass = {
+	bottom: styles.popupBottom,
+	left: styles.popupLeft,
+	right: styles.popupRight,
+	top: styles.popupTop
+};
+const panelPlacementClass = {
+	bottom: styles.panelBottom,
+	left: styles.panelLeft,
+	right: styles.panelRight,
+	top: styles.panelTop
+};
+const panelRoundedClass = {
+	bottom: styles.panelRoundedBottom,
+	left: styles.panelRoundedLeft,
+	right: styles.panelRoundedRight,
+	top: styles.panelRoundedTop
+};
+const DrawerOpenContext = createContext(null);
+const DrawerActionsContext = createContext(null);
+const useDrawerOpen = () => use(DrawerOpenContext);
+const useDrawerActions = () => use(DrawerActionsContext);
+const AnimatedDrawerRoot = ({ open, children, onExitComplete: onExitCompleteProp, zIndex: explicitZIndex, ...rest }) => {
+	const [isPresent, setIsPresent] = useState(!!open);
+	useEffect(() => {
+		if (open) setIsPresent(true);
+	}, [open]);
+	const handleExitComplete = useCallback(() => {
+		setIsPresent(false);
+		onExitCompleteProp?.();
+	}, [onExitCompleteProp]);
+	const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);
+	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	const layer = useMemo(() => ({
+		popupRef,
+		zIndex
+	}), [zIndex, popupRef]);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(DrawerOpenContext, {
+		value: open,
+		children: /* @__PURE__ */ jsx(DrawerActionsContext, {
+			value: actions,
+			children: /* @__PURE__ */ jsx(DrawerLayerProvider, {
+				value: layer,
+				children: /* @__PURE__ */ jsx(Dialog.Root, {
+					modal: true,
+					open: true,
+					...rest,
+					children
+				})
+			})
+		})
+	});
+};
+const NonAnimatedDrawerRoot = ({ zIndex: explicitZIndex, children, ...rest }) => {
+	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	const layer = useMemo(() => ({
+		popupRef,
+		zIndex
+	}), [zIndex, popupRef]);
+	return /* @__PURE__ */ jsx(DrawerLayerProvider, {
+		value: layer,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal: true,
+			...rest,
+			children
+		})
+	});
+};
+const DrawerRoot = ({ open, onExitComplete, ...rest }) => {
+	if (open !== void 0) return /* @__PURE__ */ jsx(AnimatedDrawerRoot, {
+		open,
+		onExitComplete,
+		...rest
+	});
+	return /* @__PURE__ */ jsx(NonAnimatedDrawerRoot, { ...rest });
+};
+const DrawerPortal = ({ container, ...rest }) => {
+	const appElement = useAppElement();
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		container: container ?? appElement ?? void 0,
+		...rest
+	});
+};
+const DrawerBackdrop = ({ className, style, ...rest }) => {
+	const open = useDrawerOpen();
+	const layer = useDrawerLayer();
+	const Motion = useMotionComponent();
+	const layerStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex } : void 0;
+	if (open !== null) return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...rest,
+		className: cx(styles.backdrop, className),
+		style: {
+			...layerStyle,
+			...style,
+			transition: "none"
+		},
+		render: /* @__PURE__ */ jsx(Motion.div, {
+			animate: { opacity: open ? 1 : 0 },
+			initial: { opacity: 0 },
+			transition: drawerBackdropTransition
+		})
+	});
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...rest,
+		className: mergeStateClassName(styles.backdrop, className),
+		style: {
+			...layerStyle,
+			...style
+		}
+	});
+};
+const DrawerPopup = ({ className, children, placement: placementProp = "right", width: widthProp, height: heightProp, flush, pushOffset = 0, motionProps, panelClassName, panelStyle, popupStyle, ref: forwardedRef, ...rest }) => {
+	const open = useDrawerOpen();
+	const actions = useDrawerActions();
+	const layer = useDrawerLayer();
+	const Motion = useMotionComponent();
+	const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);
+	const openGeometryRef = useRef({
+		height: heightProp,
+		placement: placementProp,
+		width: widthProp
+	});
+	if (open !== false) openGeometryRef.current = {
+		height: heightProp,
+		placement: placementProp,
+		width: widthProp
+	};
+	const { height, placement, width } = openGeometryRef.current;
+	const sizeStyle = placement === "left" || placement === "right" ? { width } : { height };
+	const resolvedPopupStyle = {
+		...layer?.zIndex === void 0 ? void 0 : { zIndex: layer.zIndex + 1 },
+		...sizeStyle,
+		...popupStyle
+	};
+	const popupBaseClassName = cx(styles.popup, popupPlacementClass[placement]);
+	const resolvedPanelClassName = cx(styles.panel, panelPlacementClass[placement], flush ? styles.panelFlush : panelRoundedClass[placement], panelClassName);
+	if (open !== null && actions) {
+		const motionConfig = getDrawerMotionConfig(placement, pushOffset);
+		return /* @__PURE__ */ jsx(Dialog.Popup, {
+			...rest,
+			className: cx(popupBaseClassName, className),
+			"data-drawer-anchor": placement,
+			ref: composedRef,
+			style: resolvedPopupStyle,
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				onExitComplete: actions.onExitComplete,
+				children: open ? /* @__PURE__ */ createElement(Motion.div, {
+					...motionConfig,
+					...motionProps,
+					className: resolvedPanelClassName,
+					"data-drawer-placement": placement,
+					key: "drawer-popup-panel",
+					style: {
+						transition: "none",
+						...panelStyle
+					}
+				}, children) : null
+			})
+		});
+	}
+	const { axis, sign } = pushAxis[placement];
+	const pushVars = { [axis === "x" ? "--drawer-push-x" : "--drawer-push-y"]: `${pushOffset * sign}px` };
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		...rest,
+		className: mergeStateClassName(popupBaseClassName, className),
+		"data-drawer-anchor": placement,
+		ref: composedRef,
+		style: resolvedPopupStyle,
+		children: /* @__PURE__ */ jsx("div", {
+			className: resolvedPanelClassName,
+			"data-drawer-placement": placement,
+			style: {
+				...pushVars,
+				...panelStyle
+			},
+			children
+		})
+	});
+};
+const DrawerHeader = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cx(styles.header, className)
+});
+const DrawerTitle = ({ className, ...rest }) => /* @__PURE__ */ jsx(Dialog.Title, {
+	...rest,
+	className: mergeStateClassName(styles.title, className)
+});
+const DrawerDescription = Dialog.Description;
+const DrawerContent = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cx(styles.content, className)
+});
+const DrawerFooter = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cx(styles.footer, className)
+});
+const DrawerClose = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(Dialog.Close, {
+	...rest,
+	className: mergeStateClassName(styles.close, className),
+	children: children ?? /* @__PURE__ */ jsx(X, { size: 16 })
+});
+const DrawerTrigger = ({ children, className, nativeButton, ref: refProp, ...rest }) => {
+	const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
+		children,
+		nativeButton
+	});
+	const renderer = (props) => {
+		const resolvedProps = (() => {
+			if (isNativeButtonTriggerElement) return props;
+			const { type, ...restProps } = props;
+			return restProps;
+		})();
+		const mergedProps = mergeProps(children.props, resolvedProps);
+		return cloneElement(children, {
+			...mergedProps,
+			ref: mergeRefs([
+				children.ref,
+				props.ref,
+				refProp
+			])
+		});
+	};
+	if (isValidElement(children)) return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...rest,
+		className,
+		nativeButton: resolvedNativeButton,
+		render: renderer
+	});
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...rest,
+		className,
+		nativeButton: resolvedNativeButton,
+		ref: refProp,
+		children
+	});
+};
+//#endregion
+export { DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawerActions, useDrawerOpen };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/base-ui/Drawer/atoms.mjs.map

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

package/es/base-ui/Drawer/constants.d.mts

@@ -0,0 +1,17 @@
+import { DrawerPlacement } from "./type.mjs";
+import { MotionProps } from "motion/react";
+//#region src/base-ui/Drawer/constants.d.ts
+type CubicBezier = [number, number, number, number];
+declare const getDrawerMotionConfig: (placement: DrawerPlacement, pushOffset?: number) => MotionProps & {
+  animate: {
+    x: number;
+    y: number;
+  };
+};
+declare const drawerBackdropTransition: {
+  duration: number;
+  ease: CubicBezier;
+};
+//#endregion
+export { drawerBackdropTransition, getDrawerMotionConfig };
+//# sourceMappingURL=constants.d.mts.map