/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { cn } from "../../utils/cn.js";
import "react";
import { jsx } from "react/jsx-runtime";
//#region src/layout/Sidebar/Sidebar.tsx
/**
* Sidebar — the sticky aside chrome for admin consoles and docs shells:
* fixed width, sticky under the app header, right hairline border, and a
* flex column for its parts. Content-agnostic; a `NavTree` is the typical
* body.
*
* Compose with the slots (same vocabulary as `Drawer`):
* - `Sidebar.Header` — pinned top (logo / workspace switcher)
* - `Sidebar.Body` — the scrollable middle (put the nav here)
* - `Sidebar.Footer` — pinned bottom behind a hairline (theme/language)
*
* For small screens, hide it (`className="hidden lg:flex"`) and reuse the
* same nav inside a `Drawer` — see the stories for the pairing.
*
* @example
* <Sidebar width={236} top={62} aria-label="Console">
*   <Sidebar.Header>…logo…</Sidebar.Header>
*   <Sidebar.Body>
*     <NavTree groups={…} currentPath={path} />
*   </Sidebar.Body>
*   <Sidebar.Footer>…theme toggle…</Sidebar.Footer>
* </Sidebar>
*/
var Sidebar = ({ children, width = 236, collapsed = false, collapsedWidth = 64, top = 0, "aria-label": ariaLabel, className, style, testId }) => /* @__PURE__ */ jsx("aside", {
	"aria-label": ariaLabel,
	"data-collapsed": collapsed || void 0,
	"data-testid": testId,
	className: cn("sticky flex shrink-0 flex-col overflow-x-hidden border-r border-border-1", "transition-[width] duration-200 ease-out", className),
	style: {
		width: collapsed ? collapsedWidth : width,
		top,
		height: `calc(100vh - ${top}px)`,
		...style
	},
	children
});
var SidebarHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("shrink-0 px-3 pb-3 pt-5", className),
	children
});
SidebarHeader.displayName = "Sidebar.Header";
var SidebarBody = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("min-h-0 flex-1 overflow-y-auto px-3 py-4", className),
	children
});
SidebarBody.displayName = "Sidebar.Body";
var SidebarFooter = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("shrink-0 border-t border-border-1 px-3 py-3", className),
	children
});
SidebarFooter.displayName = "Sidebar.Footer";
Sidebar.Header = SidebarHeader;
Sidebar.Body = SidebarBody;
Sidebar.Footer = SidebarFooter;
//#endregion
export { Sidebar };

//# sourceMappingURL=Sidebar.js.map