@moduix/react 2.1.0 → 2.2.0

package/dist/components/editable/Editable.css

@@ -1,66 +1,67 @@
-@layer ui.components {
+@layer moduix.components {
   ._4ZG42W_root {
     box-sizing: border-box;
     align-items: center;
-    row-gap: var(--editable-gap, var(--spacing-1));
-    column-gap: var(--editable-control-gap, var(--spacing-1));
-    width: var(--editable-width, auto);
-    max-width: var(--editable-max-width, 100%);
-    color: var(--editable-color, var(--color-foreground));
+    row-gap: var(--moduix-editable-gap, var(--moduix-spacing-1));
+    column-gap: var(--moduix-editable-control-gap, var(--moduix-spacing-1));
+    width: var(--moduix-editable-width, auto);
+    max-width: var(--moduix-editable-max-width, 100%);
+    color: var(--moduix-editable-color, var(--moduix-color-foreground));
     grid-template-columns: minmax(0, 1fr) auto;
     display: inline-grid;
 
     &:has(._4ZG42W_area[data-disabled]) {
-      opacity: var(--editable-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-editable-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   ._4ZG42W_label {
     align-items: center;
-    gap: var(--editable-label-gap, var(--spacing-1));
-    color: var(--editable-label-color, var(--color-foreground));
-    font-size: var(--editable-label-font-size, var(--text-sm));
-    font-weight: var(--editable-label-font-weight, var(--weight-medium));
-    line-height: var(--editable-label-line-height, var(--line-height-text-sm));
+    gap: var(--moduix-editable-label-gap, var(--moduix-spacing-1));
+    color: var(--moduix-editable-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-editable-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-editable-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-editable-label-line-height, var(--moduix-line-height-text-sm));
     grid-column: 1 / -1;
     display: inline-flex;
 
     &[data-invalid] {
-      color: var(--editable-label-color-invalid, var(--color-destructive));
+      color: var(--moduix-editable-label-color-invalid, var(--moduix-color-destructive));
     }
   }
 
   ._4ZG42W_area {
-    --_editable-focus-ring-width: var(--editable-focus-ring-width, var(--editable-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
+    --_editable-focus-ring-width: var(--moduix-editable-focus-ring-width, var(--moduix-editable-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
     box-sizing: border-box;
-    width: var(--editable-area-width, 100%);
+    width: var(--moduix-editable-area-width, 100%);
     min-width: 0;
-    min-height: var(--editable-area-height, var(--size-md));
-    border: var(--editable-border-width, var(--border-width-sm)) var(--editable-border-style, solid)
-      var(--editable-border-color, var(--color-border));
-    border-radius: var(--editable-radius, var(--radius-md));
-    padding: var(--editable-padding-y, var(--spacing-1))
-      var(--editable-padding-x, var(--spacing-3-5));
-    background-color: var(--editable-bg, var(--color-background));
-    color: var(--editable-color, var(--color-foreground));
+    min-height: var(--moduix-editable-area-height, var(--moduix-size-md));
+    border: var(--moduix-editable-border-width, var(--moduix-border-width-sm))
+      var(--moduix-editable-border-style, solid)
+      var(--moduix-editable-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-editable-radius, var(--moduix-radius-md));
+    padding: var(--moduix-editable-padding-y, var(--moduix-spacing-1))
+      var(--moduix-editable-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-editable-bg, var(--moduix-color-background));
+    color: var(--moduix-editable-color, var(--moduix-color-foreground));
     outline: var(--_editable-focus-ring-width) solid transparent;
     outline-offset: calc(var(--_editable-focus-ring-width) * -1);
-    transition: border-color var(--editable-transition, var(--transition-default)),
-      outline-color var(--editable-transition, var(--transition-default)),
-      opacity var(--editable-transition, var(--transition-default));
+    transition: border-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-editable-transition, var(--moduix-transition-default));
     grid-column: 1;
     align-items: center;
     display: inline-flex;
 
     &[data-focus] {
-      outline-color: var(--editable-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-editable-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:has(._4ZG42W_input:is([data-invalid], [aria-invalid="true"]), ._4ZG42W_preview:is([data-invalid], [aria-invalid="true"])) {
-      border-color: var(--editable-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-editable-border-color-invalid, var(--moduix-color-destructive));
 
       &[data-focus] {
-        outline-color: var(--editable-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-editable-border-color-invalid, var(--moduix-color-destructive));
       }
     }
 
@@ -71,12 +72,12 @@
 
   ._4ZG42W_input, ._4ZG42W_preview {
     box-sizing: border-box;
-    width: var(--editable-input-width, 100%);
+    width: var(--moduix-editable-input-width, 100%);
     min-width: 0;
     color: inherit;
     font: inherit;
-    font-size: var(--editable-font-size, var(--text-md));
-    line-height: var(--editable-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-editable-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-editable-line-height, var(--moduix-line-height-text-md));
     background: none;
     border: 0;
     outline: 0;
@@ -89,21 +90,21 @@
     appearance: none;
 
     &::placeholder {
-      color: var(--editable-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-editable-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &:is(textarea) {
-      min-height: var(--editable-textarea-min-height, 6rem);
-      resize: var(--editable-textarea-resize, vertical);
+      min-height: var(--moduix-editable-textarea-min-height, 6rem);
+      resize: var(--moduix-editable-textarea-resize, vertical);
     }
   }
 
   ._4ZG42W_preview {
-    min-height: var(--editable-preview-min-height, 1lh);
+    min-height: var(--moduix-editable-preview-min-height, 1lh);
     cursor: text;
 
     &[data-placeholder-shown] {
-      color: var(--editable-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-editable-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &:is([data-disabled], [data-readonly], [aria-readonly="true"]) {
@@ -113,32 +114,33 @@
 
   ._4ZG42W_control {
     align-items: center;
-    align-self: var(--editable-control-align, center);
-    gap: var(--editable-control-gap, var(--spacing-1));
+    align-self: var(--moduix-editable-control-align, center);
+    gap: var(--moduix-editable-control-gap, var(--moduix-spacing-1));
     grid-column: 2;
     display: inline-flex;
   }
 
   ._4ZG42W_trigger {
     box-sizing: border-box;
-    width: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
-    min-width: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
-    height: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
-    border: var(--editable-trigger-border-width, var(--border-width-sm))
-      var(--editable-trigger-border-style, solid)
-      var(--editable-trigger-border-color, var(--color-border));
-    border-radius: var(--editable-trigger-radius, var(--radius-sm));
-    background-color: var(--editable-trigger-bg, var(--color-background));
-    color: var(--editable-trigger-color, var(--color-foreground));
-    outline: var(--editable-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+    width: var(--moduix-editable-trigger-size, var(--moduix-editable-area-height, var(--moduix-size-md)));
+    min-width: var(--moduix-editable-trigger-size, var(--moduix-editable-area-height, var(--moduix-size-md)));
+    height: var(--moduix-editable-trigger-size, var(--moduix-editable-area-height, var(--moduix-size-md)));
+    border: var(--moduix-editable-trigger-border-width, var(--moduix-border-width-sm))
+      var(--moduix-editable-trigger-border-style, solid)
+      var(--moduix-editable-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-editable-trigger-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-editable-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-editable-trigger-color, var(--moduix-color-foreground));
+    outline: var(--moduix-editable-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
       solid transparent;
-    outline-offset: calc(0px - var(--editable-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))));
+    outline-offset: calc(0px -
+        var(--moduix-editable-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
     cursor: pointer;
-    transition: background-color var(--editable-transition, var(--transition-default)),
-      border-color var(--editable-transition, var(--transition-default)),
-      color var(--editable-transition, var(--transition-default)),
-      outline-color var(--editable-transition, var(--transition-default)),
-      opacity var(--editable-transition, var(--transition-default));
+    transition: background-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-editable-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-editable-transition, var(--moduix-transition-default));
     justify-content: center;
     align-items: center;
     margin: 0;
@@ -147,26 +149,26 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--editable-trigger-bg-hover, var(--color-accent));
+        background-color: var(--moduix-editable-trigger-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:active {
-      background-color: var(--editable-trigger-bg-active, var(--editable-trigger-bg-hover, var(--color-accent)));
+      background-color: var(--moduix-editable-trigger-bg-active, var(--moduix-editable-trigger-bg-hover, var(--moduix-color-accent)));
     }
 
     &:focus-visible, &[data-focus] {
-      outline-color: var(--editable-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-editable-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:is([data-disabled], :disabled) {
       pointer-events: none;
-      opacity: var(--editable-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-editable-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     & > svg {
-      width: var(--editable-trigger-icon-size, var(--spacing-3-5));
-      height: var(--editable-trigger-icon-size, var(--spacing-3-5));
+      width: var(--moduix-editable-trigger-icon-size, var(--moduix-spacing-3-5));
+      height: var(--moduix-editable-trigger-icon-size, var(--moduix-spacing-3-5));
       flex-shrink: 0;
     }
   }

package/dist/components/empty/Empty.css

@@ -1,34 +1,34 @@
-@layer ui.components {
+@layer moduix.components {
   .QhU81q_root {
     box-sizing: border-box;
     justify-items: center;
-    gap: var(--empty-gap, var(--spacing-4));
+    gap: var(--moduix-empty-gap, var(--moduix-spacing-4));
     width: 100%;
     min-width: 0;
-    padding: var(--empty-padding, var(--spacing-8));
-    border: var(--empty-border-width, var(--border-width-sm)) solid
-      var(--empty-border-color, var(--color-border));
-    border-radius: var(--empty-radius, var(--radius-xl));
-    background-color: var(--empty-bg, color-mix(in oklab, var(--color-card) 92%, var(--color-muted)));
-    color: var(--empty-color, var(--color-card-foreground));
-    box-shadow: var(--empty-shadow, none);
+    padding: var(--moduix-empty-padding, var(--moduix-spacing-8));
+    border: var(--moduix-empty-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-empty-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-empty-radius, var(--moduix-radius-xl));
+    background-color: var(--moduix-empty-bg, color-mix(in oklab, var(--moduix-color-card) 92%, var(--moduix-color-muted)));
+    color: var(--moduix-empty-color, var(--moduix-color-card-foreground));
+    box-shadow: var(--moduix-empty-shadow, none);
     text-align: center;
     display: grid;
   }
 
   .QhU81q_icon {
     min-width: 0;
-    padding: var(--empty-icon-padding, var(--spacing-3));
-    border-radius: var(--radius-full);
-    background-color: var(--empty-icon-bg, var(--color-muted));
-    color: var(--empty-icon-color, var(--color-muted-foreground));
+    padding: var(--moduix-empty-icon-padding, var(--moduix-spacing-3));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-empty-icon-bg, var(--moduix-color-muted));
+    color: var(--moduix-empty-icon-color, var(--moduix-color-muted-foreground));
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     &:where(svg), & :where(svg) {
-      width: var(--empty-icon-size, var(--spacing-6));
-      height: var(--empty-icon-size, var(--spacing-6));
+      width: var(--moduix-empty-icon-size, var(--moduix-spacing-6));
+      height: var(--moduix-empty-icon-size, var(--moduix-spacing-6));
       pointer-events: none;
       flex-shrink: 0;
     }
@@ -36,27 +36,27 @@
 
   .QhU81q_content {
     justify-items: center;
-    gap: var(--empty-content-gap, var(--spacing-1));
+    gap: var(--moduix-empty-content-gap, var(--moduix-spacing-1));
     min-width: 0;
-    max-width: var(--empty-content-max-width, 28rem);
+    max-width: var(--moduix-empty-content-max-width, 28rem);
     display: grid;
   }
 
   .QhU81q_title {
     min-width: 0;
-    color: var(--empty-title-color, currentColor);
-    font-size: var(--empty-title-font-size, var(--text-xl));
-    font-weight: var(--empty-title-font-weight, var(--weight-semibold));
-    line-height: var(--empty-title-line-height, var(--line-height-text-xl));
+    color: var(--moduix-empty-title-color, currentColor);
+    font-size: var(--moduix-empty-title-font-size, var(--moduix-text-xl));
+    font-weight: var(--moduix-empty-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-empty-title-line-height, var(--moduix-line-height-text-xl));
     overflow-wrap: anywhere;
     margin: 0;
   }
 
   .QhU81q_description {
     min-width: 0;
-    color: var(--empty-description-color, var(--color-muted-foreground));
-    font-size: var(--empty-description-font-size, var(--text-sm));
-    line-height: var(--empty-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-empty-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-empty-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-empty-description-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
 
     & > :first-child {
@@ -71,7 +71,7 @@
   .QhU81q_actions {
     justify-content: center;
     align-items: center;
-    gap: var(--empty-actions-gap, var(--spacing-2));
+    gap: var(--moduix-empty-actions-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
     display: flex;
   }

package/dist/components/field/Field.css

@@ -1,111 +1,111 @@
-@layer ui.components {
+@layer moduix.components {
   .SVzJ0G_root {
     box-sizing: border-box;
     align-items: flex-start;
-    gap: var(--field-gap, var(--spacing-1));
-    width: var(--field-width, 100%);
-    max-width: var(--field-max-width, none);
-    color: var(--field-color, var(--color-foreground));
+    gap: var(--moduix-field-gap, var(--moduix-spacing-1));
+    width: var(--moduix-field-width, 100%);
+    max-width: var(--moduix-field-max-width, none);
+    color: var(--moduix-field-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-field-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .SVzJ0G_item {
-    gap: var(--field-item-gap, var(--spacing-1));
+    gap: var(--moduix-field-item-gap, var(--moduix-spacing-1));
     display: grid;
   }
 
   .SVzJ0G_label {
     align-items: center;
-    gap: var(--field-label-gap, var(--spacing-2));
-    color: var(--field-label-color, var(--color-foreground));
-    font-size: var(--field-label-font-size, var(--text-sm));
-    font-weight: var(--field-label-font-weight, var(--weight-medium));
-    line-height: var(--field-label-line-height, var(--line-height-text-sm));
+    gap: var(--moduix-field-label-gap, var(--moduix-spacing-2));
+    color: var(--moduix-field-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-field-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-field-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm));
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-field-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .SVzJ0G_helperText {
-    color: var(--field-description-color, var(--color-muted-foreground));
-    font-size: var(--field-description-font-size, var(--text-sm));
-    line-height: var(--field-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-field-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-field-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-field-description-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
 
     &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-field-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .SVzJ0G_control {
     box-sizing: border-box;
-    width: var(--field-control-width, 100%);
-    min-height: var(--field-control-height, var(--size-md));
-    border: var(--field-control-border-width, var(--border-width-sm))
-      var(--field-control-border-style, solid)
-      var(--field-control-border-color, var(--color-border));
-    border-radius: var(--field-control-radius, var(--radius-md));
-    padding: var(--field-control-padding-y, var(--spacing-1))
-      var(--field-control-padding-x, var(--spacing-3-5));
-    background-color: var(--field-control-bg, var(--color-background));
-    color: var(--field-control-color, var(--color-foreground));
+    width: var(--moduix-field-control-width, 100%);
+    min-height: var(--moduix-field-control-height, var(--moduix-size-md));
+    border: var(--moduix-field-control-border-width, var(--moduix-border-width-sm))
+      var(--moduix-field-control-border-style, solid)
+      var(--moduix-field-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-field-control-radius, var(--moduix-radius-md));
+    padding: var(--moduix-field-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-field-control-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-field-control-bg, var(--moduix-color-background));
+    color: var(--moduix-field-control-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--field-control-font-size, var(--text-md));
-    line-height: var(--field-control-line-height, var(--line-height-text-md));
-    outline: var(--field-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+    font-size: var(--moduix-field-control-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-field-control-line-height, var(--moduix-line-height-text-md));
+    outline: var(--moduix-field-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
       solid transparent;
-    outline-offset: var(--field-focus-ring-offset, var(--focus-ring-inset-offset));
-    transition: border-color var(--field-control-transition, var(--transition-default)),
-      outline-color var(--field-control-transition, var(--transition-default)),
-      opacity var(--field-control-transition, var(--transition-default));
+    outline-offset: var(--moduix-field-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    transition: border-color var(--moduix-field-control-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-field-control-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-field-control-transition, var(--moduix-transition-default));
     margin: 0;
 
     &::placeholder {
-      color: var(--field-control-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-field-control-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &:focus-visible {
-      outline-color: var(--field-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-field-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-invalid] {
-      border-color: var(--field-control-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-field-control-border-color-invalid, var(--moduix-color-destructive));
 
       &:focus-visible {
-        outline-color: var(--field-control-border-color-invalid, var(--color-destructive));
+        outline-color: var(--moduix-field-control-border-color-invalid, var(--moduix-color-destructive));
       }
     }
 
     &[data-disabled], &:disabled {
       pointer-events: none;
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-field-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .SVzJ0G_textarea {
-    min-height: var(--field-textarea-min-height, 5rem);
+    min-height: var(--moduix-field-textarea-min-height, 5rem);
     resize: vertical;
   }
 
   .SVzJ0G_errorText {
-    color: var(--field-error-color, var(--color-destructive));
-    font-size: var(--field-error-font-size, var(--text-sm));
-    line-height: var(--field-error-line-height, var(--line-height-text-sm));
+    color: var(--moduix-field-error-color, var(--moduix-color-destructive));
+    font-size: var(--moduix-field-error-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-field-error-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
 
     &[data-disabled] {
-      opacity: var(--field-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-field-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .SVzJ0G_requiredIndicator {
-    color: var(--field-required-indicator-color, var(--color-destructive));
+    color: var(--moduix-field-required-indicator-color, var(--moduix-color-destructive));
   }
 }

package/dist/components/fieldset/Fieldset.css

@@ -1,52 +1,52 @@
-@layer ui.components {
+@layer moduix.components {
   .zyuCNW_root, .zyuCNW_legend, .zyuCNW_helperText, .zyuCNW_errorText {
     box-sizing: border-box;
   }
 
   .zyuCNW_root {
-    gap: var(--fieldset-gap, var(--spacing-4));
-    width: var(--fieldset-width, 100%);
-    max-width: var(--fieldset-max-width, none);
-    margin: var(--fieldset-margin, 0);
-    padding: var(--fieldset-padding, 0);
-    border-width: var(--fieldset-border-width, 0);
-    border-style: var(--fieldset-border-style, solid);
-    border-color: var(--fieldset-border-color, transparent);
-    border-radius: var(--fieldset-radius, var(--radius-none));
+    gap: var(--moduix-fieldset-gap, var(--moduix-spacing-4));
+    width: var(--moduix-fieldset-width, 100%);
+    max-width: var(--moduix-fieldset-max-width, none);
+    margin: var(--moduix-fieldset-margin, 0);
+    padding: var(--moduix-fieldset-padding, 0);
+    border-width: var(--moduix-fieldset-border-width, 0);
+    border-style: var(--moduix-fieldset-border-style, solid);
+    border-color: var(--moduix-fieldset-border-color, transparent);
+    border-radius: var(--moduix-fieldset-radius, var(--moduix-radius-none));
     flex-direction: column;
     min-inline-size: 0;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--fieldset-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-fieldset-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &[data-invalid] {
-      border-color: var(--fieldset-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-fieldset-border-color-invalid, var(--moduix-color-destructive));
     }
   }
 
   .zyuCNW_legend {
     max-inline-size: 100%;
-    margin: var(--fieldset-legend-margin, 0);
-    padding: var(--fieldset-legend-padding, 0 0 var(--spacing-3));
-    color: var(--fieldset-legend-color, var(--color-foreground));
-    font-size: var(--fieldset-legend-font-size, var(--text-lg));
-    font-weight: var(--fieldset-legend-font-weight, var(--weight-semibold));
-    line-height: var(--fieldset-legend-line-height, var(--line-height-text-lg));
+    margin: var(--moduix-fieldset-legend-margin, 0);
+    padding: var(--moduix-fieldset-legend-padding, 0 0 var(--moduix-spacing-3));
+    color: var(--moduix-fieldset-legend-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-fieldset-legend-font-size, var(--moduix-text-lg));
+    font-weight: var(--moduix-fieldset-legend-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-fieldset-legend-line-height, var(--moduix-line-height-text-lg));
     display: inline-block;
   }
 
   .zyuCNW_helperText, .zyuCNW_errorText {
-    font-size: var(--fieldset-message-font-size, var(--text-sm));
-    line-height: var(--fieldset-message-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-fieldset-message-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-fieldset-message-line-height, var(--moduix-line-height-text-sm));
   }
 
   .zyuCNW_helperText {
-    color: var(--fieldset-helper-text-color, var(--color-muted-foreground));
+    color: var(--moduix-fieldset-helper-text-color, var(--moduix-color-muted-foreground));
   }
 
   .zyuCNW_errorText {
-    color: var(--fieldset-error-text-color, var(--color-destructive));
+    color: var(--moduix-fieldset-error-text-color, var(--moduix-color-destructive));
   }
 }