@moduix/react 2.1.0 → 2.2.0

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, var(--spacing-3));
+    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, var(--spacing-1-5));
-      height: var(--angle-slider-center-dot-size, var(--spacing-1-5));
+      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, var(--spacing-4));
-      height: var(--angle-slider-thumb-size, var(--spacing-4));
-      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, var(--spacing-4)) + var(--spacing-1));
-      width: var(--angle-slider-thumb-line-width, .1875rem);
-      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) -
-          var(--angle-slider-thumb-size, var(--spacing-4)) - var(--spacing-1-5));
-      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, var(--spacing-1-5));
-    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, var(--spacing-2-5));
-    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,9 +33,9 @@
       cursor: pointer;
 
       &:focus-visible {
-        outline: var(--badge-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-          solid var(--badge-focus-ring-color, var(--color-ring));
-        outline-offset: var(--badge-focus-ring-offset, var(--focus-ring-offset));
+        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"] {
@@ -46,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));
         }
       }
 
@@ -59,40 +59,40 @@
     }
 
     & > svg {
-      width: var(--badge-icon-size, var(--spacing-3));
-      height: var(--badge-icon-size, var(--spacing-3));
+      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-destructive-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: var(--badge-link-underline-offset, .15em);
+      text-underline-offset: var(--moduix-badge-link-underline-offset, .15em);
       border-color: #0000;
       padding-inline: 0;
       text-decoration-thickness: from-font;
@@ -101,8 +101,8 @@
   }
 
   .NXa69G_dot {
-    width: var(--badge-dot-size, var(--spacing-1-5));
-    height: var(--badge-dot-size, var(--spacing-1-5));
+    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;

package/dist/components/bleed/Bleed.css

@@ -1,51 +1,51 @@
-@layer ui.components {
+@layer moduix.components {
   .m38JbW_root {
     box-sizing: border-box;
     margin: 0;
 
     &[data-inline="xs"] {
-      margin-inline: calc(var(--bleed-inline-xs, var(--spacing-1)) * -1);
+      margin-inline: calc(var(--moduix-bleed-inline-xs, var(--moduix-spacing-1)) * -1);
     }
 
     &[data-inline="sm"] {
-      margin-inline: calc(var(--bleed-inline-sm, var(--spacing-2)) * -1);
+      margin-inline: calc(var(--moduix-bleed-inline-sm, var(--moduix-spacing-2)) * -1);
     }
 
     &[data-inline="md"] {
-      margin-inline: calc(var(--bleed-inline-md, var(--spacing-3)) * -1);
+      margin-inline: calc(var(--moduix-bleed-inline-md, var(--moduix-spacing-3)) * -1);
     }
 
     &[data-inline="lg"] {
-      margin-inline: calc(var(--bleed-inline-lg, var(--spacing-4)) * -1);
+      margin-inline: calc(var(--moduix-bleed-inline-lg, var(--moduix-spacing-4)) * -1);
     }
 
     &[data-inline="xl"] {
-      margin-inline: calc(var(--bleed-inline-xl, var(--spacing-6)) * -1);
+      margin-inline: calc(var(--moduix-bleed-inline-xl, var(--moduix-spacing-6)) * -1);
     }
 
     &[data-inline="full"] {
-      inline-size: var(--bleed-inline-full-size, 100vw);
-      margin-inline: var(--bleed-inline-full, calc(50% - 50vw));
+      inline-size: var(--moduix-bleed-inline-full-size, 100vw);
+      margin-inline: var(--moduix-bleed-inline-full, calc(50% - 50vw));
     }
 
     &[data-block="xs"] {
-      margin-block: calc(var(--bleed-block-xs, var(--spacing-1)) * -1);
+      margin-block: calc(var(--moduix-bleed-block-xs, var(--moduix-spacing-1)) * -1);
     }
 
     &[data-block="sm"] {
-      margin-block: calc(var(--bleed-block-sm, var(--spacing-2)) * -1);
+      margin-block: calc(var(--moduix-bleed-block-sm, var(--moduix-spacing-2)) * -1);
     }
 
     &[data-block="md"] {
-      margin-block: calc(var(--bleed-block-md, var(--spacing-3)) * -1);
+      margin-block: calc(var(--moduix-bleed-block-md, var(--moduix-spacing-3)) * -1);
     }
 
     &[data-block="lg"] {
-      margin-block: calc(var(--bleed-block-lg, var(--spacing-4)) * -1);
+      margin-block: calc(var(--moduix-bleed-block-lg, var(--moduix-spacing-4)) * -1);
     }
 
     &[data-block="xl"] {
-      margin-block: calc(var(--bleed-block-xl, var(--spacing-6)) * -1);
+      margin-block: calc(var(--moduix-bleed-block-xl, var(--moduix-spacing-6)) * -1);
     }
   }
 }

package/dist/components/breadcrumbs/Breadcrumbs.css

@@ -1,14 +1,14 @@
-@layer ui.components {
+@layer moduix.components {
   .WoRWWa_root[data-scope="breadcrumbs"][data-part="root"] {
-    max-width: var(--breadcrumbs-max-width, 100%);
-    color: var(--breadcrumbs-color, var(--color-muted-foreground));
-    font-size: var(--breadcrumbs-font-size, var(--text-sm));
-    line-height: var(--breadcrumbs-line-height, var(--line-height-text-sm));
+    max-width: var(--moduix-breadcrumbs-max-width, 100%);
+    color: var(--moduix-breadcrumbs-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-breadcrumbs-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-breadcrumbs-line-height, var(--moduix-line-height-text-sm));
   }
 
   .WoRWWa_list[data-scope="breadcrumbs"][data-part="list"] {
     align-items: center;
-    gap: var(--breadcrumbs-gap, var(--spacing-1));
+    gap: var(--moduix-breadcrumbs-gap, var(--moduix-spacing-1));
     white-space: nowrap;
     min-width: 0;
     margin: 0;
@@ -17,7 +17,7 @@
     display: flex;
 
     & > .WoRWWa_item:last-child {
-      max-width: var(--breadcrumbs-item-max-width, 16rem);
+      max-width: var(--moduix-breadcrumbs-item-max-width, 16rem);
       flex: auto;
     }
   }
@@ -32,7 +32,7 @@
   .WoRWWa_link[data-scope="breadcrumbs"][data-part="link"], .WoRWWa_page[data-scope="breadcrumbs"][data-part="page"] {
     min-width: 0;
     max-width: 100%;
-    padding-inline: var(--breadcrumbs-item-padding-x, var(--spacing-1));
+    padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
     white-space: nowrap;
     display: block;
   }
@@ -43,35 +43,35 @@
   }
 
   .WoRWWa_link[data-scope="breadcrumbs"][data-part="link"] {
-    color: var(--breadcrumbs-link-color, var(--color-muted-foreground));
-    text-decoration: var(--breadcrumbs-link-text-decoration, none);
-    text-underline-offset: var(--breadcrumbs-link-underline-offset, .2em);
-    border-radius: var(--breadcrumbs-link-radius, var(--radius-sm));
-    transition: var(--breadcrumbs-link-transition, var(--transition-default));
+    color: var(--moduix-breadcrumbs-link-color, var(--moduix-color-muted-foreground));
+    text-decoration: var(--moduix-breadcrumbs-link-text-decoration, none);
+    text-underline-offset: var(--moduix-breadcrumbs-link-underline-offset, .2em);
+    border-radius: var(--moduix-breadcrumbs-link-radius, var(--moduix-radius-sm));
+    transition: var(--moduix-breadcrumbs-link-transition, var(--moduix-transition-default));
     outline: none;
 
     @media (hover: hover) {
       &:hover {
-        color: var(--breadcrumbs-link-color-hover, var(--color-foreground));
-        text-decoration: var(--breadcrumbs-link-text-decoration-hover, none);
+        color: var(--moduix-breadcrumbs-link-color-hover, var(--moduix-color-foreground));
+        text-decoration: var(--moduix-breadcrumbs-link-text-decoration-hover, none);
       }
     }
 
     &:focus-visible {
       box-shadow: 0 0 0
-        var(--breadcrumbs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        var(--breadcrumbs-focus-ring-color, var(--color-ring));
+        var(--moduix-breadcrumbs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-breadcrumbs-focus-ring-color, var(--moduix-color-ring));
     }
   }
 
   .WoRWWa_page[data-scope="breadcrumbs"][data-part="page"] {
-    color: var(--breadcrumbs-page-color, var(--color-foreground));
-    font-weight: var(--breadcrumbs-page-font-weight, var(--weight-medium));
+    color: var(--moduix-breadcrumbs-page-color, var(--moduix-color-foreground));
+    font-weight: var(--moduix-breadcrumbs-page-font-weight, var(--moduix-weight-medium));
   }
 
   .WoRWWa_separator[data-scope="breadcrumbs"][data-part="separator"] {
-    color: var(--breadcrumbs-separator-color, var(--color-muted-foreground));
-    font-size: var(--breadcrumbs-separator-font-size, .875em);
+    color: var(--moduix-breadcrumbs-separator-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-breadcrumbs-separator-font-size, .875em);
     user-select: none;
     align-items: center;
     line-height: 1;
@@ -79,17 +79,17 @@
   }
 
   .WoRWWa_separatorIcon {
-    width: var(--breadcrumbs-separator-icon-size, 1em);
-    height: var(--breadcrumbs-separator-icon-size, 1em);
+    width: var(--moduix-breadcrumbs-separator-icon-size, 1em);
+    height: var(--moduix-breadcrumbs-separator-icon-size, 1em);
     flex: none;
   }
 
   .WoRWWa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
-    min-width: var(--breadcrumbs-ellipsis-size, var(--spacing-4));
-    min-height: var(--breadcrumbs-ellipsis-size, var(--spacing-4));
-    padding-inline: var(--breadcrumbs-item-padding-x, var(--spacing-1));
-    color: var(--breadcrumbs-ellipsis-color, var(--color-muted-foreground));
-    border-radius: var(--breadcrumbs-ellipsis-radius, var(--radius-sm));
+    min-width: var(--moduix-breadcrumbs-ellipsis-size, var(--moduix-spacing-4));
+    min-height: var(--moduix-breadcrumbs-ellipsis-size, var(--moduix-spacing-4));
+    padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
+    color: var(--moduix-breadcrumbs-ellipsis-color, var(--moduix-color-muted-foreground));
+    border-radius: var(--moduix-breadcrumbs-ellipsis-radius, var(--moduix-radius-sm));
     justify-content: center;
     align-items: center;
     display: inline-flex;