@blurrow/ui 0.1.0 → 0.2.1

package/dist/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Progress.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\ninterface ProgressProps {\n  value: number;\n  max?: number;\n  label?: string;\n  showValue?: boolean;\n  className?: string;\n}\n\nexport function Progress({\n  value,\n  max = 100,\n  label,\n  showValue = false,\n  className = \"\",\n}: ProgressProps) {\n  const pct = Math.min(Math.max((value / max) * 100, 0), 100);\n  const [displayed, setDisplayed] = useState(0);\n  const t = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    t.current = setTimeout(() => setDisplayed(pct), 80);\n    return () => { if (t.current) clearTimeout(t.current); };\n  }, [pct]);\n\n  return (\n    <div className={[\"flex flex-col gap-2\", className].join(\" \")}>\n      {(label || showValue) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          {label && (\n            <span className=\"text-[13px] font-medium text-ink-label truncate\">{label}</span>\n          )}\n          {showValue && (\n            <span aria-hidden className=\"text-[12px] tabular-nums text-ink-muted shrink-0\">\n              {Math.round(pct)}%\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        className=\"w-full h-2 rounded-full p-px overflow-hidden\"\n        role=\"progressbar\"\n        aria-label={label}\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n      >\n        <div\n          className=\"h-full rounded-full relative overflow-hidden\"\n          style={{\n            width: `${displayed}%`,\n            /* Never collapses below a pill, so 1% still reads as started */\n            minWidth: displayed > 0 ? 6 : 0,\n            background: \"var(--face-inverse)\",\n            boxShadow: \"var(--fill-shadow)\",\n            transition: \"width 700ms var(--ease-out-soft)\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,WAAW,QAAQ,gBAAgB;AA+BvC,cAGA,YAHA;AArBL,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AACd,GAAkB;AAChB,QAAM,MAAM,KAAK,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,CAAC,GAAG,GAAG;AAC1D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,IAAI,OAA6C,IAAI;AAE3D,YAAU,MAAM;AACd,MAAE,UAAU,WAAW,MAAM,aAAa,GAAG,GAAG,EAAE;AAClD,WAAO,MAAM;AAAE,UAAI,EAAE,QAAS,cAAa,EAAE,OAAO;AAAA,IAAG;AAAA,EACzD,GAAG,CAAC,GAAG,CAAC;AAER,SACE,qBAAC,SAAI,WAAW,CAAC,uBAAuB,SAAS,EAAE,KAAK,GAAG,GACvD;AAAA,cAAS,cACT,qBAAC,SAAI,WAAU,2CACZ;AAAA,eACC,oBAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA,MAE1E,aACC,qBAAC,UAAK,eAAW,MAAC,WAAU,oDACzB;AAAA,aAAK,MAAM,GAAG;AAAA,QAAE;AAAA,SACnB;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,OAAO,EAAE,YAAY,eAAe,WAAW,qBAAqB;AAAA,QAEpE;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,SAAS;AAAA;AAAA,cAEnB,UAAU,YAAY,IAAI,IAAI;AAAA,cAC9B,YAAY;AAAA,cACZ,WAAW;AAAA,cACX,YAAY;AAAA,YACd;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/QuoteCard.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface QuoteCardProps {
+    quote: string;
+    author: string;
+    role?: string;
+    avatarSrc?: string;
+    theme?: "light" | "dark";
+    className?: string;
+}
+declare function QuoteCard({ quote, author, role, avatarSrc, theme, className, }: QuoteCardProps): react_jsx_runtime.JSX.Element;
+
+export { QuoteCard };

package/dist/QuoteCard.js

@@ -0,0 +1,92 @@
+// ../../components/ui/QuoteCard.tsx
+import { CardShell } from "./CardShell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function QuoteCard({
+  quote,
+  author,
+  role,
+  avatarSrc,
+  theme = "light",
+  className = ""
+}) {
+  const dark = theme === "dark";
+  const initial = (author.match(/[\p{L}\p{N}]/u)?.[0] ?? "?").toLowerCase();
+  const rail = /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-2.5 min-w-0", children: [
+    avatarSrc ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: avatarSrc,
+          alt: "",
+          loading: "lazy",
+          className: "w-7 h-7 rounded-full object-cover shrink-0",
+          style: { boxShadow: dark ? "0 0 0 0.5px var(--photo-edge-dark)" : "0 0 0 0.5px var(--photo-edge)" }
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: [
+          "w-7 h-7 rounded-full flex items-center justify-center text-[11.5px] font-semibold shrink-0",
+          dark ? "text-white" : "text-ink-label"
+        ].join(" "),
+        style: {
+          background: dark ? "var(--tile-dark)" : "var(--tile)",
+          boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)"
+        },
+        children: initial
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
+      /* @__PURE__ */ jsx(
+        "cite",
+        {
+          className: [
+            "not-italic font-semibold tracking-[-0.008em]",
+            dark ? "text-white" : "text-ink"
+          ].join(" "),
+          children: author
+        }
+      ),
+      role && /* @__PURE__ */ jsxs("span", { children: [
+        " \xB7 ",
+        role
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(CardShell, { as: "figure", theme, className, rail, railKind: "text", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col p-8", children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        width: "22",
+        height: "17",
+        viewBox: "0 0 56 44",
+        className: ["shrink-0 mb-auto", dark ? "text-white/25" : "text-ink-ghost"].join(" "),
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M0 44V27.5C0 12.6 7.4 3.4 22.2 0l2.6 6.2C16.9 8.7 13 13.7 12.6 21H24v23H0zm32 0V27.5C32 12.6 39.4 3.4 54.2 0l2.6 6.2C48.9 8.7 45 13.7 44.6 21H56v23H32z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "blockquote",
+      {
+        className: [
+          "m-0 pt-8 text-[19px] leading-[1.55] tracking-[-0.015em] text-pretty",
+          dark ? "text-neutral-50" : "text-ink"
+        ].join(" "),
+        children: quote
+      }
+    )
+  ] }) });
+}
+export {
+  QuoteCard
+};
+//# sourceMappingURL=QuoteCard.js.map

package/dist/QuoteCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/QuoteCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { CardShell } from \"./CardShell\";\n\ninterface QuoteCardProps {\n  quote: string;\n  author: string;\n  role?: string;\n  avatarSrc?: string;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n}\n\n/* Built on CardShell: the quote owns the face; who said it sits on the rail,\n   so a stretched card grows the face instead of opening a gap mid-card. */\nexport function QuoteCard({\n  quote,\n  author,\n  role,\n  avatarSrc,\n  theme = \"light\",\n  className = \"\",\n}: QuoteCardProps) {\n  const dark = theme === \"dark\";\n  // Handles like \"@name\" shouldn't render an \"@\" monogram\n  const initial = (author.match(/[\\p{L}\\p{N}]/u)?.[0] ?? \"?\").toLowerCase();\n\n  const rail = (\n    <figcaption className=\"flex items-center gap-2.5 min-w-0\">\n      {avatarSrc ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={avatarSrc}\n          alt=\"\"\n          loading=\"lazy\"\n          className=\"w-7 h-7 rounded-full object-cover shrink-0\"\n          style={{ boxShadow: dark ? \"0 0 0 0.5px var(--photo-edge-dark)\" : \"0 0 0 0.5px var(--photo-edge)\" }}\n        />\n      ) : (\n        <span\n          aria-hidden\n          className={[\n            \"w-7 h-7 rounded-full flex items-center justify-center text-[11.5px] font-semibold shrink-0\",\n            dark ? \"text-white\" : \"text-ink-label\",\n          ].join(\" \")}\n          style={{\n            background: dark ? \"var(--tile-dark)\" : \"var(--tile)\",\n            boxShadow: dark ? \"var(--tile-dark-shadow)\" : \"var(--tile-shadow)\",\n          }}\n        >\n          {initial}\n        </span>\n      )}\n      <span className=\"min-w-0 truncate\">\n        <cite\n          className={[\n            \"not-italic font-semibold tracking-[-0.008em]\",\n            dark ? \"text-white\" : \"text-ink\",\n          ].join(\" \")}\n        >\n          {author}\n        </cite>\n        {role && <span> · {role}</span>}\n      </span>\n    </figcaption>\n  );\n\n  return (\n    <CardShell as=\"figure\" theme={theme} className={className} rail={rail} railKind=\"text\">\n      <div className=\"flex-1 flex flex-col p-8\">\n        <svg\n          aria-hidden\n          width=\"22\"\n          height=\"17\"\n          viewBox=\"0 0 56 44\"\n          className={[\"shrink-0 mb-auto\", dark ? \"text-white/25\" : \"text-ink-ghost\"].join(\" \")}\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M0 44V27.5C0 12.6 7.4 3.4 22.2 0l2.6 6.2C16.9 8.7 13 13.7 12.6 21H24v23H0zm32 0V27.5C32 12.6 39.4 3.4 54.2 0l2.6 6.2C48.9 8.7 45 13.7 44.6 21H56v23H32z\"\n          />\n        </svg>\n        <blockquote\n          className={[\n            \"m-0 pt-8 text-[19px] leading-[1.55] tracking-[-0.015em] text-pretty\",\n            dark ? \"text-neutral-50\" : \"text-ink\",\n          ].join(\" \")}\n        >\n          {quote}\n        </blockquote>\n      </div>\n    </CardShell>\n  );\n}\n"],"mappings":";AACA,SAAS,iBAAiB;AA6BlB,cA+BS,YA/BT;AAhBD,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AACd,GAAmB;AACjB,QAAM,OAAO,UAAU;AAEvB,QAAM,WAAW,OAAO,MAAM,eAAe,IAAI,CAAC,KAAK,KAAK,YAAY;AAExE,QAAM,OACJ,qBAAC,gBAAW,WAAU,qCACnB;AAAA;AAAA;AAAA,MAEC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAI;AAAA,UACJ,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,OAAO,uCAAuC,gCAAgC;AAAA;AAAA,MACpG;AAAA,QAEA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,OAAO,eAAe;AAAA,QACxB,EAAE,KAAK,GAAG;AAAA,QACV,OAAO;AAAA,UACL,YAAY,OAAO,qBAAqB;AAAA,UACxC,WAAW,OAAO,4BAA4B;AAAA,QAChD;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IAEF,qBAAC,UAAK,WAAU,oBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,OAAO,eAAe;AAAA,UACxB,EAAE,KAAK,GAAG;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACC,QAAQ,qBAAC,UAAK;AAAA;AAAA,QAAI;AAAA,SAAK;AAAA,OAC1B;AAAA,KACF;AAGF,SACE,oBAAC,aAAU,IAAG,UAAS,OAAc,WAAsB,MAAY,UAAS,QAC9E,+BAAC,SAAI,WAAU,4BACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,WAAW,CAAC,oBAAoB,OAAO,kBAAkB,gBAAgB,EAAE,KAAK,GAAG;AAAA,QAEnF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,oBAAoB;AAAA,QAC7B,EAAE,KAAK,GAAG;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/Radio.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    className?: string;
+}
+declare function RadioGroup({ options, value, defaultValue, onChange, name, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+export { RadioGroup };

package/dist/Radio.js

@@ -0,0 +1,161 @@
+"use client";
+
+// ../../components/ui/Radio.tsx
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LEAD = "260ms var(--ease-out-soft)";
+var TRAIL = "480ms cubic-bezier(0.34, 1.25, 0.64, 1) 50ms";
+function wellBox(group, el, dir) {
+  if (!group || !el) return null;
+  return {
+    top: el.offsetTop,
+    bottom: group.clientHeight - el.offsetTop - el.offsetHeight,
+    left: el.offsetLeft,
+    size: el.offsetWidth,
+    dir
+  };
+}
+function RadioGroup({
+  options,
+  value,
+  defaultValue = "",
+  onChange,
+  name,
+  className = ""
+}) {
+  const [internal, setInternal] = useState(defaultValue);
+  const selected = value !== void 0 ? value : internal;
+  const uid = useId();
+  const refs = useRef([]);
+  const groupRef = useRef(null);
+  const prevIndex = useRef(-1);
+  const [blob, setBlob] = useState(null);
+  const select = (val, disabled) => {
+    if (disabled) return;
+    setInternal(val);
+    onChange?.(val);
+  };
+  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 measure = (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);
+  }, [selectedIndex]);
+  useEffect(() => {
+    const group = groupRef.current;
+    if (!group) return;
+    let attached = false;
+    const ro = new ResizeObserver(() => {
+      if (attached) measure(0);
+      attached = true;
+    });
+    ro.observe(group);
+    return () => ro.disconnect();
+  }, []);
+  const move = (from, step) => {
+    const at = enabled.indexOf(from);
+    const next = enabled[(at + step + enabled.length) % enabled.length];
+    refs.current[next]?.focus();
+    select(options[next].value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: groupRef,
+      role: "radiogroup",
+      "aria-label": name,
+      className: ["relative flex flex-col gap-1", className].join(" "),
+      children: [
+        options.map((opt, i) => {
+          const active = selected === opt.value;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onClick: () => select(opt.value, opt.disabled),
+              className: [
+                "flex items-center justify-between gap-4 select-none py-1.5",
+                opt.disabled ? "opacity-40 pointer-events-none" : "cursor-pointer group/radio"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { id: `${uid}-${i}-label`, className: "text-[13px] font-medium text-ink leading-snug", children: opt.label }),
+                  opt.description && /* @__PURE__ */ jsx("span", { id: `${uid}-${i}-desc`, className: "text-[12px] text-ink-muted leading-relaxed", children: opt.description })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (el) => {
+                      refs.current[i] = el;
+                    },
+                    type: "button",
+                    role: "radio",
+                    "aria-checked": active,
+                    "aria-labelledby": `${uid}-${i}-label`,
+                    "aria-describedby": opt.description ? `${uid}-${i}-desc` : void 0,
+                    disabled: opt.disabled,
+                    tabIndex: i === tabStop ? 0 : -1,
+                    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: [
+                      "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-ink",
+                      active ? "" : "group-hover/radio:[box-shadow:var(--field-shadow-hover)]"
+                    ].join(" "),
+                    style: { background: "var(--field)", boxShadow: "var(--field-shadow)" }
+                  }
+                )
+              ]
+            },
+            opt.value
+          );
+        }),
+        blob && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute rounded-full",
+              style: {
+                top: blob.top,
+                bottom: blob.bottom,
+                left: blob.left,
+                width: blob.size,
+                background: "var(--face-inverse)",
+                boxShadow: "var(--face-inverse-shadow)",
+                transition: blob.dir === 0 ? "none" : blob.dir > 0 ? `top ${TRAIL}, bottom ${LEAD}` : `top ${LEAD}, bottom ${TRAIL}`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              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: "var(--dot-shadow)",
+                transition: blob.dir === 0 ? "none" : `top ${TRAIL}`
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  RadioGroup
+};
+//# sourceMappingURL=Radio.js.map

package/dist/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\n\ninterface RadioOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n}\n\ninterface RadioGroupProps {\n  options: RadioOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  name?: string;\n  className?: string;\n}\n\n/* Every radio is a sunken field; the selection is one dark face that\n   flows between them. Its leading edge leaves first and the trailing edge\n   catches up on a spring, so it stretches across the gap like a drop of\n   liquid and settles into the new well. One Tab stop for the group,\n   arrows move between options (ARIA radio group pattern).              */\ninterface Blob {\n  top: number;\n  bottom: number;\n  left: number;\n  size: number;\n  dir: -1 | 0 | 1;\n}\n\nconst LEAD = \"260ms var(--ease-out-soft)\";\nconst TRAIL = \"480ms cubic-bezier(0.34, 1.25, 0.64, 1) 50ms\";\n\n/* Where the face sits over a well, in the group's own coordinates. Read\n   straight off the DOM, so setting it from an effect is a measurement,\n   not derived state                                                  */\nfunction wellBox(group: HTMLElement | null, el: HTMLElement | null, dir: Blob[\"dir\"]): Blob | null {\n  if (!group || !el) return null;\n  return {\n    top: el.offsetTop,\n    bottom: group.clientHeight - el.offsetTop - el.offsetHeight,\n    left: el.offsetLeft,\n    size: el.offsetWidth,\n    dir,\n  };\n}\n\nexport function RadioGroup({\n  options,\n  value,\n  defaultValue = \"\",\n  onChange,\n  name,\n  className = \"\",\n}: RadioGroupProps) {\n  const [internal, setInternal] = useState(defaultValue);\n  const selected = value !== undefined ? value : internal;\n  const uid = useId();\n  const refs = useRef<(HTMLButtonElement | null)[]>([]);\n  const groupRef = useRef<HTMLDivElement>(null);\n  const prevIndex = useRef(-1);\n  const [blob, setBlob] = useState<Blob | null>(null);\n\n  const select = (val: string, disabled?: boolean) => {\n    if (disabled) return;\n    setInternal(val);\n    onChange?.(val);\n  };\n\n  const enabled = options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0);\n  const selectedIndex = options.findIndex((o) => o.value === selected);\n  const tabStop = selectedIndex >= 0 ? selectedIndex : enabled[0];\n\n  const measure = (dir: Blob[\"dir\"]) =>\n    setBlob(wellBox(groupRef.current, refs.current[prevIndex.current], dir));\n\n  useLayoutEffect(() => {\n    const prev = prevIndex.current;\n    prevIndex.current = selectedIndex;\n    measure(prev < 0 || selectedIndex < 0 ? 0 : selectedIndex > prev ? 1 : selectedIndex < prev ? -1 : 0);\n  }, [selectedIndex]);\n\n  // Rewrapped descriptions move the wells; follow them without animating.\n  // An observer reports once on attach — that one is skipped, or it would\n  // cut short a move already under way.\n  useEffect(() => {\n    const group = groupRef.current;\n    if (!group) return;\n    let attached = false;\n    const ro = new ResizeObserver(() => {\n      if (attached) measure(0);\n      attached = true;\n    });\n    ro.observe(group);\n    return () => ro.disconnect();\n  }, []);\n\n  const move = (from: number, step: 1 | -1) => {\n    const at = enabled.indexOf(from);\n    const next = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[next]?.focus();\n    select(options[next].value);\n  };\n\n  return (\n    <div\n      ref={groupRef}\n      role=\"radiogroup\"\n      aria-label={name}\n      className={[\"relative flex flex-col gap-1\", className].join(\" \")}\n    >\n      {options.map((opt, i) => {\n        const active = selected === opt.value;\n        return (\n          <div\n            key={opt.value}\n            onClick={() => select(opt.value, opt.disabled)}\n            className={[\n              \"flex items-center justify-between gap-4 select-none py-1.5\",\n              opt.disabled ? \"opacity-40 pointer-events-none\" : \"cursor-pointer group/radio\",\n            ].join(\" \")}\n          >\n            <div className=\"flex flex-col gap-0.5 min-w-0\">\n              <span id={`${uid}-${i}-label`} className=\"text-[13px] font-medium text-ink leading-snug\">\n                {opt.label}\n              </span>\n              {opt.description && (\n                <span id={`${uid}-${i}-desc`} className=\"text-[12px] text-ink-muted leading-relaxed\">\n                  {opt.description}\n                </span>\n              )}\n            </div>\n\n            {/* Clicks bubble to the row, so the control itself has no onClick */}\n            <button\n              ref={(el) => {\n                refs.current[i] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={active}\n              aria-labelledby={`${uid}-${i}-label`}\n              aria-describedby={opt.description ? `${uid}-${i}-desc` : undefined}\n              disabled={opt.disabled}\n              tabIndex={i === tabStop ? 0 : -1}\n              onKeyDown={(e) => {\n                if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\") {\n                  e.preventDefault();\n                  move(i, 1);\n                } else if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\") {\n                  e.preventDefault();\n                  move(i, -1);\n                }\n              }}\n              className={[\n                \"shrink-0 w-[22px] h-[22px] rounded-full cursor-pointer\",\n                \"transition-[box-shadow] duration-200 ease-out\",\n                \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\",\n                active ? \"\" : \"group-hover/radio:[box-shadow:var(--field-shadow-hover)]\",\n              ].join(\" \")}\n              style={{ background: \"var(--field)\", boxShadow: \"var(--field-shadow)\" }}\n            />\n          </div>\n        );\n      })}\n\n      {blob && (\n        <>\n          <span\n            aria-hidden\n            className=\"pointer-events-none absolute rounded-full\"\n            style={{\n              top: blob.top,\n              bottom: blob.bottom,\n              left: blob.left,\n              width: blob.size,\n              background: \"var(--face-inverse)\",\n              boxShadow: \"var(--face-inverse-shadow)\",\n              transition:\n                blob.dir === 0\n                  ? \"none\"\n                  : blob.dir > 0\n                    ? `top ${TRAIL}, bottom ${LEAD}`\n                    : `top ${LEAD}, bottom ${TRAIL}`,\n            }}\n          />\n          {/* The dot rides the trailing edge's spring, arriving as it settles */}\n          <span\n            aria-hidden\n            className=\"pointer-events-none absolute w-2 h-2 rounded-full bg-ink-inverse\"\n            style={{\n              top: blob.top + (blob.size - 8) / 2,\n              left: blob.left + (blob.size - 8) / 2,\n              boxShadow: \"var(--dot-shadow)\",\n              transition: blob.dir === 0 ? \"none\" : `top ${TRAIL}`,\n            }}\n          />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/RadioCards.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+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;
+}
+declare function RadioCards({ options, value, defaultValue, onChange, label, columns, name, className, }: RadioCardsProps): react_jsx_runtime.JSX.Element;
+
+export { type RadioCardOption, RadioCards };

package/dist/RadioCards.js

@@ -0,0 +1,205 @@
+"use client";
+
+// ../../components/ui/RadioCards.tsx
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLS = { 1: "", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3" };
+var LEAD = "260ms var(--ease-out-soft)";
+var TRAIL = "480ms cubic-bezier(0.34, 1.25, 0.64, 1) 50ms";
+function RadioCards({
+  options,
+  value,
+  defaultValue = "",
+  onChange,
+  label,
+  columns = 1,
+  name,
+  className = ""
+}) {
+  const uid = useId();
+  const [internal, setInternal] = useState(defaultValue);
+  const selected = value !== void 0 ? value : internal;
+  const wellRef = useRef(null);
+  const refs = useRef([]);
+  const thumbRef = useRef(null);
+  const last = useRef(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);
+  const place = (index, animate) => {
+    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, near, far) => 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 };
+  };
+  useLayoutEffect(() => {
+    selectedRef.current = selectedIndex;
+    place(selectedIndex, true);
+  }, [selectedIndex]);
+  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) => {
+    const o = options[i];
+    if (!o || o.disabled) return;
+    setInternal(o.value);
+    onChange?.(o.value);
+  };
+  const move = (from, step) => {
+    const at = enabled.indexOf(from);
+    const next = enabled[(at + step + enabled.length) % enabled.length];
+    refs.current[next]?.focus();
+    select(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "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)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: thumbRef,
+            "aria-hidden": true,
+            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 /* @__PURE__ */ jsxs(
+            "button",
+            {
+              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` : void 0,
+              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(" "),
+              children: [
+                o.icon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    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(" "),
+                    children: o.icon
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-baseline justify-between gap-3", children: [
+                    /* @__PURE__ */ jsx(
+                      "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(" "),
+                        children: o.label
+                      }
+                    ),
+                    o.aside && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [
+                          "shrink-0 text-[13px] tabular-nums transition-colors duration-150",
+                          on ? "font-medium text-ink" : "text-ink-muted"
+                        ].join(" "),
+                        children: o.aside
+                      }
+                    )
+                  ] }),
+                  o.description && /* @__PURE__ */ jsx("span", { id: `${uid}-${i}-desc`, className: "text-[12px] leading-relaxed text-ink-muted", children: o.description })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    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)" },
+                    children: /* @__PURE__ */ jsx(
+                      "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)"
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-ink-inverse", style: { boxShadow: "var(--dot-shadow)" } })
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            o.value
+          );
+        }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected })
+      ]
+    }
+  );
+}
+export {
+  RadioCards
+};
+//# sourceMappingURL=RadioCards.js.map

package/dist/RadioCards.js.map

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

package/dist/ReactionBar.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ReactionItem {
+    emoji: string;
+    label: string;
+    count: number;
+    active?: boolean;
+}
+interface ReactionBarProps {
+    reactions?: ReactionItem[];
+    className?: string;
+}
+declare function ReactionBar({ reactions: initialReactions, className, }: ReactionBarProps): react_jsx_runtime.JSX.Element;
+
+export { ReactionBar, type ReactionItem };