@lobehub/ui 5.24.0 → 5.26.0

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

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

@@ -0,0 +1,72 @@
+//#region src/base-ui/Drawer/constants.ts
+const softEase = [
+	.32,
+	.72,
+	0,
+	1
+];
+const exitEase = [
+	.4,
+	0,
+	1,
+	1
+];
+const DEFAULT_CONTAINER_MAX_WIDTH = 1024;
+const offscreen = {
+	bottom: { y: "100%" },
+	left: { x: "-100%" },
+	right: { x: "100%" },
+	top: { y: "-100%" }
+};
+const pushAxis = {
+	bottom: {
+		axis: "y",
+		sign: -1
+	},
+	left: {
+		axis: "x",
+		sign: 1
+	},
+	right: {
+		axis: "x",
+		sign: -1
+	},
+	top: {
+		axis: "y",
+		sign: 1
+	}
+};
+const getDrawerMotionConfig = (placement, pushOffset = 0) => {
+	const hidden = offscreen[placement];
+	const { axis, sign } = pushAxis[placement];
+	const shift = pushOffset === 0 ? 0 : pushOffset * sign;
+	return {
+		animate: axis === "x" ? {
+			x: shift,
+			y: 0
+		} : {
+			x: 0,
+			y: shift
+		},
+		exit: {
+			...hidden,
+			transition: {
+				duration: .22,
+				ease: exitEase
+			}
+		},
+		initial: hidden,
+		transition: {
+			duration: .3,
+			ease: softEase
+		}
+	};
+};
+const drawerBackdropTransition = {
+	duration: .18,
+	ease: softEase
+};
+//#endregion
+export { DEFAULT_CONTAINER_MAX_WIDTH, drawerBackdropTransition, getDrawerMotionConfig, pushAxis };
+
+//# sourceMappingURL=constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","names":[],"sources":["../../../src/base-ui/Drawer/constants.ts"],"sourcesContent":["import type { MotionProps } from 'motion/react';\n\nimport type { DrawerPlacement } from './type';\n\ntype CubicBezier = [number, number, number, number];\n\nconst softEase: CubicBezier = [0.32, 0.72, 0, 1];\nconst exitEase: CubicBezier = [0.4, 0, 1, 1];\n\nexport const DEFAULT_PUSH_DISTANCE = 180;\nexport const DEFAULT_SIDEBAR_WIDTH = 280;\nexport const DEFAULT_CONTAINER_MAX_WIDTH = 1024;\nexport const DEFAULT_DRAWER_WIDTH = 378;\nexport const DEFAULT_DRAWER_HEIGHT = 378;\n\nconst offscreen: Record<DrawerPlacement, MotionProps['initial']> = {\n  bottom: { y: '100%' },\n  left: { x: '-100%' },\n  right: { x: '100%' },\n  top: { y: '-100%' },\n};\n\nexport const pushAxis: Record<DrawerPlacement, { axis: 'x' | 'y'; sign: 1 | -1 }> = {\n  bottom: { axis: 'y', sign: -1 },\n  left: { axis: 'x', sign: 1 },\n  right: { axis: 'x', sign: -1 },\n  top: { axis: 'y', sign: 1 },\n};\n\nexport const getDrawerMotionConfig = (\n  placement: DrawerPlacement,\n  pushOffset = 0,\n): MotionProps & { animate: { x: number; y: number } } => {\n  const hidden = offscreen[placement];\n  const { axis, sign } = pushAxis[placement];\n  const shift = pushOffset === 0 ? 0 : pushOffset * sign;\n\n  return {\n    animate: axis === 'x' ? { x: shift, y: 0 } : { x: 0, y: shift },\n    exit: {\n      ...(hidden as object),\n      transition: { duration: 0.22, ease: exitEase },\n    },\n    initial: hidden,\n    transition: { duration: 0.3, ease: softEase },\n  };\n};\n\nexport const drawerBackdropTransition = {\n  duration: 0.18,\n  ease: softEase,\n};\n"],"mappings":";AAMA,MAAM,WAAwB;CAAC;CAAM;CAAM;CAAG;AAAC;AAC/C,MAAM,WAAwB;CAAC;CAAK;CAAG;CAAG;AAAC;AAI3C,MAAa,8BAA8B;AAI3C,MAAM,YAA6D;CACjE,QAAQ,EAAE,GAAG,OAAO;CACpB,MAAM,EAAE,GAAG,QAAQ;CACnB,OAAO,EAAE,GAAG,OAAO;CACnB,KAAK,EAAE,GAAG,QAAQ;AACpB;AAEA,MAAa,WAAuE;CAClF,QAAQ;EAAE,MAAM;EAAK,MAAM;CAAG;CAC9B,MAAM;EAAE,MAAM;EAAK,MAAM;CAAE;CAC3B,OAAO;EAAE,MAAM;EAAK,MAAM;CAAG;CAC7B,KAAK;EAAE,MAAM;EAAK,MAAM;CAAE;AAC5B;AAEA,MAAa,yBACX,WACA,aAAa,MAC2C;CACxD,MAAM,SAAS,UAAU;CACzB,MAAM,EAAE,MAAM,SAAS,SAAS;CAChC,MAAM,QAAQ,eAAe,IAAI,IAAI,aAAa;CAElD,OAAO;EACL,SAAS,SAAS,MAAM;GAAE,GAAG;GAAO,GAAG;EAAE,IAAI;GAAE,GAAG;GAAG,GAAG;EAAM;EAC9D,MAAM;GACJ,GAAI;GACJ,YAAY;IAAE,UAAU;IAAM,MAAM;GAAS;EAC/C;EACA,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;EAAS;CAC9C;AACF;AAEA,MAAa,2BAA2B;CACtC,UAAU;CACV,MAAM;AACR"}

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

@@ -0,0 +1,5 @@
+import { DrawerPlacement, DrawerProps, DrawerPush, DrawerSemanticNames, DrawerSemanticStyles } from "./type.mjs";
+import Drawer from "./Drawer.mjs";
+import { DrawerBackdrop, DrawerBackdropProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerPopup, DrawerPopupProps, DrawerPortal, DrawerPortalProps, DrawerRoot, DrawerRootProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, useDrawerActions, useDrawerOpen } from "./atoms.mjs";
+import { drawerBackdropTransition, getDrawerMotionConfig } from "./constants.mjs";
+export { Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerBackdropTransition, getDrawerMotionConfig, useDrawerActions, useDrawerOpen };