@moduix/react 2.0.0 → 2.2.0

package/dist/components/drawer/Drawer.css

@@ -1,21 +1,22 @@
-@layer ui.components {
+@layer moduix.components {
   ._uVP9W_trigger, ._uVP9W_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--drawer-control-height, var(--size-lg));
-    padding: var(--drawer-control-padding-y, .5rem) var(--drawer-control-padding-x, .875rem);
-    border: var(--drawer-control-border-width, var(--border-width-sm)) solid
-      var(--drawer-control-border-color, var(--color-border));
-    border-radius: var(--drawer-control-radius, var(--radius-md));
-    background-color: var(--drawer-control-bg, var(--color-background));
-    color: var(--drawer-control-color, var(--color-foreground));
+    min-height: var(--moduix-drawer-control-height, var(--moduix-size-md));
+    padding: var(--moduix-drawer-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-drawer-control-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-drawer-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-drawer-control-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-drawer-control-bg, var(--moduix-color-background));
+    color: var(--moduix-drawer-control-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--drawer-control-font-size, var(--text-md));
-    line-height: var(--drawer-control-line-height, var(--line-height-text-md));
+    font-size: var(--moduix-drawer-control-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-drawer-control-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);
     justify-content: center;
     align-items: center;
     margin: 0;
@@ -23,40 +24,44 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--drawer-control-bg-hover, var(--color-accent));
+        background-color: var(--moduix-drawer-control-bg-hover, var(--moduix-color-accent));
       }
     }
 
     &:focus-visible {
-      outline: var(--drawer-focus-ring-width, var(--drawer-control-border-width, var(--border-width-sm)))
-        solid var(--drawer-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--drawer-focus-ring-width, var(--drawer-control-border-width, var(--border-width-sm))) *
+      outline: var(--moduix-drawer-focus-ring-width, var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-drawer-focus-ring-color, var(--moduix-color-ring));
+      outline-offset: calc(var(--moduix-drawer-focus-ring-width, var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm))) *
           -1);
     }
 
     &[data-disabled], &[disabled] {
       pointer-events: none;
-      opacity: var(--opacity-disabled);
+      opacity: var(--moduix-opacity-disabled);
     }
   }
 
   ._uVP9W_backdrop {
-    z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
-    background-color: var(--drawer-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
+    background-color: var(--moduix-drawer-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
     min-height: 100dvh;
-    backdrop-filter: var(--backdrop-filter, blur(var(--drawer-backdrop-blur, 4px)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-drawer-backdrop-blur, 4px)));
     opacity: calc(1 - var(--drawer-swipe-progress, 0));
-    transition: opacity calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out),
-      backdrop-filter calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out);
+    transition: opacity calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out),
+      backdrop-filter calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out);
     position: fixed;
     inset: 0;
 
     &[data-state="open"] {
-      animation: _uVP9W_drawer-backdrop-in var(--drawer-backdrop-transition, var(--transition-spring));
+      animation: _uVP9W_drawer-backdrop-in
+        var(--moduix-drawer-backdrop-transition, var(--moduix-transition-spring));
     }
 
     &[data-state="closed"] {
-      animation: _uVP9W_drawer-backdrop-out var(--drawer-backdrop-transition, var(--transition-spring));
+      animation: _uVP9W_drawer-backdrop-out
+        var(--moduix-drawer-backdrop-transition, var(--moduix-transition-spring));
       animation-fill-mode: forwards;
     }
 
@@ -71,9 +76,9 @@
 
   ._uVP9W_positioner {
     box-sizing: border-box;
-    z-index: calc(var(--z-modal) + var(--layer-index, 0));
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
     overscroll-behavior: contain;
-    padding: var(--drawer-positioner-padding, 0);
+    padding: var(--moduix-drawer-positioner-padding, 0);
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -103,25 +108,31 @@
   }
 
   ._uVP9W_content {
-    --drawer-bleed: var(--drawer-bleed-size, 3rem);
+    --moduix-drawer-bleed: var(--moduix-drawer-bleed-size, var(--moduix-size-xl));
     box-sizing: border-box;
-    width: min(var(--drawer-width, 100%), 100vw);
-    height: var(--drawer-size, 100%);
-    max-height: var(--drawer-max-height, 80dvh);
-    padding: var(--drawer-padding-y, var(--spacing-2)) var(--drawer-padding-x, var(--spacing-6))
-      calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-bottom, 0px));
-    border: var(--drawer-border-width, var(--border-width-sm)) solid
-      var(--drawer-border-color, var(--color-border));
-    border-radius: var(--drawer-radius, var(--radius-xl)) var(--drawer-radius, var(--radius-xl)) 0 0;
-    background-color: var(--drawer-bg, var(--color-popover));
-    color: var(--drawer-color, var(--color-popover-foreground));
-    box-shadow: var(--drawer-shadow, var(--shadow-lg));
+    width: min(var(--moduix-drawer-width, 100%), 100vw);
+    height: var(--moduix-drawer-size, 100%);
+    max-height: var(--moduix-drawer-max-height, 80dvh);
+    padding: var(--moduix-drawer-padding-y, var(--moduix-spacing-2))
+      var(--moduix-drawer-padding-x, var(--moduix-spacing-6))
+      calc(var(--moduix-drawer-padding-y, var(--moduix-spacing-4)) + env(safe-area-inset-bottom, 0px));
+    border: var(--moduix-drawer-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-drawer-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl))
+      var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0 0;
+    background-color: var(--moduix-drawer-bg, var(--moduix-color-popover));
+    color: var(--moduix-drawer-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-drawer-shadow, var(--moduix-shadow-lg));
     overscroll-behavior: contain;
     transform-origin: bottom;
-    transition: transform calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out),
-      height calc(var(--drawer-swipe-strength, 1) * var(--duration-slower)) var(--ease-out),
-      scale var(--drawer-nested-transition, var(--drawer-transition, var(--transition-spring))),
-      translate var(--drawer-nested-transition, var(--drawer-transition, var(--transition-spring)));
+    transition: transform calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out),
+      height calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out),
+      scale
+        var(--moduix-drawer-nested-transition, var(--moduix-drawer-transition, var(--moduix-transition-spring))),
+      translate
+        var(--moduix-drawer-nested-transition, var(--moduix-drawer-transition, var(--moduix-transition-spring)));
     outline: 0;
     flex-direction: column;
     display: flex;
@@ -131,7 +142,7 @@
 
     &:after {
       inset-inline: 0;
-      height: var(--drawer-bleed);
+      height: var(--moduix-drawer-bleed);
       background-color: inherit;
       content: "";
       pointer-events: none;
@@ -140,11 +151,13 @@
     }
 
     &[data-state="open"] {
-      animation: _uVP9W_drawer-content-in-down var(--drawer-transition, var(--transition-spring));
+      animation: _uVP9W_drawer-content-in-down
+        var(--moduix-drawer-transition, var(--moduix-transition-spring));
     }
 
     &[data-state="closed"] {
-      animation: _uVP9W_drawer-content-out-down var(--drawer-transition, var(--transition-spring));
+      animation: _uVP9W_drawer-content-out-down
+        var(--moduix-drawer-transition, var(--moduix-transition-spring));
       animation-fill-mode: forwards;
     }
 
@@ -158,10 +171,10 @@
 
     &[data-swipe-direction="up"] {
       transform-origin: top;
-      padding-top: calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-top, 0px));
-      padding-bottom: var(--drawer-padding-y, var(--spacing-4));
-      border-radius: 0 0 var(--drawer-radius, var(--radius-xl))
-        var(--drawer-radius, var(--radius-xl));
+      padding-top: calc(var(--moduix-drawer-padding-y, var(--moduix-spacing-4)) + env(safe-area-inset-top, 0px));
+      padding-bottom: var(--moduix-drawer-padding-y, var(--moduix-spacing-4));
+      border-radius: 0 0 var(--moduix-drawer-radius, var(--moduix-radius-xl))
+        var(--moduix-drawer-radius, var(--moduix-radius-xl));
 
       &:after {
         top: auto;
@@ -178,15 +191,16 @@
     }
 
     &[data-swipe-direction="left"], &[data-swipe-direction="right"] {
-      width: min(var(--drawer-side-width, 22rem), calc(100vw - var(--spacing-8)));
-      height: var(--drawer-side-height, 100%);
+      width: min(var(--moduix-drawer-side-width, 22rem), calc(100vw - var(--moduix-spacing-8)));
+      height: var(--moduix-drawer-side-height, 100%);
       max-height: none;
-      padding: var(--drawer-padding-y, var(--spacing-6)) var(--drawer-padding-x, var(--spacing-6));
+      padding: var(--moduix-drawer-padding-y, var(--moduix-spacing-6))
+        var(--moduix-drawer-padding-x, var(--moduix-spacing-6));
 
       &:after {
         inset-block: 0;
         inset-inline: auto;
-        width: var(--drawer-bleed);
+        width: var(--moduix-drawer-bleed);
         height: auto;
         top: 0;
       }
@@ -194,8 +208,8 @@
 
     &[data-swipe-direction="left"] {
       transform-origin: 0;
-      border-radius: 0 var(--drawer-radius, var(--radius-xl)) var(--drawer-radius, var(--radius-xl))
-        0;
+      border-radius: 0 var(--moduix-drawer-radius, var(--moduix-radius-xl))
+        var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0;
 
       &:after {
         right: 100%;
@@ -212,8 +226,8 @@
 
     &[data-swipe-direction="right"] {
       transform-origin: 100%;
-      border-radius: var(--drawer-radius, var(--radius-xl)) 0 0
-        var(--drawer-radius, var(--radius-xl));
+      border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0 0
+        var(--moduix-drawer-radius, var(--moduix-radius-xl));
 
       &:after {
         left: 100%;
@@ -229,33 +243,37 @@
     }
 
     &[data-nested-drawer-open] {
-      scale: calc(1 - var(--drawer-nested-scale-step, .05) * var(--nested-drawers, 0));
+      scale: calc(1 - var(--moduix-drawer-nested-scale-step, .05) * var(--nested-drawers, 0));
     }
 
     &[data-swipe-direction="down"][data-nested-drawer-open] {
       translate: 0
-        calc(-1 * var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0));
+        calc(-1 * var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0));
     }
 
     &[data-swipe-direction="up"][data-nested-drawer-open] {
       translate: 0
-        calc(var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0));
+        calc(var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0));
     }
 
     &[data-swipe-direction="left"][data-nested-drawer-open] {
-      translate: calc(var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0))
+      translate: calc(var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0))
         0;
     }
 
     &[data-swipe-direction="right"][data-nested-drawer-open] {
-      translate: calc(-1 * var(--drawer-nested-translate-step, var(--spacing-10)) * var(--nested-drawers, 0))
+      translate: calc(-1 * var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0))
         0;
     }
   }
 
   ._uVP9W_grabber {
     width: 100%;
-    padding: var(--drawer-grabber-padding, var(--spacing-3)) 0;
+    padding: var(--moduix-drawer-grabber-padding, var(--moduix-spacing-3)) 0;
     cursor: grab;
     user-select: none;
     flex-shrink: 0;
@@ -273,24 +291,24 @@
   }
 
   ._uVP9W_grabberIndicator {
-    width: var(--drawer-grabber-indicator-width, 3rem);
-    height: var(--drawer-grabber-indicator-height, .25rem);
-    border-radius: var(--drawer-grabber-indicator-radius, var(--radius-full));
-    background-color: var(--drawer-grabber-indicator-bg, var(--color-muted-foreground));
-    opacity: var(--drawer-grabber-indicator-opacity, .45);
-    transition: background-color var(--transition-default),
-      opacity var(--transition-default);
+    width: var(--moduix-drawer-grabber-indicator-width, 3rem);
+    height: var(--moduix-drawer-grabber-indicator-height, .25rem);
+    border-radius: var(--moduix-drawer-grabber-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-drawer-grabber-indicator-bg, var(--moduix-color-muted-foreground));
+    opacity: var(--moduix-drawer-grabber-indicator-opacity, .45);
+    transition: background-color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
 
     @media (hover: hover) {
       ._uVP9W_grabber:hover & {
-        opacity: var(--drawer-grabber-indicator-opacity-hover, .7);
+        opacity: var(--moduix-drawer-grabber-indicator-opacity-hover, .7);
       }
     }
   }
 
   ._uVP9W_header {
     align-items: start;
-    gap: var(--drawer-header-gap, var(--spacing-1));
+    gap: var(--moduix-drawer-header-gap, var(--moduix-spacing-1));
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
 
@@ -309,17 +327,17 @@
   }
 
   ._uVP9W_title {
-    color: var(--drawer-title-color, var(--drawer-color, var(--color-popover-foreground)));
-    font-size: var(--drawer-title-font-size, var(--text-lg));
-    font-weight: var(--drawer-title-font-weight, var(--weight-semibold));
-    line-height: var(--drawer-title-line-height, var(--line-height-text-lg));
+    color: var(--moduix-drawer-title-color, var(--moduix-drawer-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-drawer-title-font-size, var(--moduix-text-lg));
+    font-weight: var(--moduix-drawer-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-drawer-title-line-height, var(--moduix-line-height-text-lg));
     margin: 0;
   }
 
   ._uVP9W_description, ._uVP9W_body {
-    color: var(--drawer-description-color, var(--color-muted-foreground));
-    font-size: var(--drawer-description-font-size, var(--text-md));
-    line-height: var(--drawer-description-line-height, var(--line-height-text-md));
+    color: var(--moduix-drawer-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-drawer-description-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-drawer-description-line-height, var(--moduix-line-height-text-md));
   }
 
   ._uVP9W_description {
@@ -328,56 +346,56 @@
 
   ._uVP9W_body {
     min-height: 0;
-    margin-top: var(--drawer-body-margin-top, var(--spacing-4));
+    margin-top: var(--moduix-drawer-body-margin-top, var(--moduix-spacing-4));
     overflow-y: auto;
   }
 
   ._uVP9W_footer {
     justify-content: flex-end;
-    gap: var(--drawer-footer-gap, var(--spacing-2));
-    margin-top: var(--drawer-footer-margin-top, var(--spacing-6));
+    gap: var(--moduix-drawer-footer-gap, var(--moduix-spacing-2));
+    margin-top: var(--moduix-drawer-footer-margin-top, var(--moduix-spacing-6));
     display: flex;
   }
 
   ._uVP9W_closeIcon {
-    --close-button-size: var(--drawer-close-icon-size, 1.75rem);
-    --close-button-radius: var(--drawer-close-icon-radius, var(--radius-md));
-    --close-button-color: var(--drawer-close-icon-color, var(--drawer-description-color, var(--color-muted-foreground)));
-    --close-button-color-hover: var(--drawer-close-icon-color-hover, var(--drawer-color, var(--color-popover-foreground)));
-    --close-button-bg: var(--drawer-close-icon-bg, transparent);
-    --close-button-bg-hover: var(--drawer-close-icon-bg-hover, var(--color-accent));
-    --close-button-focus-ring-color: var(--drawer-close-icon-focus-ring-color, var(--drawer-focus-ring-color, var(--color-ring)));
-    --close-button-icon-size: var(--drawer-close-icon-glyph-size, .75rem);
+    --moduix-close-button-size: var(--moduix-drawer-close-icon-size, var(--moduix-spacing-7));
+    --moduix-close-button-radius: var(--moduix-drawer-close-icon-radius, var(--moduix-radius-md));
+    --moduix-close-button-color: var(--moduix-drawer-close-icon-color, var(--moduix-drawer-description-color, var(--moduix-color-muted-foreground)));
+    --moduix-close-button-color-hover: var(--moduix-drawer-close-icon-color-hover, var(--moduix-drawer-color, var(--moduix-color-popover-foreground)));
+    --moduix-close-button-bg: var(--moduix-drawer-close-icon-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-drawer-close-icon-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-focus-ring-color: var(--moduix-drawer-close-icon-focus-ring-color, var(--moduix-drawer-focus-ring-color, var(--moduix-color-ring)));
+    --moduix-close-button-icon-size: var(--moduix-drawer-close-icon-glyph-size, var(--moduix-spacing-3));
   }
 
   ._uVP9W_swipeArea {
-    z-index: var(--z-modal);
+    z-index: var(--moduix-z-modal);
     touch-action: none;
     position: fixed;
 
     &[data-swipe-direction="up"] {
-      height: var(--drawer-swipe-area-size, var(--spacing-10));
+      height: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
       bottom: 0;
       left: 0;
       right: 0;
     }
 
     &[data-swipe-direction="down"] {
-      height: var(--drawer-swipe-area-size, var(--spacing-10));
+      height: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
       top: 0;
       left: 0;
       right: 0;
     }
 
     &[data-swipe-direction="left"] {
-      width: var(--drawer-swipe-area-size, var(--spacing-10));
+      width: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
       top: 0;
       bottom: 0;
       right: 0;
     }
 
     &[data-swipe-direction="right"] {
-      width: var(--drawer-swipe-area-size, var(--spacing-10));
+      width: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
       top: 0;
       bottom: 0;
       left: 0;
@@ -389,32 +407,33 @@
   }
 
   ._uVP9W_indentBackground {
-    background: var(--drawer-indent-background-bg, var(--color-foreground));
-    opacity: var(--drawer-indent-background-opacity, 0);
+    background: var(--moduix-drawer-indent-background-bg, var(--moduix-color-foreground));
+    opacity: var(--moduix-drawer-indent-background-opacity, 0);
     pointer-events: none;
-    transition: opacity var(--drawer-indent-transition, var(--transition-spring));
+    transition: opacity var(--moduix-drawer-indent-transition, var(--moduix-transition-spring));
     position: absolute;
     inset: 0;
 
     &[data-active] {
-      opacity: calc(var(--drawer-indent-background-opacity-active, 1) * (1 - var(--drawer-swipe-progress, 0)));
+      opacity: calc(var(--moduix-drawer-indent-background-opacity-active, 1) *
+          (1 - var(--drawer-swipe-progress, 0)));
     }
   }
 
   ._uVP9W_indent {
     transform-origin: top;
-    transition: transform var(--drawer-indent-transition, var(--transition-spring)),
-      border-radius var(--drawer-indent-transition, var(--transition-spring));
+    transition: transform var(--moduix-drawer-indent-transition, var(--moduix-transition-spring)),
+      border-radius var(--moduix-drawer-indent-transition, var(--moduix-transition-spring));
     position: relative;
     transform: translateY(0) scale(1);
 
     &[data-active] {
-      border-radius: var(--drawer-indent-radius-active, var(--radius-lg))
-        var(--drawer-indent-radius-active, var(--radius-lg)) 0 0;
-      transform: translateY(calc(var(--drawer-indent-translate-y-active, var(--spacing-2)) *
+      border-radius: var(--moduix-drawer-indent-radius-active, var(--moduix-radius-lg))
+        var(--moduix-drawer-indent-radius-active, var(--moduix-radius-lg)) 0 0;
+      transform: translateY(calc(var(--moduix-drawer-indent-translate-y-active, var(--moduix-spacing-2)) *
               (1 - var(--drawer-swipe-progress, 0))))
-        scale(calc(var(--drawer-indent-scale-active, .97) +
-              (1 - var(--drawer-indent-scale-active, .97)) * var(--drawer-swipe-progress, 0)));
+        scale(calc(var(--moduix-drawer-indent-scale-active, .97) +
+              (1 - var(--moduix-drawer-indent-scale-active, .97)) * var(--drawer-swipe-progress, 0)));
     }
   }