beez-ui 3.0.1 → 4.0.0

package/dist/components/reaction-button.js

@@ -1,125 +1,189 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Toggle for likes and similar reactions: the icon gets Arc's kick (https://uiarc.dev, MIT License, see
+* THIRD_PARTY_NOTICES.md) when the viewer reacts and the counter rolls in the direction of the change. The (optimistic) reaction state is owned by the caller.
+*/
+import { useEffect, useRef } from "react";
 import { HeartIcon } from "lucide-react";
-import { motion } from "motion/react";
+import { animate, motion, useMotionValue } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
 import { AnimatedCount } from "./animated-count.js";
 import { ControlButton } from "./control-button.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Peak scale the icon reaches while popping into the active state. */
-const REACTION_ICON_POP_SCALE = 1.28;
-const REACTION_ICON_VARIANTS = {
-	idle: { scale: 1 },
-	active: {
-		scale: [
-			1,
-			REACTION_ICON_POP_SCALE,
-			1
-		],
-		transition: {
-			duration: MOTION_TIMING.pop,
-			ease: MOTION_EASE
-		}
-	}
+/**
+* Arc's kick: an impulse rather than a keyframe. The icon starts at rest with velocity, overshoots and settles, and a
+* quick second reaction adds to the running motion instead of restarting it.
+*/
+const REACTION_KICK = {
+	type: "spring",
+	stiffness: 420,
+	damping: 17
 };
+/** Scale velocity, per second, the kick gives the icon. */
+const REACTION_KICK_SCALE_VELOCITY = 11;
+/** Rotation velocity, in degrees per second, the kick gives the icon. */
+const REACTION_KICK_ROTATE_VELOCITY = -420;
 /**
-* Renders an outline toggle button exposing its state with `aria-pressed`. The icon starts at
-* rest (`initial={false}`), so server-rendered and already-active reactions never pop on load;
-* only a change to active does, and not at all with reduced motion.
+* Renders an outline toggle button exposing its state with `aria-pressed`. Server-rendered and already-active
+* reactions never kick on load; only a change to active does, and not at all with reduced motion.
 * @param props - Accessible name, state, count, click handler and optional icon.
 * @returns The reaction button.
 */
 export function ReactionButton(t0) {
-	const $ = _c(22);
+	const $ = _c(32);
 	const { ariaLabel, isActive, count, onClick, isDisabled: t1, icon: t2, formatCount, activeColor, className } = t0;
 	const isDisabled = t1 === undefined ? false : t1;
 	const Icon = t2 === undefined ? HeartIcon : t2;
 	const shouldReduceMotion = usePrefersReducedMotion();
+	const scale = useMotionValue(1);
+	const rotate = useMotionValue(0);
+	const wasActive = useRef(isActive);
 	let t3;
-	if ($[0] !== activeColor) {
-		t3 = activeColor ? { "--beez-reaction-active-color": activeColor } : undefined;
-		$[0] = activeColor;
-		$[1] = t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[0] = t3;
 	} else {
-		t3 = $[1];
+		t3 = $[0];
 	}
-	const activeColorStyle = t3;
-	const t4 = isActive || undefined;
+	const kickControls = useRef(t3);
+	let t4;
 	let t5;
-	if ($[2] !== className) {
-		t5 = cn("group/reaction", className);
-		$[2] = className;
-		$[3] = t5;
+	if ($[1] !== isActive || $[2] !== rotate || $[3] !== scale || $[4] !== shouldReduceMotion) {
+		t4 = () => {
+			const becameActive = isActive && !wasActive.current;
+			wasActive.current = isActive;
+			if (shouldReduceMotion) {
+				kickControls.current.forEach(_temp);
+				kickControls.current = [];
+				scale.jump(1);
+				rotate.jump(0);
+				return;
+			}
+			if (!becameActive) {
+				return;
+			}
+			kickControls.current = [animate(scale, 1, {
+				...REACTION_KICK,
+				velocity: scale.getVelocity() + REACTION_KICK_SCALE_VELOCITY
+			}), animate(rotate, 0, {
+				...REACTION_KICK,
+				velocity: rotate.getVelocity() + REACTION_KICK_ROTATE_VELOCITY
+			})];
+		};
+		t5 = [
+			isActive,
+			rotate,
+			scale,
+			shouldReduceMotion
+		];
+		$[1] = isActive;
+		$[2] = rotate;
+		$[3] = scale;
+		$[4] = shouldReduceMotion;
+		$[5] = t4;
+		$[6] = t5;
 	} else {
-		t5 = $[3];
+		t4 = $[5];
+		t5 = $[6];
 	}
-	const t6 = isActive && !shouldReduceMotion ? "active" : "idle";
-	let t7;
-	if ($[4] !== Icon) {
-		t7 = /* @__PURE__ */ _jsx(Icon, { className: "size-4 transition-[fill,color] group-data-active/reaction:fill-current group-data-active/reaction:text-[var(--beez-reaction-active-color,var(--destructive))]" });
-		$[4] = Icon;
-		$[5] = t7;
+	useEffect(t4, t5);
+	let t6;
+	if ($[7] !== activeColor) {
+		t6 = activeColor ? { "--beez-reaction-active-color": activeColor } : undefined;
+		$[7] = activeColor;
+		$[8] = t6;
 	} else {
-		t7 = $[5];
+		t6 = $[8];
 	}
+	const activeColorStyle = t6;
+	const t7 = isActive || undefined;
 	let t8;
-	if ($[6] !== t6 || $[7] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(motion.span, {
-			animate: t6,
+	if ($[9] !== className) {
+		t8 = cn("group/reaction", className);
+		$[9] = className;
+		$[10] = t8;
+	} else {
+		t8 = $[10];
+	}
+	let t9;
+	if ($[11] !== rotate || $[12] !== scale) {
+		t9 = {
+			scale,
+			rotate
+		};
+		$[11] = rotate;
+		$[12] = scale;
+		$[13] = t9;
+	} else {
+		t9 = $[13];
+	}
+	let t10;
+	if ($[14] !== Icon) {
+		t10 = /* @__PURE__ */ _jsx(Icon, { className: "size-4 transition-[fill,color] group-data-active/reaction:fill-current group-data-active/reaction:text-[var(--beez-reaction-active-color,var(--destructive))]" });
+		$[14] = Icon;
+		$[15] = t10;
+	} else {
+		t10 = $[15];
+	}
+	let t11;
+	if ($[16] !== t10 || $[17] !== t9) {
+		t11 = /* @__PURE__ */ _jsx(motion.span, {
 			"aria-hidden": true,
 			className: "inline-flex origin-center items-center justify-center",
-			initial: false,
-			variants: REACTION_ICON_VARIANTS,
-			children: t7
+			style: t9,
+			children: t10
 		});
-		$[6] = t6;
-		$[7] = t7;
-		$[8] = t8;
+		$[16] = t10;
+		$[17] = t9;
+		$[18] = t11;
 	} else {
-		t8 = $[8];
+		t11 = $[18];
 	}
-	let t9;
-	if ($[9] !== count || $[10] !== formatCount) {
-		t9 = /* @__PURE__ */ _jsx(AnimatedCount, {
+	let t12;
+	if ($[19] !== count || $[20] !== formatCount) {
+		t12 = /* @__PURE__ */ _jsx(AnimatedCount, {
 			className: "min-w-[1ch]",
 			value: count,
 			format: formatCount
 		});
-		$[9] = count;
-		$[10] = formatCount;
-		$[11] = t9;
+		$[19] = count;
+		$[20] = formatCount;
+		$[21] = t12;
 	} else {
-		t9 = $[11];
+		t12 = $[21];
 	}
-	let t10;
-	if ($[12] !== activeColorStyle || $[13] !== ariaLabel || $[14] !== isActive || $[15] !== isDisabled || $[16] !== onClick || $[17] !== t4 || $[18] !== t5 || $[19] !== t8 || $[20] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs(ControlButton, {
+	let t13;
+	if ($[22] !== activeColorStyle || $[23] !== ariaLabel || $[24] !== isActive || $[25] !== isDisabled || $[26] !== onClick || $[27] !== t11 || $[28] !== t12 || $[29] !== t7 || $[30] !== t8) {
+		t13 = /* @__PURE__ */ _jsxs(ControlButton, {
 			"data-slot": "reaction-button",
-			"data-active": t4,
+			"data-active": t7,
 			"aria-label": ariaLabel,
 			"aria-pressed": isActive,
-			className: t5,
+			className: t8,
 			disabled: isDisabled,
 			onClick,
 			style: activeColorStyle,
 			type: "button",
 			variant: "outline",
-			children: [t8, t9]
+			children: [t11, t12]
 		});
-		$[12] = activeColorStyle;
-		$[13] = ariaLabel;
-		$[14] = isActive;
-		$[15] = isDisabled;
-		$[16] = onClick;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t8;
-		$[20] = t9;
-		$[21] = t10;
+		$[22] = activeColorStyle;
+		$[23] = ariaLabel;
+		$[24] = isActive;
+		$[25] = isDisabled;
+		$[26] = onClick;
+		$[27] = t11;
+		$[28] = t12;
+		$[29] = t7;
+		$[30] = t8;
+		$[31] = t13;
 	} else {
-		t10 = $[21];
+		t13 = $[31];
 	}
-	return t10;
+	return t13;
+}
+function _temp(controls) {
+	return controls.stop();
 }

package/dist/components/rich-link-editor.js

@@ -24,7 +24,7 @@ const RICH_LINK_EDITOR_CLASS_NAMES = {
 	editorInvalid: "rounded-[0.35rem] shadow-[inset_0_-2px_0_var(--destructive)] outline-0",
 	editorLink: "cursor-pointer rounded-[0.2rem] font-medium text-primary underline decoration-[0.08em] underline-offset-[0.18em] transition-colors hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
 	popover: "gap-3",
-	editForm: "grid gap-3 animate-in fade-in slide-in-from-bottom-1 duration-200",
+	editForm: "grid gap-3 animate-in fade-in slide-in-from-bottom-1 duration-(--duration-standard) ease-(--ease-enter)",
 	actions: "flex flex-wrap items-center gap-2",
 	label: "grid gap-[0.35rem] text-[0.85rem] font-medium text-muted-foreground",
 	input: "min-h-8 rounded-lg border border-border/80 bg-background px-[0.65rem] font-normal text-foreground outline-0 transition-[border-color,box-shadow] [font:inherit] focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_35%,transparent)] aria-invalid:border-destructive aria-invalid:focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_25%,transparent)] max-md:text-base"

package/dist/components/separator.js

@@ -1,7 +1,6 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Separator(t0) {
@@ -31,14 +30,11 @@ function Separator(t0) {
 	}
 	let t3;
 	if ($[6] !== orientation || $[7] !== props || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
-			children: /* @__PURE__ */ _jsx(SeparatorPrimitive, {
-				"data-slot": "separator",
-				orientation,
-				className: t2,
-				...props
-			})
+		t3 = /* @__PURE__ */ _jsx(SeparatorPrimitive, {
+			"data-slot": "separator",
+			orientation,
+			className: t2,
+			...props
 		});
 		$[6] = orientation;
 		$[7] = props;

package/dist/components/sheet.js

@@ -216,17 +216,14 @@ function SheetContent(t0) {
 		t7 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "delayed-pop",
-				children: /* @__PURE__ */ _jsxs(ControlButton, {
-					variant: "ghost",
-					className: "absolute top-4 right-4",
-					size: "icon-sm",
-					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-						className: "sr-only",
-						children: "Close"
-					})]
-				})
+			children: /* @__PURE__ */ _jsxs(ControlButton, {
+				variant: "ghost",
+				className: "absolute top-4 right-4",
+				size: "icon-sm",
+				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
 			})
 		});
 		$[11] = showCloseButton;

package/dist/components/sidebar.d.ts

@@ -1,8 +1,8 @@
 /**
- * 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";
@@ -140,7 +140,7 @@ declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div
 /** 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;
 declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-/** 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. */
 declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function SidebarMenuItem({ className, ...props }: HTMLMotionProps<"li">): React.JSX.Element;
 export type SidebarMenuSubProps = Omit<HTMLMotionProps<"ul">, "children"> & {
@@ -149,7 +149,7 @@ export type SidebarMenuSubProps = Omit<HTMLMotionProps<"ul">, "children"> & {
     children?: React.ReactNode;
 };
 /**
- * Nested list that unfolds with a clip and staggered items.
+ * 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.
  */