@moduix/react 2.1.0 → 2.2.0

package/dist/components/number-input/NumberInput.css

@@ -1,28 +1,28 @@
-@layer ui.components {
+@layer moduix.components {
   .ZjEX8G_root {
     align-items: flex-start;
-    gap: var(--number-input-gap, var(--spacing-1));
-    width: var(--number-input-width, auto);
-    max-width: var(--number-input-max-width, none);
+    gap: var(--moduix-number-input-gap, var(--moduix-spacing-1));
+    width: var(--moduix-number-input-width, auto);
+    max-width: var(--moduix-number-input-max-width, none);
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-number-input-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .ZjEX8G_label {
-    color: var(--number-input-label-color, var(--color-foreground));
-    font-size: var(--number-input-label-font-size, var(--text-sm));
-    line-height: var(--number-input-label-line-height, var(--line-height-text-sm));
-    font-weight: var(--number-input-label-font-weight, var(--weight-medium));
+    color: var(--moduix-number-input-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-number-input-label-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-number-input-label-line-height, var(--moduix-line-height-text-sm));
+    font-weight: var(--moduix-number-input-label-font-weight, var(--moduix-weight-medium));
   }
 
   .ZjEX8G_scrubber {
     align-items: center;
-    gap: var(--number-input-scrubber-gap, var(--spacing-2));
-    color: var(--number-input-scrubber-color, var(--color-foreground));
+    gap: var(--moduix-number-input-scrubber-gap, var(--moduix-spacing-2));
+    color: var(--moduix-number-input-scrubber-color, var(--moduix-color-foreground));
     user-select: none;
     cursor: ew-resize;
     display: inline-flex;
@@ -38,21 +38,22 @@
   }
 
   .ZjEX8G_decrementTrigger, .ZjEX8G_incrementTrigger {
-    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
+    --_number-input-focus-ring-width: var(--moduix-number-input-focus-ring-width, var(--moduix-number-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
     box-sizing: border-box;
-    width: var(--number-input-control-height, var(--size-md));
-    min-width: var(--number-input-control-height, var(--size-md));
-    height: var(--number-input-control-height, var(--size-md));
-    border: var(--number-input-border-width, var(--border-width-sm))
-      var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
-    background-color: var(--number-input-button-bg, var(--color-background));
-    color: var(--number-input-button-color, var(--color-foreground));
+    width: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    min-width: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    height: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    border: var(--moduix-number-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-number-input-border-style, solid)
+      var(--moduix-number-input-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-number-input-button-bg, var(--moduix-color-background));
+    color: var(--moduix-number-input-button-color, var(--moduix-color-foreground));
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default),
-      color var(--transition-default),
-      opacity var(--transition-default);
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
     outline: 0;
     justify-content: center;
     align-items: center;
@@ -62,17 +63,17 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--number-input-button-bg-hover, var(--color-accent));
+        background-color: var(--moduix-number-input-button-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:active {
-      background-color: var(--number-input-button-bg-active, var(--number-input-button-bg-hover, var(--color-accent)));
+      background-color: var(--moduix-number-input-button-bg-active, var(--moduix-number-input-button-bg-hover, var(--moduix-color-accent)));
     }
 
     &:focus-visible, &[data-focus] {
       outline: var(--_number-input-focus-ring-width) solid
-        var(--number-input-focus-ring-color, var(--color-ring));
+        var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
       outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
       z-index: 1;
     }
@@ -82,74 +83,76 @@
     }
 
     &[data-invalid], .ZjEX8G_root[data-invalid] & {
-      border-color: var(--number-input-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
     }
 
     & > svg {
-      width: var(--number-input-icon-size, var(--spacing-3-5));
-      height: var(--number-input-icon-size, var(--spacing-3-5));
+      width: var(--moduix-number-input-icon-size, var(--moduix-spacing-3-5));
+      height: var(--moduix-number-input-icon-size, var(--moduix-spacing-3-5));
       flex-shrink: 0;
     }
   }
 
   .ZjEX8G_decrementTrigger {
     border-inline-end: 0;
-    border-start-start-radius: var(--number-input-radius, var(--radius-md));
-    border-end-start-radius: var(--number-input-radius, var(--radius-md));
+    border-start-start-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
+    border-end-start-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
   }
 
   .ZjEX8G_incrementTrigger {
     border-inline-start: 0;
-    border-start-end-radius: var(--number-input-radius, var(--radius-md));
-    border-end-end-radius: var(--number-input-radius, var(--radius-md));
+    border-start-end-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
+    border-end-end-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
   }
 
   .ZjEX8G_input {
-    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
+    --_number-input-focus-ring-width: var(--moduix-number-input-focus-ring-width, var(--moduix-number-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
     box-sizing: border-box;
-    width: var(--number-input-input-width, 6rem);
-    height: var(--number-input-control-height, var(--size-md));
-    border-top: var(--number-input-border-width, var(--border-width-sm))
-      var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
-    border-bottom: var(--number-input-border-width, var(--border-width-sm))
-      var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
-    padding: var(--number-input-input-padding-y, var(--spacing-1))
-      var(--number-input-input-padding-x, var(--spacing-3));
-    background-color: var(--number-input-input-bg, var(--color-background));
-    color: var(--number-input-input-color, var(--color-foreground));
+    width: var(--moduix-number-input-input-width, 6rem);
+    height: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    border-top: var(--moduix-number-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-number-input-border-style, solid)
+      var(--moduix-number-input-border-color, var(--moduix-color-border));
+    border-bottom: var(--moduix-number-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-number-input-border-style, solid)
+      var(--moduix-number-input-border-color, var(--moduix-color-border));
+    padding: var(--moduix-number-input-input-padding-y, var(--moduix-spacing-1))
+      var(--moduix-number-input-input-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-number-input-input-bg, var(--moduix-color-background));
+    color: var(--moduix-number-input-input-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--number-input-input-font-size, var(--text-md));
-    line-height: var(--number-input-input-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-number-input-input-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-number-input-input-line-height, var(--moduix-line-height-text-md));
     text-align: center;
     font-variant-numeric: tabular-nums;
     outline: var(--_number-input-focus-ring-width) solid transparent;
     outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
-    transition: border-color var(--transition-default),
-      outline-color var(--transition-default),
-      opacity var(--transition-default);
+    transition: border-color var(--moduix-transition-default),
+      outline-color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
     border-inline: 0;
     border-radius: 0;
     margin: 0;
 
     &:focus-visible, &[data-focus] {
-      outline-color: var(--number-input-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
       z-index: 1;
     }
 
     &[data-invalid], .ZjEX8G_root[data-invalid] & {
-      border-top-color: var(--number-input-border-color-invalid, var(--color-destructive));
-      border-bottom-color: var(--number-input-border-color-invalid, var(--color-destructive));
+      border-top-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
+      border-bottom-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
 
       &:focus-visible, &[data-focus] {
-        outline-color: var(--number-input-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
       }
     }
   }
 
   .ZjEX8G_valueText {
-    color: var(--number-input-value-text-color, var(--color-muted-foreground));
-    font-size: var(--number-input-value-text-font-size, var(--text-sm));
-    line-height: var(--number-input-value-text-line-height, var(--line-height-text-sm));
+    color: var(--moduix-number-input-value-text-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-number-input-value-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-number-input-value-text-line-height, var(--moduix-line-height-text-sm));
     font-variant-numeric: tabular-nums;
   }
 }

package/dist/components/pagination/Pagination.css

@@ -1,19 +1,19 @@
-@layer ui.components {
+@layer moduix.components {
   .djsvna_root {
     align-items: center;
-    gap: var(--pagination-gap, var(--spacing-1));
-    color: var(--pagination-color, var(--color-foreground));
+    gap: var(--moduix-pagination-gap, var(--moduix-spacing-1));
+    color: var(--moduix-pagination-color, var(--moduix-color-foreground));
     display: inline-flex;
   }
 
   .djsvna_item, .djsvna_trigger, .djsvna_ellipsis {
     box-sizing: border-box;
-    min-width: var(--pagination-item-size, var(--size-md));
-    height: var(--pagination-item-size, var(--size-md));
-    border-radius: var(--pagination-item-radius, var(--radius-md));
-    font-size: var(--pagination-font-size, var(--text-sm));
-    font-weight: var(--pagination-font-weight, var(--weight-medium));
-    line-height: var(--pagination-line-height, var(--line-height-text-sm));
+    min-width: var(--moduix-pagination-item-size, var(--moduix-size-md));
+    height: var(--moduix-pagination-item-size, var(--moduix-size-md));
+    border-radius: var(--moduix-pagination-item-radius, var(--moduix-radius-md));
+    font-size: var(--moduix-pagination-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-pagination-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-pagination-line-height, var(--moduix-line-height-text-sm));
     font-variant-numeric: tabular-nums;
     justify-content: center;
     align-items: center;
@@ -22,68 +22,69 @@
 
   .djsvna_item, .djsvna_trigger {
     cursor: pointer;
-    gap: var(--pagination-trigger-gap, var(--spacing-2));
-    border: var(--pagination-item-border-width, var(--border-width-sm)) solid
-      var(--pagination-item-border-color, var(--color-border));
-    padding-inline: var(--pagination-item-padding-inline, var(--spacing-3));
-    background-color: var(--pagination-item-bg, var(--color-background));
-    color: var(--pagination-item-color, var(--color-foreground));
+    gap: var(--moduix-pagination-trigger-gap, var(--moduix-spacing-2));
+    border: var(--moduix-pagination-item-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-pagination-item-border-color, var(--moduix-color-border));
+    padding-inline: var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-3));
+    background-color: var(--moduix-pagination-item-bg, var(--moduix-color-background));
+    color: var(--moduix-pagination-item-color, var(--moduix-color-foreground));
     user-select: none;
     white-space: nowrap;
-    transition: background-color var(--pagination-transition, var(--transition-default)),
-      border-color var(--pagination-transition, var(--transition-default)),
-      color var(--pagination-transition, var(--transition-default)),
-      opacity var(--pagination-transition, var(--transition-default));
+    transition: background-color var(--moduix-pagination-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-pagination-transition, var(--moduix-transition-default)),
+      color var(--moduix-pagination-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-pagination-transition, var(--moduix-transition-default));
     font-family: inherit;
     text-decoration: none;
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--pagination-item-bg-hover, var(--color-accent));
+        background-color: var(--moduix-pagination-item-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible, &[data-focus] {
-      outline: var(--pagination-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--pagination-focus-ring-color, var(--color-ring));
-      outline-offset: var(--pagination-focus-ring-offset, var(--focus-ring-inset-offset));
+      outline: var(--moduix-pagination-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-pagination-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-pagination-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
     }
 
     &:is([data-disabled], :disabled) {
-      opacity: var(--pagination-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-pagination-disabled-opacity, var(--moduix-opacity-disabled));
       pointer-events: none;
     }
 
     & svg {
-      width: var(--pagination-icon-size, var(--spacing-4));
-      height: var(--pagination-icon-size, var(--spacing-4));
+      width: var(--moduix-pagination-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-pagination-icon-size, var(--moduix-spacing-4));
       flex-shrink: 0;
     }
   }
 
   .djsvna_item[data-selected] {
-    border-color: var(--pagination-item-border-color-selected, var(--color-foreground));
-    background-color: var(--pagination-item-bg-selected, var(--color-foreground));
-    color: var(--pagination-item-color-selected, var(--color-background));
+    border-color: var(--moduix-pagination-item-border-color-selected, var(--moduix-color-foreground));
+    background-color: var(--moduix-pagination-item-bg-selected, var(--moduix-color-foreground));
+    color: var(--moduix-pagination-item-color-selected, var(--moduix-color-background));
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--pagination-item-bg-selected, var(--color-foreground));
+        background-color: var(--moduix-pagination-item-bg-selected, var(--moduix-color-foreground));
       }
     }
   }
 
   .djsvna_trigger {
-    padding-inline: max(var(--pagination-item-padding-inline, var(--spacing-3)), var(--spacing-3));
+    padding-inline: max(var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-3)),
+      var(--moduix-spacing-3));
   }
 
   .djsvna_iconTrigger {
-    width: var(--pagination-item-size, var(--size-md));
+    width: var(--moduix-pagination-item-size, var(--moduix-size-md));
     padding-inline: 0;
   }
 
   .djsvna_ellipsis {
-    color: var(--pagination-ellipsis-color, var(--color-muted-foreground));
+    color: var(--moduix-pagination-ellipsis-color, var(--moduix-color-muted-foreground));
     user-select: none;
   }
 
@@ -93,7 +94,7 @@
     display: inline-flex;
 
     & svg + svg {
-      margin-inline-start: calc(var(--pagination-icon-size, var(--spacing-4)) * -.5);
+      margin-inline-start: calc(var(--moduix-pagination-icon-size, var(--moduix-spacing-4)) * -.5);
     }
   }
 }

package/dist/components/password-input/PasswordInput.css

@@ -1,70 +1,71 @@
-@layer ui.components {
+@layer moduix.components {
   ._8wEG0G_root {
     box-sizing: border-box;
-    gap: var(--password-input-gap, var(--field-gap, var(--spacing-1)));
-    width: var(--password-input-width, 100%);
-    max-width: var(--password-input-max-width, 20rem);
-    color: var(--password-input-color, var(--input-color, var(--color-foreground)));
+    gap: var(--moduix-password-input-gap, var(--moduix-field-gap, var(--moduix-spacing-1)));
+    width: var(--moduix-password-input-width, 100%);
+    max-width: var(--moduix-password-input-max-width, 20rem);
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--password-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+      opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
     }
   }
 
   ._8wEG0G_label {
     align-items: center;
-    gap: var(--password-input-label-gap, var(--field-label-gap, var(--spacing-1)));
-    color: var(--password-input-label-color, var(--field-label-color, var(--color-foreground)));
-    font-size: var(--password-input-label-font-size, var(--field-label-font-size, var(--text-sm)));
-    font-weight: var(--password-input-label-font-weight, var(--field-label-font-weight, var(--weight-medium)));
-    line-height: var(--password-input-label-line-height, var(--field-label-line-height, var(--line-height-text-sm)));
+    gap: var(--moduix-password-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
+    color: var(--moduix-password-input-label-color, var(--moduix-field-label-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-password-input-label-font-size, var(--moduix-field-label-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-password-input-label-font-weight, var(--moduix-field-label-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-password-input-label-line-height, var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm)));
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--password-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+      opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
     }
   }
 
   ._8wEG0G_control {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--password-input-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(--password-input-border-color, var(--input-border-color, var(--color-border)));
-    border-radius: var(--password-input-radius, var(--input-radius, var(--radius-md)));
-    background-color: var(--password-input-bg, var(--input-bg, var(--color-background)));
-    color: var(--password-input-color, var(--input-color, var(--color-foreground)));
-    outline: var(--input-focus-ring-width, var(--input-border-width, var(--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));
+    min-height: var(--moduix-password-input-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-password-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-password-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    background-color: var(--moduix-password-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    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));
     align-items: center;
-    padding-inline-end: var(--password-input-trigger-inset, var(--spacing-2));
+    padding-inline-end: var(--moduix-password-input-trigger-inset, var(--moduix-spacing-2));
     display: flex;
 
     &:focus-within {
-      outline-color: var(--password-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+      outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
     }
 
     &[data-invalid] {
-      border-color: var(--password-input-invalid-border-color, var(--input-border-color-invalid, var(--color-destructive)));
+      border-color: var(--moduix-password-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
 
       &:focus-within {
-        outline-color: var(--password-input-invalid-focus-ring-color, var(--input-border-color-invalid, var(--color-destructive)));
+        outline-color: var(--moduix-password-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
       }
     }
 
     &[data-disabled] {
-      opacity: var(--password-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+      opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
     }
 
     &[data-readonly] {
-      background-color: var(--password-input-readonly-bg, var(--input-readonly-bg, var(--color-background)));
-      color: var(--password-input-readonly-color, var(--input-readonly-color, var(--color-foreground)));
+      background-color: var(--moduix-password-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-color-background)));
+      color: var(--moduix-password-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-color-foreground)));
     }
   }
 
@@ -72,13 +73,13 @@
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;
-    padding: var(--password-input-padding-y, var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1))))
-      var(--password-input-padding-x, var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3))));
-    color: var(--password-input-color, var(--input-color, var(--color-foreground)));
+    padding: var(--moduix-password-input-padding-y, var(--moduix-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1))))
+      var(--moduix-password-input-padding-x, var(--moduix-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3))));
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     font: inherit;
-    font-size: var(--password-input-font-size, var(--input-font-size, var(--input-font-size-md, var(--text-md))));
-    line-height: var(--password-input-line-height, var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md))));
-    transition: opacity var(--input-transition, var(--transition-default));
+    font-size: var(--moduix-password-input-font-size, var(--moduix-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md))));
+    line-height: var(--moduix-password-input-line-height, var(--moduix-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md))));
+    transition: opacity var(--moduix-input-transition, var(--moduix-transition-default));
     background-color: #0000;
     border: 0;
     border-radius: 0;
@@ -87,7 +88,7 @@
     margin: 0;
 
     &::placeholder {
-      color: var(--password-input-placeholder-color, var(--input-placeholder-color, var(--color-muted-foreground)));
+      color: var(--moduix-password-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
     }
 
     &:is([data-disabled], :disabled) {
@@ -101,19 +102,19 @@
   }
 
   ._8wEG0G_visibilityTrigger {
-    width: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
-    min-width: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
-    height: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
-    color: var(--password-input-trigger-color, var(--color-muted-foreground));
-    background: var(--password-input-trigger-bg, transparent);
-    border-radius: var(--password-input-trigger-radius, var(--radius-sm));
-    outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
-      transparent;
-    outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
+    width: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
+    min-width: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
+    height: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
+    color: var(--moduix-password-input-trigger-color, var(--moduix-color-muted-foreground));
+    background: var(--moduix-password-input-trigger-bg, transparent);
+    border-radius: var(--moduix-password-input-trigger-radius, var(--moduix-radius-sm));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: var(--moduix-input-focus-ring-offset, calc(0px - var(--moduix-input-border-width, var(--moduix-border-width-sm))));
     cursor: pointer;
-    transition: color var(--input-transition, var(--transition-default)),
-      outline-color var(--input-transition, var(--transition-default)),
-      opacity var(--input-transition, var(--transition-default));
+    transition: 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));
     border: 0;
     flex-shrink: 0;
     justify-content: center;
@@ -122,11 +123,11 @@
     display: inline-flex;
 
     &:hover {
-      color: var(--password-input-trigger-hover-color, var(--color-foreground));
+      color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
     }
 
     &:focus-visible {
-      outline-color: var(--password-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+      outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
     }
 
     &:is([data-disabled], :disabled) {
@@ -135,21 +136,21 @@
   }
 
   ._8wEG0G_indicator {
-    padding: var(--password-input-trigger-visual-padding, var(--spacing-1));
-    border-radius: var(--password-input-trigger-radius, var(--radius-sm));
-    transition: background-color var(--input-transition, var(--transition-default)),
-      color var(--input-transition, var(--transition-default));
+    padding: var(--moduix-password-input-trigger-visual-padding, var(--moduix-spacing-1));
+    border-radius: var(--moduix-password-input-trigger-radius, var(--moduix-radius-sm));
+    transition: background-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-input-transition, var(--moduix-transition-default));
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & svg {
-      width: var(--password-input-icon-size, var(--button-icon-size, var(--spacing-4)));
-      height: var(--password-input-icon-size, var(--button-icon-size, var(--spacing-4)));
+      width: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+      height: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
     }
   }
 
   ._8wEG0G_visibilityTrigger:hover ._8wEG0G_indicator, ._8wEG0G_visibilityTrigger:focus-visible ._8wEG0G_indicator {
-    background: var(--password-input-trigger-hover-bg, var(--color-muted));
+    background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
   }
 }