@moduix/solid 1.0.0 → 1.1.0

package/dist/components/sidebar/Sidebar.js

@@ -1,11 +1,13 @@
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { ark } from "@ark-ui/solid/factory";
+import { Splitter } from "@ark-ui/solid/splitter";
 import { clsx } from "clsx";
 import { createContext, splitProps, useContext } from "solid-js";
 import { ChevronLeftIcon } from "../../internal/icons/ui/Icons.js";
 import { Input } from "../input/index.js";
 import { Separator } from "../separator/index.js";
-import { Splitter, useSplitterContext } from "../splitter/index.js";
+import { Splitter as index_js_Splitter, useSplitterContext } from "../splitter/index.js";
+import Splitter_module from "../splitter/Splitter.module.js";
 import { Tooltip } from "../tooltip/index.js";
 import Sidebar_module from "./Sidebar.module.js";
 var _tmpl$ = /*#__PURE__*/ template("<span data-slot=sidebar-navigation-sub-label>");
@@ -62,7 +64,8 @@ function SidebarRoot(props) {
         'class',
         'defaultSize',
         'panelId',
-        'side'
+        'side',
+        'style'
     ]);
     const panelId = ()=>local.panelId ?? 'sidebar';
     const side = ()=>local.side ?? 'left';
@@ -85,7 +88,14 @@ function SidebarRoot(props) {
                 },
                 "data-slot": "sidebar-root",
                 get ["class"] () {
-                    return clsx(Sidebar_module.root, local.class);
+                    return clsx(Splitter_module.root, Sidebar_module.root, local.class);
+                },
+                get style () {
+                    return memo(()=>'string' == typeof local.style)() ? `width:var(--moduix-splitter-width, 100%);height:var(--moduix-splitter-height, 28rem);${local.style}` : {
+                        width: 'var(--moduix-splitter-width, 100%)',
+                        height: 'var(--moduix-splitter-height, 28rem)',
+                        ...local.style
+                    };
                 }
             }));
         }
@@ -121,7 +131,7 @@ function SidebarPanel(props) {
             return collapsed() ? 'collapsed' : 'expanded';
         },
         get ["class"] () {
-            return clsx(Sidebar_module.panel, local.class);
+            return clsx(Splitter_module.panel, Sidebar_module.panel, local.class);
         }
     }));
 }
@@ -137,19 +147,23 @@ function SidebarInset(props) {
         },
         "data-slot": "sidebar-inset",
         get ["class"] () {
-            return clsx(Sidebar_module.inset, local.class);
+            return clsx(Splitter_module.panel, Sidebar_module.inset, local.class);
         }
     }));
 }
 function SidebarResizeTrigger(props) {
     const [local, others] = splitProps(props, [
         'aria-label',
+        'asChild',
         'class',
         'children'
     ]);
     const config = useSidebarConfig();
     const id = ()=>'left' === config.side() ? `${config.panelId()}:content` : `content:${config.panelId()}`;
     return createComponent(Splitter.ResizeTrigger, mergeProps(others, {
+        get asChild () {
+            return local.asChild;
+        },
         get id () {
             return id();
         },
@@ -161,10 +175,10 @@ function SidebarResizeTrigger(props) {
         },
         "data-slot": "sidebar-resize-trigger",
         get ["class"] () {
-            return clsx(Sidebar_module.resizeTrigger, local.class);
+            return clsx(Splitter_module.resizeTrigger, Sidebar_module.resizeTrigger, local.class);
         },
         get children () {
-            return local.children;
+            return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(index_js_Splitter.ResizeTriggerIndicator, {}) : local.children;
         }
     }));
 }
@@ -203,7 +217,6 @@ function SidebarTrigger(props) {
         get ["data-side"] () {
             return config.side();
         },
-        "data-slot": "sidebar-trigger",
         get ["data-state"] () {
             return collapsed() ? 'collapsed' : 'expanded';
         },
@@ -212,6 +225,7 @@ function SidebarTrigger(props) {
         },
         onClick: handleClick
     }, others, {
+        "data-slot": "sidebar-trigger",
         get children () {
             return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(ChevronLeftIcon, {}) : local.children;
         }
@@ -224,11 +238,12 @@ function SidebarLabel(props) {
     return createComponent(ark.span, mergeProps({
         "data-scope": "sidebar",
         "data-part": "label",
-        "data-slot": "sidebar-label",
         get ["class"] () {
             return clsx(Sidebar_module.label, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-label"
+    }));
 }
 function SidebarHeader(props) {
     const [local, others] = splitProps(props, [
@@ -237,11 +252,12 @@ function SidebarHeader(props) {
     return createComponent(ark.header, mergeProps({
         "data-scope": "sidebar",
         "data-part": "header",
-        "data-slot": "sidebar-header",
         get ["class"] () {
             return clsx(Sidebar_module.header, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-header"
+    }));
 }
 function SidebarContent(props) {
     const [local, others] = splitProps(props, [
@@ -250,11 +266,12 @@ function SidebarContent(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "sidebar",
         "data-part": "content",
-        "data-slot": "sidebar-content",
         get ["class"] () {
             return clsx(Sidebar_module.content, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-content"
+    }));
 }
 function SidebarExpandedContent(props) {
     const [local, others] = splitProps(props, [
@@ -264,11 +281,11 @@ function SidebarExpandedContent(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "sidebar",
         "data-part": "expanded-content",
-        "data-slot": "sidebar-expanded-content",
         get ["class"] () {
             return local.class;
         }
     }, others, {
+        "data-slot": "sidebar-expanded-content",
         get hidden () {
             return collapsed();
         }
@@ -282,11 +299,11 @@ function SidebarCollapsedContent(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "sidebar",
         "data-part": "collapsed-content",
-        "data-slot": "sidebar-collapsed-content",
         get ["class"] () {
             return local.class;
         }
     }, others, {
+        "data-slot": "sidebar-collapsed-content",
         get hidden () {
             return !collapsed();
         }
@@ -299,11 +316,12 @@ function SidebarFooter(props) {
     return createComponent(ark.footer, mergeProps({
         "data-scope": "sidebar",
         "data-part": "footer",
-        "data-slot": "sidebar-footer",
         get ["class"] () {
             return clsx(Sidebar_module.footer, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-footer"
+    }));
 }
 function SidebarGroup(props) {
     const [local, others] = splitProps(props, [
@@ -312,11 +330,12 @@ function SidebarGroup(props) {
     return createComponent(ark.section, mergeProps({
         "data-scope": "sidebar",
         "data-part": "group",
-        "data-slot": "sidebar-group",
         get ["class"] () {
             return clsx(Sidebar_module.group, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group"
+    }));
 }
 function SidebarGroupLabel(props) {
     const [local, others] = splitProps(props, [
@@ -325,11 +344,12 @@ function SidebarGroupLabel(props) {
     return createComponent(ark.h3, mergeProps({
         "data-scope": "sidebar",
         "data-part": "group-label",
-        "data-slot": "sidebar-group-label",
         get ["class"] () {
             return clsx(Sidebar_module.groupLabel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group-label"
+    }));
 }
 function SidebarGroupHeader(props) {
     const [local, others] = splitProps(props, [
@@ -338,11 +358,12 @@ function SidebarGroupHeader(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "sidebar",
         "data-part": "group-header",
-        "data-slot": "sidebar-group-header",
         get ["class"] () {
             return clsx(Sidebar_module.groupHeader, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group-header"
+    }));
 }
 function SidebarGroupAction(props) {
     const [local, others] = splitProps(props, [
@@ -355,11 +376,12 @@ function SidebarGroupAction(props) {
         },
         "data-scope": "sidebar",
         "data-part": "group-action",
-        "data-slot": "sidebar-group-action",
         get ["class"] () {
             return clsx(Sidebar_module.groupAction, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group-action"
+    }));
 }
 function SidebarNavigationList(props) {
     const [local, others] = splitProps(props, [
@@ -368,11 +390,12 @@ function SidebarNavigationList(props) {
     return createComponent(ark.ul, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-list",
-        "data-slot": "sidebar-navigation-list",
         get ["class"] () {
             return clsx(Sidebar_module.menu, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-list"
+    }));
 }
 function SidebarNavigationItem(props) {
     const [local, others] = splitProps(props, [
@@ -381,11 +404,12 @@ function SidebarNavigationItem(props) {
     return createComponent(ark.li, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-item",
-        "data-slot": "sidebar-navigation-item",
         get ["class"] () {
             return clsx(Sidebar_module.menuItem, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-item"
+    }));
 }
 function SidebarNavigationButton(props) {
     const [local, others] = splitProps(props, [
@@ -408,7 +432,6 @@ function SidebarNavigationButton(props) {
         },
         "data-scope": "sidebar",
         "data-part": "navigation-button",
-        "data-slot": "sidebar-navigation-button",
         get ["data-active"] () {
             return local.active ? '' : void 0;
         },
@@ -418,7 +441,9 @@ function SidebarNavigationButton(props) {
         get ["class"] () {
             return clsx(Sidebar_module.menuButton, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-button"
+    }));
 }
 function SidebarNavigationBadge(props) {
     const [local, others] = splitProps(props, [
@@ -427,11 +452,12 @@ function SidebarNavigationBadge(props) {
     return createComponent(ark.span, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-badge",
-        "data-slot": "sidebar-navigation-badge",
         get ["class"] () {
             return clsx(Sidebar_module.menuBadge, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-badge"
+    }));
 }
 function SidebarNavigationSubList(props) {
     const [local, others] = splitProps(props, [
@@ -440,11 +466,12 @@ function SidebarNavigationSubList(props) {
     return createComponent(ark.ul, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-sub-list",
-        "data-slot": "sidebar-navigation-sub-list",
         get ["class"] () {
             return clsx(Sidebar_module.menuSub, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-sub-list"
+    }));
 }
 function SidebarNavigationSubItem(props) {
     const [local, others] = splitProps(props, [
@@ -453,11 +480,12 @@ function SidebarNavigationSubItem(props) {
     return createComponent(ark.li, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-sub-item",
-        "data-slot": "sidebar-navigation-sub-item",
         get ["class"] () {
             return clsx(Sidebar_module.menuSubItem, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-sub-item"
+    }));
 }
 function SidebarNavigationSubButton(props) {
     const [local, others] = splitProps(props, [
@@ -476,7 +504,6 @@ function SidebarNavigationSubButton(props) {
         },
         "data-scope": "sidebar",
         "data-part": "navigation-sub-button",
-        "data-slot": "sidebar-navigation-sub-button",
         get ["data-active"] () {
             return local.active ? '' : void 0;
         },
@@ -484,6 +511,7 @@ function SidebarNavigationSubButton(props) {
             return clsx(Sidebar_module.menuSubButton, local.class);
         }
     }, others, {
+        "data-slot": "sidebar-navigation-sub-button",
         get children () {
             return memo(()=>'string' == typeof local.children)() ? (()=>{
                 var _el$ = _tmpl$();
@@ -544,22 +572,24 @@ function SidebarInput(props) {
         'class'
     ]);
     return createComponent(Input.Root, mergeProps({
-        "data-slot": "sidebar-input",
         get ["class"] () {
             return clsx(Sidebar_module.input, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-input"
+    }));
 }
 function SidebarSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Separator.Root, mergeProps({
-        "data-slot": "sidebar-separator",
         get ["class"] () {
             return clsx(Sidebar_module.separator, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-separator"
+    }));
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,

package/dist/components/sidebar/Sidebar.jsx

@@ -1,10 +1,12 @@
 import { ark } from "@ark-ui/solid/factory";
+import { Splitter } from "@ark-ui/solid/splitter";
 import { clsx } from "clsx";
 import { createContext, splitProps, useContext } from "solid-js";
 import { ChevronLeftIcon } from "../../internal/icons/ui/Icons.jsx";
 import { Input } from "../input/index.jsx";
 import { Separator } from "../separator/index.jsx";
-import { Splitter, useSplitterContext } from "../splitter/index.jsx";
+import { Splitter as index_jsx_Splitter, useSplitterContext } from "../splitter/index.jsx";
+import Splitter_module from "../splitter/Splitter.module.jsx";
 import { Tooltip } from "../tooltip/index.jsx";
 import Sidebar_module from "./Sidebar.module.jsx";
 const sidebarPanel = {
@@ -60,7 +62,8 @@ function SidebarRoot(props) {
         'class',
         'defaultSize',
         'panelId',
-        'side'
+        'side',
+        'style'
     ]);
     const panelId = ()=>local.panelId ?? 'sidebar';
     const side = ()=>local.side ?? 'left';
@@ -68,7 +71,11 @@ function SidebarRoot(props) {
         panelId,
         side
     }}>
-      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={clsx(Sidebar_module.root, local.class)}/>
+      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={clsx(Splitter_module.root, Sidebar_module.root, local.class)} style={'string' == typeof local.style ? `width:var(--moduix-splitter-width, 100%);height:var(--moduix-splitter-height, 28rem);${local.style}` : {
+        width: 'var(--moduix-splitter-width, 100%)',
+        height: 'var(--moduix-splitter-height, 28rem)',
+        ...local.style
+    }}/>
     </SidebarConfigContext.Provider>;
 }
 function useSidebar() {
@@ -89,25 +96,26 @@ function SidebarPanel(props) {
     const config = useSidebarConfig();
     const splitter = useSplitterContext();
     const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
-    return <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={clsx(Sidebar_module.panel, local.class)}/>;
+    return <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={clsx(Splitter_module.panel, Sidebar_module.panel, local.class)}/>;
 }
 function SidebarInset(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     const config = useSidebarConfig();
-    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={clsx(Sidebar_module.inset, local.class)}/>;
+    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={clsx(Splitter_module.panel, Sidebar_module.inset, local.class)}/>;
 }
 function SidebarResizeTrigger(props) {
     const [local, others] = splitProps(props, [
         'aria-label',
+        'asChild',
         'class',
         'children'
     ]);
     const config = useSidebarConfig();
     const id = ()=>'left' === config.side() ? `${config.panelId()}:content` : `content:${config.panelId()}`;
-    return <Splitter.ResizeTrigger {...others} id={id()} aria-label={local['aria-label'] ?? 'Resize sidebar'} data-side={config.side()} data-slot="sidebar-resize-trigger" class={clsx(Sidebar_module.resizeTrigger, local.class)}>
-      {local.children}
+    return <Splitter.ResizeTrigger {...others} asChild={local.asChild} id={id()} aria-label={local['aria-label'] ?? 'Resize sidebar'} data-side={config.side()} data-slot="sidebar-resize-trigger" class={clsx(Splitter_module.resizeTrigger, Sidebar_module.resizeTrigger, local.class)}>
+      {void 0 === local.children && !local.asChild ? <index_jsx_Splitter.ResizeTriggerIndicator/> : local.children}
     </Splitter.ResizeTrigger>;
 }
 function SidebarTrigger(props) {
@@ -127,7 +135,7 @@ function SidebarTrigger(props) {
         if (event.defaultPrevented) return;
         toggleSidebarPanel(splitter, config.panelId());
     };
-    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Toggle sidebar'} aria-expanded={!collapsed()} data-scope="sidebar" data-part="trigger" data-side={config.side()} data-slot="sidebar-trigger" data-state={collapsed() ? 'collapsed' : 'expanded'} class={clsx(Sidebar_module.trigger, local.class)} onClick={handleClick} {...others}>
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Toggle sidebar'} aria-expanded={!collapsed()} data-scope="sidebar" data-part="trigger" data-side={config.side()} data-state={collapsed() ? 'collapsed' : 'expanded'} class={clsx(Sidebar_module.trigger, local.class)} onClick={handleClick} {...others} data-slot="sidebar-trigger">
       {void 0 === local.children && !local.asChild ? <ChevronLeftIcon/> : local.children}
     </ark.button>;
 }
@@ -135,76 +143,76 @@ function SidebarLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="sidebar" data-part="label" data-slot="sidebar-label" class={clsx(Sidebar_module.label, local.class)} {...others}/>;
+    return <ark.span data-scope="sidebar" data-part="label" class={clsx(Sidebar_module.label, local.class)} {...others} data-slot="sidebar-label"/>;
 }
 function SidebarHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.header data-scope="sidebar" data-part="header" data-slot="sidebar-header" class={clsx(Sidebar_module.header, local.class)} {...others}/>;
+    return <ark.header data-scope="sidebar" data-part="header" class={clsx(Sidebar_module.header, local.class)} {...others} data-slot="sidebar-header"/>;
 }
 function SidebarContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="sidebar" data-part="content" data-slot="sidebar-content" class={clsx(Sidebar_module.content, local.class)} {...others}/>;
+    return <ark.div data-scope="sidebar" data-part="content" class={clsx(Sidebar_module.content, local.class)} {...others} data-slot="sidebar-content"/>;
 }
 function SidebarExpandedContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     const { collapsed } = useSidebar();
-    return <ark.div data-scope="sidebar" data-part="expanded-content" data-slot="sidebar-expanded-content" class={local.class} {...others} hidden={collapsed()}/>;
+    return <ark.div data-scope="sidebar" data-part="expanded-content" class={local.class} {...others} data-slot="sidebar-expanded-content" hidden={collapsed()}/>;
 }
 function SidebarCollapsedContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     const { collapsed } = useSidebar();
-    return <ark.div data-scope="sidebar" data-part="collapsed-content" data-slot="sidebar-collapsed-content" class={local.class} {...others} hidden={!collapsed()}/>;
+    return <ark.div data-scope="sidebar" data-part="collapsed-content" class={local.class} {...others} data-slot="sidebar-collapsed-content" hidden={!collapsed()}/>;
 }
 function SidebarFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.footer data-scope="sidebar" data-part="footer" data-slot="sidebar-footer" class={clsx(Sidebar_module.footer, local.class)} {...others}/>;
+    return <ark.footer data-scope="sidebar" data-part="footer" class={clsx(Sidebar_module.footer, local.class)} {...others} data-slot="sidebar-footer"/>;
 }
 function SidebarGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.section data-scope="sidebar" data-part="group" data-slot="sidebar-group" class={clsx(Sidebar_module.group, local.class)} {...others}/>;
+    return <ark.section data-scope="sidebar" data-part="group" class={clsx(Sidebar_module.group, local.class)} {...others} data-slot="sidebar-group"/>;
 }
 function SidebarGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.h3 data-scope="sidebar" data-part="group-label" data-slot="sidebar-group-label" class={clsx(Sidebar_module.groupLabel, local.class)} {...others}/>;
+    return <ark.h3 data-scope="sidebar" data-part="group-label" class={clsx(Sidebar_module.groupLabel, local.class)} {...others} data-slot="sidebar-group-label"/>;
 }
 function SidebarGroupHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="sidebar" data-part="group-header" data-slot="sidebar-group-header" class={clsx(Sidebar_module.groupHeader, local.class)} {...others}/>;
+    return <ark.div data-scope="sidebar" data-part="group-header" class={clsx(Sidebar_module.groupHeader, local.class)} {...others} data-slot="sidebar-group-header"/>;
 }
 function SidebarGroupAction(props) {
     const [local, others] = splitProps(props, [
         'class',
         'type'
     ]);
-    return <ark.button type={local.type ?? 'button'} data-scope="sidebar" data-part="group-action" data-slot="sidebar-group-action" class={clsx(Sidebar_module.groupAction, local.class)} {...others}/>;
+    return <ark.button type={local.type ?? 'button'} data-scope="sidebar" data-part="group-action" class={clsx(Sidebar_module.groupAction, local.class)} {...others} data-slot="sidebar-group-action"/>;
 }
 function SidebarNavigationList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.ul data-scope="sidebar" data-part="navigation-list" data-slot="sidebar-navigation-list" class={clsx(Sidebar_module.menu, local.class)} {...others}/>;
+    return <ark.ul data-scope="sidebar" data-part="navigation-list" class={clsx(Sidebar_module.menu, local.class)} {...others} data-slot="sidebar-navigation-list"/>;
 }
 function SidebarNavigationItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.li data-scope="sidebar" data-part="navigation-item" data-slot="sidebar-navigation-item" class={clsx(Sidebar_module.menuItem, local.class)} {...others}/>;
+    return <ark.li data-scope="sidebar" data-part="navigation-item" class={clsx(Sidebar_module.menuItem, local.class)} {...others} data-slot="sidebar-navigation-item"/>;
 }
 function SidebarNavigationButton(props) {
     const [local, others] = splitProps(props, [
@@ -215,25 +223,25 @@ function SidebarNavigationButton(props) {
         'size',
         'type'
     ]);
-    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-button" data-slot="sidebar-navigation-button" data-active={local.active ? '' : void 0} data-size={local.size ?? 'md'} class={clsx(Sidebar_module.menuButton, local.class)} {...others}/>;
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-button" data-active={local.active ? '' : void 0} data-size={local.size ?? 'md'} class={clsx(Sidebar_module.menuButton, local.class)} {...others} data-slot="sidebar-navigation-button"/>;
 }
 function SidebarNavigationBadge(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="sidebar" data-part="navigation-badge" data-slot="sidebar-navigation-badge" class={clsx(Sidebar_module.menuBadge, local.class)} {...others}/>;
+    return <ark.span data-scope="sidebar" data-part="navigation-badge" class={clsx(Sidebar_module.menuBadge, local.class)} {...others} data-slot="sidebar-navigation-badge"/>;
 }
 function SidebarNavigationSubList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.ul data-scope="sidebar" data-part="navigation-sub-list" data-slot="sidebar-navigation-sub-list" class={clsx(Sidebar_module.menuSub, local.class)} {...others}/>;
+    return <ark.ul data-scope="sidebar" data-part="navigation-sub-list" class={clsx(Sidebar_module.menuSub, local.class)} {...others} data-slot="sidebar-navigation-sub-list"/>;
 }
 function SidebarNavigationSubItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.li data-scope="sidebar" data-part="navigation-sub-item" data-slot="sidebar-navigation-sub-item" class={clsx(Sidebar_module.menuSubItem, local.class)} {...others}/>;
+    return <ark.li data-scope="sidebar" data-part="navigation-sub-item" class={clsx(Sidebar_module.menuSubItem, local.class)} {...others} data-slot="sidebar-navigation-sub-item"/>;
 }
 function SidebarNavigationSubButton(props) {
     const [local, others] = splitProps(props, [
@@ -243,7 +251,7 @@ function SidebarNavigationSubButton(props) {
         'children',
         'class'
     ]);
-    return <ark.a asChild={local.asChild} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-sub-button" data-slot="sidebar-navigation-sub-button" data-active={local.active ? '' : void 0} class={clsx(Sidebar_module.menuSubButton, local.class)} {...others}>
+    return <ark.a asChild={local.asChild} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-sub-button" data-active={local.active ? '' : void 0} class={clsx(Sidebar_module.menuSubButton, local.class)} {...others} data-slot="sidebar-navigation-sub-button">
       {'string' == typeof local.children ? <span data-slot="sidebar-navigation-sub-label">{local.children}</span> : local.children}
     </ark.a>;
 }
@@ -271,13 +279,13 @@ function SidebarInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Input.Root data-slot="sidebar-input" class={clsx(Sidebar_module.input, local.class)} {...others}/>;
+    return <Input.Root class={clsx(Sidebar_module.input, local.class)} {...others} data-slot="sidebar-input"/>;
 }
 function SidebarSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Separator.Root data-slot="sidebar-separator" class={clsx(Sidebar_module.separator, local.class)} {...others}/>;
+    return <Separator.Root class={clsx(Sidebar_module.separator, local.class)} {...others} data-slot="sidebar-separator"/>;
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,