@moduix/react 2.0.0 → 2.2.0

package/dist/components/menu/Menu.css

@@ -1,68 +1,71 @@
-@layer ui.components {
+@layer moduix.components {
   .AJ5G3W_trigger, .AJ5G3W_contextTrigger {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--menu-trigger-gap, .5rem);
-    min-height: var(--menu-trigger-height, var(--size-lg));
-    padding: var(--menu-trigger-padding-y, .5rem) var(--menu-trigger-padding-x, .875rem);
-    border: var(--menu-trigger-border-width, var(--border-width-sm)) solid
-      var(--menu-trigger-border-color, var(--color-border));
-    border-radius: var(--menu-trigger-radius, var(--radius-md));
-    background-color: var(--menu-trigger-bg, var(--color-background));
-    color: var(--menu-trigger-color, var(--color-foreground));
+    gap: var(--moduix-menu-trigger-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-menu-trigger-height, var(--moduix-size-md));
+    padding: var(--moduix-menu-trigger-padding-y, var(--moduix-spacing-1))
+      var(--moduix-menu-trigger-padding-x, var(--moduix-spacing-4));
+    border: var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-menu-trigger-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-menu-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-menu-trigger-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--menu-trigger-font-size, var(--text-md));
-    line-height: var(--menu-trigger-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-menu-trigger-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-menu-trigger-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-menu-trigger-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--menu-transition, var(--transition-default)),
-      border-color var(--menu-transition, var(--transition-default)),
-      color var(--menu-transition, var(--transition-default));
+    transition: background-color var(--moduix-menu-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-menu-transition, var(--moduix-transition-default)),
+      color var(--moduix-menu-transition, var(--moduix-transition-default));
     outline: 0;
     margin: 0;
     display: inline-flex;
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--menu-trigger-bg-hover);
+        background-color: var(--moduix-menu-trigger-bg-hover);
       }
     }
 
     &:active, &[data-state="open"] {
-      background-color: var(--menu-trigger-bg-active, var(--menu-trigger-bg-hover));
+      background-color: var(--moduix-menu-trigger-bg-active, var(--moduix-menu-trigger-bg-hover));
     }
 
     &:focus-visible {
-      outline: var(--menu-focus-ring-width, var(--menu-trigger-border-width, var(--border-width-sm)))
-        solid var(--menu-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--menu-focus-ring-width, var(--menu-trigger-border-width, var(--border-width-sm))) * -1);
+      outline: var(--moduix-menu-focus-ring-width, var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-menu-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-menu-focus-ring-width, var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm))) *
+          -1);
     }
 
     &[data-disabled], &:disabled {
       pointer-events: none;
-      opacity: var(--menu-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-menu-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .AJ5G3W_contextTrigger {
-    width: var(--menu-context-trigger-width, 15rem);
-    min-height: var(--menu-context-trigger-height, 10rem);
-    border-style: var(--menu-context-trigger-border-style, dashed);
+    width: var(--moduix-menu-context-trigger-width, 15rem);
+    min-height: var(--moduix-menu-context-trigger-height, 10rem);
+    border-style: var(--moduix-menu-context-trigger-border-style, dashed);
   }
 
   .AJ5G3W_triggerIcon, .AJ5G3W_indicator {
     box-sizing: border-box;
-    width: var(--menu-trigger-icon-size, 1rem);
-    height: var(--menu-trigger-icon-size, 1rem);
-    color: var(--menu-trigger-icon-color, currentColor);
+    width: var(--moduix-menu-trigger-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-menu-trigger-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-menu-trigger-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     display: inline-flex;
   }
 
-  .AJ5G3W_iconSvg {
+  .AJ5G3W_iconSvg, .AJ5G3W_indicator > svg {
     width: 100%;
     height: 100%;
   }
@@ -75,22 +78,22 @@
   }
 
   .AJ5G3W_content {
-    --arrow-size: var(--menu-arrow-size, .625rem);
-    --arrow-background: var(--menu-popup-bg, var(--color-popover));
+    --arrow-size: var(--moduix-menu-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-background: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
     box-sizing: border-box;
-    min-width: min(max(var(--reference-width, 0px), var(--menu-popup-min-width, 12rem)),
+    min-width: min(max(var(--reference-width, 0px), var(--moduix-menu-popup-min-width, 12rem)),
       var(--available-width, 100vw));
-    max-width: min(var(--menu-popup-max-width, 20rem), var(--available-width, 100vw));
-    max-height: min(var(--menu-popup-max-height, 24rem), var(--available-height, 100dvh));
-    padding-block: var(--menu-popup-padding-y, .25rem);
-    border-radius: var(--menu-popup-radius, var(--radius-md));
-    background-color: var(--menu-popup-bg, var(--color-popover));
-    color: var(--menu-popup-color, var(--color-popover-foreground));
-    outline: var(--menu-popup-border-width, var(--border-width-sm)) solid
-      var(--menu-popup-border-color, var(--color-border));
-    box-shadow: var(--menu-popup-shadow, var(--shadow-lg));
+    max-width: min(var(--moduix-menu-popup-max-width, 20rem), var(--available-width, 100vw));
+    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    padding-block: var(--moduix-menu-popup-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    border-radius: var(--moduix-menu-popup-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
+    color: var(--moduix-menu-popup-color, var(--moduix-color-popover-foreground));
+    outline: var(--moduix-menu-popup-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-popup-border-color, var(--moduix-color-border));
+    box-shadow: var(--moduix-menu-popup-shadow, var(--moduix-shadow-lg));
     transform-origin: var(--transform-origin);
-    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     flex-direction: column;
     display: flex;
     position: relative;
@@ -98,38 +101,38 @@
 
     &[data-state="open"] {
       animation: AJ5G3W_menuContentIn
-        var(--menu-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-menu-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
     }
 
     &[data-state="closed"] {
       animation: AJ5G3W_menuContentOut
-        var(--menu-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-menu-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
     }
   }
 
   .AJ5G3W_arrow {
-    --arrow-background: var(--menu-popup-bg, var(--color-popover));
+    --arrow-background: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
     z-index: -1;
   }
 
   .AJ5G3W_arrowTip {
-    border-block-start: var(--menu-popup-border-width, var(--border-width-sm)) solid
-      var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
-    border-inline-start: var(--menu-popup-border-width, var(--border-width-sm)) solid
-      var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
+    border-block-start: var(--moduix-menu-popup-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-arrow-stroke-color, var(--moduix-menu-popup-border-color, var(--moduix-color-border)));
+    border-inline-start: var(--moduix-menu-popup-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-menu-arrow-stroke-color, var(--moduix-menu-popup-border-color, var(--moduix-color-border)));
   }
 
   .AJ5G3W_item, .AJ5G3W_triggerItem, .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     box-sizing: border-box;
-    min-height: var(--menu-item-height, var(--popup-item-min-height, 2rem));
-    border-radius: var(--menu-item-radius, var(--radius-sm));
-    background-color: var(--menu-item-bg, transparent);
+    min-height: var(--moduix-menu-item-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
+    border-radius: var(--moduix-menu-item-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-menu-item-bg, transparent);
     color: inherit;
     font: inherit;
-    font-size: var(--menu-item-font-size, var(--popup-item-font-size, var(--text-sm)));
-    line-height: var(--menu-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    font-size: var(--moduix-menu-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-menu-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
     user-select: none;
     cursor: default;
     border: 0;
@@ -145,36 +148,36 @@
         content: "";
         z-index: -1;
         inset-block: 0;
-        inset-inline: var(--menu-highlight-inset-x, var(--popup-highlight-inset-x, var(--spacing-1)));
-        border-radius: var(--menu-highlight-radius, var(--popup-highlight-radius, var(--radius-sm)));
-        background-color: var(--menu-submenu-open-bg, var(--color-accent));
+        inset-inline: var(--moduix-menu-highlight-inset-x, var(--moduix-popup-highlight-inset-x, var(--moduix-spacing-1)));
+        border-radius: var(--moduix-menu-highlight-radius, var(--moduix-popup-highlight-radius, var(--moduix-radius-sm)));
+        background-color: var(--moduix-menu-submenu-open-bg, var(--moduix-color-accent));
         position: absolute;
       }
     }
 
     &[data-highlighted] {
-      color: var(--menu-highlight-color, var(--color-accent-foreground));
+      color: var(--moduix-menu-highlight-color, var(--moduix-color-accent-foreground));
     }
 
     &[data-highlighted]:before {
-      background-color: var(--menu-highlight-bg, var(--color-accent));
+      background-color: var(--moduix-menu-highlight-bg, var(--moduix-color-accent));
     }
 
     &[data-disabled] {
       pointer-events: none;
-      background-color: var(--menu-item-bg-disabled, var(--menu-item-bg, transparent));
-      color: var(--menu-item-disabled-color, var(--color-muted-foreground));
+      background-color: var(--moduix-menu-item-bg-disabled, var(--moduix-menu-item-bg, transparent));
+      color: var(--moduix-menu-item-disabled-color, var(--moduix-color-muted-foreground));
       cursor: default;
     }
 
     &[data-tone="destructive"] {
-      color: var(--menu-item-destructive-color, var(--color-destructive));
+      color: var(--moduix-menu-item-destructive-color, var(--moduix-color-destructive));
 
       &[data-highlighted] {
-        color: var(--menu-item-destructive-highlight-color, var(--menu-item-destructive-color, var(--color-destructive)));
+        color: var(--moduix-menu-item-destructive-highlight-color, var(--moduix-menu-item-destructive-color, var(--moduix-color-destructive)));
 
         &:before {
-          background-color: var(--menu-item-destructive-highlight-bg, color-mix(in oklab, var(--color-destructive) 12%, transparent));
+          background-color: var(--moduix-menu-item-destructive-highlight-bg, color-mix(in oklab, var(--moduix-color-destructive) 12%, transparent));
         }
       }
     }
@@ -182,44 +185,45 @@
 
   .AJ5G3W_item {
     align-items: center;
-    gap: var(--menu-item-gap, var(--spacing-2));
-    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
-    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
-      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    gap: var(--moduix-menu-item-gap, var(--moduix-spacing-2));
+    padding-block: var(--moduix-menu-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-item-padding-x-start, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)))
+      var(--moduix-menu-item-padding-x-end, var(--moduix-popup-item-padding-x-end, var(--moduix-spacing-3)));
     display: flex;
   }
 
   .AJ5G3W_triggerItem {
     justify-content: space-between;
     align-items: center;
-    gap: var(--menu-trigger-item-gap, var(--spacing-3));
-    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
-    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
-      var(--menu-trigger-item-padding-x-end, 1rem);
+    gap: var(--moduix-menu-trigger-item-gap, var(--moduix-spacing-3));
+    padding-block: var(--moduix-menu-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-item-padding-x-start, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)))
+      var(--moduix-menu-trigger-item-padding-x-end, var(--moduix-spacing-3));
     display: flex;
   }
 
   .AJ5G3W_triggerItemIcon {
     box-sizing: border-box;
-    width: var(--menu-trigger-item-icon-size, .875rem);
-    height: var(--menu-trigger-item-icon-size, .875rem);
+    width: var(--moduix-menu-trigger-item-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-menu-trigger-item-icon-size, var(--moduix-spacing-3-5));
     color: currentColor;
     flex-shrink: 0;
     display: inline-flex;
   }
 
   .AJ5G3W_itemGroup {
-    padding-block: var(--menu-group-padding-y, 0);
+    padding-block: var(--moduix-menu-group-padding-y, 0);
     display: grid;
   }
 
   .AJ5G3W_itemGroupLabel {
-    padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
-    padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
-      var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
-    color: var(--menu-group-label-color, var(--color-muted-foreground));
-    font-size: var(--menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
-    line-height: var(--menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    padding-block: var(--moduix-menu-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-group-label-padding-x-start, var(--moduix-popup-group-label-padding-x-start, var(--moduix-spacing-2-5)))
+      var(--moduix-menu-group-label-padding-x-end, var(--moduix-popup-group-label-padding-x-end, var(--moduix-spacing-3)));
+    color: var(--moduix-menu-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-menu-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
+    font-weight: var(--moduix-menu-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
+    line-height: var(--moduix-menu-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
     user-select: none;
     cursor: default;
     margin: 0;
@@ -231,17 +235,17 @@
 
   .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     align-items: center;
-    gap: var(--menu-check-gap, var(--popup-check-gap, .5rem));
-    grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
+    gap: var(--moduix-menu-check-gap, var(--moduix-popup-check-gap, var(--moduix-spacing-2)));
+    grid-template-columns: var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)))
       minmax(0, 1fr);
-    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
-    padding-inline: var(--menu-check-padding-x-start, var(--popup-check-padding-x-start, .625rem))
-      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    padding-block: var(--moduix-menu-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-menu-check-padding-x-start, var(--moduix-popup-check-padding-x-start, var(--moduix-spacing-2-5)))
+      var(--moduix-menu-item-padding-x-end, var(--moduix-popup-item-padding-x-end, var(--moduix-spacing-3)));
     display: grid;
 
     &[data-indicator-position="none"] {
       grid-template-columns: minmax(0, 1fr);
-      padding-inline-start: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem));
+      padding-inline-start: var(--moduix-menu-item-padding-x-start, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
 
       & > .AJ5G3W_itemIndicator {
         display: none;
@@ -254,7 +258,7 @@
 
     &[data-indicator-position="end"] {
       grid-template-columns: minmax(0, 1fr)
-        var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+        var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)));
 
       & > .AJ5G3W_itemText {
         grid-column-start: 1;
@@ -269,25 +273,25 @@
 
   .AJ5G3W_checkboxItem[data-state="checked"] {
     & > .AJ5G3W_itemIndicator {
-      background-color: var(--menu-checkbox-indicator-bg-checked, var(--menu-checkbox-indicator-bg, transparent));
-      border-color: var(--menu-checkbox-indicator-border-color-checked, var(--menu-checkbox-indicator-border-color, currentColor));
+      background-color: var(--moduix-menu-checkbox-indicator-bg-checked, var(--moduix-menu-checkbox-indicator-bg, transparent));
+      border-color: var(--moduix-menu-checkbox-indicator-border-color-checked, var(--moduix-menu-checkbox-indicator-border-color, currentColor));
     }
   }
 
   .AJ5G3W_itemIndicator {
-    width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
-    height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
-    border: var(--menu-checkbox-indicator-border-width, 0) solid
-      var(--menu-checkbox-indicator-border-color, currentColor);
-    border-radius: var(--menu-checkbox-indicator-radius, var(--radius-xs));
-    background-color: var(--menu-checkbox-indicator-bg, transparent);
+    width: var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)));
+    height: var(--moduix-menu-check-indicator-size, var(--moduix-popup-check-indicator-size, var(--moduix-spacing-3)));
+    border: var(--moduix-menu-checkbox-indicator-border-width, 0) solid
+      var(--moduix-menu-checkbox-indicator-border-color, currentColor);
+    border-radius: var(--moduix-menu-checkbox-indicator-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-menu-checkbox-indicator-bg, transparent);
     grid-column-start: 1;
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     &[data-state="checked"] {
-      color: var(--menu-item-indicator-color-checked, currentColor);
+      color: var(--moduix-menu-item-indicator-color-checked, currentColor);
     }
   }
 
@@ -304,7 +308,7 @@
 
   .AJ5G3W_itemTextContent {
     align-items: center;
-    gap: var(--menu-item-text-content-gap, var(--spacing-2));
+    gap: var(--moduix-menu-item-text-content-gap, var(--moduix-spacing-2));
     vertical-align: top;
     min-width: 0;
     max-width: 100%;
@@ -312,9 +316,9 @@
   }
 
   .AJ5G3W_itemTextIcon {
-    width: var(--menu-item-text-icon-size, 1rem);
-    height: var(--menu-item-text-icon-size, 1rem);
-    color: var(--menu-item-text-icon-color, currentColor);
+    width: var(--moduix-menu-item-text-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-menu-item-text-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-menu-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
@@ -329,30 +333,30 @@
   }
 
   .AJ5G3W_itemShortcut {
-    color: var(--menu-item-shortcut-color, var(--color-muted-foreground));
-    font-size: var(--menu-item-shortcut-font-size, var(--text-xs));
-    line-height: var(--menu-item-shortcut-line-height, var(--line-height-text-xs));
+    color: var(--moduix-menu-item-shortcut-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-menu-item-shortcut-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-menu-item-shortcut-line-height, var(--moduix-line-height-text-xs));
     white-space: nowrap;
     margin-inline-start: auto;
-    padding-inline-start: var(--menu-item-shortcut-padding-x-start, var(--spacing-4));
+    padding-inline-start: var(--moduix-menu-item-shortcut-padding-x-start, var(--moduix-spacing-4));
   }
 
   .AJ5G3W_separator {
     box-sizing: border-box;
-    height: var(--menu-separator-height, var(--border-width-sm));
-    margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
-    margin-inline: var(--menu-separator-margin-x-start, var(--popup-separator-margin-x-start, 1rem))
-      var(--menu-separator-margin-x-end, var(--popup-separator-margin-x-end, 1rem));
-    background-color: var(--menu-separator-color, var(--color-border));
+    height: var(--moduix-menu-separator-height, var(--moduix-border-width-sm));
+    margin-block: var(--moduix-menu-separator-margin-y, var(--moduix-popup-separator-margin-y, var(--moduix-spacing-1-5)));
+    margin-inline: var(--moduix-menu-separator-margin-x-start, var(--moduix-popup-separator-margin-x-start, var(--moduix-spacing-3)))
+      var(--moduix-menu-separator-margin-x-end, var(--moduix-popup-separator-margin-x-end, var(--moduix-spacing-3)));
+    background-color: var(--moduix-menu-separator-color, var(--moduix-color-border));
     border: 0;
   }
 
   @keyframes AJ5G3W_menuContentIn {
     from {
-      opacity: var(--menu-popup-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--menu-popup-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--menu-popup-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      transform: scale(var(--menu-popup-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
+      opacity: var(--moduix-menu-popup-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-menu-popup-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-menu-popup-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      transform: scale(var(--moduix-menu-popup-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
     }
 
     to {
@@ -368,10 +372,10 @@
     }
 
     to {
-      opacity: var(--menu-popup-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--menu-popup-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--menu-popup-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      transform: scale(var(--menu-popup-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
+      opacity: var(--moduix-menu-popup-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-menu-popup-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-menu-popup-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      transform: scale(var(--moduix-menu-popup-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
     }
   }
 }

package/dist/components/native-select/NativeSelect.css

@@ -1,4 +1,4 @@
-@layer ui.components {
+@layer moduix.components {
   .mei8Eq_control {
     width: fit-content;
     min-width: 0;
@@ -9,83 +9,82 @@
 
   .mei8Eq_root {
     box-sizing: border-box;
-    width: var(--select-width, 14rem);
-    max-width: var(--select-max-width, 100%);
+    width: var(--moduix-select-width, 14rem);
+    max-width: var(--moduix-select-max-width, 100%);
     min-width: 0;
-    height: var(--select-control-height, var(--size-lg));
-    border: var(--select-border-width, var(--border-width-sm)) solid
-      var(--select-border-color, var(--color-border));
-    border-radius: var(--select-radius, var(--radius-md));
+    height: var(--moduix-select-control-height, var(--moduix-size-md));
+    border: var(--moduix-select-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-select-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-select-radius, var(--moduix-radius-md));
     appearance: none;
-    background-color: var(--select-bg, var(--color-background));
-    color: var(--select-color, var(--color-foreground));
+    background-color: var(--moduix-select-bg, var(--moduix-color-background));
+    color: var(--moduix-select-color, var(--moduix-color-foreground));
     font: inherit;
-    outline: var(--select-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--select-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--moduix-select-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-select-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
     cursor: pointer;
-    transition: background-color var(--select-transition, var(--transition-default)),
-      border-color var(--select-transition, var(--transition-default)),
-      outline-color var(--select-transition, var(--transition-default)),
-      opacity var(--select-transition, var(--transition-default));
+    transition: background-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-select-transition, var(--moduix-transition-default));
     margin: 0;
-    padding-inline-start: var(--select-trigger-padding-x-start, var(--spacing-3));
-    padding-inline-end: calc(var(--select-action-offset-right, var(--spacing-1)) +
-        var(--select-action-size, var(--spacing-6)) +
-        var(--select-trigger-padding-x-start, var(--spacing-3)));
+    padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    padding-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-1)) +
+        var(--moduix-select-action-size, var(--moduix-spacing-6)) +
+        var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3)));
 
     &:focus-visible {
-      border-color: var(--select-focus-ring-color, var(--color-ring));
-      outline-color: var(--select-focus-ring-color, var(--color-ring));
+      border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
+      outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:is([data-invalid], [aria-invalid="true"]) {
-      border-color: var(--select-invalid-color, var(--color-destructive));
-      outline-color: var(--select-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
+      outline-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
     }
 
     &:is([data-disabled], :disabled) {
       pointer-events: none;
-      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &:is([multiple], [size]:not([size="1"])) {
       height: auto;
-      padding-block: var(--spacing-2);
-      padding-inline: var(--select-trigger-padding-x-start, var(--spacing-3));
+      padding-block: var(--moduix-spacing-2);
+      padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
       appearance: auto;
     }
 
-    &:not(:disabled, [data-disabled]) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-bg-hover, var(--color-accent));
-        }
-      }
-    }
-
     @media (forced-colors: active) {
       appearance: auto;
-      padding-inline-end: var(--select-trigger-padding-x-start, var(--spacing-3));
+      padding-inline-end: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
     }
   }
 
   .mei8Eq_indicator {
     top: 50%;
-    width: var(--select-action-size, var(--spacing-6));
-    height: var(--select-action-size, var(--spacing-6));
-    color: var(--select-icon-color, var(--color-muted-foreground));
+    width: var(--moduix-select-action-size, var(--moduix-spacing-6));
+    height: var(--moduix-select-action-size, var(--moduix-spacing-6));
+    border-radius: var(--moduix-select-action-radius, var(--moduix-radius-sm));
+    background: var(--moduix-select-action-bg, transparent);
+    color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));
     pointer-events: none;
+    transition: background-color var(--moduix-select-transition, var(--moduix-transition-default)),
+      color var(--moduix-select-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-select-transition, var(--moduix-transition-default));
     justify-content: center;
     align-items: center;
     line-height: 0;
     display: inline-flex;
     position: absolute;
-    inset-inline-end: var(--select-action-offset-right, var(--spacing-1));
+    inset-inline-end: var(--moduix-select-action-offset-right, var(--moduix-spacing-2));
     transform: translateY(-50%);
 
     & > svg {
-      width: var(--select-icon-size, var(--spacing-4));
-      height: var(--select-icon-size, var(--spacing-4));
+      width: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-select-icon-size, var(--moduix-spacing-4));
       display: block;
     }
 
@@ -95,7 +94,14 @@
   }
 
   .mei8Eq_root:is([data-disabled], :disabled) + .mei8Eq_indicator {
-    opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+    opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .mei8Eq_root:not(:disabled, [data-disabled]):hover + .mei8Eq_indicator {
+    @media (hover: hover) {
+      background-color: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
+    }
   }
 
   .mei8Eq_root:is([multiple], [size]:not([size="1"])) + .mei8Eq_indicator {