@blurrow/ui 0.1.0 → 0.2.0

package/dist/registry/Radio.tsx

@@ -0,0 +1,202 @@
+"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";
+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"]) => {
+    const group = groupRef.current;
+    const el = refs.current[prevIndex.current];
+    if (!group || !el) return setBlob(null);
+    setBlob({
+      top: el.offsetTop,
+      bottom: group.clientHeight - el.offsetTop - el.offsetHeight,
+      left: el.offsetLeft,
+      size: el.offsetWidth,
+      dir,
+    });
+  };
+
+  useLayoutEffect(() => {
+    const prev = prevIndex.current;
+    prevIndex.current = selectedIndex;
+    measure(prev < 0 || selectedIndex < 0 ? 0 : selectedIndex > prev ? 1 : selectedIndex < prev ? -1 : 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedIndex]);
+
+  // Rewrapped descriptions move the wells; follow them without animating.
+  // 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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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-neutral-900 leading-snug">
+                {opt.label}
+              </span>
+              {opt.description && (
+                <span id={`${uid}-${i}-desc`} className="text-[12px] text-neutral-500 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-neutral-900",
+                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-dark)",
+              boxShadow: "var(--face-dark-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-white"
+            style={{
+              top: blob.top + (blob.size - 8) / 2,
+              left: blob.left + (blob.size - 8) / 2,
+              boxShadow: "0 1px 1px rgba(0,0,0,0.3)",
+              transition: blob.dir === 0 ? "none" : `top ${TRAIL}`,
+            }}
+          />
+        </>
+      )}
+    </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-neutral-900",
+              reaction.active ? "text-white" : "text-neutral-600 hover:text-neutral-900",
+            ].join(" ")}
+            style={{
+              /* Off is a raised face; on is the dark face — pressed in and lit */
+              background: reaction.active ? "var(--face-dark)" : "var(--face-light)",
+              boxShadow: reaction.active ? "var(--face-dark-shadow)" : "var(--face-light-shadow)",
+              textShadow: reaction.active ? "0 -1px 0 rgba(0,0,0,0.4)" : "0 1px 0 rgba(255,255,255,0.9)",
+              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: "linear-gradient(90deg, #0a0a0a 0%, #262626 100%)",
+          boxShadow: "0 0 8px rgba(17,17,17,0.3)",
+        }}
+      />
+    </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-neutral-500",
+        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-neutral-400"
+      >
+        <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,290 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useId } from "react";
+
+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 [open, setOpen] = useState(false);
+  // The list stays mounted while it folds away, and only unfolds once painted
+  const [mounted, setMounted] = useState(false);
+  const [entered, setEntered] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [active, setActive] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selected = options[selectedIndex];
+
+  const close = () => {
+    setOpen(false);
+    setEntered(false);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(() => setMounted(false), 200);
+  };
+
+  useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+
+  useEffect(() => {
+    function onOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        close();
+      }
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    listRef.current
+      ?.querySelector(`[data-index="${active}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+
+  const openList = () => {
+    setActive(selectedIndex >= 0 ? selectedIndex : 0);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    setOpen(true);
+    setMounted(true);
+    requestAnimationFrame(() => requestAnimationFrame(() => setEntered(true)));
+  };
+
+  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-neutral-700 tracking-[-0.005em]"
+        >
+          {label}
+        </span>
+      )}
+
+      <div
+        ref={ref}
+        className={["relative", fullWidth ? "w-full" : "inline-block", className].join(" ")}
+      >
+        <button
+          ref={buttonRef}
+          type="button"
+          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-neutral-900",
+            "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-neutral-900" : "text-neutral-400 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-neutral-900" : "text-neutral-400 group-hover/select:text-neutral-700",
+            ].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%, rgba(255,255,255,0.55) 50%, transparent 100%)",
+                }}
+              />
+            </span>
+          )}
+        </button>
+
+        {mounted && (
+          <div
+            className="absolute left-0 z-50 mt-2 p-1.5 rounded-[16px] origin-top"
+            style={{
+              minWidth: "100%",
+              maxWidth: "min(420px, calc(100vw - 2rem))",
+              width: "max-content",
+              background: "var(--panel-bezel)",
+              boxShadow: "var(--overlay-shadow)",
+              /* Unfolds downward out of the field: a clip reveals it top to
+                 bottom while it fades and settles. The clip's sides reach
+                 past the panel so its shadow is never cut off.             */
+              opacity: entered ? 1 : 0,
+              transform: entered ? "none" : "translateY(-4px) scale(0.98)",
+              clipPath: entered ? "inset(-48px -48px -48px -48px)" : "inset(-48px -48px 55% -48px)",
+              transition: entered
+                ? "opacity 180ms ease-out, transform 360ms var(--ease-out-soft), clip-path 360ms var(--ease-out-soft)"
+                : "opacity 160ms ease-in, transform 200ms ease-in, clip-path 200ms ease-in",
+            }}
+          >
+            <div
+              ref={listRef}
+              id={`${uid}-list`}
+              role="listbox"
+              aria-labelledby={label ? `${uid}-label` : undefined}
+              className="bg-white 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 text-neutral-900" : "text-neutral-600",
+                      isActive ? "bg-neutral-100/80 text-neutral-900" : "",
+                    ].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-neutral-900"
+                        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>
+        )}
+      </div>
+
+      {hint && <p className="text-[11.5px] text-neutral-500 mt-0.5">{hint}</p>}
+    </div>
+  );
+}