@moduix/react 2.0.0 → 2.2.0

package/dist/components/timer/Timer.css

@@ -1,37 +1,37 @@
-@layer ui.components {
+@layer moduix.components {
   .Z6b--a_root {
     box-sizing: border-box;
     place-items: center;
-    gap: var(--timer-gap, var(--spacing-3));
-    width: var(--timer-width, max-content);
-    color: var(--timer-color, var(--color-foreground));
+    gap: var(--moduix-timer-gap, var(--moduix-spacing-3));
+    width: var(--moduix-timer-width, max-content);
+    color: var(--moduix-timer-color, var(--moduix-color-foreground));
     display: inline-grid;
   }
 
   .Z6b--a_area {
     align-items: baseline;
-    gap: var(--timer-area-gap, var(--spacing-1));
-    font-size: var(--timer-area-font-size, var(--text-2xl));
-    font-weight: var(--timer-area-font-weight, var(--weight-semibold));
-    line-height: var(--timer-area-line-height, var(--line-height-text-sm));
+    gap: var(--moduix-timer-area-gap, var(--moduix-spacing-1));
+    font-size: var(--moduix-timer-area-font-size, var(--moduix-text-2xl));
+    font-weight: var(--moduix-timer-area-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-timer-area-line-height, var(--moduix-line-height-text-sm));
     font-variant-numeric: tabular-nums;
     letter-spacing: 0;
     display: inline-flex;
   }
 
   .Z6b--a_item {
-    min-width: var(--timer-item-min-width, 2ch);
-    color: var(--timer-item-color, currentColor);
-    text-align: var(--timer-item-text-align, center);
+    min-width: var(--moduix-timer-item-min-width, 2ch);
+    color: var(--moduix-timer-item-color, currentColor);
+    text-align: var(--moduix-timer-item-text-align, center);
   }
 
   .Z6b--a_separator {
-    color: var(--timer-separator-color, var(--color-muted-foreground));
+    color: var(--moduix-timer-separator-color, var(--moduix-color-muted-foreground));
   }
 
   .Z6b--a_control {
     align-items: center;
-    gap: var(--timer-control-gap, var(--spacing-2));
+    gap: var(--moduix-timer-control-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
     display: inline-flex;
   }
@@ -40,44 +40,45 @@
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--timer-action-trigger-gap, var(--spacing-2));
-    min-height: var(--timer-action-trigger-height, var(--size-md));
-    border: var(--timer-action-trigger-border-width, var(--border-width-sm)) solid
-      var(--timer-action-trigger-border-color, var(--color-border));
-    border-radius: var(--timer-action-trigger-radius, var(--radius-md));
-    padding-block: var(--timer-action-trigger-padding-y, .375rem);
-    padding-inline: var(--timer-action-trigger-padding-x, .75rem);
-    background-color: var(--timer-action-trigger-bg, var(--color-background));
-    color: var(--timer-action-trigger-color, var(--color-foreground));
+    gap: var(--moduix-timer-action-trigger-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-timer-action-trigger-height, var(--moduix-size-md));
+    border: var(--moduix-timer-action-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-timer-action-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-timer-action-trigger-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-timer-action-trigger-padding-y, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-timer-action-trigger-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-timer-action-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-timer-action-trigger-color, var(--moduix-color-foreground));
     appearance: none;
     font: inherit;
-    font-size: var(--timer-action-trigger-font-size, var(--text-sm));
-    font-weight: var(--timer-action-trigger-font-weight, var(--weight-medium));
-    line-height: var(--timer-action-trigger-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-timer-action-trigger-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-timer-action-trigger-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-timer-action-trigger-line-height, var(--moduix-line-height-text-sm));
     white-space: nowrap;
     cursor: pointer;
-    transition: background-color var(--timer-action-trigger-transition, var(--transition-default)),
-      border-color var(--timer-action-trigger-transition, var(--transition-default)),
-      color var(--timer-action-trigger-transition, var(--transition-default)),
-      opacity var(--timer-action-trigger-transition, var(--transition-default)),
-      box-shadow var(--timer-action-trigger-transition, var(--transition-default));
+    transition: background-color
+        var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      color var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default));
     margin: 0;
     display: inline-flex;
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--timer-action-trigger-bg-hover, var(--color-accent));
+        background-color: var(--moduix-timer-action-trigger-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible {
-      outline: var(--timer-action-trigger-focus-ring-width, var(--border-width-md)) solid
-        var(--timer-action-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--timer-action-trigger-focus-ring-offset, -1px);
+      outline: var(--moduix-timer-action-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-timer-action-trigger-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-timer-action-trigger-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
     }
 
     &:is(:disabled, [aria-disabled="true"]) {
-      opacity: var(--timer-action-trigger-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-timer-action-trigger-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
       pointer-events: none;
     }
@@ -87,8 +88,8 @@
     }
 
     & :where(svg) {
-      width: var(--timer-action-trigger-icon-size, 1rem);
-      height: var(--timer-action-trigger-icon-size, 1rem);
+      width: var(--moduix-timer-action-trigger-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-timer-action-trigger-icon-size, var(--moduix-spacing-4));
       flex-shrink: 0;
     }
   }

package/dist/components/toast/Toast.css

@@ -1,27 +1,27 @@
-@layer ui.components {
+@layer moduix.components {
   .o69bxG_toaster {
-    z-index: var(--toast-z-index, var(--z-toast));
+    z-index: var(--moduix-toast-z-index, var(--moduix-z-toast));
   }
 
   .o69bxG_root {
-    --toast-trigger-bg-default: transparent;
-    --toast-trigger-bg-hover-default: var(--color-accent);
-    --toast-trigger-border-color-default: var(--color-border);
-    --toast-trigger-color-default: var(--color-foreground);
-    --toast-trigger-focus-ring-color-default: var(--color-ring);
+    --moduix-toast-trigger-bg-default: transparent;
+    --moduix-toast-trigger-bg-hover-default: var(--moduix-color-accent);
+    --moduix-toast-trigger-border-color-default: var(--moduix-color-border);
+    --moduix-toast-trigger-color-default: var(--moduix-color-foreground);
+    --moduix-toast-trigger-focus-ring-color-default: var(--moduix-color-ring);
     box-sizing: border-box;
-    width: var(--toast-width, 20rem);
-    max-width: calc(100vw - (var(--toast-viewport-inset, 1rem) * 2));
-    min-height: var(--toast-min-height, 0);
+    width: var(--moduix-toast-width, 20rem);
+    max-width: calc(100vw - (var(--moduix-toast-viewport-inset, var(--moduix-spacing-4)) * 2));
+    min-height: var(--moduix-toast-min-height, 0);
     align-items: start;
-    gap: var(--toast-content-gap, .25rem);
-    border: var(--toast-border-width, var(--border-width-sm)) solid
-      var(--toast-border-color, var(--toast-border-color-default, var(--color-border)));
-    border-radius: var(--toast-radius, var(--radius-lg));
-    background-color: var(--toast-bg, var(--toast-bg-default, var(--color-popover)));
-    color: var(--toast-color, var(--toast-color-default, var(--color-popover-foreground)));
-    box-shadow: var(--toast-shadow, var(--shadow-lg));
-    padding: var(--toast-padding, 1rem);
+    gap: var(--moduix-toast-content-gap, var(--moduix-spacing-1));
+    border: var(--moduix-toast-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-toast-border-color, var(--moduix-toast-border-color-default, var(--moduix-color-border)));
+    border-radius: var(--moduix-toast-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-toast-bg, var(--moduix-toast-bg-default, var(--moduix-color-popover)));
+    color: var(--moduix-toast-color, var(--moduix-toast-color-default, var(--moduix-color-popover-foreground)));
+    box-shadow: var(--moduix-toast-shadow, var(--moduix-shadow-lg));
+    padding: var(--moduix-toast-padding, var(--moduix-spacing-4));
     pointer-events: auto;
     user-select: none;
     translate: var(--x) var(--y);
@@ -30,114 +30,130 @@
     height: var(--height);
     opacity: var(--opacity);
     will-change: translate, opacity, scale;
-    transition: translate var(--toast-transition, var(--duration-slow)),
-      scale var(--toast-transition, var(--duration-slow)),
-      opacity var(--toast-transition, var(--duration-slow)),
-      height var(--toast-transition, var(--duration-slow)),
-      box-shadow var(--transition-fast);
+    transition: translate var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      scale var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      opacity var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      height var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      box-shadow var(--moduix-transition-fast);
     background-clip: padding-box;
-    padding-inline-end: calc(var(--toast-padding, 1rem) + var(--toast-close-size, 28px));
+    padding-inline-end: calc(var(--moduix-toast-padding, var(--moduix-spacing-4)) +
+        var(--moduix-toast-close-size, var(--moduix-spacing-7)));
     transition-timing-function: cubic-bezier(.21, 1.02, .73, 1);
     display: grid;
 
     &[data-state="closed"] {
-      transition: translate var(--toast-transition-out, var(--duration-slow)),
-        scale var(--toast-transition-out, var(--duration-slow)),
-        opacity var(--toast-opacity-transition-out, var(--duration-normal));
+      transition: translate var(--moduix-toast-transition-out, var(--moduix-duration-slow)),
+        scale var(--moduix-toast-transition-out, var(--moduix-duration-slow)),
+        opacity var(--moduix-toast-opacity-transition-out, var(--moduix-duration-normal));
       transition-timing-function: cubic-bezier(.06, .71, .55, 1);
     }
 
     &[data-type="success"] {
-      --toast-bg-default: color-mix(in oklab, var(--color-success) 10%, var(--color-background));
-      --toast-border-color-default: color-mix(in oklab, var(--color-success) 34%, transparent);
-      --toast-color-default: var(--color-foreground);
-      --toast-description-color-default: var(--color-muted-foreground);
+      --moduix-toast-bg-default: color-mix(in oklab,
+        var(--moduix-color-success) 10%,
+        var(--moduix-color-background));
+      --moduix-toast-border-color-default: color-mix(in oklab,
+        var(--moduix-color-success) 34%,
+        transparent);
+      --moduix-toast-color-default: var(--moduix-color-foreground);
+      --moduix-toast-description-color-default: var(--moduix-color-muted-foreground);
     }
 
     &[data-type="warning"] {
-      --toast-bg-default: color-mix(in oklab, var(--color-warning) 13%, var(--color-background));
-      --toast-border-color-default: color-mix(in oklab, var(--color-warning) 38%, transparent);
-      --toast-color-default: var(--color-foreground);
-      --toast-description-color-default: var(--color-muted-foreground);
+      --moduix-toast-bg-default: color-mix(in oklab,
+        var(--moduix-color-warning) 13%,
+        var(--moduix-color-background));
+      --moduix-toast-border-color-default: color-mix(in oklab,
+        var(--moduix-color-warning) 38%,
+        transparent);
+      --moduix-toast-color-default: var(--moduix-color-foreground);
+      --moduix-toast-description-color-default: var(--moduix-color-muted-foreground);
     }
 
     &[data-type="destructive"], &[data-type="error"] {
-      --toast-bg-default: color-mix(in oklab, var(--color-destructive) 9%, var(--color-background));
-      --toast-border-color-default: color-mix(in oklab, var(--color-destructive) 35%, transparent);
-      --toast-color-default: var(--color-foreground);
-      --toast-description-color-default: var(--color-muted-foreground);
+      --moduix-toast-bg-default: color-mix(in oklab,
+        var(--moduix-color-destructive) 9%,
+        var(--moduix-color-background));
+      --moduix-toast-border-color-default: color-mix(in oklab,
+        var(--moduix-color-destructive) 35%,
+        transparent);
+      --moduix-toast-color-default: var(--moduix-color-foreground);
+      --moduix-toast-description-color-default: var(--moduix-color-muted-foreground);
     }
   }
 
   .o69bxG_title {
     align-items: center;
-    gap: var(--toast-title-gap, .5rem);
+    gap: var(--moduix-toast-title-gap, var(--moduix-spacing-2));
     color: inherit;
-    font-size: var(--toast-title-font-size, var(--text-sm));
-    font-weight: var(--toast-title-font-weight, var(--weight-semibold));
-    line-height: var(--toast-title-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-toast-title-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-toast-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-toast-title-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
     display: flex;
   }
 
   .o69bxG_description {
-    color: var(--toast-description-color, var(--toast-description-color-default, var(--color-muted-foreground)));
-    font-size: var(--toast-description-font-size, var(--text-sm));
-    line-height: var(--toast-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-toast-description-color, var(--moduix-toast-description-color-default, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-toast-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-toast-description-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
   }
 
   .o69bxG_actionTrigger {
     justify-content: center;
     align-items: center;
-    gap: var(--toast-action-gap, var(--spacing-2));
+    gap: var(--moduix-toast-action-gap, var(--moduix-spacing-2));
     width: max-content;
-    min-height: var(--toast-action-min-height, var(--size-xs));
-    margin-top: var(--toast-action-margin-top, .5rem);
-    border: var(--toast-action-border-width, var(--toast-border-width, var(--border-width-sm)))
-      solid var(--toast-action-border-color, var(--toast-trigger-border-color-default));
-    border-radius: var(--toast-action-radius, var(--radius-sm));
-    background: var(--toast-action-bg, var(--toast-trigger-bg-default));
-    color: var(--toast-action-color, var(--toast-trigger-color-default));
-    padding: var(--toast-action-padding-y, .25rem) var(--toast-action-padding-x, .5rem);
+    min-height: var(--moduix-toast-action-min-height, var(--moduix-size-xs));
+    margin-top: var(--moduix-toast-action-margin-top, var(--moduix-spacing-2));
+    border: var(--moduix-toast-action-border-width, var(--moduix-toast-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-toast-action-border-color, var(--moduix-toast-trigger-border-color-default));
+    border-radius: var(--moduix-toast-action-radius, var(--moduix-radius-sm));
+    background: var(--moduix-toast-action-bg, var(--moduix-toast-trigger-bg-default));
+    color: var(--moduix-toast-action-color, var(--moduix-toast-trigger-color-default));
+    padding: var(--moduix-toast-action-padding-y, var(--moduix-spacing-1))
+      var(--moduix-toast-action-padding-x, var(--moduix-spacing-2));
     font: inherit;
-    font-size: var(--toast-action-font-size, var(--text-xs));
-    font-weight: var(--toast-action-font-weight, var(--weight-medium));
-    line-height: var(--toast-action-line-height, var(--line-height-text-xs));
+    font-size: var(--moduix-toast-action-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-toast-action-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-toast-action-line-height, var(--moduix-line-height-text-xs));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
-    transition: background var(--transition-fast),
-      border-color var(--transition-fast),
-      color var(--transition-fast);
+    transition: background var(--moduix-transition-fast),
+      border-color var(--moduix-transition-fast),
+      color var(--moduix-transition-fast);
     display: inline-flex;
 
     &:hover {
-      background: var(--toast-action-bg-hover, var(--toast-trigger-bg-hover-default));
+      background: var(--moduix-toast-action-bg-hover, var(--moduix-toast-trigger-bg-hover-default));
     }
 
     &:focus-visible {
-      outline: var(--toast-focus-ring-width, var(--border-width-sm)) solid
-        var(--toast-focus-ring-color, var(--toast-trigger-focus-ring-color-default));
-      outline-offset: var(--toast-focus-ring-offset, 0);
+      outline: var(--moduix-toast-focus-ring-width, var(--moduix-toast-action-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+        solid
+        var(--moduix-toast-focus-ring-color, var(--moduix-toast-trigger-focus-ring-color-default));
+      outline-offset: var(--moduix-toast-focus-ring-offset, 0);
     }
   }
 
   .o69bxG_closeTrigger {
-    --close-button-size: var(--toast-close-size, 28px);
-    --close-button-icon-size: var(--toast-close-icon-size, 12px);
-    --close-button-radius: var(--toast-close-radius, var(--radius-sm));
-    --close-button-bg: var(--toast-close-bg, transparent);
-    --close-button-bg-hover: var(--toast-close-bg-hover, var(--color-muted));
-    --close-button-color: var(--toast-close-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--toast-close-color-hover, var(--color-foreground));
-    --close-button-focus-ring-color: var(--toast-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: var(--toast-close-focus-ring-offset, 2px);
-    --close-button-focus-ring-width: var(--toast-close-focus-ring-width, var(--border-width-md));
-    --close-button-transition: var(--toast-close-transition, var(--transition-default));
+    --moduix-close-button-size: var(--moduix-toast-close-size, var(--moduix-spacing-7));
+    --moduix-close-button-icon-size: var(--moduix-toast-close-icon-size, var(--moduix-spacing-3));
+    --moduix-close-button-radius: var(--moduix-toast-close-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-toast-close-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-toast-close-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-toast-close-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-toast-close-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-focus-ring-color: var(--moduix-toast-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-toast-close-focus-ring-offset, var(--moduix-focus-ring-offset));
+    --moduix-close-button-focus-ring-width: var(--moduix-toast-close-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
+    --moduix-close-button-transition: var(--moduix-toast-close-transition, var(--moduix-transition-default));
     position: absolute;
-    inset-block-start: var(--toast-close-offset-top, .5rem);
-    inset-inline-end: var(--toast-close-offset-right, .5rem);
+    inset-block-start: var(--moduix-toast-close-offset-top, var(--moduix-spacing-2));
+    inset-inline-end: var(--moduix-toast-close-offset-right, var(--moduix-spacing-2));
   }
 
   @media (width <= 40rem) {

package/dist/components/toggle/Toggle.css

@@ -1,137 +1,137 @@
-@layer ui.components {
+@layer moduix.components {
   .aGZbbW_root {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--toggle-content-gap, var(--spacing-2));
-    min-height: var(--toggle-size-md, var(--size-lg));
+    gap: var(--moduix-toggle-content-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-toggle-size-md, var(--moduix-size-md));
     border-style: solid;
-    border-width: var(--toggle-border-width, var(--border-width-sm));
-    border-radius: var(--toggle-radius, var(--radius-md));
-    padding-block: var(--toggle-padding-y-md, .5rem);
-    padding-inline: var(--toggle-padding-x-md, 1rem);
-    color: var(--toggle-color, var(--color-foreground));
+    border-width: var(--moduix-toggle-border-width, var(--moduix-border-width-sm));
+    border-radius: var(--moduix-toggle-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-toggle-padding-y-md, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-toggle-padding-x-md, var(--moduix-spacing-4));
+    color: var(--moduix-toggle-color, var(--moduix-color-foreground));
     appearance: none;
     font: inherit;
-    font-size: var(--toggle-font-size, var(--text-sm));
-    font-weight: var(--toggle-font-weight, var(--weight-medium));
-    line-height: var(--toggle-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-toggle-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-toggle-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-toggle-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    transition: background-color var(--toggle-transition, var(--transition-default)),
-      border-color var(--toggle-transition, var(--transition-default)),
-      color var(--toggle-transition, var(--transition-default)),
-      opacity var(--toggle-transition, var(--transition-default));
+    transition: background-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-toggle-transition, var(--moduix-transition-default));
     background-color: #0000;
     border-color: #0000;
     margin: 0;
     display: inline-flex;
 
     &:focus-visible {
-      outline: var(--toggle-focus-ring-width, var(--border-width-md)) solid
-        var(--toggle-focus-ring-color, var(--color-ring));
-      outline-offset: var(--toggle-focus-ring-offset, -1px);
+      outline: var(--moduix-toggle-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-toggle-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-toggle-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
     }
 
     &[data-disabled] {
-      opacity: var(--toggle-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-toggle-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
       pointer-events: none;
     }
 
     & :where(svg) {
-      width: var(--toggle-icon-size, 1rem);
-      height: var(--toggle-icon-size, 1rem);
+      width: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
       flex-shrink: 0;
       display: block;
     }
 
     &[data-variant="default"] {
-      border-color: var(--toggle-default-border-color, var(--color-secondary));
-      background-color: var(--toggle-default-bg, var(--color-secondary));
-      color: var(--toggle-default-color, var(--toggle-color, var(--color-secondary-foreground)));
+      border-color: var(--moduix-toggle-default-border-color, var(--moduix-color-secondary));
+      background-color: var(--moduix-toggle-default-bg, var(--moduix-color-secondary));
+      color: var(--moduix-toggle-default-color, var(--moduix-toggle-color, var(--moduix-color-secondary-foreground)));
 
       @media (hover: hover) {
         &[data-state="off"]:not([data-disabled]):hover {
-          background-color: var(--toggle-default-bg-hover, var(--color-accent));
+          background-color: var(--moduix-toggle-default-bg-hover, var(--moduix-color-accent));
         }
       }
 
       &[data-state="off"]:not([data-disabled]):active {
-        background-color: var(--toggle-default-bg-active, var(--color-accent));
+        background-color: var(--moduix-toggle-default-bg-active, var(--moduix-color-accent));
       }
 
       &[data-state="on"] {
-        border-color: var(--toggle-default-border-color-pressed, var(--color-primary));
-        background-color: var(--toggle-default-bg-pressed, var(--color-primary));
-        color: var(--toggle-default-color-pressed, var(--color-primary-foreground));
+        border-color: var(--moduix-toggle-default-border-color-pressed, var(--moduix-color-primary));
+        background-color: var(--moduix-toggle-default-bg-pressed, var(--moduix-color-primary));
+        color: var(--moduix-toggle-default-color-pressed, var(--moduix-color-primary-foreground));
       }
     }
 
     &[data-variant="outline"] {
-      border-color: var(--toggle-outline-border-color, var(--color-border));
-      background-color: var(--toggle-outline-bg, var(--color-background));
-      color: var(--toggle-outline-color, var(--toggle-color, var(--color-foreground)));
+      border-color: var(--moduix-toggle-outline-border-color, var(--moduix-color-border));
+      background-color: var(--moduix-toggle-outline-bg, var(--moduix-color-background));
+      color: var(--moduix-toggle-outline-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
 
       @media (hover: hover) {
         &[data-state="off"]:not([data-disabled]):hover {
-          background-color: var(--toggle-outline-bg-hover, var(--color-accent));
+          background-color: var(--moduix-toggle-outline-bg-hover, var(--moduix-color-accent));
         }
       }
 
       &[data-state="off"]:not([data-disabled]):active {
-        background-color: var(--toggle-outline-bg-active, var(--color-accent));
+        background-color: var(--moduix-toggle-outline-bg-active, var(--moduix-color-accent));
       }
 
       &[data-state="on"] {
-        border-color: var(--toggle-outline-border-color-pressed, var(--color-primary));
-        background-color: var(--toggle-outline-bg-pressed, var(--color-primary));
-        color: var(--toggle-outline-color-pressed, var(--color-primary-foreground));
+        border-color: var(--moduix-toggle-outline-border-color-pressed, var(--moduix-color-primary));
+        background-color: var(--moduix-toggle-outline-bg-pressed, var(--moduix-color-primary));
+        color: var(--moduix-toggle-outline-color-pressed, var(--moduix-color-primary-foreground));
       }
     }
 
     &[data-variant="ghost"] {
-      border-color: var(--toggle-ghost-border-color, transparent);
-      background-color: var(--toggle-ghost-bg, transparent);
-      color: var(--toggle-ghost-color, var(--toggle-color, var(--color-foreground)));
+      border-color: var(--moduix-toggle-ghost-border-color, transparent);
+      background-color: var(--moduix-toggle-ghost-bg, transparent);
+      color: var(--moduix-toggle-ghost-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
 
       @media (hover: hover) {
         &[data-state="off"]:not([data-disabled]):hover {
-          background-color: var(--toggle-ghost-bg-hover, var(--color-accent));
+          background-color: var(--moduix-toggle-ghost-bg-hover, var(--moduix-color-accent));
         }
       }
 
       &[data-state="off"]:not([data-disabled]):active {
-        background-color: var(--toggle-ghost-bg-active, var(--color-accent));
+        background-color: var(--moduix-toggle-ghost-bg-active, var(--moduix-color-accent));
       }
 
       &[data-state="on"] {
-        background-color: var(--toggle-ghost-bg-pressed, var(--color-accent));
-        color: var(--toggle-ghost-color-pressed, var(--color-foreground));
+        background-color: var(--moduix-toggle-ghost-bg-pressed, var(--moduix-color-accent));
+        color: var(--moduix-toggle-ghost-color-pressed, var(--moduix-color-foreground));
       }
     }
 
     &[data-size="xs"] {
-      min-height: var(--toggle-size-xs, var(--size-xs));
-      padding-block: var(--toggle-padding-y-xs, .25rem);
-      padding-inline: var(--toggle-padding-x-xs, .625rem);
-      font-size: var(--toggle-font-size-xs, var(--text-xs));
-      line-height: var(--toggle-line-height-xs, var(--line-height-text-xs));
+      min-height: var(--moduix-toggle-size-xs, var(--moduix-size-xs));
+      padding-block: var(--moduix-toggle-padding-y-xs, var(--moduix-spacing-0-5));
+      padding-inline: var(--moduix-toggle-padding-x-xs, var(--moduix-spacing-2-5));
+      font-size: var(--moduix-toggle-font-size-xs, var(--moduix-text-xs));
+      line-height: var(--moduix-toggle-line-height-xs, var(--moduix-line-height-text-xs));
     }
 
     &[data-size="sm"] {
-      min-height: var(--toggle-size-sm, var(--size-sm));
-      padding-block: var(--toggle-padding-y-sm, .375rem);
-      padding-inline: var(--toggle-padding-x-sm, .75rem);
+      min-height: var(--moduix-toggle-size-sm, var(--moduix-size-sm));
+      padding-block: var(--moduix-toggle-padding-y-sm, var(--moduix-spacing-1));
+      padding-inline: var(--moduix-toggle-padding-x-sm, var(--moduix-spacing-3));
     }
 
     &[data-size="lg"] {
-      min-height: var(--toggle-size-lg, var(--size-xl));
-      padding-block: var(--toggle-padding-y-lg, .625rem);
-      padding-inline: var(--toggle-padding-x-lg, 1.25rem);
-      font-size: var(--toggle-font-size-lg, var(--text-md));
-      line-height: var(--toggle-line-height-lg, var(--line-height-text-md));
+      min-height: var(--moduix-toggle-size-lg, var(--moduix-size-lg));
+      padding-block: var(--moduix-toggle-padding-y-lg, var(--moduix-spacing-1-5));
+      padding-inline: var(--moduix-toggle-padding-x-lg, var(--moduix-spacing-5));
+      font-size: var(--moduix-toggle-font-size-lg, var(--moduix-text-md));
+      line-height: var(--moduix-toggle-line-height-lg, var(--moduix-line-height-text-md));
     }
 
     &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
@@ -140,21 +140,21 @@
     }
 
     &[data-size="icon-sm"] {
-      width: var(--toggle-size-icon-sm, var(--size-sm));
-      min-width: var(--toggle-size-icon-sm, var(--size-sm));
-      height: var(--toggle-size-icon-sm, var(--size-sm));
+      width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+      min-width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+      height: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
     }
 
     &[data-size="icon-md"] {
-      width: var(--toggle-size-icon-md, var(--size-lg));
-      min-width: var(--toggle-size-icon-md, var(--size-lg));
-      height: var(--toggle-size-icon-md, var(--size-lg));
+      width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+      min-width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+      height: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
     }
 
     &[data-size="icon-lg"] {
-      width: var(--toggle-size-icon-lg, var(--size-xl));
-      min-width: var(--toggle-size-icon-lg, var(--size-xl));
-      height: var(--toggle-size-icon-lg, var(--size-xl));
+      width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+      min-width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+      height: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
     }
   }