@moduix/react 2.1.0 → 2.2.0

package/dist/components/splitter/Splitter.css

@@ -1,14 +1,14 @@
-@layer ui.components {
+@layer moduix.components {
   .qnjB1q_root {
     box-sizing: border-box;
-    min-width: var(--splitter-min-width, 0);
-    min-height: var(--splitter-min-height, 0);
-    border: var(--splitter-border-width, var(--border-width-sm)) solid
-      var(--splitter-border-color, var(--color-border));
-    border-radius: var(--splitter-radius, var(--radius-md));
-    background-color: var(--splitter-bg, var(--color-card));
-    color: var(--splitter-color, var(--color-foreground));
-    box-shadow: var(--splitter-shadow, var(--shadow-sm));
+    min-width: var(--moduix-splitter-min-width, 0);
+    min-height: var(--moduix-splitter-min-height, 0);
+    border: var(--moduix-splitter-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-splitter-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-splitter-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-splitter-bg, var(--moduix-color-card));
+    color: var(--moduix-splitter-color, var(--moduix-color-foreground));
+    box-shadow: var(--moduix-splitter-shadow, var(--moduix-shadow-sm));
     display: flex;
     position: relative;
     overflow: hidden;
@@ -28,15 +28,15 @@
 
   .qnjB1q_panel {
     box-sizing: border-box;
-    min-width: var(--splitter-panel-min-width, 0);
-    min-height: var(--splitter-panel-min-height, 12.5rem);
-    padding: var(--splitter-panel-padding, var(--spacing-4));
-    border: var(--splitter-panel-border-width, 0) solid
-      var(--splitter-panel-border-color, var(--color-border));
-    border-radius: var(--splitter-panel-radius, 0);
-    background-color: var(--splitter-panel-bg, var(--color-card));
-    color: var(--splitter-panel-color, var(--color-card-foreground));
-    box-shadow: var(--splitter-panel-shadow, none);
+    min-width: var(--moduix-splitter-panel-min-width, 0);
+    min-height: var(--moduix-splitter-panel-min-height, 12.5rem);
+    padding: var(--moduix-splitter-panel-padding, var(--moduix-spacing-4));
+    border: var(--moduix-splitter-panel-border-width, 0) solid
+      var(--moduix-splitter-panel-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-splitter-panel-radius, 0);
+    background-color: var(--moduix-splitter-panel-bg, var(--moduix-color-card));
+    color: var(--moduix-splitter-panel-color, var(--moduix-color-card-foreground));
+    box-shadow: var(--moduix-splitter-panel-shadow, none);
     overflow: auto;
 
     &[data-dragging] {
@@ -45,20 +45,20 @@
   }
 
   .qnjB1q_root[data-orientation="vertical"] > .qnjB1q_panel {
-    min-height: var(--splitter-panel-min-height-vertical, 0);
+    min-height: var(--moduix-splitter-panel-min-height-vertical, 0);
   }
 
   .qnjB1q_resizeTrigger {
     z-index: 1;
     box-sizing: border-box;
-    flex: 0 0 var(--splitter-resize-trigger-line-size, 1px);
-    width: var(--splitter-resize-trigger-line-size, 1px);
-    min-width: var(--splitter-resize-trigger-line-size, 1px);
-    background-color: var(--splitter-resize-trigger-bg, transparent);
+    flex: 0 0 var(--moduix-splitter-resize-trigger-line-size, 1px);
+    width: var(--moduix-splitter-resize-trigger-line-size, 1px);
+    min-width: var(--moduix-splitter-resize-trigger-line-size, 1px);
+    background-color: var(--moduix-splitter-resize-trigger-bg, transparent);
     appearance: none;
     cursor: col-resize;
     touch-action: none;
-    transition: opacity var(--splitter-transition, var(--transition-default));
+    transition: opacity var(--moduix-splitter-transition, var(--moduix-transition-default));
     border: 0;
     outline: 0;
     justify-content: center;
@@ -68,19 +68,19 @@
     position: relative;
 
     &:before {
-      width: var(--splitter-resize-trigger-line-thickness, .5px);
-      height: var(--splitter-resize-trigger-line-length, 100%);
-      border-radius: var(--splitter-resize-trigger-line-radius, var(--radius-full));
-      background-color: var(--splitter-resize-trigger-line-color, var(--color-border));
+      width: var(--moduix-splitter-resize-trigger-line-thickness, .5px);
+      height: var(--moduix-splitter-resize-trigger-line-length, 100%);
+      border-radius: var(--moduix-splitter-resize-trigger-line-radius, var(--moduix-radius-full));
+      background-color: var(--moduix-splitter-resize-trigger-line-color, var(--moduix-color-border));
       content: "";
-      transition: background-color var(--splitter-transition, var(--transition-default)),
-        opacity var(--splitter-transition, var(--transition-default));
+      transition: background-color var(--moduix-splitter-transition, var(--moduix-transition-default)),
+        opacity var(--moduix-splitter-transition, var(--moduix-transition-default));
       position: absolute;
     }
 
     &:after {
       z-index: 1;
-      width: var(--splitter-resize-trigger-size, var(--spacing-2-5));
+      width: var(--moduix-splitter-resize-trigger-size, var(--moduix-spacing-2-5));
       content: "";
       height: 100%;
       position: absolute;
@@ -89,41 +89,41 @@
     &[data-orientation="vertical"] {
       width: 100%;
       min-width: 0;
-      height: var(--splitter-resize-trigger-line-size, 1px);
-      min-height: var(--splitter-resize-trigger-line-size, 1px);
+      height: var(--moduix-splitter-resize-trigger-line-size, 1px);
+      min-height: var(--moduix-splitter-resize-trigger-line-size, 1px);
       cursor: row-resize;
 
       &:before {
-        width: var(--splitter-resize-trigger-line-length, 100%);
-        height: var(--splitter-resize-trigger-line-thickness, .5px);
+        width: var(--moduix-splitter-resize-trigger-line-length, 100%);
+        height: var(--moduix-splitter-resize-trigger-line-thickness, .5px);
       }
 
       &:after {
         width: 100%;
-        height: var(--splitter-resize-trigger-size, var(--spacing-2-5));
+        height: var(--moduix-splitter-resize-trigger-size, var(--moduix-spacing-2-5));
       }
     }
 
     &[data-dragging] {
       &:before {
-        background-color: var(--splitter-resize-trigger-line-color-dragging, color-mix(in oklab,
-            var(--splitter-resize-trigger-line-color, var(--color-border)) 72%,
-            var(--color-muted-foreground)));
+        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)));
       }
     }
 
     &[data-disabled] {
       cursor: default;
-      opacity: var(--splitter-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-splitter-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   @media (hover: hover) {
     .qnjB1q_resizeTrigger:hover:not(:disabled, [data-disabled]) {
       &:before {
-        background-color: var(--splitter-resize-trigger-line-color-hover, color-mix(in oklab,
-            var(--splitter-resize-trigger-line-color, var(--color-border)) 72%,
-            var(--color-muted-foreground)));
+        background-color: var(--moduix-splitter-resize-trigger-line-color-hover, color-mix(in oklab,
+            var(--moduix-splitter-resize-trigger-line-color, var(--moduix-color-border)) 72%,
+            var(--moduix-color-muted-foreground)));
       }
     }
   }
@@ -131,41 +131,42 @@
   .qnjB1q_resizeTriggerIndicator {
     z-index: 2;
     box-sizing: border-box;
-    width: var(--splitter-resize-trigger-indicator-width, var(--spacing-1-5));
-    height: var(--splitter-resize-trigger-indicator-height, var(--size-xs));
-    border: var(--splitter-resize-trigger-indicator-border-width, var(--border-width-sm)) solid
-      var(--splitter-resize-trigger-indicator-border-color, var(--color-border));
-    border-radius: var(--splitter-resize-trigger-indicator-radius, var(--radius-full));
-    background-color: var(--splitter-resize-trigger-indicator-bg, var(--color-background));
-    box-shadow: var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm));
+    width: var(--moduix-splitter-resize-trigger-indicator-width, var(--moduix-spacing-1-5));
+    height: var(--moduix-splitter-resize-trigger-indicator-height, var(--moduix-size-xs));
+    border: var(--moduix-splitter-resize-trigger-indicator-border-width, var(--moduix-border-width-sm))
+      solid var(--moduix-splitter-resize-trigger-indicator-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-splitter-resize-trigger-indicator-radius, var(--moduix-radius-full));
+    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(--splitter-transition, var(--transition-default)),
-      box-shadow var(--splitter-transition, var(--transition-default)),
-      transform var(--splitter-transition, var(--transition-default));
+    transition: 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;
     inset-block-start: 50%;
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
 
     &[data-orientation="vertical"] {
-      width: var(--splitter-resize-trigger-indicator-height, var(--size-xs));
-      height: var(--splitter-resize-trigger-indicator-width, var(--spacing-1-5));
+      width: var(--moduix-splitter-resize-trigger-indicator-height, var(--moduix-size-xs));
+      height: var(--moduix-splitter-resize-trigger-indicator-width, var(--moduix-spacing-1-5));
     }
   }
 
   .qnjB1q_resizeTrigger[data-dragging] .qnjB1q_resizeTriggerIndicator {
-    border-color: var(--splitter-resize-trigger-indicator-border-color-dragging, var(--splitter-resize-trigger-indicator-border-color, var(--color-border)));
-    background-color: var(--splitter-resize-trigger-indicator-bg-dragging, var(--splitter-resize-trigger-indicator-bg, var(--color-background)));
-    box-shadow: var(--splitter-resize-trigger-indicator-shadow-dragging, var(--shadow-md));
+    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) {
     .qnjB1q_resizeTrigger:hover:not(:disabled, [data-disabled]) .qnjB1q_resizeTriggerIndicator {
-      border-color: var(--splitter-resize-trigger-indicator-border-color-hover, color-mix(in oklab,
-          var(--splitter-resize-trigger-indicator-border-color, var(--color-border)) 72%,
-          var(--color-muted-foreground)));
-      box-shadow: var(--splitter-resize-trigger-indicator-shadow-hover, var(--shadow-md));
+      border-color: var(--moduix-splitter-resize-trigger-indicator-border-color-hover, color-mix(in oklab,
+          var(--moduix-splitter-resize-trigger-indicator-border-color, var(--moduix-color-border))
+            72%,
+          var(--moduix-color-muted-foreground)));
+      box-shadow: var(--moduix-splitter-resize-trigger-indicator-shadow-hover, var(--moduix-shadow-md));
     }
   }
 

package/dist/components/splitter/Splitter.js

@@ -6,8 +6,8 @@ import { jsx } from "react/jsx-runtime";
 import { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/react/splitter";
 //#region src/components/splitter/Splitter.tsx
 const rootStyle = {
-	width: "var(--splitter-width, 100%)",
-	height: "var(--splitter-height, 28rem)"
+	width: "var(--moduix-splitter-width, 100%)",
+	height: "var(--moduix-splitter-height, 28rem)"
 };
 const SplitterRoot = forwardRef(function SplitterRoot({ className, style, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Splitter.Root, {

package/dist/components/stack/Stack.css

@@ -1,13 +1,13 @@
-@layer ui.components {
+@layer moduix.components {
   .uJ8lyW_root {
-    flex: var(--stack-flex, initial);
-    flex-direction: var(--stack-direction-mobile, column);
+    flex: var(--moduix-stack-flex, initial);
+    flex-direction: var(--moduix-stack-direction-mobile, column);
     display: flex;
   }
 
   @media (width >= 640px) {
     .uJ8lyW_root {
-      flex-direction: var(--stack-direction-desktop, var(--stack-direction-mobile, column));
+      flex-direction: var(--moduix-stack-direction-desktop, var(--moduix-stack-direction-mobile, column));
     }
   }
 }

package/dist/components/stack/Stack.js

@@ -17,9 +17,9 @@ const StackRoot = forwardRef(function StackRoot({ asChild, children, className,
 		"data-slot": "stack-root",
 		className: clsx(Stack_module_default.root, normalizeClassName(className)),
 		style: {
-			"--stack-direction-desktop": desktopDirection,
-			"--stack-direction-mobile": mobileDirection,
-			"--stack-flex": fill == null ? void 0 : fill ? "1 1 0" : "initial",
+			"--moduix-stack-direction-desktop": desktopDirection,
+			"--moduix-stack-direction-mobile": mobileDirection,
+			"--moduix-stack-flex": fill == null ? void 0 : fill ? "1 1 0" : "initial",
 			gap,
 			alignItems: align,
 			justifyContent: justify,

package/dist/components/steps/Steps.css

@@ -1,20 +1,20 @@
-@layer ui.components {
+@layer moduix.components {
   ._1tbAxa_root {
     box-sizing: border-box;
     width: 100%;
-    max-width: var(--steps-max-width, 52rem);
+    max-width: var(--moduix-steps-max-width, 52rem);
     min-width: 0;
-    color: var(--steps-color, var(--color-foreground));
+    color: var(--moduix-steps-color, var(--moduix-color-foreground));
     display: flex;
 
     &[data-orientation="horizontal"] {
-      gap: var(--steps-root-gap, var(--spacing-4));
+      gap: var(--moduix-steps-root-gap, var(--moduix-spacing-4));
       flex-direction: column;
     }
 
     &[data-orientation="vertical"] {
       align-items: stretch;
-      gap: var(--steps-vertical-gap, var(--spacing-6));
+      gap: var(--moduix-steps-vertical-gap, var(--moduix-spacing-6));
       flex-direction: row;
     }
   }
@@ -34,7 +34,7 @@
 
     &[data-orientation="vertical"] {
       align-items: flex-start;
-      gap: var(--steps-gap, var(--spacing-4));
+      gap: var(--moduix-steps-gap, var(--moduix-spacing-4));
       flex-direction: column;
       flex: none;
       width: fit-content;
@@ -43,7 +43,7 @@
 
   ._1tbAxa_item {
     align-items: center;
-    gap: var(--steps-trigger-gap, var(--spacing-3));
+    gap: var(--moduix-steps-trigger-gap, var(--moduix-spacing-3));
     flex: 1 1 0;
     min-width: 0;
     display: flex;
@@ -58,7 +58,7 @@
     }
 
     &[data-orientation="vertical"] {
-      min-height: var(--steps-vertical-item-min-height, 4rem);
+      min-height: var(--moduix-steps-vertical-item-min-height, 4rem);
       flex: none;
       align-items: flex-start;
     }
@@ -67,8 +67,8 @@
   ._1tbAxa_trigger {
     z-index: 1;
     align-items: center;
-    gap: var(--steps-trigger-gap, var(--spacing-3));
-    border-radius: var(--steps-trigger-radius, var(--radius-md));
+    gap: var(--moduix-steps-trigger-gap, var(--moduix-spacing-3));
+    border-radius: var(--moduix-steps-trigger-radius, var(--moduix-radius-md));
     min-width: 0;
     color: inherit;
     font: inherit;
@@ -88,38 +88,38 @@
     }
 
     &:focus-visible ._1tbAxa_indicator {
-      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &[data-incomplete] {
-      color: var(--steps-trigger-color-incomplete, inherit);
+      color: var(--moduix-steps-trigger-color-incomplete, inherit);
     }
 
     @media (hover: hover) {
       &:hover ._1tbAxa_indicator[data-incomplete] {
-        border-color: var(--steps-indicator-border-color-hover, var(--steps-indicator-border-color-current, var(--color-foreground)));
-        color: var(--steps-indicator-color-hover, var(--steps-indicator-color-current, var(--color-foreground)));
+        border-color: var(--moduix-steps-indicator-border-color-hover, var(--moduix-steps-indicator-border-color-current, var(--moduix-color-foreground)));
+        color: var(--moduix-steps-indicator-color-hover, var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground)));
       }
     }
   }
 
   ._1tbAxa_indicator {
     box-sizing: border-box;
-    width: var(--steps-indicator-size, var(--spacing-8));
-    height: var(--steps-indicator-size, var(--spacing-8));
-    border: var(--steps-indicator-border-width, var(--border-width-sm)) solid
-      var(--steps-indicator-border-color, var(--color-border));
-    border-radius: var(--steps-indicator-radius, var(--radius-full));
-    background-color: var(--steps-indicator-bg, var(--color-background));
-    color: var(--steps-indicator-color, var(--color-muted-foreground));
-    font-size: var(--steps-indicator-font-size, var(--text-sm));
-    font-weight: var(--steps-indicator-font-weight, var(--weight-semibold));
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default),
-      color var(--transition-default),
-      opacity var(--transition-default);
+    width: var(--moduix-steps-indicator-size, var(--moduix-spacing-8));
+    height: var(--moduix-steps-indicator-size, var(--moduix-spacing-8));
+    border: var(--moduix-steps-indicator-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-steps-indicator-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-steps-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-steps-indicator-bg, var(--moduix-color-background));
+    color: var(--moduix-steps-indicator-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-steps-indicator-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-steps-indicator-font-weight, var(--moduix-weight-semibold));
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
     flex: none;
     justify-content: center;
     align-items: center;
@@ -127,41 +127,41 @@
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--steps-indicator-icon-size, var(--spacing-3-5));
-      height: var(--steps-indicator-icon-size, var(--spacing-3-5));
+      width: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
+      height: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
     }
 
     &[data-current] {
-      border-color: var(--steps-indicator-border-color-current, var(--steps-indicator-border-color-complete, var(--color-foreground)));
-      background-color: var(--steps-indicator-bg-current, var(--steps-indicator-bg, var(--color-background)));
-      color: var(--steps-indicator-color-current, var(--color-foreground));
+      border-color: var(--moduix-steps-indicator-border-color-current, var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground)));
+      background-color: var(--moduix-steps-indicator-bg-current, var(--moduix-steps-indicator-bg, var(--moduix-color-background)));
+      color: var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground));
     }
 
     &[data-complete] {
-      border-color: var(--steps-indicator-border-color-complete, var(--color-foreground));
-      background-color: var(--steps-indicator-bg-complete, var(--color-foreground));
-      color: var(--steps-indicator-color-complete, var(--color-background));
+      border-color: var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground));
+      background-color: var(--moduix-steps-indicator-bg-complete, var(--moduix-color-foreground));
+      color: var(--moduix-steps-indicator-color-complete, var(--moduix-color-background));
     }
   }
 
   ._1tbAxa_separator {
-    height: var(--steps-separator-thickness, var(--border-width-sm));
-    min-width: var(--steps-separator-min-width, var(--spacing-8));
-    margin-inline: var(--steps-separator-inset, var(--spacing-2));
-    background-color: var(--steps-separator-color, var(--color-border));
+    height: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
+    min-width: var(--moduix-steps-separator-min-width, var(--moduix-spacing-8));
+    margin-inline: var(--moduix-steps-separator-inset, var(--moduix-spacing-2));
+    background-color: var(--moduix-steps-separator-color, var(--moduix-color-border));
     pointer-events: none;
     flex: auto;
 
     &[data-complete] {
-      background-color: var(--steps-separator-color-complete, var(--color-foreground));
+      background-color: var(--moduix-steps-separator-color-complete, var(--moduix-color-foreground));
     }
 
     &[data-orientation="vertical"] {
-      top: calc(var(--steps-indicator-size, var(--spacing-8)) +
-          var(--steps-separator-inset, var(--spacing-2)));
-      bottom: calc(var(--steps-gap, var(--spacing-4)) * -1);
-      left: calc(var(--steps-indicator-size, var(--spacing-8)) / 2);
-      width: var(--steps-separator-thickness, var(--border-width-sm));
+      top: calc(var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) +
+          var(--moduix-steps-separator-inset, var(--moduix-spacing-2)));
+      bottom: calc(var(--moduix-steps-gap, var(--moduix-spacing-4)) * -1);
+      left: calc(var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) / 2);
+      width: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
       min-width: 0;
       height: auto;
       margin-inline: 0;
@@ -172,15 +172,15 @@
 
   ._1tbAxa_content, ._1tbAxa_completedContent {
     box-sizing: border-box;
-    min-height: var(--steps-content-min-height, 10rem);
+    min-height: var(--moduix-steps-content-min-height, 10rem);
     min-width: 0;
-    padding-block: var(--steps-content-padding-y, var(--spacing-4));
-    padding-inline: var(--steps-content-padding-x, var(--spacing-4));
-    border-radius: var(--steps-content-radius, var(--radius-md));
-    background-color: var(--steps-content-bg, var(--color-muted));
-    color: var(--steps-content-color, var(--color-foreground));
-    font-size: var(--steps-content-font-size, var(--text-sm));
-    line-height: var(--steps-content-line-height, var(--line-height-text-sm));
+    padding-block: var(--moduix-steps-content-padding-y, var(--moduix-spacing-4));
+    padding-inline: var(--moduix-steps-content-padding-x, var(--moduix-spacing-4));
+    border-radius: var(--moduix-steps-content-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-steps-content-bg, var(--moduix-color-muted));
+    color: var(--moduix-steps-content-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-steps-content-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-steps-content-line-height, var(--moduix-line-height-text-sm));
     outline: none;
     place-items: center;
     display: grid;
@@ -194,78 +194,78 @@
     }
 
     &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--steps-focus-ring-offset, var(--focus-ring-offset)) * -1);
+      outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset)) * -1);
     }
   }
 
   ._1tbAxa_completedContent {
-    color: var(--steps-completed-content-color, var(--color-foreground));
-    font-weight: var(--steps-completed-content-font-weight, var(--weight-medium));
+    color: var(--moduix-steps-completed-content-color, var(--moduix-color-foreground));
+    font-weight: var(--moduix-steps-completed-content-font-weight, var(--moduix-weight-medium));
     text-align: center;
   }
 
   ._1tbAxa_prevTrigger, ._1tbAxa_nextTrigger {
     box-sizing: border-box;
-    min-height: var(--steps-action-height, var(--size-sm));
+    min-height: var(--moduix-steps-action-height, var(--moduix-size-sm));
     justify-content: center;
     align-items: center;
-    gap: var(--steps-action-gap, var(--spacing-2));
-    border: var(--steps-action-border-width, var(--border-width-sm)) solid
-      var(--steps-action-border-color, var(--color-border));
-    border-radius: var(--steps-action-radius, var(--radius-md));
-    padding-block: var(--steps-action-padding-y, var(--spacing-1-5));
-    padding-inline: var(--steps-action-padding-x, var(--spacing-3));
-    background-color: var(--steps-action-bg, var(--color-background));
-    color: var(--steps-action-color, var(--color-foreground));
+    gap: var(--moduix-steps-action-gap, var(--moduix-spacing-2));
+    border: var(--moduix-steps-action-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-steps-action-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-steps-action-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-steps-action-padding-y, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-steps-action-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-steps-action-bg, var(--moduix-color-background));
+    color: var(--moduix-steps-action-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--steps-action-font-size, var(--text-sm));
-    line-height: var(--steps-action-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-steps-action-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-steps-action-line-height, var(--moduix-line-height-text-sm));
     cursor: pointer;
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default),
-      color var(--transition-default),
-      opacity var(--transition-default);
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
     outline: none;
     text-decoration: none;
     display: inline-flex;
 
     @media (hover: hover) {
       &:hover:not(:disabled):not([data-disabled]) {
-        background-color: var(--steps-action-bg-hover, var(--color-accent));
+        background-color: var(--moduix-steps-action-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &:is(:disabled, [data-disabled]) {
-      opacity: var(--steps-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-steps-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
 
   ._1tbAxa_nextTrigger {
-    border-color: var(--steps-next-action-border-color, var(--color-foreground));
-    background-color: var(--steps-next-action-bg, var(--color-foreground));
-    color: var(--steps-next-action-color, var(--color-background));
+    border-color: var(--moduix-steps-next-action-border-color, var(--moduix-color-foreground));
+    background-color: var(--moduix-steps-next-action-bg, var(--moduix-color-foreground));
+    color: var(--moduix-steps-next-action-color, var(--moduix-color-background));
 
     @media (hover: hover) {
       &:hover:not(:disabled):not([data-disabled]) {
-        background-color: var(--steps-next-action-bg-hover, var(--color-foreground));
+        background-color: var(--moduix-steps-next-action-bg-hover, var(--moduix-color-foreground));
       }
     }
   }
 
   ._1tbAxa_progress {
     width: 100%;
-    height: var(--steps-progress-height, var(--border-width-md));
-    border-radius: var(--steps-progress-radius, var(--radius-full));
-    background-color: var(--steps-progress-bg, var(--color-border));
+    height: var(--moduix-steps-progress-height, var(--moduix-border-width-md));
+    border-radius: var(--moduix-steps-progress-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-steps-progress-bg, var(--moduix-color-border));
     display: block;
     position: relative;
     overflow: hidden;
@@ -274,8 +274,8 @@
       content: "";
       width: var(--percent, 0%);
       border-radius: inherit;
-      background-color: var(--steps-progress-fill-bg, var(--color-foreground));
-      transition: width var(--transition-default);
+      background-color: var(--moduix-steps-progress-fill-bg, var(--moduix-color-foreground));
+      transition: width var(--moduix-transition-default);
       position: absolute;
       inset-block: 0;
       inset-inline-start: 0;

package/dist/components/swap/Swap.css

@@ -1,4 +1,4 @@
-@layer ui.components {
+@layer moduix.components {
   .jqWswG_root {
     vertical-align: middle;
     grid-template-areas: "jqWswG_swap";
@@ -14,11 +14,11 @@
     display: inline-flex;
 
     &[data-state="open"] {
-      animation: jqWswG_swap-enter var(--swap-transition, var(--transition-default));
+      animation: jqWswG_swap-enter var(--moduix-swap-transition, var(--moduix-transition-default));
     }
 
     &[data-state="closed"] {
-      animation: jqWswG_swap-exit var(--swap-transition, var(--transition-default));
+      animation: jqWswG_swap-exit var(--moduix-swap-transition, var(--moduix-transition-default));
     }
   }
 
@@ -31,15 +31,15 @@
 
   @keyframes jqWswG_swap-enter {
     from {
-      opacity: var(--swap-enter-starting-opacity, 0);
-      transform: scale(var(--swap-enter-starting-scale, .92));
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: scale(var(--moduix-swap-enter-starting-scale, .92));
     }
   }
 
   @keyframes jqWswG_swap-exit {
     to {
-      opacity: var(--swap-exit-ending-opacity, 0);
-      transform: scale(var(--swap-exit-ending-scale, .92));
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: scale(var(--moduix-swap-exit-ending-scale, .92));
     }
   }
 }