@pathscale/ui 0.1.0 → 1.2.0

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

@@ -0,0 +1 @@
+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 };

package/dist/components/dropdown/Dropdown.css

@@ -0,0 +1,184 @@
+@layer components {
+  .dropdown {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .dropdown__trigger {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    min-height: 2.25rem;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: 1.5rem;
+    border: 1px solid transparent;
+    padding: 0.5rem 0.875rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+    outline: none;
+    transform-origin: center;
+    cursor: pointer;
+    --dropdown-trigger-bg: var(--color-base-100);
+    --dropdown-trigger-bg-hover: var(--color-base-200);
+    --dropdown-trigger-bg-pressed: var(--color-base-300);
+    --dropdown-trigger-fg: var(--color-base-content);
+    --dropdown-trigger-border: var(--color-base-300);
+    background-color: var(--dropdown-trigger-bg);
+    color: var(--dropdown-trigger-fg);
+    border-color: var(--dropdown-trigger-border);
+    box-shadow:
+      0 1px 2px oklch(0% 0 0 / 0.06),
+      0 1px 0 oklch(100% 0 0 / 0.03) inset;
+    transition:
+      transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
+      background-color 150ms ease,
+      border-color 150ms ease,
+      box-shadow 150ms ease,
+      color 150ms ease,
+      opacity 150ms ease;
+  }
+
+  @media (hover: hover) {
+    .dropdown__trigger:hover:not(:disabled) {
+      background-color: var(--dropdown-trigger-bg-hover);
+    }
+  }
+
+  .dropdown__trigger:focus-visible,
+  .dropdown__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+  }
+
+  .dropdown__trigger:active,
+  .dropdown__trigger[data-pressed="true"] {
+    transform: scale(0.97);
+    background-color: var(--dropdown-trigger-bg-pressed);
+  }
+
+  .dropdown__trigger:disabled,
+  .dropdown__trigger[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .dropdown__popover {
+    position: absolute;
+    z-index: 80;
+    top: calc(100% + var(--dropdown-offset, 6px));
+    inset-inline-start: 0;
+    min-width: min(13.75rem, calc(100vw - 2rem));
+    max-width: min(48svw, calc(100vw - 2rem));
+    max-height: min(24rem, 70vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: 1.5rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content), transparent 90%);
+    background-color: var(--color-base-100);
+    box-shadow:
+      0 24px 48px oklch(0% 0 0 / 0.2),
+      0 8px 18px oklch(0% 0 0 / 0.14);
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-4px) scale(0.9);
+    transform-origin: top;
+    pointer-events: none;
+    will-change: opacity, transform;
+    transition:
+      opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      visibility 150ms ease;
+  }
+
+  .dropdown__popover[data-open="true"] {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+  }
+
+  .dropdown__popover[data-align="end"] {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  .dropdown__menu {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.125rem;
+    overflow: clip;
+    padding: 0.375rem;
+    outline: none;
+  }
+
+  .dropdown__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .dropdown__item {
+    position: relative;
+    display: flex;
+    min-height: 2.25rem;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    border: 0;
+    border-radius: 1rem;
+    background: transparent;
+    color: var(--color-base-content);
+    padding: 0.375rem 0.625rem;
+    text-align: start;
+    font-size: 0.875rem;
+    line-height: 1.2;
+    cursor: pointer;
+    outline: none;
+    transition:
+      transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
+      background-color 150ms ease,
+      color 120ms ease,
+      opacity 120ms ease;
+  }
+
+  .dropdown__item:focus-visible,
+  .dropdown__item[data-focused="true"] {
+    background-color: var(--color-base-200);
+  }
+
+  @media (hover: hover) {
+    .dropdown__item:hover:not(:disabled):not([data-disabled="true"]) {
+      background-color: var(--color-base-200);
+    }
+  }
+
+  .dropdown__item:active:not(:disabled):not([data-disabled="true"]) {
+    transform: scale(0.98);
+    background-color: var(--color-base-300);
+  }
+
+  .dropdown__item:disabled,
+  .dropdown__item[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  .dropdown__separator {
+    margin: 0.25rem 3%;
+    height: 1px;
+    width: 94%;
+    border-radius: 9999px;
+    background-color: var(--color-base-300);
+  }
+}