@moduix/react 2.1.0 → 2.2.0

package/dist/components/carousel/Carousel.css

@@ -1,6 +1,6 @@
-@layer ui.components {
+@layer moduix.components {
   .NQiVeG_root {
-    gap: var(--carousel-gap, var(--spacing-3));
+    gap: var(--moduix-carousel-gap, var(--moduix-spacing-3));
     flex-direction: column;
     width: 100%;
     min-width: 0;
@@ -8,14 +8,14 @@
   }
 
   .NQiVeG_root[data-orientation="vertical"] {
-    height: var(--carousel-height, 24rem);
+    height: var(--moduix-carousel-height, 24rem);
     flex-direction: row;
     align-items: stretch;
   }
 
   .NQiVeG_control {
     align-items: center;
-    gap: var(--carousel-gap, var(--spacing-3));
+    gap: var(--moduix-carousel-gap, var(--moduix-spacing-3));
     min-width: 0;
     display: flex;
   }
@@ -28,7 +28,7 @@
   .NQiVeG_itemGroup {
     overscroll-behavior-x: contain;
     overscroll-behavior-y: auto;
-    border-radius: var(--carousel-track-radius, var(--radius-xl));
+    border-radius: var(--moduix-carousel-track-radius, var(--moduix-radius-xl));
     scrollbar-width: none;
     scroll-behavior: smooth;
     flex: auto;
@@ -59,52 +59,52 @@
   }
 
   .NQiVeG_prevTrigger, .NQiVeG_nextTrigger, .NQiVeG_autoplayTrigger {
-    width: var(--carousel-control-size, var(--size-md));
-    height: var(--carousel-control-size, var(--size-md));
-    border: var(--border-width-sm) solid
-      var(--carousel-control-border-color, color-mix(in oklab, var(--color-border) 88%, black 12%));
-    border-radius: var(--radius-full);
-    background-color: var(--carousel-control-bg, color-mix(in oklab, var(--color-background) 92%, var(--color-card) 8%));
-    box-shadow: var(--carousel-control-shadow, var(--shadow-sm));
-    color: var(--carousel-control-color, var(--color-foreground));
+    width: var(--moduix-carousel-control-size, var(--moduix-size-md));
+    height: var(--moduix-carousel-control-size, var(--moduix-size-md));
+    border: var(--moduix-border-width-sm) solid
+      var(--moduix-carousel-control-border-color, color-mix(in oklab, var(--moduix-color-border) 88%, black 12%));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-carousel-control-bg, color-mix(in oklab, var(--moduix-color-background) 92%, var(--moduix-color-card) 8%));
+    box-shadow: var(--moduix-carousel-control-shadow, var(--moduix-shadow-sm));
+    color: var(--moduix-carousel-control-color, var(--moduix-color-foreground));
     cursor: pointer;
-    transition: background-color var(--transition-fast),
-      border-color var(--transition-fast),
-      color var(--transition-fast),
-      box-shadow var(--transition-fast),
-      transform var(--transition-fast);
+    transition: background-color var(--moduix-transition-fast),
+      border-color var(--moduix-transition-fast),
+      color var(--moduix-transition-fast),
+      box-shadow var(--moduix-transition-fast),
+      transform var(--moduix-transition-fast);
     flex: none;
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & svg {
-      width: var(--carousel-control-icon-size, var(--spacing-4));
-      height: var(--carousel-control-icon-size, var(--spacing-4));
+      width: var(--moduix-carousel-control-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-carousel-control-icon-size, var(--moduix-spacing-4));
     }
 
     &:not(:disabled, [data-disabled]):hover {
-      border-color: var(--carousel-control-border-color-hover, color-mix(in oklab, var(--color-border) 50%, var(--color-foreground) 50%));
-      background-color: var(--carousel-control-bg-hover, var(--color-accent));
-      box-shadow: var(--carousel-control-shadow-hover, var(--shadow-md));
-      color: var(--carousel-control-color-hover, var(--color-accent-foreground));
+      border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+      background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
+      box-shadow: var(--moduix-carousel-control-shadow-hover, var(--moduix-shadow-md));
+      color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
     }
 
     &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-carousel-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-carousel-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-carousel-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &:is(:disabled, [data-disabled]) {
       cursor: not-allowed;
-      opacity: var(--opacity-disabled);
+      opacity: var(--moduix-opacity-disabled);
     }
 
     &[data-pressed] {
-      border-color: var(--carousel-control-border-color-hover, color-mix(in oklab, var(--color-border) 50%, var(--color-foreground) 50%));
-      background-color: var(--carousel-control-bg-hover, var(--color-accent));
-      color: var(--carousel-control-color-hover, var(--color-accent-foreground));
+      border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+      background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
+      color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
     }
   }
 
@@ -125,7 +125,7 @@
   .NQiVeG_indicatorGroup {
     justify-content: center;
     align-items: center;
-    gap: var(--carousel-indicator-gap, var(--spacing-2));
+    gap: var(--moduix-carousel-indicator-gap, var(--moduix-spacing-2));
     display: flex;
   }
 
@@ -134,57 +134,57 @@
   }
 
   .NQiVeG_indicator {
-    width: var(--carousel-indicator-size, var(--spacing-2));
-    height: var(--carousel-indicator-size, var(--spacing-2));
-    border-radius: var(--radius-full);
-    background-color: var(--carousel-indicator-bg, color-mix(in oklab, var(--color-muted) 84%, var(--color-background) 16%));
+    width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
+    height: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-carousel-indicator-bg, color-mix(in oklab, var(--moduix-color-muted) 84%, var(--moduix-color-background) 16%));
     cursor: pointer;
     opacity: .88;
-    transition: inline-size var(--transition-fast),
-      block-size var(--transition-fast),
-      background-color var(--transition-fast),
-      opacity var(--transition-fast);
+    transition: inline-size var(--moduix-transition-fast),
+      block-size var(--moduix-transition-fast),
+      background-color var(--moduix-transition-fast),
+      opacity var(--moduix-transition-fast);
     border: 0;
     padding: 0;
 
     &:hover {
-      background-color: var(--carousel-indicator-bg-hover, color-mix(in oklab, var(--color-muted) 56%, var(--color-foreground) 44%));
+      background-color: var(--moduix-carousel-indicator-bg-hover, color-mix(in oklab, var(--moduix-color-muted) 56%, var(--moduix-color-foreground) 44%));
     }
 
     &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-carousel-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-carousel-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-carousel-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &[data-current] {
-      width: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
-      background-color: var(--carousel-indicator-bg-current, var(--color-primary));
+      width: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
+      background-color: var(--moduix-carousel-indicator-bg-current, var(--moduix-color-primary));
       opacity: 1;
     }
 
     &:is(:disabled, [data-disabled], [data-readonly]) {
       cursor: not-allowed;
-      opacity: var(--opacity-disabled);
+      opacity: var(--moduix-opacity-disabled);
     }
   }
 
   .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator {
     &[data-current] {
-      width: var(--carousel-indicator-size, var(--spacing-2));
-      height: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
+      width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
+      height: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
     }
   }
 
   .NQiVeG_autoplayTrigger {
-    min-width: var(--carousel-autoplay-trigger-min-width, calc(var(--size-md) + var(--spacing-3)));
+    min-width: var(--moduix-carousel-autoplay-trigger-min-width, calc(var(--moduix-size-md) + var(--moduix-spacing-3)));
   }
 
   .NQiVeG_autoplayIndicator {
-    min-width: var(--carousel-autoplay-indicator-min-width, var(--spacing-4));
-    font-size: var(--text-xs);
-    font-weight: var(--weight-medium);
-    line-height: var(--line-height-text-xs);
+    min-width: var(--moduix-carousel-autoplay-indicator-min-width, var(--moduix-spacing-4));
+    font-size: var(--moduix-text-xs);
+    font-weight: var(--moduix-weight-medium);
+    line-height: var(--moduix-line-height-text-xs);
     text-transform: uppercase;
     justify-content: center;
     align-items: center;
@@ -192,9 +192,9 @@
   }
 
   .NQiVeG_progressText {
-    color: var(--carousel-progress-text-color, var(--color-muted-foreground));
-    font-size: var(--carousel-progress-text-font-size, var(--text-sm));
-    line-height: var(--line-height-text-sm);
+    color: var(--moduix-carousel-progress-text-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-carousel-progress-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-line-height-text-sm);
     font-variant-numeric: tabular-nums;
   }
 }

package/dist/components/checkbox/Checkbox.css

@@ -1,9 +1,9 @@
-@layer ui.components {
+@layer moduix.components {
   .NxmH7W_root {
     align-items: center;
-    gap: var(--checkbox-gap, var(--spacing-2));
+    gap: var(--moduix-checkbox-gap, var(--moduix-spacing-2));
     vertical-align: middle;
-    color: var(--checkbox-label-color, var(--color-foreground));
+    color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
     cursor: pointer;
     display: inline-flex;
 
@@ -12,7 +12,7 @@
     }
 
     &[data-disabled] {
-      opacity: var(--checkbox-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-checkbox-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
@@ -20,16 +20,16 @@
     box-sizing: border-box;
     width: var(--_checkbox-size, 1.25rem);
     height: var(--_checkbox-size, 1.25rem);
-    border: var(--checkbox-border-width, var(--border-width-sm)) solid
-      var(--checkbox-border-color, var(--color-border));
-    border-radius: var(--checkbox-radius, var(--radius-xs));
-    background-color: var(--checkbox-bg, var(--color-background));
-    color: var(--checkbox-color, var(--color-primary-foreground));
+    border: var(--moduix-checkbox-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-checkbox-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-checkbox-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-checkbox-bg, var(--moduix-color-background));
+    color: var(--moduix-checkbox-color, var(--moduix-color-primary-foreground));
     user-select: none;
-    transition: background-color var(--checkbox-transition, var(--transition-default)),
-      border-color var(--checkbox-transition, var(--transition-default)),
-      color var(--checkbox-transition, var(--transition-default)),
-      opacity var(--checkbox-transition, var(--transition-default));
+    transition: background-color var(--moduix-checkbox-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-checkbox-transition, var(--moduix-transition-default)),
+      color var(--moduix-checkbox-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-checkbox-transition, var(--moduix-transition-default));
     flex: none;
     justify-content: center;
     align-items: center;
@@ -39,60 +39,60 @@
     display: inline-flex;
 
     &[data-state="checked"], &[data-state="indeterminate"] {
-      border-color: var(--checkbox-border-color-checked, var(--color-primary));
-      background-color: var(--checkbox-bg-checked, var(--color-primary));
+      border-color: var(--moduix-checkbox-border-color-checked, var(--moduix-color-primary));
+      background-color: var(--moduix-checkbox-bg-checked, var(--moduix-color-primary));
     }
 
     &[data-focus-visible] {
-      outline: var(--checkbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--checkbox-focus-ring-color, var(--color-ring));
-      outline-offset: var(--checkbox-focus-ring-offset, var(--border-width-sm));
+      outline: var(--moduix-checkbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-checkbox-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-checkbox-focus-ring-offset, var(--moduix-border-width-sm));
     }
 
     &[data-invalid] {
-      border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
-      color: var(--checkbox-color-invalid, var(--color-destructive-foreground));
+      border-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+      color: var(--moduix-checkbox-color-invalid, var(--moduix-color-destructive-foreground));
 
       &[data-state="checked"], &[data-state="indeterminate"] {
-        border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
-        background-color: var(--checkbox-bg-invalid, var(--color-destructive));
+        border-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+        background-color: var(--moduix-checkbox-bg-invalid, var(--moduix-color-destructive));
       }
 
       &[data-focus-visible] {
-        outline-color: var(--checkbox-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
       }
     }
 
     @media (hover: hover) {
       &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--checkbox-bg-hover, var(--color-accent));
+        background-color: var(--moduix-checkbox-bg-hover, var(--moduix-color-accent));
       }
     }
   }
 
   .NxmH7W_root[data-size="xs"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-xs, var(--spacing-3-5));
-    --_checkbox-icon-size: var(--checkbox-icon-size-xs, var(--spacing-2));
+    --_checkbox-size: var(--moduix-checkbox-size-xs, var(--moduix-spacing-3-5));
+    --_checkbox-icon-size: var(--moduix-checkbox-icon-size-xs, var(--moduix-spacing-2));
   }
 
   .NxmH7W_root[data-size="sm"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-sm, var(--spacing-4));
-    --_checkbox-icon-size: var(--checkbox-icon-size-sm, var(--spacing-2-5));
+    --_checkbox-size: var(--moduix-checkbox-size-sm, var(--moduix-spacing-4));
+    --_checkbox-icon-size: var(--moduix-checkbox-icon-size-sm, var(--moduix-spacing-2-5));
   }
 
   .NxmH7W_root[data-size="md"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-md, var(--spacing-5));
-    --_checkbox-icon-size: var(--checkbox-icon-size-md, var(--spacing-3));
+    --_checkbox-size: var(--moduix-checkbox-size-md, var(--moduix-spacing-5));
+    --_checkbox-icon-size: var(--moduix-checkbox-icon-size-md, var(--moduix-spacing-3));
   }
 
   .NxmH7W_root[data-size="lg"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-lg, var(--size-xs));
-    --_checkbox-icon-size: var(--checkbox-icon-size-lg, var(--spacing-3-5));
+    --_checkbox-size: var(--moduix-checkbox-size-lg, var(--moduix-size-xs));
+    --_checkbox-icon-size: var(--moduix-checkbox-icon-size-lg, var(--moduix-spacing-3-5));
   }
 
   .NxmH7W_root[data-size="xl"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-xl, var(--spacing-7));
-    --_checkbox-icon-size: var(--checkbox-icon-size-xl, var(--spacing-4));
+    --_checkbox-size: var(--moduix-checkbox-size-xl, var(--moduix-spacing-7));
+    --_checkbox-icon-size: var(--moduix-checkbox-icon-size-xl, var(--moduix-spacing-4));
   }
 
   .NxmH7W_indicator {
@@ -120,15 +120,15 @@
   }
 
   .NxmH7W_label {
-    color: var(--checkbox-label-color, var(--color-foreground));
-    font-size: var(--checkbox-label-font-size, var(--text-sm));
-    font-weight: var(--checkbox-label-font-weight, var(--weight-medium));
-    line-height: var(--checkbox-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-checkbox-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-checkbox-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-checkbox-label-line-height, var(--moduix-line-height-text-sm));
   }
 
   .NxmH7W_group {
-    gap: var(--checkbox-group-gap, var(--spacing-2));
-    color: var(--checkbox-group-color, var(--color-foreground));
+    gap: var(--moduix-checkbox-group-gap, var(--moduix-spacing-2));
+    color: var(--moduix-checkbox-group-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
   }

package/dist/components/clipboard/Clipboard.css

@@ -1,23 +1,23 @@
-@layer ui.components {
+@layer moduix.components {
   .eM1-oW_root {
-    gap: var(--clipboard-gap, var(--spacing-1-5));
-    width: var(--clipboard-width, 100%);
-    max-width: var(--clipboard-max-width, none);
-    color: var(--clipboard-color, var(--color-foreground));
+    gap: var(--moduix-clipboard-gap, var(--moduix-spacing-1-5));
+    width: var(--moduix-clipboard-width, 100%);
+    max-width: var(--moduix-clipboard-max-width, none);
+    color: var(--moduix-clipboard-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
   }
 
   .eM1-oW_label {
-    color: var(--clipboard-label-color, currentColor);
-    font-size: var(--clipboard-label-font-size, var(--text-sm));
-    font-weight: var(--clipboard-label-font-weight, var(--weight-medium));
-    line-height: var(--clipboard-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-clipboard-label-color, currentColor);
+    font-size: var(--moduix-clipboard-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-clipboard-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-clipboard-label-line-height, var(--moduix-line-height-text-sm));
   }
 
   .eM1-oW_control {
     align-items: center;
-    gap: var(--clipboard-control-gap, var(--spacing-2));
+    gap: var(--moduix-clipboard-control-gap, var(--moduix-spacing-2));
     width: 100%;
     display: flex;
   }
@@ -26,45 +26,50 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--clipboard-input-height, var(--input-height-md, var(--size-md)));
-    border: var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))
-      solid var(--clipboard-input-border-color, var(--input-border-color, var(--color-border)));
-    border-radius: var(--clipboard-input-radius, var(--input-radius, var(--radius-md)));
-    padding-block: var(--clipboard-input-padding-y, var(--input-padding-y-md, var(--spacing-1)));
-    padding-inline: var(--clipboard-input-padding-x, var(--input-padding-x-md, var(--spacing-3-5)));
-    background-color: var(--clipboard-input-bg, var(--input-bg, var(--color-background)));
-    color: var(--clipboard-input-color, var(--input-color, var(--color-foreground)));
+    min-height: var(--moduix-clipboard-input-height, var(--moduix-input-height-md, var(--moduix-size-md)));
+    border: var(--moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-clipboard-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-clipboard-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    padding-block: var(--moduix-clipboard-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-clipboard-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3-5)));
+    background-color: var(--moduix-clipboard-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-clipboard-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     font: inherit;
-    font-size: var(--clipboard-input-font-size, var(--input-font-size-md, var(--text-md)));
-    line-height: var(--clipboard-input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
-    outline: var(--clipboard-input-focus-ring-width, var(--input-focus-ring-width, var(--clipboard-input-border-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))))
+    font-size: var(--moduix-clipboard-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md)));
+    line-height: var(--moduix-clipboard-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md)));
+    outline: var(--moduix-clipboard-input-focus-ring-width, var(--moduix-input-focus-ring-width, var(--moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))))
       solid transparent;
-    outline-offset: calc(var(--clipboard-input-focus-ring-offset, var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))) *
+    outline-offset: calc(var(--moduix-clipboard-input-focus-ring-offset, var(--moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))) *
         -1);
-    transition: border-color var(--clipboard-transition, var(--input-transition, var(--transition-default))),
-      outline-color var(--clipboard-transition, var(--input-transition, var(--transition-default))),
+    transition: border-color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      outline-color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
       background-color
-        var(--clipboard-transition, var(--input-transition, var(--transition-default))),
-      color var(--clipboard-transition, var(--input-transition, var(--transition-default))),
-      opacity var(--clipboard-transition, var(--input-transition, var(--transition-default)));
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)));
     margin: 0;
 
     &::placeholder {
-      color: var(--clipboard-input-placeholder-color, var(--input-placeholder-color, var(--color-muted-foreground)));
+      color: var(--moduix-clipboard-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
     }
 
     &:focus-visible {
-      outline-color: var(--clipboard-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+      outline-color: var(--moduix-clipboard-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
     }
 
     &[data-readonly] {
-      background-color: var(--clipboard-input-readonly-bg, var(--input-readonly-bg, var(--clipboard-input-bg, var(--color-background))));
-      color: var(--clipboard-input-readonly-color, var(--input-readonly-color, var(--clipboard-input-color, var(--color-foreground))));
+      background-color: var(--moduix-clipboard-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-clipboard-input-bg, var(--moduix-color-background))));
+      color: var(--moduix-clipboard-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-clipboard-input-color, var(--moduix-color-foreground))));
     }
 
     &[data-disabled] {
       pointer-events: none;
-      opacity: var(--clipboard-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled)));
+      opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled)));
     }
   }
 
@@ -72,55 +77,59 @@
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--clipboard-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--clipboard-trigger-height, var(--button-size-md, var(--size-md)));
-    padding-inline: var(--clipboard-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
-    border: var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
+    gap: var(--moduix-clipboard-trigger-gap, var(--moduix-button-content-gap, var(--moduix-spacing-2)));
+    min-height: var(--moduix-clipboard-trigger-height, var(--moduix-button-size-md, var(--moduix-size-md)));
+    padding-inline: var(--moduix-clipboard-trigger-padding-x, var(--moduix-button-padding-x-md, var(--moduix-spacing-4)));
+    border: var(--moduix-clipboard-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))
       solid
-      var(--clipboard-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
-    border-radius: var(--clipboard-trigger-radius, var(--button-radius, var(--radius-md)));
-    background-color: var(--clipboard-trigger-bg, var(--button-outline-bg, var(--color-background)));
-    color: var(--clipboard-trigger-color, var(--button-outline-color, var(--color-foreground)));
+      var(--moduix-clipboard-trigger-border-color, var(--moduix-button-outline-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-clipboard-trigger-radius, var(--moduix-button-radius, var(--moduix-radius-md)));
+    background-color: var(--moduix-clipboard-trigger-bg, var(--moduix-button-outline-bg, var(--moduix-color-background)));
+    color: var(--moduix-clipboard-trigger-color, var(--moduix-button-outline-color, var(--moduix-color-foreground)));
     appearance: none;
     font: inherit;
-    font-size: var(--clipboard-trigger-font-size, var(--button-font-size, var(--text-sm)));
-    font-weight: var(--clipboard-trigger-font-weight, var(--button-font-weight, var(--weight-medium)));
-    line-height: var(--clipboard-trigger-line-height, var(--button-line-height, var(--line-height-text-sm)));
+    font-size: var(--moduix-clipboard-trigger-font-size, var(--moduix-button-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-clipboard-trigger-font-weight, var(--moduix-button-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-clipboard-trigger-line-height, var(--moduix-button-line-height, var(--moduix-line-height-text-sm)));
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    transition: border-color var(--clipboard-transition, var(--button-transition, var(--transition-default))),
+    transition: border-color
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
       background-color
-        var(--clipboard-transition, var(--button-transition, var(--transition-default))),
-      color var(--clipboard-transition, var(--button-transition, var(--transition-default))),
-      opacity var(--clipboard-transition, var(--button-transition, var(--transition-default))),
-      box-shadow var(--clipboard-transition, var(--button-transition, var(--transition-default)));
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      color
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      box-shadow
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)));
     flex-shrink: 0;
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--clipboard-indicator-size, var(--button-icon-size, var(--spacing-4)));
-      height: var(--clipboard-indicator-size, var(--button-icon-size, var(--spacing-4)));
+      width: var(--moduix-clipboard-indicator-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+      height: var(--moduix-clipboard-indicator-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
       flex-shrink: 0;
     }
 
     @media (hover: hover) {
       &:hover:not(:disabled, [data-disabled]) {
-        background-color: var(--clipboard-trigger-bg-hover, var(--button-outline-bg-hover, var(--color-accent)));
+        background-color: var(--moduix-clipboard-trigger-bg-hover, var(--moduix-button-outline-bg-hover, var(--moduix-color-accent)));
       }
     }
 
     &:focus-visible {
-      outline: var(--clipboard-trigger-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
+      outline: var(--moduix-clipboard-trigger-focus-ring-width, var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md))))
         solid
-        var(--clipboard-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
-      outline-offset: calc(var(--clipboard-trigger-focus-ring-offset, var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *
+        var(--moduix-clipboard-trigger-focus-ring-color, var(--moduix-button-focus-ring-color, var(--moduix-color-ring)));
+      outline-offset: calc(var(--moduix-clipboard-trigger-focus-ring-offset, var(--moduix-clipboard-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))) *
           -1);
     }
 
     &:is(:disabled, [data-disabled]) {
       pointer-events: none;
-      opacity: var(--clipboard-disabled-opacity, var(--button-disabled-opacity, var(--opacity-disabled)));
+      opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled)));
       cursor: default;
     }
   }
@@ -134,10 +143,10 @@
 
   .eM1-oW_valueText {
     min-width: 0;
-    color: var(--clipboard-value-text-color, currentColor);
-    font-size: var(--clipboard-value-text-font-size, inherit);
-    font-weight: var(--clipboard-value-text-font-weight, inherit);
-    line-height: var(--clipboard-value-text-line-height, inherit);
+    color: var(--moduix-clipboard-value-text-color, currentColor);
+    font-size: var(--moduix-clipboard-value-text-font-size, inherit);
+    font-weight: var(--moduix-clipboard-value-text-font-weight, inherit);
+    line-height: var(--moduix-clipboard-value-text-line-height, inherit);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

package/dist/components/close-button/CloseButton.css

@@ -1,18 +1,18 @@
-@layer ui.components {
+@layer moduix.components {
   ._8WDg2W_root {
     box-sizing: border-box;
-    width: var(--close-button-size, var(--spacing-7));
-    height: var(--close-button-size, var(--spacing-7));
-    background-color: var(--close-button-bg, transparent);
-    border-radius: var(--close-button-radius, var(--radius-sm));
-    color: var(--close-button-color, var(--color-muted-foreground));
+    width: var(--moduix-close-button-size, var(--moduix-spacing-7));
+    height: var(--moduix-close-button-size, var(--moduix-spacing-7));
+    background-color: var(--moduix-close-button-bg, transparent);
+    border-radius: var(--moduix-close-button-radius, var(--moduix-radius-sm));
+    color: var(--moduix-close-button-color, var(--moduix-color-muted-foreground));
     appearance: none;
     font: inherit;
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--close-button-transition, var(--transition-default)),
-      color var(--close-button-transition, var(--transition-default)),
-      opacity var(--close-button-transition, var(--transition-default));
+    transition: background-color var(--moduix-close-button-transition, var(--moduix-transition-default)),
+      color var(--moduix-close-button-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-close-button-transition, var(--moduix-transition-default));
     border: none;
     flex-shrink: 0;
     justify-content: center;
@@ -22,28 +22,28 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--close-button-icon-size, var(--spacing-3));
-      height: var(--close-button-icon-size, var(--spacing-3));
+      width: var(--moduix-close-button-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-close-button-icon-size, var(--moduix-spacing-3));
       flex-shrink: 0;
     }
 
     @media (hover: hover) {
       &:hover:not([data-disabled]) {
-        background-color: var(--close-button-bg-hover, var(--color-muted));
-        color: var(--close-button-color-hover, var(--color-foreground));
+        background-color: var(--moduix-close-button-bg-hover, var(--moduix-color-muted));
+        color: var(--moduix-close-button-color-hover, var(--moduix-color-foreground));
       }
     }
 
     &:focus-visible {
-      outline: var(--close-button-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--close-button-focus-ring-color, var(--color-ring));
-      outline-offset: var(--close-button-focus-ring-offset, var(--focus-ring-offset));
+      outline: var(--moduix-close-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-close-button-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: var(--moduix-close-button-focus-ring-offset, var(--moduix-focus-ring-offset));
     }
 
     &[data-disabled] {
       cursor: default;
       pointer-events: none;
-      opacity: var(--close-button-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-close-button-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 }