@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/progress/progress.js

@@ -1,9 +1,11 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
+import { useAfter, useCountTo } from "../lib/count-to.js";
+import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Label, ProgressBar } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/progress/progress.tsx
 /**
 * Progress, ported from the legacy shadcn/Radix component.
@@ -37,7 +39,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 */
 const progressVariants = cva(["flex w-full flex-col gap-1.5 box-border font-sans"]);
 const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "bg-muted border-(length:--border-width) border-border"]);
-const progressFillVariants = cva(["h-full rounded-pill", "motion-safe:transition-[width] motion-safe:duration-(--duration-base) motion-safe:ease-standard"], {
+const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 	variants: { tone: {
 		neutral: "bg-primary-strong",
 		success: "bg-success-strong",
@@ -47,24 +49,62 @@ const progressFillVariants = cva(["h-full rounded-pill", "motion-safe:transition
 	} },
 	defaultVariants: { tone: "neutral" }
 });
+/**
+* The printed value. A percentage counts to its new number on the same spring the
+* fill follows, and a check lands beside the final count once the bar is full.
+* Any other text (a price, a step count) is shown as it is.
+*/
+function ProgressValue({ percentage, valueText }) {
+	const percent = Math.round(percentage);
+	const counted = useCountTo(percent);
+	const done = useAfter(percent >= 100, 240);
+	const isPercent = valueText === `${percent}%`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isPercent ? `${counted}%` : valueText, isPercent ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "progress-done",
+		className: "ms-1 inline-flex align-middle text-success-strong",
+		children: /* @__PURE__ */ jsx(SwapText, {
+			swapKey: done ? "done" : "",
+			motion: "glyph",
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: "size-3.5",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-6" })
+			})
+		})
+	}) : null] });
+}
 const Progress = forwardRef(function Progress({ label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ProgressBar, {
 		ref,
 		...props,
 		"data-slot": "progress",
 		className: cn(progressVariants(), className),
-		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			"data-slot": "progress-header",
 			className: cnAll(showValue && "flex items-baseline justify-between gap-2"),
 			children: [/* @__PURE__ */ jsx(Label, {
 				"data-slot": "progress-label",
 				className: cnAll("text-sm leading-(--leading-normal) text-foreground", labelHidden && "sr-only"),
-				children: label
+				children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
+					swapKey: label,
+					className: "block",
+					children: label
+				}) : label
 			}), showValue ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "progress-value",
 				"aria-hidden": "true",
 				className: "text-sm leading-(--leading-normal) text-muted-foreground tabular-nums",
-				children: valueText
+				children: /* @__PURE__ */ jsx(ProgressValue, {
+					percentage: percentage ?? 0,
+					valueText
+				})
 			}) : null]
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "progress-track",
@@ -72,6 +112,7 @@ const Progress = forwardRef(function Progress({ label, labelHidden, showValue, t
 			children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "progress-fill",
 				"data-indeterminate": isIndeterminate || void 0,
+				"data-complete": (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
 				className: cn(progressFillVariants({ tone }), fillClassName),
 				style: { width: isIndeterminate ? "0%" : `${percentage ?? 0}%` }
 			})

package/dist/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  ProgressBar as AriaProgressBar,\n  type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n */\nexport const progressVariants = cva([\"flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const progressTrackVariants = cva([\n  \"relative h-2 w-full overflow-hidden rounded-pill box-border\",\n  // muted, NOT `border` as the Switch uses. A switch has no fill; a\n  // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n  // the two halves are the same grey and the value disappears.\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const progressFillVariants = cva(\n  [\n    \"h-full rounded-pill\",\n    \"motion-safe:transition-[width] motion-safe:duration-(--duration-base) motion-safe:ease-standard\",\n  ],\n  {\n    variants: {\n      /*\n       * What the value MEANS, which for a progress bar is usually a score\n       * rather than a completion. The product's bar carried exactly this axis\n       * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n       * colour performance metrics.\n       *\n       * `-strong` throughout: the fill sits on the `muted` track and has to\n       * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n       * same reason the track is muted rather than `border` -- primary-strong\n       * on a `border` track measures 1.01:1 and the value disappears.\n       */\n      tone: {\n        neutral: \"bg-primary-strong\",\n        success: \"bg-success-strong\",\n        warning: \"bg-warning-strong\",\n        danger: \"bg-destructive-strong\",\n        info: \"bg-info-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n    VariantProps<typeof progressFillVariants> {\n  /**\n   * What is progressing, and the bar's accessible name.\n   *\n   * **Required.** Both legacy call sites render an unnamed progressbar.\n   * Pass `labelHidden` when the surrounding UI already says it.\n   */\n  label: ReactNode;\n  /**\n   * Render the label for screen readers only.\n   *\n   * Both legacy call sites sit beside visible text that was never\n   * associated with the bar -- this is how that text becomes the name\n   * without printing it twice.\n   */\n  labelHidden?: boolean;\n  /**\n   * Print the value beside the label.\n   *\n   * The text itself comes from React Aria, which already formats it from\n   * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n   * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n   * without a second prop here. It was never RENDERED before: the bar\n   * announced its value to assistive tech and showed a sighted reader nothing.\n   */\n  showValue?: boolean;\n  /** Extra classes for the track. */\n  trackClassName?: string;\n  /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n  fillClassName?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  { label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props },\n  ref,\n) {\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      data-slot=\"progress\"\n      className={cn(progressVariants(), className)}\n    >\n      {({ percentage, isIndeterminate, valueText }) => (\n        <>\n          {/*\n            The row exists only when the value is printed. Wrapping the label\n            in a flex row unconditionally would change the label's box for\n            every existing consumer to no purpose.\n          */}\n          <div\n            data-slot=\"progress-header\"\n            className={cnAll(showValue && \"flex items-baseline justify-between gap-2\")}\n          >\n            <AriaLabel\n              data-slot=\"progress-label\"\n              className={cnAll(\n                \"text-sm leading-(--leading-normal) text-foreground\",\n                labelHidden && \"sr-only\",\n              )}\n            >\n              {label}\n            </AriaLabel>\n            {showValue ? (\n              <span\n                data-slot=\"progress-value\"\n                // aria-hidden: React Aria already announces the value on the\n                // progressbar itself. Without this a screen reader reads it\n                // twice, once as the widget's value and once as loose text.\n                aria-hidden=\"true\"\n                className=\"text-sm leading-(--leading-normal) text-muted-foreground tabular-nums\"\n              >\n                {valueText}\n              </span>\n            ) : null}\n          </div>\n          <div\n            data-slot=\"progress-track\"\n            className={cn(progressTrackVariants(), trackClassName)}\n          >\n            {/*\n              width, not the legacy translateX(-(100 - value)%). That\n              overflowed for value > 100 -- a positive translate slid the\n              indicator off to the right, while the announced value stayed\n              whatever was passed. React Aria clamps the value, so the two\n              can no longer disagree.\n\n              An indeterminate bar renders no fill rather than the\n              legacy's silent 0%: `value={undefined}` became `(value || 0)`\n              there, so a sighted user saw \"0% done\" while a screen reader\n              said \"indeterminate\".\n            */}\n            <div\n              data-slot=\"progress-fill\"\n              data-indeterminate={isIndeterminate || undefined}\n              className={cn(progressFillVariants({ tone }), fillClassName)}\n              style={{ width: isIndeterminate ? \"0%\" : `${percentage ?? 0}%` }}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,mBAAmB,IAAI,CAAC,mDAAmD,CAAC;AAEzF,MAAa,wBAAwB,IAAI,CACvC,+DAIA,uDACF,CAAC;AAED,MAAa,uBAAuB,IAClC,CACE,uBACA,iGACF,GACA;CACE,UAAU,EAYR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AA6CA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,OAAO,aAAa,WAAW,MAAM,gBAAgB,eAAe,WAAW,GAAG,SACpF,KACA;CACA,OACE,oBAACA,aAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,iBAAiB,gBAC/B,qBAAA,UAAA,EAAA,UAAA,CAME,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,MAAM,aAAa,2CAA2C;GAF3E,UAAA,CAIE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,MACT,sDACA,eAAe,SACjB;IAEC,UAAA;GACQ,CAAA,GACV,YACC,oBAAC,QAAD;IACE,aAAU;IAIV,eAAY;IACZ,WAAU;IAET,UAAA;GACG,CAAA,IACJ,IACD;EACL,CAAA,GAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,sBAAsB,GAAG,cAAc;GAcrD,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,sBAAoB,mBAAmB,KAAA;IACvC,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,aAAa;IAC3D,OAAO,EAAE,OAAO,kBAAkB,OAAO,GAAG,cAAc,EAAE,GAAG;GAChE,CAAA;EACE,CAAA,CACL,EAAA,CAAA;CAEW,CAAA;AAErB,CAAC"}
+{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  ProgressBar as AriaProgressBar,\n  type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useAfter, useCountTo } from \"../lib/count-to.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n */\nexport const progressVariants = cva([\"flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const progressTrackVariants = cva([\n  \"relative h-2 w-full overflow-hidden rounded-pill box-border\",\n  // muted, NOT `border` as the Switch uses. A switch has no fill; a\n  // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n  // the two halves are the same grey and the value disappears.\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const progressFillVariants = cva(\n  [\n    \"h-full rounded-pill\",\n    // The fill follows the value on the smooth spring and turns success-coloured when it completes (see progress-fill).\n    \"progress-fill\",\n  ],\n  {\n    variants: {\n      /*\n       * What the value MEANS, which for a progress bar is usually a score\n       * rather than a completion. The product's bar carried exactly this axis\n       * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n       * colour performance metrics.\n       *\n       * `-strong` throughout: the fill sits on the `muted` track and has to\n       * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n       * same reason the track is muted rather than `border` -- primary-strong\n       * on a `border` track measures 1.01:1 and the value disappears.\n       */\n      tone: {\n        neutral: \"bg-primary-strong\",\n        success: \"bg-success-strong\",\n        warning: \"bg-warning-strong\",\n        danger: \"bg-destructive-strong\",\n        info: \"bg-info-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n    VariantProps<typeof progressFillVariants> {\n  /**\n   * What is progressing, and the bar's accessible name.\n   *\n   * **Required.** Both legacy call sites render an unnamed progressbar.\n   * Pass `labelHidden` when the surrounding UI already says it.\n   */\n  label: ReactNode;\n  /**\n   * Render the label for screen readers only.\n   *\n   * Both legacy call sites sit beside visible text that was never\n   * associated with the bar -- this is how that text becomes the name\n   * without printing it twice.\n   */\n  labelHidden?: boolean;\n  /**\n   * Print the value beside the label.\n   *\n   * The text itself comes from React Aria, which already formats it from\n   * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n   * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n   * without a second prop here. It was never RENDERED before: the bar\n   * announced its value to assistive tech and showed a sighted reader nothing.\n   */\n  showValue?: boolean;\n  /** Extra classes for the track. */\n  trackClassName?: string;\n  /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n  fillClassName?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * The printed value. A percentage counts to its new number on the same spring the\n * fill follows, and a check lands beside the final count once the bar is full.\n * Any other text (a price, a step count) is shown as it is.\n */\nfunction ProgressValue({ percentage, valueText }: { percentage: number; valueText: string | undefined }) {\n  const percent = Math.round(percentage);\n  const counted = useCountTo(percent);\n  const done = useAfter(percent >= 100, 240);\n  const isPercent = valueText === `${percent}%`;\n  return (\n    <>\n      {isPercent ? `${counted}%` : valueText}\n      {isPercent ? (\n        <span data-slot=\"progress-done\" className=\"ms-1 inline-flex align-middle text-success-strong\">\n          <SwapText swapKey={done ? \"done\" : \"\"} motion=\"glyph\" className=\"inline-flex\">\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"size-3.5\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          </SwapText>\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  { label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props },\n  ref,\n) {\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      data-slot=\"progress\"\n      className={cn(progressVariants(), className)}\n    >\n      {({ percentage, isIndeterminate, valueText }) => (\n        <>\n          {/*\n            The row exists only when the value is printed. Wrapping the label\n            in a flex row unconditionally would change the label's box for\n            every existing consumer to no purpose.\n          */}\n          <div\n            data-slot=\"progress-header\"\n            className={cnAll(showValue && \"flex items-baseline justify-between gap-2\")}\n          >\n            <AriaLabel\n              data-slot=\"progress-label\"\n              className={cnAll(\n                \"text-sm leading-(--leading-normal) text-foreground\",\n                labelHidden && \"sr-only\",\n              )}\n            >\n              {typeof label === \"string\" ? (\n                <SwapText swapKey={label} className=\"block\">\n                  {label}\n                </SwapText>\n              ) : (\n                label\n              )}\n            </AriaLabel>\n            {showValue ? (\n              <span\n                data-slot=\"progress-value\"\n                // aria-hidden: React Aria already announces the value on the\n                // progressbar itself. Without this a screen reader reads it\n                // twice, once as the widget's value and once as loose text.\n                aria-hidden=\"true\"\n                className=\"text-sm leading-(--leading-normal) text-muted-foreground tabular-nums\"\n              >\n                <ProgressValue percentage={percentage ?? 0} valueText={valueText} />\n              </span>\n            ) : null}\n          </div>\n          <div\n            data-slot=\"progress-track\"\n            className={cn(progressTrackVariants(), trackClassName)}\n          >\n            {/*\n              width, not the legacy translateX(-(100 - value)%). That\n              overflowed for value > 100 -- a positive translate slid the\n              indicator off to the right, while the announced value stayed\n              whatever was passed. React Aria clamps the value, so the two\n              can no longer disagree.\n\n              An indeterminate bar renders no fill rather than the\n              legacy's silent 0%: `value={undefined}` became `(value || 0)`\n              there, so a sighted user saw \"0% done\" while a screen reader\n              said \"indeterminate\".\n            */}\n            <div\n              data-slot=\"progress-fill\"\n              data-indeterminate={isIndeterminate || undefined}\n              // A default-toned bar turns success-coloured when it completes; an explicit tone is never overridden.\n              data-complete={(!tone || tone === \"neutral\") && !isIndeterminate && (percentage ?? 0) >= 100 ? \"\" : undefined}\n              className={cn(progressFillVariants({ tone }), fillClassName)}\n              style={{ width: isIndeterminate ? \"0%\" : `${percentage ?? 0}%` }}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,mBAAmB,IAAI,CAAC,mDAAmD,CAAC;AAEzF,MAAa,wBAAwB,IAAI,CACvC,+DAIA,uDACF,CAAC;AAED,MAAa,uBAAuB,IAClC,CACE,uBAEA,eACF,GACA;CACE,UAAU,EAYR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;;;;;;AAkDA,SAAS,cAAc,EAAE,YAAY,aAAoE;CACvG,MAAM,UAAU,KAAK,MAAM,UAAU;CACrC,MAAM,UAAU,WAAW,OAAO;CAClC,MAAM,OAAO,SAAS,WAAW,KAAK,GAAG;CACzC,MAAM,YAAY,cAAc,GAAG,QAAQ;CAC3C,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,YAAY,GAAG,QAAQ,KAAK,WAC5B,YACC,oBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EACxC,UAAA,oBAAC,UAAD;GAAU,SAAS,OAAO,SAAS;GAAI,QAAO;GAAQ,WAAU;GAC9D,UAAA,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IACV,eAAY;IAEZ,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA;EACG,CAAA;CACN,CAAA,IACJ,IACJ,EAAA,CAAA;AAEN;AAEA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,OAAO,aAAa,WAAW,MAAM,gBAAgB,eAAe,WAAW,GAAG,SACpF,KACA;CACA,OACE,oBAACA,aAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,iBAAiB,gBAC/B,qBAAA,YAAA,EAAA,UAAA,CAME,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,MAAM,aAAa,2CAA2C;GAF3E,UAAA,CAIE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,MACT,sDACA,eAAe,SACjB;IAEC,UAAA,OAAO,UAAU,WAChB,oBAAC,UAAD;KAAU,SAAS;KAAO,WAAU;KACjC,UAAA;IACO,CAAA,IAEV;GAEO,CAAA,GACV,YACC,oBAAC,QAAD;IACE,aAAU;IAIV,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,eAAD;KAAe,YAAY,cAAc;KAAc;IAAY,CAAA;GAC/D,CAAA,IACJ,IACD;EACL,CAAA,GAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,sBAAsB,GAAG,cAAc;GAcrD,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,sBAAoB,mBAAmB,KAAA;IAEvC,kBAAgB,CAAC,QAAQ,SAAS,cAAc,CAAC,oBAAoB,cAAc,MAAM,MAAM,KAAK,KAAA;IACpG,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,aAAa;IAC3D,OAAO,EAAE,OAAO,kBAAkB,OAAO,GAAG,cAAc,EAAE,GAAG;GAChE,CAAA;EACE,CAAA,CACL,EAAA,CAAA;CAEW,CAAA;AAErB,CAAC"}

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

@@ -4,7 +4,7 @@ import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Radio, RadioGroup } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/radio-group/radio-group.tsx
 /**
 * RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.
@@ -28,8 +28,8 @@ 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",
-	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"bg-surface border-control-edge",
+	"radio-mark",
 	"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong",
 	"group-data-[selected]:text-primary-foreground",
 	selectionRingVariants()
@@ -48,14 +48,15 @@ const Radio$1 = forwardRef(function Radio$2({ className, children, ...props }, r
 		inputRef: ref,
 		"data-slot": "radio",
 		className: cn(cnAll(selectionLabelVariants(), "justify-start"), className),
-		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-slot": "radio-dot",
 			className: radioVariants(),
-			children: isSelected ? /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsx("span", {
 				"data-slot": "radio-indicator",
-				className: "size-1.5 rounded-full bg-current"
-			}) : null
+				"data-selected": isSelected || void 0,
+				className: "radio-dot size-1.5 rounded-full bg-current"
+			})
 		}), children == null ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "radio-label",
 			children

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  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\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            {isSelected ? (\n              // Rendered in JS rather than toggled with CSS, so the\n              // precedence is explicit and a test can read it from the DOM.\n              <span data-slot=\"radio-indicator\" className=\"size-1.5 rounded-full bg-current\" />\n            ) : null}\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;CACA;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,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAY,WAAW,cAAc;GACrE,UAAA,aAGC,oBAAC,QAAD;IAAM,aAAU;IAAkB,WAAU;GAAoC,CAAA,IAC9E;EACA,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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"}