@moduix/react 2.1.0 → 2.2.0

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

@@ -1,45 +1,45 @@
-@layer ui.components {
+@layer moduix.components {
   ._wse8a_root {
     box-sizing: border-box;
-    gap: var(--signature-pad-gap, var(--spacing-2));
-    width: var(--signature-pad-width, 17.5rem);
-    max-width: var(--signature-pad-max-width, 100%);
-    color: var(--signature-pad-color, var(--color-foreground));
+    gap: var(--moduix-signature-pad-gap, var(--moduix-spacing-2));
+    width: var(--moduix-signature-pad-width, 17.5rem);
+    max-width: var(--moduix-signature-pad-max-width, 100%);
+    color: var(--moduix-signature-pad-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-signature-pad-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   ._wse8a_label {
-    color: var(--signature-pad-label-color, var(--color-foreground));
-    font-size: var(--signature-pad-label-font-size, var(--text-sm));
-    font-weight: var(--signature-pad-label-font-weight, var(--weight-medium));
-    line-height: var(--signature-pad-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-signature-pad-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-signature-pad-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-signature-pad-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-signature-pad-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
 
     &[data-disabled] {
-      opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-signature-pad-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   ._wse8a_control {
     box-sizing: border-box;
-    width: var(--signature-pad-control-width, 100%);
-    min-width: var(--signature-pad-control-min-width, 0);
-    height: var(--signature-pad-control-height, var(--signature-pad-height, 10rem));
-    min-height: var(--signature-pad-control-min-height, 10rem);
-    border: var(--signature-pad-border-width, var(--border-width-sm)) solid
-      var(--signature-pad-border-color, var(--color-border));
-    border-radius: var(--signature-pad-radius, var(--radius-md));
-    background-color: var(--signature-pad-bg, var(--color-background));
-    color: var(--signature-pad-stroke-color, var(--color-foreground));
-    box-shadow: var(--signature-pad-shadow, var(--shadow-sm));
-    transition: border-color var(--signature-pad-transition, var(--transition-default)),
-      box-shadow var(--signature-pad-transition, var(--transition-default)),
-      opacity var(--signature-pad-transition, var(--transition-default));
+    width: var(--moduix-signature-pad-control-width, 100%);
+    min-width: var(--moduix-signature-pad-control-min-width, 0);
+    height: var(--moduix-signature-pad-control-height, var(--moduix-signature-pad-height, 10rem));
+    min-height: var(--moduix-signature-pad-control-min-height, 10rem);
+    border: var(--moduix-signature-pad-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-signature-pad-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-signature-pad-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-signature-pad-bg, var(--moduix-color-background));
+    color: var(--moduix-signature-pad-stroke-color, var(--moduix-color-foreground));
+    box-shadow: var(--moduix-signature-pad-shadow, var(--moduix-shadow-sm));
+    transition: border-color var(--moduix-signature-pad-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-signature-pad-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-signature-pad-transition, var(--moduix-transition-default));
     outline: none;
     overflow: hidden;
 
@@ -48,48 +48,48 @@
     }
 
     &:focus-visible {
-      border-color: var(--signature-pad-focus-border-color, var(--color-ring));
+      border-color: var(--moduix-signature-pad-focus-border-color, var(--moduix-color-ring));
       box-shadow: 0 0 0
-        var(--signature-pad-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        var(--signature-pad-focus-ring-color, var(--color-ring));
+        var(--moduix-signature-pad-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        var(--moduix-signature-pad-focus-ring-color, var(--moduix-color-ring));
     }
   }
 
   ._wse8a_segment {
-    fill: var(--signature-pad-stroke-color, currentColor);
+    fill: var(--moduix-signature-pad-stroke-color, currentColor);
   }
 
   ._wse8a_guide {
-    inset-inline-end: var(--signature-pad-guide-inset-x, var(--spacing-6));
-    bottom: var(--signature-pad-guide-bottom, var(--spacing-8));
-    border-bottom: var(--signature-pad-guide-border-width, var(--border-width-sm)) dashed
-      var(--signature-pad-guide-color, var(--color-border));
+    inset-inline-end: var(--moduix-signature-pad-guide-inset-x, var(--moduix-spacing-6));
+    bottom: var(--moduix-signature-pad-guide-bottom, var(--moduix-spacing-8));
+    border-bottom: var(--moduix-signature-pad-guide-border-width, var(--moduix-border-width-sm))
+      dashed var(--moduix-signature-pad-guide-color, var(--moduix-color-border));
     pointer-events: none;
     position: absolute;
-    inset-inline-start: var(--signature-pad-guide-inset-x, var(--spacing-6));
+    inset-inline-start: var(--moduix-signature-pad-guide-inset-x, var(--moduix-spacing-6));
 
     &[data-disabled] {
-      opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-signature-pad-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   ._wse8a_clearTrigger {
-    top: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
-    border: var(--signature-pad-clear-trigger-border-width, 0) solid
-      var(--signature-pad-clear-trigger-border-color, transparent);
-    --close-button-size: var(--signature-pad-clear-trigger-size, var(--size-md));
-    --close-button-radius: var(--signature-pad-clear-trigger-radius, var(--radius-sm));
-    --close-button-bg: var(--signature-pad-clear-trigger-bg, transparent);
-    --close-button-bg-hover: var(--signature-pad-clear-trigger-bg-hover, var(--color-accent));
-    --close-button-color: var(--signature-pad-clear-trigger-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--signature-pad-clear-trigger-color-hover, var(--color-foreground));
-    --close-button-icon-size: var(--signature-pad-clear-trigger-icon-size, var(--spacing-4));
-    --close-button-transition: var(--signature-pad-transition, var(--transition-default));
-    --close-button-focus-ring-width: var(--signature-pad-clear-trigger-focus-ring-width, var(--focus-ring-width, var(--border-width-md)));
-    --close-button-focus-ring-color: var(--signature-pad-clear-trigger-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: var(--signature-pad-clear-trigger-focus-ring-offset, var(--spacing-1));
-    --close-button-disabled-opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+    top: var(--moduix-signature-pad-clear-trigger-offset, var(--moduix-spacing-2));
+    border: var(--moduix-signature-pad-clear-trigger-border-width, 0) solid
+      var(--moduix-signature-pad-clear-trigger-border-color, transparent);
+    --moduix-close-button-size: var(--moduix-signature-pad-clear-trigger-size, var(--moduix-size-md));
+    --moduix-close-button-radius: var(--moduix-signature-pad-clear-trigger-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-signature-pad-clear-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-signature-pad-clear-trigger-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-color: var(--moduix-signature-pad-clear-trigger-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-signature-pad-clear-trigger-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-icon-size: var(--moduix-signature-pad-clear-trigger-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-transition: var(--moduix-signature-pad-transition, var(--moduix-transition-default));
+    --moduix-close-button-focus-ring-width: var(--moduix-signature-pad-clear-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
+    --moduix-close-button-focus-ring-color: var(--moduix-signature-pad-clear-trigger-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-signature-pad-clear-trigger-focus-ring-offset, var(--moduix-spacing-1));
+    --moduix-close-button-disabled-opacity: var(--moduix-signature-pad-disabled-opacity, var(--moduix-opacity-disabled));
     position: absolute;
-    inset-inline-end: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
+    inset-inline-end: var(--moduix-signature-pad-clear-trigger-offset, var(--moduix-spacing-2));
   }
 }

package/dist/components/skeleton/Skeleton.css

@@ -1,14 +1,16 @@
-@layer ui.components {
+@layer moduix.components {
   .ahClzq_root {
-    border-radius: var(--skeleton-border-radius, var(--radius-md));
+    border-radius: var(--moduix-skeleton-border-radius, var(--moduix-radius-md));
     width: 100%;
     display: block;
     overflow: hidden;
 
     &[data-state="loading"] {
-      height: var(--skeleton-height, var(--spacing-4));
-      animation: var(--skeleton-animation, var(--animation-pulse));
-      background: var(--skeleton-bg, color-mix(in oklab, var(--color-muted-foreground) 18%, var(--color-background)));
+      height: var(--moduix-skeleton-height, var(--moduix-spacing-4));
+      animation: var(--moduix-skeleton-animation, var(--moduix-animation-pulse));
+      background: var(--moduix-skeleton-bg, color-mix(in oklab,
+          var(--moduix-color-muted-foreground) 18%,
+          var(--moduix-color-background)));
       color: #0000;
       pointer-events: none;
       user-select: none;

package/dist/components/slider/Slider.css

@@ -1,43 +1,43 @@
-@layer ui.components {
+@layer moduix.components {
   .NN9-IW_root {
     box-sizing: border-box;
-    gap: var(--slider-gap, var(--spacing-2));
-    width: var(--slider-width, 12rem);
-    color: var(--slider-color, var(--color-foreground));
+    gap: var(--moduix-slider-gap, var(--moduix-spacing-2));
+    width: var(--moduix-slider-width, 12rem);
+    color: var(--moduix-slider-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-width-vertical, max-content);
-      height: var(--slider-height, 12rem);
+      width: var(--moduix-slider-width-vertical, max-content);
+      height: var(--moduix-slider-height, 12rem);
       align-items: center;
     }
 
     &[data-disabled] {
-      opacity: var(--slider-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-slider-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .NN9-IW_label {
-    color: var(--slider-label-color, var(--slider-color, var(--color-foreground)));
-    font-size: var(--slider-label-font-size, var(--text-sm));
-    font-weight: var(--slider-label-font-weight, var(--weight-regular));
-    line-height: var(--slider-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-slider-label-color, var(--moduix-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-slider-label-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-slider-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
   }
 
   .NN9-IW_valueText {
-    color: var(--slider-value-text-color, var(--slider-color, var(--color-foreground)));
-    font-size: var(--slider-value-text-font-size, var(--text-sm));
-    font-weight: var(--slider-value-text-font-weight, var(--weight-regular));
-    line-height: var(--slider-value-text-line-height, var(--line-height-text-sm));
+    color: var(--moduix-slider-value-text-color, var(--moduix-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-slider-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-slider-value-text-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-slider-value-text-line-height, var(--moduix-line-height-text-sm));
     text-align: right;
   }
 
   .NN9-IW_control {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--slider-control-size, var(--spacing-5));
+    min-height: var(--moduix-slider-control-size, var(--moduix-spacing-5));
     touch-action: none;
     user-select: none;
     cursor: pointer;
@@ -46,7 +46,7 @@
     position: relative;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-control-size, var(--spacing-5));
+      width: var(--moduix-slider-control-size, var(--moduix-spacing-5));
       flex-direction: column;
       height: 100%;
       min-height: 0;
@@ -59,24 +59,24 @@
 
   .NN9-IW_track {
     width: 100%;
-    height: var(--slider-track-size, var(--spacing-1-5));
-    border-radius: var(--slider-track-radius, var(--radius-full));
-    background-color: var(--slider-track-bg, var(--color-muted));
-    box-shadow: inset 0 0 0 var(--slider-track-border-width, var(--border-width-sm))
-      var(--slider-track-border-color, var(--color-border));
+    height: var(--moduix-slider-track-size, var(--moduix-spacing-1-5));
+    border-radius: var(--moduix-slider-track-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-slider-track-bg, var(--moduix-color-muted));
+    box-shadow: inset 0 0 0 var(--moduix-slider-track-border-width, var(--moduix-border-width-sm))
+      var(--moduix-slider-track-border-color, var(--moduix-color-border));
     user-select: none;
     flex: 1;
     overflow: hidden;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-track-size, var(--spacing-1-5));
+      width: var(--moduix-slider-track-size, var(--moduix-spacing-1-5));
       height: 100%;
     }
   }
 
   .NN9-IW_range {
-    border-radius: var(--slider-range-radius, inherit);
-    background-color: var(--slider-range-bg, var(--color-primary));
+    border-radius: var(--moduix-slider-range-radius, inherit);
+    background-color: var(--moduix-slider-range-bg, var(--moduix-color-primary));
     height: 100%;
 
     &[data-orientation="vertical"] {
@@ -86,33 +86,33 @@
 
   .NN9-IW_thumb {
     box-sizing: border-box;
-    width: var(--slider-thumb-size, var(--spacing-4));
-    height: var(--slider-thumb-size, var(--spacing-4));
-    border: var(--slider-thumb-border-width, var(--border-width-sm)) solid
-      var(--slider-thumb-border-color, var(--color-border));
-    border-radius: var(--slider-thumb-radius, var(--radius-full));
-    background-color: var(--slider-thumb-bg, var(--color-background));
-    box-shadow: var(--slider-thumb-shadow, var(--shadow-sm));
+    width: var(--moduix-slider-thumb-size, var(--moduix-spacing-4));
+    height: var(--moduix-slider-thumb-size, var(--moduix-spacing-4));
+    border: var(--moduix-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-slider-thumb-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-slider-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-slider-thumb-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-slider-thumb-shadow, var(--moduix-shadow-sm));
     user-select: none;
-    transition: border-color var(--slider-transition, var(--transition-default)),
-      background-color var(--slider-transition, var(--transition-default)),
-      box-shadow var(--slider-transition, var(--transition-default));
+    transition: border-color var(--moduix-slider-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-slider-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-slider-transition, var(--moduix-transition-default));
     outline: 0;
     justify-content: center;
     align-items: center;
     display: flex;
 
     &[data-dragging] {
-      border-color: var(--slider-focus-ring-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--focus-ring-inset-width, var(--border-width-sm))
-          var(--slider-focus-ring-color, var(--color-ring)),
-        var(--slider-thumb-shadow-dragging, var(--shadow-md));
+      border-color: var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+      box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+          var(--moduix-slider-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-slider-thumb-shadow-dragging, var(--moduix-shadow-md));
     }
 
     &:focus-visible {
-      border-color: var(--slider-focus-ring-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--focus-ring-inset-width, var(--border-width-sm))
-        var(--slider-focus-ring-color, var(--color-ring));
+      border-color: var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+      box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+        var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-disabled] {
@@ -121,20 +121,20 @@
   }
 
   .NN9-IW_draggingIndicator {
-    top: calc(-1 * var(--spacing-8));
-    padding: var(--spacing-1) var(--spacing-2);
-    border-radius: var(--slider-dragging-indicator-radius, var(--radius-sm));
-    background-color: var(--slider-dragging-indicator-bg, var(--color-foreground));
-    color: var(--slider-dragging-indicator-color, var(--color-background));
-    font-size: var(--slider-dragging-indicator-font-size, var(--text-xs));
-    font-weight: var(--slider-dragging-indicator-font-weight, var(--weight-medium));
-    line-height: var(--slider-dragging-indicator-line-height, 1);
+    top: calc(-1 * var(--moduix-spacing-8));
+    padding: var(--moduix-spacing-1) var(--moduix-spacing-2);
+    border-radius: var(--moduix-slider-dragging-indicator-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-slider-dragging-indicator-bg, var(--moduix-color-foreground));
+    color: var(--moduix-slider-dragging-indicator-color, var(--moduix-color-background));
+    font-size: var(--moduix-slider-dragging-indicator-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-slider-dragging-indicator-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-slider-dragging-indicator-line-height, 1);
     white-space: nowrap;
     pointer-events: none;
   }
 
   .NN9-IW_markerGroup {
-    margin-top: var(--slider-marker-group-margin-top, var(--spacing-2));
+    margin-top: var(--moduix-slider-marker-group-margin-top, var(--moduix-spacing-2));
     justify-content: space-between;
     display: flex;
 
@@ -142,30 +142,30 @@
       height: 100%;
       margin-top: 0;
       flex-direction: column;
-      margin-inline-start: var(--slider-marker-group-margin-inline-start, var(--spacing-2));
+      margin-inline-start: var(--moduix-slider-marker-group-margin-inline-start, var(--moduix-spacing-2));
     }
   }
 
   .NN9-IW_marker {
-    color: var(--slider-marker-color, var(--color-muted-foreground));
-    font-size: var(--slider-marker-font-size, var(--text-xs));
-    line-height: var(--slider-marker-line-height, var(--line-height-text-xs));
+    color: var(--moduix-slider-marker-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-slider-marker-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-slider-marker-line-height, var(--moduix-line-height-text-xs));
     position: relative;
 
     &:before {
-      width: var(--slider-marker-dot-size, var(--spacing-1));
-      height: var(--slider-marker-dot-size, var(--spacing-1));
-      border-radius: var(--radius-full);
-      background-color: var(--slider-marker-dot-bg, var(--color-border));
+      width: var(--moduix-slider-marker-dot-size, var(--moduix-spacing-1));
+      height: var(--moduix-slider-marker-dot-size, var(--moduix-spacing-1));
+      border-radius: var(--moduix-radius-full);
+      background-color: var(--moduix-slider-marker-dot-bg, var(--moduix-color-border));
       content: "";
       position: absolute;
-      inset-block-start: calc(-1 * var(--spacing-2));
+      inset-block-start: calc(-1 * var(--moduix-spacing-2));
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     &:is([data-state="under-value"], [data-state="at-value"]):before {
-      background-color: var(--slider-marker-dot-bg-active, var(--slider-range-bg, var(--color-primary)));
+      background-color: var(--moduix-slider-marker-dot-bg-active, var(--moduix-slider-range-bg, var(--moduix-color-primary)));
     }
   }
 }

package/dist/components/spinner/Spinner.css

@@ -1,9 +1,9 @@
-@layer ui.components {
+@layer moduix.components {
   .nzbtuq_root, [data-scope="spinner"][data-part="root"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-md, var(--spacing-5)));
+    --_spinner-size: var(--moduix-spinner-size, var(--moduix-spinner-size-md, var(--moduix-spacing-5)));
     width: var(--_spinner-size);
     height: var(--_spinner-size);
-    color: var(--spinner-color, currentColor);
+    color: var(--moduix-spinner-color, currentColor);
     vertical-align: middle;
     flex: none;
     justify-content: center;
@@ -14,7 +14,7 @@
   .nzbtuq_indicator, [data-scope="spinner"][data-part="indicator"] {
     width: 100%;
     height: 100%;
-    animation: var(--spinner-animation, var(--animation-spin));
+    animation: var(--moduix-spinner-animation, var(--moduix-animation-spin));
     justify-content: center;
     align-items: center;
     display: inline-flex;
@@ -22,10 +22,10 @@
 
   .nzbtuq_ring, [data-scope="spinner"][data-part="ring"] {
     box-sizing: border-box;
-    border: var(--spinner-ring-border-width, var(--border-width-md)) solid
-      var(--spinner-ring-track-color, color-mix(in oklab, currentColor 22%, transparent));
-    border-block-start-color: var(--spinner-color, currentColor);
-    border-radius: var(--spinner-radius, var(--radius-full));
+    border: var(--moduix-spinner-ring-border-width, var(--moduix-border-width-md)) solid
+      var(--moduix-spinner-ring-track-color, color-mix(in oklab, currentColor 22%, transparent));
+    border-block-start-color: var(--moduix-spinner-color, currentColor);
+    border-radius: var(--moduix-spinner-radius, var(--moduix-radius-full));
     width: 100%;
     height: 100%;
     display: block;
@@ -37,19 +37,19 @@
   }
 
   .nzbtuq_root[data-size="xs"], [data-scope="spinner"][data-part="root"][data-size="xs"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-xs, var(--spacing-3)));
+    --_spinner-size: var(--moduix-spinner-size, var(--moduix-spinner-size-xs, var(--moduix-spacing-3)));
   }
 
   .nzbtuq_root[data-size="sm"], [data-scope="spinner"][data-part="root"][data-size="sm"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-sm, var(--spacing-4)));
+    --_spinner-size: var(--moduix-spinner-size, var(--moduix-spinner-size-sm, var(--moduix-spacing-4)));
   }
 
   .nzbtuq_root[data-size="lg"], [data-scope="spinner"][data-part="root"][data-size="lg"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-lg, var(--spacing-7)));
+    --_spinner-size: var(--moduix-spinner-size, var(--moduix-spinner-size-lg, var(--moduix-spacing-7)));
   }
 
   .nzbtuq_root[data-size="xl"], [data-scope="spinner"][data-part="root"][data-size="xl"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-xl, var(--size-md)));
+    --_spinner-size: var(--moduix-spinner-size, var(--moduix-spinner-size-xl, var(--moduix-size-md)));
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -1,4 +1,4 @@
-@layer ui.components {
+@layer moduix.components {
   .iLFhoa_root {
     align-items: stretch;
     display: inline-flex;
@@ -11,22 +11,22 @@
 
   .iLFhoa_trigger {
     min-width: 0;
-    padding-inline: var(--split-button-trigger-padding-x-md, var(--spacing-3));
+    padding-inline: var(--moduix-split-button-trigger-padding-x-md, var(--moduix-spacing-3));
     border-start-start-radius: 0;
     border-end-start-radius: 0;
-    margin-inline-start: calc(var(--button-border-width, var(--border-width-sm)) * -1);
+    margin-inline-start: calc(var(--moduix-button-border-width, var(--moduix-border-width-sm)) * -1);
     position: relative;
   }
 
   .iLFhoa_trigger:before {
     content: "";
-    inset-block: var(--split-button-separator-inset, var(--spacing-1-5));
-    width: var(--split-button-separator-width, var(--border-width-sm));
-    background-color: var(--split-button-separator-color, currentColor);
-    opacity: var(--split-button-separator-opacity, .16);
+    inset-block: var(--moduix-split-button-separator-inset, var(--moduix-spacing-1-5));
+    width: var(--moduix-split-button-separator-width, var(--moduix-border-width-sm));
+    background-color: var(--moduix-split-button-separator-color, currentColor);
+    opacity: var(--moduix-split-button-separator-opacity, .16);
     pointer-events: none;
     position: absolute;
-    inset-inline-start: var(--split-button-separator-offset, 0);
+    inset-inline-start: var(--moduix-split-button-separator-offset, 0);
   }
 
   .iLFhoa_trigger[data-variant="outline"]:before, .iLFhoa_trigger[data-variant="destructive-outline"]:before {
@@ -34,18 +34,18 @@
   }
 
   .iLFhoa_trigger[data-size="xs"] {
-    padding-inline: var(--split-button-trigger-padding-x-xs, var(--spacing-2));
+    padding-inline: var(--moduix-split-button-trigger-padding-x-xs, var(--moduix-spacing-2));
   }
 
   .iLFhoa_trigger[data-size="sm"] {
-    padding-inline: var(--split-button-trigger-padding-x-sm, var(--spacing-2-5));
+    padding-inline: var(--moduix-split-button-trigger-padding-x-sm, var(--moduix-spacing-2-5));
   }
 
   .iLFhoa_trigger[data-size="lg"] {
-    padding-inline: var(--split-button-trigger-padding-x-lg, var(--spacing-3-5));
+    padding-inline: var(--moduix-split-button-trigger-padding-x-lg, var(--moduix-spacing-3-5));
   }
 
   .iLFhoa_trigger[data-size="xl"] {
-    padding-inline: var(--split-button-trigger-padding-x-xl, var(--spacing-4));
+    padding-inline: var(--moduix-split-button-trigger-padding-x-xl, var(--moduix-spacing-4));
   }
 }