@moduix/react-tailwind 1.0.0 → 1.1.0

package/dist/components/hover-card/HoverCard.js

@@ -30,53 +30,53 @@ function HoverCardRootProvider({ lazyMount = true, portalled, portalRef, unmount
 const HoverCard_HoverCardTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(HoverCard.Trigger, {
         ref: ref,
-        "data-slot": "hover-card-trigger",
         asChild: asChild,
         className: cn(!asChild && 'inline-flex cursor-pointer items-center gap-1 text-primary underline decoration-primary/60 decoration-1 underline-offset-2 outline-0 transition-[color,text-decoration-color] duration-150 ease-in-out focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:decoration-primary motion-reduce:transition-none [@media(hover:hover)]:hover:decoration-primary', className),
-        ...props
+        ...props,
+        "data-slot": "hover-card-trigger"
     });
 });
 const HoverCard_HoverCardPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(HoverCard.Positioner, {
             ref: ref,
-            "data-slot": "hover-card-positioner",
             className: cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', className),
-            ...props
+            ...props,
+            "data-slot": "hover-card-positioner"
         })
     });
 });
 const HoverCard_HoverCardContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(HoverCard.Content, {
         ref: ref,
-        "data-slot": "hover-card-content",
         className: cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(24rem,var(--available-width))] min-w-[min(14rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-lg border border-border bg-popover p-2 wrap-anywhere text-popover-foreground shadow-lg outline-0 has-[>[data-slot=hover-card-body]]:flex has-[>[data-slot=hover-card-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=hover-card-body]]:[&>[data-slot=hover-card-body]]:overflow-auto', className),
-        ...props
+        ...props,
+        "data-slot": "hover-card-content"
     });
 });
 const HoverCard_HoverCardArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(HoverCard.Arrow, {
         ref: ref,
-        "data-slot": "hover-card-arrow",
         className: cn('[--arrow-background:var(--color-popover)] [--arrow-shadow-color:var(--color-border)] [--arrow-size:0.625rem]', className),
         ...props,
+        "data-slot": "hover-card-arrow",
         children: children ?? /*#__PURE__*/ jsx(HoverCard_HoverCardArrowTip, {})
     });
 });
 const HoverCard_HoverCardArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(HoverCard.ArrowTip, {
         ref: ref,
-        "data-slot": "hover-card-arrow-tip",
         className: cn('border-t border-l border-border', className),
-        ...props
+        ...props,
+        "data-slot": "hover-card-arrow-tip"
     });
 });
 const HoverCard_HoverCardBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "hover-card-body",
         className: cn('min-h-0', className),
-        ...props
+        ...props,
+        "data-slot": "hover-card-body"
     });
 });
 const HoverCard_HoverCard = Object.assign(HoverCardRoot, {

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

@@ -6,57 +6,57 @@ import { cn } from "../../internal/cn.js";
 const ImageCropper_ImageCropperRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.Root, {
         ref: ref,
-        "data-slot": "image-cropper-root",
         className: cn('box-border grid w-[32rem] max-w-full gap-3 text-foreground data-dragging:cursor-grabbing data-panning:cursor-grabbing', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-root"
     });
 });
 const ImageCropper_ImageCropperRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.RootProvider, {
         ref: ref,
-        "data-slot": "image-cropper-root-provider",
         className: cn('box-border grid w-[32rem] max-w-full gap-3 text-foreground data-dragging:cursor-grabbing data-panning:cursor-grabbing', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-root-provider"
     });
 });
 const ImageCropper_ImageCropperViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.Viewport, {
         ref: ref,
-        "data-slot": "image-cropper-viewport",
         className: cn('box-border h-[min(20rem,62.5vw)] w-full overflow-hidden rounded-lg border border-border bg-background bg-[conic-gradient(rgb(0_0_0_/_8%)_25%,transparent_0_50%,rgb(0_0_0_/_8%)_0_75%,transparent_0)] [background-size:1rem_1rem] shadow-none data-disabled:cursor-grab', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-viewport"
     });
 });
 const ImageCropper_ImageCropperImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.Image, {
         ref: ref,
-        "data-slot": "image-cropper-image",
         className: cn('absolute inset-0 block size-full origin-center object-contain backface-hidden', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-image"
     });
 });
 const ImageCropper_ImageCropperSelection = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.Selection, {
         ref: ref,
-        "data-slot": "image-cropper-selection",
         className: cn('box-border cursor-grab rounded-md border-2 border-primary shadow-[0_0_0_9999px_rgb(0_0_0_/_45%),inset_0_0_0_1px_rgb(255_255_255_/_64%)] outline-0 transition-[border-color,box-shadow] duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-default data-dragging:cursor-grabbing data-[shape=circle]:rounded-full data-[shape=circle]:border-transparent motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-selection"
     });
 });
 const ImageCropper_ImageCropperGrid = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.Grid, {
         ref: ref,
-        "data-slot": "image-cropper-grid",
         className: cn('pointer-events-none data-[axis=horizontal]:border-y data-[axis=horizontal]:border-white/62 data-[axis=vertical]:border-x data-[axis=vertical]:border-white/62', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-grid"
     });
 });
 const ImageCropper_ImageCropperHandle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ImageCropper.Handle, {
         ref: ref,
-        "data-slot": "image-cropper-handle",
         className: cn('absolute z-1 box-border size-3 rounded-xs border border-white/88 bg-white/96 shadow-[0_1px_3px_rgb(15_23_42_/_18%)] transition-[border-color,background-color,box-shadow,opacity] duration-200 ease-in-out data-disabled:hidden data-[position=e]:!h-full data-[position=e]:!w-[0.2rem] data-[position=e]:rounded-full data-[position=e]:border-0 data-[position=n]:!h-[0.2rem] data-[position=n]:!w-full data-[position=n]:rounded-full data-[position=n]:border-0 data-[position=ne]:z-2 data-[position=nw]:z-2 data-[position=s]:!h-[0.2rem] data-[position=s]:!w-full data-[position=s]:rounded-full data-[position=s]:border-0 data-[position=se]:z-2 data-[position=sw]:z-2 data-[position=w]:!h-full data-[position=w]:!w-[0.2rem] data-[position=w]:rounded-full data-[position=w]:border-0 motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "image-cropper-handle"
     });
 });
 const ImageCropper_ImageCropperCropArea = /*#__PURE__*/ forwardRef(function({ gridClassName, handleClassName, ...props }, ref) {

package/dist/components/input-group/InputGroup.js

@@ -76,7 +76,7 @@ const InputGroup_InputGroupInput = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(Input, {
         ref: ref,
         className: cn(inputGroupInputVariants({
-            size: groupSize
+            size: inputSize
         }), className),
         size: inputSize,
         ...props

package/dist/components/lightbox/Lightbox.js

@@ -51,18 +51,18 @@ function LightboxRootProvider({ lazyMount = true, portalled, portalRef, unmountO
 const Lightbox_LightboxTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Trigger, {
         ref: ref,
-        "data-slot": "lightbox-trigger",
         className: cn('cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-trigger"
     });
 });
 const Lightbox_LightboxBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
             ref: ref,
-            "data-slot": "lightbox-backdrop",
             className: 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]', className),
-            ...props
+            ...props,
+            "data-slot": "lightbox-backdrop"
         })
     });
 });
@@ -70,42 +70,42 @@ const Lightbox_LightboxPositioner = /*#__PURE__*/ forwardRef(function({ classNam
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Positioner, {
             ref: ref,
-            "data-slot": "lightbox-positioner",
             className: cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border grid place-items-center overflow-auto overscroll-contain p-4', className),
-            ...props
+            ...props,
+            "data-slot": "lightbox-positioner"
         })
     });
 });
 const Lightbox_LightboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
-        "data-slot": "lightbox-content",
         className: 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]', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-content"
     });
 });
 const Lightbox_LightboxTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Title, {
         ref: ref,
-        "data-slot": "lightbox-title",
         className: cn('m-0 text-md leading-6 font-semibold text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-title"
     });
 });
 const Lightbox_LightboxDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Description, {
         ref: ref,
-        "data-slot": "lightbox-description",
         className: cn('m-0 text-sm leading-5 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-description"
     });
 });
 const Lightbox_LightboxCloseTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
         ref: ref,
-        "data-slot": "lightbox-close-trigger",
         className: className,
-        ...props
+        ...props,
+        "data-slot": "lightbox-close-trigger"
     });
 });
 const Lightbox_LightboxCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
@@ -131,43 +131,43 @@ const Lightbox_LightboxImage = /*#__PURE__*/ forwardRef(function({ className, cl
     };
     return /*#__PURE__*/ jsx("img", {
         ref: ref,
-        "data-slot": "lightbox-image",
-        "data-close-on-click": closeOnClick ? '' : void 0,
         className: 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', className),
         onClick: handleClick,
-        ...props
+        ...props,
+        "data-close-on-click": closeOnClick ? '' : void 0,
+        "data-slot": "lightbox-image"
     });
 });
 const Lightbox_LightboxGallery = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-gallery",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-gallery"
     });
 });
 const Lightbox_LightboxHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-header",
         className: cn('grid gap-1', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-header"
     });
 });
 const Lightbox_LightboxBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-body",
         className: cn('grid gap-3', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-body"
     });
 });
 const Lightbox_LightboxFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-footer",
         className: cn('flex items-center justify-end gap-2 text-sm leading-5 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "lightbox-footer"
     });
 });
 function LightboxBind({ onImageSelect, selector, rootRef, rootSelector }) {

package/dist/components/listbox/Listbox.js

@@ -9,40 +9,40 @@ import { CloseButton } from "../close-button/index.js";
 const Listbox_ListboxRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Root, {
         ref: ref,
-        "data-slot": "listbox-root",
         className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-root"
     });
 });
 const Listbox_ListboxRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.RootProvider, {
         ref: ref,
-        "data-slot": "listbox-root-provider",
         className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-root-provider"
     });
 });
 const Listbox_ListboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Label, {
         ref: ref,
-        "data-slot": "listbox-label",
         className: cn('text-sm leading-5 font-medium text-foreground select-none', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-label"
     });
 });
 const Listbox_ListboxInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Input, {
         ref: ref,
-        "data-slot": "listbox-input",
         className: cn('m-0 box-border min-h-control-md w-full rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:ps-9 group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:pe-10 group-has-[+_[data-slot=listbox-content]]/listbox-filter:rounded-b-none group-has-[+_[data-slot=listbox-content]]/listbox-filter:border-b-0 placeholder:text-muted-foreground focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-input"
     });
 });
 function ListboxFilter({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs("div", {
-        "data-slot": "listbox-filter",
         className: cn('group/listbox-filter peer/listbox-filter relative box-border w-full', className),
         ...props,
+        "data-slot": "listbox-filter",
         children: [
             /*#__PURE__*/ jsx(SearchIcon, {
                 "data-slot": "listbox-filter-icon",
@@ -55,101 +55,101 @@ function ListboxFilter({ className, children, ...props }) {
 const Listbox_ListboxClearTrigger = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel = 'Clear search', className, children, type = 'button', ...props }, ref) {
     return /*#__PURE__*/ jsx(CloseButton.Root, {
         ref: ref,
-        "data-slot": "listbox-clear-trigger",
         type: type,
         "aria-label": ariaLabel,
         className: cn('absolute end-3 top-1/2 size-control-xs -translate-y-1/2 rounded-sm bg-transparent text-muted-foreground [&>svg]:size-4 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', className),
         ...props,
+        "data-slot": "listbox-clear-trigger",
         children: children
     });
 });
 const Listbox_ListboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Content, {
         ref: ref,
-        "data-slot": "listbox-content",
         className: cn('box-border flex max-h-56 min-h-0 scroll-py-1 [scrollbar-gutter:stable] flex-col overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border border-border bg-background py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out peer-data-[slot=listbox-filter]/listbox-filter:-mt-3 peer-data-[slot=listbox-filter]/listbox-filter:rounded-t-none focus-visible:outline-ring data-[layout=grid]:grid data-[layout=grid]:grid-cols-[repeat(var(--column-count),minmax(0,1fr))] data-[layout=grid]:gap-1 data-[layout=grid]:p-2 data-[orientation=horizontal]:not-data-[layout=grid]:max-h-none data-[orientation=horizontal]:not-data-[layout=grid]:flex-row data-[orientation=horizontal]:not-data-[layout=grid]:gap-2 data-[orientation=horizontal]:not-data-[layout=grid]:overflow-x-auto data-[orientation=horizontal]:not-data-[layout=grid]:overflow-y-hidden data-[orientation=horizontal]:not-data-[layout=grid]:px-1 motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-content"
     });
 });
 const Listbox_ListboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Empty, {
         ref: ref,
-        "data-slot": "listbox-empty",
         className: cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-empty"
     });
 });
 const Listbox_ListboxItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemGroup, {
         ref: ref,
-        "data-slot": "listbox-item-group",
         className: cn('flex flex-col [&+&]:mt-2', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item-group"
     });
 });
 const Listbox_ListboxItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemGroupLabel, {
         ref: ref,
-        "data-slot": "listbox-item-group-label",
         className: cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item-group-label"
     });
 });
 const Listbox_ListboxItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Item, {
         ref: ref,
-        "data-slot": "listbox-item",
         className: cn('relative mx-1 box-border grid min-h-control-sm w-[calc(100%-0.5rem)] cursor-pointer grid-cols-[minmax(0,1fr)_1rem] items-center gap-2 rounded-sm bg-transparent px-3 py-1 text-sm leading-5 text-foreground outline-0 transition-[background-color,color] duration-200 ease-in-out select-none data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[layout=grid]:mx-0 data-[layout=grid]:w-full data-[layout=grid]:min-w-0 data-[layout=grid]:grid-cols-1 data-[layout=grid]:justify-items-center data-[layout=grid]:text-center data-[layout=grid]:data-selected:bg-muted data-[layout=grid]:data-selected:text-foreground data-[orientation=horizontal]:not-data-[layout=grid]:w-44 data-[orientation=horizontal]:not-data-[layout=grid]:min-w-44 data-[orientation=horizontal]:not-data-[layout=grid]:items-start motion-reduce:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item"
     });
 });
 const Listbox_ListboxItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemText, {
         ref: ref,
-        "data-slot": "listbox-item-text",
         className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item-text"
     });
 });
 const Listbox_ListboxItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemIndicator, {
         ref: ref,
-        "data-slot": "listbox-item-indicator",
         className: cn('inline-flex size-4 shrink-0 items-center justify-center data-[state=unchecked]:invisible [&>svg]:size-3', className),
         ...props,
+        "data-slot": "listbox-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
 const Listbox_ListboxValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ValueText, {
         ref: ref,
-        "data-slot": "listbox-value-text",
         className: cn('text-sm leading-5 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-value-text"
     });
 });
 const Listbox_ListboxItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "listbox-item-text-content",
         className: cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item-text-content"
     });
 });
 const Listbox_ListboxItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "listbox-item-text-icon",
         className: cn('inline-flex size-4 shrink-0 items-center justify-center', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item-text-icon"
     });
 });
 const Listbox_ListboxItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "listbox-item-text-label",
         className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
-        ...props
+        ...props,
+        "data-slot": "listbox-item-text-label"
     });
 });
 const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {

package/dist/components/marquee/Marquee.js

@@ -28,56 +28,56 @@ const marqueeRootVariants = cva('group relative w-full overflow-hidden text-fore
 const Marquee_MarqueeRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Root, {
         ref: ref,
-        "data-slot": "marquee-root",
         className: cn(marqueeRootVariants({
             orientation: 'top' === props.side || 'bottom' === props.side ? 'vertical' : 'horizontal'
         }), className),
-        ...props
+        ...props,
+        "data-slot": "marquee-root"
     });
 });
 const Marquee_MarqueeRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.RootProvider, {
         ref: ref,
-        "data-slot": "marquee-root-provider",
         className: cn(marqueeRootVariants({
             orientation: props.value.orientation
         }), className),
-        ...props
+        ...props,
+        "data-slot": "marquee-root-provider"
     });
 });
 const Marquee_MarqueeViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Viewport, {
         ref: ref,
-        "data-slot": "marquee-viewport",
         className: cn('size-full', className),
-        ...props
+        ...props,
+        "data-slot": "marquee-viewport"
     });
 });
 const Marquee_MarqueeContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Content, {
         ref: ref,
-        "data-slot": "marquee-content",
         className: cn('animate-moduix-marquee-x group-data-paused:[animation-play-state:paused] data-reverse:[animation-direction:reverse] data-[side=bottom]:animate-moduix-marquee-y data-[side=top]:animate-moduix-marquee-y motion-reduce:animate-none', className),
-        ...props
+        ...props,
+        "data-slot": "marquee-content"
     });
 });
 const Marquee_MarqueeItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Item, {
         ref: ref,
-        "data-slot": "marquee-item",
         className: cn('shrink-0', className),
-        ...props
+        ...props,
+        "data-slot": "marquee-item"
     });
 });
 const Marquee_MarqueeEdge = /*#__PURE__*/ forwardRef(function({ className, side, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Edge, {
         ref: ref,
-        "data-slot": "marquee-edge",
         side: side,
         className: cn(marqueeEdgeVariants({
             side
         }), className),
-        ...props
+        ...props,
+        "data-slot": "marquee-edge"
     });
 });
 const Marquee_Marquee = Object.assign(Marquee_MarqueeRoot, {