beez-ui 3.0.0 → 4.0.0

package/dist/components/presence-swap.js

@@ -5,8 +5,13 @@ import { useState } from "react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { MOTION_CONTENT_DISTANCE, MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
+import { ARC_BLUR } from "../motion/arc-tokens.js";
+import { MOTION_EASE, MOTION_EASE_STANDARD, MOTION_TIMING } from "../motion/tokens.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Arc's swap: new content rises a third of a line out of a soft blur; old content leaves upward. */
+const SWAP_RISE = "0.3em";
+const SWAP_ENTER_BLUR = `blur(${ARC_BLUR.soft}px)`;
+const SWAP_EXIT_BLUR = `blur(${ARC_BLUR.subtle}px)`;
 const PRESENCE_SWAP_ELEMENTS = {
 	div: motion.div,
 	span: motion.span
@@ -18,68 +23,75 @@ const PRESENCE_SWAP_ELEMENTS = {
 * @returns The animated state.
 */
 function PresenceSwapItem(t0) {
-	const $ = _c(14);
+	const $ = _c(16);
 	const { as, className, children } = t0;
 	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
 	const isPresent = useIsPresent();
 	const [isMountedExiting] = useState(!isPresent);
 	const shouldReduceMotion = usePrefersReducedMotion();
-	const distance = shouldReduceMotion ? 0 : MOTION_CONTENT_DISTANCE;
+	const rise = shouldReduceMotion ? 0 : SWAP_RISE;
+	const enterBlur = shouldReduceMotion ? "blur(0px)" : SWAP_ENTER_BLUR;
+	const exitBlur = shouldReduceMotion ? "blur(0px)" : SWAP_EXIT_BLUR;
 	if (isMountedExiting) {
 		return null;
 	}
 	const t1 = isPresent ? undefined : true;
 	const t2 = !isPresent || undefined;
 	let t3;
-	if ($[0] !== distance) {
+	if ($[0] !== enterBlur || $[1] !== rise) {
 		t3 = {
 			opacity: 0,
-			y: distance
+			y: rise,
+			filter: enterBlur
 		};
-		$[0] = distance;
-		$[1] = t3;
+		$[0] = enterBlur;
+		$[1] = rise;
+		$[2] = t3;
 	} else {
-		t3 = $[1];
+		t3 = $[2];
 	}
 	let t4;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = {
 			opacity: 1,
 			y: 0,
+			filter: "blur(0px)",
 			transition: {
 				duration: MOTION_TIMING.enter,
 				ease: MOTION_EASE
 			}
 		};
-		$[2] = t4;
+		$[3] = t4;
 	} else {
-		t4 = $[2];
+		t4 = $[3];
 	}
-	const t5 = -distance;
+	const t5 = shouldReduceMotion ? 0 : `-${SWAP_RISE}`;
 	let t6;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = {
-			duration: MOTION_TIMING.exit,
-			ease: MOTION_EASE
+			duration: MOTION_TIMING.fast,
+			ease: MOTION_EASE_STANDARD
 		};
-		$[3] = t6;
+		$[4] = t6;
 	} else {
-		t6 = $[3];
+		t6 = $[4];
 	}
 	let t7;
-	if ($[4] !== t5) {
+	if ($[5] !== exitBlur || $[6] !== t5) {
 		t7 = {
 			opacity: 0,
 			y: t5,
+			filter: exitBlur,
 			transition: t6
 		};
-		$[4] = t5;
-		$[5] = t7;
+		$[5] = exitBlur;
+		$[6] = t5;
+		$[7] = t7;
 	} else {
-		t7 = $[5];
+		t7 = $[7];
 	}
 	let t8;
-	if ($[6] !== MotionElement || $[7] !== children || $[8] !== className || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t7) {
+	if ($[8] !== MotionElement || $[9] !== children || $[10] !== className || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t7) {
 		t8 = /* @__PURE__ */ _jsx(MotionElement, {
 			"data-slot": "presence-swap",
 			"aria-hidden": t1,
@@ -90,16 +102,16 @@ function PresenceSwapItem(t0) {
 			exit: t7,
 			children
 		});
-		$[6] = MotionElement;
-		$[7] = children;
-		$[8] = className;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t7;
-		$[13] = t8;
+		$[8] = MotionElement;
+		$[9] = children;
+		$[10] = className;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t7;
+		$[15] = t8;
 	} else {
-		t8 = $[13];
+		t8 = $[15];
 	}
 	return t8;
 }
@@ -145,7 +157,7 @@ function usePresenceSwapKey(presenceKey) {
 	return `${current.generation}:${presenceKey}`;
 }
 /**
-* Swaps keyed content with a short lift-and-fade; the first render is not animated.
+* Swaps keyed content with Arc's swap (a short rise out of a blur); the first render is not animated.
 * @param props - Key identifying the current state and its content.
 * @returns The animated content.
 */

package/dist/components/primitives/avatar.js

@@ -2,7 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { AnimatePresence, motion } from "motion/react";
-import { AVATAR_STATUS_HIDDEN_SCALE } from "../../constants/avatar.js";
+import { AVATAR_IMAGE_REFERRER_POLICY, AVATAR_STATUS_HIDDEN_SCALE } from "../../constants/avatar.js";
 import { usePrefersReducedMotion } from "../../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../../lib/utils.js";
 import { ARC_DURATION, ARC_SPRING_SNAPPY } from "../../motion/arc-tokens.js";
@@ -89,15 +89,12 @@ function AvatarRoot(t0) {
 	}
 	let t5;
 	if ($[13] !== children || $[14] !== props || $[15] !== size || $[16] !== t2 || $[17] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
-			children: /* @__PURE__ */ _jsxs(AvatarPrimitive.Root, {
-				"data-slot": "avatar",
-				"data-size": size,
-				className: t2,
-				...props,
-				children: [children, t4]
-			})
+		t5 = /* @__PURE__ */ _jsxs(AvatarPrimitive.Root, {
+			"data-slot": "avatar",
+			"data-size": size,
+			className: t2,
+			...props,
+			children: [children, t4]
 		});
 		$[13] = children;
 		$[14] = props;
@@ -168,6 +165,7 @@ function AvatarImage(t0) {
 				src: t5,
 				loading: "lazy",
 				decoding: "async",
+				referrerPolicy: AVATAR_IMAGE_REFERRER_POLICY,
 				...props
 			})
 		});

package/dist/components/primitives/dropdown-menu.d.ts

@@ -1,7 +1,7 @@
 /**
  * Internal primitive of Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's raised
- * panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its tokens, with
- * beez-ui's reveal from the trigger edge and the highlight that glides between items with the keyboard. Internal: the
+ * panel, item rows, danger tone, separators, placement defaults and Arc's motion: the panel grows from the trigger
+ * edge, items rise in staggered, and the highlight glides for the pointer and jumps for the keyboard. Internal: the
  * Radix composition behind the public closed `DropdownMenu` and beez-ui's composite components; the package does not
  * export it.
  */

package/dist/components/primitives/dropdown-menu.js

@@ -2,20 +2,23 @@
 import { c as _c } from "react/compiler-runtime";
 /**
 * Internal primitive of Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's raised
-* panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its tokens, with
-* beez-ui's reveal from the trigger edge and the highlight that glides between items with the keyboard. Internal: the
+* panel, item rows, danger tone, separators, placement defaults and Arc's motion: the panel grows from the trigger
+* edge, items rise in staggered, and the highlight glides for the pointer and jumps for the keyboard. Internal: the
 * Radix composition behind the public closed `DropdownMenu` and beez-ui's composite components; the package does not
 * export it.
 */
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { DROPDOWN_MENU_COLLISION_PADDING_PX, DROPDOWN_MENU_SIDE_OFFSET_PX } from "../../constants/dropdown-menu.js";
+import { DROPDOWN_MENU_COLLISION_PADDING_PX, DROPDOWN_MENU_MOTION, DROPDOWN_MENU_SIDE_OFFSET_PX } from "../../constants/dropdown-menu.js";
 import { GlideSlot } from "../../motion/glide-slot.js";
+import { ArcFloatingSlot } from "../../motion/arc-floating-slot.js";
 import { MotionSlot } from "../../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../../motion/presence.js";
 import { cn } from "../../lib/utils.js";
 import { CheckIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Arc's menu always enters and leaves the same way. */
+const resolveDropdownMenuMotion = () => DROPDOWN_MENU_MOTION;
 /**
 * Arc's menu panel on its tokens. It also sets the direction its items rise in from (`--menu-item-offset-*`, toward
 * the trigger).
@@ -162,8 +165,8 @@ function DropdownMenuContent(t0) {
 	}
 	let t8;
 	if ($[12] !== align || $[13] !== collisionPadding || $[14] !== loop || $[15] !== props || $[16] !== sideOffset || $[17] !== stopClickAtPanel || $[18] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
+		t8 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
+			motion: resolveDropdownMenuMotion,
 			children: /* @__PURE__ */ _jsx(GlideSlot, {
 				preset: "menu",
 				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {

package/dist/components/primitives/select.d.ts

@@ -1,7 +1,8 @@
 /**
  * Internal primitive of Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's trigger, whose
  * hover, press and open states answer in color only so the anchored list never shifts, and its raised list with
- * option rows and an end check, on Arc's tokens, with beez-ui's option entrance, check pop and chevron rotation.
+ * option rows and an end check, on Arc's tokens and Arc's motion: the list grows from the trigger edge, the check
+ * of the chosen option sharpens in, and the chevron turns on the CSS spring.
  * Internal: the Radix composition behind the public closed `Select`; the package does not export it.
  */
 import * as React from "react";

package/dist/components/primitives/select.js

@@ -3,19 +3,23 @@ import { c as _c } from "react/compiler-runtime";
 /**
 * Internal primitive of Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's trigger, whose
 * hover, press and open states answer in color only so the anchored list never shifts, and its raised list with
-* option rows and an end check, on Arc's tokens, with beez-ui's option entrance, check pop and chevron rotation.
+* option rows and an end check, on Arc's tokens and Arc's motion: the list grows from the trigger edge, the check
+* of the chosen option sharpens in, and the chevron turns on the CSS spring.
 * Internal: the Radix composition behind the public closed `Select`; the package does not export it.
 */
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
-import { SELECT_COLLISION_PADDING_PX } from "../../constants/select.js";
-import { GlideSlot } from "../../motion/glide-slot.js";
+import { SELECT_COLLISION_PADDING_PX, SELECT_MOTION } from "../../constants/select.js";
+import { ArcFloatingSlot } from "../../motion/arc-floating-slot.js";
 import { MotionSlot } from "../../motion/motion-slot.js";
+import { MotionOpenProvider, useMotionOpen, useMotionOpenState } from "../../motion/presence.js";
 import { cn } from "../../lib/utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Arc's option list always enters and leaves the same way. */
+const resolveSelectMotion = () => SELECT_MOTION;
 function Select(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -24,18 +28,36 @@ function Select(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(SelectPrimitive.Root, {
 			"data-slot": "select",
-			...props
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
-	return t1;
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "select",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function SelectValue(t0) {
 	const $ = _c(4);
@@ -99,13 +121,10 @@ function SelectTrigger(t0) {
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.Icon, {
 			asChild: true,
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "rotate",
-				children: /* @__PURE__ */ _jsx(ChevronDownIcon, {
-					"data-slot": "select-icon",
-					strokeWidth: 1.75,
-					className: "pointer-events-none size-4 text-text-muted"
-				})
+			children: /* @__PURE__ */ _jsx(ChevronDownIcon, {
+				"data-slot": "select-icon",
+				strokeWidth: 1.75,
+				className: "pointer-events-none size-4 text-text-muted transition-[rotate] duration-(--duration-spring) ease-(--ease-spring) motion-reduce:transition-none"
 			})
 		});
 		$[7] = t3;
@@ -114,15 +133,12 @@ function SelectTrigger(t0) {
 	}
 	let t4;
 	if ($[8] !== children || $[9] !== props || $[10] !== size || $[11] !== t2) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
-			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Trigger, {
-				"data-slot": "select-trigger",
-				"data-size": size,
-				className: t2,
-				...props,
-				children: [children, t3]
-			})
+		t4 = /* @__PURE__ */ _jsxs(SelectPrimitive.Trigger, {
+			"data-slot": "select-trigger",
+			"data-size": size,
+			className: t2,
+			...props,
+			children: [children, t3]
 		});
 		$[8] = children;
 		$[9] = props;
@@ -142,7 +158,7 @@ function SelectTrigger(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function SelectContent(t0) {
-	const $ = _c(23);
+	const $ = _c(26);
 	let children;
 	let className;
 	let props;
@@ -169,78 +185,86 @@ function SelectContent(t0) {
 	const position = t1 === undefined ? "item-aligned" : t1;
 	const align = t2 === undefined ? "center" : t2;
 	const collisionPadding = t3 === undefined ? SELECT_COLLISION_PADDING_PX : t3;
-	const t4 = position === "item-aligned";
-	const t5 = position === "popper" && "w-(--radix-select-trigger-width) max-w-[min(24rem,calc(100vw-20px))] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
-	let t6;
-	if ($[7] !== className || $[8] !== t5) {
-		t6 = cn("relative z-50 max-h-[min(20rem,var(--radix-select-content-available-height))] min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[calc(var(--radius-control)+2px)] border border-border bg-surface-raised p-1.5 text-foreground shadow-(--shadow-floating)", t5, className);
+	const open = useMotionOpen("select");
+	const t4 = open ? "open" : "closed";
+	const t5 = position === "item-aligned";
+	const t6 = position === "popper" && "w-(--radix-select-trigger-width) max-w-[min(24rem,calc(100vw-20px))] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
+	let t7;
+	if ($[7] !== className || $[8] !== t6) {
+		t7 = cn("relative z-50 max-h-[min(20rem,var(--radix-select-content-available-height))] min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[calc(var(--radius-control)+2px)] border border-border bg-surface-raised p-1.5 text-foreground shadow-(--shadow-floating)", t6, className);
 		$[7] = className;
-		$[8] = t5;
-		$[9] = t6;
+		$[8] = t6;
+		$[9] = t7;
 	} else {
-		t6 = $[9];
+		t7 = $[9];
 	}
-	let t7;
+	let t8;
 	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ _jsx(SelectScrollUpButton, {});
-		$[10] = t7;
+		t8 = /* @__PURE__ */ _jsx(SelectScrollUpButton, {});
+		$[10] = t8;
 	} else {
-		t7 = $[10];
+		t8 = $[10];
 	}
-	let t8;
+	let t9;
 	if ($[11] !== children || $[12] !== position) {
-		t8 = /* @__PURE__ */ _jsx(SelectPrimitive.Viewport, {
+		t9 = /* @__PURE__ */ _jsx(SelectPrimitive.Viewport, {
 			"data-position": position,
 			className: "py-0.5 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full",
 			children
 		});
 		$[11] = children;
 		$[12] = position;
-		$[13] = t8;
+		$[13] = t9;
 	} else {
-		t8 = $[13];
+		t9 = $[13];
 	}
-	let t9;
+	let t10;
 	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ _jsx(SelectScrollDownButton, {});
-		$[14] = t9;
+		t10 = /* @__PURE__ */ _jsx(SelectScrollDownButton, {});
+		$[14] = t10;
 	} else {
-		t9 = $[14];
+		t10 = $[14];
 	}
-	let t10;
-	if ($[15] !== align || $[16] !== collisionPadding || $[17] !== position || $[18] !== props || $[19] !== t4 || $[20] !== t6 || $[21] !== t8) {
-		t10 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
-			children: /* @__PURE__ */ _jsx(GlideSlot, {
-				preset: "menu",
-				children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
-					"data-slot": "select-content",
-					"data-align-trigger": t4,
-					className: t6,
-					position,
-					align,
-					collisionPadding,
-					...props,
-					children: [
-						t7,
-						t8,
-						t9
-					]
-				})
-			})
-		}) });
+	let t11;
+	if ($[15] !== align || $[16] !== collisionPadding || $[17] !== position || $[18] !== props || $[19] !== t5 || $[20] !== t7 || $[21] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
+			"data-slot": "select-content",
+			"data-align-trigger": t5,
+			className: t7,
+			position,
+			align,
+			collisionPadding,
+			...props,
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
 		$[15] = align;
 		$[16] = collisionPadding;
 		$[17] = position;
 		$[18] = props;
-		$[19] = t4;
-		$[20] = t6;
-		$[21] = t8;
-		$[22] = t10;
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t9;
+		$[22] = t11;
 	} else {
-		t10 = $[22];
+		t11 = $[22];
 	}
-	return t10;
+	let t12;
+	if ($[23] !== t11 || $[24] !== t4) {
+		t12 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(ArcFloatingSlot, {
+			motion: resolveSelectMotion,
+			children: t11
+		}, t4) });
+		$[23] = t11;
+		$[24] = t4;
+		$[25] = t12;
+	} else {
+		t12 = $[25];
+	}
+	return t12;
 }
 /**
 * Renders Arc's option row: 36px tall, a muted fill when highlighted and the check of the chosen option at the end,
@@ -298,14 +322,11 @@ function SelectItem(t0) {
 	}
 	let t4;
 	if ($[9] !== props || $[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "list-item",
-			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
-				"data-slot": "select-item",
-				className: t1,
-				...props,
-				children: [t2, t3]
-			})
+		t4 = /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
+			"data-slot": "select-item",
+			className: t1,
+			...props,
+			children: [t2, t3]
 		});
 		$[9] = props;
 		$[10] = t1;

package/dist/components/reaction-button.d.ts

@@ -1,8 +1,8 @@
 /**
- * Toggle for likes and similar reactions: the icon pops when the viewer reacts and the counter
- * rolls in the direction of the change. The (optimistic) reaction state is owned by the caller.
+ * 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 type { ComponentType, MouseEvent, SVGProps } from "react";
+import { type ComponentType, type MouseEvent, type SVGProps } from "react";
 export interface ReactionButtonProps {
     /** Accessible name, including the current count (for example "Me gusta 3"). */
     ariaLabel: string;
@@ -22,9 +22,8 @@ export interface ReactionButtonProps {
     className?: string;
 }
 /**
- * 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.
  */