@moduix/react 2.1.0 → 2.2.0

package/dist/components/separator/Separator.css

@@ -1,45 +1,45 @@
-@layer ui.components {
+@layer moduix.components {
   .Jd5mwa_root {
     border: 0;
-    border-color: var(--separator-color, var(--color-border));
-    border-style: var(--separator-border-style, var(--separator-variant-border-style, solid));
+    border-color: var(--moduix-separator-color, var(--moduix-color-border));
+    border-style: var(--moduix-separator-border-style, var(--moduix-separator-variant-border-style, solid));
     flex-shrink: 0;
     display: block;
 
     &[data-size="xs"] {
-      --separator-size-thickness: var(--separator-thickness-xs, .5px);
+      --moduix-separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
     }
 
     &[data-size="sm"] {
-      --separator-size-thickness: var(--separator-thickness-sm, var(--border-width-sm));
+      --moduix-separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
     }
 
     &[data-size="md"] {
-      --separator-size-thickness: var(--separator-thickness-md, var(--border-width-md));
+      --moduix-separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
     }
 
     &[data-size="lg"] {
-      --separator-size-thickness: var(--separator-thickness-lg, 3px);
+      --moduix-separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
     }
 
     &[data-variant="dashed"] {
-      --separator-variant-border-style: dashed;
+      --moduix-separator-variant-border-style: dashed;
     }
 
     &[data-variant="dotted"] {
-      --separator-variant-border-style: dotted;
+      --moduix-separator-variant-border-style: dotted;
     }
 
     &[data-orientation="horizontal"] {
-      width: var(--separator-length-horizontal, 100%);
-      border-block-start-width: var(--separator-thickness, var(--separator-size-thickness, var(--border-width-sm)));
+      width: var(--moduix-separator-length-horizontal, 100%);
+      border-block-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
       height: 0;
     }
 
     &[data-orientation="vertical"] {
       width: 0;
-      height: var(--separator-length-vertical, 1em);
-      border-inline-start-width: var(--separator-thickness, var(--separator-size-thickness, var(--border-width-sm)));
+      height: var(--moduix-separator-length-vertical, 1em);
+      border-inline-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
     }
   }
 }

package/dist/components/sidebar/Sidebar.css

@@ -1,25 +1,25 @@
-@layer ui.components {
+@layer moduix.components {
   ._3sukta_root {
-    --splitter-width: var(--sidebar-width, 100%);
-    --splitter-height: var(--sidebar-height, 100dvh);
-    --splitter-min-height: var(--sidebar-min-height, 24rem);
-    --splitter-border-color: var(--sidebar-border-color, var(--color-border));
-    --splitter-border-width: var(--sidebar-border-width, var(--border-width-sm));
-    --splitter-radius: var(--sidebar-radius, 0);
-    --splitter-shadow: var(--sidebar-shadow, none);
-    --splitter-bg: var(--sidebar-inset-bg, var(--color-background));
-    --splitter-panel-padding: 0;
-    --splitter-panel-min-height: 0;
-    --splitter-resize-trigger-line-color: var(--sidebar-border-color, var(--color-border));
-    --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, var(--spacing-3));
+    --moduix-splitter-width: var(--moduix-sidebar-width, 100%);
+    --moduix-splitter-height: var(--moduix-sidebar-height, 100dvh);
+    --moduix-splitter-min-height: var(--moduix-sidebar-min-height, 24rem);
+    --moduix-splitter-border-color: var(--moduix-sidebar-border-color, var(--moduix-color-border));
+    --moduix-splitter-border-width: var(--moduix-sidebar-border-width, var(--moduix-border-width-sm));
+    --moduix-splitter-radius: var(--moduix-sidebar-radius, 0);
+    --moduix-splitter-shadow: var(--moduix-sidebar-shadow, none);
+    --moduix-splitter-bg: var(--moduix-sidebar-inset-bg, var(--moduix-color-background));
+    --moduix-splitter-panel-padding: 0;
+    --moduix-splitter-panel-min-height: 0;
+    --moduix-splitter-resize-trigger-line-color: var(--moduix-sidebar-border-color, var(--moduix-color-border));
+    --moduix-splitter-resize-trigger-size: var(--moduix-sidebar-resize-hit-area, var(--moduix-spacing-3));
     isolation: isolate;
   }
 
   ._3sukta_panel {
-    background-color: var(--sidebar-bg, var(--color-card));
-    color: var(--sidebar-color, var(--color-card-foreground));
-    transition: background-color var(--sidebar-transition, var(--transition-default)),
-      color var(--sidebar-transition, var(--transition-default));
+    background-color: var(--moduix-sidebar-bg, var(--moduix-color-card));
+    color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default));
     flex-direction: column;
     display: flex;
     position: relative;
@@ -27,7 +27,7 @@
 
     &[data-state="collapsed"] {
       & ._3sukta_header, & ._3sukta_footer, & ._3sukta_group {
-        padding-inline: var(--sidebar-collapsed-padding-x, var(--spacing-1));
+        padding-inline: var(--moduix-sidebar-collapsed-padding-x, var(--moduix-spacing-1));
       }
 
       & ._3sukta_header, & ._3sukta_footer {
@@ -57,8 +57,8 @@
       }
 
       & ._3sukta_menuButton {
-        width: var(--sidebar-collapsed-item-size, var(--size-md));
-        min-height: var(--sidebar-collapsed-item-size, var(--size-md));
+        width: var(--moduix-sidebar-collapsed-item-size, var(--moduix-size-md));
+        min-height: var(--moduix-sidebar-collapsed-item-size, var(--moduix-size-md));
         box-shadow: none;
         background-color: #0000;
         border-color: #0000;
@@ -84,9 +84,9 @@
   }
 
   ._3sukta_inset {
-    background-color: var(--sidebar-inset-bg, var(--color-background));
+    background-color: var(--moduix-sidebar-inset-bg, var(--moduix-color-background));
     min-width: 0;
-    color: var(--sidebar-inset-color, var(--color-foreground));
+    color: var(--moduix-sidebar-inset-color, var(--moduix-color-foreground));
     position: relative;
     overflow: auto;
   }
@@ -97,16 +97,16 @@
 
   ._3sukta_trigger {
     box-sizing: border-box;
-    width: var(--sidebar-trigger-size, var(--spacing-7));
-    min-width: var(--sidebar-trigger-size, var(--spacing-7));
-    height: var(--sidebar-trigger-size, var(--spacing-7));
-    border-radius: var(--sidebar-trigger-radius, var(--radius-full));
-    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    min-width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    height: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
-    transition: background-color var(--sidebar-transition, var(--transition-default)),
-      color var(--sidebar-transition, var(--transition-default)),
-      box-shadow var(--sidebar-transition, var(--transition-default));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
     background-color: #0000;
     border: 0;
     flex: none;
@@ -116,38 +116,38 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, var(--spacing-4));
-      height: var(--sidebar-icon-size, var(--spacing-4));
+      width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &:disabled, &[aria-disabled="true"] {
-      opacity: var(--sidebar-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-sidebar-disabled-opacity, var(--moduix-opacity-disabled));
       pointer-events: none;
     }
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--sidebar-accent-bg, var(--color-accent));
-        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+        background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+        color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
       }
     }
   }
 
   ._3sukta_trigger {
     z-index: 4;
-    margin-block-start: var(--sidebar-trigger-offset-y, var(--spacing-4));
-    margin-inline: calc(var(--sidebar-trigger-size, var(--spacing-7)) * -.5);
-    border: var(--sidebar-trigger-border-width, var(--border-width-sm)) solid
-      var(--sidebar-trigger-border-color, var(--color-border));
-    border-radius: var(--sidebar-trigger-radius, var(--radius-full));
-    background-color: var(--sidebar-trigger-bg, var(--color-background));
-    box-shadow: var(--sidebar-trigger-shadow, var(--shadow-sm));
+    margin-block-start: var(--moduix-sidebar-trigger-offset-y, var(--moduix-spacing-4));
+    margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
+    border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
     align-self: flex-start;
     position: relative;
 
@@ -156,7 +156,7 @@
     }
 
     & > svg {
-      transition: transform var(--sidebar-transition, var(--transition-default));
+      transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
     }
   }
 
@@ -166,20 +166,20 @@
 
   ._3sukta_header, ._3sukta_footer {
     align-items: center;
-    gap: var(--sidebar-gap, var(--spacing-2));
-    padding: var(--sidebar-header-footer-padding, var(--spacing-3));
+    gap: var(--moduix-sidebar-gap, var(--moduix-spacing-2));
+    padding: var(--moduix-sidebar-header-footer-padding, var(--moduix-spacing-3));
     flex: none;
     display: flex;
   }
 
   ._3sukta_header {
-    border-block-end: var(--sidebar-section-border-width, 0) solid
-      var(--sidebar-border-color, var(--color-border));
+    border-block-end: var(--moduix-sidebar-section-border-width, 0) solid
+      var(--moduix-sidebar-border-color, var(--moduix-color-border));
   }
 
   ._3sukta_footer {
-    border-block-start: var(--sidebar-section-border-width, 0) solid
-      var(--sidebar-border-color, var(--color-border));
+    border-block-start: var(--moduix-sidebar-section-border-width, 0) solid
+      var(--moduix-sidebar-border-color, var(--moduix-color-border));
   }
 
   ._3sukta_content {
@@ -193,32 +193,32 @@
   }
 
   ._3sukta_group {
-    gap: var(--sidebar-group-gap, var(--spacing-1));
-    padding: var(--sidebar-group-padding, var(--spacing-3));
+    gap: var(--moduix-sidebar-group-gap, var(--moduix-spacing-1));
+    padding: var(--moduix-sidebar-group-padding, var(--moduix-spacing-3));
     flex-direction: column;
     display: flex;
   }
 
   ._3sukta_groupLabel {
     min-width: 0;
-    padding-inline: var(--sidebar-group-label-padding-x, var(--spacing-2));
-    color: var(--sidebar-muted-color, var(--color-muted-foreground));
-    font-size: var(--sidebar-group-label-font-size, var(--text-xs));
-    font-weight: var(--sidebar-group-label-font-weight, var(--weight-medium));
-    line-height: var(--sidebar-group-label-line-height, var(--line-height-text-xs));
-    text-transform: var(--sidebar-group-label-text-transform, none);
+    padding-inline: var(--moduix-sidebar-group-label-padding-x, var(--moduix-spacing-2));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-sidebar-group-label-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-sidebar-group-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-sidebar-group-label-line-height, var(--moduix-line-height-text-xs));
+    text-transform: var(--moduix-sidebar-group-label-text-transform, none);
     margin: 0;
   }
 
   ._3sukta_groupAction {
-    width: var(--sidebar-group-action-size, var(--size-xs));
-    height: var(--sidebar-group-action-size, var(--size-xs));
-    border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
-    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    width: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
+    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
-    transition: background-color var(--sidebar-transition, var(--transition-default)),
-      color var(--sidebar-transition, var(--transition-default));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default));
     background-color: #0000;
     border: 0;
     justify-content: center;
@@ -227,27 +227,27 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, var(--spacing-4));
-      height: var(--sidebar-icon-size, var(--spacing-4));
+      width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--sidebar-accent-bg, var(--color-accent));
-        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+        background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+        color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
       }
     }
   }
 
   ._3sukta_group:has(._3sukta_groupAction) {
-    column-gap: var(--sidebar-gap, var(--spacing-2));
-    row-gap: var(--sidebar-group-gap, var(--spacing-1));
+    column-gap: var(--moduix-sidebar-gap, var(--moduix-spacing-2));
+    row-gap: var(--moduix-sidebar-group-gap, var(--moduix-spacing-1));
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
   }
@@ -271,7 +271,7 @@
   }
 
   ._3sukta_menu, ._3sukta_menuSub {
-    gap: var(--sidebar-menu-gap, var(--spacing-1));
+    gap: var(--moduix-sidebar-menu-gap, var(--moduix-spacing-1));
     flex-direction: column;
     width: 100%;
     min-width: 0;
@@ -288,27 +288,27 @@
 
   ._3sukta_menuButton, ._3sukta_menuSubButton {
     box-sizing: border-box;
-    border: var(--sidebar-menu-button-border-width, 0) solid transparent;
-    border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
+    border: var(--moduix-sidebar-menu-button-border-width, 0) solid transparent;
+    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
     width: 100%;
     min-width: 0;
-    color: var(--sidebar-color, var(--color-card-foreground));
+    color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
     appearance: none;
     font: inherit;
     text-align: start;
     cursor: pointer;
-    transition: background-color var(--sidebar-transition, var(--transition-default)),
-      border-color var(--sidebar-transition, var(--transition-default)),
-      color var(--sidebar-transition, var(--transition-default)),
-      box-shadow var(--sidebar-transition, var(--transition-default));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
     background-color: #0000;
     align-items: center;
     text-decoration: none;
     display: flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, var(--spacing-4));
-      height: var(--sidebar-icon-size, var(--spacing-4));
+      width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
       flex: none;
     }
 
@@ -324,45 +324,45 @@
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &:disabled, &[aria-disabled="true"] {
-      opacity: var(--sidebar-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-sidebar-disabled-opacity, var(--moduix-opacity-disabled));
       pointer-events: none;
     }
 
     &[data-active] {
-      background-color: var(--sidebar-accent-bg, var(--color-accent));
-      color: var(--sidebar-accent-color, var(--color-accent-foreground));
-      font-weight: var(--sidebar-active-font-weight, var(--weight-medium));
+      background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+      color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
+      font-weight: var(--moduix-sidebar-active-font-weight, var(--moduix-weight-medium));
     }
 
     @media (hover: hover) {
       &:hover:not(:disabled, [aria-disabled="true"]) {
-        background-color: var(--sidebar-accent-bg, var(--color-accent));
-        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+        background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+        color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
       }
     }
   }
 
   ._3sukta_menuButton {
-    gap: var(--sidebar-menu-button-gap, var(--spacing-2));
-    min-height: var(--sidebar-menu-button-height, var(--size-md));
-    padding-block: var(--sidebar-menu-button-padding-y, var(--spacing-1));
-    padding-inline: var(--sidebar-menu-button-padding-x, var(--spacing-2));
-    font-size: var(--sidebar-menu-button-font-size, var(--text-sm));
-    line-height: var(--sidebar-menu-button-line-height, var(--line-height-text-sm));
+    gap: var(--moduix-sidebar-menu-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-menu-button-height, var(--moduix-size-md));
+    padding-block: var(--moduix-sidebar-menu-button-padding-y, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-menu-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-menu-button-line-height, var(--moduix-line-height-text-sm));
 
     &[data-size="sm"] {
-      min-height: var(--sidebar-menu-button-height-sm, var(--size-sm));
-      font-size: var(--sidebar-menu-button-font-size-sm, var(--text-xs));
+      min-height: var(--moduix-sidebar-menu-button-height-sm, var(--moduix-size-sm));
+      font-size: var(--moduix-sidebar-menu-button-font-size-sm, var(--moduix-text-xs));
     }
 
     &[data-size="lg"] {
-      min-height: var(--sidebar-menu-button-height-lg, var(--size-lg));
+      min-height: var(--moduix-sidebar-menu-button-height-lg, var(--moduix-size-lg));
     }
 
     & > [data-slot="collapsible-indicator"], & > [data-slot="menu-indicator"] {
@@ -376,14 +376,14 @@
 
   ._3sukta_menuAction {
     z-index: 1;
-    width: var(--sidebar-menu-action-size, var(--size-xs));
-    height: var(--sidebar-menu-action-size, var(--size-xs));
-    border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
-    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    width: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
+    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
-    transition: background-color var(--sidebar-transition, var(--transition-default)),
-      color var(--sidebar-transition, var(--transition-default));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default));
     background-color: #0000;
     border: 0;
     justify-content: center;
@@ -391,54 +391,54 @@
     padding: 0;
     display: inline-flex;
     position: absolute;
-    inset-block-start: calc((var(--sidebar-menu-button-height, var(--size-md)) -
-          var(--sidebar-menu-action-size, var(--size-xs))) /
+    inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
+          var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs))) /
         2);
-    inset-inline-end: var(--sidebar-menu-button-padding-x, var(--spacing-2));
+    inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
 
     & > svg {
-      width: var(--sidebar-icon-size, var(--spacing-4));
-      height: var(--sidebar-icon-size, var(--spacing-4));
+      width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--sidebar-accent-bg, var(--color-accent));
-        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+        background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+        color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
       }
     }
   }
 
   ._3sukta_menuBadge {
     z-index: 1;
-    min-width: var(--sidebar-menu-badge-min-width, 1.5rem);
-    min-height: var(--sidebar-menu-badge-min-width, 1.5rem);
-    padding-inline: var(--sidebar-menu-badge-padding-x, var(--spacing-1));
-    border-radius: var(--radius-full);
-    background-color: var(--sidebar-accent-bg, var(--color-accent));
-    color: var(--sidebar-accent-color, var(--color-accent-foreground));
-    font-size: var(--text-xs);
+    min-width: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
+    min-height: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
+    padding-inline: var(--moduix-sidebar-menu-badge-padding-x, var(--moduix-spacing-1));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+    color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
+    font-size: var(--moduix-text-xs);
     font-variant-numeric: tabular-nums;
     justify-content: center;
     align-items: center;
     line-height: 1;
     display: inline-flex;
     position: absolute;
-    inset-block-start: calc((var(--sidebar-menu-button-height, var(--size-md)) -
-          var(--sidebar-menu-badge-min-width, 1.5rem)) /
+    inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
+          var(--moduix-sidebar-menu-badge-min-width, 1.5rem)) /
         2);
-    inset-inline-end: var(--sidebar-menu-button-padding-x, var(--spacing-2));
+    inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
   }
 
   ._3sukta_menuItem:has(._3sukta_menuAction) ._3sukta_menuButton, ._3sukta_menuItem:has(._3sukta_menuBadge) ._3sukta_menuButton {
-    padding-inline-end: calc(var(--sidebar-menu-action-size, var(--size-xs)) +
-        var(--sidebar-menu-button-padding-x, var(--spacing-2)) * 2);
+    padding-inline-end: calc(var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs)) +
+        var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 2);
   }
 
   ._3sukta_panel[data-state="collapsed"] ._3sukta_menuItem:has(._3sukta_menuAction) ._3sukta_menuButton, ._3sukta_panel[data-state="collapsed"] ._3sukta_menuItem:has(._3sukta_menuBadge) ._3sukta_menuButton {
@@ -448,19 +448,19 @@
   ._3sukta_menuSub {
     box-sizing: border-box;
     width: auto;
-    border-inline-start: var(--sidebar-menu-sub-border-width, var(--border-width-sm)) solid
-      var(--sidebar-border-color, var(--color-border));
-    margin-block-start: var(--sidebar-menu-sub-margin-y, var(--spacing-1));
-    margin-inline-start: var(--sidebar-menu-sub-margin-x, var(--spacing-4));
-    padding-inline-start: var(--sidebar-menu-sub-padding-x, var(--spacing-2));
+    border-inline-start: var(--moduix-sidebar-menu-sub-border-width, var(--moduix-border-width-sm))
+      solid var(--moduix-sidebar-border-color, var(--moduix-color-border));
+    margin-block-start: var(--moduix-sidebar-menu-sub-margin-y, var(--moduix-spacing-1));
+    margin-inline-start: var(--moduix-sidebar-menu-sub-margin-x, var(--moduix-spacing-4));
+    padding-inline-start: var(--moduix-sidebar-menu-sub-padding-x, var(--moduix-spacing-2));
   }
 
   ._3sukta_menuSubButton {
-    gap: var(--sidebar-menu-sub-button-gap, var(--spacing-2));
-    min-height: var(--sidebar-menu-sub-button-height, var(--size-sm));
-    padding-inline: var(--sidebar-menu-sub-button-padding-x, var(--spacing-2));
-    font-size: var(--sidebar-menu-sub-button-font-size, var(--text-sm));
-    line-height: var(--sidebar-menu-sub-button-line-height, var(--line-height-text-sm));
+    gap: var(--moduix-sidebar-menu-sub-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-menu-sub-button-height, var(--moduix-size-sm));
+    padding-inline: var(--moduix-sidebar-menu-sub-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-menu-sub-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-menu-sub-button-line-height, var(--moduix-line-height-text-sm));
   }
 
   ._3sukta_input {
@@ -468,7 +468,7 @@
   }
 
   ._3sukta_separator {
-    --separator-color: var(--sidebar-border-color, var(--color-border));
+    --moduix-separator-color: var(--moduix-sidebar-border-color, var(--moduix-color-border));
   }
 
   @media (prefers-reduced-motion: reduce) {