@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Table.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+
+interface Column<T> {
+  key: keyof T | string;
+  label: string;
+  align?: "left" | "right" | "center";
+  render?: (value: unknown, row: T) => React.ReactNode;
+  width?: string;
+}
+
+interface TableProps<T extends Record<string, unknown>> {
+  columns: Column<T>[];
+  rows: T[];
+  title?: string;
+  description?: string;
+  className?: string;
+  onRowClick?: (row: T) => void;
+}
+
+const alignClass = (align?: "left" | "right" | "center") =>
+  align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+
+/* Title and column headers live in the bezel; rows sit on the raised face. */
+export function Table<T extends Record<string, unknown>>({
+  columns,
+  rows,
+  title,
+  description,
+  className = "",
+  onRowClick,
+}: TableProps<T>) {
+  return (
+    <div
+      className={["w-full rounded-[18px] p-1.5", title || description ? "pt-0" : "", className].join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      {(title || description) && (
+        <div className="px-3.5 pt-3.5 pb-3">
+          {title && <p className="text-[13px] font-semibold text-ink tracking-[-0.01em]">{title}</p>}
+          {description && <p className="text-[12px] text-ink-muted mt-0.5">{description}</p>}
+        </div>
+      )}
+
+      <div
+        className="bg-panel-face rounded-[13px] overflow-x-auto scroll-thin"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        <table className="w-full text-left border-collapse">
+          {title && <caption className="sr-only">{title}</caption>}
+          <thead>
+            <tr className="border-b border-line">
+              {columns.map((col) => (
+                <th
+                  key={String(col.key)}
+                  scope="col"
+                  style={col.width ? { width: col.width } : undefined}
+                  className={[
+                    "px-4 pt-3 pb-2.5 text-[12px] font-medium text-ink-muted lowercase whitespace-nowrap",
+                    alignClass(col.align),
+                  ].join(" ")}
+                >
+                  {col.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, ri) => (
+              <tr
+                key={ri}
+                onClick={() => onRowClick?.(row)}
+                // Clickable rows are reachable and operable from the keyboard too
+                tabIndex={onRowClick ? 0 : undefined}
+                onKeyDown={
+                  onRowClick
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          onRowClick(row);
+                        }
+                      }
+                    : undefined
+                }
+                className={[
+                  "border-b border-line last:border-0 transition-colors duration-100",
+                  onRowClick
+                    ? "cursor-pointer hover:bg-surface-hover focus-visible:bg-surface-hover outline-none focus-visible:shadow-[inset_2px_0_0_var(--ink)]"
+                    : "",
+                ].join(" ")}
+              >
+                {columns.map((col, ci) => {
+                  const val = row[col.key as keyof T] as unknown;
+                  return (
+                    <td
+                      key={String(col.key)}
+                      className={[
+                        "px-4 py-3 text-[13px]",
+                        ci === 0 ? "font-medium text-ink" : "text-ink-body tabular-nums",
+                        alignClass(col.align),
+                      ].join(" ")}
+                    >
+                      {col.render ? col.render(val, row) : String(val ?? "")}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+            {rows.length === 0 && (
+              <tr>
+                <td colSpan={columns.length} className="px-5 py-12 text-center">
+                  <p className="text-[13px] font-medium text-ink-label">nothing here yet</p>
+                  <p className="text-[12px] text-ink-muted mt-0.5">rows will show up here once there are some.</p>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/dist/registry/TableOfContents.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+export interface TocItem {
+  key: string;
+  label: string;
+  level: 1 | 2 | 3;
+}
+
+interface TableOfContentsProps {
+  items: TocItem[];
+  activeKey?: string;
+  defaultActiveKey?: string;
+  onSelect?: (key: string) => void;
+  className?: string;
+}
+
+const indent: Record<1 | 2 | 3, number> = { 1: 16, 2: 28, 3: 40 };
+
+/* A hairline track runs down the left edge; a slim dark marker glides
+   along it to the active heading. Nothing else moves — the active label
+   just darkens.                                                       */
+export function TableOfContents({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onSelect,
+  className = "",
+}: TableOfContentsProps) {
+  const [internal, setInternal] = useState(defaultActiveKey ?? items[0]?.key ?? "");
+  const current = activeKey !== undefined ? activeKey : internal;
+  const refs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const [marker, setMarker] = useState<{ top: number; height: number } | null>(null);
+  const [ready, setReady] = useState(false);
+
+  const measure = () => {
+    const el = refs.current[current];
+    setMarker(el ? { top: el.offsetTop, height: el.offsetHeight } : null);
+  };
+
+  useLayoutEffect(() => {
+    measure();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current]);
+
+  useEffect(() => {
+    // Only animate moves after the first placement
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  const handleSelect = (key: string) => {
+    setInternal(key);
+    onSelect?.(key);
+  };
+
+  const slide = ready ? "top 360ms var(--ease-out-soft), height 360ms var(--ease-out-soft)" : "none";
+
+  return (
+    <nav
+      aria-label="On this page"
+      className={["rounded-[18px] p-1.5", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div
+        className="bg-panel-face rounded-[13px] px-5 pt-4 pb-4"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        <p aria-hidden className="text-[12px] font-medium text-ink-faint mb-3">
+          on this page
+        </p>
+
+        <div className="relative">
+          <span aria-hidden className="absolute left-0 top-0 bottom-0 w-px bg-ink/[0.08]" />
+          {marker && (
+            <span
+              aria-hidden
+              className="absolute -left-[0.5px] w-[2px] rounded-full bg-ink"
+              style={{ top: marker.top + 6, height: marker.height - 12, transition: slide }}
+            />
+          )}
+
+          {items.map((item) => {
+            const isActive = current === item.key;
+            return (
+              <button
+                key={item.key}
+                ref={(el) => {
+                  refs.current[item.key] = el;
+                }}
+                type="button"
+                onClick={() => handleSelect(item.key)}
+                aria-current={isActive ? "location" : undefined}
+                className={[
+                  // Weight stays fixed so the active item doesn't reflow its line
+                  "relative block w-full text-left py-1.5 text-[13px] leading-5 rounded-[6px] cursor-pointer",
+                  "transition-colors duration-200 outline-none",
+                  "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink",
+                  isActive
+                    ? "text-ink font-medium"
+                    : item.level === 1
+                      ? "text-ink-body hover:text-ink"
+                      : "text-ink-faint hover:text-ink-label",
+                ].join(" ")}
+                style={{ paddingLeft: indent[item.level] }}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </nav>
+  );
+}

package/dist/registry/Tabs.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useLayoutEffect, useId } from "react";
+
+interface Tab {
+  key: string;
+  label: string;
+  content?: React.ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  defaultTab?: string;
+  onChange?: (key: string) => void;
+  className?: string;
+}
+
+/* A sunken well holding a raised thumb — the same segmented control as
+   Pagination. One Tab stop; arrows move between tabs and select them.  */
+export function Tabs({ tabs, defaultTab, onChange, className = "" }: TabsProps) {
+  const [active, setActive] = useState(defaultTab ?? tabs[0]?.key ?? "");
+  const [direction, setDirection] = useState<"left" | "right">("right");
+  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });
+  const listRef = useRef<HTMLDivElement>(null);
+  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const uid = useId();
+
+  const measurePill = (key: string) => {
+    const btn = btnRefs.current[key];
+    const list = listRef.current;
+    if (!btn || !list) return;
+    const lr = list.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ left: br.left - lr.left, width: br.width, ready: true });
+  };
+
+  // Before paint, so the thumb is never seen out of place
+  useLayoutEffect(() => { measurePill(active); }, [active]);
+
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill(active));
+    if (listRef.current) ro.observe(listRef.current);
+    return () => ro.disconnect();
+  }, [active]);
+
+  const handleSelect = (key: string) => {
+    const prevIndex = tabs.findIndex((t) => t.key === active);
+    const nextIndex = tabs.findIndex((t) => t.key === key);
+    setDirection(nextIndex > prevIndex ? "right" : "left");
+    setActive(key);
+    onChange?.(key);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    const i = tabs.findIndex((t) => t.key === active);
+    let next = -1;
+    if (e.key === "ArrowRight") next = (i + 1) % tabs.length;
+    if (e.key === "ArrowLeft") next = (i - 1 + tabs.length) % tabs.length;
+    if (e.key === "Home") next = 0;
+    if (e.key === "End") next = tabs.length - 1;
+    if (next < 0) return;
+    e.preventDefault();
+    const key = tabs[next].key;
+    handleSelect(key);
+    btnRefs.current[key]?.focus();
+  };
+
+  const activeTab = tabs.find((t) => t.key === active);
+
+  return (
+    <div className={["flex flex-col gap-4", className].join(" ")}>
+      <div
+        ref={listRef}
+        role="tablist"
+        onKeyDown={onKeyDown}
+        className="relative flex w-full sm:inline-flex sm:w-auto sm:self-start items-center rounded-[13px] p-1"
+        style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+      >
+        {pill.ready && (
+          <span
+            aria-hidden
+            className="absolute top-1 bottom-1 rounded-[9px] pointer-events-none"
+            style={{
+              left: pill.left,
+              width: pill.width,
+              background: "var(--face)",
+              boxShadow: "var(--thumb-shadow)",
+              transition: "left 300ms var(--ease-spring), width 300ms var(--ease-spring)",
+            }}
+          />
+        )}
+
+        {tabs.map((tab) => {
+          const isActive = active === tab.key;
+          return (
+            <button
+              key={tab.key}
+              ref={(el) => { btnRefs.current[tab.key] = el; }}
+              id={`${uid}-tab-${tab.key}`}
+              role="tab"
+              type="button"
+              aria-selected={isActive}
+              aria-controls={tab.content ? `${uid}-panel-${tab.key}` : undefined}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => handleSelect(tab.key)}
+              className={[
+                "relative z-10 flex-1 sm:flex-none px-3.5 py-2 rounded-[9px] text-[13px] font-medium text-center whitespace-nowrap cursor-pointer",
+                "transition-colors duration-150",
+                "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink",
+                isActive ? "text-ink" : "text-ink-muted hover:text-ink-soft",
+              ].join(" ")}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {activeTab?.content && (
+        <div
+          key={active}
+          id={`${uid}-panel-${active}`}
+          role="tabpanel"
+          aria-labelledby={`${uid}-tab-${active}`}
+          tabIndex={0}
+          className={[
+            "text-[13px] text-ink-body leading-relaxed rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink",
+            direction === "right" ? "animate-tab-slide-right" : "animate-tab-slide-left",
+          ].join(" ")}
+        >
+          {activeTab.content}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/registry/TagInput.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useId } from "react";
+
+interface TagInputProps {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (tags: string[]) => void;
+  placeholder?: string;
+  label?: string;
+  hint?: string;
+  maxTags?: number;
+  fullWidth?: boolean;
+  className?: string;
+}
+
+interface AnimatedTag {
+  text: string;
+  state: "entering" | "visible" | "exiting";
+}
+
+export function TagInput({
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "add a tag…",
+  label,
+  hint,
+  maxTags,
+  fullWidth = false,
+  className = "",
+}: TagInputProps) {
+  const [internal, setInternal] = useState<string[]>(defaultValue);
+  const [input, setInput] = useState("");
+  const [animTags, setAnimTags] = useState<AnimatedTag[]>(() =>
+    (value ?? defaultValue).map((t) => ({ text: t, state: "visible" as const }))
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+  const uid = useId();
+  const prevValueRef = useRef<string[]>(value ?? defaultValue);
+
+  const tags = value !== undefined ? value : internal;
+
+  useEffect(() => {
+    const prev = prevValueRef.current;
+    const next = tags;
+
+    const added = next.filter((t) => !prev.includes(t));
+    const removed = prev.filter((t) => !next.includes(t));
+
+    if (added.length === 0 && removed.length === 0) return;
+
+    setAnimTags((current) => {
+      const updated = current.map((at) =>
+        removed.includes(at.text) ? { ...at, state: "exiting" as const } : at
+      );
+      added.forEach((t) => {
+        if (!updated.find((at) => at.text === t)) {
+          updated.push({ text: t, state: "entering" });
+        }
+      });
+      return updated;
+    });
+
+    if (added.length > 0) {
+      requestAnimationFrame(() => {
+        setAnimTags((current) =>
+          current.map((at) =>
+            at.state === "entering" ? { ...at, state: "visible" } : at
+          )
+        );
+      });
+    }
+
+    if (removed.length > 0) {
+      setTimeout(() => {
+        setAnimTags((current) => current.filter((at) => at.state !== "exiting"));
+      }, 180);
+    }
+
+    prevValueRef.current = next;
+  }, [tags]);
+
+  const update = (next: string[]) => {
+    setInternal(next);
+    onChange?.(next);
+  };
+
+  const addTag = (raw: string) => {
+    const tag = raw.trim();
+    if (!tag || tags.includes(tag)) return;
+    if (maxTags && tags.length >= maxTags) return;
+    update([...tags, tag]);
+    setInput("");
+  };
+
+  const removeTag = (index: number) => {
+    const tagText = tags[index];
+    if (!tagText) return;
+    setAnimTags((current) =>
+      current.map((at) =>
+        at.text === tagText ? { ...at, state: "exiting" as const } : at
+      )
+    );
+    setTimeout(() => {
+      update(tags.filter((_, i) => i !== index));
+    }, 180);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addTag(input);
+    }
+    if (e.key === "Backspace" && !input && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+
+  return (
+    <div className={["flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && (
+        <label htmlFor={`${uid}-input`} className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em]">
+          {label}
+        </label>
+      )}
+      <div
+        onClick={() => inputRef.current?.focus()}
+        className={[
+          "flex flex-wrap items-center gap-1.5 rounded-xl px-3 py-2.5",
+          "transition-[box-shadow,background] duration-200 ease-out cursor-text",
+          "[background:var(--field)] [box-shadow:var(--field-shadow)]",
+          "hover:[background:var(--field-hover)] hover:[box-shadow:var(--field-shadow-hover)]",
+          "focus-within:[background:var(--field-focus)] focus-within:[box-shadow:var(--field-shadow-focus)]",
+          fullWidth ? "w-full" : "",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {animTags.map((at) => (
+          <span
+            key={at.text}
+            className={[
+              "inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-[7px] text-[11.5px] font-medium text-ink-label select-none",
+              "transition-all duration-180 ease-[cubic-bezier(0.34,1.4,0.64,1)]",
+              at.state === "entering" ? "opacity-0 scale-75" : "",
+              at.state === "visible" ? "opacity-100 scale-100" : "",
+              at.state === "exiting" ? "opacity-0 scale-75" : "",
+            ].join(" ")}
+            style={{
+              /* Tags are small raised faces sitting in the sunken field */
+              background: "var(--face)",
+              boxShadow: "var(--face-shadow)",
+            }}
+          >
+            {at.text}
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                const idx = tags.indexOf(at.text);
+                if (idx !== -1) removeTag(idx);
+              }}
+              aria-label={`Remove ${at.text}`}
+              className="w-4 h-4 inline-flex items-center justify-center rounded-[5px] text-ink-faint hover:text-ink hover:bg-ink/[0.06] cursor-pointer transition-colors"
+            >
+              <svg width="8" height="8" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          id={`${uid}-input`}
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={() => { if (input) addTag(input); }}
+          placeholder={tags.length === 0 ? placeholder : ""}
+          aria-label={label ? undefined : placeholder}
+          aria-describedby={hint ? `${uid}-hint` : undefined}
+          className="flex-1 min-w-[80px] bg-transparent text-[13.5px] text-ink placeholder:text-ink-faint outline-none py-0.5"
+        />
+      </div>
+      {hint && <p id={`${uid}-hint`} className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>}
+    </div>
+  );
+}

package/dist/registry/Textarea.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React, { useRef, useCallback, useEffect } from "react";
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  fullWidth?: boolean;
+  autoResize?: boolean;
+}
+
+export function Textarea({
+  label,
+  hint,
+  error,
+  fullWidth = false,
+  autoResize = false,
+  className = "",
+  id,
+  rows = 3,
+  onChange,
+  ...rest
+}: TextareaProps) {
+  const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const messageId = textareaId && (error || hint) ? `${textareaId}-message` : undefined;
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const resize = useCallback(() => {
+    if (!autoResize || !ref.current) return;
+    ref.current.style.height = "auto";
+    ref.current.style.height = ref.current.scrollHeight + "px";
+  }, [autoResize]);
+
+  useEffect(() => { resize(); }, [resize]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    resize();
+    onChange?.(e);
+  };
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && (
+        <label
+          htmlFor={textareaId}
+          className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong"
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        ref={ref}
+        id={textareaId}
+        rows={rows}
+        onChange={handleChange}
+        className={[
+          "field rounded-xl px-4 py-3 text-[13.5px] text-ink resize-none scroll-thin",
+          "placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
+          fullWidth ? "w-full" : "",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={messageId}
+        {...rest}
+      />
+      {error && (
+        <p id={messageId} role="alert" className="text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5">
+          <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" />
+            <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
+          </svg>
+          {error}
+        </p>
+      )}
+      {hint && !error && (
+        <p id={messageId} className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>
+      )}
+    </div>
+  );
+}