@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/splitter/Splitter.js

@@ -20,14 +20,15 @@ function SplitterRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "splitter-root",
         get ["class"] () {
             return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class);
         },
         get style () {
             return getRootStyle(local.style);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-root"
+    }));
 }
 function SplitterRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -39,36 +40,39 @@ function SplitterRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "splitter-root-provider",
         get ["class"] () {
             return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class);
         },
         get style () {
             return getRootStyle(local.style);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-root-provider"
+    }));
 }
 function SplitterPanel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Splitter.Panel, mergeProps({
-        "data-slot": "splitter-panel",
         get ["class"] () {
             return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-panel"
+    }));
 }
 function SplitterResizeTriggerIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Splitter.ResizeTriggerIndicator, mergeProps({
-        "data-slot": "splitter-resize-trigger-indicator",
         get ["class"] () {
             return cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-resize-trigger-indicator"
+    }));
 }
 function SplitterResizeTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -80,11 +84,11 @@ function SplitterResizeTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "splitter-resize-trigger",
         get ["class"] () {
             return cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", local.class);
         }
     }, others, {
+        "data-slot": "splitter-resize-trigger",
         get children () {
             return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(SplitterResizeTriggerIndicator, {}) : local.children;
         }

package/dist/components/splitter/Splitter.jsx

@@ -15,7 +15,7 @@ function SplitterRoot(props) {
         'class',
         'style'
     ]);
-    return <Splitter.Root asChild={local.asChild} data-slot="splitter-root" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class)} style={getRootStyle(local.style)} {...others}/>;
+    return <Splitter.Root asChild={local.asChild} class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class)} style={getRootStyle(local.style)} {...others} data-slot="splitter-root"/>;
 }
 function SplitterRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -23,19 +23,19 @@ function SplitterRootProvider(props) {
         'class',
         'style'
     ]);
-    return <Splitter.RootProvider asChild={local.asChild} data-slot="splitter-root-provider" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class)} style={getRootStyle(local.style)} {...others}/>;
+    return <Splitter.RootProvider asChild={local.asChild} class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class)} style={getRootStyle(local.style)} {...others} data-slot="splitter-root-provider"/>;
 }
 function SplitterPanel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Splitter.Panel data-slot="splitter-panel" class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', local.class)} {...others}/>;
+    return <Splitter.Panel class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', local.class)} {...others} data-slot="splitter-panel"/>;
 }
 function SplitterResizeTriggerIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Splitter.ResizeTriggerIndicator data-slot="splitter-resize-trigger-indicator" class={cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', local.class)} {...others}/>;
+    return <Splitter.ResizeTriggerIndicator class={cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', local.class)} {...others} data-slot="splitter-resize-trigger-indicator"/>;
 }
 function SplitterResizeTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -43,7 +43,7 @@ function SplitterResizeTrigger(props) {
         'children',
         'class'
     ]);
-    return <Splitter.ResizeTrigger asChild={local.asChild} data-slot="splitter-resize-trigger" class={cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", local.class)} {...others}>
+    return <Splitter.ResizeTrigger asChild={local.asChild} class={cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", local.class)} {...others} data-slot="splitter-resize-trigger">
       {void 0 === local.children && !local.asChild ? <SplitterResizeTriggerIndicator/> : local.children}
     </Splitter.ResizeTrigger>;
 }

package/dist/components/steps/Steps.js

@@ -8,55 +8,60 @@ function StepsRoot(props) {
         'class'
     ]);
     return createComponent(Steps.Root, mergeProps({
-        "data-slot": "steps-root",
         get ["class"] () {
             return cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-root"
+    }));
 }
 function StepsRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.RootProvider, mergeProps({
-        "data-slot": "steps-root-provider",
         get ["class"] () {
             return cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-root-provider"
+    }));
 }
 function StepsList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.List, mergeProps({
-        "data-slot": "steps-list",
         get ["class"] () {
             return cn('flex w-full min-w-0 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4 max-[40rem]:data-[orientation=horizontal]:[scrollbar-width:thin] max-[40rem]:data-[orientation=horizontal]:overflow-x-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-list"
+    }));
 }
 function StepsItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.Item, mergeProps({
-        "data-slot": "steps-item",
         get ["class"] () {
             return cn('group/steps-item relative flex min-w-0 flex-1 items-center gap-3 last:flex-none data-[orientation=vertical]:min-h-16 data-[orientation=vertical]:flex-none data-[orientation=vertical]:items-start max-[40rem]:data-[orientation=horizontal]:flex-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-item"
+    }));
 }
 function StepsTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.Trigger, mergeProps({
-        "data-slot": "steps-trigger",
         get ["class"] () {
             return cn('group/steps-trigger relative z-1 inline-flex min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left text-inherit no-underline outline-none select-none [font:inherit] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:items-start', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-trigger"
+    }));
 }
 function StepsIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -66,11 +71,11 @@ function StepsIndicator(props) {
     const resolvedChildren = children(()=>local.children);
     const item = useStepsItemContext();
     return createComponent(Steps.Indicator, mergeProps({
-        "data-slot": "steps-indicator",
         get ["class"] () {
             return cn('box-border inline-flex size-8 flex-none items-center justify-center rounded-full border border-border bg-background text-sm leading-none font-semibold text-muted-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out data-complete:border-foreground data-complete:bg-foreground data-complete:text-background data-current:border-foreground data-current:bg-background data-current:text-foreground motion-reduce:transition-none [&_svg]:size-3.5 [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:border-foreground [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "steps-indicator",
         get children () {
             return resolvedChildren() ?? (item().completed ? createComponent(CheckIcon, {}) : item().index + 1);
         }
@@ -81,66 +86,72 @@ function StepsSeparator(props) {
         'class'
     ]);
     return createComponent(Steps.Separator, mergeProps({
-        "data-slot": "steps-separator",
         get ["class"] () {
             return cn('pointer-events-none mx-2 h-px min-w-8 flex-auto bg-border group-last/steps-item:hidden data-complete:bg-foreground data-[orientation=vertical]:absolute data-[orientation=vertical]:start-[15.5px] data-[orientation=vertical]:top-10 data-[orientation=vertical]:-bottom-4 data-[orientation=vertical]:m-0 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:min-w-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-separator"
+    }));
 }
 function StepsContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.Content, mergeProps({
-        "data-slot": "steps-content",
         get ["class"] () {
             return cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-sm leading-5 text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-content"
+    }));
 }
 function StepsCompletedContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.CompletedContent, mergeProps({
-        "data-slot": "steps-completed-content",
         get ["class"] () {
             return cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-center text-sm leading-5 font-medium text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-completed-content"
+    }));
 }
 function StepsPrevTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.PrevTrigger, mergeProps({
-        "data-slot": "steps-prev-trigger",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-prev-trigger"
+    }));
 }
 function StepsNextTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.NextTrigger, mergeProps({
-        "data-slot": "steps-next-trigger",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 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": "steps-next-trigger"
+    }));
 }
 function StepsProgress(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Steps.Progress, mergeProps({
-        "data-slot": "steps-progress",
         get ["class"] () {
             return cn("relative block h-0.5 w-full overflow-hidden rounded-full bg-border before:absolute before:inset-y-0 before:start-0 before:w-[var(--percent,0%)] before:rounded-[inherit] before:bg-foreground before:transition-[width] before:duration-200 before:ease-in-out before:content-[''] motion-reduce:before:transition-none", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "steps-progress"
+    }));
 }
 const Steps_Steps = Object.assign(StepsRoot, {
     Root: StepsRoot,

package/dist/components/steps/Steps.jsx

@@ -6,31 +6,31 @@ function StepsRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.Root data-slot="steps-root" class={cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class)} {...others}/>;
+    return <Steps.Root class={cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class)} {...others} data-slot="steps-root"/>;
 }
 function StepsRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.RootProvider data-slot="steps-root-provider" class={cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class)} {...others}/>;
+    return <Steps.RootProvider class={cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class)} {...others} data-slot="steps-root-provider"/>;
 }
 function StepsList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.List data-slot="steps-list" class={cn('flex w-full min-w-0 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4 max-[40rem]:data-[orientation=horizontal]:[scrollbar-width:thin] max-[40rem]:data-[orientation=horizontal]:overflow-x-auto', local.class)} {...others}/>;
+    return <Steps.List class={cn('flex w-full min-w-0 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4 max-[40rem]:data-[orientation=horizontal]:[scrollbar-width:thin] max-[40rem]:data-[orientation=horizontal]:overflow-x-auto', local.class)} {...others} data-slot="steps-list"/>;
 }
 function StepsItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.Item data-slot="steps-item" class={cn('group/steps-item relative flex min-w-0 flex-1 items-center gap-3 last:flex-none data-[orientation=vertical]:min-h-16 data-[orientation=vertical]:flex-none data-[orientation=vertical]:items-start max-[40rem]:data-[orientation=horizontal]:flex-none', local.class)} {...others}/>;
+    return <Steps.Item class={cn('group/steps-item relative flex min-w-0 flex-1 items-center gap-3 last:flex-none data-[orientation=vertical]:min-h-16 data-[orientation=vertical]:flex-none data-[orientation=vertical]:items-start max-[40rem]:data-[orientation=horizontal]:flex-none', local.class)} {...others} data-slot="steps-item"/>;
 }
 function StepsTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.Trigger data-slot="steps-trigger" class={cn('group/steps-trigger relative z-1 inline-flex min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left text-inherit no-underline outline-none select-none [font:inherit] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:items-start', local.class)} {...others}/>;
+    return <Steps.Trigger class={cn('group/steps-trigger relative z-1 inline-flex min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left text-inherit no-underline outline-none select-none [font:inherit] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:items-start', local.class)} {...others} data-slot="steps-trigger"/>;
 }
 function StepsIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -39,7 +39,7 @@ function StepsIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const item = useStepsItemContext();
-    return <Steps.Indicator data-slot="steps-indicator" class={cn('box-border inline-flex size-8 flex-none items-center justify-center rounded-full border border-border bg-background text-sm leading-none font-semibold text-muted-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out data-complete:border-foreground data-complete:bg-foreground data-complete:text-background data-current:border-foreground data-current:bg-background data-current:text-foreground motion-reduce:transition-none [&_svg]:size-3.5 [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:border-foreground [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:text-foreground', local.class)} {...others}>
+    return <Steps.Indicator class={cn('box-border inline-flex size-8 flex-none items-center justify-center rounded-full border border-border bg-background text-sm leading-none font-semibold text-muted-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out data-complete:border-foreground data-complete:bg-foreground data-complete:text-background data-current:border-foreground data-current:bg-background data-current:text-foreground motion-reduce:transition-none [&_svg]:size-3.5 [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:border-foreground [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:text-foreground', local.class)} {...others} data-slot="steps-indicator">
       {resolvedChildren() ?? (item().completed ? <CheckIcon/> : item().index + 1)}
     </Steps.Indicator>;
 }
@@ -47,37 +47,37 @@ function StepsSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.Separator data-slot="steps-separator" class={cn('pointer-events-none mx-2 h-px min-w-8 flex-auto bg-border group-last/steps-item:hidden data-complete:bg-foreground data-[orientation=vertical]:absolute data-[orientation=vertical]:start-[15.5px] data-[orientation=vertical]:top-10 data-[orientation=vertical]:-bottom-4 data-[orientation=vertical]:m-0 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:min-w-0', local.class)} {...others}/>;
+    return <Steps.Separator class={cn('pointer-events-none mx-2 h-px min-w-8 flex-auto bg-border group-last/steps-item:hidden data-complete:bg-foreground data-[orientation=vertical]:absolute data-[orientation=vertical]:start-[15.5px] data-[orientation=vertical]:top-10 data-[orientation=vertical]:-bottom-4 data-[orientation=vertical]:m-0 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:min-w-0', local.class)} {...others} data-slot="steps-separator"/>;
 }
 function StepsContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.Content data-slot="steps-content" class={cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-sm leading-5 text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+    return <Steps.Content class={cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-sm leading-5 text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others} data-slot="steps-content"/>;
 }
 function StepsCompletedContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.CompletedContent data-slot="steps-completed-content" class={cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-center text-sm leading-5 font-medium text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+    return <Steps.CompletedContent class={cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-center text-sm leading-5 font-medium text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others} data-slot="steps-completed-content"/>;
 }
 function StepsPrevTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.PrevTrigger data-slot="steps-prev-trigger" class={cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', local.class)} {...others}/>;
+    return <Steps.PrevTrigger class={cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', local.class)} {...others} data-slot="steps-prev-trigger"/>;
 }
 function StepsNextTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.NextTrigger data-slot="steps-next-trigger" class={cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 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 <Steps.NextTrigger class={cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 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="steps-next-trigger"/>;
 }
 function StepsProgress(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Steps.Progress data-slot="steps-progress" class={cn("relative block h-0.5 w-full overflow-hidden rounded-full bg-border before:absolute before:inset-y-0 before:start-0 before:w-[var(--percent,0%)] before:rounded-[inherit] before:bg-foreground before:transition-[width] before:duration-200 before:ease-in-out before:content-[''] motion-reduce:before:transition-none", local.class)} {...others}/>;
+    return <Steps.Progress class={cn("relative block h-0.5 w-full overflow-hidden rounded-full bg-border before:absolute before:inset-y-0 before:start-0 before:w-[var(--percent,0%)] before:rounded-[inherit] before:bg-foreground before:transition-[width] before:duration-200 before:ease-in-out before:content-[''] motion-reduce:before:transition-none", local.class)} {...others} data-slot="steps-progress"/>;
 }
 const Steps_Steps = Object.assign(StepsRoot, {
     Root: StepsRoot,

package/dist/components/swap/Swap.js

@@ -8,14 +8,15 @@ function SwapRoot(props) {
         'class'
     ]);
     return createComponent(Swap.Root, mergeProps({
-        "data-slot": "swap-root",
         get ["data-animation"] () {
             return local.animation ?? 'scale';
         },
         get ["class"] () {
             return cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "swap-root"
+    }));
 }
 function SwapRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -23,25 +24,27 @@ function SwapRootProvider(props) {
         'class'
     ]);
     return createComponent(Swap.RootProvider, mergeProps({
-        "data-slot": "swap-root-provider",
         get ["data-animation"] () {
             return local.animation ?? 'scale';
         },
         get ["class"] () {
             return cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "swap-root-provider"
+    }));
 }
 function SwapIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Swap.Indicator, mergeProps({
-        "data-slot": "swap-indicator",
         get ["class"] () {
             return cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "swap-indicator"
+    }));
 }
 const Swap_Swap = Object.assign(SwapRoot, {
     Root: SwapRoot,

package/dist/components/swap/Swap.jsx

@@ -6,20 +6,20 @@ function SwapRoot(props) {
         'animation',
         'class'
     ]);
-    return <Swap.Root data-slot="swap-root" data-animation={local.animation ?? 'scale'} class={cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others}/>;
+    return <Swap.Root data-animation={local.animation ?? 'scale'} class={cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others} data-slot="swap-root"/>;
 }
 function SwapRootProvider(props) {
     const [local, others] = splitProps(props, [
         'animation',
         'class'
     ]);
-    return <Swap.RootProvider data-slot="swap-root-provider" data-animation={local.animation ?? 'scale'} class={cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others}/>;
+    return <Swap.RootProvider data-animation={local.animation ?? 'scale'} class={cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others} data-slot="swap-root-provider"/>;
 }
 function SwapIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Swap.Indicator data-slot="swap-indicator" class={cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+    return <Swap.Indicator class={cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others} data-slot="swap-indicator"/>;
 }
 const Swap_Swap = Object.assign(SwapRoot, {
     Root: SwapRoot,

package/dist/components/switch/Switch.js

@@ -13,7 +13,6 @@ function SwitchRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "switch-root",
         get ["data-size"] () {
             return local.size ?? 'md';
         },
@@ -21,6 +20,7 @@ function SwitchRoot(props) {
             return cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
         }
     }, others, {
+        "data-slot": "switch-root",
         get children () {
             return local.children;
         }
@@ -37,7 +37,6 @@ function SwitchRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "switch-root-provider",
         get ["data-size"] () {
             return local.size ?? 'md';
         },
@@ -45,6 +44,7 @@ function SwitchRootProvider(props) {
             return cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
         }
     }, others, {
+        "data-slot": "switch-root-provider",
         get children () {
             return local.children;
         }
@@ -57,11 +57,11 @@ function SwitchControl(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Switch.Control, mergeProps({
-        "data-slot": "switch-control",
         get ["class"] () {
             return cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", local.class);
         }
     }, others, {
+        "data-slot": "switch-control",
         get children () {
             return resolvedChildren() ?? createComponent(SwitchThumb, {});
         }
@@ -72,22 +72,24 @@ function SwitchThumb(props) {
         'class'
     ]);
     return createComponent(Switch.Thumb, mergeProps({
-        "data-slot": "switch-thumb",
         get ["class"] () {
             return cn('inline-flex size-5 translate-x-0 items-center justify-center rounded-full border-transparent bg-background text-muted shadow-sm transition-[translate,background-color,color] duration-200 ease-in-out group-data-[size=lg]/switch:size-control-xs group-data-[size=sm]/switch:size-4 group-data-[size=xl]/switch:size-7 group-data-[size=xs]/switch:size-3 data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary group-data-[size=lg]/switch:data-[state=checked]:translate-x-[22px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=xl]/switch:data-[state=checked]:translate-x-[26px] group-data-[size=xs]/switch:data-[state=checked]:translate-x-[10px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[18px] group-data-[size=lg]/switch:rtl:data-[state=checked]:-translate-x-[22px] group-data-[size=sm]/switch:rtl:data-[state=checked]:-translate-x-[14px] group-data-[size=xl]/switch:rtl:data-[state=checked]:-translate-x-[26px] group-data-[size=xs]/switch:rtl:data-[state=checked]:-translate-x-[10px] [&>svg]:block [&>svg]:size-[65%] [&>svg]:shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "switch-thumb"
+    }));
 }
 function SwitchLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Switch.Label, mergeProps({
-        "data-slot": "switch-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "switch-label"
+    }));
 }
 const Switch_Switch = Object.assign(SwitchRoot, {
     Root: SwitchRoot,

package/dist/components/switch/Switch.jsx

@@ -8,7 +8,7 @@ function SwitchRoot(props) {
         'class',
         'size'
     ]);
-    return <Switch.Root asChild={local.asChild} data-slot="switch-root" data-size={local.size ?? 'md'} class={cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+    return <Switch.Root asChild={local.asChild} data-size={local.size ?? 'md'} class={cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others} data-slot="switch-root">
       {local.children}
     </Switch.Root>;
 }
@@ -19,7 +19,7 @@ function SwitchRootProvider(props) {
         'class',
         'size'
     ]);
-    return <Switch.RootProvider asChild={local.asChild} data-slot="switch-root-provider" data-size={local.size ?? 'md'} class={cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+    return <Switch.RootProvider asChild={local.asChild} data-size={local.size ?? 'md'} class={cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others} data-slot="switch-root-provider">
       {local.children}
     </Switch.RootProvider>;
 }
@@ -29,7 +29,7 @@ function SwitchControl(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Switch.Control data-slot="switch-control" class={cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", local.class)} {...others}>
+    return <Switch.Control class={cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", local.class)} {...others} data-slot="switch-control">
       {resolvedChildren() ?? <SwitchThumb/>}
     </Switch.Control>;
 }
@@ -37,13 +37,13 @@ function SwitchThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Switch.Thumb data-slot="switch-thumb" class={cn('inline-flex size-5 translate-x-0 items-center justify-center rounded-full border-transparent bg-background text-muted shadow-sm transition-[translate,background-color,color] duration-200 ease-in-out group-data-[size=lg]/switch:size-control-xs group-data-[size=sm]/switch:size-4 group-data-[size=xl]/switch:size-7 group-data-[size=xs]/switch:size-3 data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary group-data-[size=lg]/switch:data-[state=checked]:translate-x-[22px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=xl]/switch:data-[state=checked]:translate-x-[26px] group-data-[size=xs]/switch:data-[state=checked]:translate-x-[10px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[18px] group-data-[size=lg]/switch:rtl:data-[state=checked]:-translate-x-[22px] group-data-[size=sm]/switch:rtl:data-[state=checked]:-translate-x-[14px] group-data-[size=xl]/switch:rtl:data-[state=checked]:-translate-x-[26px] group-data-[size=xs]/switch:rtl:data-[state=checked]:-translate-x-[10px] [&>svg]:block [&>svg]:size-[65%] [&>svg]:shrink-0', local.class)} {...others}/>;
+    return <Switch.Thumb class={cn('inline-flex size-5 translate-x-0 items-center justify-center rounded-full border-transparent bg-background text-muted shadow-sm transition-[translate,background-color,color] duration-200 ease-in-out group-data-[size=lg]/switch:size-control-xs group-data-[size=sm]/switch:size-4 group-data-[size=xl]/switch:size-7 group-data-[size=xs]/switch:size-3 data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary group-data-[size=lg]/switch:data-[state=checked]:translate-x-[22px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=xl]/switch:data-[state=checked]:translate-x-[26px] group-data-[size=xs]/switch:data-[state=checked]:translate-x-[10px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[18px] group-data-[size=lg]/switch:rtl:data-[state=checked]:-translate-x-[22px] group-data-[size=sm]/switch:rtl:data-[state=checked]:-translate-x-[14px] group-data-[size=xl]/switch:rtl:data-[state=checked]:-translate-x-[26px] group-data-[size=xs]/switch:rtl:data-[state=checked]:-translate-x-[10px] [&>svg]:block [&>svg]:size-[65%] [&>svg]:shrink-0', local.class)} {...others} data-slot="switch-thumb"/>;
 }
 function SwitchLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Switch.Label data-slot="switch-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+    return <Switch.Label class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others} data-slot="switch-label"/>;
 }
 const Switch_Switch = Object.assign(SwitchRoot, {
     Root: SwitchRoot,