@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/carousel/Carousel.jsx

@@ -6,31 +6,31 @@ function CarouselRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Root data-slot="carousel-root" class={cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} {...others}/>;
+    return <Carousel.Root class={cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} {...others} data-slot="carousel-root"/>;
 }
 function CarouselRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.RootProvider data-slot="carousel-root-provider" class={cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} {...others}/>;
+    return <Carousel.RootProvider class={cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} {...others} data-slot="carousel-root-provider"/>;
 }
 function CarouselControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Control data-slot="carousel-control" class={cn('flex min-w-0 items-center gap-3 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between', local.class)} {...others}/>;
+    return <Carousel.Control class={cn('flex min-w-0 items-center gap-3 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between', local.class)} {...others} data-slot="carousel-control"/>;
 }
 function CarouselItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.ItemGroup data-slot="carousel-item-group" class={cn('flex min-h-0 min-w-0 flex-1 [scrollbar-width:none] overscroll-x-contain overscroll-y-auto scroll-smooth rounded-xl outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-dragging:cursor-grabbing data-dragging:select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:overscroll-x-auto data-[orientation=vertical]:overscroll-y-contain motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden', local.class)} {...others}/>;
+    return <Carousel.ItemGroup class={cn('flex min-h-0 min-w-0 flex-1 [scrollbar-width:none] overscroll-x-contain overscroll-y-auto scroll-smooth rounded-xl outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-dragging:cursor-grabbing data-dragging:select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:overscroll-x-auto data-[orientation=vertical]:overscroll-y-contain motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden', local.class)} {...others} data-slot="carousel-item-group"/>;
 }
 function CarouselItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Item data-slot="carousel-item" class={cn('box-border min-h-0 min-w-0', local.class)} {...others}/>;
+    return <Carousel.Item class={cn('box-border min-h-0 min-w-0', local.class)} {...others} data-slot="carousel-item"/>;
 }
 function CarouselPrevTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -39,7 +39,7 @@ function CarouselPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Carousel.PrevTrigger asChild={local.asChild} data-slot="carousel-prev-trigger" class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others}>
+    return <Carousel.PrevTrigger asChild={local.asChild} class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-prev-trigger">
       {resolvedChildren() ?? <span class="inline-flex items-center justify-center">
           <ChevronLeftIcon class="group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"/>
         </span>}
@@ -52,7 +52,7 @@ function CarouselNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Carousel.NextTrigger asChild={local.asChild} data-slot="carousel-next-trigger" class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others}>
+    return <Carousel.NextTrigger asChild={local.asChild} class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-next-trigger">
       {resolvedChildren() ?? <span class="inline-flex items-center justify-center">
           <ChevronRightIcon class="group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"/>
         </span>}
@@ -62,18 +62,17 @@ function CarouselIndicatorGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.IndicatorGroup data-slot="carousel-indicator-group" class={cn('flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col', local.class)} {...others}/>;
+    return <Carousel.IndicatorGroup class={cn('flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col', local.class)} {...others} data-slot="carousel-indicator-group"/>;
 }
 function CarouselIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Indicator data-slot="carousel-indicator" class={cn('focus-visible:outline-offset-0.5 size-2 cursor-pointer rounded-full border-0 bg-muted p-0 opacity-90 transition-[width,height,background-color,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-current:w-6 data-current:bg-primary data-current:opacity-100 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-not-allowed data-readonly:opacity-50 data-[orientation=vertical]:data-current:h-6 data-[orientation=vertical]:data-current:w-2 motion-reduce:transition-none forced-colors:bg-[ButtonText] forced-colors:data-current:bg-[Highlight] [&:not(:disabled):not([data-disabled]):not([data-readonly]):not([data-current]):hover]:bg-muted-foreground', local.class)} {...others}/>;
+    return <Carousel.Indicator class={cn('focus-visible:outline-offset-0.5 size-2 cursor-pointer rounded-full border-0 bg-muted p-0 opacity-90 transition-[width,height,background-color,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-current:w-6 data-current:bg-primary data-current:opacity-100 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-not-allowed data-readonly:opacity-50 data-[orientation=vertical]:data-current:h-6 data-[orientation=vertical]:data-current:w-2 motion-reduce:transition-none forced-colors:bg-[ButtonText] forced-colors:data-current:bg-[Highlight] [&:not(:disabled):not([data-disabled]):not([data-readonly]):not([data-current]):hover]:bg-muted-foreground', local.class)} {...others} data-slot="carousel-indicator"/>;
 }
 function CarouselIndicators(props) {
     const [local, others] = splitProps(props, [
         'class',
-        'children',
         'indicatorClassName'
     ]);
     return <Carousel.Context>
@@ -88,19 +87,19 @@ function CarouselAutoplayTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.AutoplayTrigger data-slot="carousel-autoplay-trigger" class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others}/>;
+    return <Carousel.AutoplayTrigger class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-autoplay-trigger"/>;
 }
 function CarouselAutoplayIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.AutoplayIndicator data-slot="carousel-autoplay-indicator" class={cn('inline-flex min-w-4 items-center justify-center text-xs font-medium uppercase', local.class)} {...others}/>;
+    return <Carousel.AutoplayIndicator class={cn('inline-flex min-w-4 items-center justify-center text-xs font-medium uppercase', local.class)} {...others} data-slot="carousel-autoplay-indicator"/>;
 }
 function CarouselProgressText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.ProgressText data-slot="carousel-progress-text" dir="ltr" class={cn('text-sm text-muted-foreground tabular-nums [unicode-bidi:isolate]', local.class)} {...others}/>;
+    return <Carousel.ProgressText dir="ltr" class={cn('text-sm text-muted-foreground tabular-nums [unicode-bidi:isolate]', local.class)} {...others} data-slot="carousel-progress-text"/>;
 }
 const Carousel_Carousel = Object.assign(CarouselRoot, {
     Root: CarouselRoot,

package/dist/components/checkbox/Checkbox.js

@@ -15,14 +15,14 @@ function CheckboxRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "checkbox-root",
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        "data-slot": "checkbox-root",
         get children () {
             return local.children;
         }
@@ -39,14 +39,14 @@ function CheckboxRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "checkbox-root-provider",
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        "data-slot": "checkbox-root-provider",
         get children () {
             return local.children;
         }
@@ -61,7 +61,6 @@ function CheckboxIndicator(props) {
     const resolvedChildren = children(()=>local.children);
     const slot = ()=>local.indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
     return createComponent(Checkbox.Indicator, mergeProps({
-        "data-slot": "checkbox-indicator",
         get ["class"] () {
             return cn('inline-flex h-full w-full items-center justify-center text-inherit', local.class);
         },
@@ -69,6 +68,7 @@ function CheckboxIndicator(props) {
             return local.indeterminate;
         }
     }, others, {
+        "data-slot": "checkbox-indicator",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$ = _tmpl$();
@@ -89,11 +89,11 @@ function CheckboxControl(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Checkbox.Control, mergeProps({
-        "data-slot": "checkbox-control",
         get ["class"] () {
             return cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent box-border inline-flex size-5 shrink-0 items-center justify-center rounded-xs border border-border bg-background p-0 leading-none text-primary-foreground transition-[background-color,border-color,color,opacity] duration-200 select-none group-data-[size=lg]/checkbox:size-control-xs group-data-[size=sm]/checkbox:size-4 group-data-[size=xl]/checkbox:size-7 group-data-[size=xs]/checkbox:size-3.5 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:data-focus-visible:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-invalid:data-[state=checked]:border-destructive data-invalid:data-[state=checked]:bg-destructive data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-invalid:data-[state=indeterminate]:border-destructive data-invalid:data-[state=indeterminate]:bg-destructive motion-reduce:transition-none", local.class);
         }
     }, others, {
+        "data-slot": "checkbox-control",
         get children () {
             return resolvedChildren() ?? [
                 createComponent(CheckboxIndicator, {}),
@@ -109,22 +109,24 @@ function CheckboxLabel(props) {
         'class'
     ]);
     return createComponent(Checkbox.Label, mergeProps({
-        "data-slot": "checkbox-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-inherit', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "checkbox-label"
+    }));
 }
 function CheckboxGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Checkbox.Group, mergeProps({
-        "data-slot": "checkbox-group",
         get ["class"] () {
             return cn('flex flex-col gap-2 text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "checkbox-group"
+    }));
 }
 const Checkbox_Checkbox = Object.assign(CheckboxRoot, {
     Root: CheckboxRoot,

package/dist/components/checkbox/Checkbox.jsx

@@ -9,7 +9,7 @@ function CheckboxRoot(props) {
         'class',
         'size'
     ]);
-    return <Checkbox.Root asChild={local.asChild} data-slot="checkbox-root" data-size={local.size ?? 'md'} class={cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+    return <Checkbox.Root asChild={local.asChild} class={cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others} data-size={local.size ?? 'md'} data-slot="checkbox-root">
       {local.children}
     </Checkbox.Root>;
 }
@@ -20,7 +20,7 @@ function CheckboxRootProvider(props) {
         'class',
         'size'
     ]);
-    return <Checkbox.RootProvider asChild={local.asChild} data-slot="checkbox-root-provider" data-size={local.size ?? 'md'} class={cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+    return <Checkbox.RootProvider asChild={local.asChild} class={cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others} data-size={local.size ?? 'md'} data-slot="checkbox-root-provider">
       {local.children}
     </Checkbox.RootProvider>;
 }
@@ -32,7 +32,7 @@ function CheckboxIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const slot = ()=>local.indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
-    return <Checkbox.Indicator data-slot="checkbox-indicator" class={cn('inline-flex h-full w-full items-center justify-center text-inherit', local.class)} indeterminate={local.indeterminate} {...others}>
+    return <Checkbox.Indicator class={cn('inline-flex h-full w-full items-center justify-center text-inherit', local.class)} indeterminate={local.indeterminate} {...others} data-slot="checkbox-indicator">
       {resolvedChildren() ?? <span aria-hidden="true" data-slot={slot()} class="inline-flex size-3 items-center justify-center leading-none text-inherit group-data-[size=lg]/checkbox:size-3.5 group-data-[size=sm]/checkbox:size-2.5 group-data-[size=xl]/checkbox:size-4 group-data-[size=xs]/checkbox:size-2 [&>svg]:size-full">
           {local.indeterminate ? <IndeterminateIcon/> : <CheckIcon/>}
         </span>}
@@ -44,7 +44,7 @@ function CheckboxControl(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Checkbox.Control data-slot="checkbox-control" class={cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent box-border inline-flex size-5 shrink-0 items-center justify-center rounded-xs border border-border bg-background p-0 leading-none text-primary-foreground transition-[background-color,border-color,color,opacity] duration-200 select-none group-data-[size=lg]/checkbox:size-control-xs group-data-[size=sm]/checkbox:size-4 group-data-[size=xl]/checkbox:size-7 group-data-[size=xs]/checkbox:size-3.5 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:data-focus-visible:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-invalid:data-[state=checked]:border-destructive data-invalid:data-[state=checked]:bg-destructive data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-invalid:data-[state=indeterminate]:border-destructive data-invalid:data-[state=indeterminate]:bg-destructive motion-reduce:transition-none", local.class)} {...others}>
+    return <Checkbox.Control class={cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent box-border inline-flex size-5 shrink-0 items-center justify-center rounded-xs border border-border bg-background p-0 leading-none text-primary-foreground transition-[background-color,border-color,color,opacity] duration-200 select-none group-data-[size=lg]/checkbox:size-control-xs group-data-[size=sm]/checkbox:size-4 group-data-[size=xl]/checkbox:size-7 group-data-[size=xs]/checkbox:size-3.5 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:data-focus-visible:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-invalid:data-[state=checked]:border-destructive data-invalid:data-[state=checked]:bg-destructive data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-invalid:data-[state=indeterminate]:border-destructive data-invalid:data-[state=indeterminate]:bg-destructive motion-reduce:transition-none", local.class)} {...others} data-slot="checkbox-control">
       {resolvedChildren() ?? <>
           <CheckboxIndicator/>
           <CheckboxIndicator indeterminate/>
@@ -55,13 +55,13 @@ function CheckboxLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Checkbox.Label data-slot="checkbox-label" class={cn('text-sm leading-5 font-medium text-inherit', local.class)} {...others}/>;
+    return <Checkbox.Label class={cn('text-sm leading-5 font-medium text-inherit', local.class)} {...others} data-slot="checkbox-label"/>;
 }
 function CheckboxGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Checkbox.Group data-slot="checkbox-group" class={cn('flex flex-col gap-2 text-foreground', local.class)} {...others}/>;
+    return <Checkbox.Group class={cn('flex flex-col gap-2 text-foreground', local.class)} {...others} data-slot="checkbox-group"/>;
 }
 const Checkbox_Checkbox = Object.assign(CheckboxRoot, {
     Root: CheckboxRoot,

package/dist/components/clipboard/Clipboard.js

@@ -9,66 +9,72 @@ function ClipboardRoot(props) {
         'class'
     ]);
     return createComponent(Clipboard.Root, mergeProps({
-        "data-slot": "clipboard-root",
         get ["class"] () {
             return cn('flex w-full flex-col gap-1.5 text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-root"
+    }));
 }
 function ClipboardRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Clipboard.RootProvider, mergeProps({
-        "data-slot": "clipboard-root-provider",
         get ["class"] () {
             return cn('flex w-full flex-col gap-1.5 text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-root-provider"
+    }));
 }
 function ClipboardLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Clipboard.Label, mergeProps({
-        "data-slot": "clipboard-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-label"
+    }));
 }
 function ClipboardControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Clipboard.Control, mergeProps({
-        "data-slot": "clipboard-control",
         get ["class"] () {
             return cn('flex w-full items-center gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-control"
+    }));
 }
 function ClipboardInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Clipboard.Input, mergeProps({
-        "data-slot": "clipboard-input",
         get ["class"] () {
             return cn('box-border min-h-control-md w-full min-w-0 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-input"
+    }));
 }
 function ClipboardTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Clipboard.Trigger, mergeProps({
-        "data-slot": "clipboard-trigger",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-md shrink-0 cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-trigger"
+    }));
 }
 function ClipboardIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -78,7 +84,6 @@ function ClipboardIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Clipboard.Indicator, mergeProps({
-        "data-slot": "clipboard-indicator",
         get ["class"] () {
             return cn('inline-flex shrink-0 items-center justify-center', local.class);
         },
@@ -90,6 +95,7 @@ function ClipboardIndicator(props) {
             })();
         }
     }, others, {
+        "data-slot": "clipboard-indicator",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$2 = _tmpl$2();
@@ -104,24 +110,29 @@ function ClipboardValueText(props) {
         'class'
     ]);
     return createComponent(Clipboard.ValueText, mergeProps({
-        "data-slot": "clipboard-value-text",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "clipboard-value-text"
+    }));
 }
 function ClipboardCopyText(props) {
     const [local, others] = splitProps(props, [
         'children',
+        'class',
         'copied'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return createComponent(ClipboardIndicator, mergeProps({
-        "data-slot": "clipboard-copy-text",
+    return createComponent(Clipboard.Indicator, mergeProps({
+        get ["class"] () {
+            return cn('inline-flex shrink-0 items-center justify-center', local.class);
+        },
         get copied () {
             return memo(()=>void 0 === local.copied)() ? 'Copied' : local.copied;
         }
     }, others, {
+        "data-slot": "clipboard-copy-text",
         get children () {
             return memo(()=>void 0 === resolvedChildren())() ? 'Copy' : resolvedChildren();
         }

package/dist/components/clipboard/Clipboard.jsx

@@ -6,37 +6,37 @@ function ClipboardRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.Root data-slot="clipboard-root" class={cn('flex w-full flex-col gap-1.5 text-foreground', local.class)} {...others}/>;
+    return <Clipboard.Root class={cn('flex w-full flex-col gap-1.5 text-foreground', local.class)} {...others} data-slot="clipboard-root"/>;
 }
 function ClipboardRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.RootProvider data-slot="clipboard-root-provider" class={cn('flex w-full flex-col gap-1.5 text-foreground', local.class)} {...others}/>;
+    return <Clipboard.RootProvider class={cn('flex w-full flex-col gap-1.5 text-foreground', local.class)} {...others} data-slot="clipboard-root-provider"/>;
 }
 function ClipboardLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.Label data-slot="clipboard-label" class={cn('text-sm leading-5 font-medium', local.class)} {...others}/>;
+    return <Clipboard.Label class={cn('text-sm leading-5 font-medium', local.class)} {...others} data-slot="clipboard-label"/>;
 }
 function ClipboardControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.Control data-slot="clipboard-control" class={cn('flex w-full items-center gap-2', local.class)} {...others}/>;
+    return <Clipboard.Control class={cn('flex w-full items-center gap-2', local.class)} {...others} data-slot="clipboard-control"/>;
 }
 function ClipboardInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.Input data-slot="clipboard-input" class={cn('box-border min-h-control-md w-full min-w-0 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', local.class)} {...others}/>;
+    return <Clipboard.Input class={cn('box-border min-h-control-md w-full min-w-0 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', local.class)} {...others} data-slot="clipboard-input"/>;
 }
 function ClipboardTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.Trigger data-slot="clipboard-trigger" class={cn('box-border inline-flex min-h-control-md shrink-0 cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others}/>;
+    return <Clipboard.Trigger class={cn('box-border inline-flex min-h-control-md shrink-0 cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others} data-slot="clipboard-trigger"/>;
 }
 function ClipboardIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -45,9 +45,9 @@ function ClipboardIndicator(props) {
         'copied'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Clipboard.Indicator data-slot="clipboard-indicator" class={cn('inline-flex shrink-0 items-center justify-center', local.class)} copied={local.copied ?? <span aria-hidden="true" data-slot="clipboard-indicator-copied-icon" class="inline-flex shrink-0 items-center justify-center">
+    return <Clipboard.Indicator class={cn('inline-flex shrink-0 items-center justify-center', local.class)} copied={local.copied ?? <span aria-hidden="true" data-slot="clipboard-indicator-copied-icon" class="inline-flex shrink-0 items-center justify-center">
             <CheckIcon/>
-          </span>} {...others}>
+          </span>} {...others} data-slot="clipboard-indicator">
       {resolvedChildren() ?? <span aria-hidden="true" data-slot="clipboard-indicator-idle-icon" class="inline-flex shrink-0 items-center justify-center">
           <CopyIcon/>
         </span>}
@@ -57,17 +57,18 @@ function ClipboardValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Clipboard.ValueText data-slot="clipboard-value-text" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <Clipboard.ValueText class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="clipboard-value-text"/>;
 }
 function ClipboardCopyText(props) {
     const [local, others] = splitProps(props, [
         'children',
+        'class',
         'copied'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ClipboardIndicator data-slot="clipboard-copy-text" copied={void 0 === local.copied ? 'Copied' : local.copied} {...others}>
+    return <Clipboard.Indicator class={cn('inline-flex shrink-0 items-center justify-center', local.class)} copied={void 0 === local.copied ? 'Copied' : local.copied} {...others} data-slot="clipboard-copy-text">
       {void 0 === resolvedChildren() ? 'Copy' : resolvedChildren()}
-    </ClipboardIndicator>;
+    </Clipboard.Indicator>;
 }
 const Clipboard_Clipboard = Object.assign(ClipboardRoot, {
     Root: ClipboardRoot,

package/dist/components/collapsible/Collapsible.js

@@ -9,22 +9,24 @@ function CollapsibleRoot(props) {
         'class'
     ]);
     return createComponent(Collapsible.Root, mergeProps({
-        "data-slot": "collapsible-root",
         get ["class"] () {
             return cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "collapsible-root"
+    }));
 }
 function CollapsibleRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Collapsible.RootProvider, mergeProps({
-        "data-slot": "collapsible-root-provider",
         get ["class"] () {
             return cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "collapsible-root-provider"
+    }));
 }
 function CollapsibleTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -35,11 +37,12 @@ function CollapsibleTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "collapsible-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "collapsible-trigger"
+    }));
 }
 function CollapsibleIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -48,11 +51,11 @@ function CollapsibleIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Collapsible.Indicator, mergeProps({
-        "data-slot": "collapsible-indicator",
         get ["class"] () {
             return cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', local.class);
         }
     }, others, {
+        "data-slot": "collapsible-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(ChevronDownIcon, {});
         }
@@ -63,22 +66,24 @@ function CollapsibleContent(props) {
         'class'
     ]);
     return createComponent(Collapsible.Content, mergeProps({
-        "data-slot": "collapsible-content",
         get ["class"] () {
             return cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "collapsible-content"
+    }));
 }
 function CollapsibleBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "collapsible-body",
         get ["class"] () {
             return cn('grid min-w-0 gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "collapsible-body"
+    }));
 }
 const Collapsible_Collapsible = Object.assign(CollapsibleRoot, {
     Root: CollapsibleRoot,

package/dist/components/collapsible/Collapsible.jsx

@@ -7,20 +7,20 @@ function CollapsibleRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Collapsible.Root data-slot="collapsible-root" class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class)} {...others}/>;
+    return <Collapsible.Root class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class)} {...others} data-slot="collapsible-root"/>;
 }
 function CollapsibleRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Collapsible.RootProvider data-slot="collapsible-root-provider" class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class)} {...others}/>;
+    return <Collapsible.RootProvider class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class)} {...others} data-slot="collapsible-root-provider"/>;
 }
 function CollapsibleTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Collapsible.Trigger asChild={local.asChild} data-slot="collapsible-trigger" class={cn(!local.asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Collapsible.Trigger asChild={local.asChild} class={cn(!local.asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class)} {...others} data-slot="collapsible-trigger"/>;
 }
 function CollapsibleIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -28,7 +28,7 @@ function CollapsibleIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Collapsible.Indicator data-slot="collapsible-indicator" class={cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', local.class)} {...others}>
+    return <Collapsible.Indicator class={cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', local.class)} {...others} data-slot="collapsible-indicator">
       {resolvedChildren() ?? <ChevronDownIcon/>}
     </Collapsible.Indicator>;
 }
@@ -36,13 +36,13 @@ function CollapsibleContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Collapsible.Content data-slot="collapsible-content" class={cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+    return <Collapsible.Content class={cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others} data-slot="collapsible-content"/>;
 }
 function CollapsibleBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="collapsible-body" class={cn('grid min-w-0 gap-2', local.class)} {...others}/>;
+    return <ark.div class={cn('grid min-w-0 gap-2', local.class)} {...others} data-slot="collapsible-body"/>;
 }
 const Collapsible_Collapsible = Object.assign(CollapsibleRoot, {
     Root: CollapsibleRoot,