@corvu-next/drawer 0.1.0

package/dist/index.js

@@ -0,0 +1,663 @@
+import { createComponent, mergeProps, memo } from 'solid-js/web';
+import Dialog2, { useContext, Portal } from '@corvu-next/dialog';
+import { dataIf, isFunction } from '@corvu-next/utils';
+import { createContext, merge, omit, createSignal, createMemo, createEffect, untrack, useContext as useContext$1 } from 'solid-js';
+import { afterPaint, combineStyle } from '@corvu-next/utils/dom';
+import { getScrollAtLocation } from '@corvu-next/utils/scroll';
+import { useKeyedContext, createKeyedContext } from '@corvu-next/utils/create/keyedContext';
+import createControllableSignal from '@corvu-next/utils/create/controllableSignal';
+import createOnce from '@corvu-next/utils/create/once';
+import createSize from '@corvu-next/utils/create/size';
+import createTransitionSize from '@corvu-next/transition-size';
+
+// src/Close.tsx
+var DrawerClose = (props) => {
+  return createComponent(Dialog2.Close, mergeProps({
+    "data-corvu-drawer-close": "",
+    "data-corvu-dialog-close": null
+  }, props));
+};
+var Close_default = DrawerClose;
+
+// src/lib.ts
+var resolveSnapPoint = (snapPoint, drawerSize, index, breakPoints) => {
+  if (index === void 0 || breakPoints === void 0) {
+    return {
+      value: snapPoint,
+      offset: resolvePoint(snapPoint, drawerSize)
+    };
+  }
+  const lowerBreakPoint = breakPoints[index - 1];
+  const upperBreakPoint = breakPoints[index];
+  return {
+    value: snapPoint,
+    offset: resolvePoint(snapPoint, drawerSize),
+    ...lowerBreakPoint !== void 0 && lowerBreakPoint !== null && {
+      lowerBreakPoint: resolvePoint(lowerBreakPoint, drawerSize)
+    },
+    ...upperBreakPoint !== void 0 && upperBreakPoint !== null && {
+      upperBreakPoint: resolvePoint(upperBreakPoint, drawerSize)
+    }
+  };
+};
+var resolvePoint = (point, drawerSize) => {
+  if (typeof point === "number") return drawerSize - point * drawerSize;
+  if (!point.endsWith("px")) {
+    throw new Error(
+      `[corvu] Snap and break points must be a number or a string ending with 'px'. Got ${point}`
+    );
+  }
+  return drawerSize - parseInt(point, 10);
+};
+var findClosestSnapPoint = (snapPoints, offset, offsetWithVelocity, allowSkippingSnapPoints) => {
+  const upperSnapPoint = findNearbySnapPoint(
+    "upper",
+    snapPoints,
+    allowSkippingSnapPoints ? offsetWithVelocity : offset
+  );
+  const lowerSnapPoint = findNearbySnapPoint(
+    "lower",
+    snapPoints,
+    allowSkippingSnapPoints ? offsetWithVelocity : offset
+  );
+  if (!upperSnapPoint) return lowerSnapPoint;
+  if (!lowerSnapPoint) return upperSnapPoint;
+  if (lowerSnapPoint.upperBreakPoint === void 0 || upperSnapPoint.lowerBreakPoint === void 0) {
+    return Math.abs(lowerSnapPoint.offset - offsetWithVelocity) < Math.abs(upperSnapPoint.offset - offsetWithVelocity) ? lowerSnapPoint : upperSnapPoint;
+  }
+  return offsetWithVelocity < upperSnapPoint.lowerBreakPoint ? lowerSnapPoint : upperSnapPoint;
+};
+var findNearbySnapPoint = (side, snapPoints, offset) => {
+  return snapPoints.reduce(
+    (previousSnapPoint, currentSnapPoint) => {
+      if (side == "upper" && currentSnapPoint.offset >= offset && (!previousSnapPoint || currentSnapPoint.offset < previousSnapPoint.offset)) {
+        return currentSnapPoint;
+      } else if (side == "lower" && currentSnapPoint.offset <= offset && (!previousSnapPoint || currentSnapPoint.offset > previousSnapPoint.offset)) {
+        return currentSnapPoint;
+      }
+      return previousSnapPoint;
+    },
+    void 0
+  );
+};
+var locationIsDraggable = (location, stopAt, pointerType) => {
+  let currentElement = location;
+  do {
+    if (currentElement.hasAttribute("data-corvu-no-drag") || currentElement.type === "range" || currentElement.tagName === "SELECT" && pointerType === "mouse")
+      return false;
+    if (currentElement === stopAt) break;
+    currentElement = currentElement.parentElement;
+  } while (currentElement);
+  return true;
+};
+var DrawerContext = createContext(null);
+var createDrawerContext = (contextId) => {
+  if (contextId === void 0) return DrawerContext;
+  const context = createKeyedContext(`drawer-${contextId}`);
+  return context;
+};
+var useDrawerContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext$1(DrawerContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: Drawer context not found. Make sure to wrap Drawer components in <Drawer.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(`drawer-${contextId}`);
+  if (!context) {
+    throw new Error(
+      `[corvu]: Drawer context with id "${contextId}" not found. Make sure to wrap Drawer components in <Drawer.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+var InternalDrawerContext = createContext(null);
+var createInternalDrawerContext = (contextId) => {
+  if (contextId === void 0) return InternalDrawerContext;
+  const context = createKeyedContext(
+    `drawer-internal-${contextId}`
+  );
+  return context;
+};
+var useInternalDrawerContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext$1(InternalDrawerContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: Drawer context not found. Make sure to wrap Drawer components in <Drawer.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `drawer-internal-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: Drawer context with id "${contextId}" not found. Make sure to wrap Drawer components in <Drawer.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+
+// src/Content.tsx
+var DrawerContent = (props) => {
+  const otherProps = omit(props, "contextId", "style");
+  let pointerDown = false;
+  let dragStartPos = null;
+  let currentPointerStart = [0, 0];
+  let cachedMoveTimestamp;
+  let cachedTranslate = 0;
+  const drawerContext = createMemo(() => useInternalDrawerContext(props.contextId));
+  const dialogContext = createMemo(() => Dialog2.useContext(props.contextId));
+  const snapPoints = createMemo(() => drawerContext().snapPoints().map((snapPoint, index) => resolveSnapPoint(snapPoint, drawerContext().drawerSize(), index, drawerContext().breakPoints())));
+  const transformValue = createMemo(() => {
+    switch (drawerContext().side()) {
+      case "top":
+        return `translate3d(0, ${-drawerContext().translate()}px, 0)`;
+      case "bottom":
+        return `translate3d(0, ${drawerContext().translate()}px, 0)`;
+      case "right":
+        return `translate3d(${drawerContext().translate()}px, 0, 0)`;
+      case "left":
+        return `translate3d(${-drawerContext().translate()}px, 0, 0)`;
+    }
+  });
+  const transitionHeight = createMemo(() => {
+    const transitionSize = drawerContext().transitionSize();
+    if (transitionSize === null) return void 0;
+    switch (drawerContext().side()) {
+      case "top":
+      case "bottom":
+        return `${transitionSize}px`;
+    }
+    return void 0;
+  });
+  const transitionWidth = createMemo(() => {
+    const transitionSize = drawerContext().transitionSize();
+    if (transitionSize === null) return void 0;
+    switch (drawerContext().side()) {
+      case "left":
+      case "right":
+        return `${transitionSize}px`;
+    }
+    return void 0;
+  });
+  createEffect(() => dialogContext().open(), (isOpen) => {
+    if (!isOpen) return;
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("touchmove", onTouchMove);
+    document.addEventListener("pointerup", onPointerUp);
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("contextmenu", onUp);
+    return () => {
+      document.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("pointerup", onPointerUp);
+      document.removeEventListener("touchend", onTouchEnd);
+      document.removeEventListener("contextmenu", onUp);
+    };
+  });
+  createEffect(() => drawerContext().transitionState(), (state) => {
+    if (state === "closing") {
+      drawerContext().setIsDragging(false);
+    }
+  });
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    if (!locationIsDraggable(event.target, dialogContext().contentRef(), event.pointerType)) return;
+    if (drawerContext().transitionState() === "closing") return;
+    pointerDown = true;
+    if (drawerContext().handleScrollableElements()) {
+      currentPointerStart = [event.clientX, event.clientY];
+    }
+  };
+  const onPointerMove = (event) => {
+    onMove(event.target, event.clientX, event.clientY);
+  };
+  const onTouchMove = (event) => {
+    if (!event.touches[0]) return;
+    onMove(event.target, event.touches[0].clientX, event.touches[0].clientY);
+  };
+  const onMove = (target, x, y) => {
+    if (!pointerDown) return;
+    if (!drawerContext().isDragging() || dragStartPos === null) {
+      const selection = window.getSelection();
+      if (selection && selection.toString().length > 0) {
+        onUp();
+        return;
+      }
+      if (drawerContext().handleScrollableElements()) {
+        const delta2 = [x, y].map((pointer, i) => currentPointerStart[i] - pointer);
+        const axis = Math.abs(delta2[0]) > Math.abs(delta2[1]) ? "x" : "y";
+        const axisDelta = axis === "x" ? delta2[0] : delta2[1];
+        if (Math.abs(axisDelta) < 0.3) return;
+        const wrapper = dialogContext().contentRef();
+        const [availableScroll, availableScrollTop] = getScrollAtLocation(target, axis, wrapper);
+        if (axisDelta > 0 && Math.abs(availableScroll) > 1 || axisDelta < 0 && Math.abs(availableScrollTop) > 0) {
+          onUp();
+          return;
+        }
+      }
+      switch (drawerContext().side()) {
+        case "top":
+        case "bottom":
+          dragStartPos = y;
+          break;
+        case "right":
+        case "left":
+          dragStartPos = x;
+      }
+      cachedMoveTimestamp = /* @__PURE__ */ new Date();
+      cachedTranslate = drawerContext().translate();
+      drawerContext().setIsDragging(true);
+      drawerContext().setTransitionState(null);
+    }
+    let delta;
+    switch (drawerContext().side()) {
+      case "top":
+        delta = -(dragStartPos - y);
+        break;
+      case "bottom":
+        delta = dragStartPos - y;
+        break;
+      case "right":
+        delta = dragStartPos - x;
+        break;
+      case "left":
+        delta = -(dragStartPos - x);
+        break;
+    }
+    delta -= drawerContext().resolvedActiveSnapPoint().offset;
+    if (delta > 0) delta = drawerContext().dampFunction(delta);
+    const now = /* @__PURE__ */ new Date();
+    if (now.getTime() - cachedMoveTimestamp.getTime() > drawerContext().velocityCacheReset()) {
+      cachedMoveTimestamp = now;
+      cachedTranslate = drawerContext().translate();
+    }
+    drawerContext().setTranslate(-delta);
+  };
+  const onPointerUp = (event) => {
+    if (event.pointerType !== "touch") onUp();
+  };
+  const onTouchEnd = (event) => {
+    if (event.touches.length === 0) onUp();
+  };
+  const onUp = () => {
+    pointerDown = false;
+    if (!drawerContext().isDragging()) return;
+    const now = /* @__PURE__ */ new Date();
+    const velocity = drawerContext().velocityFunction(-(cachedTranslate - drawerContext().translate()), now.getTime() - cachedMoveTimestamp.getTime() || 1);
+    const translateWithVelocity = drawerContext().translate() * velocity;
+    const closestSnapPoint = findClosestSnapPoint(snapPoints(), drawerContext().translate(), translateWithVelocity, drawerContext().allowSkippingSnapPoints());
+    drawerContext().setTransitionState("snapping");
+    drawerContext().setIsDragging(false);
+    drawerContext().setActiveSnapPoint(closestSnapPoint.value);
+    if (closestSnapPoint.offset === drawerContext().drawerSize()) {
+      dialogContext().setOpen(false);
+    } else {
+      drawerContext().setTranslate(closestSnapPoint.offset);
+      const transitionDuration = parseFloat(drawerContext().drawerStyles().transitionDuration);
+      if (transitionDuration === 0) {
+        drawerContext().setTransitionState(null);
+      }
+    }
+  };
+  return createComponent(Dialog2.Content, mergeProps({
+    get contextId() {
+      return props.contextId;
+    },
+    get style() {
+      return combineStyle({
+        transform: transformValue(),
+        "transition-duration": drawerContext().isDragging() ? "0ms" : void 0,
+        height: transitionHeight(),
+        width: transitionWidth()
+      }, props.style);
+    },
+    onPointerDown,
+    onTouchStart: (e) => {
+      if (e.touches.length !== 1) return;
+      dragStartPos = null;
+    },
+    onTransitionEnd: (e) => {
+      if (e.target !== dialogContext().contentRef()) return;
+      if (drawerContext().transitionState() === "closing") {
+        drawerContext().closeDrawer();
+      }
+      if (drawerContext().transitionState() !== "resizing") {
+        drawerContext().setTransitionState(null);
+      }
+    },
+    get ["data-side"]() {
+      return drawerContext().side();
+    },
+    get ["data-opening"]() {
+      return dataIf(drawerContext().transitionState() === "opening");
+    },
+    get ["data-closing"]() {
+      return dataIf(drawerContext().transitionState() === "closing");
+    },
+    get ["data-snapping"]() {
+      return dataIf(drawerContext().transitionState() === "snapping");
+    },
+    get ["data-transitioning"]() {
+      return dataIf(drawerContext().isTransitioning());
+    },
+    get ["data-resizing"]() {
+      return dataIf(drawerContext().transitionState() === "resizing");
+    },
+    "data-corvu-drawer-content": "",
+    "data-corvu-dialog-content": null
+  }, otherProps));
+};
+var Content_default = DrawerContent;
+var DrawerDescription = (props) => {
+  return createComponent(Dialog2.Description, mergeProps({
+    "data-corvu-drawer-description": "",
+    "data-corvu-dialog-description": null
+  }, props));
+};
+var Description_default = DrawerDescription;
+var DrawerLabel = (props) => {
+  return createComponent(Dialog2.Label, mergeProps({
+    "data-corvu-drawer-label": "",
+    "data-corvu-dialog-label": null
+  }, props));
+};
+var Label_default = DrawerLabel;
+var DrawerOverlay = (props) => {
+  const otherProps = omit(props, "contextId");
+  const drawerContext = createMemo(() => useInternalDrawerContext(props.contextId));
+  return createComponent(Dialog2.Overlay, mergeProps({
+    get contextId() {
+      return props.contextId;
+    },
+    get ["data-side"]() {
+      return drawerContext().side();
+    },
+    get ["data-opening"]() {
+      return dataIf(drawerContext().transitionState() === "opening");
+    },
+    get ["data-closing"]() {
+      return dataIf(drawerContext().transitionState() === "closing");
+    },
+    get ["data-snapping"]() {
+      return dataIf(drawerContext().transitionState() === "snapping");
+    },
+    get ["data-transitioning"]() {
+      return dataIf(drawerContext().isTransitioning());
+    },
+    get ["data-resizing"]() {
+      return dataIf(drawerContext().transitionState() === "resizing");
+    },
+    "data-corvu-drawer-overlay": "",
+    "data-corvu-dialog-overlay": null
+  }, otherProps));
+};
+var Overlay_default = DrawerOverlay;
+var DrawerRoot = (props) => {
+  const defaultedProps = merge({
+    initialOpen: false,
+    snapPoints: [0, 1],
+    breakPoints: [null],
+    defaultSnapPoint: 1,
+    side: "bottom",
+    dampFunction: (distance) => 6 * Math.log(distance + 1),
+    velocityFunction: (distance, time) => {
+      const velocity = distance / time;
+      return velocity < 1 && velocity > -1 ? 1 : velocity;
+    },
+    velocityCacheReset: 200,
+    allowSkippingSnapPoints: true,
+    handleScrollableElements: true,
+    transitionResize: false,
+    closeOnOutsidePointer: true,
+    allowPinchZoom: false
+  }, props);
+  const otherProps = omit(defaultedProps, "snapPoints", "breakPoints", "defaultSnapPoint", "activeSnapPoint", "onActiveSnapPointChange", "side", "dampFunction", "velocityFunction", "velocityCacheReset", "allowSkippingSnapPoints", "handleScrollableElements", "transitionResize", "open", "initialOpen", "onOpenChange", "closeOnOutsidePointer", "contextId", "children");
+  const [open, setOpen] = createControllableSignal({
+    value: () => defaultedProps.open,
+    initialValue: defaultedProps.initialOpen,
+    onChange: defaultedProps.onOpenChange
+  });
+  const [activeSnapPoint, setActiveSnapPoint] = createControllableSignal({
+    value: () => defaultedProps.activeSnapPoint,
+    initialValue: 0,
+    onChange: defaultedProps.onActiveSnapPointChange
+  });
+  const [dialogContext, setDialogContext] = createSignal();
+  const {
+    transitioning: sizeTransitioning,
+    transitionSize
+  } = createTransitionSize({
+    element: () => dialogContext()?.contentRef() ?? null,
+    enabled: () => open() && defaultedProps.transitionResize,
+    dimension: () => {
+      switch (defaultedProps.side) {
+        case "top":
+        case "bottom":
+          return "height";
+        case "left":
+        case "right":
+          return "width";
+      }
+    }
+  });
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [transitionState, setTransitionState] = createSignal(() => {
+    if (sizeTransitioning()) return "resizing";
+    return null;
+  });
+  const drawerStyles = createMemo(() => {
+    const contentRef = dialogContext()?.contentRef();
+    if (!contentRef) return void 0;
+    return getComputedStyle(contentRef);
+  });
+  const [transitionAwareOpen, setTransitionAwareOpen] = createSignal(false);
+  createEffect(() => open(), (_open) => {
+    untrack(() => {
+      if (transitionAwareOpen() === _open) {
+        return;
+      }
+      if (_open) {
+        setTransitionAwareOpen(true);
+        afterPaint(() => {
+          setTransitionState("opening");
+          setActiveSnapPoint(defaultedProps.defaultSnapPoint);
+          const transitionDuration = parseFloat(drawerStyles().transitionDuration);
+          if (transitionDuration === 0) {
+            setTransitionState(null);
+          }
+        });
+      } else {
+        setTransitionState("closing");
+        setActiveSnapPoint(0);
+        afterPaint(() => {
+          const transitionDuration = parseFloat(drawerStyles().transitionDuration);
+          if (transitionDuration === 0) {
+            closeDrawer();
+          }
+        });
+      }
+    });
+  });
+  const closeDrawer = () => {
+    setTransitionAwareOpen(false);
+    setTransitionState(null);
+  };
+  const drawerSize = createSize({
+    element: () => dialogContext()?.contentRef() ?? null,
+    dimension: () => {
+      switch (defaultedProps.side) {
+        case "top":
+        case "bottom":
+          return "height";
+        case "left":
+        case "right":
+          return "width";
+      }
+    }
+  });
+  const resolvedActiveSnapPoint = createMemo(() => resolveSnapPoint(activeSnapPoint(), drawerSize()));
+  const [translate, setTranslate] = createSignal(() => resolvedActiveSnapPoint().offset);
+  const openPercentage = createMemo(() => {
+    if (!drawerSize()) return 0;
+    return (drawerSize() - translate()) / drawerSize();
+  });
+  const childrenProps = {
+    get snapPoints() {
+      return defaultedProps.snapPoints;
+    },
+    get breakPoints() {
+      return defaultedProps.breakPoints;
+    },
+    get defaultSnapPoint() {
+      return defaultedProps.defaultSnapPoint;
+    },
+    get activeSnapPoint() {
+      return activeSnapPoint();
+    },
+    setActiveSnapPoint,
+    get side() {
+      return defaultedProps.side;
+    },
+    get isDragging() {
+      return isDragging();
+    },
+    get isTransitioning() {
+      return transitionState() !== null;
+    },
+    get transitionState() {
+      return transitionState();
+    },
+    get openPercentage() {
+      return openPercentage();
+    },
+    get translate() {
+      return translate();
+    },
+    get velocityCacheReset() {
+      return defaultedProps.velocityCacheReset;
+    },
+    get allowSkippingSnapPoints() {
+      return defaultedProps.allowSkippingSnapPoints;
+    },
+    get handleScrollableElements() {
+      return defaultedProps.handleScrollableElements;
+    },
+    get transitionResize() {
+      return defaultedProps.transitionResize;
+    }
+  };
+  const memoizedChildren = createOnce(() => defaultedProps.children);
+  const resolveChildren = (dialogChildrenProps) => {
+    setDialogContext(Dialog2.useContext(defaultedProps.contextId));
+    const children = memoizedChildren()();
+    if (isFunction(children)) {
+      const mergedProps = merge(dialogChildrenProps, childrenProps);
+      return children(mergedProps);
+    }
+    return children;
+  };
+  const memoizedDrawerRoot = createMemo(() => {
+    const DrawerContext2 = createDrawerContext(defaultedProps.contextId);
+    const InternalDrawerContext2 = createInternalDrawerContext(defaultedProps.contextId);
+    return untrack(() => createComponent(DrawerContext2, {
+      value: {
+        snapPoints: () => defaultedProps.snapPoints,
+        breakPoints: () => defaultedProps.breakPoints,
+        defaultSnapPoint: () => defaultedProps.defaultSnapPoint,
+        activeSnapPoint,
+        setActiveSnapPoint,
+        side: () => defaultedProps.side,
+        isDragging,
+        isTransitioning: () => transitionState() !== null,
+        transitionState,
+        openPercentage,
+        translate,
+        velocityCacheReset: () => defaultedProps.velocityCacheReset,
+        allowSkippingSnapPoints: () => defaultedProps.allowSkippingSnapPoints,
+        handleScrollableElements: () => defaultedProps.handleScrollableElements,
+        transitionResize: () => defaultedProps.transitionResize
+      },
+      get children() {
+        return createComponent(InternalDrawerContext2, {
+          get value() {
+            return {
+              snapPoints: () => defaultedProps.snapPoints,
+              breakPoints: () => defaultedProps.breakPoints,
+              defaultSnapPoint: () => defaultedProps.defaultSnapPoint,
+              activeSnapPoint,
+              setActiveSnapPoint,
+              side: () => defaultedProps.side,
+              isDragging,
+              isTransitioning: () => transitionState() !== null,
+              transitionState,
+              openPercentage,
+              translate,
+              velocityCacheReset: () => defaultedProps.velocityCacheReset,
+              allowSkippingSnapPoints: () => defaultedProps.allowSkippingSnapPoints,
+              handleScrollableElements: () => defaultedProps.handleScrollableElements,
+              transitionResize: () => defaultedProps.transitionResize,
+              dampFunction: defaultedProps.dampFunction,
+              velocityFunction: defaultedProps.velocityFunction,
+              setIsDragging,
+              setTranslate,
+              drawerSize,
+              resolvedActiveSnapPoint,
+              drawerStyles,
+              setTransitionState,
+              transitionSize,
+              closeDrawer
+            };
+          },
+          get children() {
+            return createComponent(Dialog2, mergeProps({
+              get open() {
+                return transitionAwareOpen();
+              },
+              onOpenChange: setOpen,
+              get contextId() {
+                return defaultedProps.contextId;
+              },
+              get closeOnOutsidePointer() {
+                return memo(() => !!!isDragging())() && defaultedProps.closeOnOutsidePointer;
+              }
+            }, otherProps, {
+              children: (dialogChildrenProps) => resolveChildren(dialogChildrenProps)
+            }));
+          }
+        });
+      }
+    }));
+  });
+  return memoizedDrawerRoot;
+};
+var Root_default = DrawerRoot;
+var DrawerTrigger = (props) => {
+  return createComponent(Dialog2.Trigger, mergeProps({
+    "data-corvu-drawer-trigger": "",
+    "data-corvu-dialog-trigger": null
+  }, props));
+};
+var Trigger_default = DrawerTrigger;
+
+// src/index.ts
+var Drawer = Object.assign(Root_default, {
+  Trigger: Trigger_default,
+  Portal,
+  Overlay: Overlay_default,
+  Content: Content_default,
+  Label: Label_default,
+  Description: Description_default,
+  Close: Close_default,
+  useContext: useDrawerContext,
+  useDialogContext: useContext
+});
+var index_default = Drawer;
+
+export { index_default as default };