beez-ui 0.10.0 → 0.11.0

package/dist/components/sidebar.js

@@ -9,18 +9,21 @@ import { c as _c } from "react/compiler-runtime";
 */
 import * as React from "react";
 import { ChevronRight, PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
 import { AnimatePresence, motion } from "motion/react";
 import { createPortal } from "react-dom";
 import { useIsHydrated } from "../hooks/use-is-hydrated.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { saveSidebarCookie, saveSidebarPreference, useSidebarPersistence } from "../hooks/use-sidebar-persistence.js";
+import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
 import { cn } from "../lib/utils.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { SharedLayoutBg } from "../motion/shared-layout-bg.js";
 import { MOTION_EASE, MOTION_EASE_DRAWER, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT } from "../motion/tokens.js";
 import { Link } from "./link.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarPanelContext } from "./sidebar-panel-context.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_ICON = "4.25rem";
@@ -109,7 +112,6 @@ const FOCUSABLE_SELECTOR = [
 	"[tabindex]:not([tabindex='-1'])"
 ].join(",");
 const SidebarContext = React.createContext(null);
-const SidebarPanelContext = React.createContext(null);
 /**
 * Reads the sidebar state shared by `SidebarProvider`.
 * @returns Open state for desktop and mobile, viewport and motion flags, and state setters.
@@ -121,20 +123,26 @@ function useSidebar() {
 	}
 	return context;
 }
+/**
+* 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.
+*/
 function useSidebarPanel() {
 	const context = React.use(SidebarPanelContext);
 	if (!context) {
-		throw new Error("Sidebar parts must be used within an Sidebar.");
+		throw new Error("useSidebarPanel must be used within a Sidebar.");
 	}
 	return context;
 }
 /**
 * 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.
 */
 function SidebarProvider(t0) {
-	const $ = _c(53);
+	const $ = _c(57);
 	let children;
 	let className;
 	let onOpenChange;
@@ -146,8 +154,10 @@ function SidebarProvider(t0) {
 	let style;
 	let t1;
 	let t2;
+	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({children, open: openProp, defaultOpen: t1, onOpenChange, openMobile: openMobileProp, defaultOpenMobile: t2, onOpenMobileChange, storageKey, className, style, ...props} = t0);
+		({children, open: openProp, defaultOpen: t1, onOpenChange, openMobile: openMobileProp, defaultOpenMobile: t2, onOpenMobileChange, storageKey, cookieName: t3, cookieMaxAge: t4, className, style, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -160,6 +170,8 @@ function SidebarProvider(t0) {
 		$[9] = style;
 		$[10] = t1;
 		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -172,9 +184,13 @@ function SidebarProvider(t0) {
 		style = $[9];
 		t1 = $[10];
 		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
 	}
 	const defaultOpen = t1 === undefined ? true : t1;
 	const defaultOpenMobile = t2 === undefined ? false : t2;
+	const cookieName = t3 === undefined ? SIDEBAR_COOKIE_NAME : t3;
+	const cookieMaxAge = t4 === undefined ? SIDEBAR_COOKIE_MAX_AGE : t4;
 	const [internalOpen, setInternalOpen] = React.useState(null);
 	const [internalOpenMobile, setInternalOpenMobile] = React.useState(defaultOpenMobile);
 	const persistedOpen = useSidebarPersistence(storageKey);
@@ -186,62 +202,64 @@ function SidebarProvider(t0) {
 	const openMobile = openMobileProp ?? internalOpenMobile;
 	const state = open ? "expanded" : "collapsed";
 	const mobileWidth = style?.["--sidebar-width-mobile"] ?? SIDEBAR_WIDTH_MOBILE;
-	let t3;
-	if ($[12] !== onOpenChange || $[13] !== openProp || $[14] !== storageKey) {
-		t3 = (nextOpen) => {
+	let t5;
+	if ($[14] !== cookieMaxAge || $[15] !== cookieName || $[16] !== onOpenChange || $[17] !== openProp || $[18] !== storageKey) {
+		t5 = (nextOpen) => {
 			if (openProp === undefined) {
 				setInternalOpen(nextOpen);
 			}
 			onOpenChange?.(nextOpen);
 			saveSidebarPreference(storageKey, nextOpen);
-			saveSidebarCookie(nextOpen);
+			saveSidebarCookie(nextOpen, cookieName, cookieMaxAge);
 		};
-		$[12] = onOpenChange;
-		$[13] = openProp;
-		$[14] = storageKey;
-		$[15] = t3;
+		$[14] = cookieMaxAge;
+		$[15] = cookieName;
+		$[16] = onOpenChange;
+		$[17] = openProp;
+		$[18] = storageKey;
+		$[19] = t5;
 	} else {
-		t3 = $[15];
+		t5 = $[19];
 	}
-	const setOpen = t3;
-	let t4;
-	if ($[16] !== onOpenMobileChange || $[17] !== openMobileProp) {
-		t4 = (nextOpen_0) => {
+	const setOpen = t5;
+	let t6;
+	if ($[20] !== onOpenMobileChange || $[21] !== openMobileProp) {
+		t6 = (nextOpen_0) => {
 			if (openMobileProp === undefined) {
 				setInternalOpenMobile(nextOpen_0);
 			}
 			onOpenMobileChange?.(nextOpen_0);
 		};
-		$[16] = onOpenMobileChange;
-		$[17] = openMobileProp;
-		$[18] = t4;
+		$[20] = onOpenMobileChange;
+		$[21] = openMobileProp;
+		$[22] = t6;
 	} else {
-		t4 = $[18];
+		t6 = $[22];
 	}
-	const setOpenMobile = t4;
-	let t5;
-	if ($[19] !== isMobile || $[20] !== open || $[21] !== openMobile || $[22] !== setOpen || $[23] !== setOpenMobile) {
-		t5 = () => {
+	const setOpenMobile = t6;
+	let t7;
+	if ($[23] !== isMobile || $[24] !== open || $[25] !== openMobile || $[26] !== setOpen || $[27] !== setOpenMobile) {
+		t7 = () => {
 			if (isMobile) {
 				setOpenMobile(!openMobile);
 			} else {
 				setOpen(!open);
 			}
 		};
-		$[19] = isMobile;
-		$[20] = open;
-		$[21] = openMobile;
-		$[22] = setOpen;
-		$[23] = setOpenMobile;
-		$[24] = t5;
+		$[23] = isMobile;
+		$[24] = open;
+		$[25] = openMobile;
+		$[26] = setOpen;
+		$[27] = setOpenMobile;
+		$[28] = t7;
 	} else {
-		t5 = $[24];
+		t7 = $[28];
 	}
-	const toggleSidebar = t5;
-	let t6;
-	let t7;
-	if ($[25] !== toggleSidebar) {
-		t6 = () => {
+	const toggleSidebar = t7;
+	let t8;
+	let t9;
+	if ($[29] !== toggleSidebar) {
+		t8 = () => {
 			const handleShortcut = (event) => {
 				if (event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 					event.preventDefault();
@@ -251,21 +269,21 @@ function SidebarProvider(t0) {
 			window.addEventListener("keydown", handleShortcut);
 			return () => window.removeEventListener("keydown", handleShortcut);
 		};
-		t7 = [toggleSidebar];
-		$[25] = toggleSidebar;
-		$[26] = t6;
-		$[27] = t7;
+		t9 = [toggleSidebar];
+		$[29] = toggleSidebar;
+		$[30] = t8;
+		$[31] = t9;
 	} else {
-		t6 = $[26];
-		t7 = $[27];
+		t8 = $[30];
+		t9 = $[31];
 	}
-	React.useEffect(t6, t7);
-	const t8 = `${generatedId}-active`;
-	let t9;
-	if ($[28] !== isMobile || $[29] !== mobileWidth || $[30] !== open || $[31] !== openMobile || $[32] !== reduce || $[33] !== setOpen || $[34] !== setOpenMobile || $[35] !== state || $[36] !== t8 || $[37] !== toggleSidebar) {
-		t9 = {
+	React.useEffect(t8, t9);
+	const t10 = `${generatedId}-active`;
+	let t11;
+	if ($[32] !== isMobile || $[33] !== mobileWidth || $[34] !== open || $[35] !== openMobile || $[36] !== reduce || $[37] !== setOpen || $[38] !== setOpenMobile || $[39] !== state || $[40] !== t10 || $[41] !== toggleSidebar) {
+		t11 = {
 			isMobile,
-			layoutId: t8,
+			layoutId: t10,
 			mobileWidth,
 			open,
 			openMobile,
@@ -276,75 +294,75 @@ function SidebarProvider(t0) {
 			toggleSidebar,
 			triggerRef
 		};
-		$[28] = isMobile;
-		$[29] = mobileWidth;
-		$[30] = open;
-		$[31] = openMobile;
-		$[32] = reduce;
-		$[33] = setOpen;
-		$[34] = setOpenMobile;
-		$[35] = state;
-		$[36] = t8;
-		$[37] = toggleSidebar;
-		$[38] = t9;
-	} else {
-		t9 = $[38];
-	}
-	const contextValue = t9;
-	let t10;
-	if ($[39] !== mobileWidth || $[40] !== style) {
-		t10 = {
+		$[32] = isMobile;
+		$[33] = mobileWidth;
+		$[34] = open;
+		$[35] = openMobile;
+		$[36] = reduce;
+		$[37] = setOpen;
+		$[38] = setOpenMobile;
+		$[39] = state;
+		$[40] = t10;
+		$[41] = toggleSidebar;
+		$[42] = t11;
+	} else {
+		t11 = $[42];
+	}
+	const contextValue = t11;
+	let t12;
+	if ($[43] !== mobileWidth || $[44] !== style) {
+		t12 = {
 			"--sidebar-width": SIDEBAR_WIDTH,
 			"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
 			"--sidebar-width-mobile": mobileWidth,
 			...style
 		};
-		$[39] = mobileWidth;
-		$[40] = style;
-		$[41] = t10;
+		$[43] = mobileWidth;
+		$[44] = style;
+		$[45] = t12;
 	} else {
-		t10 = $[41];
+		t12 = $[45];
 	}
-	let t11;
-	if ($[42] !== className) {
-		t11 = cn("group/sidebar-wrapper flex min-h-svh w-full min-w-0 has-data-[variant=inset]:bg-sidebar", className);
-		$[42] = className;
-		$[43] = t11;
+	let t13;
+	if ($[46] !== className) {
+		t13 = cn("group/sidebar-wrapper flex min-h-svh w-full min-w-0 has-data-[variant=inset]:bg-sidebar", className);
+		$[46] = className;
+		$[47] = t13;
 	} else {
-		t11 = $[43];
+		t13 = $[47];
 	}
-	let t12;
-	if ($[44] !== children || $[45] !== props || $[46] !== state || $[47] !== t10 || $[48] !== t11) {
-		t12 = /* @__PURE__ */ _jsx("div", {
+	let t14;
+	if ($[48] !== children || $[49] !== props || $[50] !== state || $[51] !== t12 || $[52] !== t13) {
+		t14 = /* @__PURE__ */ _jsx("div", {
 			...props,
 			"data-slot": "sidebar-wrapper",
 			"data-state": state,
-			style: t10,
-			className: t11,
+			style: t12,
+			className: t13,
 			children
 		});
-		$[44] = children;
-		$[45] = props;
-		$[46] = state;
-		$[47] = t10;
-		$[48] = t11;
-		$[49] = t12;
+		$[48] = children;
+		$[49] = props;
+		$[50] = state;
+		$[51] = t12;
+		$[52] = t13;
+		$[53] = t14;
 	} else {
-		t12 = $[49];
+		t14 = $[53];
 	}
-	let t13;
-	if ($[50] !== contextValue || $[51] !== t12) {
-		t13 = /* @__PURE__ */ _jsx(SidebarContext.Provider, {
+	let t15;
+	if ($[54] !== contextValue || $[55] !== t14) {
+		t15 = /* @__PURE__ */ _jsx(SidebarContext.Provider, {
 			value: contextValue,
-			children: t12
+			children: t14
 		});
-		$[50] = contextValue;
-		$[51] = t12;
-		$[52] = t13;
+		$[54] = contextValue;
+		$[55] = t14;
+		$[56] = t15;
 	} else {
-		t13 = $[52];
+		t15 = $[56];
 	}
-	return t13;
+	return t15;
 }
 /** Small-screen sheet: locks page scroll, traps focus and hands it back to the trigger on close. */
 function MobileSidebar(t0) {
@@ -1172,6 +1190,144 @@ function SidebarFooter(t0) {
 	}
 	return t2;
 }
+/**
+* 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.
+*/
+function SidebarLabel(t0) {
+	const $ = _c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({asChild: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const asChild = t1 === undefined ? false : t1;
+	const { collapsed } = useSidebarPanel();
+	if (collapsed) {
+		return null;
+	}
+	const Component = asChild ? Slot.Root : "span";
+	let t2;
+	if ($[3] !== Component || $[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(Component, {
+			"data-slot": "sidebar-label",
+			...props
+		});
+		$[3] = Component;
+		$[4] = props;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	return t2;
+}
+/**
+* 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.
+*/
+function SidebarBrandButton(t0) {
+	const $ = _c(23);
+	let children;
+	let className;
+	let icon;
+	let props;
+	let t1;
+	let trailing;
+	if ($[0] !== t0) {
+		({icon, trailing, children, className, type: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = trailing;
+	} else {
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		props = $[4];
+		t1 = $[5];
+		trailing = $[6];
+	}
+	const type = t1 === undefined ? "button" : t1;
+	const { collapsed } = useSidebarPanel();
+	const textLabel = typeof children === "string" ? children : undefined;
+	const t2 = collapsed ? textLabel : undefined;
+	const t3 = collapsed ? textLabel : undefined;
+	let t4;
+	if ($[7] !== className) {
+		t4 = cn("flex min-h-10 w-full min-w-0 items-center gap-3 rounded-xl px-2 py-1.5 text-left text-sm font-semibold text-sidebar-foreground outline-none transition-colors", "hover:bg-sidebar-accent/70 focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent/70", "disabled:cursor-not-allowed disabled:opacity-40", className);
+		$[7] = className;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== icon) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "sidebar-brand-icon",
+			className: "grid size-7 shrink-0 place-items-center overflow-hidden rounded-lg [&>img]:size-full [&>img]:object-cover",
+			children: icon
+		});
+		$[9] = icon;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	let t6;
+	if ($[11] !== children || $[12] !== collapsed || $[13] !== trailing) {
+		t6 = collapsed ? null : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children
+		}), trailing ? /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "grid size-4 shrink-0 place-items-center text-sidebar-foreground/70 [&_svg]:size-3.5",
+			children: trailing
+		}) : null] });
+		$[11] = children;
+		$[12] = collapsed;
+		$[13] = trailing;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== props || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== type) {
+		t7 = /* @__PURE__ */ _jsxs("button", {
+			"aria-label": t2,
+			title: t3,
+			...props,
+			type,
+			"data-slot": "sidebar-brand-button",
+			className: t4,
+			children: [t5, t6]
+		});
+		$[15] = props;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = type;
+		$[22] = t7;
+	} else {
+		t7 = $[22];
+	}
+	return t7;
+}
 function SidebarGroup(t0) {
 	const $ = _c(8);
 	let className;
@@ -1839,4 +1995,4 @@ function SidebarMenuButton(t0) {
 	}
 	return t19;
 }
-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 };

package/dist/hooks/use-sidebar-persistence.d.ts

@@ -3,4 +3,4 @@ export declare function useSidebarPersistence(storageKey?: string): boolean | nu
 /** Stores an optional preference while retaining usable navigation in private mode. */
 export declare function saveSidebarPreference(storageKey: string | undefined, open: boolean): void;
 /** Writes the cookie that server entrypoints read to render the sidebar in its last state. */
-export declare function saveSidebarCookie(open: boolean): void;
+export declare function saveSidebarCookie(open: boolean, cookieName?: string, maxAgeSeconds?: number): void;

package/dist/hooks/use-sidebar-persistence.js

@@ -44,9 +44,9 @@ export function saveSidebarPreference(storageKey, open) {
 	} catch {}
 }
 /** Writes the cookie that server entrypoints read to render the sidebar in its last state. */
-export function saveSidebarCookie(open) {
+export function saveSidebarCookie(open, cookieName = SIDEBAR_COOKIE_NAME, maxAgeSeconds = SIDEBAR_COOKIE_MAX_AGE) {
 	const value = open ? SIDEBAR_COOKIE_OPEN_VALUE : SIDEBAR_COOKIE_COLLAPSED_VALUE;
 	try {
-		document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; SameSite=Lax`;
+		document.cookie = `${cookieName}=${value}; path=/; max-age=${maxAgeSeconds}; SameSite=Lax`;
 	} catch {}
 }