@moduix/react 2.0.0 → 2.2.0

package/dist/components/floating-panel/FloatingPanel.css

@@ -1,23 +1,23 @@
-@layer ui.components {
+@layer moduix.components {
   .L7Dmqq_trigger {
     box-sizing: border-box;
-    min-height: var(--floating-panel-trigger-height, var(--size-lg));
-    padding: var(--floating-panel-trigger-padding-y, .5rem)
-      var(--floating-panel-trigger-padding-x, var(--spacing-3));
-    border: var(--floating-panel-trigger-border-width, var(--border-width-sm)) solid
-      var(--floating-panel-trigger-border-color, var(--color-border));
-    border-radius: var(--floating-panel-trigger-radius, var(--radius-md));
-    background-color: var(--floating-panel-trigger-bg, var(--color-background));
-    color: var(--floating-panel-trigger-color, var(--color-foreground));
+    min-height: var(--moduix-floating-panel-trigger-height, var(--moduix-size-md));
+    padding: var(--moduix-floating-panel-trigger-padding-y, var(--moduix-spacing-1))
+      var(--moduix-floating-panel-trigger-padding-x, var(--moduix-spacing-3));
+    border: var(--moduix-floating-panel-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-floating-panel-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-floating-panel-trigger-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-floating-panel-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-floating-panel-trigger-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--floating-panel-trigger-font-size, var(--text-md));
-    line-height: var(--floating-panel-trigger-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-floating-panel-trigger-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-floating-panel-trigger-line-height, var(--moduix-line-height-text-md));
     user-select: none;
     cursor: pointer;
-    transition: background-color var(--floating-panel-transition, var(--transition-default)),
-      border-color var(--floating-panel-transition, var(--transition-default)),
-      color var(--floating-panel-transition, var(--transition-default)),
-      opacity var(--floating-panel-transition, var(--transition-default));
+    transition: background-color var(--moduix-floating-panel-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-floating-panel-transition, var(--moduix-transition-default)),
+      color var(--moduix-floating-panel-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-floating-panel-transition, var(--moduix-transition-default));
     outline: 0;
     justify-content: center;
     align-items: center;
@@ -26,45 +26,45 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--floating-panel-trigger-bg-hover, var(--color-accent));
+        background-color: var(--moduix-floating-panel-trigger-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:active, &[data-state="open"] {
-      background-color: var(--floating-panel-trigger-bg-active, var(--floating-panel-trigger-bg-hover, var(--color-accent)));
+      background-color: var(--moduix-floating-panel-trigger-bg-active, var(--moduix-floating-panel-trigger-bg-hover, var(--moduix-color-accent)));
     }
 
     &:focus-visible {
-      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm)))
-        solid var(--floating-panel-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm))) *
+      outline: var(--moduix-floating-panel-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-floating-panel-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-floating-panel-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
           -1);
     }
 
     &[data-disabled], &[disabled] {
       pointer-events: none;
-      opacity: var(--floating-panel-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-floating-panel-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
 
   .L7Dmqq_positioner {
-    z-index: var(--z-index, var(--floating-panel-z-index, var(--z-popup)));
+    z-index: var(--z-index, var(--moduix-floating-panel-z-index, var(--moduix-z-popup)));
     outline: 0;
   }
 
   .L7Dmqq_content {
     box-sizing: border-box;
-    width: var(--floating-panel-width, 100%);
-    height: var(--floating-panel-height, 100%);
-    min-width: var(--floating-panel-min-width, 16rem);
-    min-height: var(--floating-panel-min-height, 10rem);
-    border: var(--floating-panel-border-width, var(--border-width-sm)) solid
-      var(--floating-panel-border-color, var(--color-border));
-    border-radius: var(--floating-panel-radius, var(--radius-md));
-    background-color: var(--floating-panel-bg, var(--color-popover));
-    color: var(--floating-panel-color, var(--color-popover-foreground));
-    box-shadow: var(--floating-panel-shadow, var(--shadow-lg));
+    width: var(--moduix-floating-panel-width, 100%);
+    height: var(--moduix-floating-panel-height, 100%);
+    min-width: var(--moduix-floating-panel-min-width, 16rem);
+    min-height: var(--moduix-floating-panel-min-height, 10rem);
+    border: var(--moduix-floating-panel-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-floating-panel-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-floating-panel-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-floating-panel-bg, var(--moduix-color-popover));
+    color: var(--moduix-floating-panel-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-floating-panel-shadow, var(--moduix-shadow-lg));
     transform-origin: var(--transform-origin);
     outline: 0;
     flex-direction: column;
@@ -74,19 +74,21 @@
 
     &[data-state="open"] {
       animation: L7Dmqq_floating-panel-enter
-        var(--floating-panel-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        var(--moduix-floating-panel-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
         both;
     }
 
     &[data-state="closed"] {
       pointer-events: none;
       animation: L7Dmqq_floating-panel-exit
-        var(--floating-panel-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        var(--moduix-floating-panel-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
         both;
     }
 
     &[data-behind] {
-      opacity: var(--floating-panel-behind-opacity, .55);
+      opacity: var(--moduix-floating-panel-behind-opacity, .55);
     }
 
     &[data-minimized] {
@@ -102,13 +104,14 @@
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
-    gap: var(--floating-panel-header-gap, var(--spacing-3));
-    min-height: var(--floating-panel-header-height, var(--size-xl));
-    padding: var(--floating-panel-header-padding-y, var(--spacing-2))
-      var(--floating-panel-header-padding-x, var(--spacing-3));
-    border-bottom: var(--floating-panel-header-border-width, var(--border-width-sm)) solid
-      var(--floating-panel-header-border-color, var(--floating-panel-border-color, var(--color-border)));
-    background-color: var(--floating-panel-header-bg, var(--color-muted));
+    gap: var(--moduix-floating-panel-header-gap, var(--moduix-spacing-3));
+    min-height: var(--moduix-floating-panel-header-height, var(--moduix-size-xl));
+    padding: var(--moduix-floating-panel-header-padding-y, var(--moduix-spacing-2))
+      var(--moduix-floating-panel-header-padding-x, var(--moduix-spacing-3));
+    border-bottom: var(--moduix-floating-panel-header-border-width, var(--moduix-border-width-sm))
+      solid
+      var(--moduix-floating-panel-header-border-color, var(--moduix-floating-panel-border-color, var(--moduix-color-border)));
+    background-color: var(--moduix-floating-panel-header-bg, var(--moduix-color-muted));
     cursor: grab;
     user-select: none;
     display: flex;
@@ -124,38 +127,38 @@
 
   .L7Dmqq_title {
     align-items: center;
-    gap: var(--floating-panel-title-gap, var(--spacing-2));
+    gap: var(--moduix-floating-panel-title-gap, var(--moduix-spacing-2));
     min-width: 0;
-    color: var(--floating-panel-title-color, var(--floating-panel-color, var(--color-popover-foreground)));
-    font-size: var(--floating-panel-title-font-size, var(--text-sm));
-    font-weight: var(--floating-panel-title-font-weight, var(--weight-semibold));
-    line-height: var(--floating-panel-title-line-height, var(--line-height-text-sm));
+    color: var(--moduix-floating-panel-title-color, var(--moduix-floating-panel-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-floating-panel-title-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-floating-panel-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-floating-panel-title-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
     display: inline-flex;
   }
 
   .L7Dmqq_control {
     align-items: center;
-    gap: var(--floating-panel-control-gap, var(--spacing-1));
+    gap: var(--moduix-floating-panel-control-gap, var(--moduix-spacing-1));
     flex: none;
     display: inline-flex;
   }
 
   .L7Dmqq_controlButton {
     box-sizing: border-box;
-    width: var(--floating-panel-control-size, var(--size-sm));
-    height: var(--floating-panel-control-size, var(--size-sm));
-    border: var(--floating-panel-control-border-width, var(--border-width-sm)) solid
-      var(--floating-panel-control-border-color, var(--color-border));
-    border-radius: var(--floating-panel-control-radius, var(--radius-sm));
-    background-color: var(--floating-panel-control-bg, var(--color-background));
-    color: var(--floating-panel-control-color, var(--color-foreground));
+    width: var(--moduix-floating-panel-control-size, var(--moduix-size-sm));
+    height: var(--moduix-floating-panel-control-size, var(--moduix-size-sm));
+    border: var(--moduix-floating-panel-control-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-floating-panel-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-floating-panel-control-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-floating-panel-control-bg, var(--moduix-color-background));
+    color: var(--moduix-floating-panel-control-color, var(--moduix-color-foreground));
     font: inherit;
     cursor: pointer;
-    transition: background-color var(--floating-panel-transition, var(--transition-default)),
-      border-color var(--floating-panel-transition, var(--transition-default)),
-      color var(--floating-panel-transition, var(--transition-default)),
-      opacity var(--floating-panel-transition, var(--transition-default));
+    transition: background-color var(--moduix-floating-panel-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-floating-panel-transition, var(--moduix-transition-default)),
+      color var(--moduix-floating-panel-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-floating-panel-transition, var(--moduix-transition-default));
     outline: 0;
     justify-content: center;
     align-items: center;
@@ -164,50 +167,50 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--floating-panel-control-icon-size, 1rem);
-      height: var(--floating-panel-control-icon-size, 1rem);
+      width: var(--moduix-floating-panel-control-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-floating-panel-control-icon-size, var(--moduix-spacing-4));
     }
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--floating-panel-control-bg-hover, var(--color-accent));
+        background-color: var(--moduix-floating-panel-control-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible {
-      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm)))
-        solid var(--floating-panel-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm))) *
+      outline: var(--moduix-floating-panel-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-floating-panel-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-floating-panel-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
           -1);
     }
 
     &[data-disabled], &[disabled] {
       pointer-events: none;
-      opacity: var(--floating-panel-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-floating-panel-disabled-opacity, var(--moduix-opacity-disabled));
       cursor: default;
     }
   }
 
   .L7Dmqq_dragIndicator {
-    color: var(--floating-panel-drag-indicator-color, var(--color-muted-foreground));
+    color: var(--moduix-floating-panel-drag-indicator-color, var(--moduix-color-muted-foreground));
     flex: none;
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & > svg {
-      width: var(--floating-panel-drag-indicator-size, 1rem);
-      height: var(--floating-panel-drag-indicator-size, 1rem);
+      width: var(--moduix-floating-panel-drag-indicator-size, var(--moduix-spacing-4));
+      height: var(--moduix-floating-panel-drag-indicator-size, var(--moduix-spacing-4));
     }
   }
 
   .L7Dmqq_body {
     box-sizing: border-box;
     min-height: 0;
-    padding: var(--floating-panel-body-padding, var(--spacing-4));
-    color: var(--floating-panel-body-color, var(--floating-panel-color, var(--color-popover-foreground)));
-    font-size: var(--floating-panel-body-font-size, var(--text-sm));
-    line-height: var(--floating-panel-body-line-height, var(--line-height-text-sm));
+    padding: var(--moduix-floating-panel-body-padding, var(--moduix-spacing-4));
+    color: var(--moduix-floating-panel-body-color, var(--moduix-floating-panel-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-floating-panel-body-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-floating-panel-body-line-height, var(--moduix-line-height-text-sm));
     flex: auto;
     overflow: auto;
 
@@ -219,15 +222,16 @@
   .L7Dmqq_footer {
     box-sizing: border-box;
     align-items: center;
-    justify-content: var(--floating-panel-footer-justify, flex-end);
-    gap: var(--floating-panel-footer-gap, var(--spacing-2));
-    padding: var(--floating-panel-footer-padding-y, var(--spacing-2))
-      var(--floating-panel-footer-padding-x, var(--spacing-3));
-    border-top: var(--floating-panel-footer-border-width, var(--border-width-sm)) solid
-      var(--floating-panel-footer-border-color, var(--floating-panel-border-color, var(--color-border)));
-    color: var(--floating-panel-footer-color, var(--color-muted-foreground));
-    font-size: var(--floating-panel-footer-font-size, var(--text-xs));
-    line-height: var(--floating-panel-footer-line-height, var(--line-height-text-xs));
+    justify-content: var(--moduix-floating-panel-footer-justify, flex-end);
+    gap: var(--moduix-floating-panel-footer-gap, var(--moduix-spacing-2));
+    padding: var(--moduix-floating-panel-footer-padding-y, var(--moduix-spacing-2))
+      var(--moduix-floating-panel-footer-padding-x, var(--moduix-spacing-3));
+    border-top: var(--moduix-floating-panel-footer-border-width, var(--moduix-border-width-sm))
+      solid
+      var(--moduix-floating-panel-footer-border-color, var(--moduix-floating-panel-border-color, var(--moduix-color-border)));
+    color: var(--moduix-floating-panel-footer-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-floating-panel-footer-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-floating-panel-footer-line-height, var(--moduix-line-height-text-xs));
     flex: none;
     display: flex;
 
@@ -240,61 +244,61 @@
     position: absolute;
 
     &[data-axis="n"], &[data-axis="s"] {
-      left: var(--floating-panel-resize-edge-inset, .75rem);
-      width: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
-      height: var(--floating-panel-resize-edge-size, .5rem);
+      left: var(--moduix-floating-panel-resize-edge-inset, var(--moduix-spacing-3));
+      width: calc(100% - (var(--moduix-floating-panel-resize-edge-inset, var(--moduix-spacing-3)) * 2));
+      height: var(--moduix-floating-panel-resize-edge-size, var(--moduix-spacing-2));
       cursor: ns-resize;
     }
 
     &[data-axis="n"] {
-      top: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      top: calc(var(--moduix-floating-panel-resize-edge-size, var(--moduix-spacing-2)) / -2);
     }
 
     &[data-axis="s"] {
-      bottom: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      bottom: calc(var(--moduix-floating-panel-resize-edge-size, var(--moduix-spacing-2)) / -2);
     }
 
     &[data-axis="e"], &[data-axis="w"] {
-      top: var(--floating-panel-resize-edge-inset, .75rem);
-      width: var(--floating-panel-resize-edge-size, .5rem);
-      height: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
+      top: var(--moduix-floating-panel-resize-edge-inset, var(--moduix-spacing-3));
+      width: var(--moduix-floating-panel-resize-edge-size, var(--moduix-spacing-2));
+      height: calc(100% - (var(--moduix-floating-panel-resize-edge-inset, var(--moduix-spacing-3)) * 2));
       cursor: ew-resize;
     }
 
     &[data-axis="e"] {
-      right: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      right: calc(var(--moduix-floating-panel-resize-edge-size, var(--moduix-spacing-2)) / -2);
     }
 
     &[data-axis="w"] {
-      left: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      left: calc(var(--moduix-floating-panel-resize-edge-size, var(--moduix-spacing-2)) / -2);
     }
 
     &[data-axis="ne"], &[data-axis="nw"], &[data-axis="se"], &[data-axis="sw"] {
-      width: var(--floating-panel-resize-corner-size, .75rem);
-      height: var(--floating-panel-resize-corner-size, .75rem);
+      width: var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3));
+      height: var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3));
     }
 
     &[data-axis="ne"] {
-      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      top: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
+      right: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
       cursor: nesw-resize;
     }
 
     &[data-axis="nw"] {
-      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      top: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
+      left: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
       cursor: nwse-resize;
     }
 
     &[data-axis="se"] {
-      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      right: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
+      bottom: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
       cursor: nwse-resize;
     }
 
     &[data-axis="sw"] {
-      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      bottom: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
+      left: calc(var(--moduix-floating-panel-resize-corner-size, var(--moduix-spacing-3)) / -2);
       cursor: nesw-resize;
     }
 
@@ -305,19 +309,19 @@
 
   @keyframes L7Dmqq_floating-panel-enter {
     from {
-      opacity: var(--floating-panel-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--floating-panel-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--floating-panel-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      scale: var(--floating-panel-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
+      opacity: var(--moduix-floating-panel-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-floating-panel-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-floating-panel-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-floating-panel-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
     }
   }
 
   @keyframes L7Dmqq_floating-panel-exit {
     to {
-      opacity: var(--floating-panel-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--floating-panel-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--floating-panel-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      scale: var(--floating-panel-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
+      opacity: var(--moduix-floating-panel-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-floating-panel-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-floating-panel-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-floating-panel-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
 }

package/dist/components/floating-panel/FloatingPanel.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps } from "react";
 import { FloatingPanel, FloatingPanelResizeTriggerAxis } from "@ark-ui/react/floating-panel";
 
 //#region src/components/floating-panel/FloatingPanel.d.ts
-declare const resizeTriggerAxes: ("s" | "n" | "e" | "w" | "ne" | "se" | "sw" | "nw")[];
+declare const resizeTriggerAxes: ("s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne")[];
 type FloatingPanelRootProps = ComponentProps<typeof FloatingPanel.Root> & OverlayPortalProps;
 type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanel.RootProvider> & OverlayPortalProps;
 declare function FloatingPanelRoot({

package/dist/components/heading/Heading.css

@@ -1,58 +1,58 @@
-@layer ui.components {
+@layer moduix.components {
   .UnU3Mq_root {
-    --_heading-font-size: var(--heading-font-size-2xl, var(--text-3xl));
-    --_heading-line-height: var(--heading-line-height-2xl, var(--line-height-text-3xl));
-    --_heading-font-weight: var(--heading-font-weight-semibold, var(--weight-semibold));
-    color: var(--heading-color, var(--color-foreground));
-    font-family: var(--heading-font-family, inherit);
-    font-size: var(--heading-font-size, var(--_heading-font-size));
-    font-weight: var(--heading-font-weight, var(--_heading-font-weight));
-    line-height: var(--heading-line-height, var(--_heading-line-height));
-    letter-spacing: var(--heading-letter-spacing, 0);
-    text-wrap: var(--heading-text-wrap, balance);
+    --_heading-font-size: var(--moduix-heading-font-size-2xl, var(--moduix-text-3xl));
+    --_heading-line-height: var(--moduix-heading-line-height-2xl, var(--moduix-line-height-text-3xl));
+    --_heading-font-weight: var(--moduix-heading-font-weight-semibold, var(--moduix-weight-semibold));
+    color: var(--moduix-heading-color, var(--moduix-color-foreground));
+    font-family: var(--moduix-heading-font-family, inherit);
+    font-size: var(--moduix-heading-font-size, var(--_heading-font-size));
+    font-weight: var(--moduix-heading-font-weight, var(--_heading-font-weight));
+    line-height: var(--moduix-heading-line-height, var(--_heading-line-height));
+    letter-spacing: var(--moduix-heading-letter-spacing, 0);
+    text-wrap: var(--moduix-heading-text-wrap, balance);
     overflow-wrap: break-word;
     margin: 0;
 
     &:is(h6):not([data-size]), &[data-size="xs"] {
-      --_heading-font-size: var(--heading-font-size-xs, var(--text-sm));
-      --_heading-line-height: var(--heading-line-height-xs, var(--line-height-text-sm));
+      --_heading-font-size: var(--moduix-heading-font-size-xs, var(--moduix-text-sm));
+      --_heading-line-height: var(--moduix-heading-line-height-xs, var(--moduix-line-height-text-sm));
     }
 
     &:is(h5):not([data-size]), &[data-size="sm"] {
-      --_heading-font-size: var(--heading-font-size-sm, var(--text-md));
-      --_heading-line-height: var(--heading-line-height-sm, var(--line-height-text-md));
+      --_heading-font-size: var(--moduix-heading-font-size-sm, var(--moduix-text-md));
+      --_heading-line-height: var(--moduix-heading-line-height-sm, var(--moduix-line-height-text-md));
     }
 
     &:is(h4):not([data-size]), &[data-size="md"] {
-      --_heading-font-size: var(--heading-font-size-md, var(--text-lg));
-      --_heading-line-height: var(--heading-line-height-md, var(--line-height-text-lg));
+      --_heading-font-size: var(--moduix-heading-font-size-md, var(--moduix-text-lg));
+      --_heading-line-height: var(--moduix-heading-line-height-md, var(--moduix-line-height-text-lg));
     }
 
     &:is(h3):not([data-size]), &[data-size="lg"] {
-      --_heading-font-size: var(--heading-font-size-lg, var(--text-xl));
-      --_heading-line-height: var(--heading-line-height-lg, var(--line-height-text-xl));
+      --_heading-font-size: var(--moduix-heading-font-size-lg, var(--moduix-text-xl));
+      --_heading-line-height: var(--moduix-heading-line-height-lg, var(--moduix-line-height-text-xl));
     }
 
     &:is(h2):not([data-size]), &[data-size="xl"] {
-      --_heading-font-size: var(--heading-font-size-xl, var(--text-2xl));
-      --_heading-line-height: var(--heading-line-height-xl, var(--line-height-text-2xl));
+      --_heading-font-size: var(--moduix-heading-font-size-xl, var(--moduix-text-2xl));
+      --_heading-line-height: var(--moduix-heading-line-height-xl, var(--moduix-line-height-text-2xl));
     }
 
     &[data-size="2xl"] {
-      --_heading-font-size: var(--heading-font-size-2xl, var(--text-3xl));
-      --_heading-line-height: var(--heading-line-height-2xl, var(--line-height-text-3xl));
+      --_heading-font-size: var(--moduix-heading-font-size-2xl, var(--moduix-text-3xl));
+      --_heading-line-height: var(--moduix-heading-line-height-2xl, var(--moduix-line-height-text-3xl));
     }
 
     &[data-weight="regular"] {
-      --_heading-font-weight: var(--heading-font-weight-regular, var(--weight-regular));
+      --_heading-font-weight: var(--moduix-heading-font-weight-regular, var(--moduix-weight-regular));
     }
 
     &[data-weight="medium"] {
-      --_heading-font-weight: var(--heading-font-weight-medium, var(--weight-medium));
+      --_heading-font-weight: var(--moduix-heading-font-weight-medium, var(--moduix-weight-medium));
     }
 
     &[data-weight="bold"] {
-      --_heading-font-weight: var(--heading-font-weight-bold, var(--weight-bold));
+      --_heading-font-weight: var(--moduix-heading-font-weight-bold, var(--moduix-weight-bold));
     }
   }
 }

package/dist/components/highlight/Highlight.css

@@ -1,13 +1,13 @@
-@layer ui.components {
+@layer moduix.components {
   .UPU85W_root {
-    padding-block: var(--highlight-padding-y, .0625rem);
-    padding-inline: var(--highlight-padding-x, .25rem);
-    border-radius: var(--highlight-radius, var(--radius-xs));
-    background-color: var(--highlight-bg, color-mix(in oklab, var(--color-warning) 40%, var(--color-accent)));
-    color: var(--highlight-color, var(--color-foreground));
-    box-shadow: var(--highlight-shadow, none);
+    padding-block: var(--moduix-highlight-padding-y, .0625rem);
+    padding-inline: var(--moduix-highlight-padding-x, var(--moduix-spacing-1));
+    border-radius: var(--moduix-highlight-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-highlight-bg, color-mix(in oklab, var(--moduix-color-warning) 40%, var(--moduix-color-accent)));
+    color: var(--moduix-highlight-color, var(--moduix-color-foreground));
+    box-shadow: var(--moduix-highlight-shadow, none);
     font: inherit;
-    font-weight: var(--highlight-font-weight, var(--weight-medium));
+    font-weight: var(--moduix-highlight-font-weight, var(--moduix-weight-medium));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     text-decoration: none;