@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/signature-pad/SignaturePad.js

@@ -18,11 +18,11 @@ function SignaturePadRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "signature-pad-root",
         get ["class"] () {
             return cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "signature-pad-root",
         get children () {
             return createComponent(SignaturePadReadOnlyContext.Provider, {
                 value: ()=>others.readOnly ?? field?.().readOnly ?? false,
@@ -49,11 +49,11 @@ function SignaturePadRootProvider(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "signature-pad-root-provider",
                 get ["class"] () {
                     return cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
                 }
             }, others, {
+                "data-slot": "signature-pad-root-provider",
                 get children () {
                     return local.children;
                 }
@@ -66,44 +66,48 @@ function SignaturePadLabel(props) {
         'class'
     ]);
     return createComponent(SignaturePad.Label, mergeProps({
-        "data-slot": "signature-pad-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-label"
+    }));
 }
 function SignaturePadControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(SignaturePad.Control, mergeProps({
-        "data-slot": "signature-pad-control",
         get ["class"] () {
             return cn('box-border h-40 min-h-40 w-full min-w-0 overflow-hidden rounded-md border border-border bg-background text-foreground shadow-sm transition-[border-color,box-shadow,opacity] duration-200 ease-in-out outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-not-allowed motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-control"
+    }));
 }
 function SignaturePadSegment(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(SignaturePad.Segment, mergeProps({
-        "data-slot": "signature-pad-segment",
         get ["class"] () {
             return cn('fill-current', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-segment"
+    }));
 }
 function SignaturePadGuide(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(SignaturePad.Guide, mergeProps({
-        "data-slot": "signature-pad-guide",
         get ["class"] () {
             return cn('pointer-events-none absolute start-6 end-6 bottom-8 border-b border-dashed border-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-guide"
+    }));
 }
 function SignaturePadClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -128,9 +132,9 @@ function SignaturePadClearTrigger(props) {
         get ["aria-labelledby"] () {
             return local['aria-labelledby'];
         },
-        "data-slot": "signature-pad-clear-trigger",
         class: triggerClass
     }, others, {
+        "data-slot": "signature-pad-clear-trigger",
         get disabled () {
             return isDisabled();
         },
@@ -159,9 +163,9 @@ function SignaturePadClearTrigger(props) {
                 }
             }));
         },
-        "data-slot": "signature-pad-clear-trigger",
         class: triggerClass
     }, others, {
+        "data-slot": "signature-pad-clear-trigger",
         get disabled () {
             return isDisabled();
         }

package/dist/components/signature-pad/SignaturePad.jsx

@@ -13,7 +13,7 @@ function SignaturePadRoot(props) {
         'class'
     ]);
     const field = useFieldContext();
-    return <SignaturePad.Root asChild={local.asChild} data-slot="signature-pad-root" class={cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <SignaturePad.Root asChild={local.asChild} class={cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="signature-pad-root">
       <SignaturePadReadOnlyContext.Provider value={()=>others.readOnly ?? field?.().readOnly ?? false}>
         {local.children}
       </SignaturePadReadOnlyContext.Provider>
@@ -29,7 +29,7 @@ function SignaturePadRootProvider(props) {
         const signaturePad = others.value;
         return signaturePad[signaturePadReadOnly]?.() ?? false;
     }}>
-      <SignaturePad.RootProvider asChild={local.asChild} data-slot="signature-pad-root-provider" class={cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+      <SignaturePad.RootProvider asChild={local.asChild} class={cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="signature-pad-root-provider">
         {local.children}
       </SignaturePad.RootProvider>
     </SignaturePadReadOnlyContext.Provider>;
@@ -38,25 +38,25 @@ function SignaturePadLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Label data-slot="signature-pad-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+    return <SignaturePad.Label class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others} data-slot="signature-pad-label"/>;
 }
 function SignaturePadControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Control data-slot="signature-pad-control" class={cn('box-border h-40 min-h-40 w-full min-w-0 overflow-hidden rounded-md border border-border bg-background text-foreground shadow-sm transition-[border-color,box-shadow,opacity] duration-200 ease-in-out outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-not-allowed motion-reduce:transition-none', local.class)} {...others}/>;
+    return <SignaturePad.Control class={cn('box-border h-40 min-h-40 w-full min-w-0 overflow-hidden rounded-md border border-border bg-background text-foreground shadow-sm transition-[border-color,box-shadow,opacity] duration-200 ease-in-out outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-not-allowed motion-reduce:transition-none', local.class)} {...others} data-slot="signature-pad-control"/>;
 }
 function SignaturePadSegment(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Segment data-slot="signature-pad-segment" class={cn('fill-current', local.class)} {...others}/>;
+    return <SignaturePad.Segment class={cn('fill-current', local.class)} {...others} data-slot="signature-pad-segment"/>;
 }
 function SignaturePadGuide(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Guide data-slot="signature-pad-guide" class={cn('pointer-events-none absolute start-6 end-6 bottom-8 border-b border-dashed border-border', local.class)} {...others}/>;
+    return <SignaturePad.Guide class={cn('pointer-events-none absolute start-6 end-6 bottom-8 border-b border-dashed border-border', local.class)} {...others} data-slot="signature-pad-guide"/>;
 }
 function SignaturePadClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -71,7 +71,7 @@ function SignaturePadClearTrigger(props) {
     const readOnly = useContext(SignaturePadReadOnlyContext);
     const isDisabled = ()=>readOnly() || local.disabled ? true : void 0;
     const triggerClass = cn('absolute end-2 top-2 border-0', local.class);
-    if (local.asChild) return <SignaturePad.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="signature-pad-clear-trigger" class={triggerClass} {...others} disabled={isDisabled()}>
+    if (local.asChild) return <SignaturePad.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={triggerClass} {...others} data-slot="signature-pad-clear-trigger" disabled={isDisabled()}>
         {local.children}
       </SignaturePad.ClearTrigger>;
     return <SignaturePad.ClearTrigger asChild={(triggerProps)=>{
@@ -79,7 +79,7 @@ function SignaturePadClearTrigger(props) {
         return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn(resolvedProps.class, 'size-7 rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', local.class)}>
             {resolvedChildren() ?? <RotateCcwIcon class="size-4" aria-hidden="true"/>}
           </CloseButton.Root>;
-    }} data-slot="signature-pad-clear-trigger" class={triggerClass} {...others} disabled={isDisabled()}/>;
+    }} class={triggerClass} {...others} data-slot="signature-pad-clear-trigger" disabled={isDisabled()}/>;
 }
 function SignaturePadCanvas(props) {
     return <SignaturePadControl {...props}>

package/dist/components/slider/Slider.js

@@ -21,7 +21,6 @@ function SliderRoot(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "slider-root",
         get ["data-readonly"] () {
             return local.readOnly ? '' : void 0;
         },
@@ -32,6 +31,7 @@ function SliderRoot(props) {
             return local.readOnly;
         }
     }, others, {
+        "data-slot": "slider-root",
         get children () {
             return local.children;
         }
@@ -50,66 +50,72 @@ function SliderRootProvider(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "slider-root-provider",
         get ["class"] () {
             return cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-root-provider"
+    }));
 }
 function SliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Label, mergeProps({
-        "data-slot": "slider-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-normal text-foreground select-none group-data-[orientation=vertical]:[grid-area:label]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-label"
+    }));
 }
 function SliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.ValueText, mergeProps({
-        "data-slot": "slider-value-text",
         get ["class"] () {
             return cn('text-right text-sm leading-5 font-normal text-foreground group-data-[orientation=vertical]:justify-self-end group-data-[orientation=vertical]:[grid-area:value]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-value-text"
+    }));
 }
 function SliderControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Control, mergeProps({
-        "data-slot": "slider-control",
         get ["class"] () {
             return cn('relative flex min-h-5 w-full cursor-pointer touch-none items-center select-none group-data-readonly:cursor-default group-data-[orientation=vertical]:[grid-area:control] data-disabled:cursor-default data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-5 data-[orientation=vertical]:flex-col', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-control"
+    }));
 }
 function SliderTrack(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Track, mergeProps({
-        "data-slot": "slider-track",
         get ["class"] () {
             return cn('h-1.5 w-full flex-1 overflow-hidden rounded-full bg-muted ring-1 ring-border select-none ring-inset data-invalid:ring-destructive data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-track"
+    }));
 }
 function SliderRange(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Range, mergeProps({
-        "data-slot": "slider-range",
         get ["class"] () {
             return cn('h-full rounded-[inherit] bg-primary data-invalid:bg-destructive data-[orientation=vertical]:w-full', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-range"
+    }));
 }
 function SliderThumb(props) {
     const [local, others] = splitProps(props, [
@@ -121,11 +127,11 @@ function SliderThumb(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "slider-thumb",
         get ["class"] () {
             return cn('box-border flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-background shadow-sm outline-0 transition-[border-color,background-color,box-shadow] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring data-disabled:pointer-events-none data-dragging:border-ring data-dragging:shadow-md data-dragging:ring-1 data-dragging:ring-ring data-invalid:border-destructive data-invalid:focus-visible:ring-destructive motion-reduce:transition-none', local.class);
         }
     }, others, {
+        "data-slot": "slider-thumb",
         get children () {
             return local.children;
         }
@@ -153,33 +159,36 @@ function SliderMarkerGroup(props) {
         'class'
     ]);
     return createComponent(Slider.MarkerGroup, mergeProps({
-        "data-slot": "slider-marker-group",
         get ["class"] () {
             return cn('mt-2 flex justify-between group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:flex-col group-data-[orientation=vertical]:[grid-area:markers]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-marker-group"
+    }));
 }
 function SliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Marker, mergeProps({
-        "data-slot": "slider-marker",
         get ["class"] () {
             return cn("relative text-xs leading-4 text-muted-foreground before:absolute before:start-1/2 before:-top-2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border before:content-[''] data-[orientation=vertical]:before:-start-2 data-[orientation=vertical]:before:top-1/2 data-[orientation=vertical]:before:-translate-y-1/2 data-[state=at-value]:before:bg-primary group-data-invalid:data-[state=at-value]:before:bg-destructive data-[state=under-value]:before:bg-primary group-data-invalid:data-[state=under-value]:before:bg-destructive", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-marker"
+    }));
 }
 function SliderDraggingIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.DraggingIndicator, mergeProps({
-        "data-slot": "slider-dragging-indicator",
         get ["class"] () {
             return cn('pointer-events-none -top-8 rounded-sm bg-foreground px-2 py-1 text-xs leading-none font-medium whitespace-nowrap text-background', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-dragging-indicator"
+    }));
 }
 const Slider_Slider = Object.assign(SliderRoot, {
     Root: SliderRoot,

package/dist/components/slider/Slider.jsx

@@ -10,7 +10,7 @@ function SliderRoot(props) {
         'readOnly',
         'value'
     ]);
-    return <Slider.Root asChild={local.asChild} defaultValue={local.defaultValue} value={local.value} data-slot="slider-root" data-readonly={local.readOnly ? '' : void 0} class={cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", local.class)} readOnly={local.readOnly} {...others}>
+    return <Slider.Root asChild={local.asChild} defaultValue={local.defaultValue} value={local.value} data-readonly={local.readOnly ? '' : void 0} class={cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", local.class)} readOnly={local.readOnly} {...others} data-slot="slider-root">
       {local.children}
     </Slider.Root>;
 }
@@ -20,37 +20,37 @@ function SliderRootProvider(props) {
         'class',
         'value'
     ]);
-    return <Slider.RootProvider asChild={local.asChild} value={local.value} data-slot="slider-root-provider" class={cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", local.class)} {...others}/>;
+    return <Slider.RootProvider asChild={local.asChild} value={local.value} class={cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", local.class)} {...others} data-slot="slider-root-provider"/>;
 }
 function SliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Label data-slot="slider-label" class={cn('text-sm leading-5 font-normal text-foreground select-none group-data-[orientation=vertical]:[grid-area:label]', local.class)} {...others}/>;
+    return <Slider.Label class={cn('text-sm leading-5 font-normal text-foreground select-none group-data-[orientation=vertical]:[grid-area:label]', local.class)} {...others} data-slot="slider-label"/>;
 }
 function SliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.ValueText data-slot="slider-value-text" class={cn('text-right text-sm leading-5 font-normal text-foreground group-data-[orientation=vertical]:justify-self-end group-data-[orientation=vertical]:[grid-area:value]', local.class)} {...others}/>;
+    return <Slider.ValueText class={cn('text-right text-sm leading-5 font-normal text-foreground group-data-[orientation=vertical]:justify-self-end group-data-[orientation=vertical]:[grid-area:value]', local.class)} {...others} data-slot="slider-value-text"/>;
 }
 function SliderControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Control data-slot="slider-control" class={cn('relative flex min-h-5 w-full cursor-pointer touch-none items-center select-none group-data-readonly:cursor-default group-data-[orientation=vertical]:[grid-area:control] data-disabled:cursor-default data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-5 data-[orientation=vertical]:flex-col', local.class)} {...others}/>;
+    return <Slider.Control class={cn('relative flex min-h-5 w-full cursor-pointer touch-none items-center select-none group-data-readonly:cursor-default group-data-[orientation=vertical]:[grid-area:control] data-disabled:cursor-default data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-5 data-[orientation=vertical]:flex-col', local.class)} {...others} data-slot="slider-control"/>;
 }
 function SliderTrack(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Track data-slot="slider-track" class={cn('h-1.5 w-full flex-1 overflow-hidden rounded-full bg-muted ring-1 ring-border select-none ring-inset data-invalid:ring-destructive data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5', local.class)} {...others}/>;
+    return <Slider.Track class={cn('h-1.5 w-full flex-1 overflow-hidden rounded-full bg-muted ring-1 ring-border select-none ring-inset data-invalid:ring-destructive data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5', local.class)} {...others} data-slot="slider-track"/>;
 }
 function SliderRange(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Range data-slot="slider-range" class={cn('h-full rounded-[inherit] bg-primary data-invalid:bg-destructive data-[orientation=vertical]:w-full', local.class)} {...others}/>;
+    return <Slider.Range class={cn('h-full rounded-[inherit] bg-primary data-invalid:bg-destructive data-[orientation=vertical]:w-full', local.class)} {...others} data-slot="slider-range"/>;
 }
 function SliderThumb(props) {
     const [local, others] = splitProps(props, [
@@ -58,7 +58,7 @@ function SliderThumb(props) {
         'children',
         'class'
     ]);
-    return <Slider.Thumb asChild={local.asChild} data-slot="slider-thumb" class={cn('box-border flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-background shadow-sm outline-0 transition-[border-color,background-color,box-shadow] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring data-disabled:pointer-events-none data-dragging:border-ring data-dragging:shadow-md data-dragging:ring-1 data-dragging:ring-ring data-invalid:border-destructive data-invalid:focus-visible:ring-destructive motion-reduce:transition-none', local.class)} {...others}>
+    return <Slider.Thumb asChild={local.asChild} class={cn('box-border flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-background shadow-sm outline-0 transition-[border-color,background-color,box-shadow] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring data-disabled:pointer-events-none data-dragging:border-ring data-dragging:shadow-md data-dragging:ring-1 data-dragging:ring-ring data-invalid:border-destructive data-invalid:focus-visible:ring-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="slider-thumb">
       {local.children}
     </Slider.Thumb>;
 }
@@ -74,19 +74,19 @@ function SliderMarkerGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.MarkerGroup data-slot="slider-marker-group" class={cn('mt-2 flex justify-between group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:flex-col group-data-[orientation=vertical]:[grid-area:markers]', local.class)} {...others}/>;
+    return <Slider.MarkerGroup class={cn('mt-2 flex justify-between group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:flex-col group-data-[orientation=vertical]:[grid-area:markers]', local.class)} {...others} data-slot="slider-marker-group"/>;
 }
 function SliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Marker data-slot="slider-marker" class={cn("relative text-xs leading-4 text-muted-foreground before:absolute before:start-1/2 before:-top-2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border before:content-[''] data-[orientation=vertical]:before:-start-2 data-[orientation=vertical]:before:top-1/2 data-[orientation=vertical]:before:-translate-y-1/2 data-[state=at-value]:before:bg-primary group-data-invalid:data-[state=at-value]:before:bg-destructive data-[state=under-value]:before:bg-primary group-data-invalid:data-[state=under-value]:before:bg-destructive", local.class)} {...others}/>;
+    return <Slider.Marker class={cn("relative text-xs leading-4 text-muted-foreground before:absolute before:start-1/2 before:-top-2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border before:content-[''] data-[orientation=vertical]:before:-start-2 data-[orientation=vertical]:before:top-1/2 data-[orientation=vertical]:before:-translate-y-1/2 data-[state=at-value]:before:bg-primary group-data-invalid:data-[state=at-value]:before:bg-destructive data-[state=under-value]:before:bg-primary group-data-invalid:data-[state=under-value]:before:bg-destructive", local.class)} {...others} data-slot="slider-marker"/>;
 }
 function SliderDraggingIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.DraggingIndicator data-slot="slider-dragging-indicator" class={cn('pointer-events-none -top-8 rounded-sm bg-foreground px-2 py-1 text-xs leading-none font-medium whitespace-nowrap text-background', local.class)} {...others}/>;
+    return <Slider.DraggingIndicator class={cn('pointer-events-none -top-8 rounded-sm bg-foreground px-2 py-1 text-xs leading-none font-medium whitespace-nowrap text-background', local.class)} {...others} data-slot="slider-dragging-indicator"/>;
 }
 const Slider_Slider = Object.assign(SliderRoot, {
     Root: SliderRoot,

package/dist/components/split-button/SplitButton.d.ts

@@ -1,3 +1,4 @@
+import { Menu as MenuPrimitive } from '@ark-ui/solid/menu';
 import type { ComponentProps, JSX } from 'solid-js';
 import { Button } from '../button/index.js';
 import { Menu } from '../menu/index.js';
@@ -17,14 +18,14 @@ type SplitButtonActionProps = Omit<ButtonProps, 'size' | 'variant'> & {
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 };
-type SplitButtonTriggerProps = Omit<ComponentProps<typeof Menu.Trigger>, 'asChild' | 'children' | 'class'> & {
+type SplitButtonTriggerProps = Omit<ComponentProps<typeof MenuPrimitive.Trigger>, 'asChild' | 'children' | 'class'> & {
     children?: JSX.Element;
     class?: string;
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 };
-type SplitButtonContentProps = ComponentProps<typeof Menu.Content>;
-type SplitButtonPositionerProps = ComponentProps<typeof Menu.Positioner>;
+type SplitButtonContentProps = ComponentProps<typeof MenuPrimitive.Content>;
+type SplitButtonPositionerProps = ComponentProps<typeof MenuPrimitive.Positioner>;
 declare function SplitButtonRoot(props: SplitButtonRootProps): JSX.Element;
 declare function SplitButtonAction(props: SplitButtonActionProps): JSX.Element;
 declare function SplitButtonTrigger(props: SplitButtonTriggerProps): JSX.Element;

package/dist/components/split-button/SplitButton.js

@@ -1,10 +1,13 @@
 import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, template, use } from "solid-js/web";
+import { useFocusVisible } from "@ark-ui/solid";
+import { Menu } from "@ark-ui/solid/menu";
 import { cva } from "class-variance-authority";
 import { children, createContext, splitProps, useContext } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal } from "../../internal/overlayPortal.js";
 import { Button } from "../button/index.js";
-import { Menu } from "../menu/index.js";
+import { Menu as index_js_Menu } from "../menu/index.js";
 var _tmpl$ = /*#__PURE__*/ template("<div role=group data-scope=split-button data-part=root data-slot=split-button-root>");
 const splitButtonTriggerVariants = cva("relative min-w-0 -ms-px rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
     variants: {
@@ -53,7 +56,7 @@ function SplitButtonRoot(props) {
             variant: ()=>local.variant ?? 'default'
         },
         get children () {
-            return createComponent(Menu.Root, mergeProps({
+            return createComponent(index_js_Menu.Root, mergeProps({
                 get onSelect () {
                     return local.onSelect;
                 },
@@ -116,6 +119,7 @@ function SplitButtonTrigger(props) {
         'aria-label'
     ]);
     const context = useSplitButtonContext('SplitButton.Trigger');
+    const focusVisible = useFocusVisible();
     const resolvedChildren = children(()=>local.children);
     const resolvedSize = ()=>local.size ?? context.size();
     const resolvedVariant = ()=>local.variant ?? context.variant();
@@ -150,6 +154,9 @@ function SplitButtonTrigger(props) {
         },
         get ["class"] () {
             return triggerClass();
+        },
+        get ["data-focus-visible"] () {
+            return focusVisible() ? '' : void 0;
         }
     }));
 }
@@ -157,12 +164,16 @@ function SplitButtonPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return createComponent(Menu.Positioner, mergeProps(others, {
-        "data-slot": "split-button-positioner",
-        get ["class"] () {
-            return local.class;
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Menu.Positioner, mergeProps(others, {
+                "data-slot": "split-button-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', local.class);
+                }
+            }));
         }
-    }));
+    });
 }
 function SplitButtonContent(props) {
     const [local, others] = splitProps(props, [
@@ -176,10 +187,10 @@ function SplitButtonContent(props) {
         },
         "data-slot": "split-button-content",
         get ["class"] () {
-            return local.class;
+            return cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
         },
         get children () {
-            return memo(()=>!!local.asChild)() ? local.children : createComponent(Menu.Viewport, {
+            return memo(()=>!!local.asChild)() ? local.children : createComponent(index_js_Menu.Viewport, {
                 get children () {
                     return local.children;
                 }

package/dist/components/split-button/SplitButton.jsx

@@ -1,9 +1,12 @@
+import { useFocusVisible } from "@ark-ui/solid";
+import { Menu } from "@ark-ui/solid/menu";
 import { cva } from "class-variance-authority";
 import { children, createContext, splitProps, useContext } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
 import { ChevronDownIcon } from "../../internal/icons/ui/index.jsx";
+import { OverlayPortal } from "../../internal/overlayPortal.jsx";
 import { Button } from "../button/index.jsx";
-import { Menu } from "../menu/index.jsx";
+import { Menu as index_jsx_Menu } from "../menu/index.jsx";
 const splitButtonTriggerVariants = cva("relative min-w-0 -ms-px rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
     variants: {
         size: {
@@ -49,7 +52,7 @@ function SplitButtonRoot(props) {
         size: ()=>local.size ?? 'md',
         variant: ()=>local.variant ?? 'default'
     }}>
-      <Menu.Root onSelect={local.onSelect} positioning={{
+      <index_jsx_Menu.Root onSelect={local.onSelect} positioning={{
         placement: 'bottom-end',
         gutter: 4,
         ...local.positioning
@@ -57,7 +60,7 @@ function SplitButtonRoot(props) {
         <div role="group" aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-scope="split-button" data-part="root" data-slot="split-button-root" class={cn('inline-flex items-stretch', local.class)} ref={local.ref}>
           {local.children}
         </div>
-      </Menu.Root>
+      </index_jsx_Menu.Root>
     </SplitButtonContext.Provider>;
 }
 function SplitButtonAction(props) {
@@ -78,6 +81,7 @@ function SplitButtonTrigger(props) {
         'aria-label'
     ]);
     const context = useSplitButtonContext('SplitButton.Trigger');
+    const focusVisible = useFocusVisible();
     const resolvedChildren = children(()=>local.children);
     const resolvedSize = ()=>local.size ?? context.size();
     const resolvedVariant = ()=>local.variant ?? context.variant();
@@ -89,13 +93,15 @@ function SplitButtonTrigger(props) {
         }), local.class);
     return <Menu.Trigger {...others} asChild={(triggerProps)=><Button {...triggerProps()} data-slot="split-button-trigger" size={resolvedSize()} variant={resolvedVariant()} class={triggerClass()} aria-label={ariaLabel()}>
           {resolvedChildren() ?? <ChevronDownIcon/>}
-        </Button>} data-slot="split-button-trigger" aria-label={ariaLabel()} class={triggerClass()}/>;
+        </Button>} data-slot="split-button-trigger" aria-label={ariaLabel()} class={triggerClass()} data-focus-visible={focusVisible() ? '' : void 0}/>;
 }
 function SplitButtonPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.Positioner {...others} data-slot="split-button-positioner" class={local.class}/>;
+    return <OverlayPortal>
+      <Menu.Positioner {...others} data-slot="split-button-positioner" class={cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', local.class)}/>
+    </OverlayPortal>;
 }
 function SplitButtonContent(props) {
     const [local, others] = splitProps(props, [
@@ -103,8 +109,8 @@ function SplitButtonContent(props) {
         'children',
         'class'
     ]);
-    return <Menu.Content {...others} asChild={local.asChild} data-slot="split-button-content" class={local.class}>
-      {local.asChild ? local.children : <Menu.Viewport>{local.children}</Menu.Viewport>}
+    return <Menu.Content {...others} asChild={local.asChild} data-slot="split-button-content" class={cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)}>
+      {local.asChild ? local.children : <index_jsx_Menu.Viewport>{local.children}</index_jsx_Menu.Viewport>}
     </Menu.Content>;
 }
 const SplitButton = Object.assign(SplitButtonRoot, {