@moduix/react 2.0.0 → 2.2.0

package/dist/components/segment-group/SegmentGroup.css

@@ -1,16 +1,16 @@
-@layer ui.components {
+@layer moduix.components {
   ._3r0tBa_root {
     box-sizing: border-box;
     isolation: isolate;
-    max-width: var(--segment-group-max-width, 100%);
+    max-width: var(--moduix-segment-group-max-width, 100%);
     align-items: stretch;
-    gap: var(--segment-group-gap, var(--spacing-1));
-    padding: var(--segment-group-padding, var(--spacing-1));
-    border: var(--segment-group-border-width, var(--border-width-sm)) solid
-      var(--segment-group-border-color, var(--color-border));
-    border-radius: var(--segment-group-radius, var(--radius-lg));
-    background-color: var(--segment-group-bg, var(--color-muted));
-    color: var(--segment-group-color, var(--color-foreground));
+    gap: var(--moduix-segment-group-gap, var(--moduix-spacing-1));
+    padding: var(--moduix-segment-group-padding, var(--moduix-spacing-1));
+    border: var(--moduix-segment-group-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-segment-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-segment-group-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-segment-group-bg, var(--moduix-color-muted));
+    color: var(--moduix-segment-group-color, var(--moduix-color-foreground));
     display: inline-flex;
     position: relative;
 
@@ -20,20 +20,20 @@
     }
 
     &[data-disabled] {
-      opacity: var(--segment-group-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-segment-group-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &[data-invalid] {
-      border-color: var(--segment-group-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-segment-group-border-color-invalid, var(--moduix-color-destructive));
     }
   }
 
   ._3r0tBa_label {
     z-index: 1;
-    color: var(--segment-group-label-color, var(--segment-group-color, var(--color-foreground)));
-    font-size: var(--segment-group-label-font-size, var(--text-sm));
-    font-weight: var(--segment-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--segment-group-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-segment-group-label-color, var(--moduix-segment-group-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-segment-group-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-segment-group-label-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-segment-group-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     position: relative;
   }
@@ -43,41 +43,41 @@
     z-index: 1;
     justify-content: center;
     align-items: center;
-    gap: var(--segment-group-item-gap, var(--spacing-2));
-    min-height: var(--segment-group-item-height, 2rem);
-    border-radius: var(--segment-group-item-radius, var(--radius-md));
-    padding-inline: var(--segment-group-item-padding-x, .875rem);
-    color: var(--segment-group-item-color, var(--color-muted-foreground));
-    font-size: var(--segment-group-item-font-size, var(--text-sm));
-    font-weight: var(--segment-group-item-font-weight, var(--weight-medium));
-    line-height: var(--segment-group-item-line-height, var(--line-height-text-sm));
+    gap: var(--moduix-segment-group-item-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-segment-group-item-height, var(--moduix-size-sm));
+    border-radius: var(--moduix-segment-group-item-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-segment-group-item-padding-x, var(--moduix-spacing-3-5));
+    color: var(--moduix-segment-group-item-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-segment-group-item-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-segment-group-item-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-segment-group-item-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    transition: color var(--segment-group-transition, var(--transition-default)),
-      opacity var(--segment-group-transition, var(--transition-default));
+    transition: color var(--moduix-segment-group-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-segment-group-transition, var(--moduix-transition-default));
     outline: 0;
     display: inline-flex;
     position: relative;
 
     @media (hover: hover) {
       &:hover:not([data-readonly], [data-disabled]) {
-        color: var(--segment-group-item-color-hover, var(--color-foreground));
+        color: var(--moduix-segment-group-item-color-hover, var(--moduix-color-foreground));
       }
     }
 
     &[data-state="checked"] {
-      color: var(--segment-group-item-color-checked, var(--color-foreground));
+      color: var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground));
     }
 
     &[data-focus-visible] {
-      outline: var(--segment-group-focus-ring-width, var(--border-width-sm)) solid
-        var(--segment-group-focus-ring-color, var(--color-ring));
-      outline-offset: var(--segment-group-focus-ring-offset, var(--border-width-sm));
+      outline: var(--moduix-segment-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-segment-group-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-segment-group-focus-ring-offset, var(--moduix-border-width-sm));
     }
 
     &[data-invalid][data-focus-visible] {
-      outline-color: var(--segment-group-focus-ring-color-invalid, var(--color-destructive));
+      outline-color: var(--moduix-segment-group-focus-ring-color-invalid, var(--moduix-color-destructive));
     }
 
     &[data-readonly], &[data-disabled] {
@@ -85,7 +85,7 @@
     }
 
     &[data-disabled] {
-      opacity: var(--segment-group-item-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &[data-orientation="vertical"] {
@@ -104,16 +104,16 @@
   }
 
   ._3r0tBa_indicator {
-    --transition-duration: var(--segment-group-indicator-transition-duration, var(--duration-normal));
-    --transition-timing-function: var(--segment-group-indicator-transition-timing-function, var(--ease-in-out));
+    --transition-duration: var(--moduix-segment-group-indicator-transition-duration, var(--moduix-duration-normal));
+    --transition-timing-function: var(--moduix-segment-group-indicator-transition-timing-function, var(--moduix-ease-in-out));
     z-index: 0;
     top: var(--top);
     left: var(--left);
     width: var(--width);
     height: var(--height);
-    border-radius: var(--segment-group-indicator-radius, var(--radius-md));
-    background-color: var(--segment-group-indicator-bg, var(--color-background));
-    box-shadow: var(--segment-group-indicator-shadow, var(--shadow-sm));
+    border-radius: var(--moduix-segment-group-indicator-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-segment-group-indicator-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-segment-group-indicator-shadow, var(--moduix-shadow-sm));
     pointer-events: none;
     position: absolute;
   }

package/dist/components/select/Select.css

@@ -1,10 +1,10 @@
-@layer ui.components {
+@layer moduix.components {
   @keyframes FGbIOa_select-content-open {
     from {
-      opacity: var(--select-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--popup-motion-starting-translate-x, 0)
-        var(--popup-motion-starting-translate-y, 0);
-      transform: scale(var(--select-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
+      opacity: var(--moduix-select-content-closed-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-popup-motion-starting-translate-x, 0)
+        var(--moduix-popup-motion-starting-translate-y, 0);
+      transform: scale(var(--moduix-select-content-closed-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
     }
 
     to {
@@ -20,47 +20,48 @@
     }
 
     to {
-      opacity: var(--select-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
-      transform: scale(var(--select-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
+      opacity: var(--moduix-select-content-closed-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-popup-motion-ending-translate-x, 0)
+        var(--moduix-popup-motion-ending-translate-y, 0);
+      transform: scale(var(--moduix-select-content-closed-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
     }
   }
 
   .FGbIOa_root {
     box-sizing: border-box;
-    width: var(--select-width, 14rem);
-    max-width: var(--select-max-width, 100%);
-    gap: var(--select-root-gap, .375rem);
+    width: var(--moduix-select-width, 14rem);
+    max-width: var(--moduix-select-max-width, 100%);
+    gap: var(--moduix-select-root-gap, var(--moduix-spacing-1-5));
     min-width: 0;
-    color: var(--select-color, var(--color-foreground));
+    color: var(--moduix-select-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
   }
 
   .FGbIOa_label {
-    color: var(--select-label-color, var(--select-color, var(--color-foreground)));
-    font-size: var(--select-label-font-size, var(--text-sm));
-    font-weight: var(--select-label-font-weight, var(--weight-medium));
-    line-height: var(--select-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-select-label-color, var(--moduix-select-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-select-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-select-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-select-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     align-items: center;
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .FGbIOa_control {
     width: 100%;
     min-width: 0;
-    color: var(--select-color, var(--color-foreground));
+    color: var(--moduix-select-color, var(--moduix-color-foreground));
     align-items: center;
     display: flex;
     position: relative;
 
     &[data-disabled] {
-      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
@@ -68,64 +69,59 @@
     box-sizing: border-box;
     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));
-    padding-inline: var(--select-trigger-padding-x-start, .875rem)
-      calc(var(--select-action-offset-right, .5rem) + var(--select-action-size, 1.5rem) +
-          var(--select-trigger-padding-x-start, .875rem));
-    background-color: var(--select-bg, var(--color-background));
+    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));
+    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5))
+      calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
+          var(--moduix-select-action-size, var(--moduix-size-xs)) +
+          var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5)));
+    background-color: var(--moduix-select-bg, var(--moduix-color-background));
     color: inherit;
     font: inherit;
     text-align: start;
-    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;
     user-select: none;
-    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));
+    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));
     justify-content: flex-start;
     align-items: center;
     margin: 0;
     display: inline-flex;
+    position: relative;
 
     &[data-placeholder-shown] {
-      color: var(--select-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &[data-state="open"] {
-      background-color: var(--select-bg-active, var(--color-muted));
-      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));
     }
 
     &[data-disabled], &[disabled] {
       cursor: default;
     }
 
-    .FGbIOa_control[data-focus] & {
-      border-color: var(--select-focus-ring-color, var(--color-ring));
-      outline-color: var(--select-focus-ring-color, var(--color-ring));
+    &:focus-visible {
+      border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
+      outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
     }
 
     .FGbIOa_control[data-invalid] & {
-      border-color: var(--select-invalid-color, var(--color-destructive));
-      outline-color: var(--select-invalid-color, var(--color-destructive));
-    }
-
-    .FGbIOa_control:not([data-disabled]) & {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-bg-hover, var(--color-accent));
-        }
-      }
+      border-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
+      outline-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
     }
   }
 
   .FGbIOa_control:has(.FGbIOa_clearTrigger:not([hidden])) .FGbIOa_trigger {
-    padding-inline-end: var(--select-trigger-padding-x-end, 4.25rem);
+    padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
   }
 
   .FGbIOa_valueText {
@@ -136,28 +132,16 @@
     overflow: hidden;
   }
 
-  .FGbIOa_indicators {
-    top: 50%;
-    right: var(--select-action-offset-right, .5rem);
-    align-items: center;
-    gap: var(--select-action-gap, .125rem);
-    pointer-events: none;
-    line-height: 0;
-    display: inline-flex;
-    position: absolute;
-    transform: translateY(-50%);
-  }
-
   .FGbIOa_indicator {
     box-sizing: border-box;
-    width: var(--select-action-size, 1.5rem);
-    height: var(--select-action-size, 1.5rem);
-    border-radius: var(--select-action-radius, var(--radius-sm));
-    background: var(--select-action-bg, transparent);
-    color: var(--select-icon-color, var(--color-muted-foreground));
-    transition: background-color var(--select-transition, var(--transition-default)),
-      color var(--select-transition, var(--transition-default)),
-      opacity var(--select-transition, var(--transition-default));
+    width: var(--moduix-select-action-size, var(--moduix-size-xs));
+    height: var(--moduix-select-action-size, var(--moduix-size-xs));
+    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));
+    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));
     border: 0;
     flex-shrink: 0;
     justify-content: center;
@@ -168,8 +152,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--select-icon-size, 1rem);
-      height: var(--select-icon-size, 1rem);
+      width: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-select-icon-size, var(--moduix-spacing-4));
       display: block;
     }
 
@@ -186,15 +170,30 @@
     pointer-events: none;
   }
 
+  .FGbIOa_trigger > .FGbIOa_indicator {
+    pointer-events: auto;
+    top: 50%;
+    position: absolute;
+    inset-inline-end: var(--moduix-select-action-offset-right, var(--moduix-spacing-2));
+    transform: translateY(-50%);
+  }
+
+  .FGbIOa_trigger > .FGbIOa_indicator:not(:is([data-disabled], [disabled])):hover {
+    @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));
+    }
+  }
+
   .FGbIOa_clearTrigger {
-    --close-button-size: var(--select-action-size, 1.5rem);
-    --close-button-icon-size: var(--select-icon-size, 1rem);
-    --close-button-radius: var(--select-action-radius, var(--radius-sm));
-    --close-button-bg: var(--select-action-bg, transparent);
-    --close-button-bg-hover: var(--select-action-bg-hover, var(--color-muted));
-    --close-button-color: var(--select-icon-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--select-action-color-hover, var(--color-foreground));
-    --close-button-transition: var(--select-transition, var(--transition-default));
+    --moduix-close-button-size: var(--moduix-select-action-size, var(--moduix-size-xs));
+    --moduix-close-button-icon-size: var(--moduix-select-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-radius: var(--moduix-select-action-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-select-action-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-transition: var(--moduix-select-transition, var(--moduix-transition-default));
     pointer-events: auto;
 
     &[hidden] {
@@ -202,6 +201,15 @@
     }
   }
 
+  .FGbIOa_control > .FGbIOa_clearTrigger {
+    top: 50%;
+    position: absolute;
+    inset-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
+        var(--moduix-select-action-size, var(--moduix-size-xs)) +
+        var(--moduix-select-action-gap, var(--moduix-spacing-0-5)));
+    transform: translateY(-50%);
+  }
+
   .FGbIOa_positioner {
     z-index: var(--z-index);
     outline: 0;
@@ -209,20 +217,20 @@
 
   .FGbIOa_content {
     box-sizing: border-box;
-    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     min-width: var(--reference-width);
     max-width: var(--available-width);
-    max-height: min(var(--select-content-max-height, 24rem), var(--available-height));
-    border: var(--select-content-border-width, var(--border-width-sm)) solid
-      var(--select-content-border-color, var(--color-border));
-    border-radius: var(--select-radius, var(--radius-md));
-    padding-block: var(--select-content-padding-y, var(--spacing-1));
-    background-color: var(--select-content-bg, var(--color-popover));
-    box-shadow: var(--select-content-shadow, var(--shadow-lg));
-    color: var(--select-content-color, var(--color-popover-foreground));
+    max-height: min(var(--moduix-select-content-max-height, 24rem), var(--available-height));
+    border: var(--moduix-select-content-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-select-content-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-select-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-select-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    background-color: var(--moduix-select-content-bg, var(--moduix-color-popover));
+    box-shadow: var(--moduix-select-content-shadow, var(--moduix-shadow-lg));
+    color: var(--moduix-select-content-color, var(--moduix-color-popover-foreground));
     transform-origin: var(--transform-origin);
     overscroll-behavior: contain;
-    scroll-padding-block: var(--select-content-padding-y, var(--spacing-1));
+    scroll-padding-block: var(--moduix-select-content-padding-y, var(--moduix-spacing-1));
     outline: 0;
     flex-direction: column;
     display: flex;
@@ -230,14 +238,14 @@
 
     &[data-state="open"] {
       animation: FGbIOa_select-content-open
-        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-select-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
     }
 
     &[data-state="closed"] {
       animation: FGbIOa_select-content-closed
-        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-select-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
       pointer-events: none;
     }
   }
@@ -245,7 +253,7 @@
   .FGbIOa_list {
     overscroll-behavior: contain;
     min-height: 0;
-    scroll-padding-block: var(--select-content-padding-y, var(--spacing-1));
+    scroll-padding-block: var(--moduix-select-content-padding-y, var(--moduix-spacing-1));
     outline: 0;
     flex-direction: column;
     display: flex;
@@ -257,36 +265,37 @@
     display: flex;
 
     & + & {
-      margin-top: var(--select-item-group-gap, var(--spacing-2));
+      margin-top: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
     }
   }
 
   .FGbIOa_itemGroupLabel {
-    padding-block: var(--select-item-group-label-padding-y, .375rem);
-    padding-inline: var(--select-item-group-label-padding-x, .625rem);
-    color: var(--select-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--select-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--select-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--select-item-group-label-line-height, var(--line-height-text-xs));
+    padding-block: var(--moduix-select-item-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-select-item-group-label-padding-x, var(--moduix-spacing-2-5));
+    color: var(--moduix-select-item-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-select-item-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
+    font-weight: var(--moduix-select-item-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
+    line-height: var(--moduix-select-item-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
   }
 
   .FGbIOa_item {
     box-sizing: border-box;
-    width: calc(100% - var(--select-item-inset-x, var(--spacing-2)));
-    min-height: var(--select-item-min-height, 2rem);
+    width: calc(100% - var(--moduix-select-item-inset-x, var(--moduix-spacing-2)));
+    min-height: var(--moduix-select-item-min-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
     justify-content: space-between;
     align-items: center;
-    gap: var(--select-item-gap, var(--spacing-2));
-    margin-inline: calc(var(--select-item-inset-x, var(--spacing-2)) / 2);
-    border: var(--select-item-border-width, 0) solid var(--select-item-border-color, transparent);
-    border-radius: var(--select-item-radius, var(--radius-sm));
-    padding-block: var(--select-item-padding-y, var(--spacing-2));
-    padding-inline: var(--select-item-padding-x, .625rem);
-    background-color: var(--select-item-bg, transparent);
-    color: var(--select-item-color, var(--select-content-color, var(--color-foreground)));
+    gap: var(--moduix-select-item-gap, var(--moduix-spacing-2));
+    margin-inline: calc(var(--moduix-select-item-inset-x, var(--moduix-spacing-2)) / 2);
+    border: var(--moduix-select-item-border-width, 0) solid
+      var(--moduix-select-item-border-color, transparent);
+    border-radius: var(--moduix-select-item-radius, var(--moduix-radius-sm));
+    padding-block: var(--moduix-select-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-select-item-padding-x, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
+    background-color: var(--moduix-select-item-bg, transparent);
+    color: var(--moduix-select-item-color, var(--moduix-select-content-color, var(--moduix-color-foreground)));
     font: inherit;
-    font-size: var(--select-item-font-size, var(--text-sm));
-    line-height: var(--select-item-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-select-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-select-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
     user-select: none;
     cursor: default;
     outline: 0;
@@ -294,18 +303,18 @@
     position: relative;
 
     &[data-highlighted] {
-      background-color: var(--select-highlight-bg, var(--color-accent));
-      color: var(--select-highlight-color, var(--color-accent-foreground));
+      background-color: var(--moduix-select-highlight-bg, var(--moduix-color-accent));
+      color: var(--moduix-select-highlight-color, var(--moduix-color-accent-foreground));
     }
 
     &[data-state="checked"] {
-      color: var(--select-item-checked-color, var(--select-item-color, var(--color-foreground)));
+      color: var(--moduix-select-item-checked-color, var(--moduix-select-item-color, var(--moduix-color-foreground)));
     }
 
     &[data-disabled] {
       pointer-events: none;
-      color: var(--select-item-disabled-color, var(--color-muted-foreground));
-      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+      color: var(--moduix-select-item-disabled-color, var(--moduix-color-muted-foreground));
+      opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
@@ -318,23 +327,23 @@
   }
 
   .FGbIOa_itemIndicator {
-    width: var(--select-item-indicator-size, .875rem);
-    height: var(--select-item-indicator-size, .875rem);
-    color: var(--select-item-indicator-color, currentColor);
+    width: var(--moduix-select-item-indicator-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-select-item-indicator-size, var(--moduix-spacing-3-5));
+    color: var(--moduix-select-item-indicator-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & > svg {
-      width: var(--select-item-indicator-icon-size, .75rem);
-      height: var(--select-item-indicator-icon-size, .75rem);
+      width: var(--moduix-select-item-indicator-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-select-item-indicator-icon-size, var(--moduix-spacing-3));
     }
   }
 
   .FGbIOa_itemTextContent {
     align-items: center;
-    gap: var(--select-item-text-content-gap, var(--spacing-2));
+    gap: var(--moduix-select-item-text-content-gap, var(--moduix-spacing-2));
     vertical-align: top;
     min-width: 0;
     max-width: 100%;
@@ -342,9 +351,9 @@
   }
 
   .FGbIOa_itemTextIcon {
-    width: var(--select-item-text-icon-size, 1rem);
-    height: var(--select-item-text-icon-size, 1rem);
-    color: var(--select-item-text-icon-color, currentColor);
+    width: var(--moduix-select-item-text-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-select-item-text-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-select-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
     align-items: center;

package/dist/components/select/Select.d.ts

@@ -14,10 +14,6 @@ type SelectFieldProps = Omit<ComponentProps<typeof Select.Control>, 'asChild' |
   indicator?: ReactNode;
   placeholder?: ComponentProps<typeof Select.ValueText>['placeholder'];
 };
-declare function SelectIndicators({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
 declare function SelectItemTextContent({
   className,
   ...props
@@ -45,7 +41,6 @@ declare const Select$1: SelectRootComponent$1 & {
   ValueText: import("react").ForwardRefExoticComponent<Omit<Select.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Select.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<Select.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Indicators: typeof SelectIndicators;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Select.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Select.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<Select.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/select/Select.js

@@ -103,18 +103,11 @@ const SelectIndicator = forwardRef(function SelectIndicator({ className, childre
 		children: children ?? /* @__PURE__ */ jsx(ChevronUpDownIcon, {})
 	});
 });
-function SelectIndicators({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "select-indicators",
-		className: clsx(Select_module_default.indicators, normalizeClassName(className)),
-		...props
-	});
-}
 const SelectField = forwardRef(function SelectField({ clearLabel, indicator, placeholder, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(SelectControl, {
 		ref,
 		...props,
-		children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValueText, { placeholder }) }), /* @__PURE__ */ jsxs(SelectIndicators, { children: [clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] })]
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, { children: [/* @__PURE__ */ jsx(SelectValueText, { placeholder }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] }), clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel })]
 	});
 });
 const SelectPositioner = forwardRef(function SelectPositioner({ className, ...props }, ref) {
@@ -238,7 +231,6 @@ const Select$1 = Object.assign(SelectRoot, {
 	ValueText: SelectValueText,
 	ClearTrigger: SelectClearTrigger,
 	Indicator: SelectIndicator,
-	Indicators: SelectIndicators,
 	Positioner: SelectPositioner,
 	Content: SelectContent,
 	List: SelectList,

package/dist/components/select/Select.module.js

@@ -5,7 +5,6 @@ var Select_module_default = {
 	"content": "FGbIOa_content",
 	"control": "FGbIOa_control",
 	"indicator": "FGbIOa_indicator",
-	"indicators": "FGbIOa_indicators",
 	"item": "FGbIOa_item",
 	"itemGroup": "FGbIOa_itemGroup",
 	"itemGroupLabel": "FGbIOa_itemGroupLabel",