@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Pagination.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className = "",
+}: PaginationProps) {
+  const slots = buildSlots(currentPage, totalPages);
+  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+  const measurePill = (page: number) => {
+    const btn = btnRefs.current[String(page)];
+    const container = containerRef.current;
+    if (!btn || !container) return;
+    const cr = container.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ left: br.left - cr.left, width: br.width, ready: true });
+  };
+
+  /* Only the thumb moves: it glides to the new page without overshoot,
+     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(currentPage));
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [currentPage]);
+
+  return (
+    <nav
+      aria-label="Pagination"
+      className={[
+        "inline-flex items-center gap-0.5 rounded-[13px] p-1",
+        className,
+      ].join(" ")}
+      style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+    >
+      <button
+        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-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)] [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>
+        <span className="relative z-10 hidden sm:inline">prev</span>
+      </button>
+
+      <div ref={containerRef} className="relative flex items-center">
+        {pill.ready && (
+          <span
+            aria-hidden
+            className="absolute top-0 bottom-0 rounded-[9px] pointer-events-none z-0"
+            style={{
+              left: pill.left,
+              width: pill.width,
+              background: "var(--face)",
+              boxShadow: "var(--thumb-shadow)",
+              transition: "left 340ms var(--ease-out-soft), width 340ms var(--ease-out-soft)",
+            }}
+          />
+        )}
+
+        {slots.map((slot, i) =>
+          slot === "..." ? (
+            <span
+              key={`dot-${i}`}
+              aria-hidden
+              className="w-8 h-8 flex items-center justify-center text-[11px] text-ink-faint select-none relative z-10"
+            >
+              ···
+            </span>
+          ) : (
+            <button
+              key={`slot-${i}`}
+              ref={(el) => {
+                btnRefs.current[String(slot)] = el;
+              }}
+              onClick={() => slot !== currentPage && onPageChange(slot as number)}
+              aria-label={`Page ${slot}`}
+              aria-current={slot === currentPage ? "page" : undefined}
+              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-ink"
+                  : "text-ink-muted hover:text-ink",
+              ].join(" ")}
+            >
+              {slot}
+            </button>
+          ),
+        )}
+      </div>
+
+      <button
+        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-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)] [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" />
+        </svg>
+      </button>
+    </nav>
+  );
+}
+
+function buildSlots(current: number, total: number): (number | "...")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const slots: (number | "...")[] = new Array(7);
+
+  slots[0] = 1;
+  slots[6] = total;
+
+  if (current <= 3) {
+    slots[1] = 2;
+    slots[2] = 3;
+    slots[3] = 4;
+    slots[4] = 5;
+    slots[5] = "...";
+  } else if (current >= total - 2) {
+    slots[1] = "...";
+    slots[2] = total - 4;
+    slots[3] = total - 3;
+    slots[4] = total - 2;
+    slots[5] = total - 1;
+  } else {
+    slots[1] = "...";
+    slots[2] = current - 1;
+    slots[3] = current;
+    slots[4] = current + 1;
+    slots[5] = "...";
+  }
+
+  return slots;
+}

package/dist/registry/Popover.tsx

@@ -0,0 +1,116 @@
+"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";
+
+interface PopoverProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  position?: PopoverPosition;
+  className?: string;
+}
+
+export function Popover({
+  trigger,
+  children,
+  position = "bottom",
+  className = "",
+}: PopoverProps) {
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const ref = 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) {
+      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 {
+      const t = setTimeout(() => setMounted(false), 180);
+      return () => clearTimeout(t);
+    }
+  }, [open, floatingRef]);
+
+  useEffect(() => {
+    function onOutside(e: MouseEvent) {
+      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;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        ref.current?.querySelector<HTMLElement>("[data-popover-trigger] button, [data-popover-trigger] a")?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  return (
+    <div ref={ref} className={["relative inline-flex", className].join(" ")}>
+      <div data-popover-trigger onClick={() => setOpen((v) => !v)} className="inline-flex cursor-pointer">
+        {React.isValidElement(trigger)
+          ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-controls": open ? `${uid}-popover` : undefined,
+            })
+          : trigger}
+      </div>
+      {mounted && (
+        <Portal>
+          <div
+            ref={setFloating}
+            id={`${uid}-popover`}
+            role="dialog"
+            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-panel-face rounded-[11px] p-3.5 text-[13px] text-ink-body leading-relaxed"
+              style={{ boxShadow: "var(--panel-face-shadow)" }}
+            >
+              {children}
+            </div>
+          </div>
+        </Portal>
+      )}
+    </div>
+  );
+}

package/dist/registry/Progress.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+interface ProgressProps {
+  value: number;
+  max?: number;
+  label?: string;
+  showValue?: boolean;
+  className?: string;
+}
+
+export function Progress({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  className = "",
+}: ProgressProps) {
+  const pct = Math.min(Math.max((value / max) * 100, 0), 100);
+  const [displayed, setDisplayed] = useState(0);
+  const t = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    t.current = setTimeout(() => setDisplayed(pct), 80);
+    return () => { if (t.current) clearTimeout(t.current); };
+  }, [pct]);
+
+  return (
+    <div className={["flex flex-col gap-2", className].join(" ")}>
+      {(label || showValue) && (
+        <div className="flex items-center justify-between gap-4">
+          {label && (
+            <span className="text-[13px] font-medium text-ink-label truncate">{label}</span>
+          )}
+          {showValue && (
+            <span aria-hidden className="text-[12px] tabular-nums text-ink-muted shrink-0">
+              {Math.round(pct)}%
+            </span>
+          )}
+        </div>
+      )}
+      <div
+        className="w-full h-2 rounded-full p-px overflow-hidden"
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+      >
+        <div
+          className="h-full rounded-full relative overflow-hidden"
+          style={{
+            width: `${displayed}%`,
+            /* Never collapses below a pill, so 1% still reads as started */
+            minWidth: displayed > 0 ? 6 : 0,
+            background: "var(--face-inverse)",
+            boxShadow: "var(--fill-shadow)",
+            transition: "width 700ms var(--ease-out-soft)",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/dist/registry/QuoteCard.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { CardShell } from "./CardShell";
+
+interface QuoteCardProps {
+  quote: string;
+  author: string;
+  role?: string;
+  avatarSrc?: string;
+  theme?: "light" | "dark";
+  className?: string;
+}
+
+/* Built on CardShell: the quote owns the face; who said it sits on the rail,
+   so a stretched card grows the face instead of opening a gap mid-card. */
+export function QuoteCard({
+  quote,
+  author,
+  role,
+  avatarSrc,
+  theme = "light",
+  className = "",
+}: QuoteCardProps) {
+  const dark = theme === "dark";
+  // Handles like "@name" shouldn't render an "@" monogram
+  const initial = (author.match(/[\p{L}\p{N}]/u)?.[0] ?? "?").toLowerCase();
+
+  const rail = (
+    <figcaption className="flex items-center gap-2.5 min-w-0">
+      {avatarSrc ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <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)" }}
+        />
+      ) : (
+        <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-ink-label",
+          ].join(" ")}
+          style={{
+            background: dark ? "var(--tile-dark)" : "var(--tile)",
+            boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
+          }}
+        >
+          {initial}
+        </span>
+      )}
+      <span className="min-w-0 truncate">
+        <cite
+          className={[
+            "not-italic font-semibold tracking-[-0.008em]",
+            dark ? "text-white" : "text-ink",
+          ].join(" ")}
+        >
+          {author}
+        </cite>
+        {role && <span> · {role}</span>}
+      </span>
+    </figcaption>
+  );
+
+  return (
+    <CardShell as="figure" theme={theme} className={className} rail={rail} railKind="text">
+      <div className="flex-1 flex flex-col p-8">
+        <svg
+          aria-hidden
+          width="22"
+          height="17"
+          viewBox="0 0 56 44"
+          className={["shrink-0 mb-auto", dark ? "text-white/25" : "text-ink-ghost"].join(" ")}
+        >
+          <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"
+          />
+        </svg>
+        <blockquote
+          className={[
+            "m-0 pt-8 text-[19px] leading-[1.55] tracking-[-0.015em] text-pretty",
+            dark ? "text-neutral-50" : "text-ink",
+          ].join(" ")}
+        >
+          {quote}
+        </blockquote>
+      </div>
+    </CardShell>
+  );
+}

package/dist/registry/Radio.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+
+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;
+}
+
+/* Every radio is a sunken field; the selection is one dark face that
+   flows between them. Its leading edge leaves first and the trailing edge
+   catches up on a spring, so it stretches across the gap like a drop of
+   liquid and settles into the new well. One Tab stop for the group,
+   arrows move between options (ARIA radio group pattern).              */
+interface Blob {
+  top: number;
+  bottom: number;
+  left: number;
+  size: number;
+  dir: -1 | 0 | 1;
+}
+
+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,
+  defaultValue = "",
+  onChange,
+  name,
+  className = "",
+}: RadioGroupProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const selected = value !== undefined ? value : internal;
+  const uid = useId();
+  const refs = useRef<(HTMLButtonElement | null)[]>([]);
+  const groupRef = useRef<HTMLDivElement>(null);
+  const prevIndex = useRef(-1);
+  const [blob, setBlob] = useState<Blob | null>(null);
+
+  const select = (val: string, disabled?: boolean) => {
+    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: 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);
+  }, [selectedIndex]);
+
+  // Rewrapped descriptions move the wells; follow them without animating.
+  // An observer reports once on attach — that one is skipped, or it would
+  // cut short a move already under way.
+  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: number, step: 1 | -1) => {
+    const at = enabled.indexOf(from);
+    const next = enabled[(at + step + enabled.length) % enabled.length];
+    refs.current[next]?.focus();
+    select(options[next].value);
+  };
+
+  return (
+    <div
+      ref={groupRef}
+      role="radiogroup"
+      aria-label={name}
+      className={["relative flex flex-col gap-1", className].join(" ")}
+    >
+      {options.map((opt, i) => {
+        const active = selected === opt.value;
+        return (
+          <div
+            key={opt.value}
+            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(" ")}
+          >
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <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-ink-muted leading-relaxed">
+                  {opt.description}
+                </span>
+              )}
+            </div>
+
+            {/* Clicks bubble to the row, so the control itself has no onClick */}
+            <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` : undefined}
+              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)" }}
+            />
+          </div>
+        );
+      })}
+
+      {blob && (
+        <>
+          <span
+            aria-hidden
+            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}`,
+            }}
+          />
+          {/* 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-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}`,
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+}