@moduix/react 2.2.4 → 2.2.5

package/dist/components/select/Select.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/react/select";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
@@ -235,27 +236,30 @@ function SelectFormControl({ nativeFormControl }) {
         ]
     });
 }
-function SelectItemTextContent({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+const Select_SelectItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "select-item-text-content",
         className: clsx(Select_module.itemTextContent, normalizeClassName(className)),
         ...props
     });
-}
-function SelectItemTextIcon({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Select_SelectItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "select-item-text-icon",
         className: clsx(Select_module.itemTextIcon, normalizeClassName(className)),
         ...props
     });
-}
-function SelectItemTextLabel({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Select_SelectItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "select-item-text-label",
         className: clsx(Select_module.itemTextLabel, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Select_Select = Object.assign(Select_SelectRoot, {
     Root: Select_SelectRoot,
     RootProvider: Select_SelectRootProvider,
@@ -279,8 +283,8 @@ const Select_Select = Object.assign(Select_SelectRoot, {
     Item: Select_SelectItem,
     ItemText: Select_SelectItemText,
     ItemIndicator: Select_SelectItemIndicator,
-    ItemTextContent: SelectItemTextContent,
-    ItemTextIcon: SelectItemTextIcon,
-    ItemTextLabel: SelectItemTextLabel
+    ItemTextContent: Select_SelectItemTextContent,
+    ItemTextIcon: Select_SelectItemTextIcon,
+    ItemTextLabel: Select_SelectItemTextLabel
 });
 export { Select_Select as Select, useSelect, useSelectContext, useSelectItemContext };

package/dist/components/select/Select_module.css

@@ -270,7 +270,7 @@
   }
 
   .itemGroup-rRI1Ej + .itemGroup-rRI1Ej {
-    margin-top: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
   }
 
   .itemGroupLabel-IeDuI7 {
@@ -371,5 +371,19 @@
     min-width: 0;
     overflow: hidden;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-_8XyWR, .indicator-ywAB27 {
+      transition: none;
+    }
+
+    .clearTrigger-bA52Dh {
+      --moduix-close-button-transition: none;
+    }
+
+    .content-fSDhut[data-state] {
+      animation: none;
+    }
+  }
 }
 

package/dist/components/separator/Separator.js

@@ -4,14 +4,14 @@ import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Separator_module from "./Separator.module.js";
-const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, orientation = 'horizontal', role, size = 'sm', variant = 'solid', 'aria-orientation': ariaOrientation, ...props }, ref) {
+const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, orientation = 'horizontal', role, size = 'sm', variant = 'solid', 'aria-orientation': _ariaOrientation, ...props }, ref) {
     const resolvedRole = role ?? 'separator';
     return /*#__PURE__*/ jsx(ark.span, {
         ...props,
         ref: ref,
         asChild: asChild,
         role: resolvedRole,
-        "aria-orientation": ariaOrientation ?? ('separator' === resolvedRole ? orientation : void 0),
+        "aria-orientation": 'separator' === resolvedRole ? orientation : void 0,
         "data-scope": "separator",
         "data-part": "root",
         "data-slot": "separator-root",

package/dist/components/separator/Separator_module.css

@@ -2,7 +2,7 @@
   .root-q9iyyK {
     border: 0;
     border-color: var(--moduix-separator-color, var(--moduix-color-border));
-    border-style: var(--moduix-separator-border-style, var(--moduix-separator-variant-border-style, solid));
+    border-style: var(--moduix-separator-border-style, var(--_separator-variant-border-style, solid));
     flex-shrink: 0;
     margin: 0;
     display: block;
@@ -25,11 +25,11 @@
   }
 
   .root-q9iyyK[data-variant="dashed"] {
-    --moduix-separator-variant-border-style: dashed;
+    --_separator-variant-border-style: dashed;
   }
 
   .root-q9iyyK[data-variant="dotted"] {
-    --moduix-separator-variant-border-style: dotted;
+    --_separator-variant-border-style: dotted;
   }
 
   .root-q9iyyK[data-orientation="horizontal"] {

package/dist/components/sidebar/Sidebar.js

@@ -12,7 +12,7 @@ import { Tooltip } from "../tooltip/index.js";
 import Sidebar_module from "./Sidebar.module.js";
 const sidebarPanel = {
     id: 'sidebar',
-    minSize: '12rem',
+    minSize: '3rem',
     maxSize: '18rem',
     collapsible: true,
     collapsedSize: '3rem'

package/dist/components/sidebar/Sidebar_module.css

@@ -93,10 +93,6 @@
     z-index: 2;
   }
 
-  .resizeTrigger-xFDgel:focus-visible:not([data-dragging]):before {
-    background-color: var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
-  }
-
   .trigger-_fUcgc {
     box-sizing: border-box;
     width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
@@ -143,14 +139,13 @@
 
   .trigger-_fUcgc {
     z-index: 4;
-    margin-block-start: var(--moduix-sidebar-trigger-offset-y, var(--moduix-spacing-4));
+    margin-block-start: 0;
     margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
     border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
     background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
     box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
-    align-self: flex-start;
     position: relative;
   }
 
@@ -162,8 +157,15 @@
     transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
   }
 
-  .label-trHnso {
+  .trigger-_fUcgc {
+    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
+  }
+
+  .label-trHnso, .groupLabel-IvBtsR {
+    text-overflow: ellipsis;
+    white-space: nowrap;
     min-width: 0;
+    overflow: hidden;
   }
 
   .header-YkNEAV, .footer-RydM38 {
@@ -202,7 +204,6 @@
   }
 
   .groupLabel-IvBtsR {
-    min-width: 0;
     padding-inline: var(--moduix-sidebar-group-label-padding-x, var(--moduix-spacing-2));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-sidebar-group-label-font-size, var(--moduix-text-xs));

package/dist/components/signature-pad/SignaturePad.d.ts

@@ -1,18 +1,16 @@
-import { SignaturePad as SignaturePadPrimitive, useSignaturePad, useSignaturePadContext } from '@ark-ui/react/signature-pad';
+import { SignaturePad as SignaturePadPrimitive, useSignaturePad as useSignaturePadPrimitive, useSignaturePadContext } from '@ark-ui/react/signature-pad';
 import type { ReactNode } from 'react';
 type SignaturePadFormProps = {
     getFormValue?: (paths: string[]) => string;
 };
-declare function SignaturePadCanvas({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
+declare function useSignaturePad(props?: Parameters<typeof useSignaturePadPrimitive>[0]): ReturnType<typeof useSignaturePadPrimitive>;
 declare const SignaturePad: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Context: (props: SignaturePadPrimitive.ContextProps) => ReactNode;
     Label: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Canvas: typeof SignaturePadCanvas;
+    Canvas: import("react").ForwardRefExoticComponent<Omit<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Segment: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.SegmentProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     Guide: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.GuideProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ClearTrigger: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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));
     }
   }
 }