@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/sidebar/Sidebar.js

@@ -1,11 +1,12 @@
 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 { createContext, splitProps, useContext } from "solid-js";
 import { cn } from "../../internal/cn.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 { Tooltip } from "../tooltip/index.js";
 var _tmpl$ = /*#__PURE__*/ template("<span data-slot=sidebar-navigation-sub-label>");
 const sidebarPanel = {
@@ -61,7 +62,8 @@ function SidebarRoot(props) {
         'class',
         'defaultSize',
         'panelId',
-        'side'
+        'side',
+        'style'
     ]);
     const panelId = ()=>local.panelId ?? 'sidebar';
     const side = ()=>local.side ?? 'left';
@@ -84,7 +86,14 @@ function SidebarRoot(props) {
                 },
                 "data-slot": "sidebar-root",
                 get ["class"] () {
-                    return cn('isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class);
+                    return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class);
+                },
+                get style () {
+                    return memo(()=>'string' == typeof local.style)() ? `width:;height:;${local.style}` : {
+                        width: void 0,
+                        height: void 0,
+                        ...local.style
+                    };
                 }
             }));
         }
@@ -120,7 +129,7 @@ function SidebarPanel(props) {
             return collapsed() ? 'collapsed' : 'expanded';
         },
         get ["class"] () {
-            return cn('group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class);
+            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class);
         }
     }));
 }
@@ -136,19 +145,23 @@ function SidebarInset(props) {
         },
         "data-slot": "sidebar-inset",
         get ["class"] () {
-            return cn('relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class);
+            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', 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();
         },
@@ -160,10 +173,10 @@ function SidebarResizeTrigger(props) {
         },
         "data-slot": "sidebar-resize-trigger",
         get ["class"] () {
-            return cn('z-2', local.class);
+            return cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', local.class);
         },
         get children () {
-            return local.children;
+            return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(index_js_Splitter.ResizeTriggerIndicator, {}) : local.children;
         }
     }));
 }
@@ -202,7 +215,6 @@ function SidebarTrigger(props) {
         get ["data-side"] () {
             return config.side();
         },
-        "data-slot": "sidebar-trigger",
         get ["data-state"] () {
             return collapsed() ? 'collapsed' : 'expanded';
         },
@@ -211,6 +223,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;
         }
@@ -223,11 +236,12 @@ function SidebarLabel(props) {
     return createComponent(ark.span, mergeProps({
         "data-scope": "sidebar",
         "data-part": "label",
-        "data-slot": "sidebar-label",
         get ["class"] () {
             return cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-label"
+    }));
 }
 function SidebarHeader(props) {
     const [local, others] = splitProps(props, [
@@ -236,11 +250,12 @@ function SidebarHeader(props) {
     return createComponent(ark.header, mergeProps({
         "data-scope": "sidebar",
         "data-part": "header",
-        "data-slot": "sidebar-header",
         get ["class"] () {
             return cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-header"
+    }));
 }
 function SidebarContent(props) {
     const [local, others] = splitProps(props, [
@@ -249,11 +264,12 @@ function SidebarContent(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "sidebar",
         "data-part": "content",
-        "data-slot": "sidebar-content",
         get ["class"] () {
             return cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-content"
+    }));
 }
 function SidebarExpandedContent(props) {
     const [local, others] = splitProps(props, [
@@ -263,11 +279,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();
         }
@@ -281,11 +297,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();
         }
@@ -298,11 +314,12 @@ function SidebarFooter(props) {
     return createComponent(ark.footer, mergeProps({
         "data-scope": "sidebar",
         "data-part": "footer",
-        "data-slot": "sidebar-footer",
         get ["class"] () {
             return cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-footer"
+    }));
 }
 function SidebarGroup(props) {
     const [local, others] = splitProps(props, [
@@ -311,11 +328,12 @@ function SidebarGroup(props) {
     return createComponent(ark.section, mergeProps({
         "data-scope": "sidebar",
         "data-part": "group",
-        "data-slot": "sidebar-group",
         get ["class"] () {
             return cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group"
+    }));
 }
 function SidebarGroupHeader(props) {
     const [local, others] = splitProps(props, [
@@ -324,11 +342,12 @@ function SidebarGroupHeader(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "sidebar",
         "data-part": "group-header",
-        "data-slot": "sidebar-group-header",
         get ["class"] () {
             return cn('flex min-w-0 items-center gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group-header"
+    }));
 }
 function SidebarGroupLabel(props) {
     const [local, others] = splitProps(props, [
@@ -337,11 +356,12 @@ function SidebarGroupLabel(props) {
     return createComponent(ark.h3, mergeProps({
         "data-scope": "sidebar",
         "data-part": "group-label",
-        "data-slot": "sidebar-group-label",
         get ["class"] () {
             return cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group-label"
+    }));
 }
 function SidebarGroupAction(props) {
     const [local, others] = splitProps(props, [
@@ -354,11 +374,12 @@ function SidebarGroupAction(props) {
         },
         "data-scope": "sidebar",
         "data-part": "group-action",
-        "data-slot": "sidebar-group-action",
         get ["class"] () {
             return cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-group-action"
+    }));
 }
 function SidebarNavigationList(props) {
     const [local, others] = splitProps(props, [
@@ -367,11 +388,12 @@ function SidebarNavigationList(props) {
     return createComponent(ark.ul, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-list",
-        "data-slot": "sidebar-navigation-list",
         get ["class"] () {
             return cn('flex w-full min-w-0 flex-col gap-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-list"
+    }));
 }
 function SidebarNavigationItem(props) {
     const [local, others] = splitProps(props, [
@@ -380,11 +402,12 @@ function SidebarNavigationItem(props) {
     return createComponent(ark.li, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-item",
-        "data-slot": "sidebar-navigation-item",
         get ["class"] () {
             return cn('relative min-w-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-item"
+    }));
 }
 function SidebarNavigationButton(props) {
     const [local, others] = splitProps(props, [
@@ -407,7 +430,6 @@ function SidebarNavigationButton(props) {
         },
         "data-scope": "sidebar",
         "data-part": "navigation-button",
-        "data-slot": "sidebar-navigation-button",
         get ["data-active"] () {
             return local.active ? '' : void 0;
         },
@@ -417,7 +439,9 @@ function SidebarNavigationButton(props) {
         get ["class"] () {
             return cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-button"
+    }));
 }
 function SidebarNavigationBadge(props) {
     const [local, others] = splitProps(props, [
@@ -426,11 +450,12 @@ function SidebarNavigationBadge(props) {
     return createComponent(ark.span, mergeProps({
         "data-scope": "sidebar",
         "data-part": "navigation-badge",
-        "data-slot": "sidebar-navigation-badge",
         get ["class"] () {
             return cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-badge"
+    }));
 }
 function SidebarNavigationSubList(props) {
     const [local, others] = splitProps(props, [
@@ -439,11 +464,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 cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-sub-list"
+    }));
 }
 function SidebarNavigationSubItem(props) {
     const [local, others] = splitProps(props, [
@@ -452,11 +478,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 cn('relative min-w-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-navigation-sub-item"
+    }));
 }
 function SidebarNavigationSubButton(props) {
     const [local, others] = splitProps(props, [
@@ -475,7 +502,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;
         },
@@ -483,6 +509,7 @@ function SidebarNavigationSubButton(props) {
             return cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', local.class);
         }
     }, others, {
+        "data-slot": "sidebar-navigation-sub-button",
         get children () {
             return memo(()=>'string' == typeof local.children)() ? (()=>{
                 var _el$ = _tmpl$();
@@ -543,22 +570,24 @@ function SidebarInput(props) {
         'class'
     ]);
     return createComponent(Input.Root, mergeProps({
-        "data-slot": "sidebar-input",
         get ["class"] () {
             return cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', 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 cn('border-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "sidebar-separator"
+    }));
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,

package/dist/components/sidebar/Sidebar.jsx

@@ -1,10 +1,11 @@
 import { ark } from "@ark-ui/solid/factory";
+import { Splitter } from "@ark-ui/solid/splitter";
 import { createContext, splitProps, useContext } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
 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 { Tooltip } from "../tooltip/index.jsx";
 const sidebarPanel = {
     id: 'sidebar',
@@ -59,7 +60,8 @@ function SidebarRoot(props) {
         'class',
         'defaultSize',
         'panelId',
-        'side'
+        'side',
+        'style'
     ]);
     const panelId = ()=>local.panelId ?? 'sidebar';
     const side = ()=>local.side ?? 'left';
@@ -67,7 +69,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={cn('isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class)}/>
+      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class)} style={'string' == typeof local.style ? `width:;height:;${local.style}` : {
+        width: void 0,
+        height: void 0,
+        ...local.style
+    }}/>
     </SidebarConfigContext.Provider>;
 }
 function useSidebar() {
@@ -88,25 +94,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={cn('group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class)}/>;
+    return <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', 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={cn('relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class)}/>;
+    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', 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={cn('z-2', 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={cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', local.class)}>
+      {void 0 === local.children && !local.asChild ? <index_jsx_Splitter.ResizeTriggerIndicator/> : local.children}
     </Splitter.ResizeTrigger>;
 }
 function SidebarTrigger(props) {
@@ -126,7 +133,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={cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', 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={cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', local.class)} onClick={handleClick} {...others} data-slot="sidebar-trigger">
       {void 0 === local.children && !local.asChild ? <ChevronLeftIcon/> : local.children}
     </ark.button>;
 }
@@ -134,76 +141,76 @@ function SidebarLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="sidebar" data-part="label" data-slot="sidebar-label" class={cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others}/>;
+    return <ark.span data-scope="sidebar" data-part="label" class={cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', 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={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', local.class)} {...others}/>;
+    return <ark.header data-scope="sidebar" data-part="header" class={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', 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={cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', local.class)} {...others}/>;
+    return <ark.div data-scope="sidebar" data-part="content" class={cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', 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={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others}/>;
+    return <ark.footer data-scope="sidebar" data-part="footer" class={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', 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={cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others}/>;
+    return <ark.section data-scope="sidebar" data-part="group" class={cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others} data-slot="sidebar-group"/>;
 }
 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={cn('flex min-w-0 items-center gap-2', local.class)} {...others}/>;
+    return <ark.div data-scope="sidebar" data-part="group-header" class={cn('flex min-w-0 items-center gap-2', local.class)} {...others} data-slot="sidebar-group-header"/>;
 }
 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={cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others}/>;
+    return <ark.h3 data-scope="sidebar" data-part="group-label" class={cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others} data-slot="sidebar-group-label"/>;
 }
 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={cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', local.class)} {...others}/>;
+    return <ark.button type={local.type ?? 'button'} data-scope="sidebar" data-part="group-action" class={cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', 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={cn('flex w-full min-w-0 flex-col gap-1', local.class)} {...others}/>;
+    return <ark.ul data-scope="sidebar" data-part="navigation-list" class={cn('flex w-full min-w-0 flex-col gap-1', 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={cn('relative min-w-0', local.class)} {...others}/>;
+    return <ark.li data-scope="sidebar" data-part="navigation-item" class={cn('relative min-w-0', local.class)} {...others} data-slot="sidebar-navigation-item"/>;
 }
 function SidebarNavigationButton(props) {
     const [local, others] = splitProps(props, [
@@ -214,25 +221,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={cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', 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={cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', 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={cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', local.class)} {...others}/>;
+    return <ark.span data-scope="sidebar" data-part="navigation-badge" class={cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', 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={cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others}/>;
+    return <ark.ul data-scope="sidebar" data-part="navigation-sub-list" class={cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', 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={cn('relative min-w-0', local.class)} {...others}/>;
+    return <ark.li data-scope="sidebar" data-part="navigation-sub-item" class={cn('relative min-w-0', local.class)} {...others} data-slot="sidebar-navigation-sub-item"/>;
 }
 function SidebarNavigationSubButton(props) {
     const [local, others] = splitProps(props, [
@@ -242,7 +249,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={cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 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={cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 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>;
 }
@@ -270,13 +277,13 @@ function SidebarInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Input.Root data-slot="sidebar-input" class={cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others}/>;
+    return <Input.Root class={cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others} data-slot="sidebar-input"/>;
 }
 function SidebarSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Separator.Root data-slot="sidebar-separator" class={cn('border-border', local.class)} {...others}/>;
+    return <Separator.Root class={cn('border-border', local.class)} {...others} data-slot="sidebar-separator"/>;
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,