@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/Pagination.tsx

@@ -20,8 +20,8 @@ export function Pagination({
   const containerRef = useRef<HTMLDivElement>(null);
   const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});
 
-  const measurePill = () => {
-    const btn = btnRefs.current[String(currentPage)];
+  const measurePill = (page: number) => {
+    const btn = btnRefs.current[String(page)];
     const container = containerRef.current;
     if (!btn || !container) return;
     const cr = container.getBoundingClientRect();
@@ -29,18 +29,15 @@ export function Pagination({
     setPill({ left: br.left - cr.left, width: br.width, ready: true });
   };
 
-  useLayoutEffect(() => {
-    measurePill();
-  }, []);
-
   /* Only the thumb moves: it glides to the new page without overshoot,
-     and the numbers themselves stay still.                            */
-  useEffect(() => {
-    measurePill();
+     and the numbers themselves stay still. Measured before paint, so it
+     is never seen out of place.                                        */
+  useLayoutEffect(() => {
+    measurePill(currentPage);
   }, [currentPage]);
 
   useEffect(() => {
-    const ro = new ResizeObserver(() => measurePill());
+    const ro = new ResizeObserver(() => measurePill(currentPage));
     if (containerRef.current) ro.observe(containerRef.current);
     return () => ro.disconnect();
   }, [currentPage]);
@@ -58,9 +55,9 @@ export function Pagination({
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage <= 1}
         aria-label="Previous page"
-        className="group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-neutral-600 hover:text-neutral-900 transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none"
+        className="group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-ink-body hover:text-ink transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none"
       >
-        <span className="pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face-light)] [box-shadow:var(--thumb-shadow)]" />
+        <span className="pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face)] [box-shadow:var(--thumb-shadow)]" />
         <svg className="relative z-10" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
         </svg>
@@ -75,7 +72,7 @@ export function Pagination({
             style={{
               left: pill.left,
               width: pill.width,
-              background: "var(--face-light)",
+              background: "var(--face)",
               boxShadow: "var(--thumb-shadow)",
               transition: "left 340ms var(--ease-out-soft), width 340ms var(--ease-out-soft)",
             }}
@@ -87,7 +84,7 @@ export function Pagination({
             <span
               key={`dot-${i}`}
               aria-hidden
-              className="w-8 h-8 flex items-center justify-center text-[11px] text-neutral-400 select-none relative z-10"
+              className="w-8 h-8 flex items-center justify-center text-[11px] text-ink-faint select-none relative z-10"
             >
               ···
             </span>
@@ -103,8 +100,8 @@ export function Pagination({
               className={[
                 "relative z-10 min-w-8 h-8 px-1 rounded-[9px] flex items-center justify-center text-[13px] font-medium transition-colors duration-200 cursor-pointer tabular-nums",
                 slot === currentPage
-                  ? "text-neutral-900"
-                  : "text-neutral-500 hover:text-neutral-900",
+                  ? "text-ink"
+                  : "text-ink-muted hover:text-ink",
               ].join(" ")}
             >
               {slot}
@@ -117,9 +114,9 @@ export function Pagination({
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage >= totalPages}
         aria-label="Next page"
-        className="group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-neutral-600 hover:text-neutral-900 transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none"
+        className="group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-ink-body hover:text-ink transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none"
       >
-        <span className="pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face-light)] [box-shadow:var(--thumb-shadow)]" />
+        <span className="pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face)] [box-shadow:var(--thumb-shadow)]" />
         <span className="relative z-10 hidden sm:inline">next</span>
         <svg className="relative z-10" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />

package/dist/registry/Popover.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useEffect, useId } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from "./Floating";
 
 type PopoverPosition = "top" | "bottom" | "left" | "right";
 
@@ -11,29 +12,6 @@ interface PopoverProps {
   className?: string;
 }
 
-/* Anchored with margins on a wrapper so the panel's own transform is free
-   for the enter motion, which scales out from the trigger side. */
-const positionStyles: Record<PopoverPosition, string> = {
-  top: "bottom-full left-1/2 -translate-x-1/2 pb-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 pt-2",
-  left: "right-full top-1/2 -translate-y-1/2 pr-2",
-  right: "left-full top-1/2 -translate-y-1/2 pl-2",
-};
-
-const origin: Record<PopoverPosition, string> = {
-  top: "origin-bottom",
-  bottom: "origin-top",
-  left: "origin-right",
-  right: "origin-left",
-};
-
-const enterFrom: Record<PopoverPosition, string> = {
-  top: "translate-y-1.5",
-  bottom: "-translate-y-1.5",
-  left: "translate-x-1.5",
-  right: "-translate-x-1.5",
-};
-
 export function Popover({
   trigger,
   children,
@@ -44,29 +22,42 @@ export function Popover({
   const [visible, setVisible] = useState(false);
   const [mounted, setMounted] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
   const uid = useId();
+  // Portalled and pinned beside the trigger, flipping if there's no room
+  const { setFloating, floatingRef, side } = useAnchoredPosition(ref, { open: mounted, side: position, align: "center" });
+
+  /* Mounted and faded out during render; the effect only times the rest */
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
 
   useEffect(() => {
     if (open) {
-      setMounted(true);
-      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => {
+          setVisible(true);
+          // The panel lives at the end of <body>; bring focus to it so Tab reaches its contents
+          const panel = floatingRef.current;
+          const first = panel?.querySelector<HTMLElement>(
+            'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])',
+          );
+          (first ?? panel)?.focus({ preventScroll: true });
+        }),
+      );
     } else {
-      setVisible(false);
       const t = setTimeout(() => setMounted(false), 180);
       return () => clearTimeout(t);
     }
-  }, [open]);
+  }, [open, floatingRef]);
 
   useEffect(() => {
     function onOutside(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
+      const t = e.target as Node;
+      if (ref.current?.contains(t) || floatingRef.current?.contains(t)) return;
+      setOpen(false);
     }
     document.addEventListener("mousedown", onOutside);
     return () => document.removeEventListener("mousedown", onOutside);
-  }, []);
+  }, [floatingRef]);
 
   useEffect(() => {
     if (!open) return;
@@ -92,29 +83,33 @@ export function Popover({
           : trigger}
       </div>
       {mounted && (
-        <div className={["absolute z-50", positionStyles[position]].join(" ")}>
+        <Portal>
           <div
-            ref={panelRef}
+            ref={setFloating}
             id={`${uid}-popover`}
             role="dialog"
-            className={[
-              "min-w-[220px] rounded-[16px] p-1.5",
-              "transition-[opacity,transform,scale,translate] duration-200 ease-[var(--ease-spring)]",
-              origin[position],
-              visible
-                ? "opacity-100 scale-100 translate-x-0 translate-y-0"
-                : ["opacity-0 scale-[0.96]", enterFrom[position]].join(" "),
-            ].join(" ")}
-            style={{ background: "var(--panel-bezel)", boxShadow: "var(--overlay-shadow)" }}
+            tabIndex={-1}
+            className="outline-none min-w-[220px] max-w-[calc(100vw-16px)] rounded-[16px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]"
+            style={{
+              position: "fixed",
+              top: 0,
+              left: 0,
+              zIndex: LAYER.floating,
+              transformOrigin: ORIGIN[side],
+              opacity: visible ? 1 : 0,
+              transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.96)`,
+              background: "var(--panel-bezel)",
+              boxShadow: "var(--overlay-shadow)",
+            }}
           >
             <div
-              className="bg-white rounded-[11px] p-3.5 text-[13px] text-neutral-600 leading-relaxed"
+              className="bg-panel-face rounded-[11px] p-3.5 text-[13px] text-ink-body leading-relaxed"
               style={{ boxShadow: "var(--panel-face-shadow)" }}
             >
               {children}
             </div>
           </div>
-        </div>
+        </Portal>
       )}
     </div>
   );

package/dist/registry/Progress.tsx

@@ -31,10 +31,10 @@ export function Progress({
       {(label || showValue) && (
         <div className="flex items-center justify-between gap-4">
           {label && (
-            <span className="text-[13px] font-medium text-neutral-700 truncate">{label}</span>
+            <span className="text-[13px] font-medium text-ink-label truncate">{label}</span>
           )}
           {showValue && (
-            <span aria-hidden className="text-[12px] tabular-nums text-neutral-500 shrink-0">
+            <span aria-hidden className="text-[12px] tabular-nums text-ink-muted shrink-0">
               {Math.round(pct)}%
             </span>
           )}
@@ -55,8 +55,8 @@ export function Progress({
             width: `${displayed}%`,
             /* Never collapses below a pill, so 1% still reads as started */
             minWidth: displayed > 0 ? 6 : 0,
-            background: "var(--face-dark)",
-            boxShadow: "inset 0 2px 3px -2px rgba(255,255,255,0.135), 0 0 2px rgba(0,0,0,0.2)",
+            background: "var(--face-inverse)",
+            boxShadow: "var(--fill-shadow)",
             transition: "width 700ms var(--ease-out-soft)",
           }}
         />

package/dist/registry/QuoteCard.tsx

@@ -33,18 +33,18 @@ export function QuoteCard({
           alt=""
           loading="lazy"
           className="w-7 h-7 rounded-full object-cover shrink-0"
-          style={{ boxShadow: dark ? "0 0 0 0.5px rgba(255,255,255,0.084)" : "0 0 0 0.5px rgba(17,17,17,0.048)" }}
+          style={{ boxShadow: dark ? "0 0 0 0.5px var(--photo-edge-dark)" : "0 0 0 0.5px var(--photo-edge)" }}
         />
       ) : (
         <span
           aria-hidden
           className={[
             "w-7 h-7 rounded-full flex items-center justify-center text-[11.5px] font-semibold shrink-0",
-            dark ? "text-white" : "text-neutral-700",
+            dark ? "text-white" : "text-ink-label",
           ].join(" ")}
           style={{
-            background: dark ? "var(--tile-dark)" : "var(--face-light)",
-            boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+            background: dark ? "var(--tile-dark)" : "var(--tile)",
+            boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
           }}
         >
           {initial}
@@ -54,7 +54,7 @@ export function QuoteCard({
         <cite
           className={[
             "not-italic font-semibold tracking-[-0.008em]",
-            dark ? "text-white" : "text-neutral-900",
+            dark ? "text-white" : "text-ink",
           ].join(" ")}
         >
           {author}
@@ -72,7 +72,7 @@ export function QuoteCard({
           width="22"
           height="17"
           viewBox="0 0 56 44"
-          className={["shrink-0 mb-auto", dark ? "text-white/25" : "text-neutral-300"].join(" ")}
+          className={["shrink-0 mb-auto", dark ? "text-white/25" : "text-ink-ghost"].join(" ")}
         >
           <path
             fill="currentColor"
@@ -82,7 +82,7 @@ export function QuoteCard({
         <blockquote
           className={[
             "m-0 pt-8 text-[19px] leading-[1.55] tracking-[-0.015em] text-pretty",
-            dark ? "text-neutral-50" : "text-neutral-900",
+            dark ? "text-neutral-50" : "text-ink",
           ].join(" ")}
         >
           {quote}

package/dist/registry/Radio.tsx

@@ -33,6 +33,21 @@ interface Blob {
 
 const LEAD = "260ms var(--ease-out-soft)";
 const TRAIL = "480ms cubic-bezier(0.34, 1.25, 0.64, 1) 50ms";
+
+/* Where the face sits over a well, in the group's own coordinates. Read
+   straight off the DOM, so setting it from an effect is a measurement,
+   not derived state                                                  */
+function wellBox(group: HTMLElement | null, el: HTMLElement | null, dir: Blob["dir"]): Blob | null {
+  if (!group || !el) return null;
+  return {
+    top: el.offsetTop,
+    bottom: group.clientHeight - el.offsetTop - el.offsetHeight,
+    left: el.offsetLeft,
+    size: el.offsetWidth,
+    dir,
+  };
+}
+
 export function RadioGroup({
   options,
   value,
@@ -59,24 +74,13 @@ export function RadioGroup({
   const selectedIndex = options.findIndex((o) => o.value === selected);
   const tabStop = selectedIndex >= 0 ? selectedIndex : enabled[0];
 
-  const measure = (dir: Blob["dir"]) => {
-    const group = groupRef.current;
-    const el = refs.current[prevIndex.current];
-    if (!group || !el) return setBlob(null);
-    setBlob({
-      top: el.offsetTop,
-      bottom: group.clientHeight - el.offsetTop - el.offsetHeight,
-      left: el.offsetLeft,
-      size: el.offsetWidth,
-      dir,
-    });
-  };
+  const measure = (dir: Blob["dir"]) =>
+    setBlob(wellBox(groupRef.current, refs.current[prevIndex.current], dir));
 
   useLayoutEffect(() => {
     const prev = prevIndex.current;
     prevIndex.current = selectedIndex;
     measure(prev < 0 || selectedIndex < 0 ? 0 : selectedIndex > prev ? 1 : selectedIndex < prev ? -1 : 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedIndex]);
 
   // Rewrapped descriptions move the wells; follow them without animating.
@@ -92,7 +96,6 @@ export function RadioGroup({
     });
     ro.observe(group);
     return () => ro.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const move = (from: number, step: 1 | -1) => {
@@ -121,11 +124,11 @@ export function RadioGroup({
             ].join(" ")}
           >
             <div className="flex flex-col gap-0.5 min-w-0">
-              <span id={`${uid}-${i}-label`} className="text-[13px] font-medium text-neutral-900 leading-snug">
+              <span id={`${uid}-${i}-label`} className="text-[13px] font-medium text-ink leading-snug">
                 {opt.label}
               </span>
               {opt.description && (
-                <span id={`${uid}-${i}-desc`} className="text-[12px] text-neutral-500 leading-relaxed">
+                <span id={`${uid}-${i}-desc`} className="text-[12px] text-ink-muted leading-relaxed">
                   {opt.description}
                 </span>
               )}
@@ -155,7 +158,7 @@ export function RadioGroup({
               className={[
                 "shrink-0 w-[22px] h-[22px] rounded-full cursor-pointer",
                 "transition-[box-shadow] duration-200 ease-out",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
                 active ? "" : "group-hover/radio:[box-shadow:var(--field-shadow-hover)]",
               ].join(" ")}
               style={{ background: "var(--field)", boxShadow: "var(--field-shadow)" }}
@@ -174,8 +177,8 @@ export function RadioGroup({
               bottom: blob.bottom,
               left: blob.left,
               width: blob.size,
-              background: "var(--face-dark)",
-              boxShadow: "var(--face-dark-shadow)",
+              background: "var(--face-inverse)",
+              boxShadow: "var(--face-inverse-shadow)",
               transition:
                 blob.dir === 0
                   ? "none"
@@ -187,11 +190,11 @@ export function RadioGroup({
           {/* The dot rides the trailing edge's spring, arriving as it settles */}
           <span
             aria-hidden
-            className="pointer-events-none absolute w-2 h-2 rounded-full bg-white"
+            className="pointer-events-none absolute w-2 h-2 rounded-full bg-ink-inverse"
             style={{
               top: blob.top + (blob.size - 8) / 2,
               left: blob.left + (blob.size - 8) / 2,
-              boxShadow: "0 1px 1px rgba(0,0,0,0.3)",
+              boxShadow: "var(--dot-shadow)",
               transition: blob.dir === 0 ? "none" : `top ${TRAIL}`,
             }}
           />

package/dist/registry/RadioCards.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+
+
+export interface RadioCardOption {
+  value: string;
+  label: string;
+  description?: string;
+  /** Something on the right of the title, like a price */
+  aside?: React.ReactNode;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+interface RadioCardsProps {
+  options: RadioCardOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Read out as the group's name */
+  label?: string;
+  /** Options per row from the small breakpoint up; they stack on phones */
+  columns?: 1 | 2 | 3;
+  name?: string;
+  className?: string;
+}
+
+const COLS = { 1: "", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3" } as const;
+
+// RadioGroup's timings: the leading edge leaves at once, the trailing
+// edge follows a beat later on a spring and settles into place
+const LEAD = "260ms var(--ease-out-soft)";
+const TRAIL = "480ms cubic-bezier(0.34, 1.25, 0.64, 1) 50ms";
+
+/* Bigger choices, like a plan or a delivery speed: the segmented control
+   from Tabs, grown up. The options sit flat in one sunken well and a
+   single raised thumb flows to whichever is chosen, across rows and
+   columns: its leading edge goes first and the trailing edge catches
+   up, so it stretches toward the new option the way RadioGroup's
+   selection does, and you can see which way it went. Each keeps RadioGroup's own control on its right, so the two
+   read as one family. One Tab stop, arrows move.                    */
+export function RadioCards({
+  options,
+  value,
+  defaultValue = "",
+  onChange,
+  label,
+  columns = 1,
+  name,
+  className = "",
+}: RadioCardsProps) {
+  const uid = useId();
+  const [internal, setInternal] = useState(defaultValue);
+  const selected = value !== undefined ? value : internal;
+  const wellRef = useRef<HTMLDivElement>(null);
+  const refs = useRef<(HTMLButtonElement | null)[]>([]);
+  const thumbRef = useRef<HTMLSpanElement>(null);
+  // Where the thumb last landed, to tell which way the next move goes
+  const last = useRef<{ top: number; left: number } | null>(null);
+
+  const enabled = options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0);
+  const selectedIndex = options.findIndex((o) => o.value === selected);
+  const tabStop = selectedIndex >= 0 ? selectedIndex : enabled[0];
+
+  const selectedRef = useRef(selectedIndex);
+
+  /* The thumb is held by its four edges, measured from the well's, and
+     written straight onto it, so a move never re-renders anything.
+     Heading forward on an axis, the far edge leads and the near one
+     trails on a spring; heading back, the other way round.          */
+  const place = (index: number, animate: boolean) => {
+    const thumb = thumbRef.current;
+    const el = refs.current[index];
+    const well = wellRef.current;
+    if (!thumb || !well) return;
+    if (!el) {
+      thumb.style.opacity = "0";
+      last.current = null;
+      return;
+    }
+    const top = el.offsetTop;
+    const left = el.offsetLeft;
+    const from = animate ? last.current : null;
+    const edge = (d: number, near: string, far: string) =>
+      d === 0 ? [] : d > 0 ? [`${near} ${TRAIL}`, `${far} ${LEAD}`] : [`${near} ${LEAD}`, `${far} ${TRAIL}`];
+    const dy = from ? Math.sign(top - from.top) : 0;
+    const dx = from ? Math.sign(left - from.left) : 0;
+    thumb.style.transition = [...edge(dy, "top", "bottom"), ...edge(dx, "left", "right")].join(", ") || "none";
+    thumb.style.top = `${top}px`;
+    thumb.style.left = `${left}px`;
+    thumb.style.right = `${well.clientWidth - left - el.offsetWidth}px`;
+    thumb.style.bottom = `${well.clientHeight - top - el.offsetHeight}px`;
+    thumb.style.opacity = "1";
+    last.current = { top, left };
+  };
+
+  // Before paint, so the thumb is never seen out of place
+  useLayoutEffect(() => {
+    selectedRef.current = selectedIndex;
+    place(selectedIndex, true);
+  }, [selectedIndex]);
+
+  // Rewrapped text or a new breakpoint moves the options; follow them
+  // without animating. An observer reports once as soon as it's attached;
+  // that one is skipped, or it would cut short a move already under way.
+  useEffect(() => {
+    const well = wellRef.current;
+    if (!well) return;
+    let attached = false;
+    const ro = new ResizeObserver(() => {
+      if (attached) place(selectedRef.current, false);
+      attached = true;
+    });
+    ro.observe(well);
+    return () => ro.disconnect();
+  }, []);
+
+  const select = (i: number) => {
+    const o = options[i];
+    if (!o || o.disabled) return;
+    setInternal(o.value);
+    onChange?.(o.value);
+  };
+
+  const move = (from: number, step: 1 | -1) => {
+    const at = enabled.indexOf(from);
+    const next = enabled[(at + step + enabled.length) % enabled.length];
+    refs.current[next]?.focus();
+    select(next);
+  };
+
+  return (
+    <div
+      ref={wellRef}
+      role="radiogroup"
+      aria-label={label}
+      className={["relative grid grid-cols-1 gap-1 rounded-[18px] p-1.5", COLS[columns], className].join(" ")}
+      style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+    >
+      <span
+        ref={thumbRef}
+        aria-hidden
+        className="pointer-events-none absolute rounded-[13px] opacity-0"
+        style={{ background: "var(--face)", boxShadow: "var(--thumb-shadow)" }}
+      />
+
+      {options.map((o, i) => {
+        const on = i === selectedIndex;
+        return (
+          <button
+            key={o.value}
+            ref={(el) => {
+              refs.current[i] = el;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            aria-labelledby={`${uid}-${i}-label`}
+            aria-describedby={o.description ? `${uid}-${i}-desc` : undefined}
+            disabled={o.disabled}
+            tabIndex={i === tabStop ? 0 : -1}
+            onClick={() => select(i)}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+                e.preventDefault();
+                move(i, 1);
+              } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+                e.preventDefault();
+                move(i, -1);
+              }
+            }}
+            className={[
+              "group/card relative z-10 flex items-start gap-3 rounded-[13px] px-4 py-3.5 text-left",
+              "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink",
+              "disabled:opacity-40 disabled:cursor-not-allowed",
+              on ? "cursor-default" : "cursor-pointer",
+            ].join(" ")}
+          >
+            {o.icon && (
+              <span
+                aria-hidden
+                className={[
+                  "mt-px flex h-5 w-5 shrink-0 items-center justify-center transition-colors duration-200",
+                  on ? "text-ink" : "text-ink-faint group-hover/card:text-ink-body",
+                ].join(" ")}
+              >
+                {o.icon}
+              </span>
+            )}
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className="flex items-baseline justify-between gap-3">
+                <span
+                  id={`${uid}-${i}-label`}
+                  className={[
+                    "text-[13.5px] font-medium leading-snug transition-colors duration-150",
+                    on ? "text-ink" : "text-ink-soft group-hover/card:text-ink",
+                  ].join(" ")}
+                >
+                  {o.label}
+                </span>
+                {o.aside && (
+                  <span
+                    className={[
+                      "shrink-0 text-[13px] tabular-nums transition-colors duration-150",
+                      on ? "font-medium text-ink" : "text-ink-muted",
+                    ].join(" ")}
+                  >
+                    {o.aside}
+                  </span>
+                )}
+              </span>
+              {o.description && (
+                <span id={`${uid}-${i}-desc`} className="text-[12px] leading-relaxed text-ink-muted">
+                  {o.description}
+                </span>
+              )}
+            </span>
+            {/* RadioGroup's control: a sunken well, and when chosen a face in
+                the inverse material with a dot pressed into it */}
+            <span
+              aria-hidden
+              className={[
+                "relative mt-px h-[18px] w-[18px] shrink-0 rounded-full transition-[box-shadow] duration-200",
+                on ? "" : "group-hover/card:[box-shadow:var(--field-shadow-hover)]",
+              ].join(" ")}
+              style={{ background: "var(--field)", boxShadow: "var(--field-shadow)" }}
+            >
+              <span
+                className="absolute inset-0 grid place-items-center rounded-full transition-[opacity,transform] duration-300 ease-[var(--ease-spring)]"
+                style={{
+                  background: "var(--face-inverse)",
+                  boxShadow: "var(--face-inverse-shadow)",
+                  opacity: on ? 1 : 0,
+                  transform: on ? "scale(1)" : "scale(0.4)",
+                }}
+              >
+                <span className="h-1.5 w-1.5 rounded-full bg-ink-inverse" style={{ boxShadow: "var(--dot-shadow)" }} />
+              </span>
+            </span>
+          </button>
+        );
+      })}
+      {name && <input type="hidden" name={name} value={selected} />}
+    </div>
+  );
+}

package/dist/registry/ReactionBar.tsx

@@ -68,14 +68,14 @@ export function ReactionBar({
             aria-label={`${reaction.label}, ${reaction.count}`}
             className={[
               "inline-flex items-center gap-1.5 rounded-[11px] pl-2.5 pr-3 py-[7px] text-[13px] font-medium cursor-pointer",
-              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
-              reaction.active ? "text-white" : "text-neutral-600 hover:text-neutral-900",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+              reaction.active ? "text-ink-inverse" : "text-ink-body hover:text-ink",
             ].join(" ")}
             style={{
               /* Off is a raised face; on is the dark face — pressed in and lit */
-              background: reaction.active ? "var(--face-dark)" : "var(--face-light)",
-              boxShadow: reaction.active ? "var(--face-dark-shadow)" : "var(--face-light-shadow)",
-              textShadow: reaction.active ? "0 -1px 0 rgba(0,0,0,0.4)" : "0 1px 0 rgba(255,255,255,0.9)",
+              background: reaction.active ? "var(--face-inverse)" : "var(--face)",
+              boxShadow: reaction.active ? "var(--face-inverse-shadow)" : "var(--face-shadow)",
+              textShadow: reaction.active ? "var(--emboss-inverse)" : "var(--emboss)",
               transform: isAnimating ? "scale(1.08)" : "scale(1)",
               transition:
                 "transform 250ms var(--ease-spring), color 200ms ease, box-shadow 200ms ease",