@moduix/react 2.0.0 → 2.2.0

package/dist/components/qr-code/QrCode.css

@@ -1,11 +1,11 @@
-@layer ui.components {
+@layer moduix.components {
   .ZbLWjq_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--qr-code-gap, var(--spacing-3));
+    gap: var(--moduix-qr-code-gap, var(--moduix-spacing-3));
     width: fit-content;
-    max-width: var(--qr-code-max-width, 100%);
-    color: var(--qr-code-color, var(--color-foreground));
+    max-width: var(--moduix-qr-code-max-width, 100%);
+    color: var(--moduix-qr-code-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: inline-flex;
     position: relative;
@@ -13,11 +13,11 @@
 
   .ZbLWjq_frame {
     box-sizing: border-box;
-    width: min(var(--qr-code-size, 8rem), 100%);
+    width: min(var(--moduix-qr-code-size, 8rem), 100%);
     aspect-ratio: 1;
     height: auto;
     color: inherit;
-    fill: var(--qr-code-fill, currentColor);
+    fill: var(--moduix-qr-code-fill, currentColor);
     display: block;
   }
 
@@ -27,12 +27,12 @@
 
   .ZbLWjq_overlay {
     box-sizing: border-box;
-    width: var(--qr-code-overlay-size, 2.5rem);
-    height: var(--qr-code-overlay-size, 2.5rem);
-    padding: var(--qr-code-overlay-padding, var(--spacing-1));
-    border-radius: var(--qr-code-overlay-radius, var(--radius-sm));
-    background-color: var(--qr-code-overlay-bg, var(--color-background));
-    color: var(--qr-code-overlay-color, var(--color-foreground));
+    width: var(--moduix-qr-code-overlay-size, var(--moduix-size-lg));
+    height: var(--moduix-qr-code-overlay-size, var(--moduix-size-lg));
+    padding: var(--moduix-qr-code-overlay-padding, var(--moduix-spacing-1));
+    border-radius: var(--moduix-qr-code-overlay-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-qr-code-overlay-bg, var(--moduix-color-background));
+    color: var(--moduix-qr-code-overlay-color, var(--moduix-color-foreground));
     justify-content: center;
     align-items: center;
     display: inline-flex;
@@ -48,54 +48,58 @@
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--qr-code-download-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--qr-code-download-trigger-height, var(--button-size-md, var(--size-lg)));
-    padding-inline: var(--qr-code-download-trigger-padding-x, var(--button-padding-x-md, 1rem));
-    border: var(--qr-code-download-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
+    gap: var(--moduix-qr-code-download-trigger-gap, var(--moduix-button-content-gap, var(--moduix-spacing-2)));
+    min-height: var(--moduix-qr-code-download-trigger-height, var(--moduix-button-size-md, var(--moduix-size-md)));
+    padding-inline: var(--moduix-qr-code-download-trigger-padding-x, var(--moduix-button-padding-x-md, var(--moduix-spacing-4)));
+    border: var(--moduix-qr-code-download-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))
       solid
-      var(--qr-code-download-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
-    border-radius: var(--qr-code-download-trigger-radius, var(--button-radius, var(--radius-md)));
-    background-color: var(--qr-code-download-trigger-bg, var(--button-outline-bg, var(--color-background)));
-    color: var(--qr-code-download-trigger-color, var(--button-outline-color, var(--color-foreground)));
+      var(--moduix-qr-code-download-trigger-border-color, var(--moduix-button-outline-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-qr-code-download-trigger-radius, var(--moduix-button-radius, var(--moduix-radius-md)));
+    background-color: var(--moduix-qr-code-download-trigger-bg, var(--moduix-button-outline-bg, var(--moduix-color-background)));
+    color: var(--moduix-qr-code-download-trigger-color, var(--moduix-button-outline-color, var(--moduix-color-foreground)));
     appearance: none;
     font: inherit;
-    font-size: var(--qr-code-download-trigger-font-size, var(--button-font-size, var(--text-sm)));
-    font-weight: var(--qr-code-download-trigger-font-weight, var(--button-font-weight, var(--weight-medium)));
-    line-height: var(--qr-code-download-trigger-line-height, var(--button-line-height, var(--line-height-text-sm)));
+    font-size: var(--moduix-qr-code-download-trigger-font-size, var(--moduix-button-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-qr-code-download-trigger-font-weight, var(--moduix-button-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-qr-code-download-trigger-line-height, var(--moduix-button-line-height, var(--moduix-line-height-text-sm)));
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    transition: border-color var(--qr-code-transition, var(--button-transition, var(--transition-default))),
+    transition: border-color
+        var(--moduix-qr-code-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
       background-color
-        var(--qr-code-transition, var(--button-transition, var(--transition-default))),
-      color var(--qr-code-transition, var(--button-transition, var(--transition-default))),
-      opacity var(--qr-code-transition, var(--button-transition, var(--transition-default))),
-      box-shadow var(--qr-code-transition, var(--button-transition, var(--transition-default)));
+        var(--moduix-qr-code-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      color
+        var(--moduix-qr-code-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-qr-code-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      box-shadow
+        var(--moduix-qr-code-transition, var(--moduix-button-transition, var(--moduix-transition-default)));
     display: inline-flex;
   }
 
   .ZbLWjq_downloadTrigger :where(svg) {
-    width: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, 1rem));
-    height: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, 1rem));
+    width: var(--moduix-qr-code-download-trigger-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+    height: var(--moduix-qr-code-download-trigger-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
     flex-shrink: 0;
   }
 
   @media (hover: hover) {
     .ZbLWjq_downloadTrigger:hover:not(:disabled, [data-disabled]) {
-      background-color: var(--qr-code-download-trigger-bg-hover, var(--button-outline-bg-hover, var(--color-accent)));
+      background-color: var(--moduix-qr-code-download-trigger-bg-hover, var(--moduix-button-outline-bg-hover, var(--moduix-color-accent)));
     }
   }
 
   .ZbLWjq_downloadTrigger:focus-visible {
-    outline: var(--qr-code-download-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+    outline: var(--moduix-qr-code-download-trigger-focus-ring-width, var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md))))
       solid
-      var(--qr-code-download-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
-    outline-offset: calc(var(--qr-code-download-trigger-focus-ring-offset, var(--qr-code-download-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *
+      var(--moduix-qr-code-download-trigger-focus-ring-color, var(--moduix-button-focus-ring-color, var(--moduix-color-ring)));
+    outline-offset: calc(var(--moduix-qr-code-download-trigger-focus-ring-offset, var(--moduix-qr-code-download-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))) *
         -1);
   }
 
   .ZbLWjq_downloadTrigger:disabled, .ZbLWjq_downloadTrigger[data-disabled] {
     pointer-events: none;
-    opacity: var(--qr-code-disabled-opacity, var(--button-disabled-opacity, var(--opacity-disabled)));
+    opacity: var(--moduix-qr-code-disabled-opacity, var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled)));
   }
 }

package/dist/components/radio-group/RadioGroup.css

@@ -1,7 +1,7 @@
-@layer ui.components {
+@layer moduix.components {
   .ECSf4W_root {
-    gap: var(--radio-group-gap, var(--spacing-2));
-    color: var(--radio-group-color, var(--color-foreground));
+    gap: var(--moduix-radio-group-gap, var(--moduix-spacing-2));
+    color: var(--moduix-radio-group-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
     position: relative;
@@ -12,15 +12,15 @@
   }
 
   .ECSf4W_label {
-    color: var(--radio-group-label-color, var(--radio-group-color, var(--color-foreground)));
-    font-size: var(--radio-group-label-font-size, var(--text-sm));
-    font-weight: var(--radio-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--radio-group-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-radio-group-label-color, var(--moduix-radio-group-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-radio-group-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-radio-group-label-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-radio-group-label-line-height, var(--moduix-line-height-text-sm));
   }
 
   .ECSf4W_item {
     align-items: center;
-    gap: var(--radio-gap, var(--spacing-2));
+    gap: var(--moduix-radio-gap, var(--moduix-spacing-2));
     vertical-align: middle;
     cursor: pointer;
     width: fit-content;
@@ -28,7 +28,7 @@
 
     &[data-disabled] {
       cursor: default;
-      opacity: var(--radio-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-radio-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
@@ -38,17 +38,17 @@
     appearance: none;
     width: var(--_radio-size, 1.25rem);
     height: var(--_radio-size, 1.25rem);
-    border: var(--radio-border-width, var(--border-width-sm)) solid
-      var(--radio-border-color, var(--color-border));
-    border-radius: var(--radius-full);
-    background-color: var(--radio-bg, var(--color-background));
-    color: var(--radio-indicator-color, var(--color-primary-foreground));
+    border: var(--moduix-radio-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-radio-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-radio-bg, var(--moduix-color-background));
+    color: var(--moduix-radio-indicator-color, var(--moduix-color-primary-foreground));
     user-select: none;
-    transition: background-color var(--radio-transition, var(--transition-default)),
-      border-color var(--radio-transition, var(--transition-default)),
-      border-width var(--radio-transition, var(--transition-default)),
-      color var(--radio-transition, var(--transition-default)),
-      opacity var(--radio-transition, var(--transition-default));
+    transition: background-color var(--moduix-radio-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-radio-transition, var(--moduix-transition-default)),
+      border-width var(--moduix-radio-transition, var(--moduix-transition-default)),
+      color var(--moduix-radio-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-radio-transition, var(--moduix-transition-default));
     outline: 0;
     flex: none;
     justify-content: center;
@@ -60,21 +60,21 @@
     &:before {
       width: var(--_radio-indicator-size, .5rem);
       height: var(--_radio-indicator-size, .5rem);
-      border: var(--radio-indicator-border-width, 0) solid
-        var(--radio-indicator-border-color, currentColor);
-      border-radius: var(--radio-indicator-radius, var(--radius-full));
+      border: var(--moduix-radio-indicator-border-width, 0) solid
+        var(--moduix-radio-indicator-border-color, currentColor);
+      border-radius: var(--moduix-radio-indicator-radius, var(--moduix-radius-full));
       content: "";
       opacity: 0;
-      transition: opacity var(--radio-transition, var(--transition-default)),
-        transform var(--radio-transition, var(--transition-default));
+      transition: opacity var(--moduix-radio-transition, var(--moduix-transition-default)),
+        transform var(--moduix-radio-transition, var(--moduix-transition-default));
       background-color: currentColor;
       display: block;
       transform: scale(.6);
     }
 
     &[data-state="checked"] {
-      border-color: var(--radio-border-color-checked, var(--color-primary));
-      background-color: var(--radio-bg-checked, var(--color-primary));
+      border-color: var(--moduix-radio-border-color-checked, var(--moduix-color-primary));
+      background-color: var(--moduix-radio-bg-checked, var(--moduix-color-primary));
 
       &:before {
         opacity: 1;
@@ -83,14 +83,14 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--radio-focus-ring-width, var(--border-width-sm)) solid
-        var(--radio-focus-ring-color, var(--color-ring));
-      outline-offset: var(--radio-focus-ring-offset, var(--border-width-sm));
+      outline: var(--moduix-radio-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-radio-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-radio-focus-ring-offset, var(--moduix-border-width-sm));
     }
 
     @media (hover: hover) {
       &[data-state="unchecked"]:not([data-readonly], [data-disabled]):hover {
-        background-color: var(--radio-bg-hover, var(--color-accent));
+        background-color: var(--moduix-radio-bg-hover, var(--moduix-color-accent));
       }
     }
 
@@ -99,36 +99,36 @@
     }
 
     &[data-size="xs"] {
-      --_radio-size: var(--radio-size-xs, .875rem);
-      --_radio-indicator-size: var(--radio-indicator-size-xs, .25rem);
+      --_radio-size: var(--moduix-radio-size-xs, var(--moduix-spacing-3-5));
+      --_radio-indicator-size: var(--moduix-radio-indicator-size-xs, var(--moduix-spacing-1));
     }
 
     &[data-size="sm"] {
-      --_radio-size: var(--radio-size-sm, 1rem);
-      --_radio-indicator-size: var(--radio-indicator-size-sm, .375rem);
+      --_radio-size: var(--moduix-radio-size-sm, var(--moduix-spacing-4));
+      --_radio-indicator-size: var(--moduix-radio-indicator-size-sm, var(--moduix-spacing-1-5));
     }
 
     &[data-size="md"] {
-      --_radio-size: var(--radio-size-md, 1.25rem);
-      --_radio-indicator-size: var(--radio-indicator-size-md, .5rem);
+      --_radio-size: var(--moduix-radio-size-md, var(--moduix-spacing-5));
+      --_radio-indicator-size: var(--moduix-radio-indicator-size-md, var(--moduix-spacing-2));
     }
 
     &[data-size="lg"] {
-      --_radio-size: var(--radio-size-lg, 1.5rem);
-      --_radio-indicator-size: var(--radio-indicator-size-lg, .625rem);
+      --_radio-size: var(--moduix-radio-size-lg, var(--moduix-size-xs));
+      --_radio-indicator-size: var(--moduix-radio-indicator-size-lg, var(--moduix-spacing-2-5));
     }
 
     &[data-size="xl"] {
-      --_radio-size: var(--radio-size-xl, 1.75rem);
-      --_radio-indicator-size: var(--radio-indicator-size-xl, .75rem);
+      --_radio-size: var(--moduix-radio-size-xl, var(--moduix-spacing-7));
+      --_radio-indicator-size: var(--moduix-radio-indicator-size-xl, var(--moduix-spacing-3));
     }
   }
 
   .ECSf4W_itemText {
-    color: var(--radio-label-color, var(--color-foreground));
-    font-size: var(--radio-label-font-size, var(--text-sm));
-    font-weight: var(--radio-label-font-weight, var(--weight-medium));
-    line-height: var(--radio-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-radio-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-radio-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-radio-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-radio-label-line-height, var(--moduix-line-height-text-sm));
   }
 
   .ECSf4W_indicator {
@@ -136,12 +136,12 @@
     left: var(--left);
     width: var(--width);
     height: var(--height);
-    border-radius: var(--radio-indicator-radius, var(--radius-full));
-    background-color: var(--radio-bg-checked, var(--color-primary));
-    opacity: var(--radio-group-indicator-opacity, .12);
+    border-radius: var(--moduix-radio-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-radio-bg-checked, var(--moduix-color-primary));
+    opacity: var(--moduix-radio-group-indicator-opacity, .12);
     pointer-events: none;
     transition: var(--transition-property, translate)
-      var(--radio-transition, var(--transition-default));
+      var(--moduix-radio-transition, var(--moduix-transition-default));
     position: absolute;
   }
 }

package/dist/components/rating-group/RatingGroup.css

@@ -1,59 +1,59 @@
-@layer ui.components {
+@layer moduix.components {
   .Jh_n9a_root {
-    gap: var(--rating-group-root-gap, var(--spacing-1));
-    color: var(--rating-group-color, var(--color-muted-foreground));
+    gap: var(--moduix-rating-group-root-gap, var(--moduix-spacing-1));
+    color: var(--moduix-rating-group-color, var(--moduix-color-muted-foreground));
     flex-direction: column;
     display: inline-flex;
 
     &[data-size="xs"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-xs, .875rem);
+      --_rating-group-icon-size: var(--moduix-rating-group-icon-size-xs, var(--moduix-spacing-3-5));
     }
 
     &[data-size="sm"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-sm, 1rem);
+      --_rating-group-icon-size: var(--moduix-rating-group-icon-size-sm, var(--moduix-spacing-4));
     }
 
     &[data-size="md"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-md, 1.25rem);
+      --_rating-group-icon-size: var(--moduix-rating-group-icon-size-md, var(--moduix-spacing-5));
     }
 
     &[data-size="lg"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-lg, 1.5rem);
+      --_rating-group-icon-size: var(--moduix-rating-group-icon-size-lg, var(--moduix-spacing-6));
     }
 
     &[data-size="xl"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-xl, 1.75rem);
+      --_rating-group-icon-size: var(--moduix-rating-group-icon-size-xl, var(--moduix-spacing-7));
     }
   }
 
   .Jh_n9a_label {
-    color: var(--rating-group-label-color, var(--color-foreground));
-    font-size: var(--rating-group-label-font-size, var(--text-sm));
-    font-weight: var(--rating-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--rating-group-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-rating-group-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-rating-group-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-rating-group-label-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-rating-group-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
 
     &[data-disabled] {
-      opacity: var(--rating-group-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-rating-group-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .Jh_n9a_control {
     align-items: center;
-    gap: var(--rating-group-gap, var(--spacing-1));
+    gap: var(--moduix-rating-group-gap, var(--moduix-spacing-1));
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--rating-group-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-rating-group-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .Jh_n9a_item {
-    border-radius: var(--radius-sm);
+    border-radius: var(--moduix-radius-sm);
     color: inherit;
     cursor: pointer;
-    transition: color var(--rating-group-transition, var(--transition-default)),
-      opacity var(--rating-group-transition, var(--transition-default));
+    transition: color var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-rating-group-transition, var(--moduix-transition-default));
     background-color: #0000;
     border: 0;
     justify-content: center;
@@ -72,16 +72,16 @@
     }
 
     &:focus-visible {
-      outline: var(--rating-group-focus-ring-width, 0) solid
-        var(--rating-group-focus-ring-color, transparent);
-      outline-offset: var(--rating-group-focus-ring-offset, 0);
+      outline: var(--moduix-rating-group-focus-ring-width, 0) solid
+        var(--moduix-rating-group-focus-ring-color, transparent);
+      outline-offset: var(--moduix-rating-group-focus-ring-offset, 0);
     }
   }
 
   .Jh_n9a_itemIndicator {
-    width: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
-    height: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
-    color: var(--rating-group-active-color, var(--color-primary));
+    width: var(--_rating-group-icon-size, var(--moduix-rating-group-icon-size-md, var(--moduix-spacing-5)));
+    height: var(--_rating-group-icon-size, var(--moduix-rating-group-icon-size-md, var(--moduix-spacing-5)));
+    color: var(--moduix-rating-group-active-color, var(--moduix-color-primary));
     justify-content: center;
     align-items: center;
     display: inline-flex;
@@ -90,10 +90,10 @@
     & > svg {
       width: 100%;
       height: 100%;
-      transition: color var(--rating-group-transition, var(--transition-default)),
-        fill var(--rating-group-transition, var(--transition-default)),
-        stroke var(--rating-group-transition, var(--transition-default)),
-        clip-path var(--rating-group-transition, var(--transition-default));
+      transition: color var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+        fill var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+        stroke var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+        clip-path var(--moduix-rating-group-transition, var(--moduix-transition-default));
       flex: none;
     }
 
@@ -115,7 +115,7 @@
   }
 
   .Jh_n9a_iconBg {
-    color: var(--rating-group-color, var(--color-muted-foreground));
+    color: var(--moduix-rating-group-color, var(--moduix-color-muted-foreground));
     fill: #0000;
     stroke: currentColor;
     position: absolute;
@@ -123,7 +123,7 @@
   }
 
   .Jh_n9a_iconFg {
-    color: var(--rating-group-active-color, var(--color-primary));
+    color: var(--moduix-rating-group-active-color, var(--moduix-color-primary));
     fill: currentColor;
     stroke: currentColor;
     clip-path: inset(0);

package/dist/components/scroll-area/ScrollArea.css

@@ -1,28 +1,28 @@
-@layer ui.components {
+@layer moduix.components {
   .xqtLha_root {
     box-sizing: border-box;
-    width: var(--scroll-area-width, 100%);
-    height: var(--scroll-area-height, 100%);
+    width: var(--moduix-scroll-area-width, 100%);
+    height: var(--moduix-scroll-area-height, 100%);
     min-width: 0;
     min-height: 0;
-    color: var(--scroll-area-color, var(--color-foreground));
+    color: var(--moduix-scroll-area-color, var(--moduix-color-foreground));
     position: relative;
   }
 
   .xqtLha_viewport {
     box-sizing: border-box;
-    border-radius: var(--scroll-area-radius, var(--radius-md));
-    background-color: var(--scroll-area-bg, transparent);
+    border-radius: var(--moduix-scroll-area-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-scroll-area-bg, transparent);
     overscroll-behavior: contain;
     scrollbar-width: none;
     --_scroll-area-block-fade-mask: linear-gradient(to bottom,
       transparent 0,
       black
-        min(var(--scroll-area-fade-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+        min(var(--moduix-scroll-area-fade-start-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
           var(--scroll-area-overflow-y-start, 0px)),
       black
         calc(100% -
-            min(var(--scroll-area-fade-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+            min(var(--moduix-scroll-area-fade-end-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
               var(--scroll-area-overflow-y-end, 0px))),
       transparent 100%);
     outline: 0;
@@ -41,32 +41,32 @@
     }
 
     &:focus-visible {
-      outline: var(--scroll-area-focus-ring-width, var(--border-width-sm)) solid
-        var(--scroll-area-focus-ring-color, var(--color-ring));
-      outline-offset: var(--scroll-area-focus-ring-offset, -1px);
+      outline: var(--moduix-scroll-area-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-scroll-area-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-scroll-area-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
     }
   }
 
   .xqtLha_content {
     box-sizing: border-box;
-    padding: var(--scroll-area-content-padding, 0);
+    padding: var(--moduix-scroll-area-content-padding, 0);
     display: block;
   }
 
   .xqtLha_scrollbar {
-    --_scroll-area-scrollbar-margin: var(--scroll-area-scrollbar-margin, var(--spacing-1));
-    --_scroll-area-scrollbar-hit-area-size: var(--scroll-area-scrollbar-hit-area-size, var(--spacing-5));
+    --_scroll-area-scrollbar-margin: var(--moduix-scroll-area-scrollbar-margin, var(--moduix-spacing-1));
+    --_scroll-area-scrollbar-hit-area-size: var(--moduix-scroll-area-scrollbar-hit-area-size, var(--moduix-spacing-5));
     box-sizing: border-box;
-    padding: var(--scroll-area-scrollbar-padding, 0);
-    border-radius: var(--scroll-area-scrollbar-radius, var(--radius-md));
-    background-color: var(--scroll-area-scrollbar-bg, transparent);
-    opacity: var(--scroll-area-scrollbar-hidden-opacity, 0);
+    padding: var(--moduix-scroll-area-scrollbar-padding, 0);
+    border-radius: var(--moduix-scroll-area-scrollbar-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-scroll-area-scrollbar-bg, transparent);
+    opacity: var(--moduix-scroll-area-scrollbar-hidden-opacity, 0);
     pointer-events: none;
     user-select: none;
     touch-action: none;
-    transition: opacity var(--scroll-area-transition, var(--transition-default)),
-      width var(--scroll-area-thumb-hover-transition, var(--transition-fast)),
-      height var(--scroll-area-thumb-hover-transition, var(--transition-fast));
+    transition: opacity var(--moduix-scroll-area-transition, var(--moduix-transition-default)),
+      width var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast)),
+      height var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast));
     justify-content: center;
     display: flex;
     position: absolute;
@@ -80,7 +80,7 @@
       top: 0;
       inset-inline-end: 0;
       bottom: var(--corner-height, 0px);
-      width: var(--scroll-area-scrollbar-size, var(--spacing-1));
+      width: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
       margin-block: var(--_scroll-area-scrollbar-margin);
       margin-inline-end: var(--_scroll-area-scrollbar-margin);
 
@@ -96,15 +96,15 @@
       }
 
       &:hover, &[data-dragging] {
-        width: calc(var(--scroll-area-scrollbar-size, var(--spacing-1)) +
-            var(--scroll-area-thumb-hover-increase, 2px));
+        width: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
+            var(--moduix-scroll-area-thumb-hover-increase, 2px));
       }
     }
 
     &[data-orientation="horizontal"] {
       inset-inline-start: 0;
       inset-inline-end: var(--corner-width, 0px);
-      height: var(--scroll-area-scrollbar-size, var(--spacing-1));
+      height: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
       margin-inline: var(--_scroll-area-scrollbar-margin);
       flex-direction: column;
       margin-block-end: var(--_scroll-area-scrollbar-margin);
@@ -124,13 +124,13 @@
       }
 
       &:hover, &[data-dragging] {
-        height: calc(var(--scroll-area-scrollbar-size, var(--spacing-1)) +
-            var(--scroll-area-thumb-hover-increase, 2px));
+        height: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
+            var(--moduix-scroll-area-thumb-hover-increase, 2px));
       }
     }
 
     &[data-hover], &[data-scrolling] {
-      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
       pointer-events: auto;
     }
 
@@ -139,29 +139,29 @@
     }
 
     .xqtLha_root[data-variant="always"] & {
-      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
       pointer-events: auto;
     }
   }
 
   .xqtLha_thumb {
     box-sizing: border-box;
-    border-radius: var(--scroll-area-thumb-radius, var(--radius-full));
-    background-color: var(--scroll-area-thumb-bg, var(--color-border));
+    border-radius: var(--moduix-scroll-area-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-scroll-area-thumb-bg, var(--moduix-color-border));
 
     &[data-orientation="vertical"] {
       width: 100%;
-      min-height: var(--scroll-area-thumb-min-size, 1.5rem);
+      min-height: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
     }
 
     &[data-orientation="horizontal"] {
       height: 100%;
-      min-width: var(--scroll-area-thumb-min-size, 1.5rem);
+      min-width: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
     }
   }
 
   .xqtLha_corner {
     box-sizing: border-box;
-    background-color: var(--scroll-area-corner-bg, var(--scroll-area-scrollbar-bg, transparent));
+    background-color: var(--moduix-scroll-area-corner-bg, var(--moduix-scroll-area-scrollbar-bg, transparent));
   }
 }