@blurrow/ui 0.1.0 → 0.2.1

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

@@ -0,0 +1,101 @@
+"use client";
+
+import React, { useState, useCallback, useRef } from "react";
+
+export interface ReactionItem {
+  emoji: string;
+  label: string;
+  count: number;
+  active?: boolean;
+}
+
+interface ReactionBarProps {
+  reactions?: ReactionItem[];
+  className?: string;
+}
+
+const defaultReactions: ReactionItem[] = [
+  { emoji: "👏", label: "clap", count: 0 },
+  { emoji: "❤️", label: "love", count: 0 },
+  { emoji: "🔥", label: "fire", count: 0 },
+  { emoji: "💡", label: "insightful", count: 0 },
+  { emoji: "🎉", label: "celebrate", count: 0 },
+];
+
+export function ReactionBar({
+  reactions: initialReactions,
+  className = "",
+}: ReactionBarProps) {
+  const [reactions, setReactions] = useState<ReactionItem[]>(
+    initialReactions ?? defaultReactions
+  );
+  const [animatingKey, setAnimatingKey] = useState<string | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleClick = useCallback(
+    (index: number) => {
+      setReactions((prev) =>
+        prev.map((r, i) => {
+          if (i !== index) return r;
+          return {
+            ...r,
+            active: !r.active,
+            count: r.active ? r.count - 1 : r.count + 1,
+          };
+        })
+      );
+
+      const key = reactions[index].label;
+      setAnimatingKey(key);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setAnimatingKey(null), 300);
+    },
+    [reactions]
+  );
+
+  return (
+    <div
+      className={["flex flex-wrap gap-2", className].filter(Boolean).join(" ")}
+    >
+      {reactions.map((reaction, index) => {
+        const isAnimating = animatingKey === reaction.label;
+        return (
+          <button
+            key={reaction.label}
+            type="button"
+            onClick={() => handleClick(index)}
+            aria-pressed={!!reaction.active}
+            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-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-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",
+            }}
+          >
+            <span aria-hidden className="text-[15px] leading-none">{reaction.emoji}</span>
+            <span
+              className="tabular-nums leading-none"
+              style={{
+                transform: isAnimating ? "scale(1.15)" : "scale(1)",
+                display: "inline-block",
+                transition:
+                  "transform 250ms cubic-bezier(0.34, 1.4, 0.64, 1)",
+              }}
+            >
+              {reaction.count}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/dist/registry/ReadingProgress.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+interface ReadingProgressProps {
+  className?: string;
+}
+
+export function ReadingProgress({ className = "" }: ReadingProgressProps) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      setProgress(docHeight > 0 ? (scrollTop / docHeight) * 100 : 0);
+    };
+    // One measurement per frame, however fast the scroll events arrive
+    const update = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    measure();
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return (
+    <div
+      aria-hidden
+      className={["fixed top-0 left-0 right-0 z-[80] h-[2px] bg-transparent pointer-events-none", className].join(" ")}
+    >
+      <div
+        className="h-full w-full origin-left"
+        style={{
+          // transform instead of width: no layout on every scroll frame
+          transform: `scaleX(${progress / 100})`,
+          background: "var(--progress-bar)",
+          boxShadow: "var(--progress-bar-glow)",
+        }}
+      />
+    </div>
+  );
+}

package/dist/registry/ReadingTime.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface ReadingTimeProps {
+  minutes: number;
+  className?: string;
+}
+
+export function ReadingTime({ minutes, className = "" }: ReadingTimeProps) {
+  return (
+    <span
+      className={[
+        "inline-flex items-center gap-1.5 text-[12px] font-medium text-ink-muted",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <svg
+        width="13"
+        height="13"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-ink-faint"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+      {minutes} min read
+    </span>
+  );
+}

package/dist/registry/Select.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useId } from "react";
+import { Portal } from "./Floating";
+import { useFloatingPanel } from "./useFloatingPanel";
+
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  hint?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+}
+
+/* The closed select is a sunken field like Input; the open list is a
+   floating panel like DropdownMenu. Keyboard follows the ARIA listbox
+   pattern: arrows move, Enter picks, Escape backs out.                */
+export function Select({
+  options,
+  value,
+  onChange,
+  placeholder = "select…",
+  label,
+  hint,
+  disabled = false,
+  fullWidth = false,
+  className = "",
+}: SelectProps) {
+  const [active, setActive] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+  // The list is portalled to the body and pinned under the field
+  const { open, mounted, close, show, setFloating, panelStyle } = useFloatingPanel(ref, {
+    matchWidth: true,
+    onEscape: () => buttonRef.current?.focus(),
+  });
+
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selected = options[selectedIndex];
+
+  useEffect(() => {
+    if (!open) return;
+    listRef.current
+      ?.querySelector(`[data-index="${active}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+
+  const openList = () => {
+    setActive(selectedIndex >= 0 ? selectedIndex : 0);
+    show();
+  };
+
+  const pick = (index: number) => {
+    const opt = options[index];
+    if (!opt) return;
+    onChange?.(opt.value);
+    close();
+    buttonRef.current?.focus();
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!open) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        openList();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActive((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActive((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActive(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActive(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        pick(active);
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        // Type-ahead: jump to the first option starting with the key
+        if (e.key.length === 1) {
+          const k = e.key.toLowerCase();
+          const hit = options.findIndex((o) => o.label.toLowerCase().startsWith(k));
+          if (hit >= 0) setActive(hit);
+        }
+    }
+  };
+
+  return (
+    <div className={["flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && (
+        <span
+          id={`${uid}-label`}
+          className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em]"
+        >
+          {label}
+        </span>
+      )}
+
+      <div
+        ref={ref}
+        className={["relative", fullWidth ? "w-full" : "inline-block", className].join(" ")}
+      >
+        <button
+          ref={buttonRef}
+          type="button"
+          /* A select-only combobox: the role is what lets the button point
+             at the active option while focus stays on it                */
+          role="combobox"
+          disabled={disabled}
+          onClick={() => (open ? close() : openList())}
+          onKeyDown={onKeyDown}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          aria-controls={open ? `${uid}-list` : undefined}
+          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}
+          aria-activedescendant={open ? `${uid}-opt-${active}` : undefined}
+          className={[
+            "group/select relative isolate inline-flex items-center justify-between gap-3 w-full",
+            "rounded-xl px-4 py-3 text-[13.5px] font-medium text-ink",
+            "field cursor-pointer select-none",
+            "focus:outline-none disabled:opacity-40 disabled:pointer-events-none",
+          ].join(" ")}
+          data-open={open || undefined}
+        >
+          <span
+            id={`${uid}-value`}
+            className={[
+              "relative z-10 truncate",
+              selected ? "text-ink" : "text-ink-faint font-normal",
+            ].join(" ")}
+          >
+            {selected ? selected.label : placeholder}
+          </span>
+          <svg
+            aria-hidden
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            className={[
+              "relative z-10 shrink-0 transition-[transform,color] duration-300 ease-[var(--ease-spring)]",
+              open ? "rotate-180 text-ink" : "text-ink-faint group-hover/select:text-ink-label",
+            ].join(" ")}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+
+          {open && (
+            <span aria-hidden className="pointer-events-none absolute inset-0 z-5 rounded-xl overflow-hidden">
+              <span
+                className="block absolute inset-y-0 w-[30%] -left-[30%] animate-input-shimmer"
+                style={{
+                  background:
+                    "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)",
+                }}
+              />
+            </span>
+          )}
+        </button>
+
+        {mounted && (
+          <Portal>
+          <div
+            ref={setFloating}
+            className="p-1.5 rounded-[16px]"
+            style={{
+              ...panelStyle,
+              maxWidth: "min(420px, calc(100vw - 2rem))",
+              width: "max-content",
+            }}
+          >
+            <div
+              ref={listRef}
+              id={`${uid}-list`}
+              role="listbox"
+              aria-labelledby={label ? `${uid}-label` : undefined}
+              className="bg-panel-face rounded-[11px] p-1 flex flex-col gap-0.5 max-h-72 overflow-y-auto scroll-thin"
+              style={{ boxShadow: "var(--panel-face-shadow)" }}
+            >
+              {options.map((opt, i) => {
+                const isSelected = opt.value === value;
+                const isActive = i === active;
+                return (
+                  <div
+                    key={opt.value}
+                    id={`${uid}-opt-${i}`}
+                    data-index={i}
+                    role="option"
+                    aria-selected={isSelected}
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => pick(i)}
+                    onMouseMove={() => setActive(i)}
+                    className={[
+                      "flex items-center justify-between gap-3 w-full px-2.5 py-2 text-[13px] rounded-[8px] cursor-pointer",
+                      "transition-colors duration-100",
+                      isSelected ? "font-medium" : "",
+                      // one ink per state: utilities sort by name, so text-ink-body would beat text-ink
+                      isSelected || isActive ? "text-ink" : "text-ink-body",
+                      isActive ? "bg-surface-active/80" : "",
+                    ].join(" ")}
+                    style={{
+                      animation: `select-option-in 300ms var(--ease-out-soft) ${40 + i * 22}ms both`,
+                    }}
+                  >
+                    <span className="whitespace-nowrap">{opt.label}</span>
+                    {isSelected && (
+                      <svg
+                        aria-hidden
+                        className="shrink-0 text-ink"
+                        width="13"
+                        height="13"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2.5"
+                        viewBox="0 0 24 24"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          </Portal>
+        )}
+      </div>
+
+      {hint && <p className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>}
+    </div>
+  );
+}