@moduix/react 2.5.1 → 2.6.0

package/dist/components/sidebar/Sidebar.js

@@ -4,7 +4,6 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
 import { ChevronLeftIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { Input } from "../input/index.js";
 import { Separator } from "../separator/index.js";
 import { Splitter, useSplitterContext } from "../splitter/index.js";
@@ -67,7 +66,7 @@ const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defau
             orientation: "horizontal",
             "data-side": side,
             "data-slot": "sidebar-root",
-            className: clsx(Sidebar_module.root, normalizeClassName(className))
+            className: clsx(Sidebar_module.root, className)
         })
     });
 });
@@ -93,7 +92,7 @@ const Sidebar_SidebarPanel = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-side": config.side,
         "data-slot": "sidebar-panel",
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: clsx(Sidebar_module.panel, normalizeClassName(className))
+        className: clsx(Sidebar_module.panel, className)
     });
 });
 const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -104,7 +103,7 @@ const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...p
         id: "content",
         "data-side": side,
         "data-slot": "sidebar-inset",
-        className: clsx(Sidebar_module.inset, normalizeClassName(className))
+        className: clsx(Sidebar_module.inset, className)
     });
 });
 const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ children, className, 'aria-label': ariaLabel = 'Resize sidebar', ...props }, ref) {
@@ -117,7 +116,7 @@ const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ childre
         "aria-label": ariaLabel,
         "data-side": side,
         "data-slot": "sidebar-resize-trigger",
-        className: clsx(Sidebar_module.resizeTrigger, normalizeClassName(className)),
+        className: clsx(Sidebar_module.resizeTrigger, className),
         children: children
     });
 });
@@ -140,7 +139,7 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
         "data-side": config.side,
         "data-slot": "sidebar-trigger",
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: clsx(Sidebar_module.trigger, normalizeClassName(className)),
+        className: clsx(Sidebar_module.trigger, className),
         onClick: handleClick,
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
@@ -152,7 +151,7 @@ const Sidebar_SidebarLabel = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-scope": "sidebar",
         "data-part": "label",
         "data-slot": "sidebar-label",
-        className: clsx(Sidebar_module.label, normalizeClassName(className)),
+        className: clsx(Sidebar_module.label, className),
         ...props
     });
 });
@@ -162,7 +161,7 @@ const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...
         "data-scope": "sidebar",
         "data-part": "header",
         "data-slot": "sidebar-header",
-        className: clsx(Sidebar_module.header, normalizeClassName(className)),
+        className: clsx(Sidebar_module.header, className),
         ...props
     });
 });
@@ -172,7 +171,7 @@ const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ..
         "data-scope": "sidebar",
         "data-part": "content",
         "data-slot": "sidebar-content",
-        className: clsx(Sidebar_module.content, normalizeClassName(className)),
+        className: clsx(Sidebar_module.content, className),
         ...props
     });
 });
@@ -183,7 +182,7 @@ const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ class
         "data-scope": "sidebar",
         "data-part": "expanded-content",
         "data-slot": "sidebar-expanded-content",
-        className: normalizeClassName(className),
+        className: className,
         ...props,
         hidden: collapsed
     });
@@ -195,7 +194,7 @@ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ clas
         "data-scope": "sidebar",
         "data-part": "collapsed-content",
         "data-slot": "sidebar-collapsed-content",
-        className: normalizeClassName(className),
+        className: className,
         ...props,
         hidden: !collapsed
     });
@@ -206,7 +205,7 @@ const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...
         "data-scope": "sidebar",
         "data-part": "footer",
         "data-slot": "sidebar-footer",
-        className: clsx(Sidebar_module.footer, normalizeClassName(className)),
+        className: clsx(Sidebar_module.footer, className),
         ...props
     });
 });
@@ -216,7 +215,7 @@ const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-scope": "sidebar",
         "data-part": "group",
         "data-slot": "sidebar-group",
-        className: clsx(Sidebar_module.group, normalizeClassName(className)),
+        className: clsx(Sidebar_module.group, className),
         ...props
     });
 });
@@ -226,28 +225,28 @@ const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className,
         "data-scope": "sidebar",
         "data-part": "group-label",
         "data-slot": "sidebar-group-label",
-        className: clsx(Sidebar_module.groupLabel, normalizeClassName(className)),
+        className: clsx(Sidebar_module.groupLabel, className),
         ...props
     });
 });
-const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.button, {
+const Sidebar_SidebarGroupHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        type: type,
         "data-scope": "sidebar",
-        "data-part": "group-action",
-        "data-slot": "sidebar-group-action",
-        className: clsx(Sidebar_module.groupAction, normalizeClassName(className)),
+        "data-part": "group-header",
+        "data-slot": "sidebar-group-header",
+        className: clsx(Sidebar_module.groupHeader, className),
         ...props
     });
 });
-const Sidebar_SidebarGroupContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.div, {
+const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.button, {
         ref: ref,
+        type: type,
         "data-scope": "sidebar",
-        "data-part": "group-content",
-        "data-slot": "sidebar-group-content",
-        className: clsx(Sidebar_module.groupContent, normalizeClassName(className)),
+        "data-part": "group-action",
+        "data-slot": "sidebar-group-action",
+        className: clsx(Sidebar_module.groupAction, className),
         ...props
     });
 });
@@ -257,7 +256,7 @@ const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ classN
         "data-scope": "sidebar",
         "data-part": "navigation-list",
         "data-slot": "sidebar-navigation-list",
-        className: clsx(Sidebar_module.menu, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menu, className),
         ...props
     });
 });
@@ -267,7 +266,7 @@ const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ classN
         "data-scope": "sidebar",
         "data-part": "navigation-item",
         "data-slot": "sidebar-navigation-item",
-        className: clsx(Sidebar_module.menuItem, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuItem, className),
         ...props
     });
 });
@@ -281,28 +280,17 @@ const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ acti
         "data-slot": "sidebar-navigation-button",
         "data-active": active ? '' : void 0,
         "data-size": size,
-        className: clsx(Sidebar_module.menuButton, normalizeClassName(className)),
-        ...props
-    });
-});
-const Sidebar_SidebarNavigationAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.button, {
-        ref: ref,
-        type: type,
-        "data-scope": "sidebar",
-        "data-part": "navigation-action",
-        "data-slot": "sidebar-navigation-action",
-        className: clsx(Sidebar_module.menuAction, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuButton, className),
         ...props
     });
 });
 const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.div, {
+    return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "navigation-badge",
         "data-slot": "sidebar-navigation-badge",
-        className: clsx(Sidebar_module.menuBadge, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuBadge, className),
         ...props
     });
 });
@@ -312,7 +300,7 @@ const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ cla
         "data-scope": "sidebar",
         "data-part": "navigation-sub-list",
         "data-slot": "sidebar-navigation-sub-list",
-        className: clsx(Sidebar_module.menuSub, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuSub, className),
         ...props
     });
 });
@@ -322,7 +310,7 @@ const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ cla
         "data-scope": "sidebar",
         "data-part": "navigation-sub-item",
         "data-slot": "sidebar-navigation-sub-item",
-        className: clsx(Sidebar_module.menuSubItem, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuSubItem, className),
         ...props
     });
 });
@@ -334,7 +322,7 @@ const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ a
         "data-part": "navigation-sub-button",
         "data-slot": "sidebar-navigation-sub-button",
         "data-active": active ? '' : void 0,
-        className: clsx(Sidebar_module.menuSubButton, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuSubButton, className),
         ...props,
         children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
             "data-slot": "sidebar-navigation-sub-label",
@@ -371,7 +359,7 @@ const Sidebar_SidebarInput = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Input.Root, {
         ref: ref,
         "data-slot": "sidebar-input",
-        className: clsx(Sidebar_module.input, normalizeClassName(className)),
+        className: clsx(Sidebar_module.input, className),
         ...props
     });
 });
@@ -379,7 +367,7 @@ const Sidebar_SidebarSeparator = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(Separator.Root, {
         ref: ref,
         "data-slot": "sidebar-separator",
-        className: clsx(Sidebar_module.separator, normalizeClassName(className)),
+        className: clsx(Sidebar_module.separator, className),
         ...props
     });
 });
@@ -398,14 +386,13 @@ const Sidebar = Object.assign(Sidebar_SidebarRoot, {
     Footer: Sidebar_SidebarFooter,
     Separator: Sidebar_SidebarSeparator,
     Group: Sidebar_SidebarGroup,
+    GroupHeader: Sidebar_SidebarGroupHeader,
     GroupLabel: Sidebar_SidebarGroupLabel,
     GroupAction: Sidebar_SidebarGroupAction,
-    GroupContent: Sidebar_SidebarGroupContent,
     NavigationList: Sidebar_SidebarNavigationList,
     NavigationItem: Sidebar_SidebarNavigationItem,
     Tooltip: Sidebar_SidebarTooltip,
     NavigationButton: Sidebar_SidebarNavigationButton,
-    NavigationAction: Sidebar_SidebarNavigationAction,
     NavigationBadge: Sidebar_SidebarNavigationBadge,
     NavigationSubList: Sidebar_SidebarNavigationSubList,
     NavigationSubItem: Sidebar_SidebarNavigationSubItem,

package/dist/components/sidebar/Sidebar.module.js

@@ -10,17 +10,16 @@ const Sidebar_module = {
     groupLabel: "groupLabel-IvBtsR",
     menuSub: "menuSub-xn2r86",
     groupAction: "groupAction-aoQPc4",
-    menuAction: "menuAction-_BDfHY",
-    menuBadge: "menuBadge-GKf4u4",
     input: "input-nqDU3w",
     menuButton: "menuButton-OAl6eQ",
     inset: "inset-FQP9mn",
     resizeTrigger: "resizeTrigger-xFDgel",
     trigger: "trigger-_fUcgc",
-    groupContent: "groupContent-_s9yul",
+    groupHeader: "groupHeader-N4qFFK",
     menu: "menu-UwagMF",
     menuItem: "menuItem-ktGhRk",
     menuSubItem: "menuSubItem-NeKVH5",
+    menuBadge: "menuBadge-GKf4u4",
     menuSubButton: "menuSubButton-MjeEfX",
     separator: "separator-KuEG4k"
 };

package/dist/components/sidebar/Sidebar_module.css

@@ -57,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;
   }
 
@@ -72,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;
@@ -135,12 +127,6 @@
     transform: rotate(180deg);
   }
 
-  .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:disabled, .trigger-_fUcgc[aria-disabled="true"] {
     opacity: var(--moduix-sidebar-disabled-opacity, var(--moduix-opacity-disabled));
     pointer-events: none;
@@ -206,9 +192,17 @@
     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));
@@ -220,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;
   }
@@ -231,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));
@@ -244,39 +234,6 @@
     }
   }
 
-  .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 {
-    min-height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
-    grid-column: 1;
-    align-items: center;
-    display: flex;
-  }
-
-  .group-cwd3z7:has(.groupAction-aoQPc4) .groupAction-aoQPc4 {
-    grid-column: 2;
-    align-self: center;
-    margin-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
-  }
-
-  .groupContent-_s9yul {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .group-cwd3z7:has(.groupAction-aoQPc4) .groupContent-_s9yul {
-    grid-column: 1 / -1;
-  }
-
-  .group-cwd3z7:has(.groupAction-aoQPc4) .menu-UwagMF {
-    grid-column: 1 / -1;
-  }
-
   .menu-UwagMF, .menuSub-xn2r86 {
     gap: var(--moduix-sidebar-navigation-gap, var(--moduix-spacing-1));
     flex-direction: column;
@@ -288,17 +245,35 @@
     display: flex;
   }
 
-  .menuItem-ktGhRk {
+  .menuItem-ktGhRk, .menuSubItem-NeKVH5 {
     min-width: 0;
     position: relative;
   }
 
-  .menuSubItem-NeKVH5 {
-    min-width: 0;
+  :is(.menuButton-OAl6eQ:has( + .menuBadge-GKf4u4), .menuSubButton-MjeEfX:has( + .menuBadge-GKf4u4)) {
+    padding-inline-end: var(--moduix-spacing-10);
   }
 
-  .menuItem-ktGhRk > [data-scope="select"][data-part="root"] {
-    --moduix-select-width: 100%;
+  .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 {
@@ -342,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;
@@ -384,108 +353,39 @@
     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"], .menuButton-OAl6eQ > [data-scope="select"][data-part="indicator"] {
+  .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;
   }
 
-  .menuAction-_BDfHY {
-    z-index: 1;
-    width: var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs));
-    height: var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs));
-    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
+  .menuButton-OAl6eQ > [data-slot="collapsible-indicator"] > svg {
+    width: var(--moduix-spacing-3);
+    height: var(--moduix-spacing-3);
+  }
+
+  .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-navigation-button-height, var(--moduix-size-md)) -
-          var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs))) /
-        2);
-    inset-inline-end: var(--moduix-sidebar-navigation-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-navigation-badge-min-width, 1.125rem);
-    min-height: var(--moduix-sidebar-navigation-badge-min-width, 1.125rem);
-    padding-inline: var(--moduix-sidebar-navigation-badge-padding-x, var(--moduix-spacing-0-5));
-    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-sidebar-navigation-badge-font-size, .625rem);
-    font-weight: var(--moduix-sidebar-navigation-badge-font-weight, var(--moduix-weight-medium));
-    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-navigation-button-height, var(--moduix-size-md)) -
-          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
-        2);
-    inset-inline-end: calc(var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) +
-        (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
-          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
-        2);
-  }
-
-  .menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ {
-    padding-inline-end: calc(var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) +
-        var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2);
-  }
-
-  .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
-    padding-inline-end: calc(var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
-        var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2 +
-        (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
-          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
-        2);
-  }
-
-  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
-    padding-inline-end: calc(var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) +
-          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
-          var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 3 +
-          (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
-            var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
-          2);
-  }
-
-  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuAction-_BDfHY {
-    inset-inline-end: calc(var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
-          var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2 +
-          (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
-            var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
-          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 {
@@ -507,13 +407,17 @@
   }
 
   @container (width <= 7rem) {
-    .groupAction-aoQPc4, .menuAction-_BDfHY, .menuBadge-GKf4u4, [data-slot="collapsible-indicator"], [data-slot="menu-indicator"], [data-slot="select-indicator"] {
+    .groupAction-aoQPc4, .menuBadge-GKf4u4, [data-slot="collapsible-indicator"], [data-slot="menu-indicator"], [data-slot="select-indicator"] {
       display: none;
     }
 
-    :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
+    .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 {
@@ -525,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>>;