@moduix/react 2.0.0 → 2.2.0

package/dist/components/toggle-group/ToggleGroup.css

@@ -1,14 +1,14 @@
-@layer ui.components {
+@layer moduix.components {
   .un9nBW_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--toggle-group-gap, var(--border-width-sm));
-    padding: var(--toggle-group-padding, var(--border-width-md));
-    border: var(--toggle-group-border-width, var(--border-width-sm)) solid
-      var(--toggle-group-border-color, var(--color-border));
-    border-radius: var(--toggle-group-radius, var(--radius-lg));
-    background-color: var(--toggle-group-bg, var(--color-muted));
-    color: var(--toggle-group-color, var(--color-foreground));
+    gap: var(--moduix-toggle-group-gap, var(--moduix-border-width-sm));
+    padding: var(--moduix-toggle-group-padding, var(--moduix-border-width-md));
+    border: var(--moduix-toggle-group-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-toggle-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-toggle-group-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-color-muted));
+    color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
     display: inline-flex;
 
     &[data-orientation="vertical"] {
@@ -22,21 +22,21 @@
     }
 
     &[data-variant="ghost"] {
-      --toggle-group-bg: var(--toggle-group-ghost-bg, transparent);
-      --toggle-group-border-color: var(--toggle-group-ghost-border-color, transparent);
-      --toggle-group-padding: var(--toggle-group-ghost-padding, 0);
+      --moduix-toggle-group-bg: var(--moduix-toggle-group-ghost-bg, transparent);
+      --moduix-toggle-group-border-color: var(--moduix-toggle-group-ghost-border-color, transparent);
+      --moduix-toggle-group-padding: var(--moduix-toggle-group-ghost-padding, 0);
     }
 
     &[data-variant="outline"] {
-      --toggle-group-bg: var(--toggle-group-outline-bg, var(--color-background));
+      --moduix-toggle-group-bg: var(--moduix-toggle-group-outline-bg, var(--moduix-color-background));
     }
   }
 
   .un9nBW_item {
-    border-radius: var(--toggle-group-item-radius, var(--radius-md));
-    --toggle-default-color: var(--toggle-group-color, var(--color-foreground));
-    --toggle-ghost-color: var(--toggle-group-color, var(--color-foreground));
-    --toggle-outline-color: var(--toggle-group-color, var(--color-foreground));
+    border-radius: var(--moduix-toggle-group-item-radius, var(--moduix-radius-md));
+    --moduix-toggle-default-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    --moduix-toggle-ghost-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    --moduix-toggle-outline-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
     flex: none;
   }
 }

package/dist/components/tooltip/Tooltip.css

@@ -1,21 +1,24 @@
-@layer ui.components {
+@layer moduix.components {
   ._7levaW_trigger {
     box-sizing: border-box;
-    min-height: var(--tooltip-trigger-height, var(--size-lg));
-    padding: var(--tooltip-trigger-padding-y, .5rem) var(--tooltip-trigger-padding-x, .875rem);
-    border: var(--tooltip-trigger-border-width, var(--border-width-sm)) solid
-      var(--tooltip-trigger-border-color, var(--color-border));
-    border-radius: var(--tooltip-trigger-radius, var(--radius-md));
-    background-color: var(--tooltip-trigger-bg, var(--color-background));
-    color: var(--tooltip-trigger-color, var(--color-foreground));
+    min-height: var(--moduix-tooltip-trigger-height, var(--moduix-size-md));
+    padding: var(--moduix-tooltip-trigger-padding-y, var(--moduix-spacing-1))
+      var(--moduix-tooltip-trigger-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-tooltip-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tooltip-trigger-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-tooltip-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-tooltip-trigger-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--tooltip-trigger-font-size, var(--text-sm));
-    line-height: var(--tooltip-trigger-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-tooltip-trigger-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tooltip-trigger-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--tooltip-transition, var(--duration-fast)) var(--ease-in-out),
-      border-color var(--tooltip-transition, var(--duration-fast)) var(--ease-in-out),
-      color var(--tooltip-transition, var(--duration-fast)) var(--ease-in-out);
+    transition: background-color var(--moduix-tooltip-transition, var(--moduix-duration-fast))
+        var(--moduix-ease-in-out),
+      border-color var(--moduix-tooltip-transition, var(--moduix-duration-fast))
+        var(--moduix-ease-in-out),
+      color var(--moduix-tooltip-transition, var(--moduix-duration-fast)) var(--moduix-ease-in-out);
     outline: 0;
     justify-content: center;
     align-items: center;
@@ -24,62 +27,63 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--tooltip-trigger-bg-hover, var(--color-accent));
+        background-color: var(--moduix-tooltip-trigger-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:active, &[data-state="open"] {
-      background-color: var(--tooltip-trigger-bg-active, var(--tooltip-trigger-bg-hover, var(--color-accent)));
+      background-color: var(--moduix-tooltip-trigger-bg-active, var(--moduix-tooltip-trigger-bg-hover, var(--moduix-color-accent)));
     }
 
     &:focus-visible {
-      outline: var(--tooltip-focus-ring-width, var(--border-width-sm)) solid
-        var(--tooltip-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tooltip-focus-ring-offset, -1px);
+      outline: var(--moduix-tooltip-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-tooltip-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-tooltip-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
     }
 
     &[data-disabled], &[disabled] {
       pointer-events: none;
-      opacity: var(--tooltip-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tooltip-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   ._7levaW_positioner {
-    z-index: var(--z-index, var(--z-popup));
+    z-index: var(--z-index, var(--moduix-z-popup));
     max-width: var(--available-width);
     max-height: var(--available-height);
   }
 
   ._7levaW_content {
-    --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
-    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    --arrow-background: var(--moduix-tooltip-arrow-background, var(--moduix-tooltip-bg, var(--moduix-color-popover)));
+    --arrow-size: var(--moduix-tooltip-arrow-size, var(--moduix-spacing-2-5));
     box-sizing: border-box;
-    z-index: var(--tooltip-z-index, var(--z-popup));
-    max-width: min(var(--tooltip-max-width, 20rem), var(--available-width));
-    max-height: min(var(--tooltip-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--tooltip-padding-y, .25rem) var(--tooltip-padding-x, .5rem);
-    border: var(--tooltip-border-width, var(--border-width-sm)) solid
-      var(--tooltip-border-color, var(--color-border));
-    border-radius: var(--tooltip-radius, var(--radius-md));
-    background-color: var(--tooltip-bg, var(--color-popover));
-    color: var(--tooltip-color, var(--color-popover-foreground));
-    box-shadow: var(--tooltip-shadow, var(--shadow-lg));
-    font-size: var(--tooltip-font-size, var(--text-sm));
-    line-height: var(--tooltip-line-height, var(--line-height-text-sm));
+    z-index: var(--moduix-tooltip-z-index, var(--moduix-z-popup));
+    max-width: min(var(--moduix-tooltip-max-width, 20rem), var(--available-width));
+    max-height: min(var(--moduix-tooltip-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--moduix-tooltip-padding-y, var(--moduix-spacing-1))
+      var(--moduix-tooltip-padding-x, var(--moduix-spacing-2));
+    border: var(--moduix-tooltip-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tooltip-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-tooltip-bg, var(--moduix-color-popover));
+    color: var(--moduix-tooltip-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-tooltip-shadow, var(--moduix-shadow-lg));
+    font-size: var(--moduix-tooltip-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tooltip-line-height, var(--moduix-line-height-text-sm));
     text-align: center;
     transform-origin: var(--transform-origin);
     position: relative;
 
     &[data-state="open"] {
       animation: _7levaW_tooltip-content-in
-        var(--tooltip-transition, var(--popup-motion-duration, var(--duration-fast)))
-        var(--popup-motion-easing, ease-out);
+        var(--moduix-tooltip-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast)))
+        var(--moduix-popup-motion-easing, ease-out);
     }
 
     &[data-state="closed"] {
       animation: _7levaW_tooltip-content-out
-        var(--tooltip-transition, var(--popup-motion-duration, var(--duration-fast)))
-        var(--popup-motion-easing, ease-in);
+        var(--moduix-tooltip-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast)))
+        var(--moduix-popup-motion-easing, ease-in);
     }
 
     &[data-instant] {
@@ -88,23 +92,23 @@
   }
 
   ._7levaW_arrow {
-    --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
-    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    --arrow-background: var(--moduix-tooltip-arrow-background, var(--moduix-tooltip-bg, var(--moduix-color-popover)));
+    --arrow-size: var(--moduix-tooltip-arrow-size, var(--moduix-spacing-2-5));
   }
 
   ._7levaW_arrowTip {
-    border-top: var(--tooltip-border-width, var(--border-width-sm)) solid
-      var(--tooltip-arrow-stroke-color, var(--tooltip-border-color, var(--color-border)));
-    border-left: var(--tooltip-border-width, var(--border-width-sm)) solid
-      var(--tooltip-arrow-stroke-color, var(--tooltip-border-color, var(--color-border)));
+    border-top: var(--moduix-tooltip-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-arrow-stroke-color, var(--moduix-tooltip-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-tooltip-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tooltip-arrow-stroke-color, var(--moduix-tooltip-border-color, var(--moduix-color-border)));
   }
 
   @keyframes _7levaW_tooltip-content-in {
     from {
-      opacity: var(--tooltip-popup-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--tooltip-popup-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--tooltip-popup-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      transform: scale(var(--tooltip-popup-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
+      opacity: var(--moduix-tooltip-popup-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-tooltip-popup-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-tooltip-popup-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      transform: scale(var(--moduix-tooltip-popup-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
     }
 
     to {
@@ -120,10 +124,10 @@
     }
 
     to {
-      opacity: var(--tooltip-popup-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--tooltip-popup-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--tooltip-popup-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      transform: scale(var(--tooltip-popup-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
+      opacity: var(--moduix-tooltip-popup-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-tooltip-popup-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-tooltip-popup-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      transform: scale(var(--moduix-tooltip-popup-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
     }
   }
 }

package/dist/components/tour/Tour.css

@@ -1,32 +1,34 @@
-@layer ui.components {
+@layer moduix.components {
   ._5wc7ja_backdrop {
-    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
-    background-color: var(--tour-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
-    backdrop-filter: var(--backdrop-filter, blur(var(--tour-backdrop-blur, 4px)));
+    z-index: calc(var(--moduix-tour-z-index, var(--moduix-z-modal)) + var(--layer-index, 0));
+    background-color: var(--moduix-tour-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-tour-backdrop-blur, 4px)));
 
     &[data-state="open"] {
-      animation: _5wc7ja_tour-backdrop-in var(--tour-backdrop-transition, var(--transition-default));
+      animation: _5wc7ja_tour-backdrop-in
+        var(--moduix-tour-backdrop-transition, var(--moduix-transition-default));
     }
 
     &[data-state="closed"] {
-      animation: _5wc7ja_tour-backdrop-out var(--tour-backdrop-transition, var(--transition-default));
+      animation: _5wc7ja_tour-backdrop-out
+        var(--moduix-tour-backdrop-transition, var(--moduix-transition-default));
     }
   }
 
   ._5wc7ja_spotlight {
-    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--tour-layer, 0));
-    box-shadow: var(--tour-spotlight-shadow, 0 0 0 var(--tour-spotlight-ring-width, 2px) var(--color-ring));
+    z-index: calc(var(--moduix-tour-z-index, var(--moduix-z-modal)) + var(--tour-layer, 0));
+    box-shadow: var(--moduix-tour-spotlight-shadow, 0 0 0 var(--moduix-tour-spotlight-ring-width, 2px) var(--moduix-color-ring));
   }
 
   ._5wc7ja_positioner {
-    z-index: var(--z-index, var(--tour-z-index, var(--z-modal)));
+    z-index: var(--z-index, var(--moduix-tour-z-index, var(--moduix-z-modal)));
     max-width: var(--available-width);
     max-height: var(--available-height);
     outline: 0;
 
     &[data-type="dialog"] {
       overscroll-behavior: contain;
-      padding: var(--tour-positioner-padding, var(--spacing-4));
+      padding: var(--moduix-tour-positioner-padding, var(--moduix-spacing-4));
       place-items: center;
       display: grid;
       position: fixed;
@@ -35,8 +37,8 @@
     }
 
     &[data-type="floating"] {
-      z-index: var(--tour-z-index, var(--z-modal));
-      margin: var(--tour-floating-offset, var(--spacing-6));
+      z-index: var(--moduix-tour-z-index, var(--moduix-z-modal));
+      margin: var(--moduix-tour-floating-offset, var(--moduix-spacing-6));
       position: fixed;
 
       &[data-placement*="top"] {
@@ -58,22 +60,22 @@
   }
 
   ._5wc7ja_content {
-    --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, .625rem);
+    --arrow-background: var(--moduix-tour-arrow-background, var(--moduix-tour-bg, var(--moduix-color-popover)));
+    --arrow-size: var(--moduix-tour-arrow-size, var(--moduix-spacing-2-5));
     box-sizing: border-box;
-    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
-    gap: var(--tour-gap, var(--spacing-1));
-    width: min(var(--tour-width, 20rem), var(--available-width, 100vw));
-    max-width: min(var(--tour-max-width, calc(100vw - var(--spacing-8))),
+    z-index: calc(var(--moduix-tour-z-index, var(--moduix-z-modal)) + var(--layer-index, 0));
+    gap: var(--moduix-tour-gap, var(--moduix-spacing-1));
+    width: min(var(--moduix-tour-width, 20rem), var(--available-width, 100vw));
+    max-width: min(var(--moduix-tour-max-width, calc(100vw - var(--moduix-spacing-8))),
       var(--available-width, 100vw));
-    max-height: min(var(--tour-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--tour-padding, var(--spacing-5));
-    border: var(--tour-border-width, var(--border-width-sm)) solid
-      var(--tour-border-color, var(--color-border));
-    border-radius: var(--tour-radius, var(--radius-lg));
-    background-color: var(--tour-bg, var(--color-popover));
-    color: var(--tour-color, var(--color-popover-foreground));
-    box-shadow: var(--tour-shadow, var(--shadow-lg));
+    max-height: min(var(--moduix-tour-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--moduix-tour-padding, var(--moduix-spacing-5));
+    border: var(--moduix-tour-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tour-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tour-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-tour-bg, var(--moduix-color-popover));
+    color: var(--moduix-tour-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-tour-shadow, var(--moduix-shadow-lg));
     transform-origin: var(--transform-origin);
     outline: 0;
     flex-direction: column;
@@ -83,72 +85,72 @@
 
     &[data-state="open"] {
       animation: _5wc7ja_tour-content-in
-        var(--tour-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)))
+        var(--moduix-tour-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)))
         both;
     }
 
     &[data-state="closed"] {
       animation: _5wc7ja_tour-content-out
-        var(--tour-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)))
+        var(--moduix-tour-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)))
         both;
     }
 
     &[data-type="dialog"] {
-      width: min(var(--tour-dialog-width, 26rem),
-        var(--tour-max-width, calc(100vw - var(--spacing-8))));
+      width: min(var(--moduix-tour-dialog-width, 26rem),
+        var(--moduix-tour-max-width, calc(100vw - var(--moduix-spacing-8))));
     }
 
     &[data-type="floating"] {
-      width: min(var(--tour-floating-width, 22rem),
-        var(--tour-max-width, calc(100vw - var(--spacing-8))));
+      width: min(var(--moduix-tour-floating-width, 22rem),
+        var(--moduix-tour-max-width, calc(100vw - var(--moduix-spacing-8))));
     }
   }
 
   ._5wc7ja_arrow {
-    --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, .625rem);
+    --arrow-background: var(--moduix-tour-arrow-background, var(--moduix-tour-bg, var(--moduix-color-popover)));
+    --arrow-size: var(--moduix-tour-arrow-size, var(--moduix-spacing-2-5));
   }
 
   ._5wc7ja_arrowTip {
-    border-top: var(--tour-border-width, var(--border-width-sm)) solid
-      var(--tour-arrow-stroke-color, var(--tour-border-color, var(--color-border)));
-    border-left: var(--tour-border-width, var(--border-width-sm)) solid
-      var(--tour-arrow-stroke-color, var(--tour-border-color, var(--color-border)));
+    border-top: var(--moduix-tour-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tour-arrow-stroke-color, var(--moduix-tour-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-tour-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tour-arrow-stroke-color, var(--moduix-tour-border-color, var(--moduix-color-border)));
   }
 
   ._5wc7ja_title {
-    margin: var(--tour-title-margin, 0);
-    color: var(--tour-title-color, var(--tour-color, var(--color-popover-foreground)));
-    font-size: var(--tour-title-font-size, var(--text-md));
-    font-weight: var(--tour-title-font-weight, var(--weight-semibold));
-    line-height: var(--tour-title-line-height, var(--line-height-text-md));
-    padding-inline-end: var(--tour-title-padding-inline-end, var(--spacing-6));
+    margin: var(--moduix-tour-title-margin, 0);
+    color: var(--moduix-tour-title-color, var(--moduix-tour-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-tour-title-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-tour-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-tour-title-line-height, var(--moduix-line-height-text-md));
+    padding-inline-end: var(--moduix-tour-title-padding-inline-end, var(--moduix-spacing-6));
   }
 
   ._5wc7ja_description {
-    margin: var(--tour-description-margin, 0);
-    color: var(--tour-description-color, var(--color-muted-foreground));
-    font-size: var(--tour-description-font-size, var(--text-sm));
-    line-height: var(--tour-description-line-height, var(--line-height-text-sm));
+    margin: var(--moduix-tour-description-margin, 0);
+    color: var(--moduix-tour-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-tour-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tour-description-line-height, var(--moduix-line-height-text-sm));
   }
 
   ._5wc7ja_progressText {
-    margin-top: var(--tour-progress-text-margin-top, var(--spacing-2));
-    color: var(--tour-progress-text-color, var(--color-muted-foreground));
-    font-size: var(--tour-progress-text-font-size, var(--text-xs));
-    line-height: var(--tour-progress-text-line-height, var(--line-height-text-xs));
+    margin-top: var(--moduix-tour-progress-text-margin-top, var(--moduix-spacing-2));
+    color: var(--moduix-tour-progress-text-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-tour-progress-text-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-tour-progress-text-line-height, var(--moduix-line-height-text-xs));
     order: 1;
   }
 
   ._5wc7ja_closeTrigger {
     box-sizing: border-box;
-    width: var(--tour-close-trigger-size, 1.75rem);
-    height: var(--tour-close-trigger-size, 1.75rem);
-    border-radius: var(--tour-close-trigger-radius, var(--radius-md));
-    background: var(--tour-close-trigger-bg, transparent);
-    color: var(--tour-close-trigger-color, var(--color-muted-foreground));
+    width: var(--moduix-tour-close-trigger-size, var(--moduix-spacing-7));
+    height: var(--moduix-tour-close-trigger-size, var(--moduix-spacing-7));
+    border-radius: var(--moduix-tour-close-trigger-radius, var(--moduix-radius-md));
+    background: var(--moduix-tour-close-trigger-bg, transparent);
+    color: var(--moduix-tour-close-trigger-color, var(--moduix-color-muted-foreground));
     font: inherit;
     cursor: pointer;
     border: 0;
@@ -158,46 +160,47 @@
     line-height: 1;
     display: inline-flex;
     position: absolute;
-    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-4));
-    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
+    inset-block-start: var(--moduix-tour-close-trigger-offset, var(--moduix-spacing-4));
+    inset-inline-end: var(--moduix-tour-close-trigger-offset, var(--moduix-spacing-4));
 
     & :where(svg) {
-      width: var(--tour-close-trigger-icon-size, .75rem);
-      height: var(--tour-close-trigger-icon-size, .75rem);
+      width: var(--moduix-tour-close-trigger-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-tour-close-trigger-icon-size, var(--moduix-spacing-3));
     }
 
     @media (hover: hover) {
       &:hover {
-        background: var(--tour-close-trigger-bg-hover, var(--color-accent));
-        color: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
+        background: var(--moduix-tour-close-trigger-bg-hover, var(--moduix-color-accent));
+        color: var(--moduix-tour-close-trigger-color-hover, var(--moduix-tour-color, var(--moduix-color-popover-foreground)));
       }
     }
 
     &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
-        var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--moduix-tour-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-tour-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-tour-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+          -1);
     }
   }
 
   ._5wc7ja_closeIcon {
-    --close-button-size: var(--tour-close-trigger-size, 1.75rem);
-    --close-button-radius: var(--tour-close-trigger-radius, var(--radius-md));
-    --close-button-icon-size: var(--tour-close-trigger-icon-size, .75rem);
-    --close-button-bg: var(--tour-close-trigger-bg, transparent);
-    --close-button-bg-hover: var(--tour-close-trigger-bg-hover, var(--color-accent));
-    --close-button-color: var(--tour-close-trigger-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
-    --close-button-focus-ring-color: var(--tour-focus-ring-color, var(--color-ring));
+    --moduix-close-button-size: var(--moduix-tour-close-trigger-size, var(--moduix-spacing-7));
+    --moduix-close-button-radius: var(--moduix-tour-close-trigger-radius, var(--moduix-radius-md));
+    --moduix-close-button-icon-size: var(--moduix-tour-close-trigger-icon-size, var(--moduix-spacing-3));
+    --moduix-close-button-bg: var(--moduix-tour-close-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-tour-close-trigger-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-color: var(--moduix-tour-close-trigger-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-tour-close-trigger-color-hover, var(--moduix-tour-color, var(--moduix-color-popover-foreground)));
+    --moduix-close-button-focus-ring-color: var(--moduix-tour-focus-ring-color, var(--moduix-color-ring));
     position: absolute;
-    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-4));
-    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
+    inset-block-start: var(--moduix-tour-close-trigger-offset, var(--moduix-spacing-4));
+    inset-inline-end: var(--moduix-tour-close-trigger-offset, var(--moduix-spacing-4));
   }
 
   ._5wc7ja_control {
     justify-content: flex-end;
-    gap: var(--tour-control-gap, var(--spacing-2));
-    margin-top: var(--tour-control-margin-top, var(--spacing-3));
+    gap: var(--moduix-tour-control-gap, var(--moduix-spacing-2));
+    margin-top: var(--moduix-tour-control-margin-top, var(--moduix-spacing-3));
     flex-wrap: wrap;
     order: 2;
     display: flex;
@@ -205,87 +208,88 @@
 
   ._5wc7ja_actionTrigger {
     box-sizing: border-box;
-    min-height: var(--tour-action-height, 2rem);
+    min-height: var(--moduix-tour-action-height, var(--moduix-size-sm));
     justify-content: center;
     align-items: center;
-    gap: var(--tour-action-gap, var(--spacing-2));
-    padding-block: var(--tour-action-padding-y, .375rem);
-    padding-inline: var(--tour-action-padding-x, .75rem);
-    border: var(--tour-action-border-width, var(--border-width-sm)) solid
-      var(--tour-action-border-color, var(--color-border));
-    border-radius: var(--tour-action-radius, var(--radius-md));
-    background: var(--tour-action-bg, var(--color-background));
-    color: var(--tour-action-color, var(--color-foreground));
+    gap: var(--moduix-tour-action-gap, var(--moduix-spacing-2));
+    padding-block: var(--moduix-tour-action-padding-y, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-tour-action-padding-x, var(--moduix-spacing-3));
+    border: var(--moduix-tour-action-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tour-action-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tour-action-radius, var(--moduix-radius-md));
+    background: var(--moduix-tour-action-bg, var(--moduix-color-background));
+    color: var(--moduix-tour-action-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--tour-action-font-size, var(--text-sm));
-    font-weight: var(--tour-action-font-weight, var(--weight-medium));
-    line-height: var(--tour-action-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-tour-action-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-tour-action-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tour-action-line-height, var(--moduix-line-height-text-sm));
     white-space: nowrap;
     cursor: pointer;
-    transition: background-color var(--tour-action-transition, var(--transition-default)),
-      border-color var(--tour-action-transition, var(--transition-default)),
-      color var(--tour-action-transition, var(--transition-default));
+    transition: background-color var(--moduix-tour-action-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-tour-action-transition, var(--moduix-transition-default)),
+      color var(--moduix-tour-action-transition, var(--moduix-transition-default));
     text-decoration: none;
     display: inline-flex;
 
     &[data-type="next"], &[data-type="close"] {
-      border-color: var(--tour-action-primary-border-color, var(--color-primary));
-      background: var(--tour-action-primary-bg, var(--color-primary));
-      color: var(--tour-action-primary-color, var(--color-primary-foreground));
+      border-color: var(--moduix-tour-action-primary-border-color, var(--moduix-color-primary));
+      background: var(--moduix-tour-action-primary-bg, var(--moduix-color-primary));
+      color: var(--moduix-tour-action-primary-color, var(--moduix-color-primary-foreground));
     }
 
     @media (hover: hover) {
       &:hover:not([data-disabled], :disabled) {
-        background: var(--tour-action-bg-hover, var(--color-accent));
+        background: var(--moduix-tour-action-bg-hover, var(--moduix-color-accent));
       }
 
       &:is([data-type="next"], [data-type="close"]):hover:not([data-disabled], :disabled) {
-        border-color: var(--tour-action-primary-border-color-hover, color-mix(in oklab, var(--color-primary), black 12%));
-        background: var(--tour-action-primary-bg-hover, color-mix(in oklab, var(--color-primary), black 12%));
+        border-color: var(--moduix-tour-action-primary-border-color-hover, color-mix(in oklab, var(--moduix-color-primary), black 12%));
+        background: var(--moduix-tour-action-primary-bg-hover, color-mix(in oklab, var(--moduix-color-primary), black 12%));
       }
     }
 
     &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
-        var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--moduix-tour-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-tour-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-tour-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+          -1);
     }
 
     &[data-disabled], &:disabled {
       pointer-events: none;
-      opacity: var(--tour-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tour-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   @keyframes _5wc7ja_tour-backdrop-in {
     from {
-      opacity: var(--tour-backdrop-starting-opacity, 0);
-      backdrop-filter: var(--tour-backdrop-starting-blur, none);
+      opacity: var(--moduix-tour-backdrop-starting-opacity, 0);
+      backdrop-filter: var(--moduix-tour-backdrop-starting-blur, none);
     }
   }
 
   @keyframes _5wc7ja_tour-backdrop-out {
     to {
-      opacity: var(--tour-backdrop-ending-opacity, 0);
-      backdrop-filter: var(--tour-backdrop-ending-blur, none);
+      opacity: var(--moduix-tour-backdrop-ending-opacity, 0);
+      backdrop-filter: var(--moduix-tour-backdrop-ending-blur, none);
     }
   }
 
   @keyframes _5wc7ja_tour-content-in {
     from {
-      opacity: var(--tour-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--tour-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--tour-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      scale: var(--tour-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
+      opacity: var(--moduix-tour-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-tour-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-tour-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-tour-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
     }
   }
 
   @keyframes _5wc7ja_tour-content-out {
     to {
-      opacity: var(--tour-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--tour-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--tour-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      scale: var(--tour-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
+      opacity: var(--moduix-tour-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-tour-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-tour-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-tour-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
 }