@moduix/react 2.1.0 → 2.2.0

package/dist/components/list/List.css

@@ -1,43 +1,43 @@
-@layer ui.components {
+@layer moduix.components {
   .dG8Cea_root[data-scope="list"][data-part="root"] {
-    --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
-    --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
-    --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
-    --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+    --_list-color: var(--moduix-list-color, var(--moduix-list-default-color, var(--moduix-color-foreground)));
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-md, var(--moduix-text-md)));
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-sm, var(--moduix-spacing-2)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-md, var(--moduix-line-height-text-md)));
     box-sizing: border-box;
     color: var(--_list-color);
-    font-family: var(--list-font-family, inherit);
+    font-family: var(--moduix-list-font-family, inherit);
     font-size: var(--_list-font-size);
-    font-weight: var(--list-font-weight, var(--weight-regular));
+    font-weight: var(--moduix-list-font-weight, var(--moduix-weight-regular));
     line-height: var(--_list-line-height);
-    letter-spacing: var(--list-letter-spacing, 0);
+    letter-spacing: var(--moduix-list-letter-spacing, 0);
     overflow-wrap: break-word;
     margin: 0;
     padding: 0;
     list-style-position: outside;
 
     &[data-gap="xs"] {
-      --_list-gap: var(--list-gap, var(--list-gap-xs, var(--spacing-1)));
+      --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-xs, var(--moduix-spacing-1)));
     }
 
     &[data-gap="sm"] {
-      --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
+      --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-sm, var(--moduix-spacing-2)));
     }
 
     &[data-gap="md"] {
-      --_list-gap: var(--list-gap, var(--list-gap-md, var(--spacing-3)));
+      --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-md, var(--moduix-spacing-3)));
     }
 
     &[data-gap="lg"] {
-      --_list-gap: var(--list-gap, var(--list-gap-lg, var(--spacing-4)));
+      --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-lg, var(--moduix-spacing-4)));
     }
 
     &[data-gap="xl"] {
-      --_list-gap: var(--list-gap, var(--list-gap-xl, var(--spacing-5)));
+      --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-xl, var(--moduix-spacing-5)));
     }
 
     &[data-gap="2xl"] {
-      --_list-gap: var(--list-gap, var(--list-gap-2xl, var(--spacing-6)));
+      --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-2xl, var(--moduix-spacing-6)));
     }
 
     & > li + li {
@@ -45,8 +45,8 @@
     }
 
     & > li::marker {
-      color: var(--list-marker-color, currentColor);
-      font-weight: var(--list-marker-font-weight, inherit);
+      color: var(--moduix-list-marker-color, currentColor);
+      font-weight: var(--moduix-list-marker-font-weight, inherit);
     }
 
     &[data-marker="none"] {
@@ -55,7 +55,7 @@
     }
 
     &:is(ul, ol)[data-marker="auto"], &[data-marker="disc"], &[data-marker="decimal"] {
-      padding-inline-start: var(--list-padding-x, var(--spacing-5));
+      padding-inline-start: var(--moduix-list-padding-x, var(--moduix-spacing-5));
     }
 
     &:is(ul)[data-marker="auto"], &[data-marker="disc"] {
@@ -71,48 +71,48 @@
     }
 
     &[data-size="xs"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-xs, var(--text-xs)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-xs, var(--line-height-text-xs)));
+      --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-xs, var(--moduix-text-xs)));
+      --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-xs, var(--moduix-line-height-text-xs)));
     }
 
     &[data-size="sm"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-sm, var(--text-sm)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-sm, var(--line-height-text-sm)));
+      --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-sm, var(--moduix-text-sm)));
+      --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-sm, var(--moduix-line-height-text-sm)));
     }
 
     &[data-size="md"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+      --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-md, var(--moduix-text-md)));
+      --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-md, var(--moduix-line-height-text-md)));
     }
 
     &[data-size="lg"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-lg, var(--text-lg)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-lg, var(--line-height-text-lg)));
+      --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-lg, var(--moduix-text-lg)));
+      --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-lg, var(--moduix-line-height-text-lg)));
     }
 
     &[data-size="xl"] {
-      --_list-font-size: var(--list-font-size, var(--list-font-size-xl, var(--text-xl)));
-      --_list-line-height: var(--list-line-height, var(--list-line-height-xl, var(--line-height-text-xl)));
+      --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-xl, var(--moduix-text-xl)));
+      --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-xl, var(--moduix-line-height-text-xl)));
     }
 
     &[data-tone="default"] {
-      --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
+      --_list-color: var(--moduix-list-color, var(--moduix-list-default-color, var(--moduix-color-foreground)));
     }
 
     &[data-tone="muted"] {
-      --_list-color: var(--list-color, var(--list-muted-color, var(--color-muted-foreground)));
+      --_list-color: var(--moduix-list-color, var(--moduix-list-muted-color, var(--moduix-color-muted-foreground)));
     }
 
     &[data-tone="subtle"] {
-      --_list-color: var(--list-color, var(--list-subtle-color, var(--color-secondary-foreground)));
+      --_list-color: var(--moduix-list-color, var(--moduix-list-subtle-color, var(--moduix-color-secondary-foreground)));
     }
 
     &[data-tone="primary"] {
-      --_list-color: var(--list-color, var(--list-primary-color, var(--color-primary)));
+      --_list-color: var(--moduix-list-color, var(--moduix-list-primary-color, var(--moduix-color-primary)));
     }
 
     &[data-tone="destructive"] {
-      --_list-color: var(--list-color, var(--list-destructive-color, var(--color-destructive)));
+      --_list-color: var(--moduix-list-color, var(--moduix-list-destructive-color, var(--moduix-color-destructive)));
     }
   }
 }

package/dist/components/listbox/Listbox.css

@@ -1,60 +1,61 @@
-@layer ui.components {
+@layer moduix.components {
   .SHhhXW_root {
     box-sizing: border-box;
-    width: var(--listbox-width, 16rem);
-    max-width: var(--listbox-max-width, 100%);
-    gap: var(--listbox-root-gap, var(--spacing-3));
+    width: var(--moduix-listbox-width, 16rem);
+    max-width: var(--moduix-listbox-max-width, 100%);
+    gap: var(--moduix-listbox-root-gap, var(--moduix-spacing-3));
     min-width: 0;
-    color: var(--listbox-color, var(--color-foreground));
+    color: var(--moduix-listbox-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--listbox-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .SHhhXW_label {
-    color: var(--listbox-label-color, var(--listbox-color, var(--color-foreground)));
-    font-size: var(--listbox-label-font-size, var(--text-sm));
-    font-weight: var(--listbox-label-font-weight, var(--weight-medium));
-    line-height: var(--listbox-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-listbox-label-color, var(--moduix-listbox-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-listbox-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-listbox-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-listbox-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
   }
 
   .SHhhXW_input {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--listbox-input-height, var(--size-md));
-    border: var(--listbox-input-border-width, var(--listbox-border-width, var(--border-width-sm)))
-      solid var(--listbox-input-border-color, var(--listbox-border-color, var(--color-border)));
-    border-radius: var(--listbox-input-radius, var(--listbox-radius, var(--radius-md)));
-    padding: var(--listbox-input-padding-y, var(--spacing-1))
-      var(--listbox-input-padding-x, var(--spacing-3));
-    background-color: var(--listbox-input-bg, var(--color-background));
-    color: var(--listbox-input-color, var(--listbox-color, var(--color-foreground)));
+    min-height: var(--moduix-listbox-input-height, var(--moduix-size-md));
+    border: var(--moduix-listbox-input-border-width, var(--moduix-listbox-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-listbox-input-border-color, var(--moduix-listbox-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-listbox-input-radius, var(--moduix-listbox-radius, var(--moduix-radius-md)));
+    padding: var(--moduix-listbox-input-padding-y, var(--moduix-spacing-1))
+      var(--moduix-listbox-input-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-listbox-input-bg, var(--moduix-color-background));
+    color: var(--moduix-listbox-input-color, var(--moduix-listbox-color, var(--moduix-color-foreground)));
     font: inherit;
-    font-size: var(--listbox-input-font-size, var(--text-md));
-    line-height: var(--listbox-input-line-height, var(--line-height-text-md));
-    outline: var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))))
+    font-size: var(--moduix-listbox-input-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-listbox-input-line-height, var(--moduix-line-height-text-md));
+    outline: var(--moduix-listbox-input-focus-ring-width, var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
       solid transparent;
-    outline-offset: calc(var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))) *
+    outline-offset: calc(var(--moduix-listbox-input-focus-ring-width, var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))) *
         -1);
-    transition: border-color var(--listbox-transition, var(--transition-default)),
-      outline-color var(--listbox-transition, var(--transition-default)),
-      opacity var(--listbox-transition, var(--transition-default));
+    transition: border-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-listbox-transition, var(--moduix-transition-default));
     margin: 0;
 
     &::placeholder {
-      color: var(--listbox-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-listbox-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &:focus-visible {
-      outline-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
+      outline-color: var(--moduix-listbox-input-focus-ring-color, var(--moduix-listbox-focus-ring-color, var(--moduix-color-ring)));
     }
 
     &[data-disabled], &[disabled] {
-      opacity: var(--listbox-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
@@ -72,7 +73,7 @@
   }
 
   .SHhhXW_filter + .SHhhXW_content {
-    margin-top: calc(-1 * var(--listbox-root-gap, var(--spacing-3)));
+    margin-top: calc(-1 * var(--moduix-listbox-root-gap, var(--moduix-spacing-3)));
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
@@ -80,24 +81,24 @@
   .SHhhXW_filterIcon {
     z-index: 1;
     top: 50%;
-    width: var(--listbox-filter-icon-size, var(--spacing-4));
-    height: var(--listbox-filter-icon-size, var(--spacing-4));
-    color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    width: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-listbox-filter-icon-color, var(--moduix-color-muted-foreground));
     pointer-events: none;
     position: absolute;
-    inset-inline-start: var(--listbox-filter-padding-x, var(--spacing-3));
+    inset-inline-start: var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3));
     transform: translateY(-50%);
   }
 
   .SHhhXW_filter .SHhhXW_input {
-    min-height: var(--listbox-filter-height, var(--listbox-input-height, var(--size-md)));
-    background-color: var(--listbox-bg, var(--color-background));
-    padding-inline-start: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
-        var(--listbox-filter-icon-size, var(--spacing-4)) +
-        var(--listbox-filter-input-padding-x, var(--spacing-2)));
-    padding-inline-end: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
-        var(--listbox-filter-action-size, var(--size-xs)) +
-        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+    min-height: var(--moduix-listbox-filter-height, var(--moduix-listbox-input-height, var(--moduix-size-md)));
+    background-color: var(--moduix-listbox-bg, var(--moduix-color-background));
+    padding-inline-start: calc(var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3)) +
+        var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4)) +
+        var(--moduix-listbox-filter-input-padding-x, var(--moduix-spacing-2)));
+    padding-inline-end: calc(var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3)) +
+        var(--moduix-listbox-filter-action-size, var(--moduix-size-xs)) +
+        var(--moduix-listbox-filter-input-padding-x, var(--moduix-spacing-2)));
 
     &:focus-visible {
       outline-color: #0000;
@@ -107,63 +108,64 @@
   .SHhhXW_clearTrigger {
     z-index: 1;
     top: 50%;
-    --close-button-size: var(--listbox-filter-action-size, var(--size-xs));
-    --close-button-radius: var(--listbox-filter-action-radius, var(--radius-sm));
-    --close-button-bg: var(--listbox-filter-action-bg, transparent);
-    --close-button-bg-hover: var(--listbox-filter-action-bg-hover, var(--color-muted));
-    --close-button-color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--listbox-filter-action-color-hover, var(--color-foreground));
-    --close-button-icon-size: var(--listbox-filter-icon-size, var(--spacing-4));
-    --close-button-transition: var(--listbox-transition, var(--transition-default));
+    --moduix-close-button-size: var(--moduix-listbox-filter-action-size, var(--moduix-size-xs));
+    --moduix-close-button-radius: var(--moduix-listbox-filter-action-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-listbox-filter-action-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-listbox-filter-action-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-listbox-filter-icon-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-listbox-filter-action-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-icon-size: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-transition: var(--moduix-listbox-transition, var(--moduix-transition-default));
     position: absolute;
-    inset-inline-end: var(--listbox-filter-padding-x, var(--spacing-3));
+    inset-inline-end: var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3));
     transform: translateY(-50%);
   }
 
   .SHhhXW_content {
     box-sizing: border-box;
     min-height: 0;
-    max-height: var(--listbox-content-max-height, 14rem);
-    border: var(--listbox-border-width, var(--border-width-sm)) solid
-      var(--listbox-border-color, var(--color-border));
-    border-radius: var(--listbox-radius, var(--radius-md));
-    padding-block: var(--listbox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
-    background-color: var(--listbox-bg, var(--color-background));
-    color: var(--listbox-color, var(--color-foreground));
-    outline: var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+    max-height: var(--moduix-listbox-content-max-height, 14rem);
+    border: var(--moduix-listbox-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-listbox-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-listbox-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-listbox-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    background-color: var(--moduix-listbox-bg, var(--moduix-color-background));
+    color: var(--moduix-listbox-color, var(--moduix-color-foreground));
+    outline: var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
       solid transparent;
-    outline-offset: calc(var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
+    outline-offset: calc(var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
     overscroll-behavior: auto;
     scrollbar-gutter: stable;
-    scroll-padding-block: var(--listbox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
-    transition: border-color var(--listbox-transition, var(--transition-default)),
-      outline-color var(--listbox-transition, var(--transition-default));
+    scroll-padding-block: var(--moduix-listbox-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    transition: border-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-listbox-transition, var(--moduix-transition-default));
     flex-direction: column;
     display: flex;
     overflow: hidden auto;
 
     &[data-layout="grid"] {
       grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
-      gap: var(--listbox-grid-gap, var(--spacing-1));
-      padding: var(--listbox-grid-padding, var(--spacing-2));
+      gap: var(--moduix-listbox-grid-gap, var(--moduix-spacing-1));
+      padding: var(--moduix-listbox-grid-padding, var(--moduix-spacing-2));
       display: grid;
     }
 
     &[data-orientation="horizontal"]:not([data-layout="grid"]) {
-      gap: var(--listbox-horizontal-gap, var(--spacing-2));
-      max-height: var(--listbox-horizontal-content-max-height, none);
-      padding-inline: var(--listbox-content-padding-y, var(--spacing-1));
+      gap: var(--moduix-listbox-horizontal-gap, var(--moduix-spacing-2));
+      max-height: var(--moduix-listbox-horizontal-content-max-height, none);
+      padding-inline: var(--moduix-listbox-content-padding-y, var(--moduix-spacing-1));
       flex-direction: row;
       overflow: auto hidden;
     }
   }
 
   .SHhhXW_empty {
-    padding-block: var(--listbox-empty-padding-y, var(--spacing-3));
-    padding-inline: var(--listbox-empty-padding-x, var(--spacing-3));
-    color: var(--listbox-empty-color, var(--color-muted-foreground));
-    font-size: var(--listbox-empty-font-size, var(--text-sm));
-    line-height: var(--listbox-empty-line-height, var(--line-height-text-sm));
+    padding-block: var(--moduix-listbox-empty-padding-y, var(--moduix-spacing-3));
+    padding-inline: var(--moduix-listbox-empty-padding-x, var(--moduix-spacing-3));
+    color: var(--moduix-listbox-empty-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-listbox-empty-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-listbox-empty-line-height, var(--moduix-line-height-text-sm));
     text-align: center;
   }
 
@@ -172,72 +174,73 @@
     display: flex;
 
     & + & {
-      margin-top: var(--listbox-item-group-gap, var(--spacing-2));
+      margin-top: var(--moduix-listbox-item-group-gap, var(--moduix-spacing-2));
     }
   }
 
   .SHhhXW_itemGroupLabel {
-    padding-block: var(--listbox-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
-    padding-inline: var(--listbox-item-group-label-padding-x, var(--spacing-2));
-    color: var(--listbox-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
-    font-size: var(--listbox-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
-    font-weight: var(--listbox-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
-    line-height: var(--listbox-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    padding-block: var(--moduix-listbox-item-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-listbox-item-group-label-padding-x, var(--moduix-spacing-2));
+    color: var(--moduix-listbox-item-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-color-muted-foreground)));
+    font-size: var(--moduix-listbox-item-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
+    font-weight: var(--moduix-listbox-item-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
+    line-height: var(--moduix-listbox-item-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
     user-select: none;
   }
 
   .SHhhXW_item {
     box-sizing: border-box;
-    width: calc(100% - var(--listbox-item-inset-x, var(--spacing-2)));
-    min-height: var(--listbox-item-min-height, var(--popup-item-min-height, var(--size-sm)));
-    grid-template-columns: minmax(0, 1fr) var(--listbox-item-indicator-size, var(--spacing-4));
+    width: calc(100% - var(--moduix-listbox-item-inset-x, var(--moduix-spacing-2)));
+    min-height: var(--moduix-listbox-item-min-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
+    grid-template-columns: minmax(0, 1fr) var(--moduix-listbox-item-indicator-size, var(--moduix-spacing-4));
     align-items: center;
-    gap: var(--listbox-item-gap, var(--spacing-2));
-    margin-inline: calc(var(--listbox-item-inset-x, var(--spacing-2)) / 2);
-    border: var(--listbox-item-border-width, 0) solid var(--listbox-item-border-color, transparent);
-    border-radius: var(--listbox-item-radius, var(--radius-sm));
-    padding-block: var(--listbox-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
-    padding-inline: var(--listbox-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
-    background-color: var(--listbox-item-bg, transparent);
-    color: var(--listbox-item-color, var(--listbox-color, var(--color-foreground)));
+    gap: var(--moduix-listbox-item-gap, var(--moduix-spacing-2));
+    margin-inline: calc(var(--moduix-listbox-item-inset-x, var(--moduix-spacing-2)) / 2);
+    border: var(--moduix-listbox-item-border-width, 0) solid
+      var(--moduix-listbox-item-border-color, transparent);
+    border-radius: var(--moduix-listbox-item-radius, var(--moduix-radius-sm));
+    padding-block: var(--moduix-listbox-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-listbox-item-padding-x, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
+    background-color: var(--moduix-listbox-item-bg, transparent);
+    color: var(--moduix-listbox-item-color, var(--moduix-listbox-color, var(--moduix-color-foreground)));
     font: inherit;
-    font-size: var(--listbox-item-font-size, var(--popup-item-font-size, var(--text-sm)));
-    line-height: var(--listbox-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    font-size: var(--moduix-listbox-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-listbox-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--listbox-transition, var(--transition-default)),
-      color var(--listbox-transition, var(--transition-default));
+    transition: background-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      color var(--moduix-listbox-transition, var(--moduix-transition-default));
     outline: 0;
     display: grid;
     position: relative;
 
     @media (hover: hover) {
       &:not([data-disabled]):hover {
-        background-color: var(--listbox-hover-bg, var(--listbox-highlight-bg, var(--color-accent)));
-        color: var(--listbox-hover-color, var(--listbox-highlight-color, var(--color-accent-foreground)));
+        background-color: var(--moduix-listbox-hover-bg, var(--moduix-listbox-highlight-bg, var(--moduix-color-accent)));
+        color: var(--moduix-listbox-hover-color, var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground)));
       }
     }
 
     &[data-highlighted] {
-      background-color: var(--listbox-highlight-bg, var(--color-accent));
-      color: var(--listbox-highlight-color, var(--color-accent-foreground));
+      background-color: var(--moduix-listbox-highlight-bg, var(--moduix-color-accent));
+      color: var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground));
     }
 
     &[data-selected] {
-      color: var(--listbox-item-selected-color, var(--listbox-item-color, var(--color-foreground)));
+      color: var(--moduix-listbox-item-selected-color, var(--moduix-listbox-item-color, var(--moduix-color-foreground)));
     }
 
     &[data-disabled] {
       pointer-events: none;
-      color: var(--listbox-item-disabled-color, var(--color-muted-foreground));
-      opacity: var(--listbox-disabled-opacity, var(--opacity-disabled));
+      color: var(--moduix-listbox-item-disabled-color, var(--moduix-color-muted-foreground));
+      opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
 
   .SHhhXW_content[data-orientation="horizontal"]:not([data-layout="grid"]) .SHhhXW_item {
-    width: var(--listbox-horizontal-item-width, 11rem);
-    min-width: var(--listbox-horizontal-item-width, 11rem);
+    width: var(--moduix-listbox-horizontal-item-width, 11rem);
+    min-width: var(--moduix-listbox-horizontal-item-width, 11rem);
     align-items: flex-start;
   }
 
@@ -250,8 +253,8 @@
     margin-inline: 0;
 
     &[data-selected] {
-      background-color: var(--listbox-grid-selected-bg, var(--color-muted));
-      color: var(--listbox-grid-selected-color, var(--color-foreground));
+      background-color: var(--moduix-listbox-grid-selected-bg, var(--moduix-color-muted));
+      color: var(--moduix-listbox-grid-selected-color, var(--moduix-color-foreground));
     }
   }
 
@@ -264,17 +267,17 @@
   }
 
   .SHhhXW_itemIndicator {
-    width: var(--listbox-item-indicator-size, var(--spacing-4));
-    height: var(--listbox-item-indicator-size, var(--spacing-4));
-    color: var(--listbox-item-indicator-color, currentColor);
+    width: var(--moduix-listbox-item-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-listbox-item-indicator-size, var(--moduix-spacing-4));
+    color: var(--moduix-listbox-item-indicator-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & > svg {
-      width: var(--listbox-item-indicator-icon-size, var(--spacing-3));
-      height: var(--listbox-item-indicator-icon-size, var(--spacing-3));
+      width: var(--moduix-listbox-item-indicator-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-listbox-item-indicator-icon-size, var(--moduix-spacing-3));
     }
 
     &[data-state="unchecked"] {
@@ -283,14 +286,14 @@
   }
 
   .SHhhXW_valueText {
-    color: var(--listbox-value-text-color, var(--color-muted-foreground));
-    font-size: var(--listbox-value-text-font-size, var(--text-sm));
-    line-height: var(--listbox-value-text-line-height, var(--line-height-text-sm));
+    color: var(--moduix-listbox-value-text-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-listbox-value-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-listbox-value-text-line-height, var(--moduix-line-height-text-sm));
   }
 
   .SHhhXW_itemTextContent {
     align-items: center;
-    gap: var(--listbox-item-text-content-gap, var(--spacing-2));
+    gap: var(--moduix-listbox-item-text-content-gap, var(--moduix-spacing-2));
     vertical-align: top;
     min-width: 0;
     max-width: 100%;
@@ -298,9 +301,9 @@
   }
 
   .SHhhXW_itemTextIcon {
-    width: var(--listbox-item-text-icon-size, var(--spacing-4));
-    height: var(--listbox-item-text-icon-size, var(--spacing-4));
-    color: var(--listbox-item-text-icon-color, currentColor);
+    width: var(--moduix-listbox-item-text-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-listbox-item-text-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-listbox-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
     align-items: center;

package/dist/components/marquee/Marquee.css

@@ -1,14 +1,14 @@
-@layer ui.components {
+@layer moduix.components {
   .MH_pgW_root {
     box-sizing: border-box;
-    width: var(--marquee-width, 100%);
-    height: var(--marquee-height, auto);
-    color: var(--marquee-color, var(--color-foreground));
+    width: var(--moduix-marquee-width, 100%);
+    height: var(--moduix-marquee-height, auto);
+    color: var(--moduix-marquee-color, var(--moduix-color-foreground));
     position: relative;
     overflow: hidden;
 
     &[data-orientation="vertical"] {
-      height: var(--marquee-vertical-height, var(--marquee-height, 15rem));
+      height: var(--moduix-marquee-vertical-height, var(--moduix-marquee-height, 15rem));
     }
 
     &[data-paused] .MH_pgW_content {
@@ -48,46 +48,46 @@
   }
 
   .MH_pgW_edge {
-    z-index: var(--marquee-edge-z-index, 1);
+    z-index: var(--moduix-marquee-edge-z-index, 1);
     pointer-events: none;
 
     &[data-side="start"] {
-      width: var(--marquee-edge-size, 20%);
+      width: var(--moduix-marquee-edge-size, 20%);
       background: linear-gradient(to right,
-        var(--marquee-edge-color, var(--color-background)),
+        var(--moduix-marquee-edge-color, var(--moduix-color-background)),
         transparent);
 
       &[dir="rtl"] {
         background: linear-gradient(to left,
-          var(--marquee-edge-color, var(--color-background)),
+          var(--moduix-marquee-edge-color, var(--moduix-color-background)),
           transparent);
       }
     }
 
     &[data-side="end"] {
-      width: var(--marquee-edge-size, 20%);
+      width: var(--moduix-marquee-edge-size, 20%);
       background: linear-gradient(to left,
-        var(--marquee-edge-color, var(--color-background)),
+        var(--moduix-marquee-edge-color, var(--moduix-color-background)),
         transparent);
 
       &[dir="rtl"] {
         background: linear-gradient(to right,
-          var(--marquee-edge-color, var(--color-background)),
+          var(--moduix-marquee-edge-color, var(--moduix-color-background)),
           transparent);
       }
     }
 
     &[data-side="top"] {
-      height: var(--marquee-edge-size, 20%);
+      height: var(--moduix-marquee-edge-size, 20%);
       background: linear-gradient(to bottom,
-        var(--marquee-edge-color, var(--color-background)),
+        var(--moduix-marquee-edge-color, var(--moduix-color-background)),
         transparent);
     }
 
     &[data-side="bottom"] {
-      height: var(--marquee-edge-size, 20%);
+      height: var(--moduix-marquee-edge-size, 20%);
       background: linear-gradient(to top,
-        var(--marquee-edge-color, var(--color-background)),
+        var(--moduix-marquee-edge-color, var(--moduix-color-background)),
         transparent);
     }
   }