@moduix/react 1.1.0

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,133 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import Dialog_module_default from "./Dialog.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Dialog } from "@ark-ui/react/dialog";
+//#region src/components/dialog/Dialog.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close dialog";
+function DialogRoot({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
+	});
+}
+function DialogRootProvider({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Dialog.RootProvider, { ...props })
+	});
+}
+const DialogTrigger = forwardRef(function DialogTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		ref,
+		asChild,
+		"data-slot": "dialog-trigger",
+		className: clsx(!asChild && Dialog_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const DialogBackdrop = forwardRef(function DialogBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		ref,
+		"data-slot": "dialog-backdrop",
+		className: clsx(Dialog_module_default.backdrop, normalizeClassName(className)),
+		...props
+	}) });
+});
+const DialogPositioner = forwardRef(function DialogPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Positioner, {
+		ref,
+		"data-slot": "dialog-positioner",
+		className: clsx(Dialog_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const DialogContent = forwardRef(function DialogContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Content, {
+		ref,
+		"data-slot": "dialog-content",
+		className: clsx(Dialog_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const DialogTitle = forwardRef(function DialogTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		ref,
+		"data-slot": "dialog-title",
+		className: clsx(Dialog_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		ref,
+		"data-slot": "dialog-description",
+		className: clsx(Dialog_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const DialogCloseTrigger = forwardRef(function DialogCloseTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+		ref,
+		asChild,
+		"data-slot": "dialog-close-trigger",
+		className: clsx(!asChild && Dialog_module_default.closeTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const DialogCloseIcon = forwardRef(function DialogCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "dialog-close-icon",
+			"aria-label": ariaLabel,
+			className: clsx(Dialog_module_default.closeIcon, normalizeClassName(className)),
+			children
+		})
+	});
+});
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: clsx(Dialog_module_default.header, className),
+		...props
+	});
+}
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: clsx(Dialog_module_default.body, className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: clsx(Dialog_module_default.footer, className),
+		...props
+	});
+}
+const Dialog$1 = Object.assign(DialogRoot, {
+	Root: DialogRoot,
+	RootProvider: DialogRootProvider,
+	Trigger: DialogTrigger,
+	Backdrop: DialogBackdrop,
+	Positioner: DialogPositioner,
+	Content: DialogContent,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	CloseTrigger: DialogCloseTrigger,
+	CloseIcon: DialogCloseIcon,
+	Header: DialogHeader,
+	Body: DialogBody,
+	Footer: DialogFooter
+});
+//#endregion
+export { Dialog$1 as Dialog };

package/dist/components/dialog/Dialog.module.js

@@ -0,0 +1,21 @@
+import './Dialog.css';
+//#region src/components/dialog/Dialog.module.css
+var Dialog_module_default = {
+	"backdrop": "gV-U6q_backdrop",
+	"body": "gV-U6q_body",
+	"closeIcon": "gV-U6q_closeIcon",
+	"closeTrigger": "gV-U6q_closeTrigger",
+	"content": "gV-U6q_content",
+	"description": "gV-U6q_description",
+	"dialog-backdrop-in": "gV-U6q_dialog-backdrop-in",
+	"dialog-backdrop-out": "gV-U6q_dialog-backdrop-out",
+	"dialog-content-in": "gV-U6q_dialog-content-in",
+	"dialog-content-out": "gV-U6q_dialog-content-out",
+	"footer": "gV-U6q_footer",
+	"header": "gV-U6q_header",
+	"positioner": "gV-U6q_positioner",
+	"title": "gV-U6q_title",
+	"trigger": "gV-U6q_trigger"
+};
+//#endregion
+export { Dialog_module_default as default };

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { Dialog, DialogRootProps, DialogRootProviderProps } from "./Dialog.js";
+export { Dialog, type DialogRootProps, type DialogRootProviderProps };

package/dist/components/drawer/Drawer.css

@@ -0,0 +1,482 @@
+@layer ui.components {
+  .OP_kSq_trigger, .OP_kSq_closeTrigger {
+    box-sizing: border-box;
+    min-height: var(--drawer-control-height, var(--size-lg));
+    padding: var(--drawer-control-padding-y, .5rem) var(--drawer-control-padding-x, .875rem);
+    border: var(--drawer-control-border-width, var(--border-width-sm)) solid
+      var(--drawer-control-border-color, var(--color-border));
+    border-radius: var(--drawer-control-radius, var(--radius-md));
+    background-color: var(--drawer-control-bg, var(--color-background));
+    color: var(--drawer-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--drawer-control-font-size, var(--text-md));
+    line-height: var(--drawer-control-line-height, var(--line-height-text-md));
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default);
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--drawer-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--drawer-focus-ring-width, var(--drawer-control-border-width, var(--border-width-sm)))
+        solid var(--drawer-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--drawer-focus-ring-width, var(--drawer-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--opacity-disabled);
+    }
+  }
+
+  .OP_kSq_backdrop {
+    z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
+    background-color: var(--drawer-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--drawer-backdrop-blur, 4px)));
+    opacity: calc(1 - var(--drawer-swipe-progress, 0));
+    transition: opacity calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out),
+      backdrop-filter calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out);
+    position: fixed;
+    inset: 0;
+
+    &[data-state="open"] {
+      animation: OP_kSq_drawer-backdrop-in var(--drawer-backdrop-transition, var(--transition-spring));
+    }
+
+    &[data-state="closed"] {
+      animation: OP_kSq_drawer-backdrop-out var(--drawer-backdrop-transition, var(--transition-spring));
+      animation-fill-mode: forwards;
+    }
+
+    &[data-state="open"][data-swiping] {
+      transition-duration: 0s;
+    }
+
+    &[hidden]:has( ~ .OP_kSq_positioner:not([hidden])) {
+      display: block;
+    }
+  }
+
+  .OP_kSq_positioner {
+    box-sizing: border-box;
+    z-index: calc(var(--z-modal) + var(--layer-index, 0));
+    overscroll-behavior: contain;
+    padding: var(--drawer-positioner-padding, 0);
+    justify-content: center;
+    align-items: flex-end;
+    display: flex;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+
+    &[data-swipe-direction="up"] {
+      align-items: flex-start;
+    }
+
+    &[data-swipe-direction="left"] {
+      justify-content: flex-start;
+      align-items: stretch;
+    }
+
+    &[data-swipe-direction="right"] {
+      justify-content: flex-end;
+      align-items: stretch;
+    }
+
+    &:not([hidden]) {
+      & .OP_kSq_content[hidden] {
+        display: flex;
+      }
+    }
+  }
+
+  .OP_kSq_content {
+    --drawer-bleed: var(--drawer-bleed-size, 3rem);
+    box-sizing: border-box;
+    width: min(var(--drawer-width, 100%), 100vw);
+    height: var(--drawer-size, 100%);
+    max-height: var(--drawer-max-height, 80dvh);
+    padding: var(--drawer-padding-y, var(--spacing-2)) var(--drawer-padding-x, var(--spacing-6))
+      calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-bottom, 0px));
+    border: var(--drawer-border-width, var(--border-width-sm)) solid
+      var(--drawer-border-color, var(--color-border));
+    border-radius: var(--drawer-radius, var(--radius-xl)) var(--drawer-radius, var(--radius-xl)) 0 0;
+    background-color: var(--drawer-bg, var(--color-popover));
+    color: var(--drawer-color, var(--color-popover-foreground));
+    box-shadow: var(--drawer-shadow, var(--shadow-lg));
+    overscroll-behavior: contain;
+    transform-origin: bottom;
+    transition: transform calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out),
+      height calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out),
+      scale var(--drawer-nested-transition, var(--drawer-transition, var(--transition-spring))),
+      translate var(--drawer-nested-transition, var(--drawer-transition, var(--transition-spring)));
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    translate: 0;
+    scale: 1;
+
+    &:after {
+      inset-inline: 0;
+      height: var(--drawer-bleed);
+      background-color: inherit;
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      top: 100%;
+    }
+
+    &[data-state="open"] {
+      animation: OP_kSq_drawer-content-in-down var(--drawer-transition, var(--transition-spring));
+    }
+
+    &[data-state="closed"] {
+      animation: OP_kSq_drawer-content-out-down var(--drawer-transition, var(--transition-spring));
+      animation-fill-mode: forwards;
+    }
+
+    &[data-state="open"][data-swiping], &[data-nested-drawer-swiping] {
+      transition-duration: 0s;
+    }
+
+    &[data-dragging] {
+      user-select: none;
+    }
+
+    &[data-swipe-direction="up"] {
+      transform-origin: top;
+      padding-top: calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-top, 0px));
+      padding-bottom: var(--drawer-padding-y, var(--spacing-4));
+      border-radius: 0 0 var(--drawer-radius, var(--radius-xl))
+        var(--drawer-radius, var(--radius-xl));
+
+      &:after {
+        top: auto;
+        bottom: 100%;
+      }
+
+      &[data-state="open"] {
+        animation-name: OP_kSq_drawer-content-in-up;
+      }
+
+      &[data-state="closed"] {
+        animation-name: OP_kSq_drawer-content-out-up;
+      }
+    }
+
+    &[data-swipe-direction="left"], &[data-swipe-direction="right"] {
+      width: min(var(--drawer-side-width, 22rem), calc(100vw - var(--spacing-8)));
+      height: var(--drawer-side-height, 100%);
+      max-height: none;
+      padding: var(--drawer-padding-y, var(--spacing-6)) var(--drawer-padding-x, var(--spacing-6));
+
+      &:after {
+        inset-block: 0;
+        inset-inline: auto;
+        width: var(--drawer-bleed);
+        height: auto;
+        top: 0;
+      }
+    }
+
+    &[data-swipe-direction="left"] {
+      transform-origin: 0;
+      border-radius: 0 var(--drawer-radius, var(--radius-xl)) var(--drawer-radius, var(--radius-xl))
+        0;
+
+      &:after {
+        right: 100%;
+      }
+
+      &[data-state="open"] {
+        animation-name: OP_kSq_drawer-content-in-left;
+      }
+
+      &[data-state="closed"] {
+        animation-name: OP_kSq_drawer-content-out-left;
+      }
+    }
+
+    &[data-swipe-direction="right"] {
+      transform-origin: 100%;
+      border-radius: var(--drawer-radius, var(--radius-xl)) 0 0
+        var(--drawer-radius, var(--radius-xl));
+
+      &:after {
+        left: 100%;
+      }
+
+      &[data-state="open"] {
+        animation-name: OP_kSq_drawer-content-in-right;
+      }
+
+      &[data-state="closed"] {
+        animation-name: OP_kSq_drawer-content-out-right;
+      }
+    }
+
+    &[data-nested-drawer-open] {
+      scale: calc(1 - var(--drawer-nested-scale-step, .05) * var(--nested-drawers, 0));
+    }
+
+    &[data-swipe-direction="down"][data-nested-drawer-open] {
+      translate: 0
+        calc(-1 * var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0));
+    }
+
+    &[data-swipe-direction="up"][data-nested-drawer-open] {
+      translate: 0
+        calc(var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0));
+    }
+
+    &[data-swipe-direction="left"][data-nested-drawer-open] {
+      translate: calc(var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0))
+        0;
+    }
+
+    &[data-swipe-direction="right"][data-nested-drawer-open] {
+      translate: calc(-1 * var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0))
+        0;
+    }
+  }
+
+  .OP_kSq_grabber {
+    width: 100%;
+    padding: var(--drawer-grabber-padding, var(--spacing-3)) 0;
+    cursor: grab;
+    user-select: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    :where(.OP_kSq_content[data-swipe-direction="left"], .OP_kSq_content[data-swipe-direction="right"]) & {
+      display: none;
+    }
+  }
+
+  .OP_kSq_grabberIndicator {
+    width: var(--drawer-grabber-indicator-width, 3rem);
+    height: var(--drawer-grabber-indicator-height, .25rem);
+    border-radius: var(--drawer-grabber-indicator-radius, var(--radius-full));
+    background-color: var(--drawer-grabber-indicator-bg, var(--color-muted-foreground));
+    opacity: var(--drawer-grabber-indicator-opacity, .45);
+    transition: background-color var(--transition-default),
+      opacity var(--transition-default);
+
+    @media (hover: hover) {
+      .OP_kSq_grabber:hover & {
+        opacity: var(--drawer-grabber-indicator-opacity-hover, .7);
+      }
+    }
+  }
+
+  .OP_kSq_header {
+    align-items: start;
+    gap: var(--drawer-header-gap, var(--spacing-1));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+
+    & > [data-slot="drawer-title"] {
+      grid-column: 1;
+    }
+
+    & > [data-slot="drawer-close-trigger"], & > [data-slot="drawer-close-icon"] {
+      grid-column: 2;
+      justify-self: end;
+    }
+
+    & > [data-slot="drawer-description"] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .OP_kSq_title {
+    color: var(--drawer-title-color, var(--drawer-color, var(--color-popover-foreground)));
+    font-size: var(--drawer-title-font-size, var(--text-lg));
+    font-weight: var(--drawer-title-font-weight, var(--weight-semibold));
+    line-height: var(--drawer-title-line-height, var(--line-height-text-lg));
+    margin: 0;
+  }
+
+  .OP_kSq_description, .OP_kSq_body {
+    color: var(--drawer-description-color, var(--color-muted-foreground));
+    font-size: var(--drawer-description-font-size, var(--text-md));
+    line-height: var(--drawer-description-line-height, var(--line-height-text-md));
+  }
+
+  .OP_kSq_description {
+    margin: 0;
+  }
+
+  .OP_kSq_body {
+    min-height: 0;
+    margin-top: var(--drawer-body-margin-top, var(--spacing-4));
+    overflow-y: auto;
+  }
+
+  .OP_kSq_footer {
+    justify-content: flex-end;
+    gap: var(--drawer-footer-gap, var(--spacing-2));
+    margin-top: var(--drawer-footer-margin-top, var(--spacing-6));
+    display: flex;
+  }
+
+  .OP_kSq_closeIcon {
+    --close-button-size: var(--drawer-close-icon-size, 1.75rem);
+    --close-button-radius: var(--drawer-close-icon-radius, var(--radius-md));
+    --close-button-color: var(--drawer-close-icon-color, var(--drawer-description-color, var(--color-muted-foreground)));
+    --close-button-color-hover: var(--drawer-close-icon-color-hover, var(--drawer-color, var(--color-popover-foreground)));
+    --close-button-bg: var(--drawer-close-icon-bg, transparent);
+    --close-button-bg-hover: var(--drawer-close-icon-bg-hover, var(--color-accent));
+    --close-button-focus-ring-color: var(--drawer-close-icon-focus-ring-color, var(--drawer-focus-ring-color, var(--color-ring)));
+    --close-button-icon-size: var(--drawer-close-icon-glyph-size, .75rem);
+  }
+
+  .OP_kSq_swipeArea {
+    z-index: var(--z-modal);
+    touch-action: none;
+    position: fixed;
+
+    &[data-swipe-direction="up"] {
+      height: var(--drawer-swipe-area-size, var(--spacing-10));
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &[data-swipe-direction="down"] {
+      height: var(--drawer-swipe-area-size, var(--spacing-10));
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &[data-swipe-direction="left"] {
+      width: var(--drawer-swipe-area-size, var(--spacing-10));
+      top: 0;
+      bottom: 0;
+      right: 0;
+    }
+
+    &[data-swipe-direction="right"] {
+      width: var(--drawer-swipe-area-size, var(--spacing-10));
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .OP_kSq_indentBackground {
+    background: var(--drawer-indent-background-bg, var(--color-foreground));
+    opacity: var(--drawer-indent-background-opacity, 0);
+    pointer-events: none;
+    transition: opacity var(--drawer-indent-transition, var(--transition-spring));
+    position: absolute;
+    inset: 0;
+
+    &[data-active] {
+      opacity: calc(var(--drawer-indent-background-opacity-active, 1) * (1 - var(--drawer-swipe-progress, 0)));
+    }
+  }
+
+  .OP_kSq_indent {
+    transform-origin: top;
+    transition: transform var(--drawer-indent-transition, var(--transition-spring)),
+      border-radius var(--drawer-indent-transition, var(--transition-spring));
+    position: relative;
+    transform: translateY(0) scale(1);
+
+    &[data-active] {
+      border-radius: var(--drawer-indent-radius-active, var(--radius-lg))
+        var(--drawer-indent-radius-active, var(--radius-lg)) 0 0;
+      transform: translateY(calc(var(--drawer-indent-translate-y-active, var(--spacing-2)) *
+              (1 - var(--drawer-swipe-progress, 0))))
+        scale(calc(var(--drawer-indent-scale-active, .97) +
+              (1 - var(--drawer-indent-scale-active, .97)) * var(--drawer-swipe-progress, 0)));
+    }
+  }
+
+  @keyframes OP_kSq_drawer-backdrop-in {
+    from {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  @keyframes OP_kSq_drawer-backdrop-out {
+    to {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-in-down {
+    from {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-out-down {
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-in-up {
+    from {
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-out-up {
+    to {
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-in-left {
+    from {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-out-left {
+    to {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-in-right {
+    from {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+
+  @keyframes OP_kSq_drawer-content-out-right {
+    to {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+}

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,56 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { Drawer } from "@ark-ui/react/drawer";
+
+//#region src/components/drawer/Drawer.d.ts
+type DrawerRootProps = ComponentProps<typeof Drawer.Root> & OverlayPortalProps;
+type DrawerRootProviderProps = ComponentProps<typeof Drawer.RootProvider> & OverlayPortalProps;
+declare function DrawerRoot({
+  lazyMount,
+  portalled,
+  portalRef,
+  unmountOnExit,
+  ...props
+}: DrawerRootProps): import("react").JSX.Element;
+declare function DrawerRootProvider({
+  lazyMount,
+  portalled,
+  portalRef,
+  unmountOnExit,
+  ...props
+}: DrawerRootProviderProps): import("react").JSX.Element;
+declare function DrawerHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare const Drawer$1: typeof DrawerRoot & {
+  Root: typeof DrawerRoot;
+  RootProvider: typeof DrawerRootProvider;
+  Stack: (props: Drawer.StackProps) => import("react").JSX.Element;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Drawer.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Backdrop: import("react").ForwardRefExoticComponent<Omit<Drawer.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Drawer.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Drawer.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Grabber: import("react").ForwardRefExoticComponent<Omit<Drawer.GrabberProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  GrabberIndicator: import("react").ForwardRefExoticComponent<Omit<Drawer.GrabberIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<Drawer.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<Drawer.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Drawer.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Drawer.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  SwipeArea: import("react").ForwardRefExoticComponent<Omit<Drawer.SwipeAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Indent: import("react").ForwardRefExoticComponent<Omit<Drawer.IndentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  IndentBackground: import("react").ForwardRefExoticComponent<Omit<Drawer.IndentBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Header: typeof DrawerHeader;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+};
+//#endregion
+export { Drawer$1 as Drawer };