@moduix/solid 1.0.0 → 1.1.1

package/dist/components/image-cropper/ImageCropper.jsx

@@ -6,43 +6,43 @@ function ImageCropperRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.Root data-slot="image-cropper-root" class={clsx(ImageCropper_module.root, local.class)} {...others}/>;
+    return <ImageCropper.Root class={clsx(ImageCropper_module.root, local.class)} {...others} data-slot="image-cropper-root"/>;
 }
 function ImageCropperRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.RootProvider data-slot="image-cropper-root-provider" class={clsx(ImageCropper_module.root, local.class)} {...others}/>;
+    return <ImageCropper.RootProvider class={clsx(ImageCropper_module.root, local.class)} {...others} data-slot="image-cropper-root-provider"/>;
 }
 function ImageCropperViewport(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.Viewport data-slot="image-cropper-viewport" class={clsx(ImageCropper_module.viewport, local.class)} {...others}/>;
+    return <ImageCropper.Viewport class={clsx(ImageCropper_module.viewport, local.class)} {...others} data-slot="image-cropper-viewport"/>;
 }
 function ImageCropperImage(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.Image data-slot="image-cropper-image" class={clsx(ImageCropper_module.image, local.class)} {...others}/>;
+    return <ImageCropper.Image class={clsx(ImageCropper_module.image, local.class)} {...others} data-slot="image-cropper-image"/>;
 }
 function ImageCropperSelection(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.Selection data-slot="image-cropper-selection" class={clsx(ImageCropper_module.selection, local.class)} {...others}/>;
+    return <ImageCropper.Selection class={clsx(ImageCropper_module.selection, local.class)} {...others} data-slot="image-cropper-selection"/>;
 }
 function ImageCropperGrid(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.Grid data-slot="image-cropper-grid" class={clsx(ImageCropper_module.grid, local.class)} {...others}/>;
+    return <ImageCropper.Grid class={clsx(ImageCropper_module.grid, local.class)} {...others} data-slot="image-cropper-grid"/>;
 }
 function ImageCropperHandle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ImageCropper.Handle data-slot="image-cropper-handle" class={clsx(ImageCropper_module.handle, local.class)} {...others}/>;
+    return <ImageCropper.Handle class={clsx(ImageCropper_module.handle, local.class)} {...others} data-slot="image-cropper-handle"/>;
 }
 function ImageCropperCropArea(props) {
     const [local, others] = splitProps(props, [

package/dist/components/kbd/Kbd.js

@@ -7,28 +7,28 @@ function KbdRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return createComponent(ark.kbd, mergeProps({
+    return createComponent(ark.kbd, mergeProps(others, {
         "data-scope": "kbd",
         "data-part": "root",
-        "data-slot": "kbd-root",
         get ["class"] () {
             return clsx(Kbd_module.root, local.class);
-        }
-    }, others));
+        },
+        "data-slot": "kbd-root"
+    }));
 }
 function KbdGroupPart(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return createComponent(ark.span, mergeProps({
+    return createComponent(ark.span, mergeProps(others, {
         role: "group",
         "data-scope": "kbd",
         "data-part": "group",
-        "data-slot": "kbd-group",
         get ["class"] () {
             return clsx(Kbd_module.group, local.class);
-        }
-    }, others));
+        },
+        "data-slot": "kbd-group"
+    }));
 }
 const Kbd = Object.assign(KbdRoot, {
     Root: KbdRoot,

package/dist/components/kbd/Kbd.jsx

@@ -6,13 +6,13 @@ function KbdRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.kbd data-scope="kbd" data-part="root" data-slot="kbd-root" class={clsx(Kbd_module.root, local.class)} {...others}/>;
+    return <ark.kbd {...others} data-scope="kbd" data-part="root" class={clsx(Kbd_module.root, local.class)} data-slot="kbd-root"/>;
 }
 function KbdGroupPart(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span role="group" data-scope="kbd" data-part="group" data-slot="kbd-group" class={clsx(Kbd_module.group, local.class)} {...others}/>;
+    return <ark.span {...others} role="group" data-scope="kbd" data-part="group" class={clsx(Kbd_module.group, local.class)} data-slot="kbd-group"/>;
 }
 const Kbd = Object.assign(KbdRoot, {
     Root: KbdRoot,

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

@@ -9,6 +9,7 @@ type LightboxImageSelectDetails = {
 };
 type LightboxImageProps = ComponentProps<'img'> & {
     closeOnClick?: boolean;
+    'data-close-on-click'?: string;
 };
 type LightboxRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPortalProps;
 type LightboxRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;

package/dist/components/lightbox/Lightbox.js

@@ -6,7 +6,7 @@ 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>");
+var _tmpl$ = /*#__PURE__*/ template("<img>");
 const DEFAULT_CLOSE_LABEL = 'Close image';
 function preloadImage(src) {
     if (!src || "u" < typeof Image) return;
@@ -102,11 +102,12 @@ function LightboxTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "lightbox-trigger",
         get ["class"] () {
             return clsx(Lightbox_module.trigger, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-trigger"
+    }));
 }
 function LightboxBackdrop(props) {
     const [local, others] = splitProps(props, [
@@ -115,11 +116,12 @@ function LightboxBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Backdrop, mergeProps({
-                "data-slot": "lightbox-backdrop",
                 get ["class"] () {
                     return clsx(Lightbox_module.backdrop, local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "lightbox-backdrop"
+            }));
         }
     });
 }
@@ -130,11 +132,12 @@ function LightboxPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Positioner, mergeProps({
-                "data-slot": "lightbox-positioner",
                 get ["class"] () {
                     return clsx(Lightbox_module.positioner, local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "lightbox-positioner"
+            }));
         }
     });
 }
@@ -143,33 +146,36 @@ function LightboxContent(props) {
         'class'
     ]);
     return createComponent(Dialog.Content, mergeProps({
-        "data-slot": "lightbox-content",
         get ["class"] () {
             return clsx(Lightbox_module.content, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-content"
+    }));
 }
 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));
+    }, others, {
+        "data-slot": "lightbox-title"
+    }));
 }
 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));
+    }, others, {
+        "data-slot": "lightbox-description"
+    }));
 }
 function LightboxCloseTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -180,11 +186,12 @@ function LightboxCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "lightbox-close-trigger",
         get ["class"] () {
             return local.class;
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-close-trigger"
+    }));
 }
 function LightboxCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -220,6 +227,7 @@ function LightboxImage(props) {
     const [local, others] = splitProps(props, [
         'class',
         'closeOnClick',
+        'data-close-on-click',
         'onClick'
     ]);
     const dialog = useDialogContext();
@@ -231,13 +239,15 @@ function LightboxImage(props) {
         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);
+        }, others, {
+            get ["data-close-on-click"] () {
+                return local.closeOnClick ? '' : void 0;
+            },
+            "data-slot": "lightbox-image"
+        }), false, false);
         return _el$;
     })();
 }
@@ -246,44 +256,48 @@ function LightboxGallery(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "lightbox-gallery",
         get ["class"] () {
             return clsx(Lightbox_module.gallery, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-gallery"
+    }));
 }
 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));
+    }, others, {
+        "data-slot": "lightbox-header"
+    }));
 }
 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));
+    }, others, {
+        "data-slot": "lightbox-body"
+    }));
 }
 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));
+    }, others, {
+        "data-slot": "lightbox-footer"
+    }));
 }
 function LightboxBind(props) {
     const [local] = splitProps(props, [

package/dist/components/lightbox/Lightbox.jsx

@@ -62,14 +62,14 @@ function LightboxTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Dialog.Trigger asChild={local.asChild} data-slot="lightbox-trigger" class={clsx(Lightbox_module.trigger, local.class)} {...others}/>;
+    return <Dialog.Trigger asChild={local.asChild} class={clsx(Lightbox_module.trigger, local.class)} {...others} data-slot="lightbox-trigger"/>;
 }
 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}/>
+      <Dialog.Backdrop class={clsx(Lightbox_module.backdrop, local.class)} {...others} data-slot="lightbox-backdrop"/>
     </OverlayPortal>;
 }
 function LightboxPositioner(props) {
@@ -77,33 +77,33 @@ function LightboxPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Positioner data-slot="lightbox-positioner" class={clsx(Lightbox_module.positioner, local.class)} {...others}/>
+      <Dialog.Positioner class={clsx(Lightbox_module.positioner, local.class)} {...others} data-slot="lightbox-positioner"/>
     </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}/>;
+    return <Dialog.Content class={clsx(Lightbox_module.content, local.class)} {...others} data-slot="lightbox-content"/>;
 }
 function LightboxTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Title data-slot="lightbox-title" class={clsx(Lightbox_module.title, local.class)} {...others}/>;
+    return <Dialog.Title class={clsx(Lightbox_module.title, local.class)} {...others} data-slot="lightbox-title"/>;
 }
 function LightboxDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Description data-slot="lightbox-description" class={clsx(Lightbox_module.description, local.class)} {...others}/>;
+    return <Dialog.Description class={clsx(Lightbox_module.description, local.class)} {...others} data-slot="lightbox-description"/>;
 }
 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}/>;
+    return <Dialog.CloseTrigger asChild={local.asChild} class={local.class} {...others} data-slot="lightbox-close-trigger"/>;
 }
 function LightboxCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -122,6 +122,7 @@ function LightboxImage(props) {
     const [local, others] = splitProps(props, [
         'class',
         'closeOnClick',
+        'data-close-on-click',
         'onClick'
     ]);
     const dialog = useDialogContext();
@@ -129,31 +130,31 @@ function LightboxImage(props) {
         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}/>;
+    return <img class={clsx(Lightbox_module.image, local.class)} onClick={handleClick} {...others} data-close-on-click={local.closeOnClick ? '' : void 0} data-slot="lightbox-image"/>;
 }
 function LightboxGallery(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-gallery" class={clsx(Lightbox_module.gallery, local.class)} {...others}/>;
+    return <ark.div class={clsx(Lightbox_module.gallery, local.class)} {...others} data-slot="lightbox-gallery"/>;
 }
 function LightboxHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-header" class={clsx(Lightbox_module.header, local.class)} {...others}/>;
+    return <ark.div class={clsx(Lightbox_module.header, local.class)} {...others} data-slot="lightbox-header"/>;
 }
 function LightboxBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-body" class={clsx(Lightbox_module.body, local.class)} {...others}/>;
+    return <ark.div class={clsx(Lightbox_module.body, local.class)} {...others} data-slot="lightbox-body"/>;
 }
 function LightboxFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-footer" class={clsx(Lightbox_module.footer, local.class)} {...others}/>;
+    return <ark.div class={clsx(Lightbox_module.footer, local.class)} {...others} data-slot="lightbox-footer"/>;
 }
 function LightboxBind(props) {
     const [local] = splitProps(props, [

package/dist/components/listbox/Listbox.js

@@ -6,50 +6,54 @@ import { children, splitProps } from "solid-js";
 import { CheckIcon, SearchIcon } from "../../internal/icons/ui/Icons.js";
 import { CloseButton } from "../close-button/index.js";
 import Listbox_module from "./Listbox.module.js";
-var _tmpl$ = /*#__PURE__*/ template("<div data-slot=listbox-filter>");
+var _tmpl$ = /*#__PURE__*/ template("<div>");
 const Listbox_ListboxRoot = function(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Root, mergeProps({
-        "data-slot": "listbox-root",
         get ["class"] () {
             return clsx(Listbox_module.root, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-root"
+    }));
 };
 const Listbox_ListboxRootProvider = function(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.RootProvider, mergeProps({
-        "data-slot": "listbox-root-provider",
         get ["class"] () {
             return clsx(Listbox_module.root, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-root-provider"
+    }));
 };
 function ListboxLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Label, mergeProps({
-        "data-slot": "listbox-label",
         get ["class"] () {
             return clsx(Listbox_module.label, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-label"
+    }));
 }
 function ListboxInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Input, mergeProps({
-        "data-slot": "listbox-input",
         get ["class"] () {
             return clsx(Listbox_module.input, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-input"
+    }));
 }
 function ListboxFilter(props) {
     const [local, others] = splitProps(props, [
@@ -62,7 +66,9 @@ function ListboxFilter(props) {
             get ["class"] () {
                 return clsx(Listbox_module.filter, local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "listbox-filter"
+        }), false, true);
         insert(_el$, createComponent(SearchIcon, {
             "data-slot": "listbox-filter-icon",
             get ["class"] () {
@@ -82,7 +88,6 @@ function ListboxClearTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(CloseButton.Root, mergeProps({
-        "data-slot": "listbox-clear-trigger",
         get ["class"] () {
             return clsx(Listbox_module.clearTrigger, local.class);
         },
@@ -93,6 +98,7 @@ function ListboxClearTrigger(props) {
             return local['aria-label'] ?? 'Clear search';
         }
     }, others, {
+        "data-slot": "listbox-clear-trigger",
         get children () {
             return resolvedChildren();
         }
@@ -103,66 +109,72 @@ function ListboxContent(props) {
         'class'
     ]);
     return createComponent(Listbox.Content, mergeProps({
-        "data-slot": "listbox-content",
         get ["class"] () {
             return clsx(Listbox_module.content, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-content"
+    }));
 }
 function ListboxEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Empty, mergeProps({
-        "data-slot": "listbox-empty",
         get ["class"] () {
             return clsx(Listbox_module.empty, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-empty"
+    }));
 }
 function ListboxItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.ItemGroup, mergeProps({
-        "data-slot": "listbox-item-group",
         get ["class"] () {
             return clsx(Listbox_module.itemGroup, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-group"
+    }));
 }
 function ListboxItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.ItemGroupLabel, mergeProps({
-        "data-slot": "listbox-item-group-label",
         get ["class"] () {
             return clsx(Listbox_module.itemGroupLabel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-group-label"
+    }));
 }
 function ListboxItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Item, mergeProps({
-        "data-slot": "listbox-item",
         get ["class"] () {
             return clsx(Listbox_module.item, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item"
+    }));
 }
 function ListboxItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.ItemText, mergeProps({
-        "data-slot": "listbox-item-text",
         get ["class"] () {
             return clsx(Listbox_module.itemText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text"
+    }));
 }
 function ListboxItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -171,11 +183,11 @@ function ListboxItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Listbox.ItemIndicator, mergeProps({
-        "data-slot": "listbox-item-indicator",
         get ["class"] () {
             return clsx(Listbox_module.itemIndicator, local.class);
         }
     }, others, {
+        "data-slot": "listbox-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -186,44 +198,48 @@ function ListboxValueText(props) {
         'class'
     ]);
     return createComponent(Listbox.ValueText, mergeProps({
-        "data-slot": "listbox-value-text",
         get ["class"] () {
             return clsx(Listbox_module.valueText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-value-text"
+    }));
 }
 function ListboxItemTextContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "listbox-item-text-content",
         get ["class"] () {
             return clsx(Listbox_module.itemTextContent, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text-content"
+    }));
 }
 function ListboxItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "listbox-item-text-icon",
         get ["class"] () {
             return clsx(Listbox_module.itemTextIcon, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text-icon"
+    }));
 }
 function ListboxItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "listbox-item-text-label",
         get ["class"] () {
             return clsx(Listbox_module.itemTextLabel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text-label"
+    }));
 }
 const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
     Root: Listbox_ListboxRoot,