@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/radio-group/radio-group.js

@@ -28,7 +28,7 @@ const radioGroupVariants = cva(["flex flex-col gap-2", "box-border font-sans"]);
 const radioVariants = cva([
 	"inline-flex size-4 shrink-0 items-center justify-center",
 	"rounded-full border-(length:--border-width) box-border",
-	"bg-background border-border",
+	"bg-surface border-control-edge",
 	"radio-mark",
 	"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong",
 	"group-data-[selected]:text-primary-foreground",

package/dist/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","AriaRadioGroup","Radio","AriaRadio"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Radio as AriaRadio,\n  RadioGroup as AriaRadioGroup,\n  type RadioGroupProps as AriaRadioGroupProps,\n  type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The\n * smallest real surface in the migration, so the port is deliberately plain.\n *\n * THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare\n * button and the caller pairs it with a separate `<Label htmlFor>`; React\n * Aria's `Radio` takes its label as `children` and wires the association\n * itself. That is the one rename a call site has to make, and it removes\n * the id bookkeeping.\n *\n * `border-primary` becomes `border-border` for the same reason it did on\n * Checkbox: brand orange is 2.44:1 on white and cannot legally be the only\n * thing describing a control's edge (WCAG 1.4.11). Selected reuses\n * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --\n * so a radio and a checkbox in the same form agree.\n */\nexport const radioGroupVariants = cva([\n  \"flex flex-col gap-2\",\n  \"box-border font-sans\",\n]);\n\nexport const radioVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  \"rounded-full border-(length:--border-width) box-border\",\n  \"bg-background border-border\",\n  // Colours ease, the mark dips under a press and springs back (see radio-mark).\n  \"radio-mark\",\n  \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n  \"group-data-[selected]:text-primary-foreground\",\n  selectionRingVariants(),\n]);\n\n/**\n * A set of mutually exclusive choices.\n *\n * @example\n * <RadioGroup value={plan} onChange={setPlan} aria-label=\"Plan\">\n *   <Radio value=\"free\">Free</Radio>\n *   <Radio value=\"pro\">Pro</Radio>\n * </RadioGroup>\n */\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaRadioGroup\n      ref={ref}\n      {...props}\n      data-slot=\"radio-group\"\n      className={cn(radioGroupVariants(), className)}\n    />\n  );\n});\n\n/**\n * One choice.\n *\n * @example\n * <Radio value=\"pro\">Pro</Radio>\n */\nexport interface RadioProps extends Omit<AriaRadioProps, \"className\" | \"style\" | \"children\"> {\n  /** The label, and this option's accessible name. */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaRadio\n      {...props}\n      // inputRef, not ref: AriaRadio's own ref targets the label it renders\n      // around a visually-hidden native input, and a label cannot be\n      // focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"radio\"\n      // justify-start, overriding the shared label's centring: a radio sits\n      // in a vertical list where every label must start on the same line,\n      // not centre itself in a 24px box.\n      className={cn(cnAll(selectionLabelVariants(), \"justify-start\"), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" data-slot=\"radio-dot\" className={radioVariants()}>\n            {/*\n              Always there: the state decides whether it shows, so the dot can\n              spring in and shrink away. data-selected carries the state to a\n              test, which can no longer read it from the dot's presence.\n            */}\n            <span\n              data-slot=\"radio-indicator\"\n              data-selected={isSelected || undefined}\n              className=\"radio-dot size-1.5 rounded-full bg-current\"\n            />\n          </span>\n          {children == null ? null : <span data-slot=\"radio-label\">{children}</span>}\n        </>\n      )}\n    </AriaRadio>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,qBAAqB,IAAI,CACpC,uBACA,sBACF,CAAC;AAED,MAAa,gBAAgB,IAAI;CAC/B;CACA;CACA;CAEA;CACA;CACA;CACA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,eAAa,WAA4C,SAASA,aAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAeD,MAAaC,UAAQ,WAAyC,SAASA,QACrE,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,OAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,MAAM,uBAAuB,GAAG,eAAe,GAAG,SAAS;EAEvE,WAAA,EAAE,iBACF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAY,WAAW,cAAc;GAMtE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,iBAAe,cAAc,KAAA;IAC7B,WAAU;GACX,CAAA;EACG,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAe;EAAe,CAAA,CACzE,EAAA,CAAA;CAEK,CAAA;AAEf,CAAC"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","AriaRadioGroup","Radio","AriaRadio"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Radio as AriaRadio,\n  RadioGroup as AriaRadioGroup,\n  type RadioGroupProps as AriaRadioGroupProps,\n  type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The\n * smallest real surface in the migration, so the port is deliberately plain.\n *\n * THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare\n * button and the caller pairs it with a separate `<Label htmlFor>`; React\n * Aria's `Radio` takes its label as `children` and wires the association\n * itself. That is the one rename a call site has to make, and it removes\n * the id bookkeeping.\n *\n * `border-primary` becomes `border-border` for the same reason it did on\n * Checkbox: brand orange is 2.44:1 on white and cannot legally be the only\n * thing describing a control's edge (WCAG 1.4.11). Selected reuses\n * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --\n * so a radio and a checkbox in the same form agree.\n */\nexport const radioGroupVariants = cva([\n  \"flex flex-col gap-2\",\n  \"box-border font-sans\",\n]);\n\nexport const radioVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  \"rounded-full border-(length:--border-width) box-border\",\n  \"bg-surface border-control-edge\",\n  // Colours ease, the mark dips under a press and springs back (see radio-mark).\n  \"radio-mark\",\n  \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n  \"group-data-[selected]:text-primary-foreground\",\n  selectionRingVariants(),\n]);\n\n/**\n * A set of mutually exclusive choices.\n *\n * @example\n * <RadioGroup value={plan} onChange={setPlan} aria-label=\"Plan\">\n *   <Radio value=\"free\">Free</Radio>\n *   <Radio value=\"pro\">Pro</Radio>\n * </RadioGroup>\n */\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaRadioGroup\n      ref={ref}\n      {...props}\n      data-slot=\"radio-group\"\n      className={cn(radioGroupVariants(), className)}\n    />\n  );\n});\n\n/**\n * One choice.\n *\n * @example\n * <Radio value=\"pro\">Pro</Radio>\n */\nexport interface RadioProps extends Omit<AriaRadioProps, \"className\" | \"style\" | \"children\"> {\n  /** The label, and this option's accessible name. */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaRadio\n      {...props}\n      // inputRef, not ref: AriaRadio's own ref targets the label it renders\n      // around a visually-hidden native input, and a label cannot be\n      // focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"radio\"\n      // justify-start, overriding the shared label's centring: a radio sits\n      // in a vertical list where every label must start on the same line,\n      // not centre itself in a 24px box.\n      className={cn(cnAll(selectionLabelVariants(), \"justify-start\"), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" data-slot=\"radio-dot\" className={radioVariants()}>\n            {/*\n              Always there: the state decides whether it shows, so the dot can\n              spring in and shrink away. data-selected carries the state to a\n              test, which can no longer read it from the dot's presence.\n            */}\n            <span\n              data-slot=\"radio-indicator\"\n              data-selected={isSelected || undefined}\n              className=\"radio-dot size-1.5 rounded-full bg-current\"\n            />\n          </span>\n          {children == null ? null : <span data-slot=\"radio-label\">{children}</span>}\n        </>\n      )}\n    </AriaRadio>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,qBAAqB,IAAI,CACpC,uBACA,sBACF,CAAC;AAED,MAAa,gBAAgB,IAAI;CAC/B;CACA;CACA;CAEA;CACA;CACA;CACA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,eAAa,WAA4C,SAASA,aAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAeD,MAAaC,UAAQ,WAAyC,SAASA,QACrE,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,OAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,MAAM,uBAAuB,GAAG,eAAe,GAAG,SAAS;EAEvE,WAAA,EAAE,iBACF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAY,WAAW,cAAc;GAMtE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,iBAAe,cAAc,KAAA;IAC7B,WAAU;GACX,CAAA;EACG,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAe;EAAe,CAAA,CACzE,EAAA,CAAA;CAEK,CAAA;AAEf,CAAC"}

package/dist/reactions/index.d.ts

@@ -0,0 +1,2 @@
+import { Reaction, ReactionOption, Reactions, ReactionsProps } from "./reactions.js";
+export { type Reaction, type ReactionOption, Reactions, type ReactionsProps };

package/dist/reactions/index.js

@@ -0,0 +1,2 @@
+import { Reactions } from "./reactions.js";
+export { Reactions };

package/dist/reactions/reactions.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+//#region src/reactions/reactions.d.ts
+/**
+ * Reactions: a reaction bar for comments, posts and release notes. Each pill shows
+ * one reaction and how many people chose it; the viewer's own carry the primary
+ * tint and a filled glyph (never colour alone). Pressing a pill adds or removes
+ * the viewer's reaction, and the add button opens a compact picker that grows out
+ * of it. Use it for quick acknowledgement; when people need to say something
+ * specific, give them a reply field instead.
+ *
+ * Adding gives the icon a kick (it overshoots and settles), the count swaps to its
+ * new number, a pill that arrives or leaves opens or closes its slot so the others
+ * glide, and the bar follows its own height when it wraps. In the picker a shared
+ * highlight glides to the hovered or focused option and a caption names it.
+ * Arrow keys, Home and End move through the options. A change is announced
+ * politely ("Added Like. 3 reactions."). Reduced motion fades.
+ */
+export interface ReactionOption {
+  id: string;
+  /** The reaction's name, used on the pill, in the picker and in announcements. */
+  label: string;
+  /** The glyph: an svg that takes `currentColor`, 16px on a pill and 20px in the picker. */
+  icon: ReactNode;
+}
+export interface Reaction {
+  id: string;
+  count: number;
+  /** Whether the viewer chose it. */
+  reacted: boolean;
+}
+export interface ReactionsProps {
+  /** Every reaction the picker offers, in picker order. */
+  options: ReactionOption[];
+  /** Controlled reactions. Pills keep this order, and a reaction whose count reaches zero leaves the bar. */
+  value?: Reaction[];
+  /** The reactions when uncontrolled. */
+  defaultValue?: Reaction[];
+  /** Called with the next reactions and the change that produced them. */
+  onValueChange?: (next: Reaction[], change: {
+    id: string;
+    reacted: boolean;
+  }) => void;
+  /** Accessible name for the bar. @default "Reactions" */
+  label?: string;
+  /** Extra classes for the bar. Merged last. */
+  className?: string;
+}
+export declare function Reactions({ options, value, defaultValue, onValueChange, label, className }: ReactionsProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=reactions.d.ts.map

package/dist/reactions/reactions.js

@@ -0,0 +1,315 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { IconSwap } from "../lib/icon-swap.js";
+import { Popover as Popover$1, PopoverTrigger } from "../popover/popover.js";
+import { useLeavingList } from "../lib/leaving-list.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/reactions/reactions.tsx
+const iconProps = {
+	width: 16,
+	height: 16,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.75,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": true
+};
+const AddIcon = () => /* @__PURE__ */ jsxs("svg", {
+	...iconProps,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 11,
+		cy: 13,
+		r: 8
+	}), /* @__PURE__ */ jsx("path", { d: "M7.5 15.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8M8.5 11h.01M13.5 11h.01M19 2v6M16 5h6" })]
+});
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
+	...iconProps,
+	children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" })
+});
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	...iconProps,
+	width: 12,
+	height: 12,
+	strokeWidth: 2,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12.5 10 17.5 19 7" })
+});
+/** The count: a changed number swaps (rising in when it grows, dropping in when it shrinks) and the pill's width springs to it. */
+function Count({ value }) {
+	const [roll, setRoll] = useState({
+		value,
+		dir: 1
+	});
+	if (roll.value !== value) setRoll({
+		value,
+		dir: value > roll.value ? 1 : -1
+	});
+	const content = useRef(null);
+	const text = String(value);
+	useMorphWidth(content, text);
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-slot",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			ref: content,
+			className: "inline-flex flex-none items-center tabular-nums",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: text,
+				dir: roll.dir,
+				motion: "roll",
+				className: "inline-block",
+				children: text
+			})
+		})
+	});
+}
+function Pill({ reaction, option, pop, onToggle }) {
+	const noun = reaction.count === 1 ? "reaction" : "reactions";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-reaction": reaction.id,
+		"aria-pressed": reaction.reacted,
+		"aria-label": `${option.label}, ${reaction.count} ${noun}${reaction.reacted ? ", including yours" : ""}`,
+		onClick: () => onToggle(reaction.id),
+		className: "reactions-pill",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-pop": pop > 0 ? "" : void 0,
+				className: "reactions-icon",
+				"aria-hidden": "true",
+				children: option.icon
+			}, pop),
+			/* @__PURE__ */ jsx(Count, { value: reaction.count }),
+			/* @__PURE__ */ jsx("span", {
+				className: "reactions-tip",
+				"aria-hidden": "true",
+				children: option.label
+			})
+		]
+	});
+}
+/**
+* One place in the bar. A slot added after the first render opens from nothing
+* while its pill fades up and scales in, so the others glide over; one that is
+* removed stays, shrinking and collapsing, until its exit ends. Nothing animates
+* at first render.
+*/
+function Slot({ leaving, ready, onDone, id, children }) {
+	const [fresh] = useState(ready);
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(leaving, remove, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) remove();
+	}, [leaving, remove]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": leaving ? "reactions-leaving" : void 0,
+		"aria-hidden": leaving || void 0,
+		ref: (node) => {
+			if (!node) return;
+			if (leaving) node.setAttribute("inert", "");
+			else node.removeAttribute("inert");
+		},
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.animationName === "chip-slot-out") remove();
+		},
+		className: cnAll("min-w-0 flex-none [interpolate-size:allow-keywords]", leaving ? "pointer-events-none motion-safe:animate-chip-out" : fresh && "motion-safe:animate-chip-in motion-reduce:animate-fade-in"),
+		children
+	});
+}
+/** The tray of every option. A shared highlight glides to the hovered or focused option, and a caption names it. */
+function Picker({ options, reacted, onPick }) {
+	const [focusIndex, setFocusIndex] = useState(0);
+	const [hovered, setHovered] = useState(null);
+	const active = Math.min(hovered ?? focusIndex, options.length - 1);
+	const buttons = useRef([]);
+	useEffect(() => {
+		buttons.current[0]?.focus();
+	}, []);
+	function onKeyDown(event) {
+		const steps = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		};
+		const count = options.length;
+		const next = event.key in steps ? (focusIndex + steps[event.key] + count) % count : event.key === "Home" ? 0 : event.key === "End" ? count - 1 : -1;
+		if (next < 0) return;
+		event.preventDefault();
+		setHovered(null);
+		setFocusIndex(next);
+		buttons.current[next]?.focus();
+	}
+	const option = options[active];
+	const chosen = option ? reacted.has(option.id) : false;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		"aria-label": "Reactions",
+		"aria-orientation": "horizontal",
+		className: "reactions-options",
+		style: { "--active": active },
+		onKeyDown,
+		onPointerLeave: () => setHovered(null),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "reactions-highlight",
+			"aria-hidden": "true"
+		}), options.map((item, index) => /* @__PURE__ */ jsx("button", {
+			ref: (node) => {
+				buttons.current[index] = node;
+			},
+			type: "button",
+			className: "reactions-option",
+			style: { "--i": index },
+			"data-active": index === active ? "" : void 0,
+			"aria-label": item.label,
+			"aria-pressed": reacted.has(item.id),
+			tabIndex: index === focusIndex ? 0 : -1,
+			onFocus: () => setFocusIndex(index),
+			onPointerMove: (event) => {
+				if (event.pointerType === "mouse" && hovered !== index) setHovered(index);
+			},
+			onClick: () => onPick(item.id),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "reactions-option-icon",
+				"aria-hidden": "true",
+				children: item.icon
+			})
+		}, item.id))]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "reactions-caption",
+		"aria-hidden": "true",
+		children: option ? /* @__PURE__ */ jsx(SwapText, {
+			swapKey: `${option.id}:${chosen}`,
+			motion: "rise",
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1",
+				children: [chosen ? /* @__PURE__ */ jsx(CheckIcon, {}) : null, option.label]
+			})
+		}) : null
+	})] });
+}
+function Reactions({ options, value, defaultValue = [], onValueChange, label = "Reactions", className }) {
+	const [own, setOwn] = useState(defaultValue);
+	const list = value ?? own;
+	const [pops, setPops] = useState({});
+	const [announcement, setAnnouncement] = useState("");
+	const [open, setOpen] = useState(false);
+	const frame = useRef(null);
+	const bar = useRef(null);
+	const refocus = useRef(null);
+	const byId = new Map(options.map((option) => [option.id, option]));
+	const shown = list.filter((reaction) => reaction.count > 0 && byId.has(reaction.id));
+	const reacted = new Set(shown.filter((reaction) => reaction.reacted).map((reaction) => reaction.id));
+	const places = useLeavingList(shown);
+	const [ready, setReady] = useState(false);
+	useIsomorphicLayoutEffect(() => setReady(true), []);
+	useHeightFollow(frame, bar, shown.map((reaction) => `${reaction.id}${reaction.count}`).join());
+	useIsomorphicLayoutEffect(() => {
+		const target = refocus.current;
+		if (!target) return;
+		refocus.current = null;
+		(target === "add" ? bar.current?.querySelector("[data-add]") : bar.current?.querySelector(`[data-reaction="${CSS.escape(target)}"]`))?.focus();
+	});
+	function toggle(id) {
+		const option = byId.get(id);
+		if (!option) return;
+		const current = shown.find((reaction) => reaction.id === id);
+		const add = !current?.reacted;
+		const count = Math.max(0, (current?.count ?? 0) + (add ? 1 : -1));
+		const next = current ? list.map((reaction) => reaction.id === id ? {
+			...reaction,
+			count,
+			reacted: add
+		} : reaction).filter((reaction) => reaction.count > 0) : [...list.filter((reaction) => reaction.id !== id), {
+			id,
+			count: 1,
+			reacted: true
+		}];
+		if (count === 0) {
+			const pill = bar.current?.querySelector(`[data-reaction="${CSS.escape(id)}"]`);
+			if (pill && pill === document.activeElement) {
+				const index = shown.findIndex((reaction) => reaction.id === id);
+				refocus.current = shown[index + 1]?.id ?? shown[index - 1]?.id ?? "add";
+			}
+		}
+		if (add) setPops((previous) => ({
+			...previous,
+			[id]: (previous[id] ?? 0) + 1
+		}));
+		if (value === void 0) setOwn(next);
+		setAnnouncement(add ? `Added ${option.label}. ${count} ${count === 1 ? "reaction" : "reactions"}.` : count ? `Removed ${option.label}. ${count} ${count === 1 ? "reaction" : "reactions"}.` : `Removed ${option.label}.`);
+		onValueChange?.(next, {
+			id,
+			reacted: add
+		});
+	}
+	function pick(id) {
+		setOpen(false);
+		toggle(id);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: frame,
+		"data-slot": "reactions",
+		className: cn("reactions height-follow", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: bar,
+			role: "group",
+			"aria-label": label,
+			className: "reactions-bar",
+			children: [places.list.map(({ item, leaving }) => /* @__PURE__ */ jsx(Slot, {
+				id: item.id,
+				leaving,
+				ready,
+				onDone: places.done,
+				children: /* @__PURE__ */ jsx(Pill, {
+					reaction: item,
+					option: byId.get(item.id) ?? options[0],
+					pop: pops[item.id] ?? 0,
+					onToggle: toggle
+				})
+			}, item.id)), /* @__PURE__ */ jsxs(PopoverTrigger, {
+				isOpen: open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsxs(Button, {
+					"data-add": "",
+					"aria-label": "Add reaction",
+					className: "reactions-add",
+					children: [/* @__PURE__ */ jsx(IconSwap, {
+						iconKey: open ? "close" : "add",
+						tight: true,
+						children: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(AddIcon, {})
+					}), open ? null : /* @__PURE__ */ jsx("span", {
+						className: "reactions-tip",
+						"aria-hidden": "true",
+						children: "Add reaction"
+					})]
+				}), /* @__PURE__ */ jsx(Popover$1, {
+					placement: "top",
+					offset: 8,
+					entrance: "none",
+					className: "reactions-picker w-auto p-1.5",
+					children: /* @__PURE__ */ jsx(Picker, {
+						options,
+						reacted,
+						onPick: pick
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			children: announcement
+		})]
+	});
+}
+//#endregion
+export { Reactions };
+
+//# sourceMappingURL=reactions.js.map

package/dist/reactions/reactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactions.js","names":["AriaButton","Popover"],"sources":["../../src/reactions/reactions.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport {\n  prefersReducedMotion,\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useMorphWidth,\n} from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\n\n/**\n * Reactions: a reaction bar for comments, posts and release notes. Each pill shows\n * one reaction and how many people chose it; the viewer's own carry the primary\n * tint and a filled glyph (never colour alone). Pressing a pill adds or removes\n * the viewer's reaction, and the add button opens a compact picker that grows out\n * of it. Use it for quick acknowledgement; when people need to say something\n * specific, give them a reply field instead.\n *\n * Adding gives the icon a kick (it overshoots and settles), the count swaps to its\n * new number, a pill that arrives or leaves opens or closes its slot so the others\n * glide, and the bar follows its own height when it wraps. In the picker a shared\n * highlight glides to the hovered or focused option and a caption names it.\n * Arrow keys, Home and End move through the options. A change is announced\n * politely (\"Added Like. 3 reactions.\"). Reduced motion fades.\n */\nexport interface ReactionOption {\n  id: string;\n  /** The reaction's name, used on the pill, in the picker and in announcements. */\n  label: string;\n  /** The glyph: an svg that takes `currentColor`, 16px on a pill and 20px in the picker. */\n  icon: ReactNode;\n}\n\nexport interface Reaction {\n  id: string;\n  count: number;\n  /** Whether the viewer chose it. */\n  reacted: boolean;\n}\n\nexport interface ReactionsProps {\n  /** Every reaction the picker offers, in picker order. */\n  options: ReactionOption[];\n  /** Controlled reactions. Pills keep this order, and a reaction whose count reaches zero leaves the bar. */\n  value?: Reaction[];\n  /** The reactions when uncontrolled. */\n  defaultValue?: Reaction[];\n  /** Called with the next reactions and the change that produced them. */\n  onValueChange?: (next: Reaction[], change: { id: string; reacted: boolean }) => void;\n  /** Accessible name for the bar. @default \"Reactions\" */\n  label?: string;\n  /** Extra classes for the bar. Merged last. */\n  className?: string;\n}\n\nconst iconProps: SVGProps<SVGSVGElement> = {\n  width: 16,\n  height: 16,\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: 1.75,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  \"aria-hidden\": true,\n};\n\nconst AddIcon = () => (\n  <svg {...iconProps}>\n    <circle cx={11} cy={13} r={8} />\n    <path d=\"M7.5 15.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8M8.5 11h.01M13.5 11h.01M19 2v6M16 5h6\" />\n  </svg>\n);\nconst CloseIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M6 6l12 12M18 6 6 18\" />\n  </svg>\n);\nconst CheckIcon = () => (\n  <svg {...iconProps} width={12} height={12} strokeWidth={2}>\n    <path d=\"M5 12.5 10 17.5 19 7\" />\n  </svg>\n);\n\n/** The count: a changed number swaps (rising in when it grows, dropping in when it shrinks) and the pill's width springs to it. */\nfunction Count({ value }: { value: number }) {\n  const [roll, setRoll] = useState({ value, dir: 1 });\n  if (roll.value !== value) setRoll({ value, dir: value > roll.value ? 1 : -1 });\n  const content = useRef<HTMLSpanElement>(null);\n  const text = String(value);\n  useMorphWidth(content, text);\n  return (\n    <span className=\"button-slot\" aria-hidden=\"true\">\n      <span ref={content} className=\"inline-flex flex-none items-center tabular-nums\">\n        <SwapText swapKey={text} dir={roll.dir} motion=\"roll\" className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\nfunction Pill({\n  reaction,\n  option,\n  pop,\n  onToggle,\n}: {\n  reaction: Reaction;\n  option: ReactionOption;\n  pop: number;\n  onToggle: (id: string) => void;\n}) {\n  const noun = reaction.count === 1 ? \"reaction\" : \"reactions\";\n  return (\n    <button\n      type=\"button\"\n      data-reaction={reaction.id}\n      aria-pressed={reaction.reacted}\n      aria-label={`${option.label}, ${reaction.count} ${noun}${reaction.reacted ? \", including yours\" : \"\"}`}\n      onClick={() => onToggle(reaction.id)}\n      className=\"reactions-pill\"\n    >\n      {/* A new key each time it is added, so the kick plays again even on a quick second press. */}\n      <span\n        key={pop}\n        data-pop={pop > 0 ? \"\" : undefined}\n        className=\"reactions-icon\"\n        aria-hidden=\"true\"\n      >\n        {option.icon}\n      </span>\n      <Count value={reaction.count} />\n      <span className=\"reactions-tip\" aria-hidden=\"true\">\n        {option.label}\n      </span>\n    </button>\n  );\n}\n\n/**\n * One place in the bar. A slot added after the first render opens from nothing\n * while its pill fades up and scales in, so the others glide over; one that is\n * removed stays, shrinking and collapsing, until its exit ends. Nothing animates\n * at first render.\n */\nfunction Slot({\n  leaving,\n  ready,\n  onDone,\n  id,\n  children,\n}: {\n  leaving: boolean;\n  ready: boolean;\n  onDone: (id: string) => void;\n  id: string;\n  children: ReactNode;\n}) {\n  // Decided once, at this slot's own mount.\n  const [fresh] = useState(ready);\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(leaving, remove, 900);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) remove();\n  }, [leaving, remove]);\n  return (\n    <div\n      data-slot={leaving ? \"reactions-leaving\" : undefined}\n      aria-hidden={leaving || undefined}\n      ref={(node) => {\n        if (!node) return;\n        if (leaving) node.setAttribute(\"inert\", \"\");\n        else node.removeAttribute(\"inert\");\n      }}\n      onAnimationEnd={(event) => {\n        if (\n          leaving &&\n          event.target === event.currentTarget &&\n          event.animationName === \"chip-slot-out\"\n        )\n          remove();\n      }}\n      className={cnAll(\n        \"min-w-0 flex-none [interpolate-size:allow-keywords]\",\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : fresh && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** The tray of every option. A shared highlight glides to the hovered or focused option, and a caption names it. */\nfunction Picker({\n  options,\n  reacted,\n  onPick,\n}: {\n  options: ReactionOption[];\n  reacted: Set<string>;\n  onPick: (id: string) => void;\n}) {\n  const [focusIndex, setFocusIndex] = useState(0);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const active = Math.min(hovered ?? focusIndex, options.length - 1);\n  const buttons = useRef<(HTMLButtonElement | null)[]>([]);\n  // The first option takes focus once the popover has recorded where focus was, so closing hands it back to the add button.\n  useEffect(() => {\n    buttons.current[0]?.focus();\n  }, []);\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const steps: Record<string, number> = {\n      ArrowRight: 1,\n      ArrowDown: 1,\n      ArrowLeft: -1,\n      ArrowUp: -1,\n    };\n    const count = options.length;\n    const next =\n      event.key in steps\n        ? (focusIndex + steps[event.key]! + count) % count\n        : event.key === \"Home\"\n          ? 0\n          : event.key === \"End\"\n            ? count - 1\n            : -1;\n    if (next < 0) return;\n    event.preventDefault();\n    setHovered(null);\n    setFocusIndex(next);\n    buttons.current[next]?.focus();\n  }\n\n  const option = options[active];\n  const chosen = option ? reacted.has(option.id) : false;\n  return (\n    <>\n      <div\n        role=\"toolbar\"\n        aria-label=\"Reactions\"\n        aria-orientation=\"horizontal\"\n        className=\"reactions-options\"\n        style={{ \"--active\": active } as CSSProperties}\n        onKeyDown={onKeyDown}\n        onPointerLeave={() => setHovered(null)}\n      >\n        <span className=\"reactions-highlight\" aria-hidden=\"true\" />\n        {options.map((item, index) => (\n          <button\n            key={item.id}\n            ref={(node) => {\n              buttons.current[index] = node;\n            }}\n            type=\"button\"\n            className=\"reactions-option\"\n            style={{ \"--i\": index } as CSSProperties}\n            data-active={index === active ? \"\" : undefined}\n            aria-label={item.label}\n            aria-pressed={reacted.has(item.id)}\n            tabIndex={index === focusIndex ? 0 : -1}\n            onFocus={() => setFocusIndex(index)}\n            onPointerMove={(event) => {\n              if (event.pointerType === \"mouse\" && hovered !== index) setHovered(index);\n            }}\n            onClick={() => onPick(item.id)}\n          >\n            <span className=\"reactions-option-icon\" aria-hidden=\"true\">\n              {item.icon}\n            </span>\n          </button>\n        ))}\n      </div>\n      <div className=\"reactions-caption\" aria-hidden=\"true\">\n        {option ? (\n          <SwapText swapKey={`${option.id}:${chosen}`} motion=\"rise\" className=\"inline-flex\">\n            <span className=\"inline-flex items-center gap-1\">\n              {chosen ? <CheckIcon /> : null}\n              {option.label}\n            </span>\n          </SwapText>\n        ) : null}\n      </div>\n    </>\n  );\n}\n\nexport function Reactions({\n  options,\n  value,\n  defaultValue = [],\n  onValueChange,\n  label = \"Reactions\",\n  className,\n}: ReactionsProps) {\n  const [own, setOwn] = useState(defaultValue);\n  const list = value ?? own;\n  const [pops, setPops] = useState<Record<string, number>>({});\n  const [announcement, setAnnouncement] = useState(\"\");\n  const [open, setOpen] = useState(false);\n  const frame = useRef<HTMLDivElement>(null);\n  const bar = useRef<HTMLDivElement>(null);\n  const refocus = useRef<string | null>(null);\n  const byId = new Map(options.map((option) => [option.id, option]));\n  const shown = list.filter((reaction) => reaction.count > 0 && byId.has(reaction.id));\n  const reacted = new Set(\n    shown.filter((reaction) => reaction.reacted).map((reaction) => reaction.id),\n  );\n  const places = useLeavingList(shown);\n  // Pills that arrive after the first render open and fade in; the ones there from the start never animate.\n  const [ready, setReady] = useState(false);\n  useIsomorphicLayoutEffect(() => setReady(true), []);\n  // Wrapping onto a new row changes the bar's height; the frame follows it instead of shoving the content below.\n  useHeightFollow(frame, bar, shown.map((reaction) => `${reaction.id}${reaction.count}`).join());\n\n  // A pill that leaves while focused hands focus to its neighbour, or to the add button, so keyboard users never fall back to the page.\n  useIsomorphicLayoutEffect(() => {\n    const target = refocus.current;\n    if (!target) return;\n    refocus.current = null;\n    const next =\n      target === \"add\"\n        ? bar.current?.querySelector<HTMLElement>(\"[data-add]\")\n        : bar.current?.querySelector<HTMLElement>(`[data-reaction=\"${CSS.escape(target)}\"]`);\n    next?.focus();\n  });\n\n  function toggle(id: string) {\n    const option = byId.get(id);\n    if (!option) return;\n    const current = shown.find((reaction) => reaction.id === id);\n    const add = !current?.reacted;\n    const count = Math.max(0, (current?.count ?? 0) + (add ? 1 : -1));\n    const next = current\n      ? list\n          .map((reaction) => (reaction.id === id ? { ...reaction, count, reacted: add } : reaction))\n          .filter((reaction) => reaction.count > 0)\n      : [...list.filter((reaction) => reaction.id !== id), { id, count: 1, reacted: true }];\n    if (count === 0) {\n      const pill = bar.current?.querySelector(`[data-reaction=\"${CSS.escape(id)}\"]`);\n      if (pill && pill === document.activeElement) {\n        const index = shown.findIndex((reaction) => reaction.id === id);\n        refocus.current = shown[index + 1]?.id ?? shown[index - 1]?.id ?? \"add\";\n      }\n    }\n    if (add) setPops((previous) => ({ ...previous, [id]: (previous[id] ?? 0) + 1 }));\n    if (value === undefined) setOwn(next);\n    setAnnouncement(\n      add\n        ? `Added ${option.label}. ${count} ${count === 1 ? \"reaction\" : \"reactions\"}.`\n        : count\n          ? `Removed ${option.label}. ${count} ${count === 1 ? \"reaction\" : \"reactions\"}.`\n          : `Removed ${option.label}.`,\n    );\n    onValueChange?.(next, { id, reacted: add });\n  }\n\n  function pick(id: string) {\n    setOpen(false);\n    toggle(id);\n  }\n\n  return (\n    <div ref={frame} data-slot=\"reactions\" className={cn(\"reactions height-follow\", className)}>\n      <div ref={bar} role=\"group\" aria-label={label} className=\"reactions-bar\">\n        {places.list.map(({ item, leaving }) => (\n          <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n            <Pill\n              reaction={item}\n              option={byId.get(item.id) ?? options[0]!}\n              pop={pops[item.id] ?? 0}\n              onToggle={toggle}\n            />\n          </Slot>\n        ))}\n        <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n          {/* The add button anchors the picker, so it answers a press with colour and never scales. */}\n          <AriaButton data-add=\"\" aria-label=\"Add reaction\" className=\"reactions-add\">\n            <IconSwap iconKey={open ? \"close\" : \"add\"} tight>\n              {open ? <CloseIcon /> : <AddIcon />}\n            </IconSwap>\n            {open ? null : (\n              <span className=\"reactions-tip\" aria-hidden=\"true\">\n                Add reaction\n              </span>\n            )}\n          </AriaButton>\n          <Popover\n            placement=\"top\"\n            offset={8}\n            entrance=\"none\"\n            className=\"reactions-picker w-auto p-1.5\"\n          >\n            <Picker options={options} reacted={reacted} onPick={pick} />\n          </Popover>\n        </PopoverTrigger>\n      </div>\n      <span className=\"sr-only\" role=\"status\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/rich-text-editor/index.d.ts

@@ -0,0 +1,3 @@
+import { BlockType, RichTextValue } from "./rich-text-engine.js";
+import { RichTextEditor, RichTextEditorHandle, RichTextEditorProps } from "./rich-text-editor.js";
+export { type BlockType, RichTextEditor, type RichTextEditorHandle, type RichTextEditorProps, type RichTextValue };

package/dist/rich-text-editor/index.js

@@ -0,0 +1,2 @@
+import { RichTextEditor } from "./rich-text-editor.js";
+export { RichTextEditor };

package/dist/rich-text-editor/rich-text-editor.d.ts

@@ -0,0 +1,70 @@
+import { BlockType, RichTextValue } from "./rich-text-engine.js";
+import { ReactNode } from "react";
+//#region src/rich-text-editor/rich-text-editor.d.ts
+/** What the editor can be told to do from outside. */
+export interface RichTextEditorHandle {
+  focus: () => void;
+  getHTML: () => string;
+  getMarkdown: () => string;
+  getText: () => string;
+  /** Replaces the document. Reports a change, like an edit. */
+  setHTML: (html: string) => void;
+  /** Replaces the document with Markdown. Reports a change, like an edit. */
+  setMarkdown: (markdown: string) => void;
+  /** Empties the document. Reports a change, like an edit. */
+  clear: () => void;
+  undo: () => void;
+  redo: () => void;
+  /** The editable element. Null before mount. */
+  element: HTMLDivElement | null;
+}
+/**
+ * A rich text field: headings, lists, quotes, code, dividers, links and marks, with a floating
+ * selection toolbar, a slash menu for blocks and Markdown shortcuts as you type.
+ *
+ * The value is canonical HTML in a fixed vocabulary (p, h1-h3, ul, ol, li, blockquote, pre, hr,
+ * strong, em, u, s, code, a[href], br), cleaned on the way in and on the way out. It is not the
+ * engine's own format, so a stored value does not depend on the engine.
+ *
+ * @example
+ * <RichTextEditor label="Notes" value={html} onChange={(v) => setHtml(v.html)} />
+ */
+export interface RichTextEditorProps {
+  /** Controlled HTML. The editor rewrites its content only when this differs from what it last reported, so typing never fights the caret. */
+  value?: string;
+  /** Initial HTML for an uncontrolled editor. */
+  defaultValue?: string;
+  /** Initial content as Markdown, used when no HTML is given. */
+  defaultMarkdown?: string;
+  /** Called with the document in every format after each edit (not after a controlled `value` arrives). */
+  onChange?: (value: RichTextValue) => void;
+  /** Reports whether undo and redo are available, for your own buttons. */
+  onHistoryChange?: (state: {
+    canUndo: boolean;
+    canRedo: boolean;
+  }) => void;
+  /** Shown while the document is empty. @default "Start writing" */
+  placeholder?: string;
+  /** The hint on an empty line while typing. @default "Type / for blocks" */
+  blockHint?: string;
+  /** Not focusable and not editable, muted. */
+  isDisabled?: boolean;
+  /** Focusable and selectable, but not editable. The toolbar and slash menu do not open. */
+  isReadOnly?: boolean;
+  autoFocus?: boolean;
+  /** A visible label above the field, which names it. */
+  label?: ReactNode;
+  /** Helper text under the field, named by `aria-describedby`. */
+  description?: string;
+  /** Error text under the field. Sets `aria-invalid` and is announced when it appears. */
+  error?: string;
+  /** The accessible name when there is no `label`. @default "Editor" */
+  "aria-label"?: string;
+  id?: string;
+  /** Extra classes on the outer element. */
+  className?: string;
+}
+export declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<RichTextEditorHandle>>;
+//#endregion
+export type { BlockType, RichTextValue };
+//# sourceMappingURL=rich-text-editor.d.ts.map