@moduix/react 2.0.0 → 2.1.0

package/dist/components/listbox/Listbox.css

@@ -25,20 +25,20 @@
   .SHhhXW_input {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--listbox-input-height, var(--size-lg));
+    min-height: var(--listbox-input-height, var(--size-md));
     border: var(--listbox-input-border-width, var(--listbox-border-width, var(--border-width-sm)))
       solid var(--listbox-input-border-color, var(--listbox-border-color, var(--color-border)));
     border-radius: var(--listbox-input-radius, var(--listbox-radius, var(--radius-md)));
-    padding: var(--listbox-input-padding-y, var(--spacing-2))
+    padding: var(--listbox-input-padding-y, var(--spacing-1))
       var(--listbox-input-padding-x, var(--spacing-3));
     background-color: var(--listbox-input-bg, var(--color-background));
     color: var(--listbox-input-color, var(--listbox-color, var(--color-foreground)));
     font: inherit;
     font-size: var(--listbox-input-font-size, var(--text-md));
     line-height: var(--listbox-input-line-height, var(--line-height-text-md));
-    outline: var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--border-width-sm)))
+    outline: var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: calc(var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--border-width-sm))) *
+    outline-offset: calc(var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))) *
         -1);
     transition: border-color var(--listbox-transition, var(--transition-default)),
       outline-color var(--listbox-transition, var(--transition-default)),
@@ -80,8 +80,8 @@
   .SHhhXW_filterIcon {
     z-index: 1;
     top: 50%;
-    width: var(--listbox-filter-icon-size, 1rem);
-    height: var(--listbox-filter-icon-size, 1rem);
+    width: var(--listbox-filter-icon-size, var(--spacing-4));
+    height: var(--listbox-filter-icon-size, var(--spacing-4));
     color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
     pointer-events: none;
     position: absolute;
@@ -90,12 +90,13 @@
   }
 
   .SHhhXW_filter .SHhhXW_input {
-    min-height: var(--listbox-filter-height, var(--listbox-input-height, var(--size-lg)));
+    min-height: var(--listbox-filter-height, var(--listbox-input-height, var(--size-md)));
     background-color: var(--listbox-bg, var(--color-background));
-    padding-inline-start: calc(var(--listbox-filter-padding-x, var(--spacing-3)) + var(--listbox-filter-icon-size, 1rem) +
+    padding-inline-start: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
+        var(--listbox-filter-icon-size, var(--spacing-4)) +
         var(--listbox-filter-input-padding-x, var(--spacing-2)));
     padding-inline-end: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
-        var(--listbox-filter-action-size, 1.5rem) +
+        var(--listbox-filter-action-size, var(--size-xs)) +
         var(--listbox-filter-input-padding-x, var(--spacing-2)));
 
     &:focus-visible {
@@ -106,13 +107,13 @@
   .SHhhXW_clearTrigger {
     z-index: 1;
     top: 50%;
-    --close-button-size: var(--listbox-filter-action-size, 1.5rem);
+    --close-button-size: var(--listbox-filter-action-size, var(--size-xs));
     --close-button-radius: var(--listbox-filter-action-radius, var(--radius-sm));
     --close-button-bg: var(--listbox-filter-action-bg, transparent);
     --close-button-bg-hover: var(--listbox-filter-action-bg-hover, var(--color-muted));
     --close-button-color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--listbox-filter-action-color-hover, var(--color-foreground));
-    --close-button-icon-size: var(--listbox-filter-icon-size, 1rem);
+    --close-button-icon-size: var(--listbox-filter-icon-size, var(--spacing-4));
     --close-button-transition: var(--listbox-transition, var(--transition-default));
     position: absolute;
     inset-inline-end: var(--listbox-filter-padding-x, var(--spacing-3));
@@ -126,14 +127,15 @@
     border: var(--listbox-border-width, var(--border-width-sm)) solid
       var(--listbox-border-color, var(--color-border));
     border-radius: var(--listbox-radius, var(--radius-md));
-    padding-block: var(--listbox-content-padding-y, var(--spacing-1));
+    padding-block: var(--listbox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     background-color: var(--listbox-bg, var(--color-background));
     color: var(--listbox-color, var(--color-foreground));
-    outline: var(--listbox-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--listbox-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     overscroll-behavior: auto;
     scrollbar-gutter: stable;
-    scroll-padding-block: var(--listbox-content-padding-y, var(--spacing-1));
+    scroll-padding-block: var(--listbox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     transition: border-color var(--listbox-transition, var(--transition-default)),
       outline-color var(--listbox-transition, var(--transition-default));
     flex-direction: column;
@@ -175,32 +177,32 @@
   }
 
   .SHhhXW_itemGroupLabel {
-    padding-block: var(--listbox-item-group-label-padding-y, var(--spacing-1));
+    padding-block: var(--listbox-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
     padding-inline: var(--listbox-item-group-label-padding-x, var(--spacing-2));
-    color: var(--listbox-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--listbox-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--listbox-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--listbox-item-group-label-line-height, var(--line-height-text-xs));
+    color: var(--listbox-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
+    font-size: var(--listbox-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--listbox-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--listbox-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     user-select: none;
   }
 
   .SHhhXW_item {
     box-sizing: border-box;
     width: calc(100% - var(--listbox-item-inset-x, var(--spacing-2)));
-    min-height: var(--listbox-item-min-height, 2rem);
-    grid-template-columns: minmax(0, 1fr) var(--listbox-item-indicator-size, 1rem);
+    min-height: var(--listbox-item-min-height, var(--popup-item-min-height, var(--size-sm)));
+    grid-template-columns: minmax(0, 1fr) var(--listbox-item-indicator-size, var(--spacing-4));
     align-items: center;
     gap: var(--listbox-item-gap, var(--spacing-2));
     margin-inline: calc(var(--listbox-item-inset-x, var(--spacing-2)) / 2);
     border: var(--listbox-item-border-width, 0) solid var(--listbox-item-border-color, transparent);
     border-radius: var(--listbox-item-radius, var(--radius-sm));
-    padding-block: var(--listbox-item-padding-y, var(--spacing-2));
-    padding-inline: var(--listbox-item-padding-x, var(--spacing-3));
+    padding-block: var(--listbox-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--listbox-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     background-color: var(--listbox-item-bg, transparent);
     color: var(--listbox-item-color, var(--listbox-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--listbox-item-font-size, var(--text-sm));
-    line-height: var(--listbox-item-line-height, var(--line-height-text-sm));
+    font-size: var(--listbox-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--listbox-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     user-select: none;
     cursor: pointer;
     transition: background-color var(--listbox-transition, var(--transition-default)),
@@ -262,8 +264,8 @@
   }
 
   .SHhhXW_itemIndicator {
-    width: var(--listbox-item-indicator-size, 1rem);
-    height: var(--listbox-item-indicator-size, 1rem);
+    width: var(--listbox-item-indicator-size, var(--spacing-4));
+    height: var(--listbox-item-indicator-size, var(--spacing-4));
     color: var(--listbox-item-indicator-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -271,8 +273,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--listbox-item-indicator-icon-size, .75rem);
-      height: var(--listbox-item-indicator-icon-size, .75rem);
+      width: var(--listbox-item-indicator-icon-size, var(--spacing-3));
+      height: var(--listbox-item-indicator-icon-size, var(--spacing-3));
     }
 
     &[data-state="unchecked"] {
@@ -296,8 +298,8 @@
   }
 
   .SHhhXW_itemTextIcon {
-    width: var(--listbox-item-text-icon-size, 1rem);
-    height: var(--listbox-item-text-icon-size, 1rem);
+    width: var(--listbox-item-text-icon-size, var(--spacing-4));
+    height: var(--listbox-item-text-icon-size, var(--spacing-4));
     color: var(--listbox-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;

package/dist/components/menu/Menu.css

@@ -3,17 +3,19 @@
     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);
+    gap: var(--menu-trigger-gap, var(--spacing-2));
+    min-height: var(--menu-trigger-height, var(--size-md));
+    padding: var(--menu-trigger-padding-y, var(--spacing-1))
+      var(--menu-trigger-padding-x, var(--spacing-4));
     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));
     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(--menu-trigger-font-size, var(--text-sm));
+    font-weight: var(--menu-trigger-font-weight, var(--weight-medium));
+    line-height: var(--menu-trigger-line-height, var(--line-height-text-sm));
     user-select: none;
     cursor: pointer;
     transition: background-color var(--menu-transition, var(--transition-default)),
@@ -53,8 +55,8 @@
 
   .AJ5G3W_triggerIcon, .AJ5G3W_indicator {
     box-sizing: border-box;
-    width: var(--menu-trigger-icon-size, 1rem);
-    height: var(--menu-trigger-icon-size, 1rem);
+    width: var(--menu-trigger-icon-size, var(--spacing-4));
+    height: var(--menu-trigger-icon-size, var(--spacing-4));
     color: var(--menu-trigger-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -62,7 +64,7 @@
     display: inline-flex;
   }
 
-  .AJ5G3W_iconSvg {
+  .AJ5G3W_iconSvg, .AJ5G3W_indicator > svg {
     width: 100%;
     height: 100%;
   }
@@ -75,14 +77,14 @@
   }
 
   .AJ5G3W_content {
-    --arrow-size: var(--menu-arrow-size, .625rem);
+    --arrow-size: var(--menu-arrow-size, var(--spacing-2-5));
     --arrow-background: var(--menu-popup-bg, var(--color-popover));
     box-sizing: border-box;
     min-width: min(max(var(--reference-width, 0px), var(--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);
+    padding-block: var(--menu-popup-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     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));
@@ -123,7 +125,7 @@
 
   .AJ5G3W_item, .AJ5G3W_triggerItem, .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     box-sizing: border-box;
-    min-height: var(--menu-item-height, var(--popup-item-min-height, 2rem));
+    min-height: var(--menu-item-height, var(--popup-item-min-height, var(--size-sm)));
     border-radius: var(--menu-item-radius, var(--radius-sm));
     background-color: var(--menu-item-bg, transparent);
     color: inherit;
@@ -183,9 +185,9 @@
   .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));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, var(--spacing-3)))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, var(--spacing-3)));
     display: flex;
   }
 
@@ -193,16 +195,16 @@
     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);
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, var(--spacing-3)))
+      var(--menu-trigger-item-padding-x-end, var(--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(--menu-trigger-item-icon-size, var(--spacing-3-5));
+    height: var(--menu-trigger-item-icon-size, var(--spacing-3-5));
     color: currentColor;
     flex-shrink: 0;
     display: inline-flex;
@@ -214,11 +216,12 @@
   }
 
   .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));
+    padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, var(--spacing-2-5)))
+      var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, var(--spacing-3)));
+    color: var(--menu-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
     font-size: var(--menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--menu-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
     line-height: var(--menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     user-select: none;
     cursor: default;
@@ -231,17 +234,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(--menu-check-gap, var(--popup-check-gap, var(--spacing-2)));
+    grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--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(--menu-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-check-padding-x-start, var(--popup-check-padding-x-start, var(--spacing-2-5)))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, var(--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(--menu-item-padding-x-start, var(--popup-item-padding-x-start, var(--spacing-3)));
 
       & > .AJ5G3W_itemIndicator {
         display: none;
@@ -254,7 +257,7 @@
 
     &[data-indicator-position="end"] {
       grid-template-columns: minmax(0, 1fr)
-        var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+        var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)));
 
       & > .AJ5G3W_itemText {
         grid-column-start: 1;
@@ -275,8 +278,8 @@
   }
 
   .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));
+    width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)));
+    height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)));
     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));
@@ -312,8 +315,8 @@
   }
 
   .AJ5G3W_itemTextIcon {
-    width: var(--menu-item-text-icon-size, 1rem);
-    height: var(--menu-item-text-icon-size, 1rem);
+    width: var(--menu-item-text-icon-size, var(--spacing-4));
+    height: var(--menu-item-text-icon-size, var(--spacing-4));
     color: var(--menu-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -340,9 +343,9 @@
   .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));
+    margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, var(--spacing-1-5)));
+    margin-inline: var(--menu-separator-margin-x-start, var(--popup-separator-margin-x-start, var(--spacing-3)))
+      var(--menu-separator-margin-x-end, var(--popup-separator-margin-x-end, var(--spacing-3)));
     background-color: var(--menu-separator-color, var(--color-border));
     border: 0;
   }

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

@@ -12,7 +12,7 @@
     width: var(--select-width, 14rem);
     max-width: var(--select-max-width, 100%);
     min-width: 0;
-    height: var(--select-control-height, var(--size-lg));
+    height: var(--select-control-height, var(--size-md));
     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));
@@ -20,8 +20,9 @@
     background-color: var(--select-bg, var(--color-background));
     color: var(--select-color, var(--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(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     cursor: pointer;
     transition: background-color var(--select-transition, var(--transition-default)),
       border-color var(--select-transition, var(--transition-default)),
@@ -55,14 +56,6 @@
       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));
@@ -73,14 +66,19 @@
     top: 50%;
     width: var(--select-action-size, var(--spacing-6));
     height: var(--select-action-size, var(--spacing-6));
+    border-radius: var(--select-action-radius, var(--radius-sm));
+    background: var(--select-action-bg, transparent);
     color: var(--select-icon-color, var(--color-muted-foreground));
     pointer-events: none;
+    transition: background-color var(--select-transition, var(--transition-default)),
+      color var(--select-transition, var(--transition-default)),
+      opacity var(--select-transition, var(--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(--select-action-offset-right, var(--spacing-2));
     transform: translateY(-50%);
 
     & > svg {
@@ -98,6 +96,13 @@
     opacity: var(--select-disabled-opacity, var(--opacity-disabled));
   }
 
+  .mei8Eq_root:not(:disabled, [data-disabled]):hover + .mei8Eq_indicator {
+    @media (hover: hover) {
+      background-color: var(--select-action-bg-hover, var(--color-muted));
+      color: var(--select-action-color-hover, var(--color-foreground));
+    }
+  }
+
   .mei8Eq_root:is([multiple], [size]:not([size="1"])) + .mei8Eq_indicator {
     display: none;
   }

package/dist/components/number-input/NumberInput.css

@@ -38,11 +38,11 @@
   }
 
   .ZjEX8G_decrementTrigger, .ZjEX8G_incrementTrigger {
-    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--border-width-sm)));
+    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     box-sizing: border-box;
-    width: var(--number-input-control-height, var(--size-lg));
-    min-width: var(--number-input-control-height, var(--size-lg));
-    height: var(--number-input-control-height, var(--size-lg));
+    width: var(--number-input-control-height, var(--size-md));
+    min-width: var(--number-input-control-height, var(--size-md));
+    height: var(--number-input-control-height, var(--size-md));
     border: var(--number-input-border-width, var(--border-width-sm))
       var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
     background-color: var(--number-input-button-bg, var(--color-background));
@@ -86,35 +86,35 @@
     }
 
     & > svg {
-      width: var(--number-input-icon-size, .875rem);
-      height: var(--number-input-icon-size, .875rem);
+      width: var(--number-input-icon-size, var(--spacing-3-5));
+      height: var(--number-input-icon-size, var(--spacing-3-5));
       flex-shrink: 0;
     }
   }
 
   .ZjEX8G_decrementTrigger {
-    border-radius: var(--number-input-radius, var(--radius-md)) 0 0
-      var(--number-input-radius, var(--radius-md));
-    border-right: 0;
+    border-inline-end: 0;
+    border-start-start-radius: var(--number-input-radius, var(--radius-md));
+    border-end-start-radius: var(--number-input-radius, var(--radius-md));
   }
 
   .ZjEX8G_incrementTrigger {
-    border-radius: 0 var(--number-input-radius, var(--radius-md))
-      var(--number-input-radius, var(--radius-md)) 0;
-    border-left: 0;
+    border-inline-start: 0;
+    border-start-end-radius: var(--number-input-radius, var(--radius-md));
+    border-end-end-radius: var(--number-input-radius, var(--radius-md));
   }
 
   .ZjEX8G_input {
-    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--border-width-sm)));
+    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     box-sizing: border-box;
     width: var(--number-input-input-width, 6rem);
-    height: var(--number-input-control-height, var(--size-lg));
+    height: var(--number-input-control-height, var(--size-md));
     border-top: var(--number-input-border-width, var(--border-width-sm))
       var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
     border-bottom: var(--number-input-border-width, var(--border-width-sm))
       var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
-    padding: var(--number-input-input-padding-y, .5rem)
-      var(--number-input-input-padding-x, .75rem);
+    padding: var(--number-input-input-padding-y, var(--spacing-1))
+      var(--number-input-input-padding-x, var(--spacing-3));
     background-color: var(--number-input-input-bg, var(--color-background));
     color: var(--number-input-input-color, var(--color-foreground));
     font: inherit;
@@ -127,8 +127,7 @@
     transition: border-color var(--transition-default),
       outline-color var(--transition-default),
       opacity var(--transition-default);
-    border-left: 0;
-    border-right: 0;
+    border-inline: 0;
     border-radius: 0;
     margin: 0;
 

package/dist/components/pagination/Pagination.css

@@ -8,8 +8,8 @@
 
   .djsvna_item, .djsvna_trigger, .djsvna_ellipsis {
     box-sizing: border-box;
-    min-width: var(--pagination-item-size, var(--size-lg));
-    height: var(--pagination-item-size, var(--size-lg));
+    min-width: var(--pagination-item-size, var(--size-md));
+    height: var(--pagination-item-size, var(--size-md));
     border-radius: var(--pagination-item-radius, var(--radius-md));
     font-size: var(--pagination-font-size, var(--text-sm));
     font-weight: var(--pagination-font-weight, var(--weight-medium));
@@ -25,7 +25,7 @@
     gap: var(--pagination-trigger-gap, var(--spacing-2));
     border: var(--pagination-item-border-width, var(--border-width-sm)) solid
       var(--pagination-item-border-color, var(--color-border));
-    padding-inline: var(--pagination-item-padding-inline, .75rem);
+    padding-inline: var(--pagination-item-padding-inline, var(--spacing-3));
     background-color: var(--pagination-item-bg, var(--color-background));
     color: var(--pagination-item-color, var(--color-foreground));
     user-select: none;
@@ -44,9 +44,9 @@
     }
 
     &:focus-visible, &[data-focus] {
-      outline: var(--pagination-focus-ring-width, var(--border-width-md)) solid
-        var(--pagination-focus-ring-color, var(--color-ring));
-      outline-offset: var(--pagination-focus-ring-offset, -1px);
+      outline: var(--pagination-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--pagination-focus-ring-color, var(--color-ring));
+      outline-offset: var(--pagination-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &:is([data-disabled], :disabled) {
@@ -55,8 +55,8 @@
     }
 
     & svg {
-      width: var(--pagination-icon-size, 1rem);
-      height: var(--pagination-icon-size, 1rem);
+      width: var(--pagination-icon-size, var(--spacing-4));
+      height: var(--pagination-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
   }
@@ -74,11 +74,11 @@
   }
 
   .djsvna_trigger {
-    padding-inline: max(var(--pagination-item-padding-inline, .75rem), var(--spacing-3));
+    padding-inline: max(var(--pagination-item-padding-inline, var(--spacing-3)), var(--spacing-3));
   }
 
   .djsvna_iconTrigger {
-    width: var(--pagination-item-size, var(--size-lg));
+    width: var(--pagination-item-size, var(--size-md));
     padding-inline: 0;
   }
 
@@ -93,7 +93,7 @@
     display: inline-flex;
 
     & svg + svg {
-      margin-inline-start: calc(var(--pagination-icon-size, 1rem) * -.5);
+      margin-inline-start: calc(var(--pagination-icon-size, var(--spacing-4)) * -.5);
     }
   }
 }

package/dist/components/password-input/PasswordInput.css

@@ -30,7 +30,7 @@
   ._8wEG0G_control {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--password-input-height, var(--input-height, var(--input-height-md, var(--size-lg))));
+    min-height: var(--password-input-height, var(--input-height, var(--input-height-md, var(--size-md))));
     border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
       var(--password-input-border-color, var(--input-border-color, var(--color-border)));
     border-radius: var(--password-input-radius, var(--input-radius, var(--radius-md)));
@@ -72,7 +72,7 @@
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;
-    padding: var(--password-input-padding-y, var(--input-padding-y, var(--input-padding-y-md, var(--spacing-2))))
+    padding: var(--password-input-padding-y, var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1))))
       var(--password-input-padding-x, var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3))));
     color: var(--password-input-color, var(--input-color, var(--color-foreground)));
     font: inherit;
@@ -144,8 +144,8 @@
     display: inline-flex;
 
     & svg {
-      width: var(--password-input-icon-size, var(--button-icon-size, 1rem));
-      height: var(--password-input-icon-size, var(--button-icon-size, 1rem));
+      width: var(--password-input-icon-size, var(--button-icon-size, var(--spacing-4)));
+      height: var(--password-input-icon-size, var(--button-icon-size, var(--spacing-4)));
     }
   }
 

package/dist/components/pin-input/PinInput.css

@@ -27,8 +27,8 @@
 
   .d_HHPW_input {
     box-sizing: border-box;
-    width: var(--pin-input-input-width, var(--pin-input-input-size, 2.5rem));
-    height: var(--pin-input-input-height, var(--pin-input-input-size, 2.5rem));
+    width: var(--pin-input-input-width, var(--pin-input-input-size, var(--size-md)));
+    height: var(--pin-input-input-height, var(--pin-input-input-size, var(--size-md)));
     border: var(--pin-input-border-width, var(--border-width-sm)) solid
       var(--pin-input-border-color, var(--color-border));
     border-radius: var(--pin-input-radius, var(--radius-md));
@@ -42,9 +42,9 @@
     line-height: var(--pin-input-line-height, var(--line-height-text-lg));
     text-align: center;
     font-variant-numeric: tabular-nums;
-    outline: var(--pin-input-focus-ring-width, var(--pin-input-border-width, var(--border-width-sm)))
+    outline: var(--pin-input-focus-ring-width, var(--pin-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--pin-input-focus-ring-offset, -1px);
+    outline-offset: var(--pin-input-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--pin-input-transition, var(--transition-default)),
       outline-color var(--pin-input-transition, var(--transition-default)),
       background-color var(--pin-input-transition, var(--transition-default));
@@ -77,8 +77,8 @@
   }
 
   .d_HHPW_separator {
-    width: var(--pin-input-separator-width, var(--pin-input-separator-size, 1rem));
-    height: var(--pin-input-separator-height, var(--pin-input-separator-size, 1rem));
+    width: var(--pin-input-separator-width, var(--pin-input-separator-size, var(--spacing-4)));
+    height: var(--pin-input-separator-height, var(--pin-input-separator-size, var(--spacing-4)));
     color: var(--pin-input-separator-color, var(--color-muted-foreground));
     pointer-events: none;
     flex: none;