@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/modal/Modal.js

@@ -1,646 +0,0 @@
-import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import "./Modal.css";
-import { Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Modal.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2>"), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
-const ModalContext = createContext();
-const useModalContext = ()=>{
-    const context = useContext(ModalContext);
-    if (!context) throw new Error("Modal compound components must be used within <Modal>.");
-    return context;
-};
-const isVisibleState = (state)=>"entering" === state || "open" === state;
-let bodyLockCount = 0;
-let previousBodyOverflow = "";
-let previousBodyPaddingRight = "";
-const lockBodyScroll = ()=>{
-    if (0 === bodyLockCount) {
-        previousBodyOverflow = document.body.style.overflow;
-        previousBodyPaddingRight = document.body.style.paddingRight;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
-        document.body.style.overflow = "hidden";
-    }
-    bodyLockCount += 1;
-};
-const unlockBodyScroll = ()=>{
-    if (bodyLockCount <= 0) return;
-    bodyLockCount -= 1;
-    if (0 === bodyLockCount) {
-        document.body.style.overflow = previousBodyOverflow;
-        document.body.style.paddingRight = previousBodyPaddingRight;
-    }
-};
-const FOCUSABLE_SELECTOR = "a[href],area[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,[contenteditable='true'],[tabindex]:not([tabindex='-1'])";
-const getFocusableElements = (container)=>Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element)=>{
-        if (element.hasAttribute("disabled")) return false;
-        if ("true" === element.getAttribute("aria-hidden")) return false;
-        if (element.tabIndex < 0) return false;
-        return !element.hidden;
-    });
-const trapFocus = (event, container)=>{
-    const focusable = getFocusableElements(container);
-    if (0 === focusable.length) {
-        event.preventDefault();
-        container.focus();
-        return;
-    }
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    const active = document.activeElement;
-    if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-        return;
-    }
-    if (event.shiftKey && (active === first || active === container)) {
-        event.preventDefault();
-        last.focus();
-    }
-};
-const focusFirstElement = (container)=>{
-    const autofocus = container.querySelector("[autofocus]");
-    if (autofocus) return void autofocus.focus();
-    const focusable = getFocusableElements(container);
-    if (focusable.length > 0) return void focusable[0].focus();
-    container.focus();
-};
-const ModalRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "ref",
-        "isOpen",
-        "defaultOpen",
-        "onOpenChange",
-        "isDismissable",
-        "shouldCloseOnEsc",
-        "shouldCloseOnBackdropClick",
-        "placement",
-        "size",
-        "backdrop",
-        "scrollBehavior"
-    ]);
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
-    const [animState, setAnimState] = createSignal(Boolean(local.isOpen ?? local.defaultOpen) ? "open" : "closed");
-    const [contentRef, setContentRef] = createSignal(void 0);
-    const [labelledBy, setLabelledBy] = createSignal(void 0);
-    const [describedBy, setDescribedBy] = createSignal(void 0);
-    const isControlled = ()=>void 0 !== local.isOpen;
-    const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
-    const setIsOpen = (next)=>{
-        if (isOpen() === next) return;
-        if (!isControlled()) setInternalOpen(next);
-        local.onOpenChange?.(next);
-    };
-    let exitTimer;
-    createEffect(()=>{
-        const open = isOpen();
-        const state = animState();
-        if (open) {
-            if (exitTimer) {
-                clearTimeout(exitTimer);
-                exitTimer = void 0;
-            }
-            if ("closed" === state || "exiting" === state) {
-                setAnimState("entering");
-                requestAnimationFrame(()=>{
-                    requestAnimationFrame(()=>setAnimState("open"));
-                });
-            }
-            return;
-        }
-        if ("open" === state || "entering" === state) {
-            setAnimState("exiting");
-            exitTimer = setTimeout(()=>setAnimState("closed"), 180);
-        }
-    });
-    onCleanup(()=>{
-        if (exitTimer) clearTimeout(exitTimer);
-    });
-    let hasScrollLock = false;
-    createEffect(()=>{
-        const shouldLock = isVisibleState(animState());
-        if (shouldLock && !hasScrollLock) {
-            lockBodyScroll();
-            hasScrollLock = true;
-        } else if (!shouldLock && hasScrollLock) {
-            unlockBodyScroll();
-            hasScrollLock = false;
-        }
-    });
-    onCleanup(()=>{
-        if (hasScrollLock) {
-            unlockBodyScroll();
-            hasScrollLock = false;
-        }
-    });
-    let restoreFocusTarget = null;
-    createEffect(()=>{
-        const state = animState();
-        const content = contentRef();
-        if (!isVisibleState(state) || !content) return;
-        const activeElement = document.activeElement;
-        if (!restoreFocusTarget && activeElement instanceof HTMLElement) restoreFocusTarget = activeElement;
-        queueMicrotask(()=>{
-            if (!content.contains(document.activeElement)) focusFirstElement(content);
-        });
-        const handleDocumentKeyDown = (event)=>{
-            if (!isVisibleState(animState())) return;
-            if ("Escape" === event.key) {
-                if (false !== local.isDismissable && false !== local.shouldCloseOnEsc) {
-                    event.preventDefault();
-                    setIsOpen(false);
-                }
-                return;
-            }
-            if ("Tab" === event.key) trapFocus(event, content);
-        };
-        document.addEventListener("keydown", handleDocumentKeyDown);
-        onCleanup(()=>{
-            document.removeEventListener("keydown", handleDocumentKeyDown);
-        });
-    });
-    createEffect(()=>{
-        if ("closed" !== animState()) return;
-        if (!restoreFocusTarget) return;
-        queueMicrotask(()=>{
-            restoreFocusTarget?.focus?.();
-            restoreFocusTarget = null;
-        });
-    });
-    const contextValue = {
-        isOpen,
-        setIsOpen,
-        animState,
-        isDismissable: ()=>false !== local.isDismissable,
-        shouldCloseOnEsc: ()=>false !== local.shouldCloseOnEsc,
-        shouldCloseOnBackdropClick: ()=>false !== local.shouldCloseOnBackdropClick,
-        placement: ()=>local.placement ?? "auto",
-        size: ()=>local.size ?? "md",
-        backdrop: ()=>local.backdrop ?? "opaque",
-        scrollBehavior: ()=>local.scrollBehavior ?? "inside",
-        contentRef,
-        setContentRef,
-        labelledBy,
-        setLabelledBy,
-        describedBy,
-        setDescribedBy
-    };
-    return createComponent(ModalContext.Provider, {
-        value: contextValue,
-        get children () {
-            var _el$ = _tmpl$();
-            use((node)=>{
-                if ("function" == typeof local.ref) local.ref(node);
-            }, _el$);
-            spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, isVisibleState(animState()) && CLASSES.Root.flag.open, local.class, local.className)
-                }), {
-                "data-slot": "modal-root",
-                get ["data-open"] () {
-                    return isVisibleState(animState()) ? "true" : "false";
-                },
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                get style () {
-                    return local.style;
-                }
-            }), false, true);
-            insert(_el$, ()=>local.children);
-            return _el$;
-        }
-    });
-};
-const ModalTrigger = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "type",
-        "onClick"
-    ]);
-    const context = useModalContext();
-    const handleClick = (event)=>{
-        context.setIsOpen(true);
-        if ("function" == typeof local.onClick) local.onClick(event);
-    };
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, {
-            get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Trigger.base, local.class, local.className)
-            }), {
-            "data-slot": "modal-trigger",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onClick: handleClick
-        }), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$2;
-    })();
-};
-const ModalBackdrop = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "variant",
-        "isDismissable",
-        "shouldCloseOnBackdropClick",
-        "onClick"
-    ]);
-    const context = useModalContext();
-    const variant = ()=>local.variant ?? context.backdrop();
-    const dismissable = ()=>local.isDismissable ?? context.isDismissable();
-    const shouldCloseOnBackdropClick = ()=>local.shouldCloseOnBackdropClick ?? context.shouldCloseOnBackdropClick();
-    const isEntering = ()=>"entering" === context.animState();
-    const isExiting = ()=>"exiting" === context.animState();
-    const handleClick = (event)=>{
-        if (dismissable() && shouldCloseOnBackdropClick() && event.target === event.currentTarget) context.setIsOpen(false);
-        if ("function" == typeof local.onClick) local.onClick(event);
-    };
-    return (()=>{
-        var _el$3 = _tmpl$();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], isEntering() && CLASSES.Backdrop.state.entering, isExiting() && CLASSES.Backdrop.state.exiting, local.class, local.className)
-            }), {
-            "data-slot": "modal-backdrop",
-            get ["data-entering"] () {
-                return isEntering() ? "true" : void 0;
-            },
-            get ["data-exiting"] () {
-                return isExiting() ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onClick: handleClick
-        }), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
-};
-const ModalContent = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "ref",
-        "placement",
-        "size",
-        "backdrop",
-        "scrollBehavior",
-        "isDismissable",
-        "shouldCloseOnBackdropClick",
-        "role",
-        "tabIndex",
-        "aria-labelledby",
-        "aria-describedby"
-    ]);
-    const context = useModalContext();
-    const placement = ()=>local.placement ?? context.placement();
-    const size = ()=>local.size ?? context.size();
-    const scrollBehavior = ()=>local.scrollBehavior ?? context.scrollBehavior();
-    const isEntering = ()=>"entering" === context.animState();
-    const isExiting = ()=>"exiting" === context.animState();
-    const containerSizeClass = ()=>{
-        if ("cover" === size()) return CLASSES.Container.size.cover;
-        if ("full" === size()) return CLASSES.Container.size.full;
-    };
-    return createComponent(Show, {
-        get when () {
-            return "closed" !== context.animState();
-        },
-        get children () {
-            return createComponent(Portal, {
-                get children () {
-                    return createComponent(ModalBackdrop, {
-                        get variant () {
-                            return local.backdrop;
-                        },
-                        get isDismissable () {
-                            return local.isDismissable;
-                        },
-                        get shouldCloseOnBackdropClick () {
-                            return local.shouldCloseOnBackdropClick;
-                        },
-                        get dataTheme () {
-                            return local.dataTheme;
-                        },
-                        get children () {
-                            var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
-                            spread(_el$4, mergeProps(()=>({
-                                    class: twMerge(CLASSES.Container.base, CLASSES.Container.placement[placement()], CLASSES.Container.scroll[scrollBehavior()], containerSizeClass(), isEntering() && CLASSES.Container.state.entering, isExiting() && CLASSES.Container.state.exiting)
-                                }), {
-                                "data-slot": "modal-container",
-                                get ["data-placement"] () {
-                                    return placement();
-                                },
-                                get ["data-entering"] () {
-                                    return isEntering() ? "true" : void 0;
-                                },
-                                get ["data-exiting"] () {
-                                    return isExiting() ? "true" : void 0;
-                                }
-                            }), false, true);
-                            use((node)=>{
-                                context.setContentRef(node);
-                                if ("function" == typeof local.ref) local.ref(node);
-                            }, _el$5);
-                            spread(_el$5, mergeProps(others, {
-                                get role () {
-                                    return local.role ?? "dialog";
-                                },
-                                "aria-modal": "true",
-                                get ["aria-labelledby"] () {
-                                    return local["aria-labelledby"] ?? context.labelledBy();
-                                },
-                                get ["aria-describedby"] () {
-                                    return local["aria-describedby"] ?? context.describedBy();
-                                },
-                                get tabIndex () {
-                                    return local.tabIndex ?? -1;
-                                }
-                            }, ()=>({
-                                    class: twMerge(CLASSES.Content.base, CLASSES.Content.scroll[scrollBehavior()], CLASSES.Content.size[size()], isEntering() && CLASSES.Content.state.entering, isExiting() && CLASSES.Content.state.exiting, local.class, local.className)
-                                }), {
-                                "data-slot": "modal-content",
-                                get ["data-placement"] () {
-                                    return placement();
-                                },
-                                get ["data-size"] () {
-                                    return size();
-                                },
-                                get ["data-scroll"] () {
-                                    return scrollBehavior();
-                                },
-                                get ["data-entering"] () {
-                                    return isEntering() ? "true" : void 0;
-                                },
-                                get ["data-exiting"] () {
-                                    return isExiting() ? "true" : void 0;
-                                },
-                                get ["data-theme"] () {
-                                    return local.dataTheme;
-                                },
-                                get style () {
-                                    return local.style;
-                                }
-                            }), false, true);
-                            insert(_el$5, ()=>local.children);
-                            return _el$4;
-                        }
-                    });
-                }
-            });
-        }
-    });
-};
-const ModalHeader = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$6 = _tmpl$();
-        spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Header.base, local.class, local.className)
-            }), {
-            "data-slot": "modal-header",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$6, ()=>local.children);
-        return _el$6;
-    })();
-};
-const ModalHeading = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "id"
-    ]);
-    const context = useModalContext();
-    const uniqueId = createUniqueId();
-    const headingId = ()=>local.id ?? `modal-heading-${uniqueId}`;
-    createEffect(()=>{
-        const id = headingId();
-        context.setLabelledBy(id);
-        onCleanup(()=>{
-            if (context.labelledBy() === id) context.setLabelledBy(void 0);
-        });
-    });
-    return (()=>{
-        var _el$7 = _tmpl$4();
-        spread(_el$7, mergeProps(others, {
-            get id () {
-                return headingId();
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Heading.base, local.class, local.className)
-            }), {
-            "data-slot": "modal-heading",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
-};
-const ModalIcon = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$8 = _tmpl$();
-        spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Icon.base, local.class, local.className)
-            }), {
-            "data-slot": "modal-icon",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$8, ()=>local.children);
-        return _el$8;
-    })();
-};
-const ModalBody = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "id"
-    ]);
-    const context = useModalContext();
-    const uniqueId = createUniqueId();
-    const bodyId = ()=>local.id ?? `modal-body-${uniqueId}`;
-    createEffect(()=>{
-        const id = bodyId();
-        context.setDescribedBy(id);
-        onCleanup(()=>{
-            if (context.describedBy() === id) context.setDescribedBy(void 0);
-        });
-    });
-    return (()=>{
-        var _el$9 = _tmpl$();
-        spread(_el$9, mergeProps(others, {
-            get id () {
-                return bodyId();
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Body.base, CLASSES.Body.scroll[context.scrollBehavior()], local.class, local.className)
-            }), {
-            "data-slot": "modal-body",
-            get ["data-scroll"] () {
-                return context.scrollBehavior();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$9, ()=>local.children);
-        return _el$9;
-    })();
-};
-const ModalFooter = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$0 = _tmpl$();
-        spread(_el$0, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Footer.base, local.class, local.className)
-            }), {
-            "data-slot": "modal-footer",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$0, ()=>local.children);
-        return _el$0;
-    })();
-};
-const ModalCloseTrigger = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "type",
-        "onClick",
-        "aria-label"
-    ]);
-    const context = useModalContext();
-    const handleClick = (event)=>{
-        context.setIsOpen(false);
-        if ("function" == typeof local.onClick) local.onClick(event);
-    };
-    return (()=>{
-        var _el$1 = _tmpl$2();
-        spread(_el$1, mergeProps(others, {
-            get type () {
-                return local.type ?? "button";
-            },
-            get ["aria-label"] () {
-                return local["aria-label"] ?? "Close modal";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.CloseTrigger.base, local.class, local.className)
-            }), {
-            "data-slot": "modal-close-trigger",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onClick: handleClick
-        }), false, true);
-        insert(_el$1, ()=>local.children ?? (()=>{
-                var _el$10 = _tmpl$5();
-                spread(_el$10, mergeProps(()=>({
-                        class: CLASSES.CloseTrigger.icon
-                    }), {
-                    "data-slot": "modal-close-trigger-icon",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    "aria-hidden": "true"
-                }), true, true);
-                return _el$10;
-            })());
-        return _el$1;
-    })();
-};
-const Modal = Object.assign(ModalRoot, {
-    Root: ModalRoot,
-    Trigger: ModalTrigger,
-    Backdrop: ModalBackdrop,
-    Content: ModalContent,
-    Header: ModalHeader,
-    Heading: ModalHeading,
-    Icon: ModalIcon,
-    Body: ModalBody,
-    Footer: ModalFooter,
-    CloseTrigger: ModalCloseTrigger
-});
-const modal_Modal = Modal;
-export default modal_Modal;
-export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger };

package/dist/components/navbar/Navbar.classes.d.ts

@@ -1,47 +0,0 @@
-export declare const CLASSES: {
-    readonly navbar: {
-        readonly base: "navbar";
-    };
-    readonly start: {
-        readonly base: "navbar__section navbar__section--start";
-    };
-    readonly center: {
-        readonly base: "navbar__section navbar__section--center";
-    };
-    readonly end: {
-        readonly base: "navbar__section navbar__section--end";
-    };
-    readonly section: {
-        readonly base: "navbar__section";
-        readonly variant: {
-            readonly start: "navbar__section--start";
-            readonly center: "navbar__section--center";
-            readonly end: "navbar__section--end";
-        };
-    };
-    readonly stack: {
-        readonly base: "navbar__stack";
-        readonly flag: {
-            readonly sticky: "navbar__stack--sticky";
-            readonly container: "navbar__stack--container";
-        };
-    };
-    readonly row: {
-        readonly base: "navbar__row";
-        readonly flag: {
-            readonly bordered: "navbar__row--bordered";
-            readonly padded: "navbar__row--padded";
-        };
-        readonly color: {
-            readonly ghost: "navbar__row--ghost";
-            readonly neutral: "navbar__row--neutral";
-            readonly primary: "navbar__row--primary";
-            readonly secondary: "navbar__row--secondary";
-            readonly accent: "navbar__row--accent";
-            readonly info: "navbar__row--info";
-            readonly success: "navbar__row--success";
-            readonly warning: "navbar__row--warning";
-            readonly error: "navbar__row--error";
-        };
-    };
-};