@moduix/react 2.0.0 → 2.2.0

package/dist/components/tag/Tag.css

@@ -1,62 +1,62 @@
-@layer ui.components {
+@layer moduix.components {
   .mVOnGG_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--tag-gap, .375rem);
-    border: var(--tag-border-width, var(--border-width-sm)) solid
-      var(--tag-border-color, transparent);
-    border-radius: var(--tag-radius, var(--radius-full));
-    background-color: var(--tag-bg, var(--color-primary));
+    gap: var(--moduix-tag-gap, var(--moduix-spacing-1-5));
+    border: var(--moduix-tag-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tag-border-color, transparent);
+    border-radius: var(--moduix-tag-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-tag-bg, var(--moduix-color-primary));
     width: fit-content;
     min-width: 0;
     max-width: 100%;
-    color: var(--tag-color, var(--color-primary-foreground));
-    font-size: var(--tag-font-size, var(--text-xs));
-    font-weight: var(--tag-font-weight, var(--weight-medium));
-    line-height: var(--tag-line-height, var(--line-height-text-xs));
-    min-height: var(--tag-height-md, 1.5rem);
-    padding-block: var(--tag-padding-y-md, .125rem);
-    padding-inline: var(--tag-padding-x-md, .5rem);
+    color: var(--moduix-tag-color, var(--moduix-color-primary-foreground));
+    font-size: var(--moduix-tag-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-tag-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tag-line-height, var(--moduix-line-height-text-xs));
+    min-height: var(--moduix-tag-height-md, var(--moduix-size-xs));
+    padding-block: var(--moduix-tag-padding-y-md, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-tag-padding-x-md, var(--moduix-spacing-2));
     white-space: nowrap;
     vertical-align: middle;
-    transition: color var(--tag-transition, var(--transition-default)),
-      background-color var(--tag-transition, var(--transition-default)),
-      border-color var(--tag-transition, var(--transition-default));
+    transition: color var(--moduix-tag-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-tag-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-tag-transition, var(--moduix-transition-default));
     display: inline-flex;
 
     & > svg {
-      width: var(--tag-icon-size, .75rem);
-      height: var(--tag-icon-size, .75rem);
+      width: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
 
     &[data-size="sm"] {
-      gap: var(--tag-gap-sm, .25rem);
-      min-height: var(--tag-height-sm, 1.25rem);
-      padding-block: var(--tag-padding-y-sm, 0);
-      padding-inline: var(--tag-padding-x-sm, .375rem);
+      gap: var(--moduix-tag-gap-sm, var(--moduix-spacing-1));
+      min-height: var(--moduix-tag-height-sm, 1.25rem);
+      padding-block: var(--moduix-tag-padding-y-sm, 0);
+      padding-inline: var(--moduix-tag-padding-x-sm, var(--moduix-spacing-1-5));
     }
 
     &[data-variant="secondary"] {
-      background-color: var(--tag-bg, var(--color-secondary));
-      border-color: var(--tag-border-color, transparent);
-      color: var(--tag-color, var(--color-secondary-foreground));
+      background-color: var(--moduix-tag-bg, var(--moduix-color-secondary));
+      border-color: var(--moduix-tag-border-color, transparent);
+      color: var(--moduix-tag-color, var(--moduix-color-secondary-foreground));
     }
 
     &[data-variant="outline"], &[data-variant="ghost"] {
-      background-color: var(--tag-bg, transparent);
-      color: var(--tag-color, var(--color-foreground));
+      background-color: var(--moduix-tag-bg, transparent);
+      color: var(--moduix-tag-color, var(--moduix-color-foreground));
     }
 
     &[data-variant="outline"] {
-      border-color: var(--tag-border-color, var(--color-border));
+      border-color: var(--moduix-tag-border-color, var(--moduix-color-border));
     }
 
     &[data-variant="destructive"] {
-      background-color: var(--tag-bg, var(--color-destructive));
-      border-color: var(--tag-border-color, transparent);
-      color: var(--tag-color, var(--color-primary-foreground));
+      background-color: var(--moduix-tag-bg, var(--moduix-color-destructive));
+      border-color: var(--moduix-tag-border-color, transparent);
+      color: var(--moduix-tag-color, var(--moduix-color-destructive-foreground));
     }
   }
 
@@ -74,25 +74,25 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tag-icon-size, .75rem);
-      height: var(--tag-icon-size, .75rem);
+      width: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-tag-icon-size, var(--moduix-spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
   }
 
   .mVOnGG_closeTrigger {
-    --close-button-size: var(--tag-close-trigger-size, 1rem);
-    --close-button-radius: var(--tag-close-trigger-radius, var(--radius-full));
-    --close-button-icon-size: var(--tag-close-trigger-icon-size, .625rem);
-    --close-button-bg: var(--tag-close-trigger-bg, transparent);
-    --close-button-bg-hover: var(--tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
-    --close-button-color: inherit;
-    --close-button-color-hover: inherit;
-    --close-button-disabled-opacity: var(--tag-disabled-opacity, var(--opacity-disabled));
-    --close-button-focus-ring-width: var(--tag-close-trigger-focus-ring-width, var(--border-width-sm));
-    --close-button-focus-ring-color: var(--tag-close-trigger-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: var(--tag-close-trigger-focus-ring-offset, 0);
-    --close-button-transition: var(--tag-transition, var(--transition-default));
+    --moduix-close-button-size: var(--moduix-tag-close-trigger-size, var(--moduix-spacing-4));
+    --moduix-close-button-radius: var(--moduix-tag-close-trigger-radius, var(--moduix-radius-full));
+    --moduix-close-button-icon-size: var(--moduix-tag-close-trigger-icon-size, var(--moduix-spacing-2-5));
+    --moduix-close-button-bg: var(--moduix-tag-close-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+    --moduix-close-button-color: inherit;
+    --moduix-close-button-color-hover: inherit;
+    --moduix-close-button-disabled-opacity: var(--moduix-tag-disabled-opacity, var(--moduix-opacity-disabled));
+    --moduix-close-button-focus-ring-width: var(--moduix-tag-close-trigger-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)));
+    --moduix-close-button-focus-ring-color: var(--moduix-tag-close-trigger-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-tag-close-trigger-focus-ring-offset, 0);
+    --moduix-close-button-transition: var(--moduix-tag-transition, var(--moduix-transition-default));
   }
 }

package/dist/components/tags-input/TagsInput.css

@@ -1,71 +1,76 @@
-@layer ui.components {
+@layer moduix.components {
   ._0zrPYG_root {
     box-sizing: border-box;
-    gap: var(--tags-input-gap, var(--field-gap, var(--spacing-1)));
-    width: var(--tags-input-width, 100%);
-    max-width: var(--tags-input-max-width, 24rem);
-    color: var(--tags-input-color, var(--input-color, var(--color-foreground)));
+    gap: var(--moduix-tags-input-gap, var(--moduix-field-gap, var(--moduix-spacing-1)));
+    width: var(--moduix-tags-input-width, 100%);
+    max-width: var(--moduix-tags-input-max-width, 24rem);
+    color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--tags-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
     }
   }
 
   ._0zrPYG_label {
     align-items: center;
-    gap: var(--tags-input-label-gap, var(--field-label-gap, var(--spacing-1)));
-    color: var(--tags-input-label-color, var(--field-label-color, var(--color-foreground)));
-    font-size: var(--tags-input-label-font-size, var(--field-label-font-size, var(--text-sm)));
-    font-weight: var(--tags-input-label-font-weight, var(--field-label-font-weight, var(--weight-medium)));
-    line-height: var(--tags-input-label-line-height, var(--field-label-line-height, var(--line-height-text-sm)));
+    gap: var(--moduix-tags-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
+    color: var(--moduix-tags-input-label-color, var(--moduix-field-label-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-tags-input-label-font-size, var(--moduix-field-label-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-tags-input-label-font-weight, var(--moduix-field-label-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-tags-input-label-line-height, var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm)));
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--tags-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
     }
   }
 
   ._0zrPYG_control {
     box-sizing: border-box;
-    min-height: var(--tags-input-min-height, var(--input-height, var(--size-lg)));
+    min-height: var(--moduix-tags-input-min-height, var(--moduix-input-height, var(--moduix-size-md)));
     align-items: center;
-    gap: var(--tags-input-control-gap, var(--spacing-1));
-    border: var(--tags-input-border-width, var(--input-border-width, var(--border-width-sm)))
-      var(--input-border-style, solid)
-      var(--tags-input-border-color, var(--input-border-color, var(--color-border)));
-    border-radius: var(--tags-input-radius, var(--input-radius, var(--radius-md)));
+    gap: var(--moduix-tags-input-control-gap, var(--moduix-spacing-1));
+    border: var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      var(--moduix-input-border-style, solid)
+      var(--moduix-tags-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-tags-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
     width: 100%;
-    padding: var(--tags-input-padding-y, .3125rem) var(--tags-input-padding-x, .5rem);
-    background-color: var(--tags-input-bg, var(--input-bg, var(--color-background)));
-    color: var(--tags-input-color, var(--input-color, var(--color-foreground)));
-    outline: var(--tags-input-focus-ring-width, var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))))
+    padding: var(--moduix-tags-input-padding-y, .3125rem)
+      var(--moduix-tags-input-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-tags-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    outline: var(--moduix-tags-input-focus-ring-width, var(--moduix-input-focus-ring-width, var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))))
       solid transparent;
-    outline-offset: var(--tags-input-focus-ring-offset, var(--input-focus-ring-offset, calc(0px - var(--tags-input-border-width, var(--input-border-width, var(--border-width-sm))))));
-    transition: border-color var(--tags-input-transition, var(--input-transition, var(--transition-default))),
-      outline-color var(--tags-input-transition, var(--input-transition, var(--transition-default))),
+    outline-offset: var(--moduix-tags-input-focus-ring-offset, var(--moduix-input-focus-ring-offset, calc(0px -
+            var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm))))));
+    transition: border-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      outline-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
       background-color
-        var(--tags-input-transition, var(--input-transition, var(--transition-default))),
-      opacity var(--tags-input-transition, var(--input-transition, var(--transition-default)));
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default)));
     flex-wrap: wrap;
     display: flex;
 
     &[data-focus] {
-      outline-color: var(--tags-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+      outline-color: var(--moduix-tags-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
     }
 
     &[data-invalid] {
-      border-color: var(--tags-input-invalid-border-color, var(--input-border-color-invalid, var(--color-destructive)));
+      border-color: var(--moduix-tags-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
 
       &[data-focus] {
-        outline-color: var(--tags-input-invalid-focus-ring-color, var(--input-border-color-invalid, var(--color-destructive)));
+        outline-color: var(--moduix-tags-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
       }
     }
 
     &[data-readonly] {
-      background-color: var(--tags-input-readonly-bg, var(--input-readonly-bg, var(--tags-input-bg, var(--color-background))));
-      color: var(--tags-input-readonly-color, var(--input-readonly-color, var(--tags-input-color, var(--color-foreground))));
+      background-color: var(--moduix-tags-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-tags-input-bg, var(--moduix-color-background))));
+      color: var(--moduix-tags-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-tags-input-color, var(--moduix-color-foreground))));
     }
 
     &[data-disabled] {
@@ -80,33 +85,34 @@
   ._0zrPYG_itemPreview {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--tags-input-item-gap, var(--spacing-1));
+    gap: var(--moduix-tags-input-item-gap, var(--moduix-spacing-1));
     min-width: 0;
     max-width: 100%;
-    min-height: var(--tags-input-item-height, 1.5rem);
-    border: var(--tags-input-item-border-width, var(--border-width-sm)) solid
-      var(--tags-input-item-border-color, transparent);
-    border-radius: var(--tags-input-item-radius, var(--radius-full));
-    padding-block: var(--tags-input-item-padding-y, .125rem);
-    padding-inline: var(--tags-input-item-padding-x, .5rem);
-    background-color: var(--tags-input-item-bg, var(--color-secondary));
-    color: var(--tags-input-item-color, var(--color-secondary-foreground));
-    font-size: var(--tags-input-item-font-size, var(--text-xs));
-    font-weight: var(--tags-input-item-font-weight, var(--weight-medium));
-    line-height: var(--tags-input-item-line-height, var(--line-height-text-xs));
-    transition: border-color var(--tags-input-transition, var(--transition-default)),
-      background-color var(--tags-input-transition, var(--transition-default)),
-      color var(--tags-input-transition, var(--transition-default)),
-      box-shadow var(--tags-input-transition, var(--transition-default));
+    min-height: var(--moduix-tags-input-item-height, var(--moduix-size-xs));
+    border: var(--moduix-tags-input-item-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tags-input-item-border-color, transparent);
+    border-radius: var(--moduix-tags-input-item-radius, var(--moduix-radius-full));
+    padding-block: var(--moduix-tags-input-item-padding-y, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-tags-input-item-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-tags-input-item-bg, var(--moduix-color-secondary));
+    color: var(--moduix-tags-input-item-color, var(--moduix-color-secondary-foreground));
+    font-size: var(--moduix-tags-input-item-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-tags-input-item-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tags-input-item-line-height, var(--moduix-line-height-text-xs));
+    transition: border-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
     display: inline-flex;
 
     &[data-highlighted] {
-      box-shadow: 0 0 0 var(--tags-input-item-highlight-ring-width, var(--border-width-sm))
-        var(--tags-input-item-highlight-ring-color, var(--color-ring));
+      box-shadow: 0 0 0
+        var(--moduix-tags-input-item-highlight-ring-width, var(--moduix-border-width-sm))
+        var(--moduix-tags-input-item-highlight-ring-color, var(--moduix-color-ring));
     }
 
     &[data-disabled] {
-      opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
@@ -119,21 +125,21 @@
 
   ._0zrPYG_input, ._0zrPYG_itemInput {
     box-sizing: border-box;
-    flex: 1 1 var(--tags-input-input-min-width, 7rem);
-    min-width: var(--tags-input-input-min-width, 7rem);
-    height: var(--tags-input-input-height, 1.5rem);
-    padding: 0 var(--tags-input-input-padding-x, .25rem);
+    flex: 1 1 var(--moduix-tags-input-input-min-width, 7rem);
+    min-width: var(--moduix-tags-input-input-min-width, 7rem);
+    height: var(--moduix-tags-input-input-height, var(--moduix-size-xs));
+    padding: 0 var(--moduix-tags-input-input-padding-x, var(--moduix-spacing-1));
     color: inherit;
     font: inherit;
-    font-size: var(--tags-input-input-font-size, var(--input-font-size, var(--text-sm)));
-    line-height: var(--tags-input-input-line-height, var(--input-line-height, var(--line-height-text-sm)));
+    font-size: var(--moduix-tags-input-input-font-size, var(--moduix-input-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-tags-input-input-line-height, var(--moduix-input-line-height, var(--moduix-line-height-text-sm)));
     background-color: #0000;
     border: 0;
     outline: 0;
     margin: 0;
 
     &::placeholder {
-      color: var(--tags-input-placeholder-color, var(--input-placeholder-color, var(--color-muted-foreground)));
+      color: var(--moduix-tags-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
     }
 
     &[data-readonly], &:read-only {
@@ -142,20 +148,20 @@
   }
 
   ._0zrPYG_itemInput {
-    flex: 0 1 var(--tags-input-item-input-width, 7rem);
+    flex: 0 1 var(--moduix-tags-input-item-input-width, 7rem);
   }
 
   ._0zrPYG_itemDeleteTrigger {
-    width: var(--tags-input-trigger-size, 1rem);
-    height: var(--tags-input-trigger-size, 1rem);
-    border-radius: var(--tags-input-trigger-radius, var(--radius-full));
-    background-color: var(--tags-input-trigger-bg, transparent);
-    color: var(--tags-input-trigger-color, currentColor);
+    width: var(--moduix-tags-input-trigger-size, var(--moduix-spacing-4));
+    height: var(--moduix-tags-input-trigger-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-tags-input-trigger-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-tags-input-trigger-bg, transparent);
+    color: var(--moduix-tags-input-trigger-color, currentColor);
     cursor: pointer;
-    transition: background-color var(--tags-input-transition, var(--transition-default)),
-      color var(--tags-input-transition, var(--transition-default)),
-      opacity var(--tags-input-transition, var(--transition-default)),
-      box-shadow var(--tags-input-transition, var(--transition-default));
+    transition: background-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
     border: 0;
     outline: 0;
     flex: none;
@@ -165,41 +171,42 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tags-input-trigger-icon-size, .625rem);
-      height: var(--tags-input-trigger-icon-size, .625rem);
+      width: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
+      height: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
       pointer-events: none;
       flex: none;
     }
 
     &:hover {
-      background-color: var(--tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+      background-color: var(--moduix-tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--tags-input-trigger-focus-ring-width, var(--border-width-sm))
-        var(--tags-input-trigger-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0
+        var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-disabled], &:disabled {
       cursor: default;
-      opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
       pointer-events: none;
     }
   }
 
   ._0zrPYG_clearTrigger {
-    --close-button-size: var(--tags-input-clear-trigger-size, 1.5rem);
-    --close-button-icon-size: var(--tags-input-clear-trigger-icon-size, .75rem);
-    --close-button-radius: var(--tags-input-clear-trigger-radius, var(--radius-sm));
-    --close-button-bg: var(--tags-input-clear-trigger-bg, transparent);
-    --close-button-bg-hover: var(--tags-input-clear-trigger-bg-hover, var(--color-muted));
-    --close-button-color: var(--tags-input-clear-trigger-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--tags-input-clear-trigger-color-hover, var(--color-foreground));
-    --close-button-focus-ring-color: var(--tags-input-trigger-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-width: var(--tags-input-trigger-focus-ring-width, var(--border-width-sm));
-    --close-button-focus-ring-offset: var(--tags-input-trigger-focus-ring-offset, 2px);
-    --close-button-transition: var(--tags-input-transition, var(--transition-default));
-    --close-button-disabled-opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
+    --moduix-close-button-size: var(--moduix-tags-input-clear-trigger-size, var(--moduix-size-xs));
+    --moduix-close-button-icon-size: var(--moduix-tags-input-clear-trigger-icon-size, var(--moduix-spacing-3));
+    --moduix-close-button-radius: var(--moduix-tags-input-clear-trigger-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-tags-input-clear-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-tags-input-clear-trigger-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-tags-input-clear-trigger-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-tags-input-clear-trigger-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-focus-ring-color: var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-width: var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-border-width-sm));
+    --moduix-close-button-focus-ring-offset: var(--moduix-tags-input-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
+    --moduix-close-button-transition: var(--moduix-tags-input-transition, var(--moduix-transition-default));
+    --moduix-close-button-disabled-opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
     flex: none;
     align-self: center;
     margin-inline-start: auto;

package/dist/components/text/Text.css

@@ -1,61 +1,61 @@
-@layer ui.components {
+@layer moduix.components {
   .j--K1a_root {
-    font-family: var(--text-font-family, inherit);
-    font-size: var(--text-font-size-md, var(--text-md));
-    font-weight: var(--text-font-weight-regular, var(--weight-regular));
-    line-height: var(--text-line-height-md, var(--line-height-text-md));
-    letter-spacing: var(--text-letter-spacing, 0);
-    color: var(--text-default-color, var(--color-foreground));
+    font-family: var(--moduix-text-font-family, inherit);
+    font-size: var(--moduix-text-font-size-md, var(--moduix-text-md));
+    font-weight: var(--moduix-text-font-weight-regular, var(--moduix-weight-regular));
+    line-height: var(--moduix-text-line-height-md, var(--moduix-line-height-text-md));
+    letter-spacing: var(--moduix-text-letter-spacing, 0);
+    color: var(--moduix-text-default-color, var(--moduix-color-foreground));
     text-align: start;
     overflow-wrap: break-word;
     margin: 0;
 
     &[data-size="xs"] {
-      font-size: var(--text-font-size-xs, var(--text-xs));
-      line-height: var(--text-line-height-xs, var(--line-height-text-xs));
+      font-size: var(--moduix-text-font-size-xs, var(--moduix-text-xs));
+      line-height: var(--moduix-text-line-height-xs, var(--moduix-line-height-text-xs));
     }
 
     &[data-size="sm"] {
-      font-size: var(--text-font-size-sm, var(--text-sm));
-      line-height: var(--text-line-height-sm, var(--line-height-text-sm));
+      font-size: var(--moduix-text-font-size-sm, var(--moduix-text-sm));
+      line-height: var(--moduix-text-line-height-sm, var(--moduix-line-height-text-sm));
     }
 
     &[data-size="lg"] {
-      font-size: var(--text-font-size-lg, var(--text-lg));
-      line-height: var(--text-line-height-lg, var(--line-height-text-lg));
+      font-size: var(--moduix-text-font-size-lg, var(--moduix-text-lg));
+      line-height: var(--moduix-text-line-height-lg, var(--moduix-line-height-text-lg));
     }
 
     &[data-size="xl"] {
-      font-size: var(--text-font-size-xl, var(--text-xl));
-      line-height: var(--text-line-height-xl, var(--line-height-text-xl));
+      font-size: var(--moduix-text-font-size-xl, var(--moduix-text-xl));
+      line-height: var(--moduix-text-line-height-xl, var(--moduix-line-height-text-xl));
     }
 
     &[data-weight="medium"] {
-      font-weight: var(--text-font-weight-medium, var(--weight-medium));
+      font-weight: var(--moduix-text-font-weight-medium, var(--moduix-weight-medium));
     }
 
     &[data-weight="semibold"] {
-      font-weight: var(--text-font-weight-semibold, var(--weight-semibold));
+      font-weight: var(--moduix-text-font-weight-semibold, var(--moduix-weight-semibold));
     }
 
     &[data-weight="bold"] {
-      font-weight: var(--text-font-weight-bold, var(--weight-bold));
+      font-weight: var(--moduix-text-font-weight-bold, var(--moduix-weight-bold));
     }
 
     &[data-tone="muted"] {
-      color: var(--text-muted-color, var(--color-muted-foreground));
+      color: var(--moduix-text-muted-color, var(--moduix-color-muted-foreground));
     }
 
     &[data-tone="subtle"] {
-      color: var(--text-subtle-color, var(--color-secondary-foreground));
+      color: var(--moduix-text-subtle-color, var(--moduix-color-secondary-foreground));
     }
 
     &[data-tone="primary"] {
-      color: var(--text-primary-color, var(--color-primary));
+      color: var(--moduix-text-primary-color, var(--moduix-color-primary));
     }
 
     &[data-tone="destructive"] {
-      color: var(--text-destructive-color, var(--color-destructive));
+      color: var(--moduix-text-destructive-color, var(--moduix-color-destructive));
     }
 
     &[data-align="left"] {
@@ -78,7 +78,7 @@
 
     &[data-line-clamp] {
       white-space: normal;
-      -webkit-line-clamp: var(--text-line-clamp);
+      -webkit-line-clamp: var(--moduix-text-line-clamp);
       -webkit-box-orient: vertical;
       display: -webkit-box;
       overflow: hidden;

package/dist/components/text/Text.js

@@ -19,7 +19,7 @@ const TextRoot = forwardRef(function TextRoot({ as, asChild, size, weight, tone
 	const defaultWeight = as === "strong" ? "semibold" : "regular";
 	const lineClampStyle = lineClamp === void 0 ? style : {
 		...style,
-		"--text-line-clamp": lineClamp
+		"--moduix-text-line-clamp": lineClamp
 	};
 	return /* @__PURE__ */ jsx(Element, {
 		ref,

package/dist/components/textarea/Textarea.css

@@ -1,52 +1,54 @@
-@layer ui.components {
+@layer moduix.components {
   .bkkMzW_root {
     box-sizing: border-box;
-    width: var(--textarea-width, 100%);
-    max-width: var(--textarea-max-width, none);
-    min-height: var(--textarea-min-height, 6rem);
-    border: var(--textarea-border-width, var(--border-width-sm)) var(--textarea-border-style, solid)
-      var(--textarea-border-color, var(--color-border));
-    border-radius: var(--textarea-radius, var(--radius-md));
-    padding: var(--textarea-padding-y, .5rem) var(--textarea-padding-x, .875rem);
-    background-color: var(--textarea-bg, var(--color-background));
-    color: var(--textarea-color, var(--color-foreground));
+    width: var(--moduix-textarea-width, 100%);
+    max-width: var(--moduix-textarea-max-width, none);
+    min-height: var(--moduix-textarea-min-height, 6rem);
+    border: var(--moduix-textarea-border-width, var(--moduix-border-width-sm))
+      var(--moduix-textarea-border-style, solid)
+      var(--moduix-textarea-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-textarea-radius, var(--moduix-radius-md));
+    padding: var(--moduix-textarea-padding-y, var(--moduix-spacing-2))
+      var(--moduix-textarea-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-textarea-bg, var(--moduix-color-background));
+    color: var(--moduix-textarea-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--textarea-font-size, var(--text-md));
-    line-height: var(--textarea-line-height, var(--line-height-text-md));
-    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--border-width-sm)))
+    font-size: var(--moduix-textarea-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-textarea-line-height, var(--moduix-line-height-text-md));
+    outline: var(--moduix-textarea-focus-ring-width, var(--moduix-textarea-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
       solid transparent;
-    outline-offset: var(--textarea-focus-ring-offset, -1px);
-    resize: var(--textarea-resize, vertical);
-    transition: border-color var(--textarea-transition, var(--transition-default)),
-      outline-color var(--textarea-transition, var(--transition-default)),
-      opacity var(--textarea-transition, var(--transition-default));
+    outline-offset: var(--moduix-textarea-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    resize: var(--moduix-textarea-resize, vertical);
+    transition: border-color var(--moduix-textarea-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-textarea-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-textarea-transition, var(--moduix-transition-default));
     margin: 0;
   }
 
   .bkkMzW_root::placeholder {
-    color: var(--textarea-placeholder-color, var(--color-muted-foreground));
+    color: var(--moduix-textarea-placeholder-color, var(--moduix-color-muted-foreground));
   }
 
   .bkkMzW_root:focus-visible {
-    outline-color: var(--textarea-focus-ring-color, var(--color-ring));
+    outline-color: var(--moduix-textarea-focus-ring-color, var(--moduix-color-ring));
   }
 
   .bkkMzW_root:is([data-invalid], [aria-invalid="true"]) {
-    border-color: var(--textarea-border-color-invalid, var(--color-destructive));
+    border-color: var(--moduix-textarea-border-color-invalid, var(--moduix-color-destructive));
 
     &:focus-visible {
-      outline-color: var(--textarea-border-color-invalid, var(--color-destructive));
+      outline-color: var(--moduix-textarea-border-color-invalid, var(--moduix-color-destructive));
     }
   }
 
   .bkkMzW_root:is([disabled], [data-disabled]) {
     pointer-events: none;
-    opacity: var(--textarea-disabled-opacity, var(--opacity-disabled));
+    opacity: var(--moduix-textarea-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
   .bkkMzW_root:is(:read-only, [data-readonly]) {
-    background-color: var(--textarea-readonly-bg, var(--textarea-bg, var(--color-background)));
-    color: var(--textarea-readonly-color, var(--textarea-color, var(--color-foreground)));
+    background-color: var(--moduix-textarea-readonly-bg, var(--moduix-textarea-bg, var(--moduix-color-background)));
+    color: var(--moduix-textarea-readonly-color, var(--moduix-textarea-color, var(--moduix-color-foreground)));
   }
 
   .bkkMzW_root[data-autoresize] {