@blurrow/ui 0.0.0-stage → 0.2.0

package/dist/registry/Modal.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { CloseButton } from "./CloseButton";
+import { useModalBehavior } from "./useModalBehavior";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+const CLOSE_MS = 240;
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  className = "",
+}: ModalProps) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return;
+    }
+    if (mounted) {
+      setVisible(false);
+      const t = setTimeout(() => setMounted(false), CLOSE_MS);
+      return () => clearTimeout(t);
+    }
+  }, [open, mounted]);
+
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+    void dialogRef.current?.getBoundingClientRect();
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+
+  // Escape, focus trap + restore, scroll lock
+  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose });
+
+  if (!mounted) return null;
+
+  return (
+    <div className="fixed inset-0 z-90 flex items-center justify-center p-4">
+      <div
+        aria-hidden
+        className={[
+          "absolute inset-0 backdrop-blur-[6px]",
+          "transition-opacity ease-out",
+          visible ? "opacity-100 duration-300" : "opacity-0 duration-200",
+        ].join(" ")}
+        style={{ background: "var(--scrim)" }}
+        onClick={onClose}
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? `${uid}-title` : undefined}
+        aria-describedby={description ? `${uid}-desc` : undefined}
+        className={[
+          "relative z-10 w-full max-w-lg rounded-[22px] p-1.5",
+          "transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]",
+          visible
+            ? "opacity-100 scale-100 translate-y-0 duration-300"
+            : "opacity-0 scale-[0.94] translate-y-3 duration-200",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={{ background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" }}
+      >
+        <div
+          className="bg-white rounded-[16px] overflow-hidden"
+          style={{ boxShadow: "var(--panel-face-shadow)" }}
+        >
+          <div className="pl-6 pr-4 pt-5 pb-4 flex items-start gap-4">
+            <div className="flex-1 min-w-0 flex flex-col gap-1.5 pt-1">
+              {title && (
+                <h2
+                  id={`${uid}-title`}
+                  className="text-[16px] font-semibold text-neutral-900 tracking-[-0.015em] leading-snug"
+                >
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <p id={`${uid}-desc`} className="text-[13px] text-neutral-500 leading-relaxed">
+                  {description}
+                </p>
+              )}
+            </div>
+            <CloseButton label="Close dialog" onClick={onClose} />
+          </div>
+
+          {children && <div className="px-6 pb-5 text-[13.5px] text-neutral-600 leading-relaxed">{children}</div>}
+
+          {/* Footer sits in the bezel tone so actions read as a separate tray */}
+          {actions && (
+            <div
+              className="px-5 py-3.5 flex items-center justify-end gap-2"
+              style={{
+                background: "linear-gradient(180deg, #fafafa 0%, #f6f6f6 100%)",
+                boxShadow: "inset 0 1px 0 rgba(17,17,17,0.06)",
+              }}
+            >
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/registry/Pagination.tsx

@@ -0,0 +1,163 @@
+"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 = () => {
+    const btn = btnRefs.current[String(currentPage)];
+    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 });
+  };
+
+  useLayoutEffect(() => {
+    measurePill();
+  }, []);
+
+  /* Only the thumb moves: it glides to the new page without overshoot,
+     and the numbers themselves stay still.                            */
+  useEffect(() => {
+    measurePill();
+  }, [currentPage]);
+
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill());
+    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-neutral-600 hover:text-neutral-900 transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none"
+      >
+        <span className="pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face-light)] [box-shadow:var(--thumb-shadow)]" />
+        <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-light)",
+              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-neutral-400 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-neutral-900"
+                  : "text-neutral-500 hover:text-neutral-900",
+              ].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-neutral-600 hover:text-neutral-900 transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none"
+      >
+        <span className="pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face-light)] [box-shadow:var(--thumb-shadow)]" />
+        <span className="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,121 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useId } from "react";
+
+type PopoverPosition = "top" | "bottom" | "left" | "right";
+
+interface PopoverProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  position?: PopoverPosition;
+  className?: string;
+}
+
+/* Anchored with margins on a wrapper so the panel's own transform is free
+   for the enter motion, which scales out from the trigger side. */
+const positionStyles: Record<PopoverPosition, string> = {
+  top: "bottom-full left-1/2 -translate-x-1/2 pb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 pt-2",
+  left: "right-full top-1/2 -translate-y-1/2 pr-2",
+  right: "left-full top-1/2 -translate-y-1/2 pl-2",
+};
+
+const origin: Record<PopoverPosition, string> = {
+  top: "origin-bottom",
+  bottom: "origin-top",
+  left: "origin-right",
+  right: "origin-left",
+};
+
+const enterFrom: Record<PopoverPosition, string> = {
+  top: "translate-y-1.5",
+  bottom: "-translate-y-1.5",
+  left: "translate-x-1.5",
+  right: "-translate-x-1.5",
+};
+
+export function Popover({
+  trigger,
+  children,
+  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 panelRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+    } else {
+      setVisible(false);
+      const t = setTimeout(() => setMounted(false), 180);
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    function onOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, []);
+
+  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 && (
+        <div className={["absolute z-50", positionStyles[position]].join(" ")}>
+          <div
+            ref={panelRef}
+            id={`${uid}-popover`}
+            role="dialog"
+            className={[
+              "min-w-[220px] rounded-[16px] p-1.5",
+              "transition-[opacity,transform,scale,translate] duration-200 ease-[var(--ease-spring)]",
+              origin[position],
+              visible
+                ? "opacity-100 scale-100 translate-x-0 translate-y-0"
+                : ["opacity-0 scale-[0.96]", enterFrom[position]].join(" "),
+            ].join(" ")}
+            style={{ background: "var(--panel-bezel)", boxShadow: "var(--overlay-shadow)" }}
+          >
+            <div
+              className="bg-white rounded-[11px] p-3.5 text-[13px] text-neutral-600 leading-relaxed"
+              style={{ boxShadow: "var(--panel-face-shadow)" }}
+            >
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+    </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-neutral-700 truncate">{label}</span>
+          )}
+          {showValue && (
+            <span aria-hidden className="text-[12px] tabular-nums text-neutral-500 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-dark)",
+            boxShadow: "inset 0 2px 3px -2px rgba(255,255,255,0.135), 0 0 2px rgba(0,0,0,0.2)",
+            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 rgba(255,255,255,0.084)" : "0 0 0 0.5px rgba(17,17,17,0.048)" }}
+        />
+      ) : (
+        <span
+          aria-hidden
+          className={[
+            "w-7 h-7 rounded-full flex items-center justify-center text-[11.5px] font-semibold shrink-0",
+            dark ? "text-white" : "text-neutral-700",
+          ].join(" ")}
+          style={{
+            background: dark ? "var(--tile-dark)" : "var(--face-light)",
+            boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+          }}
+        >
+          {initial}
+        </span>
+      )}
+      <span className="min-w-0 truncate">
+        <cite
+          className={[
+            "not-italic font-semibold tracking-[-0.008em]",
+            dark ? "text-white" : "text-neutral-900",
+          ].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-neutral-300"].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-neutral-900",
+          ].join(" ")}
+        >
+          {quote}
+        </blockquote>
+      </div>
+    </CardShell>
+  );
+}