@moduix/react 2.1.0 → 2.2.0

package/dist/components/hover-card/HoverCard.css

@@ -1,66 +1,66 @@
-@layer ui.components {
+@layer moduix.components {
   ._0VaKFG_trigger {
-    --hover-card-trigger-current-color: var(--hover-card-trigger-color, var(--color-primary));
+    --moduix-hover-card-trigger-current-color: var(--moduix-hover-card-trigger-color, var(--moduix-color-primary));
     align-items: center;
-    gap: var(--hover-card-trigger-gap, var(--spacing-1));
-    color: var(--hover-card-trigger-current-color);
+    gap: var(--moduix-hover-card-trigger-gap, var(--moduix-spacing-1));
+    color: var(--moduix-hover-card-trigger-current-color);
     font: inherit;
     text-decoration-line: underline;
-    text-decoration-thickness: var(--hover-card-trigger-decoration-thickness, 1px);
-    text-decoration-color: var(--hover-card-trigger-decoration-color, color-mix(in oklab, var(--hover-card-trigger-current-color), transparent 40%));
-    text-underline-offset: var(--hover-card-trigger-underline-offset, 2px);
+    text-decoration-thickness: var(--moduix-hover-card-trigger-decoration-thickness, 1px);
+    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--moduix-hover-card-trigger-current-color), transparent 40%));
+    text-underline-offset: var(--moduix-hover-card-trigger-underline-offset, 2px);
     cursor: pointer;
-    transition: color var(--hover-card-transition, var(--duration-fast)),
-      text-decoration-color var(--hover-card-transition, var(--duration-fast));
+    transition: color var(--moduix-hover-card-transition, var(--moduix-duration-fast)),
+      text-decoration-color var(--moduix-hover-card-transition, var(--moduix-duration-fast));
     outline: 0;
     display: inline-flex;
 
     @media (hover: hover) {
       &:hover {
-        text-decoration-color: var(--hover-card-trigger-decoration-color-hover, var(--hover-card-trigger-current-color));
+        text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--moduix-hover-card-trigger-current-color));
       }
     }
 
     &[data-state="open"] {
-      text-decoration-color: var(--hover-card-trigger-decoration-color-open, var(--hover-card-trigger-current-color));
+      text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--moduix-hover-card-trigger-current-color));
     }
 
     &:focus-visible {
-      border-radius: var(--hover-card-trigger-focus-radius, var(--radius-xs));
-      outline: var(--hover-card-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--hover-card-focus-ring-color, var(--color-ring));
-      outline-offset: var(--hover-card-trigger-focus-offset, var(--focus-ring-offset));
+      border-radius: var(--moduix-hover-card-trigger-focus-radius, var(--moduix-radius-xs));
+      outline: var(--moduix-hover-card-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-hover-card-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-hover-card-trigger-focus-offset, var(--moduix-focus-ring-offset));
       text-decoration-line: none;
     }
 
     &:is([data-disabled], [disabled]) {
       pointer-events: none;
-      opacity: var(--hover-card-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-hover-card-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   ._0VaKFG_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;
   }
 
   ._0VaKFG_content {
-    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     box-sizing: border-box;
-    width: var(--hover-card-width, auto);
-    height: var(--hover-card-height, auto);
-    min-width: min(var(--hover-card-min-width, 14rem), var(--available-width));
-    max-width: min(var(--hover-card-max-width, 24rem), var(--available-width));
-    max-height: min(var(--hover-card-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--hover-card-padding-y, var(--spacing-2))
-      var(--hover-card-padding-x, var(--spacing-2));
-    border-radius: var(--hover-card-radius, var(--radius-lg));
-    background-color: var(--hover-card-bg, var(--color-popover));
-    color: var(--hover-card-color, var(--color-popover-foreground));
-    outline: var(--hover-card-border-width, var(--border-width-sm)) solid
-      var(--hover-card-border-color, var(--color-border));
-    box-shadow: var(--hover-card-shadow, var(--shadow-lg));
+    width: var(--moduix-hover-card-width, auto);
+    height: var(--moduix-hover-card-height, auto);
+    min-width: min(var(--moduix-hover-card-min-width, 14rem), var(--available-width));
+    max-width: min(var(--moduix-hover-card-max-width, 24rem), var(--available-width));
+    max-height: min(var(--moduix-hover-card-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--moduix-hover-card-padding-y, var(--moduix-spacing-2))
+      var(--moduix-hover-card-padding-x, var(--moduix-spacing-2));
+    border-radius: var(--moduix-hover-card-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-hover-card-bg, var(--moduix-color-popover));
+    color: var(--moduix-hover-card-color, var(--moduix-color-popover-foreground));
+    outline: var(--moduix-hover-card-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-hover-card-border-color, var(--moduix-color-border));
+    box-shadow: var(--moduix-hover-card-shadow, var(--moduix-shadow-lg));
     transform-origin: var(--transform-origin);
     border: 0;
     position: relative;
@@ -68,44 +68,46 @@
 
     &[data-state="open"] {
       animation: _0VaKFG_hover-card-enter
-        var(--hover-card-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        var(--moduix-hover-card-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
         both;
     }
 
     &[data-state="closed"] {
       animation: _0VaKFG_hover-card-exit
-        var(--hover-card-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        var(--moduix-hover-card-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
         both;
     }
   }
 
   ._0VaKFG_arrow {
-    --arrow-size: var(--hover-card-arrow-size, var(--spacing-2-5));
-    --arrow-background: var(--hover-card-bg, var(--color-popover));
+    --arrow-size: var(--moduix-hover-card-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-background: var(--moduix-hover-card-bg, var(--moduix-color-popover));
   }
 
   ._0VaKFG_arrowTip {
-    border-top: var(--hover-card-border-width, var(--border-width-sm)) solid
-      var(--hover-card-arrow-stroke-color, var(--hover-card-border-color, var(--color-border)));
-    border-left: var(--hover-card-border-width, var(--border-width-sm)) solid
-      var(--hover-card-arrow-stroke-color, var(--hover-card-border-color, var(--color-border)));
+    border-top: var(--moduix-hover-card-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-hover-card-arrow-stroke-color, var(--moduix-hover-card-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-hover-card-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-hover-card-arrow-stroke-color, var(--moduix-hover-card-border-color, var(--moduix-color-border)));
   }
 
   @keyframes _0VaKFG_hover-card-enter {
     from {
-      opacity: var(--hover-card-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--hover-card-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--hover-card-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      scale: var(--hover-card-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
+      opacity: var(--moduix-hover-card-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-hover-card-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-hover-card-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-hover-card-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
     }
   }
 
   @keyframes _0VaKFG_hover-card-exit {
     to {
-      opacity: var(--hover-card-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--hover-card-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--hover-card-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      scale: var(--hover-card-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
+      opacity: var(--moduix-hover-card-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-hover-card-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-hover-card-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-hover-card-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
 }

package/dist/components/image/Image.css

@@ -1,7 +1,7 @@
-@layer ui.components {
+@layer moduix.components {
   .gMmqtq_root {
     box-sizing: border-box;
-    border-radius: var(--image-radius, var(--radius-md));
+    border-radius: var(--moduix-image-radius, var(--moduix-radius-md));
     display: block;
   }
 }

package/dist/components/image-cropper/ImageCropper.css

@@ -1,10 +1,10 @@
-@layer ui.components {
+@layer moduix.components {
   .Bk909a_root {
     box-sizing: border-box;
-    width: var(--image-cropper-width, 32rem);
-    max-width: var(--image-cropper-max-width, 100%);
-    gap: var(--image-cropper-gap, var(--spacing-3));
-    color: var(--image-cropper-color, var(--color-foreground));
+    width: var(--moduix-image-cropper-width, 32rem);
+    max-width: var(--moduix-image-cropper-max-width, 100%);
+    gap: var(--moduix-image-cropper-gap, var(--moduix-spacing-3));
+    color: var(--moduix-image-cropper-color, var(--moduix-color-foreground));
     display: grid;
 
     &[data-dragging], &[data-panning] {
@@ -15,39 +15,39 @@
   .Bk909a_viewport {
     box-sizing: border-box;
     width: 100%;
-    height: var(--image-cropper-viewport-height, var(--image-cropper-viewport-min-height, 20rem));
-    border: var(--image-cropper-border-width, var(--border-width-sm)) solid
-      var(--image-cropper-border-color, var(--color-border));
-    border-radius: var(--image-cropper-radius, var(--radius-lg));
+    height: var(--moduix-image-cropper-viewport-height, var(--moduix-image-cropper-viewport-min-height, 20rem));
+    border: var(--moduix-image-cropper-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-image-cropper-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-image-cropper-radius, var(--moduix-radius-lg));
     background: linear-gradient(45deg,
-          var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
             25%,
           transparent 25%)
-        0 0 / var(--image-cropper-checker-size, var(--spacing-4))
-        var(--image-cropper-checker-size, var(--spacing-4)),
+        0 0 / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)),
       linear-gradient(45deg,
           transparent 75%,
-          var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
             75%)
-        0 0 / var(--image-cropper-checker-size, var(--spacing-4))
-        var(--image-cropper-checker-size, var(--spacing-4)),
+        0 0 / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)),
       linear-gradient(45deg,
           transparent 75%,
-          var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
             75%)
-        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2)
-        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2) /
-        var(--image-cropper-checker-size, var(--spacing-4))
-        var(--image-cropper-checker-size, var(--spacing-4)),
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) /
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)),
       linear-gradient(45deg,
-          var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
+          var(--moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent))
             25%,
-          var(--image-cropper-viewport-bg, var(--color-background)) 25%)
-        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2)
-        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2) /
-        var(--image-cropper-checker-size, var(--spacing-4))
-        var(--image-cropper-checker-size, var(--spacing-4));
-    box-shadow: var(--image-cropper-shadow, none);
+          var(--moduix-image-cropper-viewport-bg, var(--moduix-color-background)) 25%)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2)
+        calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) /
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4))
+        var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4));
+    box-shadow: var(--moduix-image-cropper-shadow, none);
     overflow: hidden;
 
     &[data-disabled] {
@@ -68,27 +68,30 @@
 
   .Bk909a_selection {
     box-sizing: content-box;
-    border: var(--image-cropper-selection-border-width, var(--border-width-md)) solid
-      var(--image-cropper-selection-border-color, var(--color-primary));
-    border-radius: var(--image-cropper-selection-radius, var(--radius-md));
-    box-shadow: 0 0 0 9999px var(--image-cropper-selection-overlay-bg, #00000073),
-      inset 0 0 0 var(--image-cropper-selection-inner-border-width, var(--border-width-sm))
-        var(--image-cropper-selection-inner-border-color, #ffffffa3);
+    border: var(--moduix-image-cropper-selection-border-width, var(--moduix-border-width-md)) solid
+      var(--moduix-image-cropper-selection-border-color, var(--moduix-color-primary));
+    border-radius: var(--moduix-image-cropper-selection-radius, var(--moduix-radius-md));
+    box-shadow: 0 0 0 9999px var(--moduix-image-cropper-selection-overlay-bg, #00000073),
+      inset 0 0 0
+        var(--moduix-image-cropper-selection-inner-border-width, var(--moduix-border-width-sm))
+        var(--moduix-image-cropper-selection-inner-border-color, #ffffffa3);
     cursor: grab;
-    transition: border-color var(--image-cropper-transition, var(--transition-default)),
-      box-shadow var(--image-cropper-transition, var(--transition-default));
+    transition: border-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-image-cropper-transition, var(--moduix-transition-default));
     outline: 0;
 
     &[data-shape="circle"] {
-      border-radius: var(--image-cropper-selection-circle-radius, var(--radius-full));
+      border-radius: var(--moduix-image-cropper-selection-circle-radius, var(--moduix-radius-full));
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 9999px var(--image-cropper-selection-overlay-bg, #00000073),
-        inset 0 0 0 var(--image-cropper-selection-inner-border-width, var(--border-width-sm))
-          var(--image-cropper-selection-inner-border-color, #ffffffa3),
-        0 0 0 var(--image-cropper-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-          var(--image-cropper-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0 9999px var(--moduix-image-cropper-selection-overlay-bg, #00000073),
+        inset 0 0 0
+          var(--moduix-image-cropper-selection-inner-border-width, var(--moduix-border-width-sm))
+          var(--moduix-image-cropper-selection-inner-border-color, #ffffffa3),
+        0 0 0
+          var(--moduix-image-cropper-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+          var(--moduix-image-cropper-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-dragging] {
@@ -104,42 +107,42 @@
     pointer-events: none;
 
     &[data-axis="horizontal"] {
-      border-block: var(--image-cropper-grid-width, var(--border-width-sm)) solid
-        var(--image-cropper-grid-color, #ffffff9e);
+      border-block: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-image-cropper-grid-color, #ffffff9e);
     }
 
     &[data-axis="vertical"] {
-      border-inline: var(--image-cropper-grid-width, var(--border-width-sm)) solid
-        var(--image-cropper-grid-color, #ffffff9e);
+      border-inline: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-image-cropper-grid-color, #ffffff9e);
     }
   }
 
   .Bk909a_handle {
     z-index: 1;
     box-sizing: border-box;
-    width: var(--image-cropper-handle-size, var(--spacing-3));
-    height: var(--image-cropper-handle-size, var(--spacing-3));
-    border: var(--image-cropper-handle-border-width, var(--border-width-sm)) solid
-      var(--image-cropper-handle-border-color, #ffffffe0);
-    border-radius: var(--image-cropper-handle-radius, var(--radius-xs));
-    background-color: var(--image-cropper-handle-bg, #fffffff5);
-    box-shadow: var(--image-cropper-handle-shadow, 0 1px 3px #0f172a2e);
-    transition: border-color var(--image-cropper-transition, var(--transition-default)),
-      background-color var(--image-cropper-transition, var(--transition-default)),
-      box-shadow var(--image-cropper-transition, var(--transition-default)),
-      opacity var(--image-cropper-transition, var(--transition-default));
+    width: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3));
+    height: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3));
+    border: var(--moduix-image-cropper-handle-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-image-cropper-handle-border-color, #ffffffe0);
+    border-radius: var(--moduix-image-cropper-handle-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-image-cropper-handle-bg, #fffffff5);
+    box-shadow: var(--moduix-image-cropper-handle-shadow, 0 1px 3px #0f172a2e);
+    transition: border-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-image-cropper-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-image-cropper-transition, var(--moduix-transition-default));
     position: absolute;
 
     &[data-position="n"], &[data-position="s"] {
-      height: var(--image-cropper-handle-edge-thickness, .2rem);
-      border-radius: var(--image-cropper-handle-edge-radius, var(--radius-full));
+      height: var(--moduix-image-cropper-handle-edge-thickness, .2rem);
+      border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full));
       border-width: 0;
       width: 100% !important;
     }
 
     &[data-position="e"], &[data-position="w"] {
-      width: var(--image-cropper-handle-edge-thickness, .2rem);
-      border-radius: var(--image-cropper-handle-edge-radius, var(--radius-full));
+      width: var(--moduix-image-cropper-handle-edge-thickness, .2rem);
+      border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full));
       border-width: 0;
       height: 100% !important;
     }

package/dist/components/input/Input.css

@@ -1,83 +1,84 @@
-@layer ui.components {
+@layer moduix.components {
   .wmyYha_root {
     box-sizing: border-box;
-    width: var(--input-width, 100%);
-    max-width: var(--input-max-width, none);
-    min-height: var(--input-height, var(--input-height-md, var(--size-md)));
-    border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
-      var(--input-border-color, var(--color-border));
-    border-radius: var(--input-radius, var(--radius-md));
-    padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1)))
-      var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3)));
-    background-color: var(--input-bg, var(--color-background));
-    color: var(--input-color, var(--color-foreground));
+    width: var(--moduix-input-width, 100%);
+    max-width: var(--moduix-input-max-width, none);
+    min-height: var(--moduix-input-height, var(--moduix-input-height-md, var(--moduix-size-md)));
+    border: var(--moduix-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-input-border-style, solid)
+      var(--moduix-input-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-input-radius, var(--moduix-radius-md));
+    padding: var(--moduix-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1)))
+      var(--moduix-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3)));
+    background-color: var(--moduix-input-bg, var(--moduix-color-background));
+    color: var(--moduix-input-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--input-font-size, var(--input-font-size-md, var(--text-md)));
-    line-height: var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--input-focus-ring-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
+    font-size: var(--moduix-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md)));
+    line-height: var(--moduix-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md)));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
       solid transparent;
-    outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
-    transition: border-color var(--input-transition, var(--transition-default)),
-      outline-color var(--input-transition, var(--transition-default)),
-      opacity var(--input-transition, var(--transition-default));
+    outline-offset: var(--moduix-input-focus-ring-offset, calc(0px - var(--moduix-input-border-width, var(--moduix-border-width-sm))));
+    transition: border-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-input-transition, var(--moduix-transition-default));
     margin: 0;
 
     &::placeholder {
-      color: var(--input-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &:focus-visible {
-      outline-color: var(--input-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-input-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:is([data-invalid], [aria-invalid="true"]) {
-      border-color: var(--input-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-input-border-color-invalid, var(--moduix-color-destructive));
 
       &:focus-visible {
-        outline-color: var(--input-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-input-border-color-invalid, var(--moduix-color-destructive));
       }
     }
 
     &:is([data-disabled], :disabled) {
       pointer-events: none;
-      opacity: var(--input-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &:is(:read-only, [data-readonly]) {
-      background-color: var(--input-readonly-bg, var(--input-bg, var(--color-background)));
-      color: var(--input-readonly-color, var(--input-color, var(--color-foreground)));
+      background-color: var(--moduix-input-readonly-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+      color: var(--moduix-input-readonly-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     }
 
     &[data-size="xs"] {
-      --input-height: var(--input-height-xs, var(--size-xs));
-      --input-padding-x: var(--input-padding-x-xs, var(--spacing-2));
-      --input-padding-y: var(--input-padding-y-xs, var(--spacing-0-5));
-      --input-font-size: var(--input-font-size-xs, var(--text-xs));
-      --input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
+      --moduix-input-height: var(--moduix-input-height-xs, var(--moduix-size-xs));
+      --moduix-input-padding-x: var(--moduix-input-padding-x-xs, var(--moduix-spacing-2));
+      --moduix-input-padding-y: var(--moduix-input-padding-y-xs, var(--moduix-spacing-0-5));
+      --moduix-input-font-size: var(--moduix-input-font-size-xs, var(--moduix-text-xs));
+      --moduix-input-line-height: var(--moduix-input-line-height-xs, var(--moduix-line-height-text-xs));
     }
 
     &[data-size="sm"] {
-      --input-height: var(--input-height-sm, var(--size-sm));
-      --input-padding-x: var(--input-padding-x-sm, var(--spacing-2));
-      --input-padding-y: var(--input-padding-y-sm, var(--spacing-1));
-      --input-font-size: var(--input-font-size-sm, var(--text-sm));
-      --input-line-height: var(--input-line-height-sm, var(--line-height-text-sm));
+      --moduix-input-height: var(--moduix-input-height-sm, var(--moduix-size-sm));
+      --moduix-input-padding-x: var(--moduix-input-padding-x-sm, var(--moduix-spacing-2));
+      --moduix-input-padding-y: var(--moduix-input-padding-y-sm, var(--moduix-spacing-1));
+      --moduix-input-font-size: var(--moduix-input-font-size-sm, var(--moduix-text-sm));
+      --moduix-input-line-height: var(--moduix-input-line-height-sm, var(--moduix-line-height-text-sm));
     }
 
     &[data-size="lg"] {
-      --input-height: var(--input-height-lg, var(--size-lg));
-      --input-padding-x: var(--input-padding-x-lg, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-lg, var(--spacing-1));
-      --input-font-size: var(--input-font-size-lg, var(--text-lg));
-      --input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
+      --moduix-input-height: var(--moduix-input-height-lg, var(--moduix-size-lg));
+      --moduix-input-padding-x: var(--moduix-input-padding-x-lg, var(--moduix-spacing-4));
+      --moduix-input-padding-y: var(--moduix-input-padding-y-lg, var(--moduix-spacing-1));
+      --moduix-input-font-size: var(--moduix-input-font-size-lg, var(--moduix-text-lg));
+      --moduix-input-line-height: var(--moduix-input-line-height-lg, var(--moduix-line-height-text-lg));
     }
 
     &[data-size="xl"] {
-      --input-height: var(--input-height-xl, var(--size-xl));
-      --input-padding-x: var(--input-padding-x-xl, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-xl, var(--spacing-2));
-      --input-font-size: var(--input-font-size-xl, var(--text-lg));
-      --input-line-height: var(--input-line-height-xl, var(--line-height-text-lg));
+      --moduix-input-height: var(--moduix-input-height-xl, var(--moduix-size-xl));
+      --moduix-input-padding-x: var(--moduix-input-padding-x-xl, var(--moduix-spacing-4));
+      --moduix-input-padding-y: var(--moduix-input-padding-y-xl, var(--moduix-spacing-2));
+      --moduix-input-font-size: var(--moduix-input-font-size-xl, var(--moduix-text-lg));
+      --moduix-input-line-height: var(--moduix-input-line-height-xl, var(--moduix-line-height-text-lg));
     }
   }
 }