@moduix/react 2.0.0 → 2.2.0

package/dist/components/command-palette/CommandPalette.css

@@ -1,66 +1,67 @@
-@layer ui.components {
+@layer moduix.components {
   ._4OfG0a_trigger {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--command-palette-trigger-gap, var(--spacing-2));
-    min-height: var(--command-palette-trigger-height, var(--size-lg));
-    padding: var(--command-palette-trigger-padding-y, .5rem)
-      var(--command-palette-trigger-padding-x, .875rem);
-    border: var(--command-palette-trigger-border-width, var(--border-width-sm)) solid
-      var(--command-palette-trigger-border-color, var(--color-border));
-    border-radius: var(--command-palette-trigger-radius, var(--radius-md));
-    background-color: var(--command-palette-trigger-bg, var(--color-background));
-    color: var(--command-palette-trigger-color, var(--color-foreground));
+    gap: var(--moduix-command-palette-trigger-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-command-palette-trigger-height, var(--moduix-size-md));
+    padding: var(--moduix-command-palette-trigger-padding-y, var(--moduix-spacing-1))
+      var(--moduix-command-palette-trigger-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-command-palette-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-command-palette-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-command-palette-trigger-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-command-palette-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-command-palette-trigger-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--command-palette-trigger-font-size, var(--text-md));
-    line-height: var(--command-palette-trigger-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-command-palette-trigger-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-command-palette-trigger-line-height, var(--moduix-line-height-text-md));
     cursor: pointer;
     user-select: none;
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default),
-      color var(--transition-default);
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default);
     margin: 0;
     display: inline-flex;
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--command-palette-trigger-bg-hover, var(--color-accent));
+        background-color: var(--moduix-command-palette-trigger-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible {
-      outline: var(--command-palette-focus-ring-width, var(--border-width-sm)) solid
-        var(--command-palette-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--command-palette-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--moduix-command-palette-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-command-palette-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-command-palette-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+          -1);
     }
   }
 
   ._4OfG0a_backdrop {
-    z-index: var(--z-backdrop);
-    background-color: var(--command-palette-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    z-index: var(--moduix-z-backdrop);
+    background-color: var(--moduix-command-palette-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
     min-height: 100dvh;
-    backdrop-filter: var(--backdrop-filter, blur(var(--command-palette-backdrop-blur, 4px)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-command-palette-backdrop-blur, 4px)));
     position: fixed;
     inset: 0;
 
     &[data-state="open"] {
       animation: _4OfG0a_command-palette-backdrop-in
-        var(--command-palette-backdrop-transition, var(--transition-default));
+        var(--moduix-command-palette-backdrop-transition, var(--moduix-transition-default));
     }
 
     &[data-state="closed"] {
       animation: _4OfG0a_command-palette-backdrop-out
-        var(--command-palette-backdrop-transition, var(--transition-default));
+        var(--moduix-command-palette-backdrop-transition, var(--moduix-transition-default));
       animation-fill-mode: forwards;
     }
   }
 
   ._4OfG0a_positioner {
     box-sizing: border-box;
-    z-index: var(--z-modal);
+    z-index: var(--moduix-z-modal);
     overscroll-behavior: contain;
-    padding: var(--command-palette-positioner-padding, 10dvh var(--spacing-4) var(--spacing-4));
+    padding: var(--moduix-command-palette-positioner-padding, 10dvh var(--moduix-spacing-4) var(--moduix-spacing-4));
     place-items: start center;
     display: grid;
     position: fixed;
@@ -70,17 +71,17 @@
 
   ._4OfG0a_content {
     box-sizing: border-box;
-    width: min(var(--command-palette-width, 37.5rem),
-      var(--command-palette-max-width, calc(100vw - var(--spacing-8, 2rem))));
-    max-height: min(var(--command-palette-max-height, 34rem), calc(100dvh - 5rem));
-    border: var(--command-palette-border-width, var(--border-width-sm)) solid
-      var(--command-palette-border-color, color-mix(in oklab, var(--color-border) 84%, transparent));
-    border-radius: var(--command-palette-radius, var(--radius-lg));
+    width: min(var(--moduix-command-palette-width, 37.5rem),
+      var(--moduix-command-palette-max-width, calc(100vw - var(--moduix-spacing-8, 2rem))));
+    max-height: min(var(--moduix-command-palette-max-height, 34rem), calc(100dvh - 5rem));
+    border: var(--moduix-command-palette-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-command-palette-border-color, color-mix(in oklab, var(--moduix-color-border) 84%, transparent));
+    border-radius: var(--moduix-command-palette-radius, var(--moduix-radius-lg));
     background: linear-gradient(180deg,
-      var(--command-palette-top-bg, color-mix(in oklab, var(--color-popover) 96%, white 4%)),
-      var(--command-palette-bg, var(--color-popover)) 7rem);
-    color: var(--command-palette-color, var(--color-popover-foreground));
-    box-shadow: var(--command-palette-shadow, var(--shadow-lg));
+      var(--moduix-command-palette-top-bg, color-mix(in oklab, var(--moduix-color-popover) 96%, white 4%)),
+      var(--moduix-command-palette-bg, var(--moduix-color-popover)) 7rem);
+    color: var(--moduix-command-palette-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-command-palette-shadow, var(--moduix-shadow-lg));
     transform-origin: top;
     outline: 0;
     flex-direction: column;
@@ -89,51 +90,51 @@
 
     &[data-state="open"] {
       animation: _4OfG0a_command-palette-content-in
-        var(--command-palette-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-command-palette-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
     }
 
     &[data-state="closed"] {
       animation: _4OfG0a_command-palette-content-out
-        var(--command-palette-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-command-palette-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
       animation-fill-mode: forwards;
     }
   }
 
   ._4OfG0a_header {
-    gap: var(--command-palette-header-gap, var(--spacing-1));
-    padding: var(--command-palette-header-padding-y, var(--spacing-4))
-      var(--command-palette-header-padding-x, var(--spacing-4)) 0;
+    gap: var(--moduix-command-palette-header-gap, var(--moduix-spacing-1));
+    padding: var(--moduix-command-palette-header-padding-y, var(--moduix-spacing-4))
+      var(--moduix-command-palette-header-padding-x, var(--moduix-spacing-4)) 0;
     display: grid;
   }
 
   ._4OfG0a_title {
-    color: var(--command-palette-title-color, var(--command-palette-color, var(--color-popover-foreground)));
-    font-size: var(--command-palette-title-font-size, var(--text-md));
-    font-weight: var(--command-palette-title-font-weight, var(--weight-semibold));
-    line-height: var(--command-palette-title-line-height, var(--line-height-text-md));
+    color: var(--moduix-command-palette-title-color, var(--moduix-command-palette-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-command-palette-title-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-command-palette-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-command-palette-title-line-height, var(--moduix-line-height-text-md));
     margin: 0;
   }
 
   ._4OfG0a_description {
-    color: var(--command-palette-description-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-description-font-size, var(--text-sm));
-    line-height: var(--command-palette-description-line-height, var(--line-height-text-sm));
+    color: var(--moduix-command-palette-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-command-palette-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-command-palette-description-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
   }
 
   ._4OfG0a_clearTrigger {
-    --close-button-size: var(--command-palette-clear-size, var(--size-sm));
-    --close-button-radius: var(--command-palette-clear-radius, var(--radius-md));
-    --close-button-icon-size: var(--command-palette-icon-size, 1rem);
-    --close-button-bg: transparent;
-    --close-button-bg-hover: var(--command-palette-clear-bg-hover, var(--color-accent));
-    --close-button-color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--command-palette-color, var(--color-popover-foreground));
-    --close-button-focus-ring-width: var(--command-palette-focus-ring-width, var(--border-width-sm));
-    --close-button-focus-ring-color: var(--command-palette-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: var(--command-palette-focus-ring-offset, var(--border-width-sm));
+    --moduix-close-button-size: var(--moduix-command-palette-clear-size, var(--moduix-size-sm));
+    --moduix-close-button-radius: var(--moduix-command-palette-clear-radius, var(--moduix-radius-md));
+    --moduix-close-button-icon-size: var(--moduix-command-palette-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-bg: transparent;
+    --moduix-close-button-bg-hover: var(--moduix-command-palette-clear-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-command-palette-color, var(--moduix-color-popover-foreground));
+    --moduix-close-button-focus-ring-width: var(--moduix-command-palette-focus-ring-width, var(--moduix-border-width-sm));
+    --moduix-close-button-focus-ring-color: var(--moduix-command-palette-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-command-palette-focus-ring-offset, var(--moduix-border-width-sm));
   }
 
   ._4OfG0a_body {
@@ -143,11 +144,6 @@
     display: flex;
   }
 
-  ._4OfG0a_iconSvg {
-    width: var(--command-palette-icon-size, 1rem);
-    height: var(--command-palette-icon-size, 1rem);
-  }
-
   ._4OfG0a_combobox {
     flex-direction: column;
     flex: auto;
@@ -159,26 +155,26 @@
   ._4OfG0a_control {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--command-palette-input-gap, var(--spacing-2));
-    min-height: var(--command-palette-input-height, var(--size-md));
-    margin: var(--command-palette-control-margin-y, var(--spacing-2))
-      var(--command-palette-control-margin-x, var(--spacing-4))
-      var(--command-palette-control-margin-bottom, var(--spacing-2));
-    border: var(--command-palette-input-border-width, var(--border-width-sm)) solid
-      var(--command-palette-input-border-color, var(--color-border));
-    border-radius: var(--command-palette-input-radius, var(--radius-md));
-    padding: var(--command-palette-control-padding-y, var(--spacing-1))
-      var(--command-palette-control-padding-x, var(--spacing-3));
-    background-color: var(--command-palette-input-bg, var(--color-background));
-    color: var(--command-palette-input-color, var(--color-foreground));
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default);
+    gap: var(--moduix-command-palette-input-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-command-palette-input-height, var(--moduix-size-md));
+    margin: var(--moduix-command-palette-control-margin-y, var(--moduix-spacing-2))
+      var(--moduix-command-palette-control-margin-x, var(--moduix-spacing-4))
+      var(--moduix-command-palette-control-margin-bottom, var(--moduix-spacing-2));
+    border: var(--moduix-command-palette-input-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-command-palette-input-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-command-palette-input-radius, var(--moduix-radius-md));
+    padding: var(--moduix-command-palette-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-command-palette-control-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-command-palette-input-bg, var(--moduix-color-background));
+    color: var(--moduix-command-palette-input-color, var(--moduix-color-foreground));
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default);
     flex: none;
     display: flex;
     position: relative;
 
     &:has(._4OfG0a_input:is([data-invalid], [aria-invalid="true"])) {
-      border-color: var(--command-palette-input-border-color-invalid, var(--color-destructive));
+      border-color: var(--moduix-command-palette-input-border-color-invalid, var(--moduix-color-destructive));
     }
   }
 
@@ -186,11 +182,11 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--command-palette-input-control-height, var(--size-sm));
+    height: var(--moduix-command-palette-input-control-height, auto);
     color: inherit;
     font: inherit;
-    font-size: var(--command-palette-input-font-size, var(--text-sm));
-    line-height: var(--command-palette-input-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-command-palette-input-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-command-palette-input-line-height, var(--moduix-line-height-text-sm));
     background: none;
     border: 0;
     outline: 0;
@@ -198,11 +194,11 @@
     padding: 0;
 
     &::placeholder {
-      color: var(--command-palette-input-placeholder-color, var(--color-muted-foreground));
+      color: var(--moduix-command-palette-input-placeholder-color, var(--moduix-color-muted-foreground));
     }
 
     &[data-invalid] {
-      color: var(--color-destructive);
+      color: var(--moduix-color-destructive);
     }
   }
 
@@ -211,11 +207,11 @@
     padding: 0;
 
     &:not(:empty) {
-      padding: var(--command-palette-empty-padding-y, .75rem)
-        var(--command-palette-empty-padding-x, var(--spacing-4));
-      color: var(--command-palette-muted-color, var(--color-muted-foreground));
-      font-size: var(--command-palette-empty-font-size, var(--text-sm));
-      line-height: var(--command-palette-empty-line-height, var(--line-height-text-sm));
+      padding: var(--moduix-command-palette-empty-padding-y, var(--moduix-spacing-3))
+        var(--moduix-command-palette-empty-padding-x, var(--moduix-spacing-4));
+      color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
+      font-size: var(--moduix-command-palette-empty-font-size, var(--moduix-text-sm));
+      line-height: var(--moduix-command-palette-empty-line-height, var(--moduix-line-height-text-sm));
     }
   }
 
@@ -229,16 +225,16 @@
   }
 
   ._4OfG0a_scrollArea {
-    --scroll-area-radius: 0;
-    --scroll-area-scrollbar-margin: var(--command-palette-scrollbar-margin, var(--spacing-1));
-    --scroll-area-scrollbar-size: var(--command-palette-scrollbar-size, .375rem);
-    --scroll-area-thumb-bg: var(--command-palette-scrollbar-thumb-bg, var(--color-border));
-    --scroll-area-content-padding: var(--command-palette-list-padding-y, var(--spacing-2))
-      calc(var(--command-palette-list-padding-x, var(--spacing-2)) +
-          var(--scroll-area-scrollbar-size) + var(--scroll-area-scrollbar-margin))
-      var(--command-palette-list-padding-y, var(--spacing-2))
-      var(--command-palette-list-padding-x, var(--spacing-2));
-    --scroll-area-height: auto;
+    --moduix-scroll-area-radius: 0;
+    --moduix-scroll-area-scrollbar-margin: var(--moduix-command-palette-scrollbar-margin, var(--moduix-spacing-1));
+    --moduix-scroll-area-scrollbar-size: var(--moduix-command-palette-scrollbar-size, var(--moduix-spacing-1-5));
+    --moduix-scroll-area-thumb-bg: var(--moduix-command-palette-scrollbar-thumb-bg, var(--moduix-color-border));
+    --moduix-scroll-area-content-padding: var(--moduix-command-palette-list-padding-y, var(--moduix-spacing-2))
+      calc(var(--moduix-command-palette-list-padding-x, var(--moduix-spacing-2)) +
+          var(--moduix-scroll-area-scrollbar-size) + var(--moduix-scroll-area-scrollbar-margin))
+      var(--moduix-command-palette-list-padding-y, var(--moduix-spacing-2))
+      var(--moduix-command-palette-list-padding-x, var(--moduix-spacing-2));
+    --moduix-scroll-area-height: auto;
     width: 100%;
     min-height: 0;
     color: inherit;
@@ -246,7 +242,7 @@
   }
 
   ._4OfG0a_scrollViewport {
-    scroll-padding-block: var(--command-palette-list-scroll-padding-y, var(--spacing-2));
+    scroll-padding-block: var(--moduix-command-palette-list-scroll-padding-y, var(--moduix-spacing-2));
   }
 
   ._4OfG0a_scrollContent {
@@ -258,27 +254,27 @@
   }
 
   ._4OfG0a_scrollbar {
-    --scroll-area-scrollbar-bg: transparent;
+    --moduix-scroll-area-scrollbar-bg: transparent;
   }
 
   ._4OfG0a_itemGroup {
-    gap: var(--command-palette-group-gap, var(--spacing-1));
+    gap: var(--moduix-command-palette-group-gap, var(--moduix-spacing-1));
     display: grid;
 
     &:not(:last-child) {
-      padding-bottom: var(--command-palette-group-padding-bottom, var(--spacing-2));
+      padding-bottom: var(--moduix-command-palette-group-padding-bottom, var(--moduix-spacing-2));
     }
   }
 
   ._4OfG0a_itemGroupLabel {
     z-index: 1;
-    padding: var(--command-palette-group-label-padding-y, var(--spacing-1))
-      var(--command-palette-group-label-padding-x, var(--spacing-3));
-    background-color: var(--command-palette-bg, var(--color-popover));
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-group-label-font-size, var(--text-xs));
-    font-weight: var(--command-palette-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--command-palette-group-label-line-height, var(--line-height-text-xs));
+    padding: var(--moduix-command-palette-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)))
+      var(--moduix-command-palette-group-label-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-command-palette-bg, var(--moduix-color-popover));
+    color: var(--moduix-command-palette-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground))));
+    font-size: var(--moduix-command-palette-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
+    font-weight: var(--moduix-command-palette-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
+    line-height: var(--moduix-command-palette-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
     margin: 0;
     display: block;
     position: sticky;
@@ -289,15 +285,15 @@
     box-sizing: border-box;
     z-index: 0;
     align-items: center;
-    gap: var(--command-palette-item-gap, var(--spacing-3));
-    min-height: var(--command-palette-item-min-height, 3rem);
-    padding: var(--command-palette-item-padding-y, var(--spacing-2))
-      var(--command-palette-item-padding-x, var(--spacing-3));
-    border-radius: var(--command-palette-item-radius, var(--radius-md));
-    color: var(--command-palette-item-color, var(--command-palette-color, var(--color-foreground)));
+    gap: var(--moduix-command-palette-item-gap, var(--moduix-spacing-3));
+    min-height: var(--moduix-command-palette-item-min-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
+    padding: var(--moduix-command-palette-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)))
+      var(--moduix-command-palette-item-padding-x, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
+    border-radius: var(--moduix-command-palette-item-radius, var(--moduix-radius-md));
+    color: var(--moduix-command-palette-item-color, var(--moduix-command-palette-color, var(--moduix-color-foreground)));
     font: inherit;
-    font-size: var(--command-palette-item-font-size, var(--text-sm));
-    line-height: var(--command-palette-item-line-height, var(--line-height-text-sm));
+    font-size: var(--moduix-command-palette-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-command-palette-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
     cursor: default;
     user-select: none;
     outline: 0;
@@ -306,43 +302,43 @@
     position: relative;
 
     &[data-highlighted] {
-      color: var(--command-palette-highlight-color, var(--color-foreground));
+      color: var(--moduix-command-palette-highlight-color, var(--moduix-color-foreground));
 
       &:before {
         content: "";
         z-index: -1;
         border-radius: inherit;
-        background-color: var(--command-palette-highlight-bg, var(--color-accent));
+        background-color: var(--moduix-command-palette-highlight-bg, var(--moduix-color-accent));
         position: absolute;
         inset: 0;
       }
     }
 
     &[data-state="checked"] {
-      color: var(--command-palette-selected-color, var(--command-palette-highlight-color, inherit));
+      color: var(--moduix-command-palette-selected-color, var(--moduix-command-palette-highlight-color, inherit));
     }
 
     &[data-disabled] {
-      opacity: var(--opacity-disabled);
+      opacity: var(--moduix-opacity-disabled);
       pointer-events: none;
     }
   }
 
   ._4OfG0a_itemIcon, ._4OfG0a_itemIndicator {
-    width: var(--command-palette-item-icon-box-size, 2rem);
-    height: var(--command-palette-item-icon-box-size, 2rem);
-    border: var(--command-palette-item-icon-border-width, var(--border-width-sm)) solid
-      var(--command-palette-item-icon-border-color, var(--color-border));
-    border-radius: var(--command-palette-item-icon-radius, var(--radius-md));
-    background-color: var(--command-palette-item-icon-bg, var(--color-muted));
-    color: var(--command-palette-item-icon-color, var(--color-muted-foreground));
+    width: var(--moduix-command-palette-item-icon-box-size, var(--moduix-spacing-8));
+    height: var(--moduix-command-palette-item-icon-box-size, var(--moduix-spacing-8));
+    border: var(--moduix-command-palette-item-icon-border-width, var(--moduix-border-width-sm))
+      solid var(--moduix-command-palette-item-icon-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-command-palette-item-icon-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-command-palette-item-icon-bg, var(--moduix-color-muted));
+    color: var(--moduix-command-palette-item-icon-color, var(--moduix-color-muted-foreground));
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & > svg {
-      width: var(--command-palette-item-icon-size, 1rem);
-      height: var(--command-palette-item-icon-size, 1rem);
+      width: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
     }
   }
 
@@ -352,13 +348,13 @@
     justify-self: end;
 
     & > svg {
-      width: var(--command-palette-item-icon-size, 1rem);
-      height: var(--command-palette-item-icon-size, 1rem);
+      width: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
     }
   }
 
   ._4OfG0a_itemText {
-    gap: var(--command-palette-item-text-gap, var(--spacing-1));
+    gap: var(--moduix-command-palette-item-text-gap, var(--moduix-spacing-1));
     min-width: 0;
     display: grid;
 
@@ -371,88 +367,88 @@
   }
 
   ._4OfG0a_itemLabel {
-    font-weight: var(--command-palette-item-label-font-weight, var(--weight-medium));
+    font-weight: var(--moduix-command-palette-item-label-font-weight, var(--moduix-weight-medium));
   }
 
   ._4OfG0a_itemDescription {
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-item-description-font-size, var(--text-xs));
-    line-height: var(--command-palette-item-description-line-height, var(--line-height-text-xs));
+    color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-command-palette-item-description-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-command-palette-item-description-line-height, var(--moduix-line-height-text-xs));
   }
 
   ._4OfG0a_itemMeta {
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-item-meta-font-size, var(--text-xs));
-    line-height: var(--command-palette-item-meta-line-height, var(--line-height-text-xs));
+    color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-command-palette-item-meta-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-command-palette-item-meta-line-height, var(--moduix-line-height-text-xs));
     white-space: nowrap;
     justify-self: end;
   }
 
   ._4OfG0a_separator {
-    height: var(--command-palette-divider-width, var(--border-width-sm));
-    margin: var(--command-palette-separator-margin-y, var(--spacing-2))
-      var(--command-palette-separator-margin-x, var(--spacing-2));
-    background-color: var(--command-palette-divider-color, var(--color-border));
+    height: var(--moduix-command-palette-divider-width, var(--moduix-border-width-sm));
+    margin: var(--moduix-command-palette-separator-margin-y, var(--moduix-spacing-2))
+      var(--moduix-command-palette-separator-margin-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-command-palette-divider-color, var(--moduix-color-border));
   }
 
   ._4OfG0a_footer {
     justify-content: space-between;
     align-items: center;
-    gap: var(--command-palette-footer-gap, var(--spacing-3));
-    padding: var(--command-palette-footer-padding-y, var(--spacing-2))
-      var(--command-palette-footer-padding-x, var(--spacing-4));
-    border-top: var(--command-palette-divider-width, var(--border-width-sm)) solid
-      var(--command-palette-divider-color, var(--color-border));
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-footer-font-size, var(--text-xs));
-    line-height: var(--command-palette-footer-line-height, var(--line-height-text-xs));
+    gap: var(--moduix-command-palette-footer-gap, var(--moduix-spacing-3));
+    padding: var(--moduix-command-palette-footer-padding-y, var(--moduix-spacing-2))
+      var(--moduix-command-palette-footer-padding-x, var(--moduix-spacing-4));
+    border-top: var(--moduix-command-palette-divider-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-command-palette-divider-color, var(--moduix-color-border));
+    color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-command-palette-footer-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-command-palette-footer-line-height, var(--moduix-line-height-text-xs));
     flex: none;
     display: flex;
   }
 
   ._4OfG0a_kbd {
-    --kbd-bg: var(--command-palette-kbd-bg, var(--color-muted));
-    --kbd-border-color: var(--command-palette-kbd-border-color, var(--color-border));
-    --kbd-border-width: var(--command-palette-kbd-border-width, var(--border-width-sm));
-    --kbd-color: var(--command-palette-kbd-color, var(--color-muted-foreground));
-    --kbd-font-family: var(--command-palette-kbd-font-family, var(--font-mono));
-    --kbd-font-size: var(--command-palette-kbd-font-size, var(--text-xs));
-    --kbd-height: var(--command-palette-kbd-height, 1.25rem);
-    --kbd-line-height: var(--command-palette-kbd-line-height, 1rem);
-    --kbd-min-width: var(--command-palette-kbd-min-width, 1.25rem);
-    --kbd-padding-x: var(--command-palette-kbd-padding-x, var(--spacing-1));
-    --kbd-radius: var(--command-palette-kbd-radius, var(--radius-sm));
+    --moduix-kbd-bg: var(--moduix-command-palette-kbd-bg, var(--moduix-color-muted));
+    --moduix-kbd-border-color: var(--moduix-command-palette-kbd-border-color, var(--moduix-color-border));
+    --moduix-kbd-border-width: var(--moduix-command-palette-kbd-border-width, var(--moduix-border-width-sm));
+    --moduix-kbd-color: var(--moduix-command-palette-kbd-color, var(--moduix-color-muted-foreground));
+    --moduix-kbd-font-family: var(--moduix-command-palette-kbd-font-family, var(--moduix-font-mono));
+    --moduix-kbd-font-size: var(--moduix-command-palette-kbd-font-size, var(--moduix-text-xs));
+    --moduix-kbd-height: var(--moduix-command-palette-kbd-height, 1.25rem);
+    --moduix-kbd-line-height: var(--moduix-command-palette-kbd-line-height, 1rem);
+    --moduix-kbd-min-width: var(--moduix-command-palette-kbd-min-width, 1.25rem);
+    --moduix-kbd-padding-x: var(--moduix-command-palette-kbd-padding-x, var(--moduix-spacing-1));
+    --moduix-kbd-radius: var(--moduix-command-palette-kbd-radius, var(--moduix-radius-sm));
   }
 
   @keyframes _4OfG0a_command-palette-backdrop-in {
     from {
-      opacity: var(--command-palette-backdrop-starting-opacity, 0);
-      backdrop-filter: var(--command-palette-backdrop-starting-blur, none);
+      opacity: var(--moduix-command-palette-backdrop-starting-opacity, 0);
+      backdrop-filter: var(--moduix-command-palette-backdrop-starting-blur, none);
     }
   }
 
   @keyframes _4OfG0a_command-palette-backdrop-out {
     to {
-      opacity: var(--command-palette-backdrop-ending-opacity, 0);
-      backdrop-filter: var(--command-palette-backdrop-ending-blur, none);
+      opacity: var(--moduix-command-palette-backdrop-ending-opacity, 0);
+      backdrop-filter: var(--moduix-command-palette-backdrop-ending-blur, none);
     }
   }
 
   @keyframes _4OfG0a_command-palette-content-in {
     from {
-      opacity: var(--command-palette-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--command-palette-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--command-palette-content-starting-translate-y, var(--popup-motion-starting-translate-y, -.75rem));
-      scale: var(--command-palette-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
+      opacity: var(--moduix-command-palette-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-command-palette-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-command-palette-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, -.75rem));
+      scale: var(--moduix-command-palette-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
     }
   }
 
   @keyframes _4OfG0a_command-palette-content-out {
     to {
-      opacity: var(--command-palette-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--command-palette-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--command-palette-content-ending-translate-y, var(--popup-motion-ending-translate-y, -.75rem));
-      scale: var(--command-palette-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
+      opacity: var(--moduix-command-palette-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-command-palette-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-command-palette-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, -.75rem));
+      scale: var(--moduix-command-palette-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
 }

package/dist/components/command-palette/CommandPalette.module.js

@@ -15,7 +15,6 @@ var CommandPalette_module_default = {
 	"empty": "_4OfG0a_empty",
 	"footer": "_4OfG0a_footer",
 	"header": "_4OfG0a_header",
-	"iconSvg": "_4OfG0a_iconSvg",
 	"input": "_4OfG0a_input",
 	"item": "_4OfG0a_item",
 	"itemDescription": "_4OfG0a_itemDescription",