@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/cjs/components/drawer/drawer.cjs

@@ -0,0 +1,224 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_children = require('../../utils/children.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_motion_factory = require('../motion/factory.cjs');
+const require_components_portal_portal = require('../portal/portal.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_components_button_button = require('../button/button.cjs');
+const require_components_button_close_button = require('../button/close-button.cjs');
+const require_components_fade_fade = require('../fade/fade.cjs');
+const require_components_focus_lock_focus_lock = require('../focus-lock/focus-lock.cjs');
+const require_components_slide_slide = require('../slide/slide.cjs');
+const require_components_drawer_drawer_style = require('./drawer.style.cjs');
+const require_components_drawer_use_drawer = require('./use-drawer.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const motion_react = require_rolldown_runtime.__toESM(require("motion/react"));
+const react_remove_scroll = require_rolldown_runtime.__toESM(require("react-remove-scroll"));
+
+//#region src/components/drawer/drawer.tsx
+const { component, ComponentContext, PropsContext: DrawerPropsContext, useComponentContext, usePropsContext: useDrawerPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("drawer", require_components_drawer_drawer_style.drawerStyle);
+/**
+* `Drawer` is a component for a panel that appears from the edge of the screen.
+*
+* @see https://yamada-ui.com/components/drawer
+*/
+const DrawerRoot = withProvider(({ allowPinchZoom = false, autoFocus, blockScrollOnMount = true, body, cancel, children, closeOnDrag, dragConstraints, dragElastic, dragOffset, dragVelocity, duration = {
+	enter: .4,
+	exit: .3
+}, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, placement: placementProp, restoreFocus, success, title, trigger, withCloseButton = !closeOnDrag, withDragBar = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess,...props }) => {
+	const placement = require_hooks_use_value_index.useValue(placementProp);
+	const validChildren = require_utils_children.getValidChildren(children);
+	const [openTrigger, ...omittedChildren] = require_utils_children.findChildren(validChildren, DrawerOpenTrigger);
+	const [customOverlay, ...cloneChildren] = require_utils_children.findChildren(omittedChildren, DrawerOverlay);
+	const { open, getRootProps,...rest } = require_components_drawer_use_drawer.useDrawer({
+		closeOnDrag,
+		dragConstraints,
+		dragElastic,
+		dragOffset,
+		dragVelocity,
+		placement,
+		...props
+	});
+	const hasChildren = !!cloneChildren.length;
+	const customOpenTrigger = trigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOpenTrigger, { children: trigger }) : null;
+	const context = (0, react.useMemo)(() => ({
+		duration,
+		open,
+		placement,
+		withCloseButton,
+		withDragBar,
+		...rest
+	}), [
+		duration,
+		open,
+		withDragBar,
+		placement,
+		withCloseButton,
+		rest
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
+		value: context,
+		children: [openTrigger ?? customOpenTrigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			onExitComplete: onCloseComplete,
+			children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_portal_portal.Portal, {
+				...portalProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_focus_lock_focus_lock.FocusLock, {
+					autoFocus,
+					finalFocusRef,
+					initialFocusRef,
+					lockFocusAcrossFrames,
+					restoreFocus,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
+						allowPinchZoom,
+						enabled: blockScrollOnMount,
+						forwardProps: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.div, {
+							...getRootProps(),
+							children: [customOverlay ?? (withOverlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}) : null), hasChildren ? cloneChildren : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShorthandDrawerContent, {
+								body,
+								cancel,
+								footer,
+								header,
+								middle,
+								success,
+								title,
+								onCancel,
+								onMiddle,
+								onSuccess
+							})]
+						})
+					})
+				})
+			}) : null
+		})]
+	});
+}, "root", { transferProps: ["placement"] })();
+const DrawerOpenTrigger = withContext("button", {
+	name: "OpenTrigger",
+	slot: ["trigger", "open"]
+})(void 0, (props) => {
+	const { getOpenTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getOpenTriggerProps(props)
+	};
+});
+const DrawerCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})(void 0, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getCloseTriggerProps(props)
+	};
+});
+const DrawerCloseButton = withContext(require_components_button_close_button.CloseButton, "closeButton")(void 0, (props) => {
+	const { getCloseButtonProps } = useComponentContext();
+	return { ...getCloseButtonProps(props) };
+});
+const DrawerOverlay = withContext((props) => {
+	const { duration, getOverlayProps } = useComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_motion_factory.motion.div, {
+		animate: "enter",
+		custom: { duration },
+		exit: "exit",
+		initial: "exit",
+		variants: require_components_fade_fade.fadeVariants,
+		...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(props)))
+	});
+}, "overlay")();
+const DrawerContent = withContext(({ children,...rest }) => {
+	const { closeOnDrag, duration, open, placement, withCloseButton, withDragBar, getContentProps } = useComponentContext();
+	const validChildren = require_utils_children.getValidChildren(children);
+	const [customCloseButton, ...omittedChildren] = require_utils_children.findChildren(validChildren, DrawerCloseButton);
+	const [customDragBar, ...cloneChildren] = require_utils_children.findChildren(omittedChildren, DrawerDragBar);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_slide_slide.Slide, {
+		as: "section",
+		duration,
+		open,
+		placement,
+		...getContentProps(rest),
+		children: [
+			customCloseButton ?? (withCloseButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerCloseButton, {}) : null),
+			customDragBar ?? (withDragBar && closeOnDrag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerDragBar, {}) : null),
+			cloneChildren
+		]
+	});
+}, "content")();
+const ShorthandDrawerContent = ({ body, cancel, footer, header, middle, success, title, onCancel, onMiddle, onSuccess }) => {
+	const { onClose } = useComponentContext();
+	const customHeader = require_utils_children.wrapOrPassProps(DrawerHeader, header);
+	const customTitle = require_utils_children.wrapOrPassProps(DrawerTitle, title);
+	const customBody = require_utils_children.wrapOrPassProps(DrawerBody, body);
+	const customFooter = require_utils_children.wrapOrPassProps(DrawerFooter, footer);
+	const customCancel = require_utils_children.wrapOrPassProps(require_components_button_button.Button, cancel, {
+		variant: "ghost",
+		onClick: () => onCancel ? onCancel(onClose) : onClose()
+	});
+	const customMiddle = require_utils_children.wrapOrPassProps(require_components_button_button.Button, middle, {
+		colorScheme: "secondary",
+		onClick: () => onMiddle ? onMiddle(onClose) : onClose()
+	});
+	const customSuccess = require_utils_children.wrapOrPassProps(require_components_button_button.Button, success, {
+		colorScheme: "primary",
+		onClick: () => onSuccess ? onSuccess(onClose) : onClose()
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerContent, { children: [
+		customHeader ?? (customTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerHeader, { children: customTitle }) : null),
+		customBody,
+		customFooter ?? (customCancel || customMiddle || customSuccess ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerFooter, { children: [
+			customCancel,
+			customMiddle,
+			customSuccess
+		] }) : null)
+	] });
+};
+const DrawerDragBar = withContext("div", "dragBar")(void 0, (props) => {
+	const { getDragBarProps } = useComponentContext();
+	return { ...getDragBarProps(props) };
+});
+const DrawerHeader = withContext("header", "header")(void 0, (props) => {
+	const { getHeaderProps } = useComponentContext();
+	return { ...getHeaderProps(props) };
+});
+const DrawerTitle = withContext("h2", "title")(void 0, (props) => {
+	const { getTitleProps } = useComponentContext();
+	return { ...getTitleProps(props) };
+});
+const DrawerBody = withContext("div", "body")(void 0, (props) => {
+	const { getBodyProps } = useComponentContext();
+	return { ...getBodyProps(props) };
+});
+const DrawerFooter = withContext("footer", "footer")(void 0, (props) => {
+	const { getFooterProps } = useComponentContext();
+	return { ...getFooterProps(props) };
+});
+
+//#endregion
+exports.ComponentContext = ComponentContext;
+exports.DrawerBody = DrawerBody;
+exports.DrawerCloseButton = DrawerCloseButton;
+exports.DrawerCloseTrigger = DrawerCloseTrigger;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDragBar = DrawerDragBar;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOpenTrigger = DrawerOpenTrigger;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPropsContext = DrawerPropsContext;
+exports.DrawerRoot = DrawerRoot;
+exports.DrawerTitle = DrawerTitle;
+exports.ShorthandDrawerContent = ShorthandDrawerContent;
+exports.component = component;
+exports.useComponentContext = useComponentContext;
+exports.useDrawerPropsContext = useDrawerPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=drawer.cjs.map

package/dist/cjs/components/drawer/drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.cjs","names":["drawerStyle","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","motion","fadeVariants","Slide","ShorthandDrawerContent: FC<ShorthandDrawerContentProps>","Button"],"sources":["../../../../src/components/drawer/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n  cast,\n  findChildren,\n  getValidChildren,\n  wrapOrPassProps,\n} from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n  extends Omit<UseDrawerReturn, \"getRootProps\">,\n    Pick<\n      DrawerRootProps,\n      \"duration\" | \"placement\" | \"withCloseButton\" | \"withDragBar\"\n    > {}\n\nexport interface DrawerRootProps\n  extends ThemeProps<DrawerStyle>,\n    Omit<UseDrawerProps, \"placement\" | \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    ShorthandDrawerContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the drawer opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The animation duration.\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n  /**\n   * The placement of the drawer.\n   *\n   * @default 'inline-end'\n   */\n  placement?: StyleValue<SimplePlacement>\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the drawer close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the drag bar when `closeOnDrag` is `true`.\n   *\n   * @default true\n   */\n  withDragBar?: boolean\n  /**\n   * If `true`, display the drawer overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the drawer has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nexport const {\n  component,\n  ComponentContext,\n  PropsContext: DrawerPropsContext,\n  useComponentContext,\n  usePropsContext: useDrawerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n  \"drawer\",\n  drawerStyle,\n)\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see https://yamada-ui.com/components/drawer\n */\nexport const DrawerRoot = withProvider(\n  ({\n    allowPinchZoom = false,\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    closeOnDrag,\n    dragConstraints,\n    dragElastic,\n    dragOffset,\n    dragVelocity,\n    duration = { enter: 0.4, exit: 0.3 },\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    placement: placementProp,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = !closeOnDrag,\n    withDragBar = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const placement = useValue(placementProp)\n    const validChildren = getValidChildren(children)\n    const [openTrigger, ...omittedChildren] = findChildren(\n      validChildren,\n      DrawerOpenTrigger,\n    )\n    const [customOverlay, ...cloneChildren] = findChildren(\n      omittedChildren,\n      DrawerOverlay,\n    )\n    const { open, getRootProps, ...rest } = useDrawer({\n      closeOnDrag,\n      dragConstraints,\n      dragElastic,\n      dragOffset,\n      dragVelocity,\n      placement,\n      ...props,\n    })\n    const hasChildren = !!cloneChildren.length\n    const customOpenTrigger = trigger ? (\n      <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n    ) : null\n\n    const context = useMemo(\n      () => ({\n        duration,\n        open,\n        placement,\n        withCloseButton,\n        withDragBar,\n        ...rest,\n      }),\n      [duration, open, withDragBar, placement, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <DrawerOverlay /> : null)}\n\n                    {hasChildren ? (\n                      cloneChildren\n                    ) : (\n                      <ShorthandDrawerContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n  \"button\",\n  DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  undefined,\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return { asChild: true, ...getCloseTriggerProps(props) }\n  },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n  const { duration, getOverlayProps } = useComponentContext()\n\n  return (\n    <motion.div\n      animate=\"enter\"\n      custom={{ duration }}\n      exit=\"exit\"\n      initial=\"exit\"\n      variants={fadeVariants}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">,\n    PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n  ({ children, ...rest }) => {\n    const {\n      closeOnDrag,\n      duration,\n      open,\n      placement,\n      withCloseButton,\n      withDragBar,\n      getContentProps,\n    } = useComponentContext()\n    const validChildren = getValidChildren(children)\n    const [customCloseButton, ...omittedChildren] = findChildren(\n      validChildren,\n      DrawerCloseButton,\n    )\n    const [customDragBar, ...cloneChildren] = findChildren(\n      omittedChildren,\n      DrawerDragBar,\n    )\n\n    return (\n      <Slide\n        as=\"section\"\n        duration={duration}\n        open={open}\n        placement={placement}\n        {...(getContentProps(rest) as SlideProps)}\n      >\n        {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n        {customDragBar ??\n          (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n        {cloneChildren}\n      </Slide>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n  /**\n   * The drawer body to use.\n   */\n  body?: DrawerBodyProps | ReactNode\n  /**\n   * The drawer cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The drawer footer to use.\n   */\n  footer?: DrawerFooterProps | ReactNode\n  /**\n   * The drawer header to use.\n   */\n  header?: DrawerHeaderProps | ReactNode\n  /**\n   * The drawer middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The drawer success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The drawer title to use.\n   */\n  title?: DrawerTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(DrawerHeader, header)\n  const customTitle = wrapOrPassProps(DrawerTitle, title)\n  const customBody = wrapOrPassProps(DrawerBody, body)\n  const customFooter = wrapOrPassProps(DrawerFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <DrawerContent>\n      {customHeader ??\n        (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <DrawerFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </DrawerFooter>\n        ) : null)}\n    </DrawerContent>\n  )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n  \"div\",\n  \"dragBar\",\n)(undefined, (props) => {\n  const { getDragBarProps } = useComponentContext()\n\n  return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/cjs/components/drawer/drawer.style.cjs

@@ -0,0 +1,170 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+const require_components_modal_modal_style = require('../modal/modal.style.cjs');
+
+//#region src/components/drawer/drawer.style.ts
+const drawerStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		...require_components_modal_modal_style.modalStyle.base,
+		body: {
+			...require_components_modal_modal_style.modalStyle.base?.body,
+			overflow: "auto"
+		},
+		content: {
+			...require_components_modal_modal_style.modalStyle.base?.content,
+			position: "fixed",
+			rounded: "l5"
+		},
+		dragBar: {
+			bg: "bg.subtle",
+			position: "absolute",
+			rounded: "full"
+		}
+	},
+	props: { placement: {
+		"block-end": {
+			content: {
+				maxW: "full",
+				roundedBottom: "0"
+			},
+			dragBar: {
+				left: "50%",
+				minH: "2",
+				top: "md",
+				transform: "translateX(-50%)",
+				w: "3xs"
+			}
+		},
+		"block-start": {
+			content: {
+				maxW: "full",
+				roundedTop: "0"
+			},
+			dragBar: {
+				bottom: "md",
+				left: "50%",
+				minH: "2",
+				transform: "translateX(-50%)",
+				w: "3xs"
+			}
+		},
+		"inline-end": {
+			content: { roundedRight: "0" },
+			dragBar: {
+				h: "3xs",
+				left: "md",
+				minW: "2",
+				top: "50%",
+				transform: "translateY(-50%)"
+			}
+		},
+		"inline-start": {
+			content: { roundedLeft: "0" },
+			dragBar: {
+				h: "3xs",
+				minW: "2",
+				right: "md",
+				top: "50%",
+				transform: "translateY(-50%)"
+			}
+		}
+	} },
+	sizes: {
+		xs: { content: { maxW: "xs" } },
+		sm: { content: { maxW: "sm" } },
+		md: { content: { maxW: "md" } },
+		lg: { content: { maxW: "lg" } },
+		xl: { content: { maxW: "xl" } },
+		"2xl": { content: { maxW: "2xl" } },
+		"3xl": { content: { maxW: "3xl" } },
+		"4xl": { content: { maxW: "4xl" } },
+		"5xl": { content: { maxW: "5xl" } },
+		"6xl": { content: { maxW: "6xl" } },
+		full: { content: {
+			minH: "dvh",
+			minW: "vw",
+			rounded: "0"
+		} }
+	},
+	compounds: [
+		{
+			css: { content: {
+				pb: "md",
+				_after: {
+					bg: "bg.panel",
+					display: "block",
+					h: "dvh",
+					left: "0",
+					position: "absolute",
+					right: "0",
+					top: "calc(-100dvh + 1px)",
+					w: "full"
+				}
+			} },
+			closeOnDrag: true,
+			placement: "block-start",
+			withDragBar: true
+		},
+		{
+			css: { content: {
+				pt: "md",
+				_after: {
+					bg: "bg.panel",
+					bottom: "calc(-100dvh + 1px)",
+					display: "block",
+					h: "dvh",
+					left: "0",
+					position: "absolute",
+					right: "0",
+					w: "full"
+				}
+			} },
+			closeOnDrag: true,
+			placement: "block-end",
+			withDragBar: true
+		},
+		{
+			css: { content: {
+				ps: "md",
+				_after: {
+					bg: "bg.panel",
+					bottom: "0",
+					display: "block",
+					h: "dvh",
+					position: "absolute",
+					right: "calc(-100% + 1px)",
+					top: "0",
+					w: "full"
+				}
+			} },
+			closeOnDrag: true,
+			placement: "inline-end",
+			withDragBar: true
+		},
+		{
+			css: { content: {
+				pe: "md",
+				_after: {
+					bg: "bg.panel",
+					bottom: "0",
+					display: "block",
+					h: "dvh",
+					left: "calc(-100% + 1px)",
+					position: "absolute",
+					top: "0",
+					w: "full"
+				}
+			} },
+			closeOnDrag: true,
+			placement: "inline-start",
+			withDragBar: true
+		}
+	],
+	defaultProps: {
+		size: "lg",
+		placement: "inline-end"
+	}
+});
+
+//#endregion
+exports.drawerStyle = drawerStyle;
+//# sourceMappingURL=drawer.style.cjs.map

package/dist/cjs/components/drawer/drawer.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.style.cjs","names":["modalStyle"],"sources":["../../../../src/components/drawer/drawer.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { modalStyle } from \"../modal\"\n\nexport const drawerStyle = defineComponentSlotStyle({\n  base: {\n    ...modalStyle.base,\n    body: {\n      ...modalStyle.base?.body,\n      overflow: \"auto\",\n    },\n    content: {\n      ...modalStyle.base?.content,\n      position: \"fixed\",\n      rounded: \"l5\",\n    },\n    dragBar: {\n      bg: \"bg.subtle\",\n      position: \"absolute\",\n      rounded: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * The placement of the drawer.\n     *\n     * @default 'inline-end'\n     */\n    placement: {\n      \"block-end\": {\n        content: { maxW: \"full\", roundedBottom: \"0\" },\n        dragBar: {\n          left: \"50%\",\n          minH: \"2\",\n          top: \"md\",\n          transform: \"translateX(-50%)\",\n          w: \"3xs\",\n        },\n      },\n      \"block-start\": {\n        content: { maxW: \"full\", roundedTop: \"0\" },\n        dragBar: {\n          bottom: \"md\",\n          left: \"50%\",\n          minH: \"2\",\n          transform: \"translateX(-50%)\",\n          w: \"3xs\",\n        },\n      },\n      \"inline-end\": {\n        content: { roundedRight: \"0\" },\n        dragBar: {\n          h: \"3xs\",\n          left: \"md\",\n          minW: \"2\",\n          top: \"50%\",\n          transform: \"translateY(-50%)\",\n        },\n      },\n      \"inline-start\": {\n        content: { roundedLeft: \"0\" },\n        dragBar: {\n          h: \"3xs\",\n          minW: \"2\",\n          right: \"md\",\n          top: \"50%\",\n          transform: \"translateY(-50%)\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: { content: { maxW: \"xs\" } },\n    sm: { content: { maxW: \"sm\" } },\n    md: { content: { maxW: \"md\" } },\n    lg: { content: { maxW: \"lg\" } },\n    xl: { content: { maxW: \"xl\" } },\n    \"2xl\": { content: { maxW: \"2xl\" } },\n    \"3xl\": { content: { maxW: \"3xl\" } },\n    \"4xl\": { content: { maxW: \"4xl\" } },\n    \"5xl\": { content: { maxW: \"5xl\" } },\n    \"6xl\": { content: { maxW: \"6xl\" } },\n    full: { content: { minH: \"dvh\", minW: \"vw\", rounded: \"0\" } },\n  },\n\n  compounds: [\n    {\n      css: {\n        content: {\n          pb: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"0\",\n            position: \"absolute\",\n            right: \"0\",\n            top: \"calc(-100dvh + 1px)\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"block-start\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          pt: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"calc(-100dvh + 1px)\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"0\",\n            position: \"absolute\",\n            right: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"block-end\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          ps: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"0\",\n            display: \"block\",\n            h: \"dvh\",\n            position: \"absolute\",\n            right: \"calc(-100% + 1px)\",\n            top: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"inline-end\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          pe: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"0\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"calc(-100% + 1px)\",\n            position: \"absolute\",\n            top: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"inline-start\",\n      withDragBar: true,\n    },\n  ],\n\n  defaultProps: {\n    size: \"lg\",\n    placement: \"inline-end\",\n  },\n})\n\nexport type DrawerStyle = typeof drawerStyle\n"],"mappings":";;;;AAGA,MAAa,cAAc,oDAAyB;CAClD,MAAM;EACJ,GAAGA,gDAAW;EACd,MAAM;GACJ,GAAGA,gDAAW,MAAM;GACpB,UAAU;EACX;EACD,SAAS;GACP,GAAGA,gDAAW,MAAM;GACpB,UAAU;GACV,SAAS;EACV;EACD,SAAS;GACP,IAAI;GACJ,UAAU;GACV,SAAS;EACV;CACF;CAED,OAAO,EAML,WAAW;EACT,aAAa;GACX,SAAS;IAAE,MAAM;IAAQ,eAAe;GAAK;GAC7C,SAAS;IACP,MAAM;IACN,MAAM;IACN,KAAK;IACL,WAAW;IACX,GAAG;GACJ;EACF;EACD,eAAe;GACb,SAAS;IAAE,MAAM;IAAQ,YAAY;GAAK;GAC1C,SAAS;IACP,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;IACX,GAAG;GACJ;EACF;EACD,cAAc;GACZ,SAAS,EAAE,cAAc,IAAK;GAC9B,SAAS;IACP,GAAG;IACH,MAAM;IACN,MAAM;IACN,KAAK;IACL,WAAW;GACZ;EACF;EACD,gBAAgB;GACd,SAAS,EAAE,aAAa,IAAK;GAC7B,SAAS;IACP,GAAG;IACH,MAAM;IACN,OAAO;IACP,KAAK;IACL,WAAW;GACZ;EACF;CACF,EACF;CAED,OAAO;EACL,IAAI,EAAE,SAAS,EAAE,MAAM,KAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAM,EAAE;EAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,MAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAO,EAAE;EACnC,MAAM,EAAE,SAAS;GAAE,MAAM;GAAO,MAAM;GAAM,SAAS;EAAK,EAAE;CAC7D;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,OAAO;KACP,KAAK;KACL,GAAG;IACJ;GACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,OAAO;KACP,GAAG;IACJ;GACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,UAAU;KACV,OAAO;KACP,KAAK;KACL,GAAG;IACJ;GACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,KAAK;KACL,GAAG;IACJ;GACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;EACd;CACF;CAED,cAAc;EACZ,MAAM;EACN,WAAW;CACZ;AACF,EAAC"}

package/dist/cjs/components/drawer/index.cjs

@@ -0,0 +1,26 @@
+const require_components_drawer_drawer_style = require('./drawer.style.cjs');
+const require_components_drawer_use_drawer = require('./use-drawer.cjs');
+const require_components_drawer_drawer = require('./drawer.cjs');
+const require_components_drawer_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'Drawer', {
+  enumerable: true,
+  get: function () {
+    return require_components_drawer_namespace.namespace_exports;
+  }
+});
+exports.DrawerBody = require_components_drawer_drawer.DrawerBody;
+exports.DrawerCloseButton = require_components_drawer_drawer.DrawerCloseButton;
+exports.DrawerCloseTrigger = require_components_drawer_drawer.DrawerCloseTrigger;
+exports.DrawerContent = require_components_drawer_drawer.DrawerContent;
+exports.DrawerDragBar = require_components_drawer_drawer.DrawerDragBar;
+exports.DrawerFooter = require_components_drawer_drawer.DrawerFooter;
+exports.DrawerHeader = require_components_drawer_drawer.DrawerHeader;
+exports.DrawerOpenTrigger = require_components_drawer_drawer.DrawerOpenTrigger;
+exports.DrawerOverlay = require_components_drawer_drawer.DrawerOverlay;
+exports.DrawerPropsContext = require_components_drawer_drawer.DrawerPropsContext;
+exports.DrawerRoot = require_components_drawer_drawer.DrawerRoot;
+exports.DrawerTitle = require_components_drawer_drawer.DrawerTitle;
+exports.drawerStyle = require_components_drawer_drawer_style.drawerStyle;
+exports.useDrawer = require_components_drawer_use_drawer.useDrawer;
+exports.useDrawerPropsContext = require_components_drawer_drawer.useDrawerPropsContext;

package/dist/cjs/components/drawer/namespace.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_drawer_drawer = require('./drawer.cjs');
+
+//#region src/components/drawer/namespace.ts
+var namespace_exports = {};
+require_rolldown_runtime.__export(namespace_exports, {
+	Body: () => require_components_drawer_drawer.DrawerBody,
+	CloseButton: () => require_components_drawer_drawer.DrawerCloseButton,
+	CloseTrigger: () => require_components_drawer_drawer.DrawerCloseTrigger,
+	Content: () => require_components_drawer_drawer.DrawerContent,
+	DragBar: () => require_components_drawer_drawer.DrawerDragBar,
+	Footer: () => require_components_drawer_drawer.DrawerFooter,
+	Header: () => require_components_drawer_drawer.DrawerHeader,
+	OpenTrigger: () => require_components_drawer_drawer.DrawerOpenTrigger,
+	Overlay: () => require_components_drawer_drawer.DrawerOverlay,
+	PropsContext: () => require_components_drawer_drawer.DrawerPropsContext,
+	Root: () => require_components_drawer_drawer.DrawerRoot,
+	Title: () => require_components_drawer_drawer.DrawerTitle,
+	usePropsContext: () => require_components_drawer_drawer.useDrawerPropsContext
+});
+
+//#endregion
+exports.Body = require_components_drawer_drawer.DrawerBody;
+exports.CloseButton = require_components_drawer_drawer.DrawerCloseButton;
+exports.CloseTrigger = require_components_drawer_drawer.DrawerCloseTrigger;
+exports.Content = require_components_drawer_drawer.DrawerContent;
+exports.DragBar = require_components_drawer_drawer.DrawerDragBar;
+exports.Footer = require_components_drawer_drawer.DrawerFooter;
+exports.Header = require_components_drawer_drawer.DrawerHeader;
+exports.OpenTrigger = require_components_drawer_drawer.DrawerOpenTrigger;
+exports.Overlay = require_components_drawer_drawer.DrawerOverlay;
+exports.PropsContext = require_components_drawer_drawer.DrawerPropsContext;
+exports.Root = require_components_drawer_drawer.DrawerRoot;
+exports.Title = require_components_drawer_drawer.DrawerTitle;
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+exports.usePropsContext = require_components_drawer_drawer.useDrawerPropsContext;
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/drawer/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/drawer/namespace.ts"],"sourcesContent":["export {\n  DrawerBody as Body,\n  DrawerCloseButton as CloseButton,\n  DrawerCloseTrigger as CloseTrigger,\n  DrawerContent as Content,\n  DrawerDragBar as DragBar,\n  DrawerFooter as Footer,\n  DrawerHeader as Header,\n  DrawerOpenTrigger as OpenTrigger,\n  DrawerOverlay as Overlay,\n  DrawerPropsContext as PropsContext,\n  DrawerRoot as Root,\n  DrawerTitle as Title,\n  useDrawerPropsContext as usePropsContext,\n} from \"./drawer\"\nexport type {\n  DrawerCloseButtonProps as CloseButtonProps,\n  DrawerCloseTriggerProps as CloseTriggerProps,\n  DrawerContentProps as ContentProps,\n  DrawerDragBarProps as DragBarProps,\n  DrawerFooterProps as FooterProps,\n  DrawerHeaderProps as HeaderProps,\n  DrawerOpenTriggerProps as OpenTriggerProps,\n  DrawerOverlayProps as OverlayProps,\n  DrawerRootProps as RootProps,\n  DrawerTitleProps as TitleProps,\n} from \"./drawer\"\n"],"mappings":""}

package/dist/cjs/components/drawer/use-drawer.cjs

@@ -0,0 +1,83 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_components_modal_use_modal = require('../modal/use-modal.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/drawer/use-drawer.ts
+const useDrawer = ({ closeOnDrag = false, closeOnEsc, closeOnOverlay, dragConstraints = 0, dragElastic = .1, dragOffset = 80, dragVelocity = 100, placement = "inline-end", onEsc,...rest } = {}) => {
+	const { getContentProps: getModalContentProps, onClose,...modalProps } = require_components_modal_use_modal.useModal({
+		closeOnEsc,
+		closeOnOverlay,
+		onEsc,
+		...rest
+	});
+	const drag = (0, react.useMemo)(() => {
+		if (!closeOnDrag) return false;
+		switch (placement) {
+			case "block-start":
+			case "block-end": return "y";
+			case "inline-start":
+			case "inline-end": return "x";
+		}
+	}, [placement, closeOnDrag]);
+	const getDragRestriction = (0, react.useCallback)((value) => {
+		switch (placement) {
+			case "block-start": return { bottom: value };
+			case "block-end": return { top: value };
+			case "inline-start": return { right: value };
+			case "inline-end": return { left: value };
+		}
+	}, [placement]);
+	const onDragEnd = (0, react.useCallback)((_, info) => {
+		switch (placement) {
+			case "block-start":
+				if (info.velocity.y <= dragVelocity * -1 || info.offset.y <= dragOffset * -1) onClose();
+				break;
+			case "block-end":
+				if (info.velocity.y >= dragVelocity || info.offset.y >= dragOffset) onClose();
+				break;
+			case "inline-start":
+				if (info.velocity.x <= dragVelocity * -1 || info.offset.x <= dragOffset * -1) onClose();
+				break;
+			case "inline-end":
+				if (info.velocity.x >= dragVelocity || info.offset.x >= dragOffset) onClose();
+				break;
+		}
+	}, [
+		placement,
+		dragVelocity,
+		dragOffset,
+		onClose
+	]);
+	const getContentProps = (0, react.useCallback)((props = {}) => ({
+		drag,
+		dragConstraints: getDragRestriction(dragConstraints),
+		dragElastic: getDragRestriction(dragElastic),
+		dragMomentum: false,
+		dragSnapToOrigin: true,
+		...(0, require_utils_index.utils_exports.cast)(getModalContentProps((0, require_utils_index.utils_exports.cast)(props))),
+		onDragEnd: (0, require_utils_index.utils_exports.handlerAll)(props.onDragEnd, onDragEnd)
+	}), [
+		drag,
+		getDragRestriction,
+		dragConstraints,
+		dragElastic,
+		onDragEnd,
+		getModalContentProps
+	]);
+	const getDragBarProps = (0, react.useCallback)((props) => ({ ...props }), []);
+	return {
+		...modalProps,
+		closeOnDrag,
+		getContentProps,
+		getDragBarProps,
+		onClose
+	};
+};
+
+//#endregion
+exports.useDrawer = useDrawer;
+//# sourceMappingURL=use-drawer.cjs.map

package/dist/cjs/components/drawer/use-drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drawer.cjs","names":["value: number","onDragEnd: DragEndEventHandler","getContentProps: PropGetter<HTMLMotionProps<\"section\">>","getDragBarProps: PropGetter"],"sources":["../../../../src/components/drawer/use-drawer.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, SimplePlacement } from \"../../core\"\nimport type { UseModalProps } from \"../modal\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport { useCallback, useMemo } from \"react\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { useModal } from \"../modal\"\n\ntype DragEndEventHandler = Required<HTMLMotionProps>[\"onDragEnd\"]\n\nexport interface UseDrawerProps extends UseModalProps {\n  /**\n   * If `true`, then the drawer will close on drag.\n   *\n   * @default false\n   */\n  closeOnDrag?: boolean\n  /**\n   * Applies constraints on the permitted draggable area.\n   *\n   * @default 0\n   */\n  dragConstraints?: number\n  /**\n   * The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.\n   *\n   * @default 0.1\n   */\n  dragElastic?: number\n  /**\n   * Offset from being dragged to closing.\n   *\n   * @default 80\n   */\n  dragOffset?: number\n  /**\n   * Velocity of the drag that triggers close.\n   *\n   * @default 100\n   */\n  dragVelocity?: number\n  /**\n   * The placement of the drawer.\n   *\n   * @default 'inline-end'\n   */\n  placement?: SimplePlacement\n}\n\nexport const useDrawer = ({\n  closeOnDrag = false,\n  closeOnEsc,\n  closeOnOverlay,\n  dragConstraints = 0,\n  dragElastic = 0.1,\n  dragOffset = 80,\n  dragVelocity = 100,\n  placement = \"inline-end\",\n  onEsc,\n  ...rest\n}: UseDrawerProps = {}) => {\n  const {\n    getContentProps: getModalContentProps,\n    onClose,\n    ...modalProps\n  } = useModal({\n    closeOnEsc,\n    closeOnOverlay,\n    onEsc,\n    ...rest,\n  })\n\n  const drag = useMemo<HTMLMotionProps[\"drag\"]>(() => {\n    if (!closeOnDrag) return false\n\n    switch (placement) {\n      case \"block-start\":\n      case \"block-end\":\n        return \"y\"\n      case \"inline-start\":\n      case \"inline-end\":\n        return \"x\"\n    }\n  }, [placement, closeOnDrag])\n\n  const getDragRestriction = useCallback(\n    (value: number) => {\n      switch (placement) {\n        case \"block-start\":\n          return { bottom: value }\n        case \"block-end\":\n          return { top: value }\n        case \"inline-start\":\n          return { right: value }\n        case \"inline-end\":\n          return { left: value }\n      }\n    },\n    [placement],\n  )\n\n  const onDragEnd: DragEndEventHandler = useCallback(\n    (_, info) => {\n      switch (placement) {\n        case \"block-start\":\n          if (\n            info.velocity.y <= dragVelocity * -1 ||\n            info.offset.y <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"block-end\":\n          if (info.velocity.y >= dragVelocity || info.offset.y >= dragOffset)\n            onClose()\n          break\n\n        case \"inline-start\":\n          if (\n            info.velocity.x <= dragVelocity * -1 ||\n            info.offset.x <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"inline-end\":\n          if (info.velocity.x >= dragVelocity || info.offset.x >= dragOffset)\n            onClose()\n          break\n      }\n    },\n    [placement, dragVelocity, dragOffset, onClose],\n  )\n\n  const getContentProps: PropGetter<HTMLMotionProps<\"section\">> = useCallback(\n    (props = {}) => ({\n      drag,\n      dragConstraints: getDragRestriction(dragConstraints),\n      dragElastic: getDragRestriction(dragElastic),\n      dragMomentum: false,\n      dragSnapToOrigin: true,\n      ...cast<HTMLMotionProps<\"section\">>(\n        getModalContentProps(cast<HTMLProps<\"section\">>(props)),\n      ),\n      onDragEnd: handlerAll(props.onDragEnd, onDragEnd),\n    }),\n    [\n      drag,\n      getDragRestriction,\n      dragConstraints,\n      dragElastic,\n      onDragEnd,\n      getModalContentProps,\n    ],\n  )\n\n  const getDragBarProps: PropGetter = useCallback(\n    (props) => ({\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    ...modalProps,\n    closeOnDrag,\n    getContentProps,\n    getDragBarProps,\n    onClose,\n  }\n}\n\nexport type UseDrawerReturn = ReturnType<typeof useDrawer>\n"],"mappings":";;;;;;;;;AAkDA,MAAa,YAAY,CAAC,EACxB,cAAc,OACd,YACA,gBACA,kBAAkB,GAClB,cAAc,IACd,aAAa,IACb,eAAe,KACf,YAAY,cACZ,MACA,GAAG,MACY,GAAG,CAAE,MAAK;CACzB,MAAM,EACJ,iBAAiB,sBACjB,QACA,GAAG,YACJ,GAAG,4CAAS;EACX;EACA;EACA;EACA,GAAG;CACJ,EAAC;CAEF,MAAM,OAAO,mBAAiC,MAAM;AAClD,OAAK,YAAa,QAAO;AAEzB,UAAQ,WAAR;GACE,KAAK;GACL,KAAK,YACH,QAAO;GACT,KAAK;GACL,KAAK,aACH,QAAO;EACV;CACF,GAAE,CAAC,WAAW,WAAY,EAAC;CAE5B,MAAM,qBAAqB,uBACzB,CAACA,UAAkB;AACjB,UAAQ,WAAR;GACE,KAAK,cACH,QAAO,EAAE,QAAQ,MAAO;GAC1B,KAAK,YACH,QAAO,EAAE,KAAK,MAAO;GACvB,KAAK,eACH,QAAO,EAAE,OAAO,MAAO;GACzB,KAAK,aACH,QAAO,EAAE,MAAM,MAAO;EACzB;CACF,GACD,CAAC,SAAU,EACZ;CAED,MAAMC,YAAiC,uBACrC,CAAC,GAAG,SAAS;AACX,UAAQ,WAAR;GACE,KAAK;AACH,QACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,GAE9B,UAAS;AACX;GAEF,KAAK;AACH,QAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,WACtD,UAAS;AACX;GAEF,KAAK;AACH,QACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,GAE9B,UAAS;AACX;GAEF,KAAK;AACH,QAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,WACtD,UAAS;AACX;EACH;CACF,GACD;EAAC;EAAW;EAAc;EAAY;CAAQ,EAC/C;CAED,MAAMC,kBAA0D,uBAC9D,CAAC,QAAQ,CAAE,OAAM;EACf;EACA,iBAAiB,mBAAmB,gBAAgB;EACpD,aAAa,mBAAmB,YAAY;EAC5C,cAAc;EACd,kBAAkB;EAClB,GAAG,4CACD,qBAAqB,4CAA2B,MAAM,CAAC,CACxD;EACD,WAAW,kDAAW,MAAM,WAAW,UAAU;CAClD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMC,kBAA8B,uBAClC,CAAC,WAAW,EACV,GAAG,MACJ,IACD,CAAE,EACH;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA;CACD;AACF"}