beez-ui 3.0.1 → 4.0.0

package/dist/components/sidebar.js

@@ -1,16 +1,16 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 /**
-* Animated application sidebar adapted from beui.dev/components/motion/animated-sidebar: the rail
-* morphs its width with a spring, labels fade out of the icon rail, a shared pill follows the
-* hovered and active items, submenus unfold with a stagger, and small screens get a focus-trapped
-* sheet. Links route through the `BeezUIProvider` adapter and the open state keeps the
+* Application sidebar on the motion of Arc's sidebar rail: the rail springs its width without
+* overshoot, labels fade and drift out of the icon rail, the active item's highlight glides between
+* items, hovered items only change color, submenus open their height on the smooth spring, and
+* small screens get a focus-trapped sheet that slides in from its edge. Links route through the `BeezUIProvider` adapter and the open state keeps the
 * `sidebar_state` cookie contract read by server entrypoints.
 */
 import * as React from "react";
 import { ChevronRight, PanelLeftIcon } from "lucide-react";
 import { Slot } from "radix-ui";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, PresenceContext } from "motion/react";
 import { createPortal } from "react-dom";
 import { useIsHydrated } from "../hooks/use-is-hydrated.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
@@ -18,84 +18,63 @@ 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, SPRING_PANEL } from "../motion/tokens.js";
+import { MOTION_EASE, MOTION_EASE_STANDARD, MOTION_TIMING, SPRING_CHEVRON, SPRING_LAYOUT, SPRING_PANEL } from "../motion/tokens.js";
 import { Link } from "./link.js";
 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";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const EXTERNAL_LINK_TARGET = "_blank";
 const EXTERNAL_LINK_REL = "noreferrer noopener";
-/** Distance, in pixels, labels and chevrons drift while fading out of the icon rail. */
-const SIDEBAR_LABEL_DRIFT_PX = 4;
+/** Distance, in pixels, labels and chevrons drift while fading out of the icon rail (Arc). */
+const SIDEBAR_LABEL_DRIFT_PX = 6;
 /** Chevron rotation, in degrees, of an expanded group. */
 const SIDEBAR_CHEVRON_EXPANDED_DEGREES = 90;
-/** Blur, in pixels, submenu items shed as they unfold. */
-const SIDEBAR_SUBMENU_ITEM_BLUR_PX = 3;
-const PANEL_TRANSITION = {
-	duration: .36,
-	ease: MOTION_EASE_DRAWER
+/** Arc's sidebar sheet slides in and out on the smooth spring. */
+const PANEL_TRANSITION = SPRING_PANEL;
+/** Arc's scrim fades on the standard duration. */
+const SCRIM_TRANSITION = {
+	duration: MOTION_TIMING.standard,
+	ease: MOTION_EASE
 };
 /**
 * The desktop rail settles at a hard zero-width boundary, and its width reports the panel state. Arc's smooth spring
 * is critically damped, so it cannot overshoot, pause against that boundary and snap back during the final frame.
 */
 const SIDEBAR_MORPH_TRANSITION = SPRING_PANEL;
+/** Arc's labels come back once the rail has mostly opened. */
 const LABEL_ENTER_TRANSITION = {
-	duration: MOTION_TIMING.message,
-	delay: .08,
+	duration: MOTION_TIMING.standard,
+	delay: .1,
 	ease: MOTION_EASE
 };
+/** Arc's labels leave quickly, before the rail finishes folding. */
 const LABEL_EXIT_TRANSITION = {
-	duration: MOTION_TIMING.exit,
-	ease: MOTION_EASE
+	duration: .14,
+	ease: MOTION_EASE_STANDARD
 };
 const REDUCED_TRANSITION = {
 	duration: .16,
 	ease: MOTION_EASE
 };
 const INSTANT_TRANSITION = { duration: 0 };
-const SUBMENU_VARIANTS = {
-	closed: {
-		opacity: 0,
-		clipPath: "inset(0 0 100% 0 round 8px)",
-		transition: {
-			duration: MOTION_TIMING.fast,
-			ease: MOTION_EASE,
-			staggerChildren: .025,
-			staggerDirection: -1
-		}
-	},
-	open: {
-		opacity: 1,
-		clipPath: "inset(0 0 0% 0 round 8px)",
-		transition: {
-			duration: MOTION_TIMING.message,
-			delayChildren: MOTION_TIMING.listStagger,
-			ease: MOTION_EASE,
-			staggerChildren: .045
-		}
+/** Arc's submenu opens its height on the smooth spring while its items fade in just behind it. */
+const SUBMENU_OPEN_TRANSITION = {
+	height: SPRING_PANEL,
+	opacity: {
+		duration: MOTION_TIMING.standard,
+		delay: .06,
+		ease: MOTION_EASE
 	}
 };
-const SUBMENU_ITEM_VARIANTS = {
-	closed: {
-		opacity: 0,
-		y: -MOTION_LIST_ITEM_DISTANCE,
-		filter: `blur(${SIDEBAR_SUBMENU_ITEM_BLUR_PX}px)`
-	},
-	open: {
-		opacity: 1,
-		y: 0,
-		filter: "blur(0px)",
-		transition: {
-			duration: MOTION_TIMING.enter,
-			ease: MOTION_EASE
-		}
+/** Arc's submenu folds on the same spring and fades out faster than it came in. */
+const SUBMENU_CLOSE_TRANSITION = {
+	height: SPRING_PANEL,
+	opacity: {
+		duration: .14,
+		ease: MOTION_EASE_STANDARD
 	}
 };
 const FOCUSABLE_SELECTOR = [
@@ -504,170 +483,171 @@ function MobileSidebar(t0) {
 	} else {
 		t10 = $[12];
 	}
-	let t11;
+	const t11 = reduce ? REDUCED_TRANSITION : SCRIM_TRANSITION;
+	let t12;
 	if ($[13] !== setOpenMobile) {
-		t11 = () => setOpenMobile(false);
+		t12 = () => setOpenMobile(false);
 		$[13] = setOpenMobile;
-		$[14] = t11;
+		$[14] = t12;
 	} else {
-		t11 = $[14];
+		t12 = $[14];
 	}
-	const t12 = openMobile ? "pointer-events-auto" : "pointer-events-none";
-	let t13;
-	if ($[15] !== t12) {
-		t13 = cn("fixed inset-0 bg-black/40", t12);
-		$[15] = t12;
-		$[16] = t13;
+	const t13 = openMobile ? "pointer-events-auto" : "pointer-events-none";
+	let t14;
+	if ($[15] !== t13) {
+		t14 = cn("fixed inset-0 bg-black/40", t13);
+		$[15] = t13;
+		$[16] = t14;
 	} else {
-		t13 = $[16];
+		t14 = $[16];
 	}
-	let t14;
-	if ($[17] !== t10 || $[18] !== t11 || $[19] !== t13 || $[20] !== t8 || $[21] !== transition) {
-		t14 = /* @__PURE__ */ _jsx(motion.button, {
+	let t15;
+	if ($[17] !== t10 || $[18] !== t11 || $[19] !== t12 || $[20] !== t14 || $[21] !== t8) {
+		t15 = /* @__PURE__ */ _jsx(motion.button, {
 			type: "button",
 			"aria-label": "Close sidebar",
 			"data-slot": "sidebar-overlay",
 			tabIndex: t8,
 			initial: false,
 			animate: t10,
-			transition,
-			onClick: t11,
-			className: t13
+			transition: t11,
+			onClick: t12,
+			className: t14
 		});
 		$[17] = t10;
 		$[18] = t11;
-		$[19] = t13;
-		$[20] = t8;
-		$[21] = transition;
-		$[22] = t14;
+		$[19] = t12;
+		$[20] = t14;
+		$[21] = t8;
+		$[22] = t15;
 	} else {
-		t14 = $[22];
+		t15 = $[22];
 	}
-	const t15 = !openMobile;
 	const t16 = !openMobile;
-	const t17 = openMobile ? "expanded" : "collapsed";
-	const t18 = reduce ? openMobile ? 1 : 0 : 1;
-	const t19 = reduce ? 0 : openMobile ? "0%" : closedOffset;
-	let t20;
-	if ($[23] !== t18 || $[24] !== t19) {
-		t20 = {
-			opacity: t18,
-			x: t19
+	const t17 = !openMobile;
+	const t18 = openMobile ? "expanded" : "collapsed";
+	const t19 = reduce ? openMobile ? 1 : 0 : 1;
+	const t20 = reduce ? 0 : openMobile ? "0%" : closedOffset;
+	let t21;
+	if ($[23] !== t19 || $[24] !== t20) {
+		t21 = {
+			opacity: t19,
+			x: t20
 		};
-		$[23] = t18;
-		$[24] = t19;
-		$[25] = t20;
+		$[23] = t19;
+		$[24] = t20;
+		$[25] = t21;
 	} else {
-		t20 = $[25];
+		t21 = $[25];
 	}
-	let t21;
+	let t22;
 	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = () => {
+		t22 = () => {
 			if (!openMobileRef.current) {
 				setHidden(true);
 			}
 		};
-		$[26] = t21;
+		$[26] = t22;
 	} else {
-		t21 = $[26];
+		t22 = $[26];
 	}
-	let t22;
+	let t23;
 	if ($[27] !== mobileWidth) {
-		t22 = { "--sidebar-width-mobile": mobileWidth };
+		t23 = { "--sidebar-width-mobile": mobileWidth };
 		$[27] = mobileWidth;
-		$[28] = t22;
+		$[28] = t23;
 	} else {
-		t22 = $[28];
+		t23 = $[28];
 	}
-	const t23 = t22;
-	const t24 = side === "left" ? "left-0 border-r" : "right-0 border-l";
-	const t25 = !openMobile && "pointer-events-none";
-	let t26;
-	if ($[29] !== className || $[30] !== t24 || $[31] !== t25) {
-		t26 = cn("pointer-events-auto fixed inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden outline-none", "border-sidebar-border bg-sidebar text-sidebar-foreground shadow-2xl will-change-transform", t24, t25, className);
+	const t24 = t23;
+	const t25 = side === "left" ? "left-0 border-r" : "right-0 border-l";
+	const t26 = !openMobile && "pointer-events-none";
+	let t27;
+	if ($[29] !== className || $[30] !== t25 || $[31] !== t26) {
+		t27 = cn("pointer-events-auto fixed inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden outline-none", "border-sidebar-border bg-sidebar text-sidebar-foreground shadow-2xl will-change-transform", t25, t26, className);
 		$[29] = className;
-		$[30] = t24;
-		$[31] = t25;
-		$[32] = t26;
+		$[30] = t25;
+		$[31] = t26;
+		$[32] = t27;
 	} else {
-		t26 = $[32];
+		t27 = $[32];
 	}
-	let t27;
+	let t28;
 	if ($[33] !== side) {
-		t27 = {
+		t28 = {
 			collapsed: false,
 			collapsible: "none",
 			side
 		};
 		$[33] = side;
-		$[34] = t27;
+		$[34] = t28;
 	} else {
-		t27 = $[34];
+		t28 = $[34];
 	}
-	let t28;
-	if ($[35] !== children || $[36] !== t27) {
-		t28 = /* @__PURE__ */ _jsx(SidebarPanelContext.Provider, {
-			value: t27,
+	let t29;
+	if ($[35] !== children || $[36] !== t28) {
+		t29 = /* @__PURE__ */ _jsx(SidebarPanelContext.Provider, {
+			value: t28,
 			children
 		});
 		$[35] = children;
-		$[36] = t27;
-		$[37] = t28;
+		$[36] = t28;
+		$[37] = t29;
 	} else {
-		t28 = $[37];
+		t29 = $[37];
 	}
-	let t29;
-	if ($[38] !== ariaLabel || $[39] !== side || $[40] !== t15 || $[41] !== t16 || $[42] !== t17 || $[43] !== t20 || $[44] !== t23 || $[45] !== t26 || $[46] !== t28 || $[47] !== transition || $[48] !== trapFocus) {
-		t29 = /* @__PURE__ */ _jsx(motion.div, {
+	let t30;
+	if ($[38] !== ariaLabel || $[39] !== side || $[40] !== t16 || $[41] !== t17 || $[42] !== t18 || $[43] !== t21 || $[44] !== t24 || $[45] !== t27 || $[46] !== t29 || $[47] !== transition || $[48] !== trapFocus) {
+		t30 = /* @__PURE__ */ _jsx(motion.div, {
 			ref: panelRef,
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": ariaLabel,
-			"aria-hidden": t15,
-			inert: t16,
+			"aria-hidden": t16,
+			inert: t17,
 			tabIndex: -1,
 			"data-slot": "sidebar",
 			"data-mobile": "true",
-			"data-state": t17,
+			"data-state": t18,
 			"data-side": side,
 			initial: false,
-			animate: t20,
+			animate: t21,
 			transition,
-			onAnimationComplete: t21,
+			onAnimationComplete: t22,
 			onKeyDown: trapFocus,
-			style: t23,
-			className: t26,
-			children: t28
+			style: t24,
+			className: t27,
+			children: t29
 		});
 		$[38] = ariaLabel;
 		$[39] = side;
-		$[40] = t15;
-		$[41] = t16;
-		$[42] = t17;
-		$[43] = t20;
-		$[44] = t23;
-		$[45] = t26;
-		$[46] = t28;
+		$[40] = t16;
+		$[41] = t17;
+		$[42] = t18;
+		$[43] = t21;
+		$[44] = t24;
+		$[45] = t27;
+		$[46] = t29;
 		$[47] = transition;
 		$[48] = trapFocus;
-		$[49] = t29;
+		$[49] = t30;
 	} else {
-		t29 = $[49];
+		t30 = $[49];
 	}
-	let t30;
-	if ($[50] !== t14 || $[51] !== t29 || $[52] !== t7) {
-		t30 = createPortal(/* @__PURE__ */ _jsxs("div", {
+	let t31;
+	if ($[50] !== t15 || $[51] !== t30 || $[52] !== t7) {
+		t31 = createPortal(/* @__PURE__ */ _jsxs("div", {
 			className: t7,
-			children: [t14, t29]
+			children: [t15, t30]
 		}), document.body);
-		$[50] = t14;
-		$[51] = t29;
+		$[50] = t15;
+		$[51] = t30;
 		$[52] = t7;
-		$[53] = t30;
+		$[53] = t31;
 	} else {
-		t30 = $[53];
+		t31 = $[53];
 	}
-	return t30;
+	return t31;
 }
 /**
 * Renders the sidebar: a width-morphing rail on desktop and a sheet on small screens.
@@ -1448,7 +1428,7 @@ function SidebarGroupContent(t0) {
 	}
 	return t2;
 }
-/** Menu list whose items share a hover pill that glides between them. */
+/** Menu list; hovered items answer in color, as in Arc's sidebar rail. */
 function SidebarMenu(t0) {
 	const $ = _c(8);
 	let className;
@@ -1472,11 +1452,8 @@ function SidebarMenu(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(SharedLayoutBg, {
+		t2 = /* @__PURE__ */ _jsx("ul", {
 			...props,
-			inset: 0,
-			pillClassName: "rounded-xl bg-sidebar-accent/70",
-			pillContainerClassName: "inset-y-auto top-0 h-9",
 			"data-slot": "sidebar-menu",
 			className: t1
 		});
@@ -1513,8 +1490,6 @@ function SidebarMenuItem(t0) {
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(motion.li, {
 			...props,
-			layout: "position",
-			transition: SPRING_LAYOUT,
 			"data-slot": "sidebar-menu-item",
 			className: t1
 		});
@@ -1527,7 +1502,85 @@ function SidebarMenuItem(t0) {
 	return t2;
 }
 /**
-* Nested list that unfolds with a clip and staggered items.
+* Height-animated wrapper of an open submenu. It clips overflow only while the height or the fade
+* runs, so the outward focus ring of its items is not cut once the submenu settles.
+* @param props - Reduced motion flag and the submenu list.
+* @returns The animated wrapper.
+*/
+function SidebarMenuSubRegion(t0) {
+	const $ = _c(14);
+	const { reduce, children } = t0;
+	const isMountedWithoutEntrance = React.useContext(PresenceContext)?.initial === false;
+	const [isSettled, setIsSettled] = React.useState(isMountedWithoutEntrance);
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== reduce) {
+		t1 = reduce ? { opacity: 0 } : {
+			height: 0,
+			opacity: 0
+		};
+		t2 = reduce ? { opacity: 1 } : {
+			height: "auto",
+			opacity: 1,
+			transition: SUBMENU_OPEN_TRANSITION
+		};
+		t3 = reduce ? { opacity: 0 } : {
+			height: 0,
+			opacity: 0,
+			transition: SUBMENU_CLOSE_TRANSITION
+		};
+		t4 = reduce ? { duration: MOTION_TIMING.exit } : undefined;
+		$[0] = reduce;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+		t4 = $[4];
+	}
+	const t5 = isSettled ? "overflow-visible" : "overflow-hidden";
+	let t6;
+	let t7;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsSettled(false);
+		t7 = () => setIsSettled(true);
+		$[5] = t6;
+		$[6] = t7;
+	} else {
+		t6 = $[5];
+		t7 = $[6];
+	}
+	let t8;
+	if ($[7] !== children || $[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
+		t8 = /* @__PURE__ */ _jsx(motion.div, {
+			initial: t1,
+			animate: t2,
+			exit: t3,
+			transition: t4,
+			className: t5,
+			onAnimationStart: t6,
+			onAnimationComplete: t7,
+			children
+		});
+		$[7] = children;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	return t8;
+}
+/**
+* Nested list that opens its height on Arc's smooth spring.
 * @param props - Open state and motion-enabled list attributes.
 * @returns The submenu while open and the sidebar is expanded.
 */
@@ -1554,17 +1607,15 @@ function SidebarMenuSub(t0) {
 	const panel = useSidebarPanel();
 	let t1;
 	if ($[5] !== children || $[6] !== className || $[7] !== context || $[8] !== open || $[9] !== panel || $[10] !== props) {
-		t1 = open && !panel.collapsed ? /* @__PURE__ */ _createElement(motion.ul, {
-			...props,
-			key: "sidebar-submenu",
-			variants: context.reduce ? undefined : SUBMENU_VARIANTS,
-			initial: context.reduce ? false : "closed",
-			animate: context.reduce ? { opacity: 1 } : "open",
-			exit: context.reduce ? { opacity: 0 } : "closed",
-			transition: context.reduce ? { duration: MOTION_TIMING.exit } : undefined,
-			"data-slot": "sidebar-menu-sub",
-			className: cn("relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-sidebar-border pl-3", className)
-		}, children) : null;
+		t1 = open && !panel.collapsed ? /* @__PURE__ */ _jsx(SidebarMenuSubRegion, {
+			reduce: context.reduce,
+			children: /* @__PURE__ */ _jsx(motion.ul, {
+				...props,
+				"data-slot": "sidebar-menu-sub",
+				className: cn("relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-sidebar-border pl-3", className),
+				children
+			})
+		}, "sidebar-submenu") : null;
 		$[5] = children;
 		$[6] = className;
 		$[7] = context;
@@ -1579,7 +1630,6 @@ function SidebarMenuSub(t0) {
 	if ($[12] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
 			initial: false,
-			mode: "popLayout",
 			children: t1
 		});
 		$[12] = t1;
@@ -1614,7 +1664,6 @@ function SidebarMenuSubItem(t0) {
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(motion.li, {
 			...props,
-			variants: SUBMENU_ITEM_VARIANTS,
 			"data-slot": "sidebar-menu-sub-item",
 			className: t1
 		});
@@ -1628,7 +1677,7 @@ function SidebarMenuSubItem(t0) {
 }
 /** Renders a menu action as a routed link or a button, both with the subtle press feedback. */
 function SidebarPressable(t0) {
-	const $ = _c(19);
+	const $ = _c(16);
 	const { slot, href, disabled, target, rel, isActive, ariaExpanded, ariaLabel, title, className, children, onClick } = t0;
 	const t1 = isActive ? "page" : undefined;
 	let t2;
@@ -1683,19 +1732,7 @@ function SidebarPressable(t0) {
 		t3 = $[15];
 	}
 	const element = t3;
-	let t4;
-	if ($[16] !== disabled || $[17] !== element) {
-		t4 = disabled ? element : /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "subtle-press",
-			children: element
-		});
-		$[16] = disabled;
-		$[17] = element;
-		$[18] = t4;
-	} else {
-		t4 = $[18];
-	}
-	return t4;
+	return element;
 }
 /**
 * Submenu entry; shows a dot when no icon is given.
@@ -1847,7 +1884,7 @@ function SidebarMenuButton(t0) {
 	const t5 = disabled && "cursor-not-allowed opacity-40";
 	let t6;
 	if ($[7] !== className || $[8] !== t4 || $[9] !== t5) {
-		t6 = cn("relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none", "text-sidebar-foreground/70 transition-colors hover:text-sidebar-accent-foreground", "focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring", t4, t5, className);
+		t6 = cn("relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none", "text-sidebar-foreground/70 transition-colors hover:text-sidebar-accent-foreground hover-fine:bg-sidebar-accent/70", "focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring", t4, t5, className);
 		$[7] = className;
 		$[8] = t4;
 		$[9] = t5;
@@ -1948,7 +1985,7 @@ function SidebarMenuButton(t0) {
 				rotate: ariaExpanded ? SIDEBAR_CHEVRON_EXPANDED_DEGREES : 0,
 				x: panel.collapsed ? SIDEBAR_LABEL_DRIFT_PX : 0
 			},
-			transition: context.reduce ? INSTANT_TRANSITION : SPRING_LAYOUT,
+			transition: context.reduce ? INSTANT_TRANSITION : SPRING_CHEVRON,
 			className: "relative z-10 grid size-4 shrink-0 place-items-center text-sidebar-foreground/70",
 			children: /* @__PURE__ */ _jsx(ChevronRight, { className: "size-3.5" })
 		}) : null;

package/dist/components/svgs/whatsappIcon.js

@@ -1,18 +1,14 @@
-import { MotionSlot } from "../../motion/motion-slot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const WhatsappIcon = (props) => /* @__PURE__ */ _jsx(MotionSlot, {
-	kind: "icon",
-	children: /* @__PURE__ */ _jsx("svg", {
-		"data-slot": "whatsapp-icon",
-		...props,
-		fill: "none",
-		viewBox: "0 0 360 362",
-		children: /* @__PURE__ */ _jsx("path", {
-			fill: "#25D366",
-			fillRule: "evenodd",
-			d: "M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z",
-			clipRule: "evenodd"
-		})
+const WhatsappIcon = (props) => /* @__PURE__ */ _jsx("svg", {
+	"data-slot": "whatsapp-icon",
+	...props,
+	fill: "none",
+	viewBox: "0 0 360 362",
+	children: /* @__PURE__ */ _jsx("path", {
+		fill: "#25D366",
+		fillRule: "evenodd",
+		d: "M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z",
+		clipRule: "evenodd"
 	})
 });
 export { WhatsappIcon };

package/dist/components/table.js

@@ -1,7 +1,6 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
-import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Table(t0) {
@@ -175,13 +174,10 @@ function TableRow(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "row",
-			children: /* @__PURE__ */ _jsx("tr", {
-				"data-slot": "table-row",
-				className: t1,
-				...props
-			})
+		t2 = /* @__PURE__ */ _jsx("tr", {
+			"data-slot": "table-row",
+			className: t1,
+			...props
 		});
 		$[5] = props;
 		$[6] = t1;