@moduix/react 2.2.4 → 2.3.0

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

@@ -1,30 +1,42 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
 import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/react/signature-pad";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
+import { Children, cloneElement, createContext, forwardRef, useContext } from "react";
 import { RotateCcwIcon } from "../../internal/icons/ui/index.js";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { CloseButton } from "../close-button/index.js";
 import SignaturePad_module from "./SignaturePad.module.js";
+const SignaturePadReadOnlyContext = /*#__PURE__*/ createContext(false);
+const signaturePadReadOnly = Symbol();
 const SignaturePad_SignaturePadRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, getFormValue, ...props }, ref) {
-    return /*#__PURE__*/ jsx(SignaturePad.Root, {
-        ref: ref,
-        "data-slot": "signature-pad-root",
-        className: clsx(SignaturePad_module.root, normalizeClassName(className)),
-        asChild: asChild,
-        ...props,
-        children: withHiddenInput(children, asChild, getFormValue)
+    const field = useFieldContext();
+    const readOnly = props.readOnly ?? field?.readOnly ?? false;
+    return /*#__PURE__*/ jsx(SignaturePadReadOnlyContext.Provider, {
+        value: readOnly,
+        children: /*#__PURE__*/ jsx(SignaturePad.Root, {
+            ref: ref,
+            "data-slot": "signature-pad-root",
+            className: clsx(SignaturePad_module.root, normalizeClassName(className)),
+            asChild: asChild,
+            ...props,
+            children: withHiddenInput(children, asChild, getFormValue)
+        })
     });
 });
 const SignaturePad_SignaturePadRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, getFormValue, ...props }, ref) {
-    return /*#__PURE__*/ jsx(SignaturePad.RootProvider, {
-        ref: ref,
-        "data-slot": "signature-pad-root-provider",
-        className: clsx(SignaturePad_module.root, normalizeClassName(className)),
-        asChild: asChild,
-        ...props,
-        children: withHiddenInput(children, asChild, getFormValue)
+    const readOnly = props.value[signaturePadReadOnly] ?? false;
+    return /*#__PURE__*/ jsx(SignaturePadReadOnlyContext.Provider, {
+        value: readOnly,
+        children: /*#__PURE__*/ jsx(SignaturePad.RootProvider, {
+            ref: ref,
+            "data-slot": "signature-pad-root-provider",
+            className: clsx(SignaturePad_module.root, normalizeClassName(className)),
+            asChild: asChild,
+            ...props,
+            children: withHiddenInput(children, asChild, getFormValue)
+        })
     });
 });
 const SignaturePad_SignaturePadLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -60,6 +72,7 @@ const SignaturePad_SignaturePadGuide = /*#__PURE__*/ forwardRef(function({ class
     });
 });
 const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    const readOnly = useContext(SignaturePadReadOnlyContext);
     const triggerClassName = clsx(SignaturePad_module.clearTrigger, normalizeClassName(className));
     if (asChild) return /*#__PURE__*/ jsx(SignaturePad.ClearTrigger, {
         ref: ref,
@@ -69,6 +82,7 @@ const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function(
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         ...props,
+        disabled: readOnly || props.disabled,
         children: children
     });
     return /*#__PURE__*/ jsx(SignaturePad.ClearTrigger, {
@@ -77,6 +91,7 @@ const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function(
         "data-slot": "signature-pad-clear-trigger",
         className: triggerClassName,
         ...props,
+        disabled: readOnly || props.disabled,
         children: /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledBy,
@@ -106,9 +121,11 @@ function SignaturePadFormInput({ getFormValue }) {
         value: getFormValue?.(signaturePad.paths) ?? signaturePad.paths.join(' ')
     });
 }
-function SignaturePadCanvas({ className }) {
+const SignaturePad_SignaturePadCanvas = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsxs(SignaturePad_SignaturePadControl, {
+        ref: ref,
         className: className,
+        ...props,
         children: [
             /*#__PURE__*/ jsx(SignaturePad_SignaturePadSegment, {}),
             /*#__PURE__*/ jsx(SignaturePad_SignaturePadClearTrigger, {
@@ -119,6 +136,15 @@ function SignaturePadCanvas({ className }) {
             /*#__PURE__*/ jsx(SignaturePad_SignaturePadGuide, {})
         ]
     });
+});
+function SignaturePad_useSignaturePad(props) {
+    const field = useFieldContext();
+    const signaturePad = useSignaturePad(props);
+    const api = {
+        ...signaturePad,
+        [signaturePadReadOnly]: props?.readOnly ?? field?.readOnly ?? false
+    };
+    return api;
 }
 const SignaturePad_SignaturePad = Object.assign(SignaturePad_SignaturePadRoot, {
     Root: SignaturePad_SignaturePadRoot,
@@ -126,9 +152,9 @@ const SignaturePad_SignaturePad = Object.assign(SignaturePad_SignaturePadRoot, {
     Context: SignaturePad.Context,
     Label: SignaturePad_SignaturePadLabel,
     Control: SignaturePad_SignaturePadControl,
-    Canvas: SignaturePadCanvas,
+    Canvas: SignaturePad_SignaturePadCanvas,
     Segment: SignaturePad_SignaturePadSegment,
     Guide: SignaturePad_SignaturePadGuide,
     ClearTrigger: SignaturePad_SignaturePadClearTrigger
 });
-export { SignaturePad_SignaturePad as SignaturePad, useSignaturePad, useSignaturePadContext };
+export { SignaturePad_SignaturePad as SignaturePad, SignaturePad_useSignaturePad as useSignaturePad, useSignaturePadContext };

package/dist/components/simple-grid/SimpleGrid.js

@@ -5,6 +5,7 @@ import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 const SimpleGrid_SimpleGridRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, style, columns, minChildWidth, gap, rowGap, columnGap, ...props }, ref) {
     if (null != columns && (!Number.isFinite(columns) || !Number.isInteger(columns) || columns <= 0)) throw new Error('SimpleGrid `columns` must be a finite positive integer.');
+    if ('number' == typeof minChildWidth && (!Number.isFinite(minChildWidth) || minChildWidth < 0)) throw new Error('SimpleGrid `minChildWidth` must be a finite non-negative number.');
     let gridTemplateColumns = 'minmax(0, 1fr)';
     if (null != columns) gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
     if (null != minChildWidth) {

package/dist/components/slider/Slider_module.css

@@ -102,7 +102,7 @@
 
   .track-sx0K_D[data-invalid] {
     box-shadow: inset 0 0 0 var(--moduix-slider-track-border-width, var(--moduix-border-width-sm))
-        var(--moduix-color-destructive);
+        var(--moduix-slider-track-border-color-invalid, var(--moduix-color-destructive));
   }
 
   .range-DYKNW4 {
@@ -116,7 +116,7 @@
   }
 
   .range-DYKNW4[data-invalid] {
-    background-color: var(--moduix-color-destructive);
+    background-color: var(--moduix-slider-range-bg-invalid, var(--moduix-color-destructive));
   }
 
   .thumb-dktwnB {
@@ -157,12 +157,12 @@
   }
 
   .thumb-dktwnB[data-invalid] {
-    border-color: var(--moduix-color-destructive);
+    border-color: var(--moduix-slider-thumb-border-color-invalid, var(--moduix-color-destructive));
   }
 
   .thumb-dktwnB[data-invalid]:focus-visible {
     box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
-          var(--moduix-color-destructive);
+          var(--moduix-slider-thumb-focus-ring-color-invalid, var(--moduix-slider-thumb-border-color-invalid, var(--moduix-color-destructive)));
   }
 
   .draggingIndicator-wUdzng {
@@ -179,8 +179,8 @@
   }
 
   .markerGroup-LGDl6p {
-    margin-top: var(--moduix-slider-marker-group-margin-top, var(--moduix-spacing-2));
     justify-content: space-between;
+    margin-block-start: var(--moduix-slider-marker-group-margin-top, var(--moduix-spacing-2));
     display: flex;
   }
 
@@ -213,6 +213,10 @@
     background-color: var(--moduix-slider-marker-dot-bg-active, var(--moduix-slider-range-bg, var(--moduix-color-primary)));
   }
 
+  .root-dI3Ye4[data-invalid] .marker-RkqZdP:is([data-state="under-value"], [data-state="at-value"]):before {
+    background-color: var(--moduix-slider-marker-dot-bg-active-invalid, var(--moduix-slider-range-bg-invalid, var(--moduix-color-destructive)));
+  }
+
   .marker-RkqZdP[data-orientation="vertical"]:before {
     inset-block-start: 50%;
     inset-inline-start: calc(-1 * var(--moduix-spacing-2));

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

@@ -13,12 +13,16 @@ type SplitButtonTriggerProps = Omit<ComponentProps<typeof Menu.Trigger>, 'asChil
     variant?: SplitButtonVariant;
 };
 declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<import("@ark-ui/react/menu").MenuRootProps & import("../../internal/overlayPortal").OverlayPortalProps, "children"> & {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     children?: ReactNode;
     className?: string;
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<import("@ark-ui/react/menu").MenuRootProps & import("../../internal/overlayPortal").OverlayPortalProps, "children"> & {
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
         children?: ReactNode;
         className?: string;
         size?: SplitButtonSize;

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

@@ -13,7 +13,7 @@ function useSplitButtonContext(componentName) {
     if (!context) throw new Error(`${componentName} must be used within SplitButton.Root.`);
     return context;
 }
-const SplitButton_SplitButtonRoot = /*#__PURE__*/ forwardRef(function({ children, className, positioning, size = 'md', variant = 'default', ...props }, ref) {
+const SplitButton_SplitButtonRoot = /*#__PURE__*/ forwardRef(function({ children, className, positioning, size = 'md', variant = 'default', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }, ref) {
     return /*#__PURE__*/ jsx(SplitButtonContext.Provider, {
         value: {
             size,
@@ -28,6 +28,9 @@ const SplitButton_SplitButtonRoot = /*#__PURE__*/ forwardRef(function({ children
             ...props,
             children: /*#__PURE__*/ jsx("div", {
                 ref: ref,
+                role: "group",
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledby,
                 "data-scope": "split-button",
                 "data-part": "root",
                 "data-slot": "split-button-root",

package/dist/components/splitter/Splitter.js

@@ -48,13 +48,14 @@ const Splitter_SplitterResizeTriggerIndicator = /*#__PURE__*/ forwardRef(functio
         ...props
     });
 });
-const Splitter_SplitterResizeTrigger = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
+const Splitter_SplitterResizeTrigger = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.ResizeTrigger, {
         ref: ref,
+        asChild: asChild,
         "data-slot": "splitter-resize-trigger",
         className: clsx(Splitter_module.resizeTrigger, normalizeClassName(className)),
         ...props,
-        children: void 0 === children ? /*#__PURE__*/ jsx(Splitter_SplitterResizeTriggerIndicator, {}) : children
+        children: void 0 !== children || asChild ? children : /*#__PURE__*/ jsx(Splitter_SplitterResizeTriggerIndicator, {})
     });
 });
 const Splitter_Splitter = Object.assign(Splitter_SplitterRoot, {

package/dist/components/splitter/Splitter_module.css

@@ -106,12 +106,6 @@
     height: var(--moduix-splitter-resize-trigger-size, var(--moduix-spacing-2-5));
   }
 
-  .resizeTrigger-RVtsVR[data-dragging]:before {
-    background-color: var(--moduix-splitter-resize-trigger-line-color-dragging, color-mix(in oklab,
-            var(--moduix-splitter-resize-trigger-line-color, var(--moduix-color-border)) 72%,
-            var(--moduix-color-muted-foreground)));
-  }
-
   .resizeTrigger-RVtsVR[data-disabled] {
     cursor: default;
     opacity: var(--moduix-splitter-disabled-opacity, var(--moduix-opacity-disabled));
@@ -125,6 +119,12 @@
     }
   }
 
+  .resizeTrigger-RVtsVR[data-dragging]:before {
+    background-color: var(--moduix-splitter-resize-trigger-line-color-dragging, color-mix(in oklab,
+        var(--moduix-splitter-resize-trigger-line-color, var(--moduix-color-border)) 72%,
+        var(--moduix-color-muted-foreground)));
+  }
+
   .resizeTriggerIndicator-V3g1ak {
     z-index: 2;
     box-sizing: border-box;
@@ -136,7 +136,8 @@
     background-color: var(--moduix-splitter-resize-trigger-indicator-bg, var(--moduix-color-background));
     box-shadow: var(--moduix-splitter-resize-trigger-indicator-shadow, var(--moduix-shadow-sm));
     pointer-events: none;
-    transition: border-color var(--moduix-splitter-transition, var(--moduix-transition-default)),
+    transition: background-color var(--moduix-splitter-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-splitter-transition, var(--moduix-transition-default)),
       box-shadow var(--moduix-splitter-transition, var(--moduix-transition-default)),
       transform var(--moduix-splitter-transition, var(--moduix-transition-default));
     position: absolute;
@@ -150,13 +151,6 @@
     height: var(--moduix-splitter-resize-trigger-indicator-width, var(--moduix-spacing-1-5));
   }
 
-  .resizeTrigger-RVtsVR[data-dragging] .resizeTriggerIndicator-V3g1ak {
-    border-color: var(--moduix-splitter-resize-trigger-indicator-border-color-dragging, var(--moduix-splitter-resize-trigger-indicator-border-color, var(--moduix-color-border)));
-    background-color: var(--moduix-splitter-resize-trigger-indicator-bg-dragging, var(--moduix-splitter-resize-trigger-indicator-bg, var(--moduix-color-background)));
-    box-shadow: var(--moduix-splitter-resize-trigger-indicator-shadow-dragging, var(--moduix-shadow-md));
-    transform: translate(-50%, -50%) scale(1.08);
-  }
-
   @media (hover: hover) {
     .resizeTrigger-RVtsVR:hover:not(:disabled, [data-disabled]) .resizeTriggerIndicator-V3g1ak {
       border-color: var(--moduix-splitter-resize-trigger-indicator-border-color-hover, color-mix(in oklab,
@@ -167,6 +161,19 @@
     }
   }
 
+  .resizeTrigger-RVtsVR[data-dragging] .resizeTriggerIndicator-V3g1ak {
+    border-color: var(--moduix-splitter-resize-trigger-indicator-border-color-dragging, var(--moduix-splitter-resize-trigger-indicator-border-color, var(--moduix-color-border)));
+    background-color: var(--moduix-splitter-resize-trigger-indicator-bg-dragging, var(--moduix-splitter-resize-trigger-indicator-bg, var(--moduix-color-background)));
+    box-shadow: var(--moduix-splitter-resize-trigger-indicator-shadow-dragging, var(--moduix-shadow-md));
+    transform: translate(-50%, -50%) scale(1.08);
+  }
+
+  .resizeTrigger-RVtsVR:focus-visible:not([data-dragging]) .resizeTriggerIndicator-V3g1ak {
+    outline: var(--moduix-splitter-resize-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+      solid var(--moduix-splitter-resize-trigger-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-splitter-resize-trigger-focus-ring-offset, var(--moduix-border-width-sm));
+  }
+
   .resizeTrigger-RVtsVR[data-disabled] .resizeTriggerIndicator-V3g1ak {
     visibility: hidden;
   }

package/dist/components/swap/Swap_module.css

@@ -7,53 +7,53 @@
   }
 
   .root-hsHHcI[data-animation="flip"] {
-    perspective: 24rem;
+    perspective: var(--moduix-swap-flip-perspective, 24rem);
   }
 
-  .indicator-S0xChs {
-    color: inherit;
-    grid-area: swap;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .root-hsHHcI[data-animation="fade"] .indicator-S0xChs[data-state="open"] {
+  .root-hsHHcI[data-animation="fade"] > .indicator-S0xChs[data-state="open"] {
     animation: swap-enter-VItkkF var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="fade"] .indicator-S0xChs[data-state="closed"] {
+  .root-hsHHcI[data-animation="fade"] > .indicator-S0xChs[data-state="closed"] {
     animation: swap-exit-LhGw4e var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="scale"] .indicator-S0xChs[data-state="open"] {
+  .root-hsHHcI[data-animation="scale"] > .indicator-S0xChs[data-state="open"] {
     animation: swap-scale-enter-Dk2hX4 var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="scale"] .indicator-S0xChs[data-state="closed"] {
+  .root-hsHHcI[data-animation="scale"] > .indicator-S0xChs[data-state="closed"] {
     animation: swap-scale-exit-_CsIGz var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="rotate"] .indicator-S0xChs[data-state="open"] {
+  .root-hsHHcI[data-animation="rotate"] > .indicator-S0xChs[data-state="open"] {
     animation: swap-rotate-enter-tH9kI6 var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="rotate"] .indicator-S0xChs[data-state="closed"] {
+  .root-hsHHcI[data-animation="rotate"] > .indicator-S0xChs[data-state="closed"] {
     animation: swap-rotate-exit-KRzyNE var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs {
+  .root-hsHHcI[data-animation="flip"] > .indicator-S0xChs {
     backface-visibility: hidden;
   }
 
-  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs[data-state="open"] {
+  .root-hsHHcI[data-animation="flip"] > .indicator-S0xChs[data-state="open"] {
     animation: swap-flip-enter-kaIqut var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
-  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs[data-state="closed"] {
+  .root-hsHHcI[data-animation="flip"] > .indicator-S0xChs[data-state="closed"] {
     animation: swap-flip-exit-x6dSs8 var(--moduix-swap-transition, var(--moduix-transition-slow));
   }
 
+  .indicator-S0xChs {
+    color: inherit;
+    grid-area: swap;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .indicator-S0xChs[data-state] {
       animation-duration: 1ms;
@@ -90,28 +90,28 @@
   @keyframes swap-rotate-enter-tH9kI6 {
     from {
       opacity: var(--moduix-swap-enter-starting-opacity, 0);
-      transform: rotate(-180deg);
+      transform: rotate(var(--moduix-swap-rotate-enter-starting-angle, -180deg));
     }
   }
 
   @keyframes swap-rotate-exit-KRzyNE {
     to {
       opacity: var(--moduix-swap-exit-ending-opacity, 0);
-      transform: rotate(180deg);
+      transform: rotate(var(--moduix-swap-rotate-exit-ending-angle, 180deg));
     }
   }
 
   @keyframes swap-flip-enter-kaIqut {
     from {
       opacity: var(--moduix-swap-enter-starting-opacity, 0);
-      transform: rotateY(-180deg);
+      transform: rotateY(var(--moduix-swap-flip-enter-starting-angle, -180deg));
     }
   }
 
   @keyframes swap-flip-exit-x6dSs8 {
     to {
       opacity: var(--moduix-swap-exit-ending-opacity, 0);
-      transform: rotateY(180deg);
+      transform: rotateY(var(--moduix-swap-flip-exit-ending-angle, 180deg));
     }
   }
 }

package/dist/components/switch/Switch.js

@@ -53,9 +53,7 @@ const Switch_SwitchLabel = /*#__PURE__*/ forwardRef(function({ className, ...pro
     });
 });
 function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(Switch.HiddenInput, {
-        "data-slot": "switch-hidden-input"
-    });
+    const hiddenInput = /*#__PURE__*/ jsx(SwitchHiddenInput, {});
     if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             children,
@@ -65,6 +63,14 @@ function withHiddenInput(children, asChild) {
     const child = Children.only(children);
     return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
+function SwitchHiddenInput() {
+    const switchApi = useSwitchContext();
+    const readOnly = void 0 !== switchApi.getRootProps()['data-readonly'];
+    return /*#__PURE__*/ jsx(Switch.HiddenInput, {
+        "aria-readonly": readOnly || void 0,
+        "data-slot": "switch-hidden-input"
+    });
+}
 const Switch_Switch = Object.assign(Switch_SwitchRoot, {
     Root: Switch_SwitchRoot,
     RootProvider: Switch_SwitchRootProvider,

package/dist/components/switch/Switch_module.css

@@ -19,9 +19,9 @@
 
   .control-_x56fO {
     box-sizing: border-box;
-    width: var(--moduix-switch-width, 3rem);
-    height: var(--moduix-switch-height, var(--moduix-size-xs));
-    --moduix-switch-thumb-translate-default: calc(var(--moduix-switch-width, 3rem) - var(--moduix-switch-thumb-size, var(--moduix-spacing-5)) -
+    width: var(--_switch-width, 3rem);
+    height: var(--_switch-height, var(--moduix-size-xs));
+    --_switch-thumb-translate-default: calc(var(--_switch-width, 3rem) - var(--_switch-thumb-size, var(--moduix-spacing-5)) -
         (var(--moduix-switch-padding, var(--moduix-spacing-0-5)) * 2) -
         (var(--moduix-switch-border-width, var(--moduix-border-width-sm)) * 2));
     border: var(--moduix-switch-border-width, var(--moduix-border-width-sm)) solid
@@ -48,7 +48,7 @@
   }
 
   .control-_x56fO[data-invalid] {
-    border-color: var(--moduix-color-destructive);
+    border-color: var(--moduix-switch-border-color-invalid, var(--moduix-color-destructive));
   }
 
   .control-_x56fO[data-focus-visible] {
@@ -68,38 +68,38 @@
   }
 
   .root-BQV0g7[data-size="xs"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-xs, 1.75rem);
-    --moduix-switch-height: var(--moduix-switch-height-xs, 1rem);
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
+    --_switch-width: var(--moduix-switch-width-xs, 1.75rem);
+    --_switch-height: var(--moduix-switch-height-xs, 1rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
   }
 
   .root-BQV0g7[data-size="sm"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-sm, 2.25rem);
-    --moduix-switch-height: var(--moduix-switch-height-sm, 1.25rem);
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
+    --_switch-width: var(--moduix-switch-width-sm, 2.25rem);
+    --_switch-height: var(--moduix-switch-height-sm, 1.25rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
   }
 
   .root-BQV0g7[data-size="md"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-md, 2.75rem);
-    --moduix-switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
+    --_switch-width: var(--moduix-switch-width-md, 2.75rem);
+    --_switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
   }
 
   .root-BQV0g7[data-size="lg"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-lg, 3.25rem);
-    --moduix-switch-height: var(--moduix-switch-height-lg, 1.75rem);
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
+    --_switch-width: var(--moduix-switch-width-lg, 3.25rem);
+    --_switch-height: var(--moduix-switch-height-lg, 1.75rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
   }
 
   .root-BQV0g7[data-size="xl"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-xl, 3.75rem);
-    --moduix-switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
+    --_switch-width: var(--moduix-switch-width-xl, 3.75rem);
+    --_switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
   }
 
   .thumb-AkEGnM {
-    width: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
-    height: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
+    width: var(--_switch-thumb-size, var(--moduix-spacing-5));
+    height: var(--_switch-thumb-size, var(--moduix-spacing-5));
     border: var(--moduix-switch-thumb-border-width, 0) solid
       var(--moduix-switch-thumb-border-color, transparent);
     border-radius: var(--moduix-switch-thumb-radius, var(--moduix-radius-full));
@@ -119,17 +119,18 @@
   .thumb-AkEGnM[data-state="checked"] {
     background-color: var(--moduix-switch-thumb-bg-checked, var(--moduix-switch-thumb-bg, var(--moduix-color-primary-foreground)));
     color: var(--moduix-switch-thumb-color-checked, var(--moduix-switch-thumb-color, var(--moduix-color-primary)));
-    transform: translateX(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)));
+    transform: translateX(var(--moduix-switch-thumb-translate, var(--_switch-thumb-translate-default)));
   }
 
   .thumb-AkEGnM > svg {
     width: var(--moduix-switch-thumb-icon-size, 65%);
     height: var(--moduix-switch-thumb-icon-size, 65%);
     flex-shrink: 0;
+    display: block;
   }
 
   .root-BQV0g7:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .thumb-AkEGnM[data-state="checked"] {
-    transform: translateX(calc(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)) * -1));
+    transform: translateX(calc(var(--moduix-switch-thumb-translate, var(--_switch-thumb-translate-default)) * -1));
   }
 
   .label-OFdult {
@@ -140,5 +141,11 @@
     -webkit-user-select: none;
     user-select: none;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control-_x56fO, .thumb-AkEGnM {
+      transition: none;
+    }
+  }
 }
 

package/dist/components/table/Table_module.css

@@ -15,9 +15,9 @@
   }
 
   .root-iUez_7 {
-    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-4));
-    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-3));
-    --moduix-table-empty-padding-y-default: calc(var(--moduix-table-cell-padding-y-default) * 2);
+    --_table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-4));
+    --_table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-3));
+    --_table-empty-padding-y-default: calc(var(--_table-cell-padding-y-default) * 2);
     box-sizing: border-box;
     border-collapse: collapse;
     border-spacing: 0;
@@ -31,15 +31,15 @@
   }
 
   .root-iUez_7[data-size="sm"] {
-    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
-    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
+    --_table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
+    --_table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
     font-size: var(--moduix-table-font-size-sm, var(--moduix-text-xs));
     line-height: var(--moduix-table-line-height-sm, var(--moduix-line-height-text-xs));
   }
 
   .root-iUez_7[data-size="lg"] {
-    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
-    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
+    --_table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
+    --_table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
     font-size: var(--moduix-table-font-size-lg, var(--moduix-text-md));
     line-height: var(--moduix-table-line-height-lg, var(--moduix-line-height-text-md));
   }
@@ -54,7 +54,7 @@
     color: var(--moduix-table-caption-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-table-caption-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-table-caption-line-height, var(--moduix-line-height-text-sm));
-    padding-inline: var(--moduix-table-caption-padding-x, var(--moduix-table-cell-padding-x-default));
+    padding-inline: var(--moduix-table-caption-padding-x, var(--_table-cell-padding-x-default));
     text-align: left;
     text-wrap: pretty;
   }
@@ -88,6 +88,10 @@
     background-color: var(--moduix-table-row-bg-hover, var(--moduix-color-muted));
   }
 
+  .root-iUez_7[data-interactive] .body-JqLHru .row-vTGkhP:not([data-empty]):focus-within {
+    background-color: var(--moduix-table-row-bg-focus, var(--moduix-table-row-bg-hover, var(--moduix-color-muted)));
+  }
+
   .root-iUez_7[data-show-column-border] :is(.columnHeader-MBpfL1, .cell-uGo0rz):not(:last-child) {
     border-inline-end: var(--moduix-table-column-border-width, var(--moduix-table-border-width, var(--moduix-border-width-sm)))
       solid
@@ -115,8 +119,8 @@
 
   .columnHeader-MBpfL1, .cell-uGo0rz {
     z-index: 0;
-    padding-block: var(--moduix-table-cell-padding-y-default);
-    padding-inline: var(--moduix-table-cell-padding-x-default);
+    padding-block: var(--_table-cell-padding-y-default);
+    padding-inline: var(--_table-cell-padding-x-default);
     vertical-align: middle;
     position: relative;
   }
@@ -157,7 +161,7 @@
   }
 
   .empty-dLhlhx {
-    padding-block: var(--moduix-table-empty-padding-y, var(--moduix-table-empty-padding-y-default));
+    padding-block: var(--moduix-table-empty-padding-y, var(--_table-empty-padding-y-default));
     color: var(--moduix-table-empty-color, var(--moduix-color-muted-foreground));
     text-align: center;
   }

package/dist/components/tabs/Tabs.js

@@ -16,12 +16,15 @@ const Tabs_TabsRoot = /*#__PURE__*/ forwardRef(function({ className, orientation
         ...props
     });
 });
-const Tabs_TabsRootProvider = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', ...props }, ref) {
+const Tabs_TabsRootProvider = /*#__PURE__*/ forwardRef(function({ className, value, variant = 'default', ...props }, ref) {
+    const orientation = value.getRootProps()['data-orientation'];
+    const resolvedVariant = 'vertical' === orientation ? 'default' : variant;
     return /*#__PURE__*/ jsx(Tabs.RootProvider, {
         ref: ref,
         "data-slot": "tabs-root-provider",
-        "data-variant": variant,
+        "data-variant": resolvedVariant,
         className: clsx(Tabs_module.root, normalizeClassName(className)),
+        value: value,
         ...props
     });
 });