@moduix/react 2.1.0 → 2.2.0

package/dist/components/switch/Switch.css

@@ -1,7 +1,7 @@
-@layer ui.components {
+@layer moduix.components {
   .PUgkqa_root {
     align-items: center;
-    gap: var(--switch-gap, var(--spacing-2));
+    gap: var(--moduix-switch-gap, var(--moduix-spacing-2));
     vertical-align: middle;
     cursor: pointer;
     width: fit-content;
@@ -12,26 +12,26 @@
     }
 
     &[data-disabled] {
-      opacity: var(--switch-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-switch-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .PUgkqa_control {
     box-sizing: border-box;
-    width: var(--switch-width, 3rem);
-    height: var(--switch-height, var(--size-xs));
-    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, var(--spacing-5)) -
-        (var(--switch-padding, var(--spacing-0-5)) * 2) -
-        (var(--switch-border-width, var(--border-width-sm)) * 2));
-    border: var(--switch-border-width, var(--border-width-sm)) solid
-      var(--switch-border-color, var(--color-border));
-    border-radius: var(--switch-radius, var(--radius-full));
-    padding: var(--switch-padding, var(--spacing-0-5));
-    background-color: var(--switch-bg, var(--color-muted));
+    width: var(--moduix-switch-width, 3rem);
+    height: var(--moduix-switch-height, var(--moduix-size-xs));
+    --moduix-switch-thumb-translate-default: calc(var(--moduix-switch-width, 3rem) - var(--moduix-switch-thumb-size, var(--moduix-spacing-5)) -
+        (var(--moduix-switch-padding, var(--moduix-spacing-0-5)) * 2) -
+        (var(--moduix-switch-border-width, var(--moduix-border-width-sm)) * 2));
+    border: var(--moduix-switch-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-switch-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-switch-radius, var(--moduix-radius-full));
+    padding: var(--moduix-switch-padding, var(--moduix-spacing-0-5));
+    background-color: var(--moduix-switch-bg, var(--moduix-color-muted));
     user-select: none;
-    transition: background-color var(--switch-transition, var(--transition-default)),
-      border-color var(--switch-transition, var(--transition-default)),
-      opacity var(--switch-transition, var(--transition-default));
+    transition: background-color var(--moduix-switch-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-switch-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-switch-transition, var(--moduix-transition-default));
     outline: 0;
     flex-shrink: 0;
     align-items: center;
@@ -40,91 +40,93 @@
     position: relative;
 
     &[data-state="checked"] {
-      border-color: var(--switch-border-color-checked, var(--color-primary));
-      background-color: var(--switch-bg-checked, var(--color-primary));
+      border-color: var(--moduix-switch-border-color-checked, var(--moduix-color-primary));
+      background-color: var(--moduix-switch-bg-checked, var(--moduix-color-primary));
     }
 
     &[data-focus-visible] {
-      outline: var(--switch-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--switch-focus-ring-color, var(--color-ring));
-      outline-offset: var(--switch-focus-ring-offset, var(--border-width-sm));
+      outline: var(--moduix-switch-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-switch-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-switch-focus-ring-offset, var(--moduix-border-width-sm));
     }
 
     @media (hover: hover) {
       &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--switch-bg-hover, var(--color-accent));
+        background-color: var(--moduix-switch-bg-hover, var(--moduix-color-accent));
       }
 
       &[data-state="checked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--switch-bg-checked-hover, var(--switch-bg-checked, var(--color-primary)));
+        background-color: var(--moduix-switch-bg-checked-hover, var(--moduix-switch-bg-checked, var(--moduix-color-primary)));
       }
     }
   }
 
   .PUgkqa_root[data-size="xs"] .PUgkqa_control {
-    --switch-width: var(--switch-width-xs, 1.75rem);
-    --switch-height: var(--switch-height-xs, 1rem);
-    --switch-thumb-size: var(--switch-thumb-size-xs, var(--spacing-3));
+    --moduix-switch-width: var(--moduix-switch-width-xs, 1.75rem);
+    --moduix-switch-height: var(--moduix-switch-height-xs, 1rem);
+    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
   }
 
   .PUgkqa_root[data-size="sm"] .PUgkqa_control {
-    --switch-width: var(--switch-width-sm, 2.25rem);
-    --switch-height: var(--switch-height-sm, 1.25rem);
-    --switch-thumb-size: var(--switch-thumb-size-sm, var(--spacing-4));
+    --moduix-switch-width: var(--moduix-switch-width-sm, 2.25rem);
+    --moduix-switch-height: var(--moduix-switch-height-sm, 1.25rem);
+    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
   }
 
   .PUgkqa_root[data-size="md"] .PUgkqa_control {
-    --switch-width: var(--switch-width-md, 2.75rem);
-    --switch-height: var(--switch-height-md, var(--size-xs));
-    --switch-thumb-size: var(--switch-thumb-size-md, var(--spacing-5));
+    --moduix-switch-width: var(--moduix-switch-width-md, 2.75rem);
+    --moduix-switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
+    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
   }
 
   .PUgkqa_root[data-size="lg"] .PUgkqa_control {
-    --switch-width: var(--switch-width-lg, 3.25rem);
-    --switch-height: var(--switch-height-lg, 1.75rem);
-    --switch-thumb-size: var(--switch-thumb-size-lg, var(--size-xs));
+    --moduix-switch-width: var(--moduix-switch-width-lg, 3.25rem);
+    --moduix-switch-height: var(--moduix-switch-height-lg, 1.75rem);
+    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
   }
 
   .PUgkqa_root[data-size="xl"] .PUgkqa_control {
-    --switch-width: var(--switch-width-xl, 3.75rem);
-    --switch-height: var(--switch-height-xl, var(--size-sm));
-    --switch-thumb-size: var(--switch-thumb-size-xl, var(--spacing-7));
+    --moduix-switch-width: var(--moduix-switch-width-xl, 3.75rem);
+    --moduix-switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
+    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
   }
 
   .PUgkqa_thumb {
-    width: var(--switch-thumb-size, var(--spacing-5));
-    height: var(--switch-thumb-size, var(--spacing-5));
-    border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
-    border-radius: var(--switch-thumb-radius, var(--radius-full));
-    background-color: var(--switch-thumb-bg-unchecked, var(--switch-thumb-bg, var(--color-background)));
-    color: var(--switch-thumb-color-unchecked, var(--switch-thumb-color, var(--color-muted)));
-    box-shadow: var(--switch-thumb-shadow, var(--shadow-sm));
-    transition: transform var(--switch-thumb-transition, var(--switch-transition, var(--transition-default))),
-      background-color var(--switch-transition, var(--transition-default)),
-      color var(--switch-transition, var(--transition-default));
+    width: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
+    height: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
+    border: var(--moduix-switch-thumb-border-width, 0) solid
+      var(--moduix-switch-thumb-border-color, transparent);
+    border-radius: var(--moduix-switch-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-switch-thumb-bg-unchecked, var(--moduix-switch-thumb-bg, var(--moduix-color-background)));
+    color: var(--moduix-switch-thumb-color-unchecked, var(--moduix-switch-thumb-color, var(--moduix-color-muted)));
+    box-shadow: var(--moduix-switch-thumb-shadow, var(--moduix-shadow-sm));
+    transition: transform
+        var(--moduix-switch-thumb-transition, var(--moduix-switch-transition, var(--moduix-transition-default))),
+      background-color var(--moduix-switch-transition, var(--moduix-transition-default)),
+      color var(--moduix-switch-transition, var(--moduix-transition-default));
     justify-content: center;
     align-items: center;
     display: inline-flex;
     transform: translateX(0);
 
     &[data-state="checked"] {
-      background-color: var(--switch-thumb-bg-checked, var(--switch-thumb-bg, var(--color-primary-foreground)));
-      color: var(--switch-thumb-color-checked, var(--switch-thumb-color, var(--color-primary)));
-      transform: translateX(var(--switch-thumb-translate, var(--switch-thumb-translate-default)));
+      background-color: var(--moduix-switch-thumb-bg-checked, var(--moduix-switch-thumb-bg, var(--moduix-color-primary-foreground)));
+      color: var(--moduix-switch-thumb-color-checked, var(--moduix-switch-thumb-color, var(--moduix-color-primary)));
+      transform: translateX(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)));
     }
 
     & > svg {
-      width: var(--switch-thumb-icon-size, 65%);
-      height: var(--switch-thumb-icon-size, 65%);
+      width: var(--moduix-switch-thumb-icon-size, 65%);
+      height: var(--moduix-switch-thumb-icon-size, 65%);
       flex-shrink: 0;
     }
   }
 
   .PUgkqa_label {
-    color: var(--switch-label-color, var(--color-foreground));
-    font-size: var(--switch-label-font-size, var(--text-sm));
-    font-weight: var(--switch-label-font-weight, var(--weight-medium));
-    line-height: var(--switch-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-switch-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-switch-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-switch-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-switch-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
   }
 }

package/dist/components/table/Table.css

@@ -1,100 +1,102 @@
-@layer ui.components {
+@layer moduix.components {
   .-X2Dga_scrollArea {
     box-sizing: border-box;
     isolation: isolate;
-    border: var(--table-scroll-area-border-width, var(--table-border-width, var(--border-width-sm)))
-      solid var(--table-scroll-area-border-color, var(--table-border-color, var(--color-border)));
-    border-radius: var(--table-scroll-area-radius, var(--radius-lg));
-    background-color: var(--table-scroll-area-bg, var(--color-card));
+    border: var(--moduix-table-scroll-area-border-width, var(--moduix-table-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-table-scroll-area-border-color, var(--moduix-table-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-table-scroll-area-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-table-scroll-area-bg, var(--moduix-color-card));
     width: 100%;
     min-width: 0;
-    box-shadow: var(--table-scroll-area-shadow, none);
+    box-shadow: var(--moduix-table-scroll-area-shadow, none);
     position: relative;
     overflow-x: auto;
   }
 
   .-X2Dga_root {
-    --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-4));
-    --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-3));
-    --table-empty-padding-y-default: calc(var(--table-cell-padding-y-default) * 2);
+    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-4));
+    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-3));
+    --moduix-table-empty-padding-y-default: calc(var(--moduix-table-cell-padding-y-default) * 2);
     box-sizing: border-box;
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
-    color: var(--table-color, var(--color-foreground));
-    font-family: var(--table-font-family, inherit);
-    font-size: var(--table-font-size, var(--text-sm));
-    line-height: var(--table-line-height, var(--line-height-text-sm));
+    color: var(--moduix-table-color, var(--moduix-color-foreground));
+    font-family: var(--moduix-table-font-family, inherit);
+    font-size: var(--moduix-table-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-table-line-height, var(--moduix-line-height-text-sm));
     text-align: left;
     isolation: isolate;
 
     &[data-size="sm"] {
-      --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-3));
-      --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-2));
-      font-size: var(--table-font-size-sm, var(--text-xs));
-      line-height: var(--table-line-height-sm, var(--line-height-text-xs));
+      --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
+      --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
+      font-size: var(--moduix-table-font-size-sm, var(--moduix-text-xs));
+      line-height: var(--moduix-table-line-height-sm, var(--moduix-line-height-text-xs));
     }
 
     &[data-size="lg"] {
-      --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-5));
-      --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-4));
-      font-size: var(--table-font-size-lg, var(--text-md));
-      line-height: var(--table-line-height-lg, var(--line-height-text-md));
+      --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
+      --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
+      font-size: var(--moduix-table-font-size-lg, var(--moduix-text-md));
+      line-height: var(--moduix-table-line-height-lg, var(--moduix-line-height-text-md));
     }
 
     &[data-variant="outline"] {
-      border: var(--table-border-width, var(--border-width-sm)) solid
-        var(--table-border-color, var(--color-border));
+      border: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-table-border-color, var(--moduix-color-border));
     }
   }
 
   .-X2Dga_caption {
     box-sizing: border-box;
-    color: var(--table-caption-color, var(--color-muted-foreground));
-    font-size: var(--table-caption-font-size, var(--text-sm));
-    line-height: var(--table-caption-line-height, var(--line-height-text-sm));
-    padding-inline: var(--table-caption-padding-x, var(--table-cell-padding-x-default));
+    color: var(--moduix-table-caption-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-table-caption-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-table-caption-line-height, var(--moduix-line-height-text-sm));
+    padding-inline: var(--moduix-table-caption-padding-x, var(--moduix-table-cell-padding-x-default));
     text-align: left;
     text-wrap: pretty;
 
     &[data-side="top"] {
       caption-side: top;
-      padding-block: var(--table-caption-padding-edge, var(--spacing-2))
-        var(--table-caption-padding-y, var(--spacing-3));
+      padding-block: var(--moduix-table-caption-padding-edge, var(--moduix-spacing-2))
+        var(--moduix-table-caption-padding-y, var(--moduix-spacing-3));
     }
 
     &[data-side="bottom"] {
       caption-side: bottom;
-      padding-block: var(--table-caption-padding-y, var(--spacing-3))
-        var(--table-caption-padding-edge, var(--spacing-2));
+      padding-block: var(--moduix-table-caption-padding-y, var(--moduix-spacing-3))
+        var(--moduix-table-caption-padding-edge, var(--moduix-spacing-2));
     }
   }
 
   .-X2Dga_row {
-    transition: var(--table-row-transition, background-color var(--transition-default));
+    transition: var(--moduix-table-row-transition, background-color var(--moduix-transition-default));
   }
 
   .-X2Dga_header .-X2Dga_row, .-X2Dga_body .-X2Dga_row {
-    border-bottom: var(--table-border-width, var(--border-width-sm)) solid
-      var(--table-border-color, var(--color-border));
+    border-bottom: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-table-border-color, var(--moduix-color-border));
   }
 
   .-X2Dga_root[data-striped] .-X2Dga_body .-X2Dga_row:nth-child(2n):not([data-empty]) {
-    background-color: var(--table-row-bg-striped, color-mix(in oklab, var(--color-muted) 35%, transparent));
+    background-color: var(--moduix-table-row-bg-striped, color-mix(in oklab, var(--moduix-color-muted) 35%, transparent));
   }
 
   .-X2Dga_root[data-interactive] .-X2Dga_body .-X2Dga_row:not([data-empty]):hover {
-    background-color: var(--table-row-bg-hover, var(--color-muted));
+    background-color: var(--moduix-table-row-bg-hover, var(--moduix-color-muted));
   }
 
   .-X2Dga_root[data-show-column-border] :is(.-X2Dga_columnHeader, .-X2Dga_cell):not(:last-child) {
-    border-inline-end: var(--table-column-border-width, var(--table-border-width, var(--border-width-sm)))
-      solid var(--table-column-border-color, var(--table-border-color, var(--color-border)));
+    border-inline-end: var(--moduix-table-column-border-width, var(--moduix-table-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-table-column-border-color, var(--moduix-table-border-color, var(--moduix-color-border)));
   }
 
   .-X2Dga_root[data-sticky-header] .-X2Dga_header {
-    z-index: var(--table-sticky-header-z-index, 3);
-    background-color: var(--table-sticky-header-bg, var(--table-scroll-area-bg, var(--color-card)));
+    z-index: var(--moduix-table-sticky-header-z-index, 3);
+    background-color: var(--moduix-table-sticky-header-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
     position: sticky;
     inset-block-start: 0;
   }
@@ -104,42 +106,42 @@
   }
 
   .-X2Dga_footer {
-    border-top: var(--table-border-width, var(--border-width-sm)) solid
-      var(--table-border-color, var(--color-border));
-    background-color: var(--table-footer-bg, var(--color-muted));
-    color: var(--table-footer-color, var(--table-color, var(--color-foreground)));
-    font-weight: var(--table-footer-font-weight, var(--weight-medium));
+    border-top: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-table-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-table-footer-bg, var(--moduix-color-muted));
+    color: var(--moduix-table-footer-color, var(--moduix-table-color, var(--moduix-color-foreground)));
+    font-weight: var(--moduix-table-footer-font-weight, var(--moduix-weight-medium));
   }
 
   .-X2Dga_columnHeader, .-X2Dga_cell {
     z-index: 0;
-    padding-block: var(--table-cell-padding-y-default);
-    padding-inline: var(--table-cell-padding-x-default);
+    padding-block: var(--moduix-table-cell-padding-y-default);
+    padding-inline: var(--moduix-table-cell-padding-x-default);
     vertical-align: middle;
     position: relative;
 
     &[data-sticky="start"] {
-      z-index: var(--table-sticky-column-z-index, 2);
-      background-color: var(--table-sticky-column-bg, var(--table-scroll-area-bg, var(--color-card)));
+      z-index: var(--moduix-table-sticky-column-z-index, 2);
+      background-color: var(--moduix-table-sticky-column-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
       position: sticky;
       inset-inline-start: 0;
     }
 
     &[data-sticky="end"] {
-      z-index: var(--table-sticky-column-z-index, 2);
-      background-color: var(--table-sticky-column-bg, var(--table-scroll-area-bg, var(--color-card)));
+      z-index: var(--moduix-table-sticky-column-z-index, 2);
+      background-color: var(--moduix-table-sticky-column-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
       position: sticky;
       inset-inline-end: 0;
     }
   }
 
   .-X2Dga_root[data-sticky-header] .-X2Dga_header .-X2Dga_columnHeader[data-sticky] {
-    z-index: var(--table-sticky-intersection-z-index, 4);
+    z-index: var(--moduix-table-sticky-intersection-z-index, 4);
   }
 
   .-X2Dga_columnHeader {
-    color: var(--table-column-header-color, var(--color-muted-foreground));
-    font-weight: var(--table-column-header-font-weight, var(--weight-medium));
+    color: var(--moduix-table-column-header-color, var(--moduix-color-muted-foreground));
+    font-weight: var(--moduix-table-column-header-font-weight, var(--moduix-weight-medium));
     text-align: inherit;
     white-space: nowrap;
   }
@@ -155,8 +157,8 @@
   }
 
   .-X2Dga_empty {
-    padding-block: var(--table-empty-padding-y, var(--table-empty-padding-y-default));
-    color: var(--table-empty-color, var(--color-muted-foreground));
+    padding-block: var(--moduix-table-empty-padding-y, var(--moduix-table-empty-padding-y-default));
+    color: var(--moduix-table-empty-color, var(--moduix-color-muted-foreground));
     text-align: center;
   }
 }

package/dist/components/tabs/Tabs.css

@@ -1,9 +1,9 @@
-@layer ui.components {
+@layer moduix.components {
   .ostTjG_root {
     box-sizing: border-box;
-    gap: var(--tabs-gap, var(--spacing-3));
+    gap: var(--moduix-tabs-gap, var(--moduix-spacing-3));
     min-width: 0;
-    color: var(--tabs-color, var(--color-foreground));
+    color: var(--moduix-tabs-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
@@ -17,26 +17,26 @@
     box-sizing: border-box;
     z-index: 0;
     align-items: stretch;
-    gap: var(--tabs-list-gap, var(--spacing-1));
+    gap: var(--moduix-tabs-list-gap, var(--moduix-spacing-1));
     width: fit-content;
     max-width: 100%;
-    padding: var(--tabs-list-padding-y, var(--tabs-list-padding, var(--spacing-1)))
-      var(--tabs-list-padding-x, var(--tabs-list-padding, var(--spacing-1)));
-    border: var(--tabs-list-border-width, var(--border-width-sm)) solid
-      var(--tabs-list-border-color, var(--color-border));
-    border-radius: var(--tabs-radius, var(--radius-lg));
-    background-color: var(--tabs-list-bg, var(--color-muted));
+    padding: var(--moduix-tabs-list-padding-y, var(--moduix-tabs-list-padding, var(--moduix-spacing-1)))
+      var(--moduix-tabs-list-padding-x, var(--moduix-tabs-list-padding, var(--moduix-spacing-1)));
+    border: var(--moduix-tabs-list-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tabs-list-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tabs-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-tabs-list-bg, var(--moduix-color-muted));
     display: inline-flex;
     position: relative;
 
     &[data-orientation="vertical"] {
-      width: var(--tabs-vertical-list-width, 12rem);
-      min-width: var(--tabs-vertical-list-width, 12rem);
+      width: var(--moduix-tabs-vertical-list-width, 12rem);
+      min-width: var(--moduix-tabs-vertical-list-width, 12rem);
       flex-direction: column;
     }
 
     .ostTjG_root[data-variant="line"] & {
-      border-width: 0 0 var(--tabs-list-border-width, var(--border-width-sm));
+      border-width: 0 0 var(--moduix-tabs-list-border-width, var(--moduix-border-width-sm));
       background-color: #0000;
       border-radius: 0;
       width: 100%;
@@ -44,8 +44,8 @@
     }
 
     .ostTjG_root[data-orientation="vertical"][data-variant="line"] & {
-      width: var(--tabs-vertical-list-width, 12rem);
-      border-width: 0 var(--tabs-list-border-width, var(--border-width-sm)) 0 0;
+      width: var(--moduix-tabs-vertical-list-width, 12rem);
+      border-width: 0 var(--moduix-tabs-list-border-width, var(--moduix-border-width-sm)) 0 0;
     }
   }
 
@@ -54,21 +54,21 @@
     z-index: 1;
     justify-content: center;
     align-items: center;
-    gap: var(--tabs-tab-content-gap, var(--spacing-2));
-    height: var(--tabs-tab-height, var(--size-sm));
+    gap: var(--moduix-tabs-tab-content-gap, var(--moduix-spacing-2));
+    height: var(--moduix-tabs-tab-height, var(--moduix-size-sm));
     appearance: none;
-    border-radius: var(--tabs-tab-radius, var(--radius-md));
-    padding-inline: var(--tabs-tab-padding-x, var(--spacing-2-5));
-    color: var(--tabs-tab-color, var(--color-muted-foreground));
+    border-radius: var(--moduix-tabs-tab-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-tabs-tab-padding-x, var(--moduix-spacing-2-5));
+    color: var(--moduix-tabs-tab-color, var(--moduix-color-muted-foreground));
     font: inherit;
-    font-size: var(--tabs-tab-font-size, var(--text-sm));
-    font-weight: var(--tabs-tab-font-weight, var(--weight-medium));
-    line-height: var(--tabs-tab-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-tabs-tab-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-tabs-tab-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tabs-tab-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    transition: color var(--tabs-tab-transition, var(--transition-default)),
-      opacity var(--tabs-tab-transition, var(--transition-default));
+    transition: color var(--moduix-tabs-tab-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-tabs-tab-transition, var(--moduix-transition-default));
     background: none;
     border: 0;
     outline: 0;
@@ -78,12 +78,12 @@
     position: relative;
 
     &[data-selected] {
-      color: var(--tabs-tab-color-active, var(--color-foreground));
+      color: var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground));
     }
 
     @media (hover: hover) {
       &:hover {
-        color: var(--tabs-tab-color-hover, var(--tabs-tab-color-active, var(--color-foreground)));
+        color: var(--moduix-tabs-tab-color-hover, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
       }
     }
 
@@ -91,9 +91,9 @@
       &:before {
         content: "";
         border-radius: inherit;
-        outline: var(--tabs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-          solid var(--tabs-focus-ring-color, var(--color-ring));
-        outline-offset: var(--tabs-focus-ring-offset, 0);
+        outline: var(--moduix-tabs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+          solid var(--moduix-tabs-focus-ring-color, var(--moduix-color-ring));
+        outline-offset: var(--moduix-tabs-focus-ring-offset, 0);
         position: absolute;
         inset: 0;
       }
@@ -101,14 +101,14 @@
 
     &[disabled], &[data-disabled] {
       cursor: default;
-      opacity: var(--tabs-tab-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tabs-tab-disabled-opacity, var(--moduix-opacity-disabled));
       pointer-events: none;
     }
 
     & > svg {
-      width: var(--tabs-tab-icon-size, var(--spacing-4));
-      height: var(--tabs-tab-icon-size, var(--spacing-4));
-      color: var(--tabs-tab-icon-color, currentColor);
+      width: var(--moduix-tabs-tab-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-tabs-tab-icon-size, var(--moduix-spacing-4));
+      color: var(--moduix-tabs-tab-icon-color, currentColor);
       flex-shrink: 0;
     }
   }
@@ -118,26 +118,26 @@
     top: 50%;
     left: var(--left, 0);
     width: var(--width, 0);
-    height: var(--tabs-indicator-size, var(--spacing-8));
-    border-radius: var(--tabs-indicator-radius, var(--radius-md));
-    background-color: var(--tabs-indicator-bg, var(--color-background));
-    box-shadow: var(--tabs-indicator-shadow, var(--shadow-sm));
-    transition: width var(--tabs-indicator-transition, var(--transition-default)),
-      height var(--tabs-indicator-transition, var(--transition-default)),
-      top var(--tabs-indicator-transition, var(--transition-default)),
-      left var(--tabs-indicator-transition, var(--transition-default));
+    height: var(--moduix-tabs-indicator-size, var(--moduix-spacing-8));
+    border-radius: var(--moduix-tabs-indicator-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-tabs-indicator-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-tabs-indicator-shadow, var(--moduix-shadow-sm));
+    transition: width var(--moduix-tabs-indicator-transition, var(--moduix-transition-default)),
+      height var(--moduix-tabs-indicator-transition, var(--moduix-transition-default)),
+      top var(--moduix-tabs-indicator-transition, var(--moduix-transition-default)),
+      left var(--moduix-tabs-indicator-transition, var(--moduix-transition-default));
     position: absolute;
     translate: 0 -50%;
 
     .ostTjG_root[data-variant="line"] & {
-      height: var(--tabs-line-indicator-size, var(--spacing-0-5));
-      border-radius: var(--tabs-line-indicator-radius, var(--radius-full));
-      background-color: var(--tabs-line-indicator-bg, var(--tabs-tab-color-active, var(--color-foreground)));
+      height: var(--moduix-tabs-line-indicator-size, var(--moduix-spacing-0-5));
+      border-radius: var(--moduix-tabs-line-indicator-radius, var(--moduix-radius-full));
+      background-color: var(--moduix-tabs-line-indicator-bg, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
       box-shadow: none;
-      transition: width var(--tabs-line-indicator-transition, var(--transition-default)),
-        height var(--tabs-line-indicator-transition, var(--transition-default)),
-        top var(--tabs-line-indicator-transition, var(--transition-default)),
-        left var(--tabs-line-indicator-transition, var(--transition-default));
+      transition: width var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
+        height var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
+        top var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
+        left var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default));
       top: auto;
       bottom: 0;
       translate: none;
@@ -145,13 +145,15 @@
 
     &[data-orientation="vertical"] {
       top: var(--top, 0);
-      width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, var(--spacing-1))) * 2));
+      width: calc(100% -
+          (var(--moduix-tabs-list-padding-x, var(--moduix-tabs-list-padding, var(--moduix-spacing-1))) *
+            2));
       height: var(--height, 0);
       left: 50%;
       translate: -50%;
 
       .ostTjG_root[data-variant="line"] & {
-        width: var(--tabs-line-indicator-size, var(--spacing-0-5));
+        width: var(--moduix-tabs-line-indicator-size, var(--moduix-spacing-0-5));
         bottom: auto;
         left: 0;
         translate: none;
@@ -161,23 +163,23 @@
 
   .ostTjG_content {
     box-sizing: border-box;
-    border: var(--tabs-border-width, var(--border-width-sm)) solid
-      var(--tabs-border-color, var(--color-border));
-    border-radius: var(--tabs-radius, var(--radius-lg));
-    background-color: var(--tabs-bg, var(--color-background));
+    border: var(--moduix-tabs-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tabs-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tabs-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-tabs-bg, var(--moduix-color-background));
     min-width: 0;
-    padding: var(--tabs-panel-padding, var(--spacing-4));
-    color: var(--tabs-panel-color, var(--tabs-color, var(--color-foreground)));
-    font-size: var(--tabs-panel-font-size, var(--text-sm));
-    line-height: var(--tabs-panel-line-height, var(--line-height-text-sm));
+    padding: var(--moduix-tabs-panel-padding, var(--moduix-spacing-4));
+    color: var(--moduix-tabs-panel-color, var(--moduix-tabs-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-tabs-panel-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tabs-panel-line-height, var(--moduix-line-height-text-sm));
     outline: 0;
     flex: 1;
     margin: 0;
 
     &:focus-visible {
-      outline: var(--tabs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--tabs-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tabs-panel-focus-ring-offset, var(--focus-ring-inset-offset));
+      outline: var(--moduix-tabs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-tabs-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-tabs-panel-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
       border-radius: inherit;
     }