beez-ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -4,6 +4,10 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [0.11.0] - 2026-10-03
+
+- 859b7a6 agrega mejoras al sidebar y persistencia de estado
+
 ## [0.10.0] - 2026-10-03
 
 - 6769ea7 agrega funcionalidad de persistencia y animación al sidebar

package/README.md

@@ -162,7 +162,7 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
 
 - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
 - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
-- Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
+- Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración; `cookieName` y `cookieMaxAge` la reemplazan cuando la app ya lee su propia cookie en el servidor. Para el contenido propio: `SidebarBrandButton` arma la fila de marca (sirve como `DropdownMenuTrigger asChild`), `SidebarLabel` saca del riel de íconos el texto que solo tiene sentido expandido, `useSidebarPanel()` expone `collapsed` y `AccountMenu` con `triggerVariant="sidebar"` se reduce solo al avatar. No dependas de los atributos `data-*` internos del sidebar: pueden cambiar entre versiones.
 - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
 
 ## Componentes incorporados desde agenda-mensual

package/dist/components/account-menu.d.ts

@@ -10,7 +10,7 @@ export interface AccountMenuLabels {
 export interface AccountMenuClassNames {
     trigger?: string;
     triggerAvatar?: string;
-    /** Name and email block of the `sidebar` trigger, for example to hide it in a collapsed sidebar. */
+    /** Name and email block of the `sidebar` trigger; it already leaves the icon rail of a collapsed `Sidebar`. */
     triggerText?: string;
     triggerName?: string;
     triggerEmail?: string;
@@ -40,7 +40,10 @@ export interface AccountMenuProps {
     onSignIn?: () => void;
     /** Navigates to a sign-in page through the configured router adapter instead of calling `onSignIn`. */
     signInHref?: string;
-    /** `avatar` shows only the avatar; `sidebar` also shows name, email and a chevron. */
+    /**
+     * `avatar` shows only the avatar; `sidebar` also shows name, email and a chevron, and inside the
+     * icon rail of a collapsed `Sidebar` shrinks to the centered avatar.
+     */
     triggerVariant?: "avatar" | "sidebar";
     /** Adds a connected/disconnected badge to the avatar and greys it out while signed out. */
     showStatusBadge?: boolean;

package/dist/components/account-menu.js

@@ -6,6 +6,7 @@ import { getNameInitials } from "../lib/name-initials.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "./avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { Link } from "./link.js";
+import { useOptionalSidebarPanel } from "./sidebar-panel-context.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ACCOUNT_MENU_DEFAULT_LABELS = {
@@ -105,7 +106,7 @@ function AccountAvatar(t0) {
 * @returns The trigger and its menu.
 */
 export function AccountMenu(t0) {
-	const $ = _c(79);
+	const $ = _c(80);
 	const { name, email, status, image: t1, avatarFallback, onSignOut, signOutDisabled: t2, onSignIn, signInHref, triggerVariant: t3, showStatusBadge: t4, tooltipLabel, labels, classNames, align: t5, side: t6, sideOffset: t7, children } = t0;
 	const image = t1 === undefined ? null : t1;
 	const signOutDisabled = t2 === undefined ? false : t2;
@@ -158,34 +159,38 @@ export function AccountMenu(t0) {
 		t10 = $[11];
 	}
 	const avatarProps = t10;
+	const sidebarPanel = useOptionalSidebarPanel();
+	const showsSidebarIdentity = triggerVariant === "sidebar" && !sidebarPanel?.collapsed;
 	const t11 = resolvedLabels.trigger;
 	const t12 = triggerVariant === "sidebar" && "w-full min-w-0 gap-2.5 rounded-lg p-1.5 text-left";
-	const t13 = classNames?.trigger;
-	let t14;
-	if ($[12] !== t12 || $[13] !== t13) {
-		t14 = cn("inline-flex items-center rounded-full outline-none [-webkit-tap-highlight-color:transparent] transition-[box-shadow,opacity,transform] hover:opacity-90 active:scale-[0.96] focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)] data-[state=open]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", t12, t13);
+	const t13 = triggerVariant === "sidebar" && !showsSidebarIdentity && "justify-center gap-0";
+	const t14 = classNames?.trigger;
+	let t15;
+	if ($[12] !== t12 || $[13] !== t13 || $[14] !== t14) {
+		t15 = cn("inline-flex items-center rounded-full outline-none [-webkit-tap-highlight-color:transparent] transition-[box-shadow,opacity,transform] hover:opacity-90 active:scale-[0.96] focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)] data-[state=open]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", t12, t13, t14);
 		$[12] = t12;
 		$[13] = t13;
 		$[14] = t14;
+		$[15] = t15;
 	} else {
-		t14 = $[14];
+		t15 = $[15];
 	}
-	const t15 = classNames?.triggerAvatar;
-	let t16;
-	if ($[15] !== avatarProps || $[16] !== t15) {
-		t16 = /* @__PURE__ */ _jsx(AccountAvatar, {
+	const t16 = classNames?.triggerAvatar;
+	let t17;
+	if ($[16] !== avatarProps || $[17] !== t16) {
+		t17 = /* @__PURE__ */ _jsx(AccountAvatar, {
 			...avatarProps,
-			className: t15
+			className: t16
 		});
-		$[15] = avatarProps;
-		$[16] = t15;
+		$[16] = avatarProps;
 		$[17] = t16;
+		$[18] = t17;
 	} else {
-		t16 = $[17];
+		t17 = $[18];
 	}
-	let t17;
-	if ($[18] !== classNames?.triggerChevron || $[19] !== classNames?.triggerEmail || $[20] !== classNames?.triggerName || $[21] !== classNames?.triggerText || $[22] !== email || $[23] !== name || $[24] !== triggerVariant) {
-		t17 = triggerVariant === "sidebar" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("span", {
+	let t18;
+	if ($[19] !== classNames?.triggerChevron || $[20] !== classNames?.triggerEmail || $[21] !== classNames?.triggerName || $[22] !== classNames?.triggerText || $[23] !== email || $[24] !== name || $[25] !== showsSidebarIdentity) {
+		t18 = showsSidebarIdentity ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("span", {
 			className: cn("grid min-w-0 flex-1", classNames?.triggerText),
 			children: [/* @__PURE__ */ _jsx("span", {
 				className: cn("truncate text-sm font-semibold", classNames?.triggerName),
@@ -198,142 +203,142 @@ export function AccountMenu(t0) {
 			"aria-hidden": "true",
 			className: cn("size-4 shrink-0 text-muted-foreground", classNames?.triggerChevron)
 		})] }) : null;
-		$[18] = classNames?.triggerChevron;
-		$[19] = classNames?.triggerEmail;
-		$[20] = classNames?.triggerName;
-		$[21] = classNames?.triggerText;
-		$[22] = email;
-		$[23] = name;
-		$[24] = triggerVariant;
-		$[25] = t17;
+		$[19] = classNames?.triggerChevron;
+		$[20] = classNames?.triggerEmail;
+		$[21] = classNames?.triggerName;
+		$[22] = classNames?.triggerText;
+		$[23] = email;
+		$[24] = name;
+		$[25] = showsSidebarIdentity;
+		$[26] = t18;
 	} else {
-		t17 = $[25];
+		t18 = $[26];
 	}
-	let t18;
-	if ($[26] !== resolvedLabels.trigger || $[27] !== t14 || $[28] !== t16 || $[29] !== t17 || $[30] !== triggerVariant) {
+	let t19;
+	if ($[27] !== resolvedLabels.trigger || $[28] !== t15 || $[29] !== t17 || $[30] !== t18 || $[31] !== triggerVariant) {
 		const triggerButton = /* @__PURE__ */ _jsxs("button", {
 			"data-slot": "account-menu-trigger",
 			"data-variant": triggerVariant,
 			"aria-label": t11,
 			type: "button",
-			className: t14,
-			children: [t16, t17]
+			className: t15,
+			children: [t17, t18]
 		});
-		t18 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+		t19 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
 			asChild: true,
 			children: triggerButton
 		});
-		$[26] = resolvedLabels.trigger;
-		$[27] = t14;
-		$[28] = t16;
+		$[27] = resolvedLabels.trigger;
+		$[28] = t15;
 		$[29] = t17;
-		$[30] = triggerVariant;
-		$[31] = t18;
+		$[30] = t18;
+		$[31] = triggerVariant;
+		$[32] = t19;
 	} else {
-		t18 = $[31];
+		t19 = $[32];
 	}
-	const trigger = t18;
-	let t19;
-	if ($[32] !== tooltipLabel || $[33] !== trigger) {
-		t19 = tooltipLabel ? /* @__PURE__ */ _jsx(TooltipTrigger, {
+	const trigger = t19;
+	let t20;
+	if ($[33] !== tooltipLabel || $[34] !== trigger) {
+		t20 = tooltipLabel ? /* @__PURE__ */ _jsx(TooltipTrigger, {
 			asChild: true,
 			children: trigger
 		}) : trigger;
-		$[32] = tooltipLabel;
-		$[33] = trigger;
-		$[34] = t19;
+		$[33] = tooltipLabel;
+		$[34] = trigger;
+		$[35] = t20;
 	} else {
-		t19 = $[34];
+		t20 = $[35];
 	}
-	const t20 = classNames?.content;
-	let t21;
-	if ($[35] !== t20) {
-		t21 = cn("min-w-56", t20);
-		$[35] = t20;
+	const t21 = classNames?.content;
+	let t22;
+	if ($[36] !== t21) {
+		t22 = cn("min-w-56", t21);
 		$[36] = t21;
+		$[37] = t22;
 	} else {
-		t21 = $[36];
+		t22 = $[37];
 	}
-	const t22 = classNames?.header;
-	let t23;
-	if ($[37] !== t22) {
-		t23 = cn("grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5", t22);
-		$[37] = t22;
+	const t23 = classNames?.header;
+	let t24;
+	if ($[38] !== t23) {
+		t24 = cn("grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5", t23);
 		$[38] = t23;
+		$[39] = t24;
 	} else {
-		t23 = $[38];
+		t24 = $[39];
 	}
-	const t24 = classNames?.headerAvatar;
-	let t25;
-	if ($[39] !== avatarProps || $[40] !== t24) {
-		t25 = /* @__PURE__ */ _jsx(AccountAvatar, {
+	const t25 = classNames?.headerAvatar;
+	let t26;
+	if ($[40] !== avatarProps || $[41] !== t25) {
+		t26 = /* @__PURE__ */ _jsx(AccountAvatar, {
 			...avatarProps,
 			isDecorative: true,
-			className: t24
+			className: t25
 		});
-		$[39] = avatarProps;
-		$[40] = t24;
+		$[40] = avatarProps;
 		$[41] = t25;
+		$[42] = t26;
 	} else {
-		t25 = $[41];
+		t26 = $[42];
 	}
-	let t26;
-	if ($[42] !== name) {
-		t26 = /* @__PURE__ */ _jsx("span", {
+	let t27;
+	if ($[43] !== name) {
+		t27 = /* @__PURE__ */ _jsx("span", {
 			className: "truncate text-sm leading-tight font-semibold",
 			children: name
 		});
-		$[42] = name;
-		$[43] = t26;
+		$[43] = name;
+		$[44] = t27;
 	} else {
-		t26 = $[43];
+		t27 = $[44];
 	}
-	let t27;
-	if ($[44] !== email) {
-		t27 = /* @__PURE__ */ _jsx("span", {
+	let t28;
+	if ($[45] !== email) {
+		t28 = /* @__PURE__ */ _jsx("span", {
 			className: "truncate text-xs leading-tight text-muted-foreground",
 			children: email
 		});
-		$[44] = email;
-		$[45] = t27;
+		$[45] = email;
+		$[46] = t28;
 	} else {
-		t27 = $[45];
+		t28 = $[46];
 	}
-	let t28;
-	if ($[46] !== t26 || $[47] !== t27) {
-		t28 = /* @__PURE__ */ _jsxs("span", {
+	let t29;
+	if ($[47] !== t27 || $[48] !== t28) {
+		t29 = /* @__PURE__ */ _jsxs("span", {
 			className: "grid min-w-0 gap-px",
-			children: [t26, t27]
+			children: [t27, t28]
 		});
-		$[46] = t26;
 		$[47] = t27;
 		$[48] = t28;
+		$[49] = t29;
 	} else {
-		t28 = $[48];
+		t29 = $[49];
 	}
-	let t29;
-	if ($[49] !== t23 || $[50] !== t25 || $[51] !== t28) {
-		t29 = /* @__PURE__ */ _jsxs("div", {
-			className: t23,
-			children: [t25, t28]
+	let t30;
+	if ($[50] !== t24 || $[51] !== t26 || $[52] !== t29) {
+		t30 = /* @__PURE__ */ _jsxs("div", {
+			className: t24,
+			children: [t26, t29]
 		});
-		$[49] = t23;
-		$[50] = t25;
-		$[51] = t28;
+		$[50] = t24;
+		$[51] = t26;
 		$[52] = t29;
-	} else {
-		t29 = $[52];
-	}
-	let t30;
-	if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
-		t30 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
 		$[53] = t30;
 	} else {
 		t30 = $[53];
 	}
 	let t31;
-	if ($[54] !== classNames?.item || $[55] !== isAuthenticated || $[56] !== onSignIn || $[57] !== onSignOut || $[58] !== resolvedLabels.signIn || $[59] !== resolvedLabels.signOut || $[60] !== signInHref || $[61] !== signOutDisabled) {
-		t31 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+	if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+		t31 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
+		$[54] = t31;
+	} else {
+		t31 = $[54];
+	}
+	let t32;
+	if ($[55] !== classNames?.item || $[56] !== isAuthenticated || $[57] !== onSignIn || $[58] !== onSignOut || $[59] !== resolvedLabels.signIn || $[60] !== resolvedLabels.signOut || $[61] !== signInHref || $[62] !== signOutDisabled) {
+		t32 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
 			className: classNames?.item,
 			disabled: signOutDisabled,
 			onSelect: () => void onSignOut(),
@@ -350,77 +355,77 @@ export function AccountMenu(t0) {
 			onSelect: () => onSignIn?.(),
 			children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
 		});
-		$[54] = classNames?.item;
-		$[55] = isAuthenticated;
-		$[56] = onSignIn;
-		$[57] = onSignOut;
-		$[58] = resolvedLabels.signIn;
-		$[59] = resolvedLabels.signOut;
-		$[60] = signInHref;
-		$[61] = signOutDisabled;
-		$[62] = t31;
+		$[55] = classNames?.item;
+		$[56] = isAuthenticated;
+		$[57] = onSignIn;
+		$[58] = onSignOut;
+		$[59] = resolvedLabels.signIn;
+		$[60] = resolvedLabels.signOut;
+		$[61] = signInHref;
+		$[62] = signOutDisabled;
+		$[63] = t32;
 	} else {
-		t31 = $[62];
+		t32 = $[63];
 	}
-	let t32;
-	if ($[63] !== align || $[64] !== children || $[65] !== side || $[66] !== sideOffset || $[67] !== t21 || $[68] !== t29 || $[69] !== t31) {
-		t32 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+	let t33;
+	if ($[64] !== align || $[65] !== children || $[66] !== side || $[67] !== sideOffset || $[68] !== t22 || $[69] !== t30 || $[70] !== t32) {
+		t33 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
 			"data-slot": "account-menu-content",
 			align,
 			side,
 			sideOffset,
-			className: t21,
+			className: t22,
 			children: [
-				t29,
 				t30,
+				t31,
 				children,
-				t31
+				t32
 			]
 		});
-		$[63] = align;
-		$[64] = children;
-		$[65] = side;
-		$[66] = sideOffset;
-		$[67] = t21;
-		$[68] = t29;
-		$[69] = t31;
+		$[64] = align;
+		$[65] = children;
+		$[66] = side;
+		$[67] = sideOffset;
+		$[68] = t22;
+		$[69] = t30;
 		$[70] = t32;
+		$[71] = t33;
 	} else {
-		t32 = $[70];
+		t33 = $[71];
 	}
-	let t33;
-	if ($[71] !== t19 || $[72] !== t32) {
-		t33 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t19, t32] });
-		$[71] = t19;
-		$[72] = t32;
+	let t34;
+	if ($[72] !== t20 || $[73] !== t33) {
+		t34 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t20, t33] });
+		$[72] = t20;
 		$[73] = t33;
+		$[74] = t34;
 	} else {
-		t33 = $[73];
+		t34 = $[74];
 	}
-	const menu = t33;
+	const menu = t34;
 	if (!tooltipLabel) {
 		return menu;
 	}
-	let t34;
-	if ($[74] !== tooltipLabel) {
-		t34 = /* @__PURE__ */ _jsx(TooltipContent, {
+	let t35;
+	if ($[75] !== tooltipLabel) {
+		t35 = /* @__PURE__ */ _jsx(TooltipContent, {
 			side: "bottom",
 			sideOffset: 8,
 			children: tooltipLabel
 		});
-		$[74] = tooltipLabel;
-		$[75] = t34;
+		$[75] = tooltipLabel;
+		$[76] = t35;
 	} else {
-		t34 = $[75];
+		t35 = $[76];
 	}
-	let t35;
-	if ($[76] !== menu || $[77] !== t34) {
-		t35 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t34] });
-		$[76] = menu;
-		$[77] = t34;
+	let t36;
+	if ($[77] !== menu || $[78] !== t35) {
+		t36 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t35] });
+		$[77] = menu;
 		$[78] = t35;
+		$[79] = t36;
 	} else {
-		t35 = $[78];
+		t36 = $[79];
 	}
-	return t35;
+	return t36;
 }

package/dist/components/sidebar-panel-context.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal: panel state shared by the sidebar parts and by components that adapt to the icon rail
+ * (such as `AccountMenu`), kept apart so they can read it without importing the sidebar itself.
+ */
+import * as React from "react";
+export type SidebarPanelState = {
+    /** Whether the desktop sidebar is shrunk to its icon rail; always false in the mobile sheet. */
+    collapsed: boolean;
+    collapsible: "offcanvas" | "icon" | "none";
+    side: "left" | "right";
+};
+export declare const SidebarPanelContext: React.Context<SidebarPanelState | null>;
+/**
+ * Reads the panel state when rendered inside a `Sidebar`, and `null` anywhere else.
+ * @returns The panel state, or `null` outside a sidebar.
+ */
+export declare function useOptionalSidebarPanel(): SidebarPanelState | null;

package/dist/components/sidebar-panel-context.js

@@ -0,0 +1,14 @@
+"use client";
+/**
+* Internal: panel state shared by the sidebar parts and by components that adapt to the icon rail
+* (such as `AccountMenu`), kept apart so they can read it without importing the sidebar itself.
+*/
+import * as React from "react";
+export const SidebarPanelContext = React.createContext(null);
+/**
+* Reads the panel state when rendered inside a `Sidebar`, and `null` anywhere else.
+* @returns The panel state, or `null` outside a sidebar.
+*/
+export function useOptionalSidebarPanel() {
+	return React.use(SidebarPanelContext);
+}

package/dist/components/sidebar.d.ts

@@ -7,6 +7,7 @@
  */
 import * as React from "react";
 import { type HTMLMotionProps } from "motion/react";
+import { type SidebarPanelState } from "./sidebar-panel-context.js";
 type SidebarState = "expanded" | "collapsed";
 type SidebarSide = "left" | "right";
 type SidebarVariant = "sidebar" | "floating" | "inset";
@@ -31,6 +32,13 @@ type SidebarContextValue = {
  * @returns Open state for desktop and mobile, viewport and motion flags, and state setters.
  */
 declare function useSidebar(): SidebarContextValue;
+/**
+ * Reads the state of the enclosing `Sidebar` panel, so product content can adapt to the icon rail
+ * without depending on its DOM attributes.
+ * @returns Whether the panel is collapsed to its icon rail (always false in the mobile sheet), its
+ * collapse mode and its side.
+ */
+declare function useSidebarPanel(): SidebarPanelState;
 type SidebarProviderStyle = React.CSSProperties & {
     "--sidebar-width"?: string;
     "--sidebar-width-icon"?: string;
@@ -48,14 +56,18 @@ export type SidebarProviderProps = React.ComponentProps<"div"> & {
     onOpenMobileChange?: (open: boolean) => void;
     /** Opts into local persistence without changing the shared SSR cookie contract. */
     storageKey?: string;
+    /** Cookie that keeps the desktop state for server entrypoints; defaults to `sidebar_state`. */
+    cookieName?: string;
+    /** Lifetime of that cookie in seconds; defaults to seven days. */
+    cookieMaxAge?: number;
     style?: SidebarProviderStyle;
 };
 /**
  * Owns the open state of the sidebar, the ⌘B / Ctrl+B shortcut and the layout wrapper.
- * @param props - Controlled or default state for both viewports, persistence key and wrapper attributes.
+ * @param props - Controlled or default state for both viewports, persistence options and wrapper attributes.
  * @returns The wrapper that lays out the sidebar next to its inset.
  */
-declare function SidebarProvider({ children, open: openProp, defaultOpen, onOpenChange, openMobile: openMobileProp, defaultOpenMobile, onOpenMobileChange, storageKey, className, style, ...props }: SidebarProviderProps): React.JSX.Element;
+declare function SidebarProvider({ children, open: openProp, defaultOpen, onOpenChange, openMobile: openMobileProp, defaultOpenMobile, onOpenMobileChange, storageKey, cookieName, cookieMaxAge, className, style, ...props }: SidebarProviderProps): React.JSX.Element;
 export type SidebarProps = Omit<HTMLMotionProps<"aside">, "children"> & {
     children?: React.ReactNode;
     side?: SidebarSide;
@@ -99,6 +111,31 @@ declare function SidebarInset({ className, ...props }: HTMLMotionProps<"main">):
 declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type SidebarLabelProps = React.ComponentProps<"span"> & {
+    /** Renders the child element instead of a `span`, for example a paragraph. */
+    asChild?: boolean;
+};
+/**
+ * Product text that only makes sense in the expanded sidebar, such as a workspace name or an empty
+ * state: it leaves the layout while the panel is the icon rail and always shows in the mobile sheet.
+ * @param props - Span attributes, or `asChild` to keep the child element.
+ * @returns The content, or nothing in the icon rail.
+ */
+declare function SidebarLabel({ asChild, ...props }: SidebarLabelProps): React.JSX.Element | null;
+export type SidebarBrandButtonProps = React.ComponentProps<"button"> & {
+    /** Square tile such as a logo or initials; it stays visible in the icon rail. */
+    icon: React.ReactNode;
+    /** Trailing affordance such as a chevron, hidden in the icon rail. */
+    trailing?: React.ReactNode;
+};
+/**
+ * Header row that identifies the workspace, often the trigger of a workspace switcher. It forwards
+ * its props and ref to the `button`, so it works as `DropdownMenuTrigger asChild`, and keeps its tile
+ * on the menu icon column while the label and trailing content leave in the icon rail.
+ * @param props - Tile, label, trailing content and native button attributes.
+ * @returns The brand button.
+ */
+declare function SidebarBrandButton({ icon, trailing, children, className, type, ...props }: SidebarBrandButtonProps): React.JSX.Element;
 declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /** Section heading that fades out of the icon rail and is hidden from assistive technology there. */
 declare function SidebarGroupLabel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -155,4 +192,4 @@ export type SidebarMenuButtonProps = SidebarActionProps & {
  * @returns The menu link or button.
  */
 declare function SidebarMenuButton({ children, icon, badge, href, isActive, ariaExpanded, disabled, closeOnSelect, target, rel, onSelect, className, }: SidebarMenuButtonProps): React.JSX.Element;
-export { Sidebar, SidebarClose, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, };
+export { Sidebar, SidebarBrandButton, SidebarClose, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, useSidebarPanel, };