@moduix/react 2.7.1 → 2.8.0

package/dist/components/native-select/NativeSelect_module.css

@@ -30,10 +30,10 @@
       outline-color var(--moduix-select-transition, var(--moduix-transition-default)),
       opacity var(--moduix-select-transition, var(--moduix-transition-default));
     margin: 0;
-    padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5));
     padding-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
-        var(--moduix-select-action-size, var(--moduix-spacing-6)) +
-        var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3)));
+        var(--moduix-select-action-size, var(--moduix-size-xs)) +
+        var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5)));
   }
 
   .root-ZCXVuV:focus-visible {
@@ -54,21 +54,21 @@
   .root-ZCXVuV:is([multiple], [size]:not([size="0"], [size="1"])) {
     height: auto;
     padding-block: var(--moduix-spacing-2);
-    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5));
     appearance: auto;
   }
 
   @media (forced-colors: active) {
     .root-ZCXVuV {
       appearance: auto;
-      padding-inline-end: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+      padding-inline-end: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5));
     }
   }
 
   .indicator-oW5rXf {
     top: 50%;
-    width: var(--moduix-select-action-size, var(--moduix-spacing-6));
-    height: var(--moduix-select-action-size, var(--moduix-spacing-6));
+    width: var(--moduix-select-action-size, var(--moduix-size-xs));
+    height: var(--moduix-select-action-size, var(--moduix-size-xs));
     border-radius: var(--moduix-select-action-radius, var(--moduix-radius-sm));
     background: var(--moduix-select-action-bg, transparent);
     color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));

package/dist/components/navigation-menu/NavigationMenu_module.css

@@ -370,7 +370,7 @@
   @keyframes navigation-menu-viewport-in-GyosQZ {
     from {
       opacity: 0;
-      transform: rotateX(-30deg) scale(.9);
+      transform: scale(var(--moduix-scale-popup));
     }
 
     to {
@@ -387,7 +387,7 @@
 
     to {
       opacity: 0;
-      transform: rotateX(-10deg) scale(.95);
+      transform: scale(var(--moduix-scale-popup));
     }
   }
 

package/dist/components/number-input/NumberInput_module.css

@@ -74,7 +74,7 @@
     background-color: var(--moduix-number-input-button-bg-active, var(--moduix-number-input-button-bg-hover, var(--moduix-color-accent)));
   }
 
-  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):focus-visible, :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr)[data-focus] {
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):focus-visible {
     outline: var(--_number-input-focus-ring-width) solid
         var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
     outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
@@ -85,7 +85,7 @@
     pointer-events: none;
   }
 
-  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr)[data-invalid], .root-J5l339[data-invalid] :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr) {
+  .root-J5l339[data-invalid] :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr) {
     border-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
   }
 
@@ -137,7 +137,7 @@
     margin: 0;
   }
 
-  .input-MggWIT:focus-visible, .input-MggWIT[data-focus] {
+  .input-MggWIT:focus-visible {
     outline-color: var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
     z-index: 1;
   }
@@ -147,7 +147,7 @@
     border-bottom-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
   }
 
-  :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT):focus-visible, :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT)[data-focus] {
+  :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT):focus-visible {
     outline-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
   }
 

package/dist/components/pagination/Pagination.js

@@ -51,7 +51,7 @@ function EdgeIcon({ side }) {
 const Pagination_PaginationPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.PrevTrigger, {
         ref: ref,
-        className: clsx(Pagination_module.trigger, null == children && Pagination_module.iconTrigger, className),
+        className: clsx(Pagination_module.trigger, (null == children || false === children) && Pagination_module.iconTrigger, className),
         ...props,
         "data-slot": "pagination-prev-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(ChevronLeftIcon, {}))
@@ -60,7 +60,7 @@ const Pagination_PaginationPrevTrigger = /*#__PURE__*/ forwardRef(function({ cla
 const Pagination_PaginationNextTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.NextTrigger, {
         ref: ref,
-        className: clsx(Pagination_module.trigger, null == children && Pagination_module.iconTrigger, className),
+        className: clsx(Pagination_module.trigger, (null == children || false === children) && Pagination_module.iconTrigger, className),
         ...props,
         "data-slot": "pagination-next-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(ChevronRightIcon, {}))
@@ -69,7 +69,7 @@ const Pagination_PaginationNextTrigger = /*#__PURE__*/ forwardRef(function({ cla
 const Pagination_PaginationFirstTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.FirstTrigger, {
         ref: ref,
-        className: clsx(Pagination_module.trigger, null == children && Pagination_module.iconTrigger, className),
+        className: clsx(Pagination_module.trigger, (null == children || false === children) && Pagination_module.iconTrigger, className),
         ...props,
         "data-slot": "pagination-first-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(EdgeIcon, {
@@ -80,7 +80,7 @@ const Pagination_PaginationFirstTrigger = /*#__PURE__*/ forwardRef(function({ cl
 const Pagination_PaginationLastTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.LastTrigger, {
         ref: ref,
-        className: clsx(Pagination_module.trigger, null == children && Pagination_module.iconTrigger, className),
+        className: clsx(Pagination_module.trigger, (null == children || false === children) && Pagination_module.iconTrigger, className),
         ...props,
         "data-slot": "pagination-last-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(EdgeIcon, {

package/dist/components/pagination/Pagination_module.css

@@ -73,7 +73,7 @@
   }
 
   .trigger-Z_SoJt {
-    padding-inline: max(var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-3)),
+    padding-inline: max(var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-2)),
       var(--moduix-spacing-3));
   }
 

package/dist/components/password-input/PasswordInput_module.css

@@ -115,8 +115,10 @@
     display: inline-flex;
   }
 
-  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
-    color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+  @media (hover: hover) {
+    .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
+      color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+    }
   }
 
   .visibilityTrigger-UlZG7F:focus-visible {
@@ -143,7 +145,13 @@
     height: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
   }
 
-  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):is(:hover, :focus-visible) .indicator-ede0IZ {
+  @media (hover: hover) {
+    .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover .indicator-ede0IZ {
+      background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
+    }
+  }
+
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):focus-visible .indicator-ede0IZ {
     background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
   }
 }

package/dist/components/password-input/index.d.ts

@@ -1 +1 @@
-export * from './PasswordInput.js';
+export { PasswordInput, usePasswordInput, usePasswordInputContext } from './PasswordInput.js';

package/dist/components/password-input/index.js

@@ -1 +1 @@
-export * from "./PasswordInput.js";
+export { PasswordInput, usePasswordInput, usePasswordInputContext } from "./PasswordInput.js";

package/dist/components/popover/Popover.d.ts

@@ -1,8 +1,8 @@
 import { Popover as PopoverPrimitive, usePopover, usePopoverContext } from '@ark-ui/react/popover';
 import type { ComponentProps } from 'react';
 import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
-type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
-type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & {
+export type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
+export type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & {
     portalRef?: OverlayPortalProps['portalRef'];
 };
 declare function PopoverRoot({ lazyMount, modal, portalled, portalRef, unmountOnExit, ...props }: PopoverRootProps): import("react").JSX.Element;

package/dist/components/popover/index.d.ts

@@ -1 +1,2 @@
 export { Popover, usePopover, usePopoverContext } from './Popover.js';
+export type { PopoverRootProps, PopoverRootProviderProps } from './Popover.js';

package/dist/components/progress-linear/ProgressLinear_module.css

@@ -14,7 +14,6 @@
     width: var(--moduix-progress-linear-vertical-width, max-content);
     height: var(--moduix-progress-linear-height, 12rem);
     grid-template-rows: auto minmax(0, 1fr);
-    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .label-Rv3Sur {

package/dist/components/radio-group/RadioGroup.js

@@ -54,9 +54,9 @@ const RadioGroup_RadioGroupOption = /*#__PURE__*/ forwardRef(function({ children
 const RadioGroup_RadioGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.ItemControl, {
         ref: ref,
-        "data-size": size,
         className: clsx(RadioGroup_module.itemControl, className),
         ...props,
+        "data-size": size,
         "data-slot": "radio-group-item-control"
     });
 });

package/dist/components/radio-group/RadioGroup_module.css

@@ -34,7 +34,6 @@
 
   .itemControl-l9dtE4 {
     box-sizing: border-box;
-    appearance: none;
     width: var(--_radio-size, 1.25rem);
     height: var(--_radio-size, 1.25rem);
     border: var(--moduix-radio-border-width, var(--moduix-border-width-sm)) solid
@@ -53,7 +52,6 @@
     flex: none;
     justify-content: center;
     align-items: center;
-    line-height: 0;
     display: inline-flex;
     position: relative;
   }
@@ -148,8 +146,7 @@
     background-color: var(--moduix-radio-bg-checked, var(--moduix-color-primary));
     opacity: var(--moduix-radio-group-indicator-opacity, .12);
     pointer-events: none;
-    transition: var(--transition-property, translate)
-      var(--moduix-radio-transition, var(--moduix-transition-default));
+    --transition-duration: var(--moduix-duration-normal);
     position: absolute;
   }
 }

package/dist/components/rating-group/RatingGroup.js

@@ -8,18 +8,18 @@ import RatingGroup_module from "./RatingGroup.module.js";
 const RatingGroup_RatingGroupRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Root, {
         ref: ref,
-        "data-size": size,
         className: clsx(RatingGroup_module.root, className),
         ...props,
+        "data-size": size,
         "data-slot": "rating-group-root"
     });
 });
 const RatingGroup_RatingGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.RootProvider, {
         ref: ref,
-        "data-size": size,
         className: clsx(RatingGroup_module.root, className),
         ...props,
+        "data-size": size,
         "data-slot": "rating-group-root-provider"
     });
 });
@@ -51,10 +51,10 @@ const RatingGroup_RatingGroupItemIndicator = /*#__PURE__*/ forwardRef(function({
     const { half, highlighted } = useRatingGroupItemContext();
     return /*#__PURE__*/ jsx("span", {
         ref: ref,
-        "data-half": half ? '' : void 0,
-        "data-highlighted": highlighted ? '' : void 0,
         className: clsx(RatingGroup_module.itemIndicator, className),
         ...props,
+        "data-half": half ? '' : void 0,
+        "data-highlighted": highlighted ? '' : void 0,
         "data-slot": "rating-group-item-indicator",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [

package/dist/components/rating-group/RatingGroup_module.css

@@ -55,12 +55,8 @@
     cursor: pointer;
     transition: color var(--moduix-rating-group-transition, var(--moduix-transition-default)),
       opacity var(--moduix-rating-group-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    border: 0;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    padding: 0;
     line-height: 0;
     display: inline-flex;
   }
@@ -73,7 +69,7 @@
     pointer-events: none;
   }
 
-  .item-KSLnDf[data-focus-visible] {
+  .item-KSLnDf:focus-visible {
     outline: var(--moduix-rating-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-rating-group-focus-ring-color, var(--moduix-color-ring));
     outline-offset: var(--moduix-rating-group-focus-ring-offset, var(--moduix-border-width-sm));
@@ -107,15 +103,7 @@
     clip-path: inset(0 100% 0 0);
   }
 
-  .item-KSLnDf[data-half] .iconFg-SJSzOf {
-    clip-path: inset(0 50% 0 0);
-  }
-
-  .item-KSLnDf:not([data-highlighted]) .iconFg-SJSzOf {
-    clip-path: inset(0 100% 0 0);
-  }
-
-  .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .itemIndicator-vRie_M[data-half] .iconFg-SJSzOf, .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .item-KSLnDf[data-half] .iconFg-SJSzOf {
+  .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .itemIndicator-vRie_M[data-half] .iconFg-SJSzOf {
     clip-path: inset(0 0 0 50%);
   }
 

package/dist/components/segment-group/SegmentGroup.js

@@ -13,6 +13,7 @@ function SegmentGroup_useSegmentGroup(props) {
     const field = useFieldContext();
     const fieldset = useFieldsetContext();
     return useSegmentGroup({
+        orientation: 'horizontal',
         disabled: field?.disabled ?? fieldset?.disabled,
         invalid: field?.invalid ?? fieldset?.invalid,
         readOnly: field?.readOnly,

package/dist/components/select/Select.module.js

@@ -4,10 +4,10 @@ const Select_module = {
     label: "label-WNAZBK",
     control: "control-QCSm_x",
     trigger: "trigger-_8XyWR",
-    clearTrigger: "clearTrigger-bA52Dh",
     valueText: "valueText-ZjlEZ9",
     itemText: "itemText-yYAdr3",
     indicator: "indicator-ywAB27",
+    clearTrigger: "clearTrigger-bA52Dh",
     positioner: "positioner-mCDY9D",
     content: "content-fSDhut",
     "select-content-open": "select-content-open-BbqYJQ",

package/dist/components/select/Select_module.css

@@ -103,6 +103,10 @@
     color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
   }
 
+  .trigger-_8XyWR:not([data-placeholder-shown]) {
+    padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
+  }
+
   .trigger-_8XyWR[data-disabled], .trigger-_8XyWR[disabled] {
     cursor: default;
   }
@@ -117,10 +121,6 @@
     outline-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
   }
 
-  .control-QCSm_x:has(.clearTrigger-bA52Dh:not([hidden])) .trigger-_8XyWR {
-    padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
-  }
-
   .valueText-ZjlEZ9, .itemText-yYAdr3 {
     text-overflow: ellipsis;
     white-space: nowrap;

package/dist/components/separator/Separator_module.css

@@ -9,19 +9,19 @@
   }
 
   .root-q9iyyK[data-size="xs"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
+    --_separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
   }
 
   .root-q9iyyK[data-size="sm"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
+    --_separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
   }
 
   .root-q9iyyK[data-size="md"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
+    --_separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
   }
 
   .root-q9iyyK[data-size="lg"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
+    --_separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
   }
 
   .root-q9iyyK[data-variant="dashed"] {
@@ -34,14 +34,14 @@
 
   .root-q9iyyK[data-orientation="horizontal"] {
     width: var(--moduix-separator-length-horizontal, 100%);
-    border-block-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
+    border-block-start-width: var(--moduix-separator-thickness, var(--_separator-size-thickness, var(--moduix-border-width-sm)));
     height: 0;
   }
 
   .root-q9iyyK[data-orientation="vertical"] {
     width: 0;
     height: var(--moduix-separator-length-vertical, 1em);
-    border-inline-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
+    border-inline-start-width: var(--moduix-separator-thickness, var(--_separator-size-thickness, var(--moduix-border-width-sm)));
   }
 }
 

package/dist/components/sidebar/Sidebar.js

@@ -142,13 +142,13 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
         type: type,
         "aria-label": ariaLabel,
         "aria-expanded": !collapsed,
+        className: clsx(Sidebar_module.trigger, className),
+        onClick: handleClick,
+        ...props,
         "data-scope": "sidebar",
         "data-part": "trigger",
         "data-side": config.side,
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: clsx(Sidebar_module.trigger, className),
-        onClick: handleClick,
-        ...props,
         "data-slot": "sidebar-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
     });
@@ -156,30 +156,30 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
 const Sidebar_SidebarLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "label",
         className: clsx(Sidebar_module.label, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "label",
         "data-slot": "sidebar-label"
     });
 });
 const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.header, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "header",
         className: clsx(Sidebar_module.header, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "header",
         "data-slot": "sidebar-header"
     });
 });
 const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "content",
         className: clsx(Sidebar_module.content, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "content",
         "data-slot": "sidebar-content"
     });
 });
@@ -187,10 +187,10 @@ const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ class
     const { collapsed } = useSidebar();
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "expanded-content",
         className: className,
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "expanded-content",
         "data-slot": "sidebar-expanded-content",
         hidden: collapsed
     });
@@ -199,10 +199,10 @@ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ clas
     const { collapsed } = useSidebar();
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "collapsed-content",
         className: className,
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "collapsed-content",
         "data-slot": "sidebar-collapsed-content",
         hidden: !collapsed
     });
@@ -210,40 +210,40 @@ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ clas
 const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.footer, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "footer",
         className: clsx(Sidebar_module.footer, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "footer",
         "data-slot": "sidebar-footer"
     });
 });
 const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.section, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "group",
         className: clsx(Sidebar_module.group, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group",
         "data-slot": "sidebar-group"
     });
 });
 const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.h3, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "group-label",
         className: clsx(Sidebar_module.groupLabel, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group-label",
         "data-slot": "sidebar-group-label"
     });
 });
 const Sidebar_SidebarGroupHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "group-header",
         className: clsx(Sidebar_module.groupHeader, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group-header",
         "data-slot": "sidebar-group-header"
     });
 });
@@ -251,30 +251,30 @@ const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(ark.button, {
         ref: ref,
         type: type,
-        "data-scope": "sidebar",
-        "data-part": "group-action",
         className: clsx(Sidebar_module.groupAction, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group-action",
         "data-slot": "sidebar-group-action"
     });
 });
 const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-list",
         className: clsx(Sidebar_module.menu, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-list",
         "data-slot": "sidebar-navigation-list"
     });
 });
 const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-item",
         className: clsx(Sidebar_module.menuItem, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-item",
         "data-slot": "sidebar-navigation-item"
     });
 });
@@ -283,42 +283,42 @@ const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ acti
         ref: ref,
         type: type,
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
+        className: clsx(Sidebar_module.menuButton, className),
+        ...props,
         "data-scope": "sidebar",
         "data-part": "navigation-button",
         "data-active": active ? '' : void 0,
         "data-size": size,
-        className: clsx(Sidebar_module.menuButton, className),
-        ...props,
         "data-slot": "sidebar-navigation-button"
     });
 });
 const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-badge",
         className: clsx(Sidebar_module.menuBadge, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-badge",
         "data-slot": "sidebar-navigation-badge"
     });
 });
 const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-list",
         className: clsx(Sidebar_module.menuSub, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-list",
         "data-slot": "sidebar-navigation-sub-list"
     });
 });
 const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-item",
         className: clsx(Sidebar_module.menuSubItem, className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-item",
         "data-slot": "sidebar-navigation-sub-item"
     });
 });
@@ -326,11 +326,11 @@ const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ a
     return /*#__PURE__*/ jsx(ark.a, {
         ref: ref,
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
+        className: clsx(Sidebar_module.menuSubButton, className),
+        ...props,
         "data-scope": "sidebar",
         "data-part": "navigation-sub-button",
         "data-active": active ? '' : void 0,
-        className: clsx(Sidebar_module.menuSubButton, className),
-        ...props,
         "data-slot": "sidebar-navigation-sub-button",
         children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
             "data-slot": "sidebar-navigation-sub-label",
@@ -367,16 +367,14 @@ const Sidebar_SidebarInput = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Input.Root, {
         ref: ref,
         className: clsx(Sidebar_module.input, className),
-        ...props,
-        "data-slot": "sidebar-input"
+        ...props
     });
 });
 const Sidebar_SidebarSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Separator.Root, {
         ref: ref,
         className: clsx(Sidebar_module.separator, className),
-        ...props,
-        "data-slot": "sidebar-separator"
+        ...props
     });
 });
 const Sidebar = Object.assign(Sidebar_SidebarRoot, {