@blurrow/ui 0.0.0-stage → 0.2.0

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 });
+  };
+
+  useLayoutEffect(() => { measurePill(active); }, []);
+  useEffect(() => { 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-light)",
+              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-neutral-900",
+                isActive ? "text-neutral-900" : "text-neutral-500 hover:text-neutral-800",
+              ].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-neutral-600 leading-relaxed rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neutral-900",
+            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-neutral-700 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:#ffffff] focus-within:[box-shadow:var(--field-shadow-focus)]",
+          fullWidth ? "w-full" : "",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {animTags.map((at, i) => (
+          <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-neutral-700 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-light)",
+              boxShadow: "var(--face-light-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-neutral-400 hover:text-neutral-900 hover:bg-neutral-900/[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-neutral-900 placeholder:text-neutral-400 outline-none py-0.5"
+        />
+      </div>
+      {hint && <p id={`${uid}-hint`} className="text-[11.5px] text-neutral-500 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-neutral-700 tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-neutral-950"
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        ref={ref}
+        id={textareaId}
+        rows={rows}
+        onChange={handleChange}
+        className={[
+          "field rounded-xl px-4 py-3 text-[13.5px] text-neutral-900 resize-none scroll-thin",
+          "placeholder:text-neutral-400 placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-neutral-300",
+          "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-red-600 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-neutral-500 mt-0.5">{hint}</p>
+      )}
+    </div>
+  );
+}

package/dist/registry/Timeline.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+type TimelineVariant = "default" | "success" | "warning" | "accent";
+
+interface TimelineItem {
+  key: string;
+  title: string;
+  description?: string;
+  date?: string;
+  icon?: React.ReactNode;
+  variant?: TimelineVariant;
+}
+
+interface TimelineProps {
+  items: TimelineItem[];
+  className?: string;
+}
+
+/* Each event is a small raised node with a lit dot, like an indicator
+   lamp; the variant only changes the lamp's colour. Nodes are joined by
+   one continuous groove, and titles sit on the node's centre line.     */
+const lamp: Record<TimelineVariant, string> = {
+  default: "#262626",
+  success: "#10b981",
+  warning: "#f59e0b",
+  accent: "#8b5cf6",
+};
+
+const iconText: Record<TimelineVariant, string> = {
+  default: "text-neutral-600",
+  success: "text-emerald-600",
+  warning: "text-amber-600",
+  accent: "text-violet-600",
+};
+
+export function Timeline({ items, className = "" }: TimelineProps) {
+  return (
+    <div
+      className={["rounded-[18px] p-1.5", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <ol
+        className="bg-white rounded-[13px] px-5 py-5 flex flex-col"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        {items.map((item, index) => {
+          const variant = item.variant ?? "default";
+          const isLast = index === items.length - 1;
+
+          return (
+            <li key={item.key} className={["relative flex gap-4", isLast ? "" : "pb-6"].join(" ")}>
+              {!isLast && (
+                <span
+                  aria-hidden
+                  className="absolute left-[11px] top-[30px] bottom-[6px] w-[2px] rounded-full"
+                  style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+                />
+              )}
+
+              <span
+                aria-hidden
+                className={[
+                  "relative w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                  iconText[variant],
+                ].join(" ")}
+                style={{ background: "var(--face-light)", boxShadow: "var(--tile-light-shadow)" }}
+              >
+                {item.icon ?? (
+                  <span
+                    className="w-2 h-2 rounded-full"
+                    style={{
+                      background: lamp[variant],
+                      boxShadow: `0 0 6px ${lamp[variant]}66, inset 0 1px 1px rgba(255,255,255,0.35)`,
+                    }}
+                  />
+                )}
+              </span>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-baseline justify-between gap-3">
+                  <p className="text-[13.5px] font-medium text-neutral-900 leading-6 tracking-[-0.005em]">
+                    {item.title}
+                  </p>
+                  {item.date && (
+                    <time className="text-[12px] text-neutral-400 tabular-nums shrink-0">
+                      {item.date}
+                    </time>
+                  )}
+                </div>
+                {item.description && (
+                  <p className="text-[13px] text-neutral-500 leading-relaxed mt-0.5">
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}