@pathscale/ui 0.1.1 → 1.2.1

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

@@ -1,14 +1,73 @@
-import { type JSX, type ParentComponent } from "solid-js";
+import "./Drawer.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-export type DrawerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "ref"> & IComponentBaseProps & {
-    side: JSX.Element;
-    open?: boolean;
-    end?: boolean;
-    toggleClassName?: string;
-    contentClassName?: string;
-    sideClassName?: string;
-    overlayClassName?: string;
-    onClickOverlay?: () => void;
-};
-declare const Drawer: ParentComponent<DrawerProps>;
+export type DrawerPlacement = "top" | "bottom" | "left" | "right";
+export type DrawerBackdropVariant = "opaque" | "blur" | "transparent";
+export type DrawerRootProps = IComponentBaseProps & {
+    children: JSX.Element;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export type DrawerTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    variant?: DrawerBackdropVariant;
+    isDismissable?: boolean;
+};
+export type DrawerContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    placement?: DrawerPlacement;
+};
+export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerHandleProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type DrawerCloseTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const DrawerRoot: ParentComponent<DrawerRootProps>;
+declare const DrawerTrigger: Component<DrawerTriggerProps>;
+declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
+declare const DrawerContent: ParentComponent<DrawerContentProps>;
+declare const DrawerDialog: ParentComponent<DrawerDialogProps>;
+declare const DrawerHeader: ParentComponent<DrawerHeaderProps>;
+declare const DrawerHeading: ParentComponent<DrawerHeadingProps>;
+declare const DrawerBody: ParentComponent<DrawerBodyProps>;
+declare const DrawerFooter: ParentComponent<DrawerFooterProps>;
+declare const DrawerHandle: Component<DrawerHandleProps>;
+declare const DrawerCloseTrigger: Component<DrawerCloseTriggerProps>;
+export type DrawerCloseProps = {
+    children: JSX.Element;
+};
+declare const DrawerClose: ParentComponent<DrawerCloseProps>;
+declare const Drawer: ParentComponent<DrawerRootProps> & {
+    Root: ParentComponent<DrawerRootProps>;
+    Trigger: Component<DrawerTriggerProps>;
+    Backdrop: ParentComponent<DrawerBackdropProps>;
+    Content: ParentComponent<DrawerContentProps>;
+    Dialog: ParentComponent<DrawerDialogProps>;
+    Header: ParentComponent<DrawerHeaderProps>;
+    Heading: ParentComponent<DrawerHeadingProps>;
+    Body: ParentComponent<DrawerBodyProps>;
+    Footer: ParentComponent<DrawerFooterProps>;
+    Handle: Component<DrawerHandleProps>;
+    CloseTrigger: Component<DrawerCloseTriggerProps>;
+    Close: ParentComponent<DrawerCloseProps>;
+};
 export default Drawer;
+export { DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, };

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,470 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Drawer.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h2>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><path d="M18 6L6 18M6 6l12 12"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=drawer-close>");
+const DrawerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useDrawerContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DrawerContext);
+    if (!ctx) throw new Error("Drawer compound components must be used within <Drawer>");
+    return ctx;
+};
+const DrawerRoot = (props)=>{
+    const [local, _others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
+    const isControlled = ()=>void 0 !== local.isOpen;
+    const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
+    const setIsOpen = (v)=>{
+        if (!isControlled()) setInternalOpen(v);
+        local.onOpenChange?.(v);
+    };
+    const ctx = {
+        isOpen,
+        setIsOpen,
+        placement: ()=>"bottom",
+        isDismissable: ()=>true,
+        animState: ()=>"closed"
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
+        value: ctx,
+        get children () {
+            return local.children;
+        }
+    });
+};
+const DrawerTrigger = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick"
+    ]);
+    const ctx = useDrawerContext();
+    const handleClick = (e)=>{
+        ctx.setIsOpen(true);
+        if ("function" == typeof local.onClick) local.onClick(e);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "button",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__trigger", local.class, local.className);
+            },
+            "data-slot": "drawer-trigger",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onClick: handleClick
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const BACKDROP_VARIANT_MAP = {
+    opaque: "drawer__backdrop--opaque",
+    blur: "drawer__backdrop--blur",
+    transparent: "drawer__backdrop--transparent"
+};
+const DrawerBackdrop = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant",
+        "isDismissable",
+        "onClick"
+    ]);
+    const ctx = useDrawerContext();
+    const variant = ()=>local.variant ?? "opaque";
+    const isDismissable = ()=>false !== local.isDismissable;
+    const [animState, setAnimState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("closed");
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (ctx.isOpen()) {
+            setAnimState("entering");
+            requestAnimationFrame(()=>{
+                requestAnimationFrame(()=>setAnimState("open"));
+            });
+        } else if ("open" === animState() || "entering" === animState()) setAnimState("exiting");
+    });
+    const handleTransitionEnd = ()=>{
+        if ("exiting" === animState()) setAnimState("closed");
+    };
+    const handleBackdropClick = (e)=>{
+        if (e.target === e.currentTarget && isDismissable()) ctx.setIsOpen(false);
+        if ("function" == typeof local.onClick) local.onClick(e);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const state = animState();
+        if ("entering" === state || "open" === state) {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                document.body.style.overflow = prev;
+            });
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!ctx.isOpen() || !isDismissable()) return;
+        const handler = (e)=>{
+            if ("Escape" === e.key) ctx.setIsOpen(false);
+        };
+        document.addEventListener("keydown", handler);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>document.removeEventListener("keydown", handler));
+    });
+    const updatedCtx = {
+        isOpen: ctx.isOpen,
+        setIsOpen: ctx.setIsOpen,
+        placement: ctx.placement,
+        isDismissable,
+        animState
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return "closed" !== animState();
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                get children () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
+                        value: updatedCtx,
+                        get children () {
+                            var _el$2 = _tmpl$2();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                                get ["class"] () {
+                                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__backdrop", BACKDROP_VARIANT_MAP[variant()], local.class, local.className);
+                                },
+                                "data-slot": "drawer-backdrop",
+                                get ["data-entering"] () {
+                                    return "entering" === animState() ? "true" : void 0;
+                                },
+                                get ["data-exiting"] () {
+                                    return "exiting" === animState() ? "true" : void 0;
+                                },
+                                get ["data-theme"] () {
+                                    return local.dataTheme;
+                                },
+                                get style () {
+                                    return local.style;
+                                },
+                                onClick: handleBackdropClick,
+                                onTransitionEnd: handleTransitionEnd
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+                            return _el$2;
+                        }
+                    });
+                }
+            });
+        }
+    });
+};
+const PLACEMENT_CLASS_MAP = {
+    top: "drawer__content--top",
+    bottom: "drawer__content--bottom",
+    left: "drawer__content--left",
+    right: "drawer__content--right"
+};
+const DrawerContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "placement"
+    ]);
+    const parentCtx = useDrawerContext();
+    const placement = ()=>local.placement ?? "bottom";
+    const updatedCtx = {
+        isOpen: parentCtx.isOpen,
+        setIsOpen: parentCtx.setIsOpen,
+        isDismissable: parentCtx.isDismissable,
+        animState: parentCtx.animState,
+        placement
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
+        value: updatedCtx,
+        get children () {
+            var _el$3 = _tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__content", PLACEMENT_CLASS_MAP[placement()], local.class, local.className);
+                },
+                "data-slot": "drawer-content",
+                get ["data-placement"] () {
+                    return placement();
+                },
+                get ["data-entering"] () {
+                    return "entering" === parentCtx.animState() ? "true" : void 0;
+                },
+                get ["data-exiting"] () {
+                    return "exiting" === parentCtx.animState() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+            return _el$3;
+        }
+    });
+};
+const DrawerDialog = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = useDrawerContext();
+    return (()=>{
+        var _el$4 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "dialog",
+            "aria-modal": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__dialog", local.class, local.className);
+            },
+            "data-slot": "drawer-dialog",
+            get ["data-placement"] () {
+                return ctx.placement();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const DrawerHeader = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$5 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__header", local.class, local.className);
+            },
+            "data-slot": "drawer-header",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        return _el$5;
+    })();
+};
+const DrawerHeading = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$6 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__heading", local.class, local.className);
+            },
+            "data-slot": "drawer-heading",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+};
+const DrawerBody = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__body", local.class, local.className);
+            },
+            "data-slot": "drawer-body",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return Object.assign({}, local.style, {
+                    "touch-action": "pan-y"
+                });
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const DrawerFooter = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$8 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__footer", local.class, local.className);
+            },
+            "data-slot": "drawer-footer",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const DrawerHandle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$4();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-hidden": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__handle", local.class, local.className);
+            },
+            "data-slot": "drawer-handle",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        return _el$9;
+    })();
+};
+const DrawerCloseTrigger = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick"
+    ]);
+    const ctx = useDrawerContext();
+    const handleClick = (e)=>{
+        ctx.setIsOpen(false);
+        if ("function" == typeof local.onClick) local.onClick(e);
+    };
+    return (()=>{
+        var _el$0 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "button",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__close-trigger", local.class, local.className);
+            },
+            "data-slot": "drawer-close-trigger",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            "aria-label": "Close",
+            onClick: handleClick
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.children;
+            },
+            get fallback () {
+                return _tmpl$5();
+            },
+            get children () {
+                return local.children;
+            }
+        }));
+        return _el$0;
+    })();
+};
+const DrawerClose = (props)=>{
+    const ctx = useDrawerContext();
+    const handleClick = ()=>{
+        ctx.setIsOpen(false);
+    };
+    return (()=>{
+        var _el$10 = _tmpl$6();
+        _el$10.$$click = handleClick;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>props.children);
+        return _el$10;
+    })();
+};
+const Drawer = Object.assign(DrawerRoot, {
+    Root: DrawerRoot,
+    Trigger: DrawerTrigger,
+    Backdrop: DrawerBackdrop,
+    Content: DrawerContent,
+    Dialog: DrawerDialog,
+    Header: DrawerHeader,
+    Heading: DrawerHeading,
+    Body: DrawerBody,
+    Footer: DrawerFooter,
+    Handle: DrawerHandle,
+    CloseTrigger: DrawerCloseTrigger,
+    Close: DrawerClose
+});
+const drawer_Drawer = Drawer;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { DrawerBackdrop, DrawerBody, DrawerClose, DrawerCloseTrigger, DrawerContent, DrawerDialog, DrawerFooter, DrawerHandle, DrawerHeader, DrawerHeading, DrawerRoot, DrawerTrigger, drawer_Drawer as default };

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

@@ -1 +1 @@
-export { default, type DrawerProps } from "./Drawer";
+export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerBackdropVariant, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";

package/dist/components/drawer/index.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__ from "./Drawer.js";
+var __webpack_exports__DrawerBackdrop = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerBackdrop;
+var __webpack_exports__DrawerBody = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerBody;
+var __webpack_exports__DrawerClose = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerClose;
+var __webpack_exports__DrawerCloseTrigger = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerCloseTrigger;
+var __webpack_exports__DrawerContent = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerContent;
+var __webpack_exports__DrawerDialog = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerDialog;
+var __webpack_exports__DrawerFooter = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerFooter;
+var __webpack_exports__DrawerHandle = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerHandle;
+var __webpack_exports__DrawerHeader = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerHeader;
+var __webpack_exports__DrawerHeading = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerHeading;
+var __webpack_exports__DrawerRoot = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerRoot;
+var __webpack_exports__DrawerTrigger = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__.DrawerTrigger;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__["default"];
+export { __webpack_exports__DrawerBackdrop as DrawerBackdrop, __webpack_exports__DrawerBody as DrawerBody, __webpack_exports__DrawerClose as DrawerClose, __webpack_exports__DrawerCloseTrigger as DrawerCloseTrigger, __webpack_exports__DrawerContent as DrawerContent, __webpack_exports__DrawerDialog as DrawerDialog, __webpack_exports__DrawerFooter as DrawerFooter, __webpack_exports__DrawerHandle as DrawerHandle, __webpack_exports__DrawerHeader as DrawerHeader, __webpack_exports__DrawerHeading as DrawerHeading, __webpack_exports__DrawerRoot as DrawerRoot, __webpack_exports__DrawerTrigger as DrawerTrigger, __webpack_exports__default as default };