beez-ui 0.9.1 → 0.11.0

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

@@ -2,3 +2,5 @@
 export declare function useSidebarPersistence(storageKey?: string): boolean | null;
 /** 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, cookieName?: string, maxAgeSeconds?: number): void;

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

@@ -2,7 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 /** Keeps optional browser persistence separate from the sidebar rendering contract. */
 import { useSyncExternalStore } from "react";
-import { SIDEBAR_COOKIE_COLLAPSED_VALUE, SIDEBAR_COOKIE_OPEN_VALUE } from "../constants/sidebar.js";
+import { SIDEBAR_COOKIE_COLLAPSED_VALUE, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_COOKIE_OPEN_VALUE } from "../constants/sidebar.js";
 /** Reads a preference without making unavailable browser storage a render failure. */
 function readSidebarPreference(storageKey) {
 	if (!storageKey || typeof window === "undefined") return null;
@@ -43,3 +43,10 @@ export function saveSidebarPreference(storageKey, open) {
 		window.localStorage.setItem(storageKey, open ? SIDEBAR_COOKIE_OPEN_VALUE : SIDEBAR_COOKIE_COLLAPSED_VALUE);
 	} catch {}
 }
+/** Writes the cookie that server entrypoints read to render the sidebar in its last state. */
+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 = `${cookieName}=${value}; path=/; max-age=${maxAgeSeconds}; SameSite=Lax`;
+	} catch {}
+}

package/dist/motion/glide-indicator.d.ts

@@ -35,19 +35,6 @@ export declare const GLIDE_PRESETS: {
             readonly mass: 1.2;
         };
     };
-    sidebar: {
-        itemSelector: string;
-        containerSelector: string;
-        attributes: string[];
-        isActive: (item: Element) => boolean;
-        surface: () => "background";
-        spring: {
-            readonly type: "spring";
-            readonly stiffness: 360;
-            readonly damping: 32;
-            readonly mass: 0.6;
-        };
-    };
     pagination: {
         itemSelector: string;
         containerSelector: string;

package/dist/motion/glide-indicator.js

@@ -14,14 +14,6 @@ export const GLIDE_PRESETS = {
 		surface: (container) => container.getAttribute("data-variant") === "line" ? "after" : "background",
 		spring: SPRING_TABS
 	},
-	sidebar: {
-		itemSelector: "[data-slot=\"sidebar-menu-button\"]",
-		containerSelector: "[data-slot=\"sidebar-menu\"]",
-		attributes: ["data-active"],
-		isActive: (item) => item.getAttribute("data-active") === "true",
-		surface: () => "background",
-		spring: SPRING_LAYOUT
-	},
 	pagination: {
 		itemSelector: "[data-slot=\"pagination-link\"]",
 		containerSelector: "[data-slot=\"pagination-content\"]",
@@ -248,7 +240,7 @@ export function attachGlideIndicator(container, preset) {
 		});
 	}
 	const observer = new MutationObserver(() => {
-		// Items can be remounted (a sidebar button wrapped in a tooltip after hydration); the
+		// Items can be remounted (a button wrapped in a tooltip trigger after hydration); the
 		// highlight then belongs to the item that replaced the detached one.
 		if (lastActive && !lastActive.isConnected) {
 			lastActive = items().find(preset.isActive) ?? null;

package/dist/motion/shared-layout-bg.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps } from "react";
+export type SharedLayoutBgProps = ComponentProps<"ul"> & {
+    /** Classes of the moving pill. */
+    pillClassName?: string;
+    /** Positioning override for the pill wrapper inside each item. */
+    pillContainerClassName?: string;
+    /** Horizontal distance, in pixels, the pill extends past each row. */
+    inset?: number;
+};
+/**
+ * Renders a list whose items share one hover pill that glides between them.
+ * Each child element receives the pill behind its content, so children should be list items.
+ * @param props - List attributes, pill styling and the items to decorate.
+ * @returns The decorated list.
+ */
+export declare function SharedLayoutBg({ children, className, onMouseLeave, pillClassName, pillContainerClassName, inset, ...props }: SharedLayoutBgProps): import("react").JSX.Element;

package/dist/motion/shared-layout-bg.js

@@ -0,0 +1,181 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Follows the hovered item of a list with one shared background pill, as in beui.dev. */
+import { AnimatePresence, motion } from "motion/react";
+import { Children, cloneElement, isValidElement, useId, useState } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_REVEAL_BLUR_PX, SPRING_LAYOUT } from "./tokens.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Horizontal distance, in pixels, the pill extends past each row by default. */
+const DEFAULT_PILL_INSET_PX = 20;
+const PILL_BLUR = `blur(${MOTION_REVEAL_BLUR_PX}px)`;
+/** The pill fades in blurred, and only blurs out when the pointer leaves the whole list. */
+const PILL_VARIANTS = {
+	initial: {
+		opacity: 0,
+		filter: PILL_BLUR
+	},
+	animate: {
+		opacity: 1,
+		filter: "blur(0px)"
+	},
+	exit: (isHovering) => isHovering ? {} : {
+		opacity: 0,
+		filter: PILL_BLUR
+	}
+};
+/** With reduced motion the pill appears and leaves at once, like other pointer highlights. */
+const REDUCED_PILL_VARIANTS = {
+	initial: { opacity: 0 },
+	animate: {
+		opacity: 1,
+		transition: { duration: 0 }
+	},
+	exit: (isHovering) => isHovering ? {} : {
+		opacity: 0,
+		transition: { duration: 0 }
+	}
+};
+/**
+* Renders a list whose items share one hover pill that glides between them.
+* Each child element receives the pill behind its content, so children should be list items.
+* @param props - List attributes, pill styling and the items to decorate.
+* @returns The decorated list.
+*/
+export function SharedLayoutBg(t0) {
+	const $ = _c(34);
+	let children;
+	let className;
+	let onMouseLeave;
+	let pillClassName;
+	let pillContainerClassName;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({children, className, onMouseLeave, pillClassName, pillContainerClassName, inset: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = onMouseLeave;
+		$[4] = pillClassName;
+		$[5] = pillContainerClassName;
+		$[6] = props;
+		$[7] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		onMouseLeave = $[3];
+		pillClassName = $[4];
+		pillContainerClassName = $[5];
+		props = $[6];
+		t1 = $[7];
+	}
+	const inset = t1 === undefined ? DEFAULT_PILL_INSET_PX : t1;
+	const [hoveredKey, setHoveredKey] = useState(null);
+	const layoutId = useId();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const isHovering = hoveredKey !== null;
+	let t2;
+	if ($[8] !== children || $[9] !== hoveredKey || $[10] !== inset || $[11] !== isHovering || $[12] !== layoutId || $[13] !== pillClassName || $[14] !== pillContainerClassName || $[15] !== shouldReduceMotion) {
+		let t3;
+		if ($[17] !== hoveredKey || $[18] !== inset || $[19] !== isHovering || $[20] !== layoutId || $[21] !== pillClassName || $[22] !== pillContainerClassName || $[23] !== shouldReduceMotion) {
+			t3 = (child, index) => {
+				const item = child;
+				const itemKey = item.key === null ? `item-${index}` : String(item.key);
+				return cloneElement(item, {
+					key: itemKey,
+					className: cn("relative", item.props.className),
+					onMouseEnter: (event) => {
+						item.props.onMouseEnter?.(event);
+						setHoveredKey(itemKey);
+					}
+				}, /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(AnimatePresence, {
+					custom: isHovering,
+					children: isHovering ? /* @__PURE__ */ _jsx(motion.div, {
+						variants: shouldReduceMotion ? REDUCED_PILL_VARIANTS : PILL_VARIANTS,
+						initial: "initial",
+						animate: "animate",
+						exit: "exit",
+						custom: isHovering,
+						className: cn("pointer-events-none absolute inset-y-0", pillContainerClassName),
+						style: {
+							left: -inset,
+							right: -inset
+						},
+						children: hoveredKey === itemKey ? /* @__PURE__ */ _jsx(motion.div, {
+							"data-slot": "shared-layout-pill",
+							layoutId: `shared-layout-bg-${layoutId}`,
+							transition: shouldReduceMotion ? { duration: 0 } : SPRING_LAYOUT,
+							className: cn("pointer-events-none size-full rounded-2xl bg-muted/80", pillClassName)
+						}) : null
+					}) : null
+				}), /* @__PURE__ */ _jsx("div", {
+					className: "relative z-10",
+					children: item.props.children
+				})] }));
+			};
+			$[17] = hoveredKey;
+			$[18] = inset;
+			$[19] = isHovering;
+			$[20] = layoutId;
+			$[21] = pillClassName;
+			$[22] = pillContainerClassName;
+			$[23] = shouldReduceMotion;
+			$[24] = t3;
+		} else {
+			t3 = $[24];
+		}
+		t2 = Children.toArray(children).filter(isValidElement).map(t3);
+		$[8] = children;
+		$[9] = hoveredKey;
+		$[10] = inset;
+		$[11] = isHovering;
+		$[12] = layoutId;
+		$[13] = pillClassName;
+		$[14] = pillContainerClassName;
+		$[15] = shouldReduceMotion;
+		$[16] = t2;
+	} else {
+		t2 = $[16];
+	}
+	const items = t2;
+	const t3 = props;
+	let t4;
+	if ($[25] !== onMouseLeave) {
+		t4 = (event_0) => {
+			setHoveredKey(null);
+			onMouseLeave?.(event_0);
+		};
+		$[25] = onMouseLeave;
+		$[26] = t4;
+	} else {
+		t4 = $[26];
+	}
+	let t5;
+	if ($[27] !== className) {
+		t5 = cn("flex w-full flex-col", className);
+		$[27] = className;
+		$[28] = t5;
+	} else {
+		t5 = $[28];
+	}
+	let t6;
+	if ($[29] !== items || $[30] !== t3 || $[31] !== t4 || $[32] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(motion.ul, {
+			...t3,
+			layoutRoot: true,
+			onMouseLeave: t4,
+			className: t5,
+			children: items
+		});
+		$[29] = items;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t6;
+	} else {
+		t6 = $[33];
+	}
+	return t6;
+}