@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Drawer/Drawer.mjs

@@ -1,141 +1,149 @@
 "use client";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import { memo, useMemo } from "react";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { DEFAULT_CONTAINER_MAX_WIDTH } from "./constants.mjs";
+import { styles } from "./style.mjs";
+import { DrawerBackdrop, DrawerContentImpl, DrawerFooter, DrawerHeader, DrawerPopupImpl, 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 { cssVar } from "antd-style";
-import { XIcon } from "lucide-react";
-import { Drawer } from "antd";
+import clsx from "clsx";
+import { X } from "lucide-react";
 //#region src/Drawer/Drawer.tsx
-const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, placement, styles, children, height, width, extra, closeIconProps, noHeader, sidebarWidth = 280, sidebar, closeIcon, ref, ...rest }) => {
-	const headerBorder = useMemo(() => {
-		if (height === "100%" || width === "100%" || height === "100vh" || width === "100vw") return {};
-		switch (placement) {
-			case "top": return { borderBottom: `1px solid ${cssVar.colorBorder}` };
-			case "bottom": return { borderTop: `1px solid ${cssVar.colorBorder}` };
-			case "left": return { borderRight: `1px solid ${cssVar.colorBorder}` };
-			case "right": return { borderLeft: `1px solid ${cssVar.colorBorder}` };
-			default: return {};
-		}
+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?.();
 	}, [
-		placement,
-		height,
-		width
+		isOpen,
+		keyboard,
+		maskClosable,
+		onClose
 	]);
-	const extraNode = /* @__PURE__ */ jsxs(FlexBasic_default, {
-		horizontal: true,
-		align: "center",
-		className: classNames?.extra,
-		gap: 4,
-		justify: "flex-end",
-		style: {
-			position: "absolute",
-			right: 4,
-			top: 4,
-			...styles?.extra
-		},
-		children: [extra, closeIcon || /* @__PURE__ */ jsx(ActionIcon, {
-			icon: XIcon,
-			onClick: onClose,
-			...closeIconProps
-		})]
+	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 surfaceWeight = (() => {
+		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",
+		...styleProps([styles.close, focusRing.info], classNames?.close, semanticStyles?.close),
+		type: "button",
+		onClick: onClose,
+		children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 16 })
 	});
-	const sidebarContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexBasic_default, {
-		className: classNames?.sidebar,
-		paddingBlock: 12,
-		paddingInline: 16,
-		width: sidebarWidth,
-		style: {
-			background: cssVar.colorBgLayout,
-			borderRight: `1px solid ${cssVar.colorBorderSecondary}`,
-			height: "100vh",
-			overflowX: "hidden",
-			overflowY: "auto",
-			position: "sticky",
-			top: 0,
-			...styles?.sidebar
-		},
+	const extraNode = (extra || closeNode) && /* @__PURE__ */ jsxs("div", {
+		...styleProps([styles.extra, !showHeader && styles.extraFloating], classNames?.extra, semanticStyles?.extra),
+		children: [extra, closeNode]
+	});
+	const bodyNode = hasSidebar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		...styleProps(styles.sidebar, classNames?.sidebar, {
+			width: sidebarWidth,
+			...semanticStyles?.sidebar
+		}),
 		children: sidebar
-	}), /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: classNames?.sidebarContent,
-		flex: 1,
-		paddingBlock: 12,
-		paddingInline: 16,
-		style: {
-			background: cssVar.colorBgContainer,
-			overflowX: "hidden",
-			overflowY: "auto",
-			...styles?.sidebarContent
-		},
+	}), /* @__PURE__ */ jsx("div", {
+		...styleProps(styles.sidebarContent, classNames?.sidebarContent, semanticStyles?.sidebarContent),
 		children
-	})] });
-	return /* @__PURE__ */ jsx(Drawer, {
-		classNames,
-		closable: false,
-		extra: noHeader ? void 0 : extraNode,
-		height,
-		keyboard: true,
-		panelRef: ref,
-		placement,
-		width,
-		styles: typeof styles === "function" ? styles : {
-			...styles,
-			body: {
-				background: "transparent",
-				paddingBlock: sidebar ? 0 : 12,
-				paddingInline: sidebar ? 0 : 16,
-				...styles?.body
-			},
-			header: {
-				background: "transparent",
-				display: noHeader ? "none" : void 0,
-				padding: 4,
-				...styles?.header
-			},
-			section: {
-				background: sidebar ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)` : cssVar.colorBgContainer,
-				...styles?.section
-			},
-			wrapper: {
-				background: cssVar.colorBgContainer,
-				...headerBorder,
-				...styles?.wrapper
-			}
-		},
-		title: /* @__PURE__ */ jsx(FlexBasic_default, {
-			horizontal: true,
-			align: "center",
-			className: classNames?.title,
-			justify: "flex-start",
-			paddingBlock: 8,
-			paddingInline: 16,
-			style: {
-				justifySelf: "center",
-				maxWidth: containerMaxWidth,
-				width: "100%",
-				...styles?.title
-			},
-			children: title
-		}),
-		onClose,
-		...rest,
-		children: /* @__PURE__ */ jsxs(FlexBasic_default, {
-			className: classNames?.bodyContent,
-			horizontal: !!sidebar,
-			style: {
-				justifySelf: "center",
-				maxWidth: containerMaxWidth,
-				minHeight: "100%",
-				overflow: sidebar ? "visible" : void 0,
-				width: "100%",
-				...styles?.bodyContent
-			},
-			children: [noHeader && extraNode, sidebar ? 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(DrawerPopupImpl, {
+				className: classNames?.popup,
+				flush: isFlush,
+				height: resolvedHeight,
+				motionProps: { onAnimationComplete: handleAnimationComplete },
+				panelClassName: clsx(className, classNames?.panel),
+				panelStyle: {
+					...style,
+					...semanticStyles?.panel
+				},
+				panelXstyle: surfaceWeight,
+				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", {
+								...styleProps(styles.containerInner, void 0, containerStyle),
+								children: [showTitle ? /* @__PURE__ */ jsx(DrawerTitle, {
+									className: classNames?.title,
+									style: semanticStyles?.title,
+									children: title
+								}) : /* @__PURE__ */ jsx("span", {}), extraNode]
+							})
+						}) : extraNode,
+						/* @__PURE__ */ jsx(DrawerContentImpl, {
+							className: classNames?.content,
+							style: semanticStyles?.content,
+							xstyle: hasSidebar && styles.contentSidebar,
+							children: /* @__PURE__ */ jsx("div", {
+								...styleProps([styles.bodyContent, hasSidebar && styles.bodyContentSidebar], classNames?.bodyContent, {
+									...containerStyle,
+									...semanticStyles?.bodyContent
+								}),
+								children: bodyNode
+							})
+						}),
+						footer && /* @__PURE__ */ jsx(DrawerFooter, {
+							className: classNames?.footer,
+							style: semanticStyles?.footer,
+							children: /* @__PURE__ */ jsx("div", {
+								...styleProps([styles.containerInner, styles.containerInnerFooter], void 0, containerStyle),
+								children: footer
+							})
+						})
+					]
+				})
+			})]
 		})
 	});
 });
-Drawer$1.displayName = "Drawer";
+Drawer.displayName = "Drawer";
 //#endregion
-export { Drawer$1 as default };
+export { Drawer as default };
 
 //# sourceMappingURL=Drawer.mjs.map

package/es/Drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","names":["Drawer","Flexbox","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer as AntdDrawer } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { DrawerProps } from './type';\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    onClose,\n    containerMaxWidth = 1024,\n    classNames,\n    title,\n    placement,\n    styles,\n    children,\n    height,\n    width,\n    extra,\n    closeIconProps,\n    noHeader,\n    sidebarWidth = 280,\n    sidebar,\n    closeIcon,\n    ref,\n    ...rest\n  }) => {\n    const headerBorder: CSSProperties = useMemo(() => {\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\n        return {};\n\n      switch (placement) {\n        case 'top': {\n          return {\n            borderBottom: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'bottom': {\n          return {\n            borderTop: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'left': {\n          return {\n            borderRight: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'right': {\n          return {\n            borderLeft: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        default: {\n          return {};\n        }\n      }\n    }, [placement, height, width]);\n\n    const extraNode = (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={classNames?.extra}\n        gap={4}\n        justify={'flex-end'}\n        style={{\n          position: 'absolute',\n          right: 4,\n          top: 4,\n          ...styles?.extra,\n        }}\n      >\n        {extra}\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\n      </Flexbox>\n    );\n\n    const sidebarContent = (\n      <>\n        <Flexbox\n          className={classNames?.sidebar}\n          paddingBlock={12}\n          paddingInline={16}\n          width={sidebarWidth}\n          style={{\n            background: cssVar.colorBgLayout,\n            borderRight: `1px solid ${cssVar.colorBorderSecondary}`,\n            height: '100vh',\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            position: 'sticky',\n            top: 0,\n            ...styles?.sidebar,\n          }}\n        >\n          {sidebar}\n        </Flexbox>\n        <Flexbox\n          className={classNames?.sidebarContent}\n          flex={1}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: cssVar.colorBgContainer,\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            ...styles?.sidebarContent,\n          }}\n        >\n          {children}\n        </Flexbox>\n      </>\n    );\n\n    return (\n      <AntdDrawer\n        classNames={classNames}\n        closable={false}\n        extra={noHeader ? undefined : extraNode}\n        height={height}\n        keyboard={true}\n        panelRef={ref}\n        placement={placement}\n        width={width}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...styles,\n                body: {\n                  background: 'transparent',\n                  paddingBlock: sidebar ? 0 : 12,\n                  paddingInline: sidebar ? 0 : 16,\n                  ...styles?.body,\n                },\n                header: {\n                  background: 'transparent',\n                  display: noHeader ? 'none' : undefined,\n                  padding: 4,\n                  ...styles?.header,\n                },\n                section: {\n                  background: sidebar\n                    ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)`\n                    : cssVar.colorBgContainer,\n                  ...styles?.section,\n                },\n                wrapper: {\n                  background: cssVar.colorBgContainer,\n                  ...headerBorder,\n                  ...styles?.wrapper,\n                },\n              }\n        }\n        title={\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={classNames?.title}\n            justify={'flex-start'}\n            paddingBlock={8}\n            paddingInline={16}\n            style={{\n              justifySelf: 'center',\n              maxWidth: containerMaxWidth,\n              width: '100%',\n              ...styles?.title,\n            }}\n          >\n            {title}\n          </Flexbox>\n        }\n        onClose={onClose}\n        {...rest}\n      >\n        <Flexbox\n          className={classNames?.bodyContent}\n          horizontal={!!sidebar}\n          style={{\n            justifySelf: 'center',\n            maxWidth: containerMaxWidth,\n            minHeight: '100%',\n            overflow: sidebar ? 'visible' : undefined,\n            width: '100%',\n            ...styles?.bodyContent,\n          }}\n        >\n          {noHeader && extraNode}\n          {sidebar ? sidebarContent : children}\n        </Flexbox>\n      </AntdDrawer>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,WAAS,MACZ,EACC,SACA,oBAAoB,MACpB,YACA,OACA,WACA,QACA,UACA,QACA,OACA,OACA,gBACA,UACA,eAAe,KACf,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,eAA8B,cAAc;EAChD,IAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,SAC3E,OAAO,CAAC;EAEV,QAAQ,WAAR;GACE,KAAK,OACH,OAAO,EACL,cAAc,aAAa,OAAO,cACpC;GAEF,KAAK,UACH,OAAO,EACL,WAAW,aAAa,OAAO,cACjC;GAEF,KAAK,QACH,OAAO,EACL,aAAa,aAAa,OAAO,cACnC;GAEF,KAAK,SACH,OAAO,EACL,YAAY,aAAa,OAAO,cAClC;GAEF,SACE,OAAO,CAAC;EAEZ;CACF,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,MAAM,YACJ,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;EACb;EAXF,UAAA,CAaG,OACA,aAAa,oBAAC,YAAD;GAAY,MAAM;GAAO,SAAS;GAAS,GAAI;EAAiB,CAAA,CACvE;;CAGX,MAAM,iBACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAACA,mBAAD;EACE,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;EACP,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,aAAa,OAAO;GACjC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;EACb;EAEC,UAAA;CACM,CAAA,GACT,oBAACA,mBAAD;EACE,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;EACb;EAEC;CACM,CAAA,CACT,EAAA,CAAA;CAGJ,OACE,oBAACC,QAAD;EACc;EACZ,UAAU;EACV,OAAO,WAAW,KAAA,IAAY;EACtB;EACR,UAAU;EACV,UAAU;EACC;EACJ;EACP,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;GACb;GACA,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS,KAAA;IAC7B,SAAS;IACT,GAAG,QAAQ;GACb;GACA,SAAS;IACP,YAAY,UACR,6BAA6B,OAAO,cAAc,UAAU,OAAO,iBAAiB,SACpF,OAAO;IACX,GAAG,QAAQ;GACb;GACA,SAAS;IACP,YAAY,OAAO;IACnB,GAAG;IACH,GAAG,QAAQ;GACb;EACF;EAEN,OACE,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,YAAY;GACvB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;GACb;GAEC,UAAA;EACM,CAAA;EAEF;EACT,GAAI;EAEJ,UAAA,qBAACA,mBAAD;GACE,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY,KAAA;IAChC,OAAO;IACP,GAAG,QAAQ;GACb;GAVF,UAAA,CAYG,YAAY,WACZ,UAAU,iBAAiB,QACrB;;CACC,CAAA;AAEhB,CACF;AAEA,SAAO,cAAc"}
+{"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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"}

package/es/Drawer/DrawerLayerContext.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/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/Drawer/DrawerLayerContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerLayerContext.mjs","names":[],"sources":["../../src/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/Drawer/DrawerPushContext.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
+//#region src/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/Drawer/DrawerPushContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerPushContext.mjs","names":[],"sources":["../../src/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/Drawer/atoms.d.mts

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