@moduix/solid-tailwind 1.0.0

package/dist/components/kbd/Kbd.jsx

@@ -0,0 +1,20 @@
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function KbdRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.kbd {...others} data-scope="kbd" data-part="root" data-slot="kbd-root" class={cn('box-border inline-flex min-h-control-xs max-w-full min-w-control-xs flex-none items-center justify-center rounded-sm border border-border bg-muted px-2 py-0 text-center align-middle font-mono text-xs font-medium wrap-anywhere text-foreground tabular-nums shadow-[inset_0_-1px_0_color-mix(in_oklab,currentColor_12%,transparent)] select-none', local.class)}/>;
+}
+function KbdGroupPart(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span {...others} role="group" data-scope="kbd" data-part="group" data-slot="kbd-group" class={cn('box-border inline-flex max-w-full flex-wrap items-center gap-1 border-0 bg-transparent p-0 align-middle text-muted-foreground shadow-none', local.class)}/>;
+}
+const Kbd = Object.assign(KbdRoot, {
+    Root: KbdRoot,
+    Group: KbdGroupPart
+});
+export { Kbd };

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

@@ -0,0 +1 @@
+export * from './Kbd.js';

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export * from "./Kbd.js";

package/dist/components/kbd/index.jsx

@@ -0,0 +1 @@
+export * from "./Kbd.jsx";

package/dist/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,60 @@
+import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/solid/dialog';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type LightboxImageSelectDetails = {
+    alt?: string;
+    element: HTMLImageElement;
+    src: string;
+};
+type LightboxImageProps = ComponentProps<'img'> & {
+    closeOnClick?: boolean;
+};
+type LightboxRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPortalProps;
+type LightboxRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
+type LightboxBindProps = {
+    onImageSelect: (details: LightboxImageSelectDetails) => void;
+    selector: string;
+    rootRef?: HTMLElement | (() => HTMLElement | null | undefined);
+    rootSelector?: string;
+};
+declare function LightboxRoot(props: LightboxRootProps): import("solid-js").JSX.Element;
+declare function LightboxRootProvider(props: LightboxRootProviderProps): import("solid-js").JSX.Element;
+declare function LightboxTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function LightboxBackdrop(props: ComponentProps<typeof DialogPrimitive.Backdrop>): import("solid-js").JSX.Element;
+declare function LightboxPositioner(props: ComponentProps<typeof DialogPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function LightboxContent(props: ComponentProps<typeof DialogPrimitive.Content>): import("solid-js").JSX.Element;
+declare function LightboxTitle(props: ComponentProps<typeof DialogPrimitive.Title>): import("solid-js").JSX.Element;
+declare function LightboxDescription(props: ComponentProps<typeof DialogPrimitive.Description>): import("solid-js").JSX.Element;
+declare function LightboxCloseTrigger(props: ComponentProps<typeof DialogPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+type LightboxCloseIconProps = Omit<ComponentProps<typeof DialogPrimitive.CloseTrigger>, 'asChild'>;
+declare function LightboxCloseIcon(props: LightboxCloseIconProps): import("solid-js").JSX.Element;
+declare function LightboxImage(props: LightboxImageProps): import("solid-js").JSX.Element;
+declare function LightboxGallery(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxBind(props: LightboxBindProps): import("solid-js").JSX.Element;
+type LightboxComponent = typeof LightboxRoot & {
+    Root: typeof LightboxRoot;
+    RootProvider: typeof LightboxRootProvider;
+    Trigger: typeof LightboxTrigger;
+    Backdrop: typeof LightboxBackdrop;
+    Positioner: typeof LightboxPositioner;
+    Content: typeof LightboxContent;
+    Title: typeof LightboxTitle;
+    Description: typeof LightboxDescription;
+    CloseTrigger: typeof LightboxCloseTrigger;
+    CloseIcon: typeof LightboxCloseIcon;
+    Header: typeof LightboxHeader;
+    Body: typeof LightboxBody;
+    Footer: typeof LightboxFooter;
+    Image: typeof LightboxImage;
+    Gallery: typeof LightboxGallery;
+    Bind: typeof LightboxBind;
+    useLightbox: typeof useDialog;
+    useLightboxContext: typeof useDialogContext;
+};
+declare const Lightbox: LightboxComponent;
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog as useLightbox, useDialogContext as useLightboxContext, };
+export type { LightboxBindProps, LightboxImageSelectDetails };

package/dist/components/lightbox/Lightbox.js

@@ -0,0 +1,351 @@
+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 { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.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 cn('cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', 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 cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', 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 cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border grid place-items-center overflow-auto overscroll-contain p-4', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function LightboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Content, mergeProps({
+        "data-slot": "lightbox-content",
+        get ["class"] () {
+            return cn('relative box-border grid max-h-[min(80dvh,calc(100dvh-2rem))] w-fit max-w-[min(80vw,calc(100vw-2rem))] gap-3 border-0 bg-transparent outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
+        }
+    }, others));
+}
+function LightboxTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Title, mergeProps({
+        "data-slot": "lightbox-title",
+        get ["class"] () {
+            return cn('m-0 text-md leading-6 font-semibold text-foreground', local.class);
+        }
+    }, others));
+}
+function LightboxDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Description, mergeProps({
+        "data-slot": "lightbox-description",
+        get ["class"] () {
+            return cn('m-0 text-sm leading-5 text-muted-foreground', 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 cn('pointer-events-none invisible fixed end-4 top-4 z-[calc(51+var(--layer-index,0))] size-8 rounded-sm border-0 bg-background p-0 text-foreground opacity-0 transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[state=open]:pointer-events-auto data-[state=open]:visible data-[state=open]:opacity-100 motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-muted', 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 cn('block max-h-[min(80dvh,100%)] max-w-[min(80vw,100%)] rounded-md object-contain shadow-lg select-none data-[close-on-click]:cursor-zoom-out', 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 cn('[&_[data-slot=carousel-indicator-group]]:mx-auto', 'max-w-[min(72rem,calc(100vw-2rem))] justify-self-center [&_[data-slot=carousel-control]]:items-center [&_[data-slot=carousel-indicator-group]]:w-fit [&_[data-slot=carousel-indicator-group]]:max-w-full [&_[data-slot=carousel-indicator-group]]:flex-wrap [&_[data-slot=carousel-indicator]:has(img)]:h-control-xl [&_[data-slot=carousel-indicator]:has(img)]:w-20 [&_[data-slot=carousel-indicator]:has(img)]:overflow-hidden [&_[data-slot=carousel-indicator]:has(img)]:rounded-md [&_[data-slot=carousel-indicator]:has(img)]:border [&_[data-slot=carousel-indicator]:has(img)]:border-transparent [&_[data-slot=carousel-indicator]:has(img)]:bg-transparent [&_[data-slot=carousel-indicator]:has(img)]:opacity-[0.65] [&_[data-slot=carousel-indicator]:has(img)]:transition [&_[data-slot=carousel-indicator]:has(img)]:duration-150 [&_[data-slot=carousel-indicator]:has(img)]:ease-in-out [&_[data-slot=carousel-indicator]:has(img)_img]:block [&_[data-slot=carousel-indicator]:has(img)_img]:size-full [&_[data-slot=carousel-indicator]:has(img)_img]:object-cover [&_[data-slot=carousel-indicator]:has(img):hover]:opacity-90 [&_[data-slot=carousel-indicator]:has(img)[data-current]]:-translate-y-px [&_[data-slot=carousel-indicator]:has(img)[data-current]]:border-primary [&_[data-slot=carousel-indicator]:has(img)[data-current]]:opacity-100 [&_[data-slot=carousel-item-group]]:aspect-[16/10] [&_[data-slot=carousel-item-group]]:max-h-[68dvh] [&_[data-slot=carousel-item-group]]:bg-black/90 [&_[data-slot=carousel-item]]:grid [&_[data-slot=carousel-item]]:h-full [&_[data-slot=carousel-item]]:place-items-center [&_[data-slot=carousel-item]_img]:block [&_[data-slot=carousel-item]_img]:size-full [&_[data-slot=carousel-item]_img]:rounded-md [&_[data-slot=carousel-item]_img]:object-contain [&_[data-slot=carousel-item]_img]:select-none [&_[data-slot=carousel-item]_video]:block [&_[data-slot=carousel-item]_video]:size-full [&_[data-slot=carousel-item]_video]:rounded-md [&_[data-slot=carousel-item]_video]:object-contain [&_[data-slot=carousel-item]_video]:select-none', local.class);
+        }
+    }, others));
+}
+function LightboxHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-header",
+        get ["class"] () {
+            return cn('grid gap-1', local.class);
+        }
+    }, others));
+}
+function LightboxBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-body",
+        get ["class"] () {
+            return cn('grid gap-3', local.class);
+        }
+    }, others));
+}
+function LightboxFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "lightbox-footer",
+        get ["class"] () {
+            return cn('flex items-center justify-end gap-2 text-sm leading-5 text-muted-foreground', 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,218 @@
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const DEFAULT_CLOSE_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={cn('cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', local.class)} {...others}/>;
+}
+function LightboxBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Backdrop data-slot="lightbox-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function LightboxPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Positioner data-slot="lightbox-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border grid place-items-center overflow-auto overscroll-contain p-4', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function LightboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Content data-slot="lightbox-content" class={cn('relative box-border grid max-h-[min(80dvh,calc(100dvh-2rem))] w-fit max-w-[min(80vw,calc(100vw-2rem))] gap-3 border-0 bg-transparent outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+}
+function LightboxTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Title data-slot="lightbox-title" class={cn('m-0 text-md leading-6 font-semibold text-foreground', local.class)} {...others}/>;
+}
+function LightboxDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Description data-slot="lightbox-description" class={cn('m-0 text-sm leading-5 text-muted-foreground', 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={cn('pointer-events-none invisible fixed end-4 top-4 z-[calc(51+var(--layer-index,0))] size-8 rounded-sm border-0 bg-background p-0 text-foreground opacity-0 transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[state=open]:pointer-events-auto data-[state=open]:visible data-[state=open]:opacity-100 motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-muted', 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={cn('block max-h-[min(80dvh,100%)] max-w-[min(80vw,100%)] rounded-md object-contain shadow-lg select-none data-[close-on-click]:cursor-zoom-out', local.class)} onClick={handleClick} {...others}/>;
+}
+function LightboxGallery(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-gallery" class={cn('[&_[data-slot=carousel-indicator-group]]:mx-auto', 'max-w-[min(72rem,calc(100vw-2rem))] justify-self-center [&_[data-slot=carousel-control]]:items-center [&_[data-slot=carousel-indicator-group]]:w-fit [&_[data-slot=carousel-indicator-group]]:max-w-full [&_[data-slot=carousel-indicator-group]]:flex-wrap [&_[data-slot=carousel-indicator]:has(img)]:h-control-xl [&_[data-slot=carousel-indicator]:has(img)]:w-20 [&_[data-slot=carousel-indicator]:has(img)]:overflow-hidden [&_[data-slot=carousel-indicator]:has(img)]:rounded-md [&_[data-slot=carousel-indicator]:has(img)]:border [&_[data-slot=carousel-indicator]:has(img)]:border-transparent [&_[data-slot=carousel-indicator]:has(img)]:bg-transparent [&_[data-slot=carousel-indicator]:has(img)]:opacity-[0.65] [&_[data-slot=carousel-indicator]:has(img)]:transition [&_[data-slot=carousel-indicator]:has(img)]:duration-150 [&_[data-slot=carousel-indicator]:has(img)]:ease-in-out [&_[data-slot=carousel-indicator]:has(img)_img]:block [&_[data-slot=carousel-indicator]:has(img)_img]:size-full [&_[data-slot=carousel-indicator]:has(img)_img]:object-cover [&_[data-slot=carousel-indicator]:has(img):hover]:opacity-90 [&_[data-slot=carousel-indicator]:has(img)[data-current]]:-translate-y-px [&_[data-slot=carousel-indicator]:has(img)[data-current]]:border-primary [&_[data-slot=carousel-indicator]:has(img)[data-current]]:opacity-100 [&_[data-slot=carousel-item-group]]:aspect-[16/10] [&_[data-slot=carousel-item-group]]:max-h-[68dvh] [&_[data-slot=carousel-item-group]]:bg-black/90 [&_[data-slot=carousel-item]]:grid [&_[data-slot=carousel-item]]:h-full [&_[data-slot=carousel-item]]:place-items-center [&_[data-slot=carousel-item]_img]:block [&_[data-slot=carousel-item]_img]:size-full [&_[data-slot=carousel-item]_img]:rounded-md [&_[data-slot=carousel-item]_img]:object-contain [&_[data-slot=carousel-item]_img]:select-none [&_[data-slot=carousel-item]_video]:block [&_[data-slot=carousel-item]_video]:size-full [&_[data-slot=carousel-item]_video]:rounded-md [&_[data-slot=carousel-item]_video]:object-contain [&_[data-slot=carousel-item]_video]:select-none', local.class)} {...others}/>;
+}
+function LightboxHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-header" class={cn('grid gap-1', local.class)} {...others}/>;
+}
+function LightboxBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-body" class={cn('grid gap-3', local.class)} {...others}/>;
+}
+function LightboxFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="lightbox-footer" class={cn('flex items-center justify-end gap-2 text-sm leading-5 text-muted-foreground', 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/index.d.ts

@@ -0,0 +1,2 @@
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useLightbox, useLightboxContext, } from './Lightbox.js';
+export type { LightboxBindProps, LightboxImageSelectDetails } from './Lightbox.js';

package/dist/components/lightbox/index.js

@@ -0,0 +1 @@
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useLightbox, useLightboxContext } from "./Lightbox.js";

package/dist/components/lightbox/index.jsx

@@ -0,0 +1 @@
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useLightbox, useLightboxContext } from "./Lightbox.jsx";