@moduix/react 2.0.0 → 2.2.0

package/dist/components/alert/Alert.css

@@ -1,18 +1,18 @@
-@layer ui.components {
+@layer moduix.components {
   .ZXk2dW_root {
     box-sizing: border-box;
     align-items: start;
-    row-gap: var(--alert-content-gap, var(--spacing-1));
-    column-gap: var(--alert-gap, var(--spacing-3));
-    border: var(--alert-border-width, var(--border-width-sm)) solid
-      var(--alert-border-color, var(--alert-border-color-default, var(--color-border)));
-    border-radius: var(--alert-radius, var(--radius-lg));
+    row-gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
+    column-gap: var(--moduix-alert-gap, var(--moduix-spacing-3));
+    border: var(--moduix-alert-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-alert-border-color, var(--moduix-alert-border-color-default, var(--moduix-color-border)));
+    border-radius: var(--moduix-alert-radius, var(--moduix-radius-lg));
     width: 100%;
     min-width: 0;
-    padding: var(--alert-padding, var(--spacing-3));
-    background-color: var(--alert-bg, var(--alert-bg-default, var(--color-card)));
-    color: var(--alert-color, var(--alert-color-default, var(--color-card-foreground)));
-    box-shadow: var(--alert-shadow, none);
+    padding: var(--moduix-alert-padding, var(--moduix-spacing-3));
+    background-color: var(--moduix-alert-bg, var(--moduix-alert-bg-default, var(--moduix-color-card)));
+    color: var(--moduix-alert-color, var(--moduix-alert-color-default, var(--moduix-color-card-foreground)));
+    box-shadow: var(--moduix-alert-shadow, none);
     grid-template-columns: auto minmax(0, 1fr);
     display: grid;
 
@@ -21,38 +21,54 @@
     }
 
     &[data-status="neutral"] {
-      --alert-bg-default: var(--color-card);
-      --alert-border-color-default: var(--color-border);
-      --alert-color-default: var(--color-card-foreground);
-      --alert-indicator-color-default: var(--color-muted-foreground);
+      --moduix-alert-bg-default: var(--moduix-color-card);
+      --moduix-alert-border-color-default: var(--moduix-color-border);
+      --moduix-alert-color-default: var(--moduix-color-card-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-muted-foreground);
     }
 
     &[data-status="info"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-primary) 4%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-primary) 32%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-primary);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-primary) 4%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-primary) 32%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-primary);
     }
 
     &[data-status="success"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-success) 10%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-success) 34%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-success);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-success) 10%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-success) 34%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-success);
     }
 
     &[data-status="warning"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-warning) 13%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-warning) 38%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-warning);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-warning) 13%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-warning) 38%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-warning);
     }
 
     &[data-status="error"] {
-      --alert-bg-default: color-mix(in oklab, var(--color-destructive) 9%, var(--color-background));
-      --alert-border-color-default: color-mix(in oklab, var(--color-destructive) 35%, transparent);
-      --alert-color-default: var(--color-foreground);
-      --alert-indicator-color-default: var(--color-destructive);
+      --moduix-alert-bg-default: color-mix(in oklab,
+        var(--moduix-color-destructive) 9%,
+        var(--moduix-color-background));
+      --moduix-alert-border-color-default: color-mix(in oklab,
+        var(--moduix-color-destructive) 35%,
+        transparent);
+      --moduix-alert-color-default: var(--moduix-color-foreground);
+      --moduix-alert-indicator-color-default: var(--moduix-color-destructive);
     }
 
     &:not(:has( > [data-part="indicator"])) {
@@ -65,43 +81,43 @@
   }
 
   .ZXk2dW_indicator {
-    width: var(--alert-indicator-size, 1rem);
-    height: var(--alert-indicator-size, 1rem);
-    color: var(--alert-indicator-color, var(--alert-indicator-color-default, currentColor));
+    width: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
+    color: var(--moduix-alert-indicator-color, var(--moduix-alert-indicator-color-default, currentColor));
     justify-content: center;
     align-items: center;
-    margin-block-start: var(--alert-indicator-offset, .125rem);
+    margin-block-start: var(--moduix-alert-indicator-offset, var(--moduix-spacing-0-5));
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--alert-indicator-size, 1rem);
-      height: var(--alert-indicator-size, 1rem);
+      width: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
+      height: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
       pointer-events: none;
       flex-shrink: 0;
     }
   }
 
   .ZXk2dW_content {
-    gap: var(--alert-content-gap, var(--spacing-1));
+    gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
     min-width: 0;
     display: grid;
   }
 
   .ZXk2dW_title {
     min-width: 0;
-    color: var(--alert-title-color, var(--alert-color, var(--alert-color-default)));
-    font-size: var(--alert-title-font-size, var(--text-sm));
-    font-weight: var(--alert-title-font-weight, var(--weight-semibold));
-    line-height: var(--alert-title-line-height, var(--line-height-text-sm));
+    color: var(--moduix-alert-title-color, var(--moduix-alert-color, var(--moduix-alert-color-default)));
+    font-size: var(--moduix-alert-title-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-alert-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-alert-title-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
     margin: 0;
   }
 
   .ZXk2dW_description {
     min-width: 0;
-    color: var(--alert-description-color, var(--color-muted-foreground));
-    font-size: var(--alert-description-font-size, var(--text-sm));
-    line-height: var(--alert-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-alert-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-alert-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-alert-description-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
 
     & > :first-child {
@@ -114,9 +130,9 @@
   }
 
   .ZXk2dW_actions {
-    gap: var(--alert-actions-gap, var(--spacing-2));
+    gap: var(--moduix-alert-actions-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
-    margin-block-start: var(--alert-actions-margin-top, var(--spacing-2));
+    margin-block-start: var(--moduix-alert-actions-margin-top, var(--moduix-spacing-2));
     display: flex;
   }
 }

package/dist/components/angle-slider/AngleSlider.css

@@ -1,38 +1,38 @@
-@layer ui.components {
+@layer moduix.components {
   .vn7zXa_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--angle-slider-gap, .75rem);
+    gap: var(--moduix-angle-slider-gap, var(--moduix-spacing-3));
     min-width: 0;
-    color: var(--angle-slider-color, var(--color-foreground));
+    color: var(--moduix-angle-slider-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--angle-slider-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-angle-slider-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .vn7zXa_label {
-    color: var(--angle-slider-label-color, var(--angle-slider-color, var(--color-foreground)));
-    font-size: var(--angle-slider-label-font-size, var(--text-sm));
-    font-weight: var(--angle-slider-label-font-weight, var(--weight-medium));
-    line-height: var(--angle-slider-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-angle-slider-label-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-angle-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-angle-slider-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-angle-slider-label-line-height, var(--moduix-line-height-text-sm));
     text-align: center;
   }
 
   .vn7zXa_control {
-    --_angle-slider-control-border-color: var(--angle-slider-control-border-color, var(--color-border));
-    --_angle-slider-track-border-color: var(--angle-slider-track-border-color, var(--color-border));
+    --_angle-slider-control-border-color: var(--moduix-angle-slider-control-border-color, var(--moduix-color-border));
+    --_angle-slider-track-border-color: var(--moduix-angle-slider-track-border-color, var(--moduix-color-border));
     box-sizing: border-box;
-    width: var(--angle-slider-size, 8rem);
+    width: var(--moduix-angle-slider-size, 8rem);
     aspect-ratio: 1;
-    border-radius: var(--angle-slider-radius, var(--radius-full));
-    background: var(--angle-slider-track-bg, var(--color-muted));
+    border-radius: var(--moduix-angle-slider-radius, var(--moduix-radius-full));
+    background: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
     min-width: 0;
-    box-shadow: inset 0 0 0 var(--angle-slider-track-border-width, var(--border-width-sm))
+    box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
         var(--_angle-slider-track-border-color),
-      var(--angle-slider-shadow, none);
+      var(--moduix-angle-slider-shadow, none);
     cursor: pointer;
     user-select: none;
     outline: 0;
@@ -43,10 +43,11 @@
 
     &:after {
       z-index: 1;
-      inset: var(--angle-slider-ring-thickness, .875rem);
+      inset: var(--moduix-angle-slider-ring-thickness, .875rem);
       border-radius: inherit;
-      background: var(--angle-slider-control-bg, var(--color-background));
-      box-shadow: inset 0 0 0 var(--angle-slider-control-border-width, var(--border-width-sm))
+      background: var(--moduix-angle-slider-control-bg, var(--moduix-color-background));
+      box-shadow: inset 0 0 0
+        var(--moduix-angle-slider-control-border-width, var(--moduix-border-width-sm))
         var(--_angle-slider-control-border-color);
       content: "";
       position: absolute;
@@ -54,25 +55,25 @@
 
     &:before {
       z-index: 1;
-      width: var(--angle-slider-center-dot-size, .375rem);
-      height: var(--angle-slider-center-dot-size, .375rem);
+      width: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
+      height: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
       border-radius: inherit;
-      background: var(--angle-slider-center-dot-color, var(--angle-slider-color, var(--color-foreground)));
+      background: var(--moduix-angle-slider-center-dot-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
       content: "";
       position: absolute;
     }
 
     &:has(.vn7zXa_thumb:focus-visible) {
-      box-shadow: inset 0 0 0 var(--angle-slider-track-border-width, var(--border-width-sm))
+      box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
           var(--_angle-slider-track-border-color),
-        0 0 0 var(--angle-slider-focus-ring-width, .1875rem)
-          var(--angle-slider-focus-ring-color, var(--color-ring)),
-        var(--angle-slider-shadow, none);
+        0 0 0 var(--moduix-angle-slider-focus-ring-width, .1875rem)
+          var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-angle-slider-shadow, none);
     }
 
     &[data-invalid] {
-      --_angle-slider-control-border-color: var(--angle-slider-invalid-color, var(--color-destructive));
-      --_angle-slider-track-border-color: var(--angle-slider-invalid-color, var(--color-destructive));
+      --_angle-slider-control-border-color: var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive));
+      --_angle-slider-track-border-color: var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive));
     }
 
     &:is([data-disabled], [data-readonly]) {
@@ -83,26 +84,26 @@
   .vn7zXa_thumb {
     top: 0;
     bottom: 0;
-    left: calc(50% - var(--angle-slider-thumb-line-width, .1875rem) / 2);
+    left: calc(50% - var(--moduix-angle-slider-thumb-line-width, .1875rem) / 2);
     z-index: 2;
-    width: var(--angle-slider-thumb-line-width, .1875rem);
+    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
     outline: 0;
     position: absolute;
 
     &:before {
-      top: var(--angle-slider-ring-thickness, .875rem);
+      top: var(--moduix-angle-slider-ring-thickness, .875rem);
       box-sizing: border-box;
-      width: var(--angle-slider-thumb-size, 1rem);
-      height: var(--angle-slider-thumb-size, 1rem);
-      border: var(--angle-slider-thumb-border-width, var(--border-width-sm)) solid
-        var(--angle-slider-thumb-border-color, var(--color-border));
-      border-radius: var(--angle-slider-thumb-radius, var(--radius-full));
-      background: var(--angle-slider-thumb-bg, var(--angle-slider-indicator-bg, var(--color-primary)));
-      box-shadow: var(--angle-slider-thumb-shadow, var(--shadow-sm));
-      transition: border-color var(--angle-slider-transition, var(--transition-default)),
-        box-shadow var(--angle-slider-transition, var(--transition-default)),
-        background-color var(--angle-slider-transition, var(--transition-default)),
-        transform var(--angle-slider-transition, var(--transition-default));
+      width: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
+      height: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
+      border: var(--moduix-angle-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-angle-slider-thumb-border-color, var(--moduix-color-border));
+      border-radius: var(--moduix-angle-slider-thumb-radius, var(--moduix-radius-full));
+      background: var(--moduix-angle-slider-thumb-bg, var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)));
+      box-shadow: var(--moduix-angle-slider-thumb-shadow, var(--moduix-shadow-sm));
+      transition: border-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
+        box-shadow var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
+        background-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
+        transform var(--moduix-angle-slider-transition, var(--moduix-transition-default));
       content: "";
       position: absolute;
       left: 50%;
@@ -110,14 +111,14 @@
     }
 
     &:after {
-      top: calc(var(--angle-slider-ring-thickness, .875rem) + var(--angle-slider-thumb-size, 1rem) +
-          .25rem);
-      width: var(--angle-slider-thumb-line-width, .1875rem);
-      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) - var(--angle-slider-thumb-size, 1rem) -
-          .375rem);
-      border-radius: var(--radius-full);
+      top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) +
+          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
+      width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
+      height: calc(50% - var(--moduix-angle-slider-ring-thickness, .875rem) -
+          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) - var(--moduix-spacing-1-5));
+      border-radius: var(--moduix-radius-full);
       background: linear-gradient(to bottom,
-        var(--angle-slider-indicator-bg, var(--color-primary)),
+        var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)),
         transparent);
       content: "";
       position: absolute;
@@ -126,9 +127,9 @@
     }
 
     &:focus-visible:before {
-      border-color: var(--angle-slider-focus-ring-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--border-width-sm)
-        var(--angle-slider-focus-ring-color, var(--color-ring));
+      border-color: var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
+      box-shadow: 0 0 0 var(--moduix-border-width-sm)
+        var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:active:not([data-disabled], [data-readonly]):before {
@@ -136,12 +137,12 @@
     }
 
     &[data-invalid]:before {
-      border-color: var(--angle-slider-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive));
     }
 
     &[data-invalid]:after {
       background: linear-gradient(to bottom,
-        var(--angle-slider-invalid-color, var(--color-destructive)),
+        var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)),
         transparent);
     }
 
@@ -162,11 +163,11 @@
     inset: 0;
 
     &:before {
-      top: calc(var(--angle-slider-ring-thickness, .875rem) + .125rem);
-      width: var(--angle-slider-marker-width, .125rem);
-      height: var(--angle-slider-marker-height, .625rem);
-      border-radius: var(--radius-full);
-      background: var(--angle-slider-marker-color, var(--color-muted-foreground));
+      top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) + .125rem);
+      width: var(--moduix-angle-slider-marker-width, .125rem);
+      height: var(--moduix-angle-slider-marker-height, .625rem);
+      border-radius: var(--moduix-radius-full);
+      background: var(--moduix-angle-slider-marker-color, var(--moduix-color-muted-foreground));
       content: "";
       position: absolute;
       left: 50%;
@@ -174,19 +175,19 @@
     }
 
     &[data-state="under-value"]:before {
-      background: var(--angle-slider-marker-active-color, var(--color-primary));
+      background: var(--moduix-angle-slider-marker-active-color, var(--moduix-color-primary));
     }
 
     &[data-state="at-value"]:before {
-      background: var(--angle-slider-marker-current-color, var(--color-foreground));
+      background: var(--moduix-angle-slider-marker-current-color, var(--moduix-color-foreground));
     }
   }
 
   .vn7zXa_valueText {
-    color: var(--angle-slider-value-text-color, var(--angle-slider-color, var(--color-foreground)));
-    font-size: var(--angle-slider-value-text-font-size, var(--text-sm));
-    font-weight: var(--angle-slider-value-text-font-weight, var(--weight-medium));
-    line-height: var(--angle-slider-value-text-line-height, var(--line-height-text-sm));
+    color: var(--moduix-angle-slider-value-text-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-angle-slider-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-angle-slider-value-text-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-angle-slider-value-text-line-height, var(--moduix-line-height-text-sm));
     text-align: center;
   }
 }

package/dist/components/aspect-ratio/AspectRatio.css

@@ -1,9 +1,9 @@
-@layer ui.components {
+@layer moduix.components {
   .iOVgxW_root {
     --aspect-ratio-value: 1;
     width: 100%;
     aspect-ratio: var(--aspect-ratio-value);
-    border-radius: var(--aspect-ratio-radius, var(--radius-md));
+    border-radius: var(--moduix-aspect-ratio-radius, var(--moduix-radius-md));
     position: relative;
     overflow: hidden;
 

package/dist/components/avatar/Avatar.css

@@ -1,14 +1,14 @@
-@layer ui.components {
+@layer moduix.components {
   .qCmyuq_root {
     box-sizing: border-box;
-    width: var(--avatar-size, var(--size-md));
-    height: var(--avatar-size, var(--size-md));
-    border-radius: var(--avatar-radius, var(--radius-full));
-    background-color: var(--avatar-bg, var(--color-muted));
-    color: var(--avatar-color, var(--color-foreground));
-    font-size: var(--avatar-font-size, var(--text-md));
-    font-weight: var(--avatar-font-weight, var(--weight-medium));
-    line-height: var(--avatar-line-height, var(--line-height-text-md));
+    width: var(--moduix-avatar-size, var(--moduix-size-md));
+    height: var(--moduix-avatar-size, var(--moduix-size-md));
+    border-radius: var(--moduix-avatar-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-avatar-bg, var(--moduix-color-muted));
+    color: var(--moduix-avatar-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-avatar-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-avatar-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-avatar-line-height, var(--moduix-line-height-text-md));
     user-select: none;
     vertical-align: middle;
     flex-shrink: 0;
@@ -19,33 +19,33 @@
     overflow: hidden;
 
     &:where([data-size="xs"]) {
-      --avatar-size: var(--size-xs);
-      --avatar-font-size: var(--text-xs);
-      --avatar-line-height: var(--line-height-text-xs);
+      --moduix-avatar-size: var(--moduix-size-xs);
+      --moduix-avatar-font-size: var(--moduix-text-xs);
+      --moduix-avatar-line-height: var(--moduix-line-height-text-xs);
     }
 
     &:where([data-size="sm"]) {
-      --avatar-size: var(--size-sm);
-      --avatar-font-size: var(--text-sm);
-      --avatar-line-height: var(--line-height-text-sm);
+      --moduix-avatar-size: var(--moduix-size-sm);
+      --moduix-avatar-font-size: var(--moduix-text-sm);
+      --moduix-avatar-line-height: var(--moduix-line-height-text-sm);
     }
 
     &:where([data-size="lg"]) {
-      --avatar-size: var(--size-lg);
-      --avatar-font-size: var(--text-lg);
-      --avatar-line-height: var(--line-height-text-lg);
+      --moduix-avatar-size: var(--moduix-size-lg);
+      --moduix-avatar-font-size: var(--moduix-text-lg);
+      --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
     }
 
     &:where([data-size="xl"]) {
-      --avatar-size: var(--size-xl);
-      --avatar-font-size: var(--text-lg);
-      --avatar-line-height: var(--line-height-text-lg);
+      --moduix-avatar-size: var(--moduix-size-xl);
+      --moduix-avatar-font-size: var(--moduix-text-lg);
+      --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
     }
   }
 
   .qCmyuq_image {
-    object-fit: var(--avatar-image-object-fit, cover);
-    object-position: var(--avatar-image-object-position, center);
+    object-fit: var(--moduix-avatar-image-object-fit, cover);
+    object-position: var(--moduix-avatar-image-object-position, center);
     border-radius: inherit;
     width: 100%;
     height: 100%;
@@ -59,9 +59,9 @@
   .qCmyuq_fallback {
     width: 100%;
     height: 100%;
-    padding: var(--avatar-fallback-padding, 0);
-    background-color: var(--avatar-fallback-bg, var(--avatar-bg, var(--color-muted)));
-    color: var(--avatar-fallback-color, inherit);
+    padding: var(--moduix-avatar-fallback-padding, 0);
+    background-color: var(--moduix-avatar-fallback-bg, var(--moduix-avatar-bg, var(--moduix-color-muted)));
+    color: var(--moduix-avatar-fallback-color, inherit);
     border-radius: inherit;
     justify-content: center;
     align-items: center;

package/dist/components/badge/Badge.css

@@ -1,30 +1,30 @@
-@layer ui.components {
+@layer moduix.components {
   .NXa69G_root {
     justify-content: center;
     align-items: center;
-    gap: var(--badge-gap, .375rem);
-    border: var(--badge-border-width, var(--border-width-sm)) solid
-      var(--badge-border-color, transparent);
-    border-radius: var(--badge-radius, var(--radius-full));
+    gap: var(--moduix-badge-gap, var(--moduix-spacing-1-5));
+    border: var(--moduix-badge-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-badge-border-color, transparent);
+    border-radius: var(--moduix-badge-radius, var(--moduix-radius-full));
     width: fit-content;
     min-width: 0;
     max-width: 100%;
-    padding-block: var(--badge-padding-y, 0);
-    padding-inline: var(--badge-padding-x, .625rem);
-    background-color: var(--badge-bg, var(--color-primary));
-    color: var(--badge-color, var(--color-primary-foreground));
-    font-size: var(--badge-font-size, var(--text-xs));
-    font-weight: var(--badge-font-weight, var(--weight-medium));
+    padding-block: var(--moduix-badge-padding-y, 0);
+    padding-inline: var(--moduix-badge-padding-x, var(--moduix-spacing-2-5));
+    background-color: var(--moduix-badge-bg, var(--moduix-color-primary));
+    color: var(--moduix-badge-color, var(--moduix-color-primary-foreground));
+    font-size: var(--moduix-badge-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-badge-font-weight, var(--moduix-weight-medium));
     font-variant-numeric: tabular-nums;
-    line-height: var(--badge-line-height, var(--line-height-text-xs));
-    min-height: var(--badge-height, 1.25rem);
+    line-height: var(--moduix-badge-line-height, var(--moduix-line-height-text-xs));
+    min-height: var(--moduix-badge-height, 1.25rem);
     user-select: none;
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
-    transition: color var(--transition-default),
-      background-color var(--transition-default),
-      border-color var(--transition-default);
+    transition: color var(--moduix-transition-default),
+      background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default);
     text-decoration: none;
     display: inline-flex;
     overflow: hidden;
@@ -33,8 +33,9 @@
       cursor: pointer;
 
       &:focus-visible {
-        outline: var(--border-width-md) solid var(--color-ring);
-        outline-offset: var(--spacing-1);
+        outline: var(--moduix-badge-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+          solid var(--moduix-badge-focus-ring-color, var(--moduix-color-ring));
+        outline-offset: var(--moduix-badge-focus-ring-offset, var(--moduix-focus-ring-offset));
       }
 
       &[data-variant="default"], &[data-variant="secondary"], &[data-variant="destructive"] {
@@ -45,8 +46,8 @@
 
       &[data-variant="outline"], &[data-variant="ghost"] {
         &:hover {
-          border-color: var(--badge-border-color, var(--color-primary));
-          color: var(--badge-color, var(--color-primary));
+          border-color: var(--moduix-badge-border-color, var(--moduix-color-primary));
+          color: var(--moduix-badge-color, var(--moduix-color-primary));
         }
       }
 
@@ -58,40 +59,40 @@
     }
 
     & > svg {
-      width: var(--badge-icon-size, .75rem);
-      height: var(--badge-icon-size, .75rem);
+      width: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
 
     &[data-variant="secondary"] {
-      background-color: var(--badge-bg, var(--color-secondary));
-      color: var(--badge-color, var(--color-secondary-foreground));
+      background-color: var(--moduix-badge-bg, var(--moduix-color-secondary));
+      color: var(--moduix-badge-color, var(--moduix-color-secondary-foreground));
     }
 
     &[data-variant="destructive"] {
-      background-color: var(--badge-bg, var(--color-destructive));
-      color: var(--badge-color, var(--color-primary-foreground));
+      background-color: var(--moduix-badge-bg, var(--moduix-color-destructive));
+      color: var(--moduix-badge-color, var(--moduix-color-destructive-foreground));
     }
 
     &[data-variant="outline"], &[data-variant="ghost"], &[data-variant="link"] {
-      background-color: var(--badge-bg, transparent);
+      background-color: var(--moduix-badge-bg, transparent);
     }
 
     &[data-variant="outline"], &[data-variant="ghost"] {
-      color: var(--badge-color, var(--color-foreground));
+      color: var(--moduix-badge-color, var(--moduix-color-foreground));
     }
 
     &[data-variant="outline"] {
-      border-color: var(--badge-border-color, var(--color-border));
+      border-color: var(--moduix-badge-border-color, var(--moduix-color-border));
     }
 
     &[data-variant="link"] {
       min-height: auto;
-      color: var(--badge-color, var(--color-primary));
+      color: var(--moduix-badge-color, var(--moduix-color-primary));
       text-decoration: underline;
       text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
-      text-underline-offset: .15em;
+      text-underline-offset: var(--moduix-badge-link-underline-offset, .15em);
       border-color: #0000;
       padding-inline: 0;
       text-decoration-thickness: from-font;
@@ -100,8 +101,8 @@
   }
 
   .NXa69G_dot {
-    width: var(--badge-dot-size, .375rem);
-    height: var(--badge-dot-size, .375rem);
+    width: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
+    height: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
     background-color: currentColor;
     border-radius: 50%;
     flex-shrink: 0;