@moduix/solid-tailwind 1.1.1 → 2.0.0

package/dist/components/slider/Slider.js

@@ -21,9 +21,6 @@ function SliderRoot(props) {
         get value () {
             return local.value;
         },
-        get ["data-readonly"] () {
-            return local.readOnly ? '' : void 0;
-        },
         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);
         },
@@ -31,6 +28,9 @@ function SliderRoot(props) {
             return local.readOnly;
         }
     }, others, {
+        get ["data-readonly"] () {
+            return local.readOnly ? '' : void 0;
+        },
         "data-slot": "slider-root",
         get children () {
             return local.children;
@@ -160,7 +160,7 @@ function SliderMarkerGroup(props) {
     ]);
     return createComponent(Slider.MarkerGroup, mergeProps({
         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);
+            return cn('mt-2 group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:[grid-area:markers]', local.class);
         }
     }, others, {
         "data-slot": "slider-marker-group"
@@ -172,7 +172,7 @@ function SliderMarker(props) {
     ]);
     return createComponent(Slider.Marker, mergeProps({
         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);
+            return cn("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"

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-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">
+    return <Slider.Root asChild={local.asChild} defaultValue={local.defaultValue} 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)} readOnly={local.readOnly} {...others} data-readonly={local.readOnly ? '' : void 0} data-slot="slider-root">
       {local.children}
     </Slider.Root>;
 }
@@ -74,13 +74,13 @@ function SliderMarkerGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    return <Slider.MarkerGroup class={cn('mt-2 group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full 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 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"/>;
+    return <Slider.Marker class={cn("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, [

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

@@ -1,5 +1,4 @@
 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";
@@ -8,13 +7,14 @@ import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
 import { OverlayPortal } from "../../internal/overlayPortal.js";
 import { Button } from "../button/index.js";
 import { Menu as index_js_Menu } from "../menu/index.js";
+import { menuContentVariants, menuPositionerVariants } from "../menu/Menu.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-['']", {
+const splitButtonTriggerVariants = cva("relative min-w-0 -ms-[calc(var(--moduix-button-border-width,var(--moduix-border-width-sm))*-1)] 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: {
             xs: 'px-2',
             sm: 'px-2.5',
-            md: 'px-4',
+            md: 'px-3',
             lg: 'px-3.5',
             xl: 'px-4'
         },
@@ -112,14 +112,14 @@ function SplitButtonAction(props) {
 }
 function SplitButtonTrigger(props) {
     const [local, others] = splitProps(props, [
+        'aria-label',
         'children',
         'class',
+        'ref',
         'size',
-        'variant',
-        'aria-label'
+        'variant'
     ]);
     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();
@@ -131,6 +131,10 @@ function SplitButtonTrigger(props) {
         }), local.class);
     return createComponent(Menu.Trigger, mergeProps(others, {
         asChild: (triggerProps)=>createComponent(Button, mergeProps(triggerProps, {
+                ref (r$) {
+                    var _ref$2 = local.ref;
+                    "function" == typeof _ref$2 ? _ref$2(r$) : local.ref = r$;
+                },
                 "data-slot": "split-button-trigger",
                 get size () {
                     return resolvedSize();
@@ -154,9 +158,6 @@ function SplitButtonTrigger(props) {
         },
         get ["class"] () {
             return triggerClass();
-        },
-        get ["data-focus-visible"] () {
-            return focusVisible() ? '' : void 0;
         }
     }));
 }
@@ -169,7 +170,7 @@ function SplitButtonPositioner(props) {
             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);
+                    return cn(menuPositionerVariants(), local.class);
                 }
             }));
         }
@@ -187,7 +188,7 @@ function SplitButtonContent(props) {
         },
         "data-slot": "split-button-content",
         get ["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);
+            return cn(menuContentVariants(), local.class);
         },
         get children () {
             return memo(()=>!!local.asChild)() ? local.children : createComponent(index_js_Menu.Viewport, {

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

@@ -1,4 +1,3 @@
-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";
@@ -7,12 +6,13 @@ import { ChevronDownIcon } from "../../internal/icons/ui/index.jsx";
 import { OverlayPortal } from "../../internal/overlayPortal.jsx";
 import { Button } from "../button/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-['']", {
+import { menuContentVariants, menuPositionerVariants } from "../menu/Menu.jsx";
+const splitButtonTriggerVariants = cva("relative min-w-0 -ms-[calc(var(--moduix-button-border-width,var(--moduix-border-width-sm))*-1)] 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: {
             xs: 'px-2',
             sm: 'px-2.5',
-            md: 'px-4',
+            md: 'px-3',
             lg: 'px-3.5',
             xl: 'px-4'
         },
@@ -74,14 +74,14 @@ function SplitButtonAction(props) {
 }
 function SplitButtonTrigger(props) {
     const [local, others] = splitProps(props, [
+        'aria-label',
         'children',
         'class',
+        'ref',
         'size',
-        'variant',
-        'aria-label'
+        'variant'
     ]);
     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();
@@ -91,16 +91,16 @@ function SplitButtonTrigger(props) {
             size: resolvedSize(),
             variant: resolvedVariant()
         }), local.class);
-    return <Menu.Trigger {...others} asChild={(triggerProps)=><Button {...triggerProps()} data-slot="split-button-trigger" size={resolvedSize()} variant={resolvedVariant()} class={triggerClass()} aria-label={ariaLabel()}>
+    return <Menu.Trigger {...others} asChild={(triggerProps)=><Button {...triggerProps()} ref={local.ref} 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()} data-focus-visible={focusVisible() ? '' : void 0}/>;
+        </Button>} data-slot="split-button-trigger" aria-label={ariaLabel()} class={triggerClass()}/>;
 }
 function SplitButtonPositioner(props) {
     const [local, others] = splitProps(props, [
         '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)}/>
+      <Menu.Positioner {...others} data-slot="split-button-positioner" class={cn(menuPositionerVariants(), local.class)}/>
     </OverlayPortal>;
 }
 function SplitButtonContent(props) {
@@ -109,7 +109,7 @@ function SplitButtonContent(props) {
         'children',
         'class'
     ]);
-    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)}>
+    return <Menu.Content {...others} asChild={local.asChild} data-slot="split-button-content" class={cn(menuContentVariants(), local.class)}>
       {local.asChild ? local.children : <index_jsx_Menu.Viewport>{local.children}</index_jsx_Menu.Viewport>}
     </Menu.Content>;
 }

package/dist/components/splitter/Splitter.js

@@ -68,7 +68,7 @@ function SplitterResizeTriggerIndicator(props) {
     ]);
     return createComponent(Splitter.ResizeTriggerIndicator, mergeProps({
         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);
+            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 motion-reduce:transition-none', local.class);
         }
     }, others, {
         "data-slot": "splitter-resize-trigger-indicator"
@@ -85,7 +85,7 @@ function SplitterResizeTrigger(props) {
             return local.asChild;
         },
         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);
+            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 motion-reduce:transition-none motion-reduce:before:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", local.class);
         }
     }, others, {
         "data-slot": "splitter-resize-trigger",

package/dist/components/splitter/Splitter.jsx

@@ -35,7 +35,7 @@ function SplitterResizeTriggerIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    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 motion-reduce:transition-none', 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} 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">
+    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 motion-reduce:transition-none motion-reduce:before:transition-none [@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

@@ -123,7 +123,7 @@ function StepsPrevTrigger(props) {
     ]);
     return createComponent(Steps.PrevTrigger, mergeProps({
         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);
+            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 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "steps-prev-trigger"
@@ -135,7 +135,7 @@ function StepsNextTrigger(props) {
     ]);
     return createComponent(Steps.NextTrigger, mergeProps({
         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);
+            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 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-foreground', local.class);
         }
     }, others, {
         "data-slot": "steps-next-trigger"

package/dist/components/steps/Steps.jsx

@@ -65,13 +65,13 @@ function StepsPrevTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    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 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 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"/>;
+    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 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-foreground', local.class)} {...others} data-slot="steps-next-trigger"/>;
 }
 function StepsProgress(props) {
     const [local, others] = splitProps(props, [

package/dist/components/swap/Swap.js

@@ -8,13 +8,13 @@ function SwapRoot(props) {
         'class'
     ]);
     return createComponent(Swap.Root, mergeProps({
-        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);
+            return cn("group/swap place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class);
         }
     }, others, {
+        get ["data-animation"] () {
+            return local.animation ?? 'scale';
+        },
         "data-slot": "swap-root"
     }));
 }
@@ -24,13 +24,13 @@ function SwapRootProvider(props) {
         'class'
     ]);
     return createComponent(Swap.RootProvider, mergeProps({
-        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);
+            return cn("group/swap place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class);
         }
     }, others, {
+        get ["data-animation"] () {
+            return local.animation ?? 'scale';
+        },
         "data-slot": "swap-root-provider"
     }));
 }
@@ -40,7 +40,7 @@ function SwapIndicator(props) {
     ]);
     return createComponent(Swap.Indicator, mergeProps({
         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);
+            return cn('items-center justify-center text-inherit 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"

package/dist/components/swap/Swap.jsx

@@ -6,20 +6,20 @@ function SwapRoot(props) {
         'animation',
         'class'
     ]);
-    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"/>;
+    return <Swap.Root class={cn("group/swap place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others} data-animation={local.animation ?? 'scale'} data-slot="swap-root"/>;
 }
 function SwapRootProvider(props) {
     const [local, others] = splitProps(props, [
         'animation',
         'class'
     ]);
-    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"/>;
+    return <Swap.RootProvider class={cn("group/swap place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others} data-animation={local.animation ?? 'scale'} data-slot="swap-root-provider"/>;
 }
 function SwapIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    return <Swap.Indicator class={cn('items-center justify-center text-inherit 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,13 +13,13 @@ function SwitchRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             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, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
         "data-slot": "switch-root",
         get children () {
             return local.children;
@@ -37,13 +37,13 @@ function SwitchRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             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, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
         "data-slot": "switch-root-provider",
         get children () {
             return local.children;
@@ -58,7 +58,7 @@ function SwitchControl(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(Switch.Control, mergeProps({
         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);
+            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 data-[state=checked]:data-invalid:border-destructive motion-reduce:transition-none", local.class);
         }
     }, others, {
         "data-slot": "switch-control",

package/dist/components/switch/Switch.jsx

@@ -8,7 +8,7 @@ function SwitchRoot(props) {
         'class',
         'size'
     ]);
-    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">
+    return <Switch.Root asChild={local.asChild} 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-size={local.size ?? 'md'} data-slot="switch-root">
       {local.children}
     </Switch.Root>;
 }
@@ -19,7 +19,7 @@ function SwitchRootProvider(props) {
         'class',
         'size'
     ]);
-    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">
+    return <Switch.RootProvider asChild={local.asChild} 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-size={local.size ?? 'md'} 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 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">
+    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 data-[state=checked]:data-invalid:border-destructive motion-reduce:transition-none", local.class)} {...others} data-slot="switch-control">
       {resolvedChildren() ?? <SwitchThumb/>}
     </Switch.Control>;
 }

package/dist/components/table/Table.js

@@ -251,7 +251,7 @@ function TableRow(props) {
         "data-part": "row",
         "data-slot": "table-row",
         get ["class"] () {
-            return cn('transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-header]/table-header:border-b group-data-[slot=table-header]/table-header:border-border group-data-[slot=table-body]/table-body:last:border-b-0 group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:focus-within:bg-muted group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:hover:bg-muted group-data-[striped]/table:[&:nth-child(even):not([data-empty])]:bg-muted/35', local.class);
+            return cn('transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-header]/table-header:border-b group-data-[slot=table-header]/table-header:border-border group-data-[slot=table-body]/table-body:last:border-b-0 motion-reduce:transition-none group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:focus-within:bg-muted group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:hover:bg-muted group-data-[striped]/table:group-data-[slot=table-body]/table-body:[&:nth-child(even):not([data-empty])]:bg-muted/35', local.class);
         }
     }));
 }
@@ -277,7 +277,7 @@ function TableColumnHeader(props) {
         },
         "data-slot": "table-column-header",
         get ["class"] () {
-            return cn('relative z-0 px-4 py-3 align-middle font-medium whitespace-nowrap text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 group-data-[sticky-header]/table:data-[sticky]:z-4 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class);
+            return cn('relative z-0 px-4 py-3 text-left align-middle font-medium whitespace-nowrap text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 group-data-[sticky-header]/table:data-[sticky]:z-4 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class);
         }
     }));
 }
@@ -323,7 +323,7 @@ function TableEmpty(props) {
         "data-part": "row",
         "data-empty": true,
         "data-slot": "table-row",
-        class: "transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-body]/table-body:last:border-b-0",
+        class: "transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-body]/table-body:last:border-b-0 motion-reduce:transition-none",
         get children () {
             return createComponent(ark.td, mergeProps({
                 get asChild () {

package/dist/components/table/Table.jsx

@@ -129,7 +129,7 @@ function TableRow(props) {
         'data-scope',
         'data-slot'
     ]);
-    return <ark.tr asChild={local.asChild} {...others} data-scope="table" data-part="row" data-slot="table-row" class={cn('transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-header]/table-header:border-b group-data-[slot=table-header]/table-header:border-border group-data-[slot=table-body]/table-body:last:border-b-0 group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:focus-within:bg-muted group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:hover:bg-muted group-data-[striped]/table:[&:nth-child(even):not([data-empty])]:bg-muted/35', local.class)}/>;
+    return <ark.tr asChild={local.asChild} {...others} data-scope="table" data-part="row" data-slot="table-row" class={cn('transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-header]/table-header:border-b group-data-[slot=table-header]/table-header:border-border group-data-[slot=table-body]/table-body:last:border-b-0 motion-reduce:transition-none group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:focus-within:bg-muted group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:hover:bg-muted group-data-[striped]/table:group-data-[slot=table-body]/table-body:[&:nth-child(even):not([data-empty])]:bg-muted/35', local.class)}/>;
 }
 function TableColumnHeader(props) {
     const [local, others] = splitProps(props, [
@@ -141,7 +141,7 @@ function TableColumnHeader(props) {
         'data-slot',
         'numeric'
     ]);
-    return <ark.th asChild={local.asChild} {...others} data-scope="table" data-part="column-header" data-numeric={local.numeric || void 0} data-slot="table-column-header" class={cn('relative z-0 px-4 py-3 align-middle font-medium whitespace-nowrap text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 group-data-[sticky-header]/table:data-[sticky]:z-4 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class)}/>;
+    return <ark.th asChild={local.asChild} {...others} data-scope="table" data-part="column-header" data-numeric={local.numeric || void 0} data-slot="table-column-header" class={cn('relative z-0 px-4 py-3 text-left align-middle font-medium whitespace-nowrap text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 group-data-[sticky-header]/table:data-[sticky]:z-4 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class)}/>;
 }
 function TableCell(props) {
     const [local, others] = splitProps(props, [
@@ -166,7 +166,7 @@ function TableEmpty(props) {
         'data-slot'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ark.tr data-scope="table" data-part="row" data-empty data-slot="table-row" class="transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-body]/table-body:last:border-b-0">
+    return <ark.tr data-scope="table" data-part="row" data-empty data-slot="table-row" class="transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-body]/table-body:last:border-b-0 motion-reduce:transition-none">
       <ark.td asChild={local.asChild} {...others} data-scope="table" data-part="empty" data-slot="table-empty" colSpan={local.colSpan} class={cn('relative z-0 px-4 py-3 align-middle group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', 'py-6 text-center text-muted-foreground group-data-[size=lg]/table:py-8 group-data-[size=sm]/table:py-4', local.class)}>
         {resolvedChildren() ?? 'No results.'}
       </ark.td>

package/dist/components/tabs/Tabs.js

@@ -9,9 +9,6 @@ function TabsRoot(props) {
         'variant'
     ]);
     return createComponent(Tabs.Root, mergeProps({
-        get ["data-variant"] () {
-            return memo(()=>'vertical' === local.orientation)() ? 'default' : local.variant ?? 'default';
-        },
         get ["class"] () {
             return cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
         },
@@ -19,6 +16,9 @@ function TabsRoot(props) {
             return local.orientation;
         }
     }, others, {
+        get ["data-variant"] () {
+            return memo(()=>'vertical' === local.orientation)() ? 'default' : local.variant ?? 'default';
+        },
         "data-slot": "tabs-root"
     }));
 }
@@ -30,9 +30,6 @@ function TabsRootProvider(props) {
     ]);
     const orientation = ()=>local.value().getRootProps()['data-orientation'];
     return createComponent(Tabs.RootProvider, mergeProps({
-        get ["data-variant"] () {
-            return memo(()=>'vertical' === orientation())() ? 'default' : local.variant ?? 'default';
-        },
         get ["class"] () {
             return cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
         },
@@ -40,6 +37,9 @@ function TabsRootProvider(props) {
             return local.value;
         }
     }, others, {
+        get ["data-variant"] () {
+            return memo(()=>'vertical' === orientation())() ? 'default' : local.variant ?? 'default';
+        },
         "data-slot": "tabs-root-provider"
     }));
 }
@@ -73,7 +73,7 @@ function TabsIndicator(props) {
     ]);
     return createComponent(Tabs.Indicator, mergeProps({
         get ["class"] () {
-            return cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class);
+            return cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] [--transition-duration:var(--moduix-duration-normal)] [--transition-timing-function:var(--moduix-ease-in-out)] group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class);
         }
     }, others, {
         "data-slot": "tabs-indicator"

package/dist/components/tabs/Tabs.jsx

@@ -7,7 +7,7 @@ function TabsRoot(props) {
         'orientation',
         'variant'
     ]);
-    return <Tabs.Root data-variant={'vertical' === local.orientation ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} orientation={local.orientation} {...others} data-slot="tabs-root"/>;
+    return <Tabs.Root class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} orientation={local.orientation} {...others} data-variant={'vertical' === local.orientation ? 'default' : local.variant ?? 'default'} data-slot="tabs-root"/>;
 }
 function TabsRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -16,7 +16,7 @@ function TabsRootProvider(props) {
         'variant'
     ]);
     const orientation = ()=>local.value().getRootProps()['data-orientation'];
-    return <Tabs.RootProvider data-variant={'vertical' === orientation() ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} value={local.value} {...others} data-slot="tabs-root-provider"/>;
+    return <Tabs.RootProvider class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} value={local.value} {...others} data-variant={'vertical' === orientation() ? 'default' : local.variant ?? 'default'} data-slot="tabs-root-provider"/>;
 }
 function TabsList(props) {
     const [local, others] = splitProps(props, [
@@ -34,7 +34,7 @@ function TabsIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tabs.Indicator class={cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class)} {...others} data-slot="tabs-indicator"/>;
+    return <Tabs.Indicator class={cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] [--transition-duration:var(--moduix-duration-normal)] [--transition-timing-function:var(--moduix-ease-in-out)] group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class)} {...others} data-slot="tabs-indicator"/>;
 }
 function TabsContent(props) {
     const [local, others] = splitProps(props, [