@moduix/react 2.5.0 → 2.6.0

package/dist/components/sidebar/Sidebar_module.css

@@ -24,6 +24,7 @@
     display: flex;
     position: relative;
     overflow: hidden;
+    container-type: inline-size;
   }
 
   .panel-l44YAX[data-state="collapsed"] .header-YkNEAV, .panel-l44YAX[data-state="collapsed"] .footer-RydM38, .panel-l44YAX[data-state="collapsed"] .group-cwd3z7 {
@@ -34,6 +35,10 @@
     justify-content: center;
   }
 
+  .panel-l44YAX[data-state="collapsed"] .header-YkNEAV > :only-child {
+    width: auto;
+  }
+
   .panel-l44YAX[data-state="collapsed"] .content-v0UxPJ {
     scrollbar-gutter: auto;
     scrollbar-width: none;
@@ -52,7 +57,7 @@
     overflow: hidden;
   }
 
-  .panel-l44YAX[data-state="collapsed"] .menuSub-xn2r86, .panel-l44YAX[data-state="collapsed"] .groupAction-aoQPc4, .panel-l44YAX[data-state="collapsed"] .menuAction-_BDfHY, .panel-l44YAX[data-state="collapsed"] .menuBadge-GKf4u4, .panel-l44YAX[data-state="collapsed"] .input-nqDU3w {
+  .panel-l44YAX[data-state="collapsed"] .menuSub-xn2r86, .panel-l44YAX[data-state="collapsed"] .groupAction-aoQPc4, .panel-l44YAX[data-state="collapsed"] .input-nqDU3w {
     display: none;
   }
 
@@ -67,14 +72,6 @@
     padding-inline: 0;
   }
 
-  .panel-l44YAX[data-state="collapsed"] .menuButton-OAl6eQ > :not(svg):not([data-sidebar-icon]):not([data-slot="sidebar-label"]) {
-    display: none;
-  }
-
-  .panel-l44YAX[data-state="collapsed"] .menuButton-OAl6eQ > svg, .panel-l44YAX[data-state="collapsed"] .menuButton-OAl6eQ > [data-sidebar-icon] {
-    margin-inline: auto;
-  }
-
   @media (hover: hover) {
     .panel-l44YAX[data-state="collapsed"] .menuButton-OAl6eQ:hover {
       background-color: #0000;
@@ -95,34 +92,39 @@
 
   .trigger-_fUcgc {
     box-sizing: border-box;
+    z-index: 4;
     width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
     min-width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
     height: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
+    border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
+    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
+    box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
     transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
       color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
       box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    border: 0;
     flex: none;
     justify-content: center;
     align-items: center;
     padding: 0;
     display: inline-flex;
+    position: relative;
   }
 
   .trigger-_fUcgc > svg {
     width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
     height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
   }
 
-  .trigger-_fUcgc:focus-visible {
-    outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
-    outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
+  .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
+    transform: rotate(180deg);
   }
 
   .trigger-_fUcgc:disabled, .trigger-_fUcgc[aria-disabled="true"] {
@@ -137,30 +139,6 @@
     }
   }
 
-  .trigger-_fUcgc {
-    z-index: 4;
-    margin-block-start: 0;
-    margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
-    border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
-    border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
-    background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
-    box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
-    position: relative;
-  }
-
-  .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
-    transform: rotate(180deg);
-  }
-
-  .trigger-_fUcgc > svg {
-    transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
-  }
-
-  .trigger-_fUcgc {
-    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
-  }
-
   .label-trHnso, .groupLabel-IvBtsR {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -181,6 +159,10 @@
       var(--moduix-sidebar-border-color, var(--moduix-color-border));
   }
 
+  .header-YkNEAV > :only-child {
+    width: 100%;
+  }
+
   .footer-RydM38 {
     border-block-start: var(--moduix-sidebar-section-border-width, 0) solid
       var(--moduix-sidebar-border-color, var(--moduix-color-border));
@@ -210,13 +192,21 @@
     font-weight: var(--moduix-sidebar-group-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-sidebar-group-label-line-height, var(--moduix-line-height-text-xs));
     text-transform: var(--moduix-sidebar-group-label-text-transform, none);
+    flex: 1;
     margin: 0;
   }
 
+  .groupHeader-N4qFFK {
+    align-items: center;
+    gap: var(--moduix-sidebar-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    display: flex;
+  }
+
   .groupAction-aoQPc4 {
     width: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
     height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
-    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
@@ -224,8 +214,10 @@
       color var(--moduix-sidebar-transition, var(--moduix-transition-default));
     background-color: #0000;
     border: 0;
+    flex: none;
     justify-content: center;
     align-items: center;
+    margin-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
     padding: 0;
     display: inline-flex;
   }
@@ -235,12 +227,6 @@
     height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
   }
 
-  .groupAction-aoQPc4:focus-visible {
-    outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
-    outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
-  }
-
   @media (hover: hover) {
     .groupAction-aoQPc4:hover {
       background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
@@ -248,33 +234,8 @@
     }
   }
 
-  .group-cwd3z7:has(.groupAction-aoQPc4) {
-    column-gap: var(--moduix-sidebar-gap, var(--moduix-spacing-2));
-    row-gap: var(--moduix-sidebar-group-gap, var(--moduix-spacing-1));
-    grid-template-columns: minmax(0, 1fr) auto;
-    display: grid;
-  }
-
-  .group-cwd3z7:has(.groupAction-aoQPc4) .groupLabel-IvBtsR {
-    grid-column: 1;
-  }
-
-  .group-cwd3z7:has(.groupAction-aoQPc4) .groupAction-aoQPc4 {
-    grid-column: 2;
-    align-self: center;
-  }
-
-  .groupContent-_s9yul {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .group-cwd3z7:has(.groupAction-aoQPc4) .groupContent-_s9yul {
-    grid-column: 1 / -1;
-  }
-
   .menu-UwagMF, .menuSub-xn2r86 {
-    gap: var(--moduix-sidebar-menu-gap, var(--moduix-spacing-1));
+    gap: var(--moduix-sidebar-navigation-gap, var(--moduix-spacing-1));
     flex-direction: column;
     width: 100%;
     min-width: 0;
@@ -289,10 +250,36 @@
     position: relative;
   }
 
+  :is(.menuButton-OAl6eQ:has( + .menuBadge-GKf4u4), .menuSubButton-MjeEfX:has( + .menuBadge-GKf4u4)) {
+    padding-inline-end: var(--moduix-spacing-10);
+  }
+
+  .menuBadge-GKf4u4 {
+    z-index: 1;
+    box-sizing: border-box;
+    width: var(--moduix-spacing-5);
+    height: var(--moduix-spacing-5);
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-color-primary);
+    color: var(--moduix-color-primary-foreground);
+    font-size: .5625rem;
+    font-weight: var(--moduix-weight-medium);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    place-items: center;
+    padding: 0;
+    line-height: 1;
+    display: inline-grid;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--moduix-spacing-2-5);
+    transform: translateY(-50%);
+  }
+
   .menuButton-OAl6eQ, .menuSubButton-MjeEfX {
     box-sizing: border-box;
-    border: var(--moduix-sidebar-menu-button-border-width, 0) solid transparent;
-    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    border: var(--moduix-sidebar-navigation-button-border-width, 0) solid transparent;
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
     width: 100%;
     min-width: 0;
     color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
@@ -330,12 +317,6 @@
     overflow: hidden;
   }
 
-  :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX):focus-visible {
-    outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
-    outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
-  }
-
   :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX):disabled, :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX)[aria-disabled="true"] {
     opacity: var(--moduix-sidebar-disabled-opacity, var(--moduix-opacity-disabled));
     pointer-events: none;
@@ -355,135 +336,88 @@
   }
 
   .menuButton-OAl6eQ {
-    gap: var(--moduix-sidebar-menu-button-gap, var(--moduix-spacing-2));
-    min-height: var(--moduix-sidebar-menu-button-height, var(--moduix-size-md));
-    padding-block: var(--moduix-sidebar-menu-button-padding-y, var(--moduix-spacing-1));
-    padding-inline: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
-    font-size: var(--moduix-sidebar-menu-button-font-size, var(--moduix-text-sm));
-    line-height: var(--moduix-sidebar-menu-button-line-height, var(--moduix-line-height-text-sm));
+    gap: var(--moduix-sidebar-navigation-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md));
+    padding-block: var(--moduix-sidebar-navigation-button-padding-y, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-navigation-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-navigation-button-line-height, var(--moduix-line-height-text-sm));
   }
 
   .menuButton-OAl6eQ[data-size="sm"] {
-    min-height: var(--moduix-sidebar-menu-button-height-sm, var(--moduix-size-sm));
-    font-size: var(--moduix-sidebar-menu-button-font-size-sm, var(--moduix-text-xs));
+    min-height: var(--moduix-sidebar-navigation-button-height-sm, var(--moduix-size-sm));
+    font-size: var(--moduix-sidebar-navigation-button-font-size-sm, var(--moduix-text-xs));
   }
 
   .menuButton-OAl6eQ[data-size="lg"] {
-    min-height: var(--moduix-sidebar-menu-button-height-lg, var(--moduix-size-lg));
+    min-height: var(--moduix-sidebar-navigation-button-height-lg, var(--moduix-size-lg));
   }
 
   .menuButton-OAl6eQ > [data-slot="collapsible-indicator"], .menuButton-OAl6eQ > [data-slot="menu-indicator"] {
+    width: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
     margin-inline-start: auto;
   }
 
-  .panel-l44YAX .menuButton-OAl6eQ {
-    justify-content: flex-start;
+  .menuButton-OAl6eQ > [data-slot="collapsible-indicator"] > svg {
+    width: var(--moduix-spacing-3);
+    height: var(--moduix-spacing-3);
   }
 
-  .menuAction-_BDfHY {
-    z-index: 1;
-    width: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
-    height: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
-    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+  .menuButton-OAl6eQ > [data-slot="menu-indicator"] {
+    box-sizing: border-box;
+    width: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
-    appearance: none;
-    cursor: pointer;
-    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
-      color var(--moduix-sidebar-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    border: 0;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    display: inline-flex;
-    position: absolute;
-    inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
-          var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs))) /
-        2);
-    inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
+    line-height: 0;
   }
 
-  .menuAction-_BDfHY > svg {
+  .menuButton-OAl6eQ > [data-slot="menu-indicator"] > svg {
     width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
     height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    display: block;
   }
 
-  .menuAction-_BDfHY:focus-visible {
-    outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
-    outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
-  }
-
-  @media (hover: hover) {
-    .menuAction-_BDfHY:hover {
-      background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
-      color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
-    }
-  }
-
-  .menuBadge-GKf4u4 {
-    z-index: 1;
-    min-width: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
-    min-height: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
-    padding-inline: var(--moduix-sidebar-menu-badge-padding-x, var(--moduix-spacing-1));
-    border-radius: var(--moduix-radius-full);
-    background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
-    color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
-    font-size: var(--moduix-text-xs);
-    font-variant-numeric: tabular-nums;
-    justify-content: center;
-    align-items: center;
-    line-height: 1;
-    display: inline-flex;
-    position: absolute;
-    inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
-          var(--moduix-sidebar-menu-badge-min-width, 1.5rem)) /
-        2);
-    inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
-  }
-
-  :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
-    padding-inline-end: calc(var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs)) +
-        var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 2);
-  }
-
-  :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) > [data-slot="sidebar-menu-sub-label"] {
-    text-overflow: ellipsis;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
-    padding-inline-end: calc(var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs)) +
-          var(--moduix-sidebar-menu-badge-min-width, 1.5rem) +
-          var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 3);
-  }
-
-  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuAction-_BDfHY {
-    inset-inline-end: calc(var(--moduix-sidebar-menu-badge-min-width, 1.5rem) +
-          var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 2);
+  .menuButton-OAl6eQ > [data-scope="select"][data-part="indicator"] {
+    margin-inline-start: auto;
   }
 
-  :is(.panel-l44YAX[data-state="collapsed"] .menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .panel-l44YAX[data-state="collapsed"] .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
-    padding-inline-end: 0;
+  .trigger-_fUcgc:focus-visible, .groupAction-aoQPc4:focus-visible, .menuButton-OAl6eQ:focus-visible {
+    outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+      solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
   }
 
   .menuSub-xn2r86 {
     box-sizing: border-box;
     width: auto;
-    border-inline-start: var(--moduix-sidebar-menu-sub-border-width, var(--moduix-border-width-sm))
+    border-inline-start: var(--moduix-sidebar-navigation-sub-border-width, var(--moduix-border-width-sm))
       solid var(--moduix-sidebar-border-color, var(--moduix-color-border));
-    margin-block-start: var(--moduix-sidebar-menu-sub-margin-y, var(--moduix-spacing-1));
-    margin-inline-start: var(--moduix-sidebar-menu-sub-margin-x, var(--moduix-spacing-4));
-    padding-inline-start: var(--moduix-sidebar-menu-sub-padding-x, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-sidebar-navigation-sub-margin-y, var(--moduix-spacing-1));
+    margin-inline-start: var(--moduix-sidebar-navigation-sub-margin-x, var(--moduix-spacing-4));
+    padding-inline-start: var(--moduix-sidebar-navigation-sub-padding-x, var(--moduix-spacing-2));
   }
 
   .menuSubButton-MjeEfX {
-    gap: var(--moduix-sidebar-menu-sub-button-gap, var(--moduix-spacing-2));
-    min-height: var(--moduix-sidebar-menu-sub-button-height, var(--moduix-size-sm));
-    padding-inline: var(--moduix-sidebar-menu-sub-button-padding-x, var(--moduix-spacing-2));
-    font-size: var(--moduix-sidebar-menu-sub-button-font-size, var(--moduix-text-sm));
-    line-height: var(--moduix-sidebar-menu-sub-button-line-height, var(--moduix-line-height-text-sm));
+    gap: var(--moduix-sidebar-navigation-sub-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-navigation-sub-button-height, var(--moduix-size-sm));
+    padding-inline: var(--moduix-sidebar-navigation-sub-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-navigation-sub-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-navigation-sub-button-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  @container (width <= 7rem) {
+    .groupAction-aoQPc4, .menuBadge-GKf4u4, [data-slot="collapsible-indicator"], [data-slot="menu-indicator"], [data-slot="select-indicator"] {
+      display: none;
+    }
+
+    .menuButton-OAl6eQ:has( + .menuBadge-GKf4u4) {
+      padding-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    }
+
+    .menuSubButton-MjeEfX:has( + .menuBadge-GKf4u4) {
+      padding-inline-end: var(--moduix-sidebar-navigation-sub-button-padding-x, var(--moduix-spacing-2));
+    }
   }
 
   .input-nqDU3w {
@@ -495,7 +429,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .panel-l44YAX, .trigger-_fUcgc, .groupAction-aoQPc4, .menuButton-OAl6eQ, .menuAction-_BDfHY, .menuSubButton-MjeEfX {
+    .panel-l44YAX, .trigger-_fUcgc, .groupAction-aoQPc4, .menuButton-OAl6eQ, .menuSubButton-MjeEfX {
       transition: none;
     }
   }

package/dist/components/signature-pad/SignaturePad.d.ts

@@ -1,13 +1,10 @@
 import { SignaturePad as SignaturePadPrimitive, useSignaturePad as useSignaturePadPrimitive, useSignaturePadContext } from '@ark-ui/react/signature-pad';
-import type { ReactNode } from 'react';
-type SignaturePadFormProps = {
-    getFormValue?: (paths: string[]) => string;
-};
 declare function useSignaturePad(props?: Parameters<typeof useSignaturePadPrimitive>[0]): ReturnType<typeof useSignaturePadPrimitive>;
-declare const SignaturePad: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Context: (props: SignaturePadPrimitive.ContextProps) => ReactNode;
+declare const SignaturePad: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: SignaturePadPrimitive.ContextProps) => import("react").ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<SignaturePadPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Canvas: import("react").ForwardRefExoticComponent<Omit<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/signature-pad/SignaturePad.js

@@ -1,16 +1,15 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/react/signature-pad";
 import { clsx } from "clsx";
-import { Children, cloneElement, createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { RotateCcwIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { CloseButton } from "../close-button/index.js";
 import SignaturePad_module from "./SignaturePad.module.js";
 const SignaturePadReadOnlyContext = /*#__PURE__*/ createContext(false);
 const signaturePadReadOnly = Symbol();
-const SignaturePad_SignaturePadRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, getFormValue, ...props }, ref) {
+const SignaturePad_SignaturePadRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
     const field = useFieldContext();
     const readOnly = props.readOnly ?? field?.readOnly ?? false;
     return /*#__PURE__*/ jsx(SignaturePadReadOnlyContext.Provider, {
@@ -18,24 +17,24 @@ const SignaturePad_SignaturePadRoot = /*#__PURE__*/ forwardRef(function({ asChil
         children: /*#__PURE__*/ jsx(SignaturePad.Root, {
             ref: ref,
             "data-slot": "signature-pad-root",
-            className: clsx(SignaturePad_module.root, normalizeClassName(className)),
+            className: clsx(SignaturePad_module.root, className),
             asChild: asChild,
             ...props,
-            children: withHiddenInput(children, asChild, getFormValue)
+            children: children
         })
     });
 });
-const SignaturePad_SignaturePadRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, getFormValue, ...props }, ref) {
+const SignaturePad_SignaturePadRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
     const readOnly = props.value[signaturePadReadOnly] ?? false;
     return /*#__PURE__*/ jsx(SignaturePadReadOnlyContext.Provider, {
         value: readOnly,
         children: /*#__PURE__*/ jsx(SignaturePad.RootProvider, {
             ref: ref,
             "data-slot": "signature-pad-root-provider",
-            className: clsx(SignaturePad_module.root, normalizeClassName(className)),
+            className: clsx(SignaturePad_module.root, className),
             asChild: asChild,
             ...props,
-            children: withHiddenInput(children, asChild, getFormValue)
+            children: children
         })
     });
 });
@@ -43,7 +42,7 @@ const SignaturePad_SignaturePadLabel = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(SignaturePad.Label, {
         ref: ref,
         "data-slot": "signature-pad-label",
-        className: clsx(SignaturePad_module.label, normalizeClassName(className)),
+        className: clsx(SignaturePad_module.label, className),
         ...props
     });
 });
@@ -51,7 +50,7 @@ const SignaturePad_SignaturePadControl = /*#__PURE__*/ forwardRef(function({ cla
     return /*#__PURE__*/ jsx(SignaturePad.Control, {
         ref: ref,
         "data-slot": "signature-pad-control",
-        className: clsx(SignaturePad_module.control, normalizeClassName(className)),
+        className: clsx(SignaturePad_module.control, className),
         ...props
     });
 });
@@ -59,7 +58,7 @@ const SignaturePad_SignaturePadSegment = /*#__PURE__*/ forwardRef(function({ cla
     return /*#__PURE__*/ jsx(SignaturePad.Segment, {
         ref: ref,
         "data-slot": "signature-pad-segment",
-        className: clsx(SignaturePad_module.segment, normalizeClassName(className)),
+        className: clsx(SignaturePad_module.segment, className),
         ...props
     });
 });
@@ -67,32 +66,23 @@ const SignaturePad_SignaturePadGuide = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(SignaturePad.Guide, {
         ref: ref,
         "data-slot": "signature-pad-guide",
-        className: clsx(SignaturePad_module.guide, normalizeClassName(className)),
+        className: clsx(SignaturePad_module.guide, className),
         ...props
     });
 });
 const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
     const readOnly = useContext(SignaturePadReadOnlyContext);
-    const triggerClassName = clsx(SignaturePad_module.clearTrigger, normalizeClassName(className));
-    if (asChild) return /*#__PURE__*/ jsx(SignaturePad.ClearTrigger, {
-        ref: ref,
-        asChild: true,
-        "data-slot": "signature-pad-clear-trigger",
-        className: triggerClassName,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...props,
-        disabled: readOnly || props.disabled,
-        children: children
-    });
+    const triggerClassName = clsx(SignaturePad_module.clearTrigger, className);
     return /*#__PURE__*/ jsx(SignaturePad.ClearTrigger, {
         ref: ref,
         asChild: true,
         "data-slot": "signature-pad-clear-trigger",
         className: triggerClassName,
+        "aria-label": asChild ? ariaLabel : void 0,
+        "aria-labelledby": asChild ? ariaLabelledBy : void 0,
         ...props,
         disabled: readOnly || props.disabled,
-        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledBy,
             children: children ?? /*#__PURE__*/ jsx(RotateCcwIcon, {
@@ -101,26 +91,6 @@ const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function(
         })
     });
 });
-function withHiddenInput(children, asChild, getFormValue) {
-    const hiddenInput = /*#__PURE__*/ jsx(SignaturePadFormInput, {
-        getFormValue: getFormValue
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
-function SignaturePadFormInput({ getFormValue }) {
-    const signaturePad = useSignaturePadContext();
-    return /*#__PURE__*/ jsx(SignaturePad.HiddenInput, {
-        "data-slot": "signature-pad-hidden-input",
-        value: getFormValue?.(signaturePad.paths) ?? signaturePad.paths.join(' ')
-    });
-}
 const SignaturePad_SignaturePadCanvas = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsxs(SignaturePad_SignaturePadControl, {
         ref: ref,
@@ -150,6 +120,7 @@ const SignaturePad_SignaturePad = Object.assign(SignaturePad_SignaturePadRoot, {
     Root: SignaturePad_SignaturePadRoot,
     RootProvider: SignaturePad_SignaturePadRootProvider,
     Context: SignaturePad.Context,
+    HiddenInput: SignaturePad.HiddenInput,
     Label: SignaturePad_SignaturePadLabel,
     Control: SignaturePad_SignaturePadControl,
     Canvas: SignaturePad_SignaturePadCanvas,

package/dist/components/signature-pad/SignaturePad_module.css

@@ -77,7 +77,6 @@
     --moduix-close-button-color: var(--moduix-signature-pad-clear-trigger-color, var(--moduix-color-muted-foreground));
     --moduix-close-button-color-hover: var(--moduix-signature-pad-clear-trigger-color-hover, var(--moduix-color-foreground));
     --moduix-close-button-icon-size: var(--moduix-signature-pad-clear-trigger-icon-size, var(--moduix-spacing-4));
-    --moduix-close-button-transition: var(--moduix-signature-pad-transition, var(--moduix-transition-default));
     --moduix-close-button-focus-ring-width: var(--moduix-signature-pad-clear-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
     --moduix-close-button-focus-ring-color: var(--moduix-signature-pad-clear-trigger-focus-ring-color, var(--moduix-color-ring));
     --moduix-close-button-focus-ring-offset: var(--moduix-signature-pad-clear-trigger-focus-ring-offset, var(--moduix-spacing-1));