@nocoo/basalt 3.2.0 → 3.2.4

package/dist/components/sidebar.d.ts

@@ -1,4 +1,5 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, type RefObject } from "react";
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, type RefObject } from "react";
+import { type ButtonProps } from "./button.js";
 export type SidebarSide = "left" | "right";
 export interface SidebarContextValue {
     /**
@@ -102,11 +103,34 @@ export type SidebarProps = HTMLAttributes<HTMLElement> & {
      * @default false
      */
     collapsed?: boolean;
+    /**
+     * Show the resize handle for an expanded provider-backed sidebar.
+     * @default true
+     */
+    resizable?: boolean;
 };
-export declare function Sidebar({ collapsed: collapsedProp, className, children, onMouseEnter, onMouseLeave, style, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ collapsed: collapsedProp, resizable, className, children, onMouseEnter, onMouseLeave, style, ...props }: SidebarProps): import("react").JSX.Element;
 export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
 export declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): import("react").JSX.Element;
+export interface SidebarBrandProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Brand mark rendered in the fixed collapsed-rail slot. */
+    logo: ReactNode;
+    /** Product or workspace name. */
+    name: ReactNode;
+    /** Optional version or release metadata, rendered at the auxiliary type size. */
+    version?: ReactNode;
+    /** Optional trailing action, conventionally a `SidebarToggle`. */
+    action?: ReactNode;
+}
+export declare function SidebarBrand({ logo, name, version, action, className, ...props }: SidebarBrandProps): import("react").JSX.Element;
+export interface SidebarToggleProps extends Omit<ButtonProps, "children" | "size" | "aria-expanded"> {
+    /** Accessible label while the sidebar is collapsed. @default "Expand sidebar" */
+    expandLabel?: string;
+    /** Accessible label while the sidebar is expanded. @default "Collapse sidebar" */
+    collapseLabel?: string;
+}
+export declare function SidebarToggle({ "aria-label": ariaLabel, expandLabel, collapseLabel, onClick, variant, ...props }: SidebarToggleProps): import("react").JSX.Element;
 /**
  * Props for `SidebarSearch`. Renders a native `<button>` element and accepts all standard button HTML attributes and click handlers.
  */
@@ -124,25 +148,34 @@ export declare function SidebarNav({ className, ...props }: SidebarNavProps): im
 export interface SidebarPartitionProps extends HTMLAttributes<HTMLParagraphElement> {
 }
 export declare function SidebarPartition({ className, ...props }: SidebarPartitionProps): import("react").JSX.Element;
-export type SidebarItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Mark the item as the current page.
-     * @default false
-     */
+type SidebarRowProps = {
+    /** Mark the item as the current page. @default false */
     active?: boolean;
+    /** Item content. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
 };
-export declare function SidebarItem({ active, className, ...props }: SidebarItemProps): import("react").JSX.Element;
-/**
- * Props for `SidebarIconItem`. Accepts standard button HTML attributes. The caller is responsible for providing accessible labeling via `aria-label` or `aria-labelledby` as icon buttons do not automatically generate accessible names.
- */
-export interface SidebarIconItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Mark the icon button as active page item.
-     * @default false
-     */
-    active?: boolean;
-}
-export declare function SidebarIconItem({ active, className, ...props }: SidebarIconItemProps): import("react").JSX.Element;
+type SidebarButtonRowProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "disabled"> & SidebarRowProps & {
+    asChild?: false;
+    disabled?: boolean;
+    href?: never;
+};
+type SidebarSlotRowProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "disabled"> & SidebarRowProps & {
+    /** Render the item onto its single enabled child element. */
+    asChild: true;
+    disabled?: never;
+    href?: never;
+};
+type SidebarLinkRowProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href"> & SidebarRowProps & {
+    /** Application route interpreted by LinkProvider. */
+    href: string;
+    asChild?: never;
+};
+export type SidebarItemProps = SidebarButtonRowProps | SidebarSlotRowProps | SidebarLinkRowProps;
+export declare function SidebarItem(props: SidebarItemProps): import("react").JSX.Element;
+export type SidebarIconItemProps = SidebarButtonRowProps | SidebarSlotRowProps | SidebarLinkRowProps;
+export declare function SidebarIconItem(props: SidebarIconItemProps): import("react").JSX.Element;
 /**
  * Props for `SidebarGroup`. Uncontrolled collapsible section that accepts only the documented properties. It does not accept controlled open props or arbitrary DOM attributes.
  */
@@ -193,3 +226,4 @@ export interface ContentIslandProps extends HTMLAttributes<HTMLDivElement> {
     mobileSurface?: "inset" | "edge-to-edge";
 }
 export declare function ContentIsland({ mobileSurface, className, ...props }: ContentIslandProps): import("react").JSX.Element;
+export {};

package/dist/components/sidebar.js

@@ -2,36 +2,40 @@
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { FOCUS_INSET as n, OVERLAY_LAYER as r, OVERLAY_MOTION as i } from "./overlay.js";
-import { Dialog as a, DialogOverlay as o, DialogPortal as s } from "./dialog.js";
-import { Collapsible as c, CollapsibleContent as l, CollapsibleTrigger as u } from "./collapsible.js";
-import { useHoverHighlight as d } from "../utils/use-hover-highlight.js";
-import { SkeletonLine as f } from "./skeleton-line.js";
-import { NAV_ITEM_CLASS as p, NAV_LIST_CLASS as m, NAV_ROW_CLASS as h } from "../utils/navigation.js";
-import { createContext as g, useCallback as _, useContext as v, useLayoutEffect as y, useRef as b, useState as x } from "react";
-import { ChevronUp as S, Search as C } from "lucide-react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import * as E from "@radix-ui/react-dialog";
-//#region src/components/sidebar.tsx
-var D = g(null);
-function O() {
-	let e = v(D);
+import { Button as a } from "./button.js";
+import { Dialog as o, DialogOverlay as s, DialogPortal as c } from "./dialog.js";
+import { Collapsible as l, CollapsibleContent as u, CollapsibleTrigger as d } from "./collapsible.js";
+import { useHoverHighlight as f } from "../utils/use-hover-highlight.js";
+import { Tooltip as p, TooltipContent as m, TooltipProvider as h, TooltipTrigger as g } from "./tooltip.js";
+import { SkeletonLine as _ } from "./skeleton-line.js";
+import { Link as v } from "./link.js";
+import { NAV_ITEM_CLASS as y, NAV_LIST_CLASS as b, NAV_ROW_CLASS as x } from "../utils/navigation.js";
+import { createContext as S, useCallback as C, useContext as w, useLayoutEffect as T, useRef as E, useState as D } from "react";
+import { Slot as O } from "@radix-ui/react-slot";
+import { ChevronUp as k, PanelLeft as A, Search as j } from "lucide-react";
+import { jsx as M, jsxs as N } from "react/jsx-runtime";
+import * as P from "@radix-ui/react-dialog";
+// src/components/sidebar.tsx
+var F = S(null);
+function I() {
+	let e = w(F);
 	if (!e) throw Error("useSidebar must be used within SidebarProvider");
 	return e;
 }
-function k({ collapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, side: r = "left", loading: i = !1, peek: a = !1, overlay: o = !1, defaultWidth: s = 260, children: c }) {
-	let [l, u] = x(t), [d, f] = x(!1), [p, m] = x(() => A(s)), h = _((e) => {
-		m(A(e));
-	}, []), g = b(null), v = b(e ?? t), S = b(o), C = e ?? l;
-	y(() => {
-		o && !C && (v.current || !S.current) && document.activeElement instanceof HTMLElement && (g.current = document.activeElement), v.current = C, S.current = o;
+function L({ collapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, side: r = "left", loading: i = !1, peek: a = !1, overlay: o = !1, defaultWidth: s = 260, children: c }) {
+	let [l, u] = D(t), [d, f] = D(!1), [p, m] = D(() => R(s)), h = C((e) => {
+		m(R(e));
+	}, []), g = E(null), _ = E(e ?? t), v = E(o), y = e ?? l;
+	T(() => {
+		o && !y && (_.current || !v.current) && document.activeElement instanceof HTMLElement && (g.current = document.activeElement), _.current = y, v.current = o;
 	});
-	let T = _((t) => {
+	let b = C((t) => {
 		!t && document.activeElement instanceof HTMLElement && (g.current = document.activeElement), e === void 0 && u(t), n?.(t);
 	}, [e, n]);
-	return /* @__PURE__ */ w(D.Provider, {
+	return /* @__PURE__ */ M(F.Provider, {
 		value: {
-			collapsed: C,
-			setCollapsed: T,
+			collapsed: y,
+			setCollapsed: b,
 			side: r,
 			loading: i,
 			peek: a,
@@ -45,11 +49,11 @@ function k({ collapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, side:
 		children: c
 	});
 }
-function A(e) {
+function R(e) {
 	return Math.min(400, Math.max(180, e));
 }
-function j({ side: t, width: n, onWidth: r }) {
-	return /* @__PURE__ */ w("div", {
+function z({ side: t, width: n, onWidth: r }) {
+	return /* @__PURE__ */ M("div", {
 		role: "separator",
 		"aria-orientation": "vertical",
 		"aria-valuenow": n,
@@ -62,7 +66,7 @@ function j({ side: t, width: n, onWidth: r }) {
 			e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId);
 			let i = e.clientX, a = n, o = e.currentTarget, s = (e) => {
 				let n = t === "right" ? i - e.clientX : e.clientX - i;
-				r(A(a + n));
+				r(R(a + n));
 			}, c = () => {
 				o.removeEventListener("pointermove", s), o.removeEventListener("pointerup", c), o.removeEventListener("pointercancel", c);
 			};
@@ -72,47 +76,47 @@ function j({ side: t, width: n, onWidth: r }) {
 			if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 			e.preventDefault();
 			let i = e.key === "ArrowRight" ? 1 : -1;
-			r(A(n + (t === "right" ? -i * 8 : i * 8)));
+			r(R(n + (t === "right" ? -i * 8 : i * 8)));
 		}
 	});
 }
-function M({ collapsed: n, className: c, children: l, onMouseEnter: u, onMouseLeave: d, style: p, ...m }) {
-	let h = v(D), g = h ? h.collapsed && !(h.peek && h.peeking) : n ?? !1, _ = h?.side ?? "left", y = h?.overlay ?? !1, b = h?.width ?? 260, x = h?.loading ? /* @__PURE__ */ T("div", {
-		className: "flex flex-col gap-basalt-space-lg p-basalt-space-lg",
+function B({ collapsed: n, resizable: a = !0, className: l, children: u, onMouseEnter: d, onMouseLeave: f, style: p, ...m }) {
+	let h = w(F), g = h ? h.collapsed && !(h.peek && h.peeking) : n ?? !1, v = h?.side ?? "left", y = h?.overlay ?? !1, b = h?.width ?? 260, x = h?.loading ? /* @__PURE__ */ N("div", {
+		className: "flex flex-col gap-basalt-space-lg px-basalt-layout-lg py-basalt-space-lg",
 		role: "status",
 		"aria-live": "polite",
 		children: [
-			/* @__PURE__ */ w(f, {}),
-			/* @__PURE__ */ w(f, {}),
-			/* @__PURE__ */ w(f, {})
+			/* @__PURE__ */ M(_, {}),
+			/* @__PURE__ */ M(_, {}),
+			/* @__PURE__ */ M(_, {})
 		]
-	}) : l, S = h && !g ? /* @__PURE__ */ w(j, {
-		side: _,
+	}) : u, S = h && a && !g ? /* @__PURE__ */ M(z, {
+		side: v,
 		width: h.width,
 		onWidth: h.setWidth
-	}) : null, C = e(t, "relative flex shrink-0 flex-col bg-basalt-background text-basalt-base text-basalt-foreground", i, c);
-	return y && h ? /* @__PURE__ */ w(a, {
+	}) : null, C = e(t, "relative flex shrink-0 flex-col bg-basalt-background text-basalt-base text-basalt-foreground", i, l);
+	return y && h ? /* @__PURE__ */ M(o, {
 		open: !h.collapsed,
 		onOpenChange: (e) => h.setCollapsed(!e),
-		children: /* @__PURE__ */ T(s, { children: [/* @__PURE__ */ w(o, {}), /* @__PURE__ */ T(E.Content, {
+		children: /* @__PURE__ */ N(c, { children: [/* @__PURE__ */ M(s, {}), /* @__PURE__ */ N(P.Content, {
 			"data-basalt-sidebar": "",
 			"aria-label": "Sidebar",
 			"data-overlay": "",
-			"data-side": _,
+			"data-side": v,
 			"aria-busy": h.loading || void 0,
-			onMouseEnter: u,
-			onMouseLeave: d,
+			onMouseEnter: d,
+			onMouseLeave: f,
 			ref: (e) => {
 				e && document.activeElement instanceof HTMLElement && !e.contains(document.activeElement) && (h.lastFocusRef.current = document.activeElement);
 			},
 			onOpenAutoFocus: (e) => {
 				let t = "relatedTarget" in e ? e.relatedTarget : null;
-				t instanceof HTMLElement && (h.lastFocusRef.current = t);
+				t instanceof HTMLElement && (h.lastFocusRef.current = t), e.target instanceof HTMLElement && (e.preventDefault(), e.target.focus());
 			},
 			onCloseAutoFocus: (e) => {
 				e.preventDefault(), h.lastFocusRef.current?.focus();
 			},
-			className: e(C, r, "fixed inset-y-0 overflow-hidden shadow-md", _ === "right" ? "right-0" : "left-0"),
+			className: e(C, r, "fixed inset-y-0 overflow-hidden shadow-md", v === "right" ? "right-0" : "left-0"),
 			style: {
 				width: b,
 				...p
@@ -120,18 +124,18 @@ function M({ collapsed: n, className: c, children: l, onMouseEnter: u, onMouseLe
 			...m,
 			children: [x, S]
 		})] })
-	}) : /* @__PURE__ */ T("aside", {
+	}) : /* @__PURE__ */ N("aside", {
 		"data-basalt-sidebar": "",
 		"data-collapsed": g ? "" : void 0,
-		"data-side": _,
+		"data-side": v,
 		"aria-busy": h?.loading || void 0,
 		onMouseEnter: (e) => {
-			h?.peek && h.collapsed && h.setPeeking(!0), u?.(e);
+			h?.peek && h.collapsed && h.setPeeking(!0), d?.(e);
 		},
 		onMouseLeave: (e) => {
-			h?.peek && h.setPeeking(!1), d?.(e);
+			h?.peek && h.setPeeking(!1), f?.(e);
 		},
-		className: e(C, "sticky overflow-hidden transition-[width] basalt-motion duration-basalt-normal ease-basalt", _ === "right" ? "order-last" : void 0, g && "w-basalt-rail"),
+		className: e(C, "sticky overflow-hidden transition-[width] basalt-motion duration-basalt-normal ease-basalt", v === "right" ? "order-last" : void 0, g && "w-basalt-rail"),
 		style: g ? p : {
 			width: b,
 			...p
@@ -140,121 +144,219 @@ function M({ collapsed: n, className: c, children: l, onMouseEnter: u, onMouseLe
 		children: [x, S]
 	});
 }
-var N = "min-h-[calc(var(--basalt-line-row)+2*var(--basalt-space-lg))] py-basalt-space-lg";
-function P({ className: t, ...n }) {
-	return /* @__PURE__ */ w("div", {
+var V = "min-h-[calc(var(--basalt-line-row)+2*var(--basalt-space-lg))] py-basalt-space-lg";
+function H({ className: t, ...n }) {
+	return /* @__PURE__ */ M("div", {
 		"data-slot": "sidebar-header",
-		className: e("flex h-basalt-14 shrink-0 items-center gap-basalt-row-gap px-basalt-nav-inset", t),
+		className: e("flex h-basalt-14 shrink-0 items-center gap-basalt-row-gap px-basalt-layout-lg", t),
 		...n
 	});
 }
-function F({ shortcut: n = "⌘K", className: r, children: i, ...a }) {
-	return /* @__PURE__ */ T("button", {
+function U({ logo: t, name: n, version: r, action: i, className: a, ...o }) {
+	return /* @__PURE__ */ N("div", {
+		"data-slot": "sidebar-brand",
+		className: e("relative flex h-full min-w-0 flex-1 items-center gap-basalt-row-gap", a),
+		...o,
+		children: [
+			/* @__PURE__ */ M("span", {
+				"data-slot": "sidebar-brand-logo",
+				className: "flex w-basalt-sidebar-brand-slot shrink-0 items-center justify-center",
+				children: t
+			}),
+			/* @__PURE__ */ N("div", {
+				className: "flex min-w-0 flex-1 items-center gap-basalt-row-gap overflow-hidden whitespace-nowrap",
+				children: [/* @__PURE__ */ M("span", {
+					className: "min-w-0 flex-1 truncate text-basalt-base font-semibold",
+					children: n
+				}), r == null ? null : /* @__PURE__ */ M("span", {
+					className: "shrink-0 text-basalt-sm text-basalt-muted-foreground",
+					children: r
+				})]
+			}),
+			i ? /* @__PURE__ */ M("div", {
+				"data-slot": "sidebar-brand-action",
+				className: "basalt-sidebar-brand-action",
+				children: i
+			}) : null
+		]
+	});
+}
+function W({ "aria-label": e, expandLabel: t = "Expand sidebar", collapseLabel: n = "Collapse sidebar", onClick: r, variant: i = "ghost", ...o }) {
+	let { collapsed: s, setCollapsed: c, side: l } = I(), u = e ?? (s ? t : n);
+	return /* @__PURE__ */ M(h, { children: /* @__PURE__ */ N(p, { children: [/* @__PURE__ */ M(g, {
+		asChild: !0,
+		children: /* @__PURE__ */ M(a, {
+			...o,
+			variant: i,
+			size: "icon-sm",
+			"aria-expanded": !s,
+			"aria-label": u,
+			onClick: (e) => {
+				r?.(e), e.defaultPrevented || c(!s);
+			},
+			children: /* @__PURE__ */ M(A, { "aria-hidden": "true" })
+		})
+	}), /* @__PURE__ */ M(m, {
+		side: l === "right" ? "left" : "right",
+		children: u
+	})] }) });
+}
+function G({ shortcut: n = "⌘K", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ N("button", {
 		type: "button",
-		className: e(t, h, N, "w-full cursor-pointer bg-basalt-secondary transition-colors basalt-motion hover:bg-basalt-hover", r),
+		className: e(t, x, V, "w-full cursor-pointer bg-basalt-secondary transition-colors basalt-motion hover:bg-basalt-hover", r),
 		...a,
 		children: [
-			/* @__PURE__ */ w(C, {
+			/* @__PURE__ */ M(j, {
 				className: "h-basalt-4 w-basalt-4 text-basalt-muted-foreground",
 				strokeWidth: 1.5
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ M("span", {
 				className: "flex-1 text-left text-basalt-base text-basalt-muted-foreground",
 				children: i
 			}),
-			/* @__PURE__ */ w("kbd", {
+			/* @__PURE__ */ M("kbd", {
 				className: "pointer-events-none hidden rounded-basalt-sm border border-basalt-border bg-basalt-card px-basalt-space-md py-basalt-space-xs text-basalt-sm font-medium text-basalt-muted-foreground sm:inline-block",
 				children: n
 			})
 		]
 	});
 }
-function I({ className: t, ...n }) {
-	let r = d(void 0, { restoreOnPointerLeave: !1 });
-	return /* @__PURE__ */ w("nav", {
+function K({ className: t, ...n }) {
+	let r = f(void 0, { restoreOnPointerLeave: !1 });
+	return /* @__PURE__ */ M("nav", {
 		ref: r,
 		"data-slot": "sidebar-nav",
-		className: e(m, "min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain", t),
+		className: e(b, "basalt-sidebar-nav min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain", t),
 		...n
 	});
 }
-function L({ className: t, ...n }) {
-	return /* @__PURE__ */ w("p", {
+function q({ className: t, ...n }) {
+	return /* @__PURE__ */ M("p", {
 		"data-slot": "sidebar-partition",
 		className: e("shrink-0 px-basalt-row-x pt-basalt-layout pb-basalt-space-lg text-basalt-sm font-semibold tracking-wide text-basalt-foreground uppercase", t),
 		...n
 	});
 }
-function R({ active: t = !1, className: n, ...r }) {
-	return /* @__PURE__ */ w("button", {
-		type: "button",
-		"aria-current": t ? "page" : void 0,
+function J(e) {
+	if (e.asChild && e.disabled) throw Error("Sidebar asChild rows do not support disabled; use a native button row");
+}
+function Y(t) {
+	J(t);
+	let n = e(y, V, "w-full text-inherit no-underline hover:no-underline", t.className);
+	if (typeof t.href == "string") {
+		let { href: e, active: r = !1, children: i, className: a, ...o } = t;
+		return /* @__PURE__ */ M(v, {
+			...o,
+			href: e,
+			"aria-current": r ? "page" : void 0,
+			"data-basalt-hover-item": "",
+			"data-sidebar-row": "",
+			"data-hover-selected": r,
+			className: n,
+			children: i
+		});
+	}
+	let { asChild: r = !1, type: i = "button", active: a = !1, children: o, className: s, ...c } = t, l = {
+		"aria-current": a ? "page" : void 0,
 		"data-basalt-hover-item": "",
 		"data-sidebar-row": "",
-		"data-hover-selected": t,
-		className: e(p, N, "w-full", n),
-		...r
+		"data-hover-selected": a,
+		className: n
+	};
+	return r ? /* @__PURE__ */ M(O, {
+		...c,
+		...l,
+		children: o
+	}) : /* @__PURE__ */ M("button", {
+		...c,
+		type: i,
+		...l,
+		children: o
 	});
 }
-function z({ active: t = !1, className: n, ...r }) {
-	return /* @__PURE__ */ w("button", {
-		type: "button",
-		"aria-current": t ? "page" : void 0,
+function X(t) {
+	J(t);
+	let n = e(y, V, "relative w-basalt-control justify-center text-inherit no-underline hover:no-underline", t.className);
+	if (typeof t.href == "string") {
+		let { href: e, active: r = !1, children: i, className: a, ...o } = t;
+		return /* @__PURE__ */ M(v, {
+			...o,
+			href: e,
+			"aria-current": r ? "page" : void 0,
+			"data-basalt-hover-item": "",
+			"data-sidebar-row": "",
+			"data-hover-selected": r,
+			className: n,
+			children: i
+		});
+	}
+	let { asChild: r = !1, type: i = "button", active: a = !1, children: o, className: s, ...c } = t, l = {
+		"aria-current": a ? "page" : void 0,
 		"data-basalt-hover-item": "",
 		"data-sidebar-row": "",
-		"data-hover-selected": t,
-		className: e(p, N, "relative w-basalt-control justify-center", n),
-		...r
+		"data-hover-selected": a,
+		className: n
+	};
+	return r ? /* @__PURE__ */ M(O, {
+		...c,
+		...l,
+		children: o
+	}) : /* @__PURE__ */ M("button", {
+		...c,
+		type: i,
+		...l,
+		children: o
 	});
 }
-function B({ label: t, defaultOpen: r = !0, children: a }) {
-	let [o, s] = x(r);
-	return /* @__PURE__ */ T(c, {
+function Z({ label: t, defaultOpen: r = !0, children: a }) {
+	let [o, s] = D(r);
+	return /* @__PURE__ */ N(l, {
 		open: o,
 		onOpenChange: s,
 		"data-slot": "sidebar-group",
 		className: "shrink-0 pt-basalt-layout-sm",
-		children: [/* @__PURE__ */ w(u, {
+		children: [/* @__PURE__ */ M(d, {
 			asChild: !0,
-			children: /* @__PURE__ */ T("button", {
+			children: /* @__PURE__ */ N("button", {
 				type: "button",
 				"data-slot": "sidebar-group-label",
 				className: e("flex w-full cursor-pointer items-center justify-between gap-basalt-row-gap rounded-basalt-md px-basalt-row-x py-basalt-space-lg text-left text-basalt-sm font-semibold leading-basalt-row tracking-wide text-basalt-muted-foreground uppercase transition-colors basalt-motion hover:text-basalt-foreground", n),
-				children: [/* @__PURE__ */ w("span", {
+				children: [/* @__PURE__ */ M("span", {
 					className: "min-w-0 truncate",
 					children: t
-				}), /* @__PURE__ */ w(S, {
+				}), /* @__PURE__ */ M(k, {
 					className: e("h-basalt-4 w-basalt-4 text-basalt-muted-foreground transition-transform basalt-motion duration-basalt-normal", i, !o && "rotate-180"),
 					strokeWidth: 1.5
 				})]
 			})
-		}), /* @__PURE__ */ w(l, {
+		}), /* @__PURE__ */ M(u, {
 			unstyled: !0,
-			children: /* @__PURE__ */ w("div", {
+			children: /* @__PURE__ */ M("div", {
 				className: "flex flex-col gap-basalt-nav-gap pt-basalt-nav-gap",
 				children: a
 			})
 		})]
 	});
 }
-function V({ className: t, ...n }) {
-	return /* @__PURE__ */ w("div", {
+function Q({ className: t, ...n }) {
+	return /* @__PURE__ */ M("div", {
 		"data-slot": "sidebar-footer",
-		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-nav-inset py-basalt-nav-inset", t),
+		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-layout-lg pt-basalt-space-lg pb-basalt-layout", t),
 		...n
 	});
 }
-function H({ name: t, email: n, avatar: r, action: i, className: a }) {
-	return /* @__PURE__ */ T("div", {
+function $({ name: t, email: n, avatar: r, action: i, className: a }) {
+	return /* @__PURE__ */ N("div", {
 		className: e("flex items-center gap-basalt-space-lg", a),
 		children: [
 			r,
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ N("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ w("p", {
+				children: [/* @__PURE__ */ M("p", {
 					className: "truncate text-basalt-base font-medium text-basalt-foreground",
 					children: t
-				}), n ? /* @__PURE__ */ w("p", {
+				}), n ? /* @__PURE__ */ M("p", {
 					className: "truncate text-basalt-sm text-basalt-muted-foreground",
 					children: n
 				}) : null]
@@ -263,15 +365,14 @@ function H({ name: t, email: n, avatar: r, action: i, className: a }) {
 		]
 	});
 }
-function U({ mobileSurface: t = "inset", className: n, ...r }) {
-	return /* @__PURE__ */ w("div", {
+function ee({ mobileSurface: t = "inset", className: n, ...r }) {
+	return /* @__PURE__ */ M("div", {
 		"data-basalt-surface-root": "",
 		"data-basalt-island": t,
 		className: e("min-h-0 min-w-0 flex-1 bg-basalt-card text-basalt-card-foreground md:rounded-basalt-island md:p-basalt-layout-lg lg:px-basalt-layout-xl", t === "inset" ? "rounded-basalt-lg p-basalt-layout shadow-sm ring-1 ring-basalt-border/40" : "md:shadow-sm md:ring-1 md:ring-basalt-border/40", n),
 		...r
 	});
 }
-//#endregion
-export { U as ContentIsland, M as Sidebar, V as SidebarFooter, B as SidebarGroup, P as SidebarHeader, z as SidebarIconItem, R as SidebarItem, I as SidebarNav, L as SidebarPartition, k as SidebarProvider, F as SidebarSearch, H as SidebarUser, O as useSidebar };
+export { ee as ContentIsland, B as Sidebar, U as SidebarBrand, Q as SidebarFooter, Z as SidebarGroup, H as SidebarHeader, X as SidebarIconItem, Y as SidebarItem, K as SidebarNav, q as SidebarPartition, L as SidebarProvider, G as SidebarSearch, W as SidebarToggle, $ as SidebarUser, I as useSidebar };
 
 //# sourceMappingURL=sidebar.js.map