@moduix/react 2.0.0 → 2.2.0

package/dist/components/pin-input/PinInput.css

@@ -1,73 +1,73 @@
-@layer ui.components {
+@layer moduix.components {
   .d_HHPW_root {
     align-items: flex-start;
-    gap: var(--pin-input-root-gap, var(--spacing-2));
-    width: var(--pin-input-width, auto);
-    max-width: var(--pin-input-max-width, none);
+    gap: var(--moduix-pin-input-root-gap, var(--moduix-spacing-2));
+    width: var(--moduix-pin-input-width, auto);
+    max-width: var(--moduix-pin-input-max-width, none);
     flex-direction: column;
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--pin-input-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-pin-input-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .d_HHPW_label {
-    color: var(--pin-input-label-color, var(--color-foreground));
-    font-size: var(--pin-input-label-font-size, var(--text-sm));
-    font-weight: var(--pin-input-label-font-weight, var(--weight-medium));
-    line-height: var(--pin-input-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-pin-input-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-pin-input-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-pin-input-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-pin-input-label-line-height, var(--moduix-line-height-text-sm));
   }
 
   .d_HHPW_control {
     align-items: center;
-    gap: var(--pin-input-gap, var(--spacing-2));
+    gap: var(--moduix-pin-input-gap, var(--moduix-spacing-2));
     display: inline-flex;
   }
 
   .d_HHPW_input {
     box-sizing: border-box;
-    width: var(--pin-input-input-width, var(--pin-input-input-size, 2.5rem));
-    height: var(--pin-input-input-height, var(--pin-input-input-size, 2.5rem));
-    border: var(--pin-input-border-width, var(--border-width-sm)) solid
-      var(--pin-input-border-color, var(--color-border));
-    border-radius: var(--pin-input-radius, var(--radius-md));
-    padding-block: var(--pin-input-input-padding-y, 0);
-    padding-inline: var(--pin-input-input-padding-x, 0);
-    background-color: var(--pin-input-bg, var(--color-background));
-    color: var(--pin-input-color, var(--color-foreground));
+    width: var(--moduix-pin-input-input-width, var(--moduix-pin-input-input-size, var(--moduix-size-md)));
+    height: var(--moduix-pin-input-input-height, var(--moduix-pin-input-input-size, var(--moduix-size-md)));
+    border: var(--moduix-pin-input-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-pin-input-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-pin-input-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-pin-input-input-padding-y, 0);
+    padding-inline: var(--moduix-pin-input-input-padding-x, 0);
+    background-color: var(--moduix-pin-input-bg, var(--moduix-color-background));
+    color: var(--moduix-pin-input-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--pin-input-font-size, var(--text-lg));
-    font-weight: var(--pin-input-font-weight, var(--weight-medium));
-    line-height: var(--pin-input-line-height, var(--line-height-text-lg));
+    font-size: var(--moduix-pin-input-font-size, var(--moduix-text-lg));
+    font-weight: var(--moduix-pin-input-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-pin-input-line-height, var(--moduix-line-height-text-lg));
     text-align: center;
     font-variant-numeric: tabular-nums;
-    outline: var(--pin-input-focus-ring-width, var(--pin-input-border-width, var(--border-width-sm)))
+    outline: var(--moduix-pin-input-focus-ring-width, var(--moduix-pin-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
       solid transparent;
-    outline-offset: var(--pin-input-focus-ring-offset, -1px);
-    transition: border-color var(--pin-input-transition, var(--transition-default)),
-      outline-color var(--pin-input-transition, var(--transition-default)),
-      background-color var(--pin-input-transition, var(--transition-default));
+    outline-offset: var(--moduix-pin-input-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    transition: border-color var(--moduix-pin-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-pin-input-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-pin-input-transition, var(--moduix-transition-default));
     flex: none;
     margin: 0;
 
     &::placeholder {
-      color: var(--pin-input-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-pin-input-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &:focus-visible {
-      outline-color: var(--pin-input-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-pin-input-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-complete] {
-      border-color: var(--pin-input-border-color-complete, var(--pin-input-border-color, var(--color-border)));
+      border-color: var(--moduix-pin-input-border-color-complete, var(--moduix-pin-input-border-color, var(--moduix-color-border)));
     }
 
     &[data-invalid] {
-      border-color: var(--pin-input-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-pin-input-border-color-invalid, var(--moduix-color-destructive));
 
       &:focus-visible {
-        outline-color: var(--pin-input-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-pin-input-border-color-invalid, var(--moduix-color-destructive));
       }
     }
 
@@ -77,9 +77,9 @@
   }
 
   .d_HHPW_separator {
-    width: var(--pin-input-separator-width, var(--pin-input-separator-size, 1rem));
-    height: var(--pin-input-separator-height, var(--pin-input-separator-size, 1rem));
-    color: var(--pin-input-separator-color, var(--color-muted-foreground));
+    width: var(--moduix-pin-input-separator-width, var(--moduix-pin-input-separator-size, var(--moduix-spacing-4)));
+    height: var(--moduix-pin-input-separator-height, var(--moduix-pin-input-separator-size, var(--moduix-spacing-4)));
+    color: var(--moduix-pin-input-separator-color, var(--moduix-color-muted-foreground));
     pointer-events: none;
     flex: none;
     justify-content: center;

package/dist/components/popover/Popover.css

@@ -1,21 +1,22 @@
-@layer ui.components {
+@layer moduix.components {
   .Qww_tG_trigger, .Qww_tG_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--popover-control-height, var(--size-lg));
-    padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
-    border: var(--popover-control-border-width, var(--border-width-sm)) solid
-      var(--popover-control-border-color, var(--color-border));
-    border-radius: var(--popover-control-radius, var(--radius-md));
-    background-color: var(--popover-control-bg, var(--color-background));
-    color: var(--popover-control-color, var(--color-foreground));
+    min-height: var(--moduix-popover-control-height, var(--moduix-size-md));
+    padding: var(--moduix-popover-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-popover-control-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-popover-control-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-popover-control-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-popover-control-bg, var(--moduix-color-background));
+    color: var(--moduix-popover-control-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--popover-control-font-size, var(--text-md));
-    line-height: var(--popover-control-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-popover-control-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-popover-control-line-height, var(--moduix-line-height-text-md));
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--popover-transition, var(--transition-default)),
-      border-color var(--popover-transition, var(--transition-default)),
-      color var(--popover-transition, var(--transition-default));
+    transition: background-color var(--moduix-popover-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-popover-transition, var(--moduix-transition-default)),
+      color var(--moduix-popover-transition, var(--moduix-transition-default));
     outline: 0;
     justify-content: center;
     align-items: center;
@@ -24,51 +25,53 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--popover-control-bg-hover, var(--color-accent));
+        background-color: var(--moduix-popover-control-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:active, &[data-state="open"] {
-      background-color: var(--popover-control-bg-active, var(--popover-control-bg-hover, var(--color-accent)));
+      background-color: var(--moduix-popover-control-bg-active, var(--moduix-popover-control-bg-hover, var(--moduix-color-accent)));
     }
 
     &:focus-visible {
-      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm)))
-        solid var(--popover-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm))) *
+      outline: var(--moduix-popover-focus-ring-width, var(--moduix-popover-control-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+        solid var(--moduix-popover-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-popover-focus-ring-width, var(--moduix-popover-control-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))) *
           -1);
     }
 
     &[data-disabled], &[disabled] {
       pointer-events: none;
-      opacity: var(--popover-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-popover-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .Qww_tG_positioner {
-    z-index: var(--z-index, var(--z-popup));
+    z-index: var(--z-index, var(--moduix-z-popup));
     max-width: var(--available-width);
     outline: 0;
   }
 
   .Qww_tG_content {
-    --popover-close-icon-size-effective: var(--popover-close-icon-size, 1.75rem);
-    --popover-close-icon-offset-effective: var(--popover-close-icon-offset, var(--spacing-3));
-    --popover-header-padding-inline-end-effective: var(--popover-header-padding-inline-end, calc(var(--popover-close-icon-size-effective) + var(--popover-close-icon-offset-effective)));
-    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    --moduix-popover-close-icon-size-effective: var(--moduix-popover-close-icon-size, var(--moduix-spacing-7));
+    --moduix-popover-close-icon-offset-effective: var(--moduix-popover-close-icon-offset, var(--moduix-spacing-3));
+    --moduix-popover-header-padding-inline-end-effective: var(--moduix-popover-header-padding-inline-end, calc(var(--moduix-popover-close-icon-size-effective) +
+          var(--moduix-popover-close-icon-offset-effective)));
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     box-sizing: border-box;
-    width: var(--popover-width, auto);
-    height: var(--popover-height, auto);
-    min-width: min(var(--popover-min-width, 16rem), var(--available-width));
-    max-width: min(var(--popover-max-width, 28rem), var(--available-width));
-    max-height: min(var(--popover-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--popover-padding-y, 1rem) var(--popover-padding-x, 1rem);
-    border-radius: var(--popover-radius, var(--radius-md));
-    background-color: var(--popover-bg, var(--color-popover));
-    color: var(--popover-color, var(--color-popover-foreground));
-    outline: var(--popover-border-width, var(--border-width-sm)) solid
-      var(--popover-border-color, var(--color-border));
-    box-shadow: var(--popover-shadow, var(--shadow-lg));
+    width: var(--moduix-popover-width, auto);
+    height: var(--moduix-popover-height, auto);
+    min-width: min(var(--moduix-popover-min-width, 16rem), var(--available-width));
+    max-width: min(var(--moduix-popover-max-width, 28rem), var(--available-width));
+    max-height: min(var(--moduix-popover-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--moduix-popover-padding-y, var(--moduix-spacing-4))
+      var(--moduix-popover-padding-x, var(--moduix-spacing-4));
+    border-radius: var(--moduix-popover-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-popover-bg, var(--moduix-color-popover));
+    color: var(--moduix-popover-color, var(--moduix-color-popover-foreground));
+    outline: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-border-color, var(--moduix-color-border));
+    box-shadow: var(--moduix-popover-shadow, var(--moduix-shadow-lg));
     transform-origin: var(--transform-origin);
     border: 0;
     position: relative;
@@ -76,96 +79,98 @@
 
     &[data-state="open"] {
       animation: Qww_tG_popover-enter
-        var(--popover-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        var(--moduix-popover-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
         both;
     }
 
     &[data-state="closed"] {
       animation: Qww_tG_popover-exit
-        var(--popover-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        var(--moduix-popover-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
         both;
     }
 
     &:has(.Qww_tG_closeIcon) {
       & .Qww_tG_header {
-        padding-inline-end: var(--popover-header-padding-inline-end-effective);
+        padding-inline-end: var(--moduix-popover-header-padding-inline-end-effective);
       }
     }
   }
 
   .Qww_tG_arrow {
-    --arrow-size: var(--popover-arrow-size, .625rem);
-    --arrow-background: var(--popover-bg, var(--color-popover));
+    --arrow-size: var(--moduix-popover-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-background: var(--moduix-popover-bg, var(--moduix-color-popover));
   }
 
   .Qww_tG_arrowTip {
-    border-top: var(--popover-border-width, var(--border-width-sm)) solid
-      var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
-    border-left: var(--popover-border-width, var(--border-width-sm)) solid
-      var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
+    border-top: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-arrow-stroke-color, var(--moduix-popover-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-arrow-stroke-color, var(--moduix-popover-border-color, var(--moduix-color-border)));
   }
 
   .Qww_tG_title {
-    color: var(--popover-title-color, var(--popover-color, var(--color-popover-foreground)));
-    font-size: var(--popover-title-font-size, var(--text-md));
-    font-weight: var(--popover-title-font-weight, var(--weight-semibold));
-    line-height: var(--popover-title-line-height, var(--line-height-text-md));
+    color: var(--moduix-popover-title-color, var(--moduix-popover-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-popover-title-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-popover-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-popover-title-line-height, var(--moduix-line-height-text-md));
     margin: 0;
   }
 
   .Qww_tG_description {
-    margin: var(--popover-description-margin, 0);
-    color: var(--popover-description-color, var(--color-muted-foreground));
-    font-size: var(--popover-description-font-size, var(--text-sm));
-    line-height: var(--popover-description-line-height, var(--line-height-text-sm));
+    margin: var(--moduix-popover-description-margin, 0);
+    color: var(--moduix-popover-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-popover-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-popover-description-line-height, var(--moduix-line-height-text-sm));
   }
 
   .Qww_tG_closeIcon {
-    --close-button-size: var(--popover-close-icon-size-effective);
-    --close-button-radius: var(--popover-close-icon-radius, var(--radius-sm));
-    --close-button-icon-size: var(--popover-close-icon-glyph-size, .875rem);
-    --close-button-bg: var(--popover-close-icon-bg, transparent);
-    --close-button-bg-hover: var(--popover-close-icon-bg-hover, var(--color-accent));
-    --close-button-color: var(--popover-close-icon-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--popover-close-icon-color-hover, var(--popover-color, var(--color-popover-foreground)));
-    --close-button-focus-ring-color: var(--popover-close-icon-focus-ring-color, var(--color-ring));
+    --moduix-close-button-size: var(--moduix-popover-close-icon-size-effective);
+    --moduix-close-button-radius: var(--moduix-popover-close-icon-radius, var(--moduix-radius-sm));
+    --moduix-close-button-icon-size: var(--moduix-popover-close-icon-glyph-size, var(--moduix-spacing-3-5));
+    --moduix-close-button-bg: var(--moduix-popover-close-icon-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-popover-close-icon-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-color: var(--moduix-popover-close-icon-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-popover-close-icon-color-hover, var(--moduix-popover-color, var(--moduix-color-popover-foreground)));
+    --moduix-close-button-focus-ring-color: var(--moduix-popover-close-icon-focus-ring-color, var(--moduix-color-ring));
     position: absolute;
-    inset-block-start: var(--popover-close-icon-offset-effective);
-    inset-inline-end: var(--popover-close-icon-offset-effective);
+    inset-block-start: var(--moduix-popover-close-icon-offset-effective);
+    inset-inline-end: var(--moduix-popover-close-icon-offset-effective);
   }
 
   .Qww_tG_header {
-    gap: var(--popover-header-gap, var(--spacing-1));
+    gap: var(--moduix-popover-header-gap, var(--moduix-spacing-1));
     display: grid;
   }
 
   .Qww_tG_body {
-    margin: var(--popover-body-margin, 0);
+    margin: var(--moduix-popover-body-margin, 0);
   }
 
   .Qww_tG_footer {
     align-items: center;
-    justify-content: var(--popover-footer-justify, flex-end);
-    gap: var(--popover-footer-gap, var(--spacing-2));
-    margin: var(--popover-footer-margin, var(--spacing-3) 0 0);
+    justify-content: var(--moduix-popover-footer-justify, flex-end);
+    gap: var(--moduix-popover-footer-gap, var(--moduix-spacing-2));
+    margin: var(--moduix-popover-footer-margin, var(--moduix-spacing-3) 0 0);
     display: flex;
   }
 
   @keyframes Qww_tG_popover-enter {
     from {
-      opacity: var(--popover-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--popover-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--popover-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      scale: var(--popover-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
+      opacity: var(--moduix-popover-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-popover-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-popover-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-popover-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
     }
   }
 
   @keyframes Qww_tG_popover-exit {
     to {
-      opacity: var(--popover-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--popover-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--popover-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      scale: var(--popover-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
+      opacity: var(--moduix-popover-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-popover-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-popover-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-popover-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
 }

package/dist/components/progress-circular/ProgressCircular.css

@@ -1,48 +1,48 @@
-@layer ui.components {
+@layer moduix.components {
   .ElFLgq_root {
     box-sizing: border-box;
     justify-items: center;
-    gap: var(--progress-circular-gap, .5rem);
-    width: var(--progress-circular-root-width, max-content);
-    color: var(--progress-circular-color, var(--color-foreground));
+    gap: var(--moduix-progress-circular-gap, var(--moduix-spacing-2));
+    width: var(--moduix-progress-circular-root-width, max-content);
+    color: var(--moduix-progress-circular-color, var(--moduix-color-foreground));
     display: inline-grid;
   }
 
   .ElFLgq_label {
-    font-size: var(--progress-circular-label-font-size, var(--text-sm));
-    font-weight: var(--progress-circular-label-font-weight, var(--weight-regular));
-    line-height: var(--progress-circular-label-line-height, var(--line-height-text-sm));
-    color: var(--progress-circular-label-color, currentColor);
+    font-size: var(--moduix-progress-circular-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-progress-circular-label-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-progress-circular-label-line-height, var(--moduix-line-height-text-sm));
+    color: var(--moduix-progress-circular-label-color, currentColor);
   }
 
   .ElFLgq_valueText {
-    font-size: var(--progress-circular-value-text-font-size, var(--text-sm));
-    font-weight: var(--progress-circular-value-text-font-weight, var(--weight-medium));
-    line-height: var(--progress-circular-value-text-line-height, var(--line-height-text-sm));
-    color: var(--progress-circular-value-text-color, currentColor);
+    font-size: var(--moduix-progress-circular-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-progress-circular-value-text-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-progress-circular-value-text-line-height, var(--moduix-line-height-text-sm));
+    color: var(--moduix-progress-circular-value-text-color, currentColor);
     text-align: center;
   }
 
   .ElFLgq_circle {
-    --size: var(--progress-circular-size, 3rem);
-    --thickness: var(--progress-circular-thickness, .4rem);
+    --size: var(--moduix-progress-circular-size, var(--moduix-size-xl));
+    --thickness: var(--moduix-progress-circular-thickness, .4rem);
     display: block;
     overflow: visible;
   }
 
   .ElFLgq_circleTrack {
-    stroke: var(--progress-circular-track-bg, var(--color-muted));
+    stroke: var(--moduix-progress-circular-track-bg, var(--moduix-color-muted));
   }
 
   .ElFLgq_circleRange {
-    stroke: var(--progress-circular-range-bg, var(--color-primary));
-    stroke-linecap: var(--progress-circular-range-linecap, round);
+    stroke: var(--moduix-progress-circular-range-bg, var(--moduix-color-primary));
+    stroke-linecap: var(--moduix-progress-circular-range-linecap, round);
     transition: stroke-dashoffset
-      var(--progress-circular-range-transition, var(--transition-default));
+      var(--moduix-progress-circular-range-transition, var(--moduix-transition-default));
 
     &[data-state="indeterminate"] {
-      animation: var(--progress-circular-range-indeterminate-animation, progress-circular-indeterminate 1.4s linear infinite);
-      stroke-dasharray: var(--progress-circular-range-indeterminate-dasharray, 1 200);
+      animation: var(--moduix-progress-circular-range-indeterminate-animation, progress-circular-indeterminate 1.4s linear infinite);
+      stroke-dasharray: var(--moduix-progress-circular-range-indeterminate-dasharray, 1 200);
     }
 
     @media (prefers-reduced-motion: reduce) {

package/dist/components/progress-linear/ProgressLinear.css

@@ -1,49 +1,50 @@
-@layer ui.components {
+@layer moduix.components {
   .Z1JBTG_root {
     box-sizing: border-box;
-    gap: var(--progress-linear-gap, .5rem);
-    width: var(--progress-linear-width, 12rem);
-    color: var(--progress-linear-color, var(--color-foreground));
+    gap: var(--moduix-progress-linear-gap, var(--moduix-spacing-2));
+    width: var(--moduix-progress-linear-width, 12rem);
+    color: var(--moduix-progress-linear-color, var(--moduix-color-foreground));
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
 
     &[data-orientation="vertical"] {
-      width: var(--progress-linear-vertical-width, max-content);
-      height: var(--progress-linear-height, 12rem);
+      width: var(--moduix-progress-linear-vertical-width, max-content);
+      height: var(--moduix-progress-linear-height, 12rem);
       grid-template-rows: auto minmax(0, 1fr);
       grid-template-columns: minmax(0, 1fr) auto;
     }
   }
 
   .Z1JBTG_label {
-    font-size: var(--progress-linear-label-font-size, var(--text-sm));
-    font-weight: var(--progress-linear-label-font-weight, var(--weight-regular));
-    line-height: var(--progress-linear-label-line-height, var(--line-height-text-sm));
-    color: var(--progress-linear-label-color, currentColor);
+    font-size: var(--moduix-progress-linear-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-progress-linear-label-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-progress-linear-label-line-height, var(--moduix-line-height-text-sm));
+    color: var(--moduix-progress-linear-label-color, currentColor);
   }
 
   .Z1JBTG_valueText {
-    font-size: var(--progress-linear-value-text-font-size, var(--text-sm));
-    font-weight: var(--progress-linear-value-text-font-weight, var(--weight-regular));
-    line-height: var(--progress-linear-value-text-line-height, var(--line-height-text-sm));
-    color: var(--progress-linear-value-text-color, currentColor);
+    font-size: var(--moduix-progress-linear-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-progress-linear-value-text-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-progress-linear-value-text-line-height, var(--moduix-line-height-text-sm));
+    color: var(--moduix-progress-linear-value-text-color, currentColor);
     text-align: right;
     justify-self: end;
   }
 
   .Z1JBTG_track {
     width: 100%;
-    height: var(--progress-linear-track-height, .5rem);
-    border-radius: var(--progress-linear-track-radius, var(--radius-full));
-    background-color: var(--progress-linear-track-bg, var(--color-muted));
-    box-shadow: inset 0 0 0 var(--progress-linear-track-border-width, var(--border-width-sm))
-      var(--progress-linear-track-border-color, var(--color-border));
+    height: var(--moduix-progress-linear-track-height, .5rem);
+    border-radius: var(--moduix-progress-linear-track-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-progress-linear-track-bg, var(--moduix-color-muted));
+    box-shadow: inset 0 0 0
+      var(--moduix-progress-linear-track-border-width, var(--moduix-border-width-sm))
+      var(--moduix-progress-linear-track-border-color, var(--moduix-color-border));
     grid-column: 1 / -1;
     display: block;
     overflow: hidden;
 
     &[data-orientation="vertical"] {
-      width: var(--progress-linear-track-width, .5rem);
+      width: var(--moduix-progress-linear-track-width, .5rem);
       align-items: end;
       height: 100%;
       display: flex;
@@ -51,16 +52,16 @@
   }
 
   .Z1JBTG_range {
-    border-radius: var(--progress-linear-range-radius, inherit);
-    background-color: var(--progress-linear-range-bg, var(--color-primary));
+    border-radius: var(--moduix-progress-linear-range-radius, inherit);
+    background-color: var(--moduix-progress-linear-range-bg, var(--moduix-color-primary));
     height: 100%;
-    transition: width var(--progress-linear-range-transition, var(--transition-default)),
-      height var(--progress-linear-range-transition, var(--transition-default));
+    transition: width var(--moduix-progress-linear-range-transition, var(--moduix-transition-default)),
+      height var(--moduix-progress-linear-range-transition, var(--moduix-transition-default));
     display: block;
 
     &[data-state="indeterminate"] {
-      width: var(--progress-linear-range-indeterminate-width, 35%);
-      animation: var(--progress-linear-range-indeterminate-animation, progress-linear-indeterminate 1.5s ease-in-out infinite);
+      width: var(--moduix-progress-linear-range-indeterminate-width, 35%);
+      animation: var(--moduix-progress-linear-range-indeterminate-animation, progress-linear-indeterminate 1.5s ease-in-out infinite);
     }
 
     &[data-orientation="vertical"] {
@@ -68,8 +69,8 @@
     }
 
     &[data-state="indeterminate"][data-orientation="vertical"] {
-      height: var(--progress-linear-range-indeterminate-width, 35%);
-      animation: var(--progress-linear-range-indeterminate-vertical-animation, progress-linear-indeterminate-vertical 1.5s ease-in-out infinite);
+      height: var(--moduix-progress-linear-range-indeterminate-width, 35%);
+      animation: var(--moduix-progress-linear-range-indeterminate-vertical-animation, progress-linear-indeterminate-vertical 1.5s ease-in-out infinite);
     }
 
     @media (prefers-reduced-motion: reduce) {