@moduix/solid 1.0.0

package/dist/components/lightbox/Lightbox.js

@@ -0,0 +1,352 @@
+import { createComponent, delegateEvents, mergeProps, spread, template } from "solid-js/web";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+import Lightbox_module from "./Lightbox.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<img data-slot=lightbox-image>");
+const DEFAULT_CLOSE_LABEL = 'Close image';
+function preloadImage(src) {
+    if (!src || "u" < typeof Image) return;
+    const image = new Image();
+    image.src = src;
+}
+function resolveImage(target, selector, rootNode) {
+    if (!(target instanceof Element)) return null;
+    const matchedNode = target.closest(selector);
+    if (!matchedNode || !rootNode.contains(matchedNode)) return null;
+    const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector('img');
+    if (!(imageNode instanceof HTMLImageElement)) return null;
+    const src = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
+    if (!src) return null;
+    return {
+        src,
+        alt: imageNode.alt || void 0,
+        element: imageNode
+    };
+}
+function resolveRootNode(rootRef, rootSelector) {
+    const rootNode = 'function' == typeof rootRef ? rootRef() : rootRef;
+    return rootNode ?? (rootSelector ? document.querySelector(rootSelector) : null);
+}
+function LightboxRoot(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(Dialog.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function LightboxRootProvider(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(Dialog.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function LightboxTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "lightbox-trigger",
+        get ["class"] () {
+            return clsx(Lightbox_module.trigger, local.class);
+        }
+    }, others));
+}
+function LightboxBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Backdrop, mergeProps({
+                "data-slot": "lightbox-backdrop",
+                get ["class"] () {
+                    return clsx(Lightbox_module.backdrop, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function LightboxPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Positioner, mergeProps({
+                "data-slot": "lightbox-positioner",
+                get ["class"] () {
+                    return clsx(Lightbox_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function LightboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Content, mergeProps({
+        "data-slot": "lightbox-content",
+        get ["class"] () {
+            return clsx(Lightbox_module.content, local.class);
+        }
+    }, others));
+}
+function LightboxTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Title, mergeProps({
+        "data-slot": "lightbox-title",
+        get ["class"] () {
+            return clsx(Lightbox_module.title, local.class);
+        }
+    }, others));
+}
+function LightboxDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Description, mergeProps({
+        "data-slot": "lightbox-description",
+        get ["class"] () {
+            return clsx(Lightbox_module.description, local.class);
+        }
+    }, others));
+}
+function LightboxCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "lightbox-close-trigger",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others));
+}
+function LightboxCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const dialog = useDialogContext();
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Dialog.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "lightbox-close-icon",
+                get ["data-state"] () {
+                    return dialog().open ? 'open' : 'closed';
+                },
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return clsx(Lightbox_module.closeIcon, local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function LightboxImage(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'closeOnClick',
+        'onClick'
+    ]);
+    const dialog = useDialogContext();
+    const handleClick = (event)=>{
+        local.onClick?.(event);
+        if (local.closeOnClick && !event.defaultPrevented) dialog().setOpen(false);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        _el$.$$click = handleClick;
+        spread(_el$, mergeProps({
+            get ["data-close-on-click"] () {
+                return local.closeOnClick ? '' : void 0;
+            },
+            get ["class"] () {
+                return clsx(Lightbox_module.image, local.class);
+            }
+        }, others), false, false);
+        return _el$;
+    })();
+}
+function LightboxGallery(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-gallery",
+        get ["class"] () {
+            return clsx(Lightbox_module.gallery, local.class);
+        }
+    }, others));
+}
+function LightboxHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-header",
+        get ["class"] () {
+            return clsx(Lightbox_module.header, local.class);
+        }
+    }, others));
+}
+function LightboxBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-body",
+        get ["class"] () {
+            return clsx(Lightbox_module.body, local.class);
+        }
+    }, others));
+}
+function LightboxFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-footer",
+        get ["class"] () {
+            return clsx(Lightbox_module.footer, local.class);
+        }
+    }, others));
+}
+function LightboxBind(props) {
+    const [local] = splitProps(props, [
+        'onImageSelect',
+        'rootRef',
+        'rootSelector',
+        'selector'
+    ]);
+    const dialog = useDialogContext();
+    createEffect(()=>{
+        const rootNode = resolveRootNode(local.rootRef, local.rootSelector);
+        const selector = local.selector;
+        const onImageSelect = local.onImageSelect;
+        if (!rootNode) return;
+        const handleClick = (event)=>{
+            const nextImage = resolveImage(event.target, selector, rootNode);
+            if (!nextImage) return;
+            onImageSelect(nextImage);
+            dialog().setOpen(true);
+        };
+        const preloadFromTarget = (target)=>{
+            const nextImage = resolveImage(target, selector, rootNode);
+            if (!nextImage) return;
+            preloadImage(nextImage.src);
+        };
+        const handlePointerEnter = (event)=>{
+            preloadFromTarget(event.target);
+        };
+        const handleFocusIn = (event)=>{
+            preloadFromTarget(event.target);
+        };
+        rootNode.addEventListener('click', handleClick);
+        rootNode.addEventListener('pointerenter', handlePointerEnter, true);
+        rootNode.addEventListener('focusin', handleFocusIn);
+        onCleanup(()=>{
+            rootNode.removeEventListener('click', handleClick);
+            rootNode.removeEventListener('pointerenter', handlePointerEnter, true);
+            rootNode.removeEventListener('focusin', handleFocusIn);
+        });
+    });
+    return [];
+}
+const Lightbox = Object.assign(LightboxRoot, {
+    Root: LightboxRoot,
+    RootProvider: LightboxRootProvider,
+    Trigger: LightboxTrigger,
+    Backdrop: LightboxBackdrop,
+    Positioner: LightboxPositioner,
+    Content: LightboxContent,
+    Title: LightboxTitle,
+    Description: LightboxDescription,
+    CloseTrigger: LightboxCloseTrigger,
+    CloseIcon: LightboxCloseIcon,
+    Header: LightboxHeader,
+    Body: LightboxBody,
+    Footer: LightboxFooter,
+    Image: LightboxImage,
+    Gallery: LightboxGallery,
+    Bind: LightboxBind,
+    useLightbox: useDialog,
+    useLightboxContext: useDialogContext
+});
+delegateEvents([
+    "click"
+]);
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog as useLightbox, useDialogContext as useLightboxContext };

package/dist/components/lightbox/Lightbox.jsx

@@ -0,0 +1,219 @@
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import Lightbox_module from "./Lightbox.module.jsx";
+const DEFAULT_CLOSE_LABEL = 'Close image';
+function preloadImage(src) {
+    if (!src || "u" < typeof Image) return;
+    const image = new Image();
+    image.src = src;
+}
+function resolveImage(target, selector, rootNode) {
+    if (!(target instanceof Element)) return null;
+    const matchedNode = target.closest(selector);
+    if (!matchedNode || !rootNode.contains(matchedNode)) return null;
+    const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector('img');
+    if (!(imageNode instanceof HTMLImageElement)) return null;
+    const src = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
+    if (!src) return null;
+    return {
+        src,
+        alt: imageNode.alt || void 0,
+        element: imageNode
+    };
+}
+function resolveRootNode(rootRef, rootSelector) {
+    const rootNode = 'function' == typeof rootRef ? rootRef() : rootRef;
+    return rootNode ?? (rootSelector ? document.querySelector(rootSelector) : null);
+}
+function LightboxRoot(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 LightboxRootProvider(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 LightboxTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.Trigger asChild={local.asChild} data-slot="lightbox-trigger" class={clsx(Lightbox_module.trigger, local.class)} {...others}/>;
+}
+function LightboxBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Backdrop data-slot="lightbox-backdrop" class={clsx(Lightbox_module.backdrop, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function LightboxPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Positioner data-slot="lightbox-positioner" class={clsx(Lightbox_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function LightboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Content data-slot="lightbox-content" class={clsx(Lightbox_module.content, local.class)} {...others}/>;
+}
+function LightboxTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Title data-slot="lightbox-title" class={clsx(Lightbox_module.title, local.class)} {...others}/>;
+}
+function LightboxDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Description data-slot="lightbox-description" class={clsx(Lightbox_module.description, local.class)} {...others}/>;
+}
+function LightboxCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.CloseTrigger asChild={local.asChild} data-slot="lightbox-close-trigger" class={local.class} {...others}/>;
+}
+function LightboxCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const dialog = useDialogContext();
+    const resolvedChildren = children(()=>local.children);
+    return <Dialog.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="lightbox-close-icon" data-state={dialog().open ? 'open' : 'closed'} aria-label={local['aria-label'] ?? DEFAULT_CLOSE_LABEL} aria-labelledby={local['aria-labelledby']} class={clsx(Lightbox_module.closeIcon, local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function LightboxImage(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'closeOnClick',
+        'onClick'
+    ]);
+    const dialog = useDialogContext();
+    const handleClick = (event)=>{
+        local.onClick?.(event);
+        if (local.closeOnClick && !event.defaultPrevented) dialog().setOpen(false);
+    };
+    return <img data-slot="lightbox-image" data-close-on-click={local.closeOnClick ? '' : void 0} class={clsx(Lightbox_module.image, local.class)} onClick={handleClick} {...others}/>;
+}
+function LightboxGallery(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-gallery" class={clsx(Lightbox_module.gallery, local.class)} {...others}/>;
+}
+function LightboxHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-header" class={clsx(Lightbox_module.header, local.class)} {...others}/>;
+}
+function LightboxBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-body" class={clsx(Lightbox_module.body, local.class)} {...others}/>;
+}
+function LightboxFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-footer" class={clsx(Lightbox_module.footer, local.class)} {...others}/>;
+}
+function LightboxBind(props) {
+    const [local] = splitProps(props, [
+        'onImageSelect',
+        'rootRef',
+        'rootSelector',
+        'selector'
+    ]);
+    const dialog = useDialogContext();
+    createEffect(()=>{
+        const rootNode = resolveRootNode(local.rootRef, local.rootSelector);
+        const selector = local.selector;
+        const onImageSelect = local.onImageSelect;
+        if (!rootNode) return;
+        const handleClick = (event)=>{
+            const nextImage = resolveImage(event.target, selector, rootNode);
+            if (!nextImage) return;
+            onImageSelect(nextImage);
+            dialog().setOpen(true);
+        };
+        const preloadFromTarget = (target)=>{
+            const nextImage = resolveImage(target, selector, rootNode);
+            if (!nextImage) return;
+            preloadImage(nextImage.src);
+        };
+        const handlePointerEnter = (event)=>{
+            preloadFromTarget(event.target);
+        };
+        const handleFocusIn = (event)=>{
+            preloadFromTarget(event.target);
+        };
+        rootNode.addEventListener('click', handleClick);
+        rootNode.addEventListener('pointerenter', handlePointerEnter, true);
+        rootNode.addEventListener('focusin', handleFocusIn);
+        onCleanup(()=>{
+            rootNode.removeEventListener('click', handleClick);
+            rootNode.removeEventListener('pointerenter', handlePointerEnter, true);
+            rootNode.removeEventListener('focusin', handleFocusIn);
+        });
+    });
+    return <></>;
+}
+const Lightbox = Object.assign(LightboxRoot, {
+    Root: LightboxRoot,
+    RootProvider: LightboxRootProvider,
+    Trigger: LightboxTrigger,
+    Backdrop: LightboxBackdrop,
+    Positioner: LightboxPositioner,
+    Content: LightboxContent,
+    Title: LightboxTitle,
+    Description: LightboxDescription,
+    CloseTrigger: LightboxCloseTrigger,
+    CloseIcon: LightboxCloseIcon,
+    Header: LightboxHeader,
+    Body: LightboxBody,
+    Footer: LightboxFooter,
+    Image: LightboxImage,
+    Gallery: LightboxGallery,
+    Bind: LightboxBind,
+    useLightbox: useDialog,
+    useLightboxContext: useDialogContext
+});
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog as useLightbox, useDialogContext as useLightboxContext };

package/dist/components/lightbox/Lightbox.module.js

@@ -0,0 +1,24 @@
+import "./Lightbox_module.css";
+const Lightbox_module = {
+    trigger: "trigger-CDcAJQ",
+    backdrop: "backdrop-nZRWDl",
+    "lightbox-backdrop-in": "lightbox-backdrop-in-y5UjxI",
+    lightboxBackdropIn: "lightbox-backdrop-in-y5UjxI",
+    "lightbox-backdrop-out": "lightbox-backdrop-out-LsC2c8",
+    lightboxBackdropOut: "lightbox-backdrop-out-LsC2c8",
+    positioner: "positioner-T47Xit",
+    content: "content-N4c6Zm",
+    "lightbox-content-in": "lightbox-content-in-udHk7o",
+    lightboxContentIn: "lightbox-content-in-udHk7o",
+    "lightbox-content-out": "lightbox-content-out-ZyLTc7",
+    lightboxContentOut: "lightbox-content-out-ZyLTc7",
+    title: "title-nSprhy",
+    description: "description-S7ZYRT",
+    header: "header-Lx40fF",
+    body: "body-M8rV1J",
+    footer: "footer-ZmOqXP",
+    image: "image-P32jHl",
+    gallery: "gallery-d_JY9F",
+    closeIcon: "closeIcon-Xv0OVe"
+};
+export default Lightbox_module;

package/dist/components/lightbox/Lightbox.module.jsx

@@ -0,0 +1,24 @@
+import "./Lightbox_module.css";
+const Lightbox_module = {
+    trigger: "trigger-CDcAJQ",
+    backdrop: "backdrop-nZRWDl",
+    "lightbox-backdrop-in": "lightbox-backdrop-in-y5UjxI",
+    lightboxBackdropIn: "lightbox-backdrop-in-y5UjxI",
+    "lightbox-backdrop-out": "lightbox-backdrop-out-LsC2c8",
+    lightboxBackdropOut: "lightbox-backdrop-out-LsC2c8",
+    positioner: "positioner-T47Xit",
+    content: "content-N4c6Zm",
+    "lightbox-content-in": "lightbox-content-in-udHk7o",
+    lightboxContentIn: "lightbox-content-in-udHk7o",
+    "lightbox-content-out": "lightbox-content-out-ZyLTc7",
+    lightboxContentOut: "lightbox-content-out-ZyLTc7",
+    title: "title-nSprhy",
+    description: "description-S7ZYRT",
+    header: "header-Lx40fF",
+    body: "body-M8rV1J",
+    footer: "footer-ZmOqXP",
+    image: "image-P32jHl",
+    gallery: "gallery-d_JY9F",
+    closeIcon: "closeIcon-Xv0OVe"
+};
+export default Lightbox_module;