@moduix/react 2.0.0 → 2.1.0

package/dist/components/file-upload/FileUpload.css

@@ -61,8 +61,8 @@
 
   .dgDG7a_dropzoneIcon {
     box-sizing: border-box;
-    width: var(--file-upload-dropzone-icon-box-size, 2.5rem);
-    height: var(--file-upload-dropzone-icon-box-size, 2.5rem);
+    width: var(--file-upload-dropzone-icon-box-size, var(--spacing-10));
+    height: var(--file-upload-dropzone-icon-box-size, var(--spacing-10));
     border: var(--file-upload-dropzone-icon-border-width, var(--border-width-sm)) solid
       var(--file-upload-dropzone-icon-border-color, var(--color-border));
     border-radius: var(--file-upload-dropzone-icon-radius, var(--radius-full));
@@ -73,8 +73,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--file-upload-dropzone-icon-size, 1rem);
-      height: var(--file-upload-dropzone-icon-size, 1rem);
+      width: var(--file-upload-dropzone-icon-size, var(--spacing-4));
+      height: var(--file-upload-dropzone-icon-size, var(--spacing-4));
     }
   }
 
@@ -83,12 +83,12 @@
     justify-content: center;
     align-items: center;
     gap: var(--file-upload-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--file-upload-trigger-height, var(--button-size-md, var(--size-lg)));
+    min-height: var(--file-upload-trigger-height, var(--button-size-md, var(--size-md)));
     border: var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
       solid
       var(--file-upload-trigger-border-color, var(--button-default-border-color, var(--color-primary)));
     border-radius: var(--file-upload-trigger-radius, var(--button-radius, var(--radius-md)));
-    padding-inline: var(--file-upload-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    padding-inline: var(--file-upload-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
     background-color: var(--file-upload-trigger-bg, var(--button-default-bg, var(--color-primary)));
     color: var(--file-upload-trigger-color, var(--button-default-color, var(--color-primary-foreground)));
     appearance: none;
@@ -114,7 +114,7 @@
     }
 
     &:focus-visible {
-      outline: var(--file-upload-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+      outline: var(--file-upload-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
         solid var(--file-upload-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
       outline-offset: calc(var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm))) *
           -1);
@@ -151,7 +151,7 @@
     align-items: center;
     column-gap: var(--file-upload-item-gap, var(--spacing-3));
     row-gap: var(--file-upload-item-row-gap, var(--spacing-1));
-    min-height: var(--file-upload-item-min-height, 2.5rem);
+    min-height: var(--file-upload-item-min-height, var(--size-md));
     border: var(--file-upload-item-border-width, var(--border-width-sm)) solid
       var(--file-upload-item-border-color, var(--color-border));
     border-radius: var(--file-upload-item-radius, var(--radius-md));
@@ -172,7 +172,7 @@
     }
 
     &:has([data-slot="file-upload-item-preview"]) {
-      min-height: var(--file-upload-item-preview-min-height, 3rem);
+      min-height: var(--file-upload-item-preview-min-height, var(--size-xl));
       padding-block: var(--file-upload-item-preview-padding-y, var(--spacing-2));
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
@@ -198,8 +198,8 @@
   }
 
   .dgDG7a_itemPreviewIcon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--file-upload-item-preview-icon-size, var(--spacing-4));
+    height: var(--file-upload-item-preview-icon-size, var(--spacing-4));
   }
 
   .dgDG7a_itemMetadata {
@@ -212,8 +212,8 @@
     display: flex;
 
     & > [data-slot="file-upload-item-size-text"]:before {
-      margin-right: var(--file-upload-item-row-gap, var(--spacing-1));
       content: "·";
+      margin-inline-end: var(--file-upload-item-row-gap, var(--spacing-1));
     }
   }
 
@@ -248,8 +248,8 @@
 
   .dgDG7a_itemDeleteTrigger {
     box-sizing: border-box;
-    width: var(--file-upload-action-size, 2rem);
-    height: var(--file-upload-action-size, 2rem);
+    width: var(--file-upload-action-size, var(--size-sm));
+    height: var(--file-upload-action-size, var(--size-sm));
     border-radius: var(--file-upload-action-radius, var(--radius-sm));
     background-color: var(--file-upload-action-bg, transparent);
     color: var(--file-upload-action-color, var(--color-muted-foreground));
@@ -265,8 +265,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--file-upload-action-icon-size, 1rem);
-      height: var(--file-upload-action-icon-size, 1rem);
+      width: var(--file-upload-action-icon-size, var(--spacing-4));
+      height: var(--file-upload-action-icon-size, var(--spacing-4));
     }
 
     @media (hover: hover) {
@@ -277,8 +277,8 @@
     }
 
     &:focus-visible {
-      outline: var(--file-upload-focus-ring-width, var(--border-width-md)) solid
-        var(--file-upload-focus-ring-color, var(--color-ring));
+      outline: var(--file-upload-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--file-upload-focus-ring-color, var(--color-ring));
       outline-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -303,7 +303,7 @@
   }
 
   .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) {
-    flex: 0 min(100%, 10rem);
+    flex: 0 1 min(100%, var(--file-upload-image-item-max-width, 10rem));
     grid-template-rows: auto auto auto;
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: start;
@@ -332,15 +332,15 @@
   }
 
   .dgDG7a_clearTrigger {
-    --close-button-size: var(--file-upload-action-size, 2rem);
+    --close-button-size: var(--file-upload-action-size, var(--size-sm));
     --close-button-radius: var(--file-upload-action-radius, var(--radius-sm));
     --close-button-bg: var(--file-upload-action-bg, transparent);
     --close-button-bg-hover: var(--file-upload-action-bg-hover, var(--color-muted));
     --close-button-color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--file-upload-action-color-hover, var(--color-foreground));
-    --close-button-icon-size: var(--file-upload-action-icon-size, 1rem);
+    --close-button-icon-size: var(--file-upload-action-icon-size, var(--spacing-4));
     --close-button-transition: var(--file-upload-transition, var(--transition-default));
-    --close-button-focus-ring-width: var(--file-upload-focus-ring-width, var(--border-width-md));
+    --close-button-focus-ring-width: var(--file-upload-focus-ring-width, var(--focus-ring-width, var(--border-width-md)));
     --close-button-focus-ring-color: var(--file-upload-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
     --close-button-disabled-opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));

package/dist/components/floating-panel/FloatingPanel.css

@@ -1,8 +1,8 @@
 @layer ui.components {
   .L7Dmqq_trigger {
     box-sizing: border-box;
-    min-height: var(--floating-panel-trigger-height, var(--size-lg));
-    padding: var(--floating-panel-trigger-padding-y, .5rem)
+    min-height: var(--floating-panel-trigger-height, var(--size-md));
+    padding: var(--floating-panel-trigger-padding-y, var(--spacing-1))
       var(--floating-panel-trigger-padding-x, var(--spacing-3));
     border: var(--floating-panel-trigger-border-width, var(--border-width-sm)) solid
       var(--floating-panel-trigger-border-color, var(--color-border));
@@ -35,9 +35,9 @@
     }
 
     &:focus-visible {
-      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm)))
+      outline: var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         solid var(--floating-panel-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm))) *
+      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
           -1);
     }
 
@@ -164,8 +164,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--floating-panel-control-icon-size, 1rem);
-      height: var(--floating-panel-control-icon-size, 1rem);
+      width: var(--floating-panel-control-icon-size, var(--spacing-4));
+      height: var(--floating-panel-control-icon-size, var(--spacing-4));
     }
 
     @media (hover: hover) {
@@ -175,9 +175,9 @@
     }
 
     &:focus-visible {
-      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm)))
+      outline: var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         solid var(--floating-panel-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm))) *
+      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
           -1);
     }
 
@@ -196,8 +196,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--floating-panel-drag-indicator-size, 1rem);
-      height: var(--floating-panel-drag-indicator-size, 1rem);
+      width: var(--floating-panel-drag-indicator-size, var(--spacing-4));
+      height: var(--floating-panel-drag-indicator-size, var(--spacing-4));
     }
   }
 
@@ -240,61 +240,61 @@
     position: absolute;
 
     &[data-axis="n"], &[data-axis="s"] {
-      left: var(--floating-panel-resize-edge-inset, .75rem);
-      width: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
-      height: var(--floating-panel-resize-edge-size, .5rem);
+      left: var(--floating-panel-resize-edge-inset, var(--spacing-3));
+      width: calc(100% - (var(--floating-panel-resize-edge-inset, var(--spacing-3)) * 2));
+      height: var(--floating-panel-resize-edge-size, var(--spacing-2));
       cursor: ns-resize;
     }
 
     &[data-axis="n"] {
-      top: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      top: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="s"] {
-      bottom: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      bottom: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="e"], &[data-axis="w"] {
-      top: var(--floating-panel-resize-edge-inset, .75rem);
-      width: var(--floating-panel-resize-edge-size, .5rem);
-      height: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
+      top: var(--floating-panel-resize-edge-inset, var(--spacing-3));
+      width: var(--floating-panel-resize-edge-size, var(--spacing-2));
+      height: calc(100% - (var(--floating-panel-resize-edge-inset, var(--spacing-3)) * 2));
       cursor: ew-resize;
     }
 
     &[data-axis="e"] {
-      right: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      right: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="w"] {
-      left: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      left: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="ne"], &[data-axis="nw"], &[data-axis="se"], &[data-axis="sw"] {
-      width: var(--floating-panel-resize-corner-size, .75rem);
-      height: var(--floating-panel-resize-corner-size, .75rem);
+      width: var(--floating-panel-resize-corner-size, var(--spacing-3));
+      height: var(--floating-panel-resize-corner-size, var(--spacing-3));
     }
 
     &[data-axis="ne"] {
-      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      top: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      right: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nesw-resize;
     }
 
     &[data-axis="nw"] {
-      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      top: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      left: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nwse-resize;
     }
 
     &[data-axis="se"] {
-      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      right: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      bottom: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nwse-resize;
     }
 
     &[data-axis="sw"] {
-      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      bottom: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      left: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nesw-resize;
     }
 

package/dist/components/floating-panel/FloatingPanel.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps } from "react";
 import { FloatingPanel, FloatingPanelResizeTriggerAxis } from "@ark-ui/react/floating-panel";
 
 //#region src/components/floating-panel/FloatingPanel.d.ts
-declare const resizeTriggerAxes: ("s" | "n" | "e" | "w" | "ne" | "se" | "sw" | "nw")[];
+declare const resizeTriggerAxes: ("s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne")[];
 type FloatingPanelRootProps = ComponentProps<typeof FloatingPanel.Root> & OverlayPortalProps;
 type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanel.RootProvider> & OverlayPortalProps;
 declare function FloatingPanelRoot({

package/dist/components/highlight/Highlight.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .UPU85W_root {
     padding-block: var(--highlight-padding-y, .0625rem);
-    padding-inline: var(--highlight-padding-x, .25rem);
+    padding-inline: var(--highlight-padding-x, var(--spacing-1));
     border-radius: var(--highlight-radius, var(--radius-xs));
     background-color: var(--highlight-bg, color-mix(in oklab, var(--color-warning) 40%, var(--color-accent)));
     color: var(--highlight-color, var(--color-foreground));

package/dist/components/hover-card/HoverCard.css

@@ -2,7 +2,7 @@
   ._0VaKFG_trigger {
     --hover-card-trigger-current-color: var(--hover-card-trigger-color, var(--color-primary));
     align-items: center;
-    gap: var(--hover-card-trigger-gap, .25rem);
+    gap: var(--hover-card-trigger-gap, var(--spacing-1));
     color: var(--hover-card-trigger-current-color);
     font: inherit;
     text-decoration-line: underline;
@@ -27,9 +27,9 @@
 
     &:focus-visible {
       border-radius: var(--hover-card-trigger-focus-radius, var(--radius-xs));
-      outline: var(--hover-card-focus-ring-width, var(--border-width-sm)) solid
-        var(--hover-card-focus-ring-color, var(--color-ring));
-      outline-offset: var(--hover-card-trigger-focus-offset, 1px);
+      outline: var(--hover-card-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--hover-card-focus-ring-color, var(--color-ring));
+      outline-offset: var(--hover-card-trigger-focus-offset, var(--focus-ring-offset));
       text-decoration-line: none;
     }
 
@@ -80,7 +80,7 @@
   }
 
   ._0VaKFG_arrow {
-    --arrow-size: var(--hover-card-arrow-size, .625rem);
+    --arrow-size: var(--hover-card-arrow-size, var(--spacing-2-5));
     --arrow-background: var(--hover-card-bg, var(--color-popover));
   }
 

package/dist/components/image-cropper/ImageCropper.css

@@ -23,26 +23,30 @@
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             25%,
           transparent 25%)
-        0 0 / var(--image-cropper-checker-size, 1rem) var(--image-cropper-checker-size, 1rem),
+        0 0 / var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4)),
       linear-gradient(45deg,
           transparent 75%,
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             75%)
-        0 0 / var(--image-cropper-checker-size, 1rem) var(--image-cropper-checker-size, 1rem),
+        0 0 / var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4)),
       linear-gradient(45deg,
           transparent 75%,
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             75%)
-        calc(var(--image-cropper-checker-size, 1rem) / -2)
-        calc(var(--image-cropper-checker-size, 1rem) / -2) / var(--image-cropper-checker-size, 1rem)
-        var(--image-cropper-checker-size, 1rem),
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2)
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2) /
+        var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4)),
       linear-gradient(45deg,
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             25%,
           var(--image-cropper-viewport-bg, var(--color-background)) 25%)
-        calc(var(--image-cropper-checker-size, 1rem) / -2)
-        calc(var(--image-cropper-checker-size, 1rem) / -2) / var(--image-cropper-checker-size, 1rem)
-        var(--image-cropper-checker-size, 1rem);
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2)
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2) /
+        var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4));
     box-shadow: var(--image-cropper-shadow, none);
     overflow: hidden;
 
@@ -83,7 +87,7 @@
       box-shadow: 0 0 0 9999px var(--image-cropper-selection-overlay-bg, #00000073),
         inset 0 0 0 var(--image-cropper-selection-inner-border-width, var(--border-width-sm))
           var(--image-cropper-selection-inner-border-color, #ffffffa3),
-        0 0 0 var(--image-cropper-focus-ring-width, var(--border-width-md))
+        0 0 0 var(--image-cropper-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
           var(--image-cropper-focus-ring-color, var(--color-ring));
     }
 
@@ -113,8 +117,8 @@
   .Bk909a_handle {
     z-index: 1;
     box-sizing: border-box;
-    width: var(--image-cropper-handle-size, .75rem);
-    height: var(--image-cropper-handle-size, .75rem);
+    width: var(--image-cropper-handle-size, var(--spacing-3));
+    height: var(--image-cropper-handle-size, var(--spacing-3));
     border: var(--image-cropper-handle-border-width, var(--border-width-sm)) solid
       var(--image-cropper-handle-border-color, #ffffffe0);
     border-radius: var(--image-cropper-handle-radius, var(--radius-xs));

package/dist/components/input/Input.css

@@ -3,19 +3,19 @@
     box-sizing: border-box;
     width: var(--input-width, 100%);
     max-width: var(--input-max-width, none);
-    min-height: var(--input-height, var(--input-height-md, var(--size-lg)));
+    min-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(--input-border-color, var(--color-border));
     border-radius: var(--input-radius, var(--radius-md));
-    padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-2)))
+    padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1)))
       var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3)));
     background-color: var(--input-bg, var(--color-background));
     color: var(--input-color, var(--color-foreground));
     font: inherit;
     font-size: var(--input-font-size, var(--input-font-size-md, var(--text-md)));
     line-height: var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
-      transparent;
+    outline: var(--input-focus-ring-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
+      solid transparent;
     outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
     transition: border-color var(--input-transition, var(--transition-default)),
       outline-color var(--input-transition, var(--transition-default)),
@@ -51,7 +51,7 @@
     &[data-size="xs"] {
       --input-height: var(--input-height-xs, var(--size-xs));
       --input-padding-x: var(--input-padding-x-xs, var(--spacing-2));
-      --input-padding-y: var(--input-padding-y-xs, var(--spacing-1));
+      --input-padding-y: var(--input-padding-y-xs, var(--spacing-0-5));
       --input-font-size: var(--input-font-size-xs, var(--text-xs));
       --input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
     }
@@ -65,17 +65,17 @@
     }
 
     &[data-size="lg"] {
-      --input-height: var(--input-height-lg, var(--size-xl));
+      --input-height: var(--input-height-lg, var(--size-lg));
       --input-padding-x: var(--input-padding-x-lg, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-lg, var(--spacing-2));
+      --input-padding-y: var(--input-padding-y-lg, var(--spacing-1));
       --input-font-size: var(--input-font-size-lg, var(--text-lg));
       --input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
     }
 
     &[data-size="xl"] {
-      --input-height: var(--input-height-xl, 3.5rem);
+      --input-height: var(--input-height-xl, var(--size-xl));
       --input-padding-x: var(--input-padding-x-xl, var(--spacing-4));
-      --input-padding-y: var(--input-padding-y-xl, var(--spacing-3));
+      --input-padding-y: var(--input-padding-y-xl, var(--spacing-2));
       --input-font-size: var(--input-font-size-xl, var(--text-lg));
       --input-line-height: var(--input-line-height-xl, var(--line-height-text-lg));
     }

package/dist/components/input-group/InputGroup.css

@@ -3,15 +3,15 @@
     box-sizing: border-box;
     width: var(--input-group-width, 100%);
     max-width: var(--input-group-max-width, none);
-    min-height: var(--input-group-height, var(--input-group-height-md, var(--size-lg)));
+    min-height: var(--input-group-height, var(--input-group-height-md, var(--size-md)));
     border: var(--input-group-border-width, var(--border-width-sm))
       var(--input-group-border-style, solid) var(--input-group-border-color, var(--color-border));
     border-radius: var(--input-group-radius, var(--radius-md));
     background-color: var(--input-group-bg, var(--color-background));
     color: var(--input-group-color, var(--color-foreground));
-    outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--border-width-sm)))
+    outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--input-group-focus-ring-offset, -1px);
+    outline-offset: var(--input-group-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--input-group-transition, var(--transition-default)),
       outline-color var(--input-group-transition, var(--transition-default)),
       opacity var(--input-group-transition, var(--transition-default));
@@ -42,48 +42,48 @@
     }
 
     &[data-size="xs"] {
-      --input-group-height: var(--input-group-height-xs, var(--size-sm));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, .625rem);
+      --input-group-height: var(--input-group-height-xs, var(--size-xs));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, var(--spacing-2-5));
       --input-group-font-size: var(--input-group-font-size-xs, var(--text-xs));
       --input-group-line-height: var(--input-group-line-height-xs, var(--line-height-text-xs));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-xs, .625rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-xs, .25rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-xs, var(--spacing-2-5));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-xs, var(--spacing-0-5));
     }
 
     &[data-size="sm"] {
-      --input-group-height: var(--input-group-height-sm, 2rem);
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, .75rem);
+      --input-group-height: var(--input-group-height-sm, var(--size-sm));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, var(--spacing-3));
       --input-group-font-size: var(--input-group-font-size-sm, var(--text-sm));
       --input-group-line-height: var(--input-group-line-height-sm, var(--line-height-text-sm));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-sm, .75rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-sm, var(--spacing-3));
       --input-group-input-padding-y: var(--input-group-input-padding-y-sm, .3125rem);
     }
 
     &[data-size="md"] {
-      --input-group-height: var(--input-group-height-md, var(--size-lg));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-md, .875rem);
+      --input-group-height: var(--input-group-height-md, var(--size-md));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-md, var(--spacing-3-5));
       --input-group-font-size: var(--input-group-font-size-md, var(--text-md));
       --input-group-line-height: var(--input-group-line-height-md, var(--line-height-text-md));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-md, .875rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-md, .5rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-md, var(--spacing-3-5));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-md, var(--spacing-1));
     }
 
     &[data-size="lg"] {
-      --input-group-height: var(--input-group-height-lg, var(--size-xl));
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, 1rem);
+      --input-group-height: var(--input-group-height-lg, var(--size-lg));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, var(--spacing-4));
       --input-group-font-size: var(--input-group-font-size-lg, var(--text-lg));
       --input-group-line-height: var(--input-group-line-height-lg, var(--line-height-text-lg));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-lg, 1rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-lg, .625rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-lg, var(--spacing-4));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-lg, var(--spacing-1));
     }
 
     &[data-size="xl"] {
-      --input-group-height: var(--input-group-height-xl, 3rem);
-      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, 1.125rem);
+      --input-group-height: var(--input-group-height-xl, var(--size-xl));
+      --input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, var(--spacing-4-5));
       --input-group-font-size: var(--input-group-font-size-xl, var(--text-lg));
       --input-group-line-height: var(--input-group-line-height-xl, var(--line-height-text-lg));
-      --input-group-input-padding-x: var(--input-group-input-padding-x-xl, 1.125rem);
-      --input-group-input-padding-y: var(--input-group-input-padding-y-xl, .75rem);
+      --input-group-input-padding-x: var(--input-group-input-padding-x-xl, var(--spacing-4-5));
+      --input-group-input-padding-y: var(--input-group-input-padding-y-xl, var(--spacing-2));
     }
   }
 
@@ -92,8 +92,8 @@
     min-height: 0;
     font-size: var(--input-group-font-size, var(--text-md));
     line-height: var(--input-group-line-height, var(--line-height-text-md));
-    padding-block: var(--input-group-input-padding-y, .5rem);
-    padding-inline: var(--input-group-input-padding-x, .875rem);
+    padding-block: var(--input-group-input-padding-y, var(--spacing-2));
+    padding-inline: var(--input-group-input-padding-x, var(--spacing-3-5));
     background-color: #0000;
     border: 0;
     border-radius: 0;
@@ -107,7 +107,7 @@
     align-items: center;
     gap: var(--input-group-addon-gap, var(--spacing-2));
     min-width: max-content;
-    padding-inline: var(--input-group-addon-padding-x, .875rem);
+    padding-inline: var(--input-group-addon-padding-x, var(--spacing-3-5));
     background-color: var(--input-group-addon-bg, var(--color-muted));
     color: var(--input-group-addon-color, var(--color-muted-foreground));
     font-size: var(--input-group-font-size, var(--text-md));
@@ -116,8 +116,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--input-group-icon-size, 1rem);
-      height: var(--input-group-icon-size, 1rem);
+      width: var(--input-group-icon-size, var(--spacing-4));
+      height: var(--input-group-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
   }
@@ -143,7 +143,7 @@
     height: auto;
     min-height: auto;
     padding-block: 0;
-    padding-inline: var(--input-group-addon-padding-x, .875rem);
+    padding-inline: var(--input-group-addon-padding-x, var(--spacing-3-5));
     color: var(--input-group-button-color, var(--color-foreground));
     font-size: var(--input-group-font-size, var(--text-sm));
     line-height: var(--input-group-line-height, var(--line-height-text-sm));
@@ -152,7 +152,7 @@
     align-self: stretch;
 
     &:focus-visible {
-      outline-offset: var(--input-group-button-focus-ring-offset, -1px);
+      outline-offset: var(--input-group-button-focus-ring-offset, var(--focus-ring-inset-offset));
     }
   }
 }

package/dist/components/kbd/Kbd.css

@@ -1,9 +1,9 @@
 @layer ui.components {
   .VpuRJG_root[data-scope="kbd"][data-part="root"] {
     box-sizing: border-box;
-    min-width: var(--kbd-min-width, var(--kbd-height, 1.5rem));
+    min-width: var(--kbd-min-width, var(--kbd-height, var(--size-xs)));
     max-width: 100%;
-    height: var(--kbd-height, 1.5rem);
+    height: var(--kbd-height, var(--size-xs));
     border: var(--kbd-border-width, var(--border-width-sm)) solid
       var(--kbd-border-color, var(--color-border));
     border-radius: var(--kbd-radius, var(--radius-sm));

package/dist/components/lightbox/Lightbox.css

@@ -3,9 +3,9 @@
     cursor: zoom-in;
 
     &:focus-visible {
-      outline: var(--lightbox-trigger-focus-ring-width, var(--border-width-md)) solid
-        var(--lightbox-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--lightbox-trigger-focus-ring-offset, 2px);
+      outline: var(--lightbox-trigger-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--lightbox-trigger-focus-ring-color, var(--color-ring));
+      outline-offset: var(--lightbox-trigger-focus-ring-offset, var(--focus-ring-offset));
     }
   }
 
@@ -153,7 +153,7 @@
 
     & [data-slot="carousel-indicator"]:has(img) {
       width: var(--lightbox-gallery-thumbnail-width, 5rem);
-      height: var(--lightbox-gallery-thumbnail-height, 3rem);
+      height: var(--lightbox-gallery-thumbnail-height, var(--size-xl));
       border: var(--border-width-sm) solid transparent;
       border-radius: var(--lightbox-gallery-thumbnail-radius, var(--radius-md));
       opacity: var(--lightbox-gallery-thumbnail-opacity, .65);
@@ -171,8 +171,8 @@
         width: var(--lightbox-gallery-thumbnail-width, 5rem);
         border-color: var(--lightbox-gallery-thumbnail-border-color, var(--color-primary));
         opacity: 1;
+        transform: translateY(var(--lightbox-gallery-thumbnail-active-translate-y, calc(var(--border-width-sm) * -1)));
         background: none;
-        transform: translateY(-1px);
       }
 
       & img {
@@ -185,9 +185,9 @@
   }
 
   .BCq4HG_closeIcon {
-    --close-button-size: var(--lightbox-close-icon-size, 2rem);
+    --close-button-size: var(--lightbox-close-icon-size, var(--spacing-8));
     --close-button-radius: var(--lightbox-close-icon-radius, var(--radius-sm));
-    --close-button-icon-size: var(--lightbox-close-icon-glyph-size, .875rem);
+    --close-button-icon-size: var(--lightbox-close-icon-glyph-size, var(--spacing-3-5));
     --close-button-color: var(--lightbox-close-icon-color, var(--color-foreground));
     --close-button-color-hover: var(--lightbox-close-icon-color-hover, var(--color-foreground));
     --close-button-bg: var(--lightbox-close-icon-bg, var(--color-background));