@moduix/solid-tailwind 1.0.0

package/dist/components/dialog/Dialog.jsx

@@ -0,0 +1,130 @@
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close dialog';
+function DialogRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Dialog.Root>
+    </OverlayPortalProvider>;
+}
+function DialogRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Dialog.RootProvider>
+    </OverlayPortalProvider>;
+}
+function DialogTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.Trigger asChild={local.asChild} data-slot="dialog-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+}
+function DialogBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Backdrop data-slot="dialog-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DialogPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Positioner data-slot="dialog-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid [scrollbar-gutter:stable_both-edges] place-items-center overflow-y-auto overscroll-contain p-4', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DialogContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Content data-slot="dialog-content" class={cn("relative max-h-[calc(100dvh-2rem)] w-[min(28rem,calc(100vw-2rem))] max-w-full origin-top rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-0 transition-[scale,translate] duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] data-[has-nested]:[translate:0_calc(2.5rem*var(--nested-layer-count,0))] data-[has-nested]:[scale:calc(1-0.05*var(--nested-layer-count,0))] data-[has-nested]:after:opacity-100 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none", local.class)} {...others}/>;
+}
+function DialogTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Title data-slot="dialog-title" class={cn('text-lg font-semibold text-popover-foreground', local.class)} {...others}/>;
+}
+function DialogDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Description data-slot="dialog-description" class={cn('text-md text-muted-foreground', local.class)} {...others}/>;
+}
+function DialogCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.CloseTrigger asChild={local.asChild} data-slot="dialog-close-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+}
+function DialogCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Dialog.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="dialog-close-icon" aria-label={local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL} aria-labelledby={local['aria-labelledby']} class={cn('absolute end-4 top-4 z-2 size-7 rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function DialogHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="dialog-header" class={cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='dialog-close-trigger']]:col-start-2 [&>[data-slot='dialog-close-trigger']]:justify-self-end [&>[data-slot='dialog-description']]:col-span-2 [&>[data-slot='dialog-title']]:col-start-1", local.class)} {...others}/>;
+}
+function DialogBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="dialog-body" class={cn('mt-4 text-md text-muted-foreground', local.class)} {...others}/>;
+}
+function DialogFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="dialog-footer" class={cn('mt-6 flex justify-end gap-2', local.class)} {...others}/>;
+}
+const Dialog_Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    RootProvider: DialogRootProvider,
+    Context: Dialog.Context,
+    Trigger: DialogTrigger,
+    Backdrop: DialogBackdrop,
+    Positioner: DialogPositioner,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    CloseTrigger: DialogCloseTrigger,
+    CloseIcon: DialogCloseIcon,
+    Header: DialogHeader,
+    Body: DialogBody,
+    Footer: DialogFooter
+});
+export { Dialog_Dialog as Dialog, useDialog, useDialogContext };

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

@@ -0,0 +1,2 @@
+export { Dialog, useDialog, useDialogContext } from './Dialog.js';
+export type { DialogRootProps, DialogRootProviderProps } from './Dialog.js';

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, useDialog, useDialogContext } from "./Dialog.js";

package/dist/components/dialog/index.jsx

@@ -0,0 +1 @@
+export { Dialog, useDialog, useDialogContext } from "./Dialog.jsx";

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

@@ -0,0 +1,54 @@
+import { Drawer as DrawerPrimitive, useDrawer, useDrawerContext, useDrawerStackContext } from '@ark-ui/solid/drawer';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type DrawerVariant = 'island';
+type DrawerRootProps = ComponentProps<typeof DrawerPrimitive.Root> & OverlayPortalProps & {
+    variant?: DrawerVariant;
+};
+type DrawerRootProviderProps = ComponentProps<typeof DrawerPrimitive.RootProvider> & OverlayPortalProps;
+type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+    variant?: 'island';
+};
+type DrawerCloseIconProps = Omit<ComponentProps<typeof DrawerPrimitive.CloseTrigger>, 'asChild'>;
+declare function DrawerRoot(props: DrawerRootProps): import("solid-js").JSX.Element;
+declare function DrawerRootProvider(props: DrawerRootProviderProps): import("solid-js").JSX.Element;
+declare function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function DrawerBackdrop(props: ComponentProps<typeof DrawerPrimitive.Backdrop>): import("solid-js").JSX.Element;
+declare function DrawerPositioner(props: ComponentProps<typeof DrawerPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function DrawerContent(props: DrawerContentProps): import("solid-js").JSX.Element;
+declare function DrawerGrabber(props: ComponentProps<typeof DrawerPrimitive.Grabber>): import("solid-js").JSX.Element;
+declare function DrawerGrabberIndicator(props: ComponentProps<typeof DrawerPrimitive.GrabberIndicator>): import("solid-js").JSX.Element;
+declare function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Title>): import("solid-js").JSX.Element;
+declare function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>): import("solid-js").JSX.Element;
+declare function DrawerCloseTrigger(props: ComponentProps<typeof DrawerPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare function DrawerCloseIcon(props: DrawerCloseIconProps): import("solid-js").JSX.Element;
+declare function DrawerSwipeArea(props: ComponentProps<typeof DrawerPrimitive.SwipeArea>): import("solid-js").JSX.Element;
+declare function DrawerIndent(props: ComponentProps<typeof DrawerPrimitive.Indent>): import("solid-js").JSX.Element;
+declare function DrawerIndentBackground(props: ComponentProps<typeof DrawerPrimitive.IndentBackground>): import("solid-js").JSX.Element;
+declare function DrawerHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function DrawerBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function DrawerFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Drawer: typeof DrawerRoot & {
+    Root: typeof DrawerRoot;
+    RootProvider: typeof DrawerRootProvider;
+    Context: (props: DrawerPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Stack: (props: DrawerPrimitive.StackProps) => import("solid-js").JSX.Element;
+    Trigger: typeof DrawerTrigger;
+    Backdrop: typeof DrawerBackdrop;
+    Positioner: typeof DrawerPositioner;
+    Content: typeof DrawerContent;
+    Grabber: typeof DrawerGrabber;
+    GrabberIndicator: typeof DrawerGrabberIndicator;
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+    CloseTrigger: typeof DrawerCloseTrigger;
+    CloseIcon: typeof DrawerCloseIcon;
+    SwipeArea: typeof DrawerSwipeArea;
+    Indent: typeof DrawerIndent;
+    IndentBackground: typeof DrawerIndentBackground;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+};
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext };

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,333 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from "@ark-ui/solid/drawer";
+import { ark } from "@ark-ui/solid/factory";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close drawer';
+const DrawerVariantContext = createContext();
+function DrawerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit',
+        'variant',
+        'swipeDirection',
+        'snapPoints',
+        'defaultSnapPoint'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(DrawerVariantContext.Provider, {
+                get value () {
+                    return local.variant;
+                },
+                get children () {
+                    return createComponent(Drawer.Root, mergeProps({
+                        get lazyMount () {
+                            return local.lazyMount ?? true;
+                        },
+                        get unmountOnExit () {
+                            return local.unmountOnExit ?? true;
+                        },
+                        get swipeDirection () {
+                            return local.swipeDirection;
+                        },
+                        get snapPoints () {
+                            return local.snapPoints ?? ('island' === local.variant ? [
+                                1
+                            ] : void 0);
+                        },
+                        get defaultSnapPoint () {
+                            return memo(()=>void 0 !== local.defaultSnapPoint)() ? local.defaultSnapPoint : 'island' === local.variant ? 1 : void 0;
+                        }
+                    }, others, {
+                        get children () {
+                            return local.children;
+                        }
+                    }));
+                }
+            });
+        }
+    });
+}
+function DrawerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Drawer.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+const DrawerStack = Drawer.Stack;
+function DrawerTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Drawer.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "drawer-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function DrawerBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Drawer.Backdrop, mergeProps({
+                "data-slot": "drawer-backdrop",
+                get ["class"] () {
+                    return cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs [transition:opacity_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out,backdrop-filter_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out] data-[state=closed]:animate-moduix-drawer-backdrop-out data-[state=open]:animate-moduix-drawer-backdrop-in data-[state=open]:data-swiping:[transition-duration:0s] motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] [&[hidden]:has(~[data-slot=drawer-positioner]:not([hidden]))]:block', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DrawerPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Drawer.Positioner, mergeProps({
+                "data-slot": "drawer-positioner",
+                get ["class"] () {
+                    return cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border flex items-end justify-center overflow-hidden overscroll-contain p-0 has-[>[data-slot=drawer-content][data-variant=island]]:pt-[max(1rem,env(safe-area-inset-top,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pr-[max(1rem,env(safe-area-inset-right,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pb-[max(1rem,env(safe-area-inset-bottom,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pl-[max(1rem,env(safe-area-inset-left,0px))] data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start [&:not([hidden])_[data-slot=drawer-content][hidden]]:flex', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DrawerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'draggable',
+        'variant'
+    ]);
+    const rootVariant = useContext(DrawerVariantContext);
+    return createComponent(Drawer.Content, mergeProps({
+        "data-slot": "drawer-content",
+        get ["data-variant"] () {
+            return local.variant ?? rootVariant;
+        },
+        get ["class"] () {
+            return cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class);
+        },
+        get draggable () {
+            return local.draggable ?? true;
+        }
+    }, others));
+}
+function DrawerGrabber(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.Grabber, mergeProps({
+        "data-slot": "drawer-grabber",
+        get ["class"] () {
+            return cn('group/grabber flex w-full shrink-0 cursor-grab items-center justify-center pb-1 select-none group-data-[swipe-direction=left]/drawer:hidden group-data-[swipe-direction=right]/drawer:hidden active:cursor-grabbing', local.class);
+        }
+    }, others));
+}
+function DrawerGrabberIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.GrabberIndicator, mergeProps({
+        "data-slot": "drawer-grabber-indicator",
+        get ["class"] () {
+            return cn('h-1 w-12 rounded-full bg-muted-foreground opacity-[0.45] transition-[background-color,opacity] duration-200 ease-in-out motion-reduce:transition-none [@media(hover:hover)]:group-hover/grabber:opacity-70', local.class);
+        }
+    }, others));
+}
+function DrawerTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.Title, mergeProps({
+        "data-slot": "drawer-title",
+        get ["class"] () {
+            return cn('text-lg font-semibold text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function DrawerDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.Description, mergeProps({
+        "data-slot": "drawer-description",
+        get ["class"] () {
+            return cn('text-md leading-6 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function DrawerCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Drawer.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "drawer-close-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function DrawerCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Drawer.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "drawer-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? (null == local['aria-labelledby'] ? DEFAULT_CLOSE_BUTTON_LABEL : void 0);
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn('absolute end-4 top-4 z-2 size-7 rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function DrawerSwipeArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.SwipeArea, mergeProps({
+        "data-slot": "drawer-swipe-area",
+        get ["class"] () {
+            return cn('fixed z-50 touch-none data-disabled:pointer-events-none data-[swipe-direction=down]:start-0 data-[swipe-direction=down]:end-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-10 data-[swipe-direction=left]:end-0 data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:bottom-0 data-[swipe-direction=left]:w-10 data-[swipe-direction=right]:start-0 data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:bottom-0 data-[swipe-direction=right]:w-10 data-[swipe-direction=up]:start-0 data-[swipe-direction=up]:end-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-10', local.class);
+        }
+    }, others));
+}
+function DrawerIndent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.Indent, mergeProps({
+        "data-slot": "drawer-indent",
+        get ["class"] () {
+            return cn('relative origin-top [translate:0_0] [scale:1] transition-[transform,border-radius] duration-[450ms] ease-spring data-active:[translate:0_calc(8px*(1-var(--drawer-swipe-progress,0)))] data-active:[scale:calc(0.97+(1-0.97)*var(--drawer-swipe-progress,0))] data-active:rounded-t-lg data-active:rounded-b-none motion-reduce:[transition-duration:1ms]', local.class);
+        }
+    }, others));
+}
+function DrawerIndentBackground(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Drawer.IndentBackground, mergeProps({
+        "data-slot": "drawer-indent-background",
+        get ["class"] () {
+            return cn('pointer-events-none absolute inset-0 bg-foreground opacity-0 transition-opacity duration-[450ms] ease-spring data-active:opacity-[calc(1-var(--drawer-swipe-progress,0))] motion-reduce:[transition-duration:1ms]', local.class);
+        }
+    }, others));
+}
+function DrawerHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "drawer-header",
+        get ["class"] () {
+            return cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='drawer-close-icon']]:col-start-2 [&>[data-slot='drawer-close-icon']]:justify-self-end [&>[data-slot='drawer-close-trigger']]:col-start-2 [&>[data-slot='drawer-close-trigger']]:justify-self-end [&>[data-slot='drawer-description']]:col-span-2 [&>[data-slot='drawer-title']]:col-start-1", local.class);
+        }
+    }, others));
+}
+function DrawerBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "drawer-body",
+        get ["class"] () {
+            return cn('mt-4 min-h-0 overflow-y-auto text-md leading-6 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function DrawerFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "drawer-footer",
+        get ["class"] () {
+            return cn('mt-6 flex justify-end gap-2', local.class);
+        }
+    }, others));
+}
+const Drawer_Drawer = Object.assign(DrawerRoot, {
+    Root: DrawerRoot,
+    RootProvider: DrawerRootProvider,
+    Context: Drawer.Context,
+    Stack: DrawerStack,
+    Trigger: DrawerTrigger,
+    Backdrop: DrawerBackdrop,
+    Positioner: DrawerPositioner,
+    Content: DrawerContent,
+    Grabber: DrawerGrabber,
+    GrabberIndicator: DrawerGrabberIndicator,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+    CloseTrigger: DrawerCloseTrigger,
+    CloseIcon: DrawerCloseIcon,
+    SwipeArea: DrawerSwipeArea,
+    Indent: DrawerIndent,
+    IndentBackground: DrawerIndentBackground,
+    Header: DrawerHeader,
+    Body: DrawerBody,
+    Footer: DrawerFooter
+});
+export { Drawer_Drawer as Drawer, useDrawer, useDrawerContext, useDrawerStackContext };