@blurrow/ui 0.1.0 → 0.2.0

package/dist/registry/ShareButtons.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { ButtonGroup } from "./ButtonGroup";
+
+interface ShareButtonsProps {
+  url?: string;
+  title?: string;
+  className?: string;
+}
+
+
+function LinkIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+function LinkedInIcon() {
+  return (
+    <svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  );
+}
+
+export function ShareButtons({
+  url,
+  title,
+  className = "",
+}: ShareButtonsProps) {
+  const [copied, setCopied] = useState(false);
+
+  const shareUrl = url ?? (typeof window !== "undefined" ? window.location.href : "");
+  const shareTitle = title ?? "";
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback silently
+    }
+  }, [shareUrl]);
+
+  const handleTwitter = useCallback(() => {
+    const params = new URLSearchParams({
+      text: shareTitle,
+      url: shareUrl,
+    });
+    window.open(
+      `https://x.com/intent/tweet?${params.toString()}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, [shareUrl, shareTitle]);
+
+  const handleLinkedIn = useCallback(() => {
+    const params = new URLSearchParams({
+      url: shareUrl,
+    });
+    window.open(
+      `https://www.linkedin.com/sharing/share-offsite/?${params.toString()}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, [shareUrl]);
+
+  const keys = [
+    {
+      label: copied ? "Link copied" : "Copy link",
+      onClick: handleCopy as () => void,
+      content: (
+        <>
+          <span key={String(copied)} className={["animate-checkbox-in", copied ? "text-emerald-600" : ""].join(" ")}>
+            {copied ? <CheckIcon /> : <LinkIcon />}
+          </span>
+          <span className="w-[62px] text-left">{copied ? "copied" : "copy link"}</span>
+        </>
+      ),
+      wide: true,
+    },
+    { label: "Share on X", onClick: handleTwitter, content: <XIcon />, wide: false },
+    { label: "Share on LinkedIn", onClick: handleLinkedIn, content: <LinkedInIcon />, wide: false },
+  ];
+
+  return (
+    <div className={className}>
+      <p className="text-[12px] font-medium text-neutral-500 lowercase mb-3">
+        Share
+      </p>
+      <ButtonGroup label="Share" items={keys} />
+      <span aria-live="polite" className="sr-only">{copied ? "Link copied to clipboard" : ""}</span>
+    </div>
+  );
+}

package/dist/registry/Sidebar.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
+
+interface SidebarItem {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+interface SidebarSection {
+  title?: string;
+  items: SidebarItem[];
+}
+
+interface SidebarHeader {
+  logo?: React.ReactNode;
+  title: string;
+  subtitle?: string;
+}
+
+interface SidebarProps {
+  sections: SidebarSection[];
+  header?: SidebarHeader;
+  defaultActive?: string;
+  active?: string;
+  onSelect?: (key: string) => void;
+  className?: string;
+}
+
+export function Sidebar({
+  sections,
+  header,
+  defaultActive = "",
+  active,
+  onSelect,
+  className = "",
+}: SidebarProps) {
+  const [internal, setInternal] = useState(defaultActive);
+  const current = active !== undefined ? active : internal;
+  const [pill, setPill] = useState({ top: 0, height: 0, ready: false });
+  const navRef = useRef<HTMLElement>(null);
+  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+  const measurePill = (key: string) => {
+    const btn = btnRefs.current[key];
+    const nav = navRef.current;
+    if (!btn || !nav) return;
+    const nr = nav.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ top: br.top - nr.top, height: br.height, ready: true });
+  };
+
+  useLayoutEffect(() => { measurePill(current); }, []);
+  useEffect(() => { measurePill(current); }, [current]);
+
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill(current));
+    if (navRef.current) ro.observe(navRef.current);
+    return () => ro.disconnect();
+  }, [current]);
+
+  const handleSelect = (key: string, disabled?: boolean) => {
+    if (disabled) return;
+    setInternal(key);
+    onSelect?.(key);
+  };
+
+  return (
+    <div
+      className={["rounded-[20px] p-1.5", className].join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div className="bg-white rounded-[15px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+      {header && (
+        <div className="px-3 py-3 border-b border-neutral-100 flex items-center gap-2.5">
+          {header.logo && (
+            <div
+              className="w-7 h-7 rounded-[8px] flex items-center justify-center shrink-0 text-white"
+              style={{ background: "var(--face-dark)", boxShadow: "var(--face-dark-shadow)" }}
+            >
+              {header.logo}
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <p className="text-[13px] font-semibold text-neutral-900 leading-none truncate">{header.title}</p>
+            {header.subtitle && (
+              <p className="text-[11px] text-neutral-400 mt-0.5 leading-none truncate">{header.subtitle}</p>
+            )}
+          </div>
+          <button
+            type="button"
+            aria-label="Switch workspace"
+            className="shrink-0 w-6 h-6 flex items-center justify-center text-neutral-400 hover:text-neutral-900 transition-colors cursor-pointer rounded-[7px] hover:bg-neutral-100"
+          >
+            <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
+            </svg>
+          </button>
+        </div>
+      )}
+
+      <nav ref={navRef} aria-label={header?.title ?? "Sidebar"} className="relative p-2 flex flex-col gap-4">
+        {pill.ready && (
+          <span
+            aria-hidden
+            className="absolute left-2 right-2 rounded-[11px] pointer-events-none z-0"
+            style={{
+              top: pill.top,
+              height: pill.height,
+              background: "var(--face-dark)",
+              boxShadow: "var(--face-dark-shadow)",
+              transition: "top 300ms var(--ease-spring), height 300ms var(--ease-spring)",
+            }}
+          />
+        )}
+
+        {sections.map((section, si) => (
+          <div key={si} className="flex flex-col gap-0.5">
+            {section.title && (
+              <p className="relative z-10 px-2.5 pt-1 pb-1.5 text-[11.5px] font-medium text-neutral-400 lowercase">
+                {section.title}
+              </p>
+            )}
+            {section.items.map((item) => {
+              const isActive = current === item.key;
+              return (
+                <button
+                  key={item.key}
+                  ref={(el) => { btnRefs.current[item.key] = el; }}
+                  type="button"
+                  onClick={() => handleSelect(item.key, item.disabled)}
+                  disabled={item.disabled}
+                  aria-current={isActive ? "page" : undefined}
+                  className={[
+                    "relative z-10 w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[11px] text-[13px] font-medium text-left",
+                    "transition-colors duration-200 cursor-pointer",
+                    "disabled:opacity-35 disabled:pointer-events-none",
+                    isActive
+                      ? "text-white"
+                      : "text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100/80",
+                  ].join(" ")}
+                >
+                  {item.icon && (
+                    <span
+                      className={[
+                        "shrink-0 w-[22px] h-[22px] rounded-md flex items-center justify-center transition-colors duration-200",
+                        isActive
+                          ? "bg-white/12 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]"
+                          : "text-neutral-500 [background:var(--face-light)] [box-shadow:var(--face-light-shadow)]",
+                      ].join(" ")}
+                    >
+                      {item.icon}
+                    </span>
+                  )}
+
+                  <span className="flex-1 truncate">{item.label}</span>
+
+                  {item.badge !== undefined && (
+                    <span
+                      className={[
+                        "shrink-0 text-[11px] font-medium px-1.5 py-0.5 rounded-md tabular-nums leading-none transition-colors duration-200",
+                        isActive
+                          ? "bg-white/20 text-white/80"
+                          : "bg-neutral-100 text-neutral-500",
+                      ].join(" ")}
+                    >
+                      {item.badge}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
+      </div>
+    </div>
+  );
+}

package/dist/registry/Skeleton.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+type SkeletonVariant = "text" | "circle" | "rect" | "card";
+
+interface SkeletonProps {
+  variant?: SkeletonVariant;
+  width?: string | number;
+  height?: string | number;
+  lines?: number;
+  className?: string;
+  /** What is loading, for screen readers */
+  label?: string;
+}
+
+/* Placeholders are empty sunken wells — the shape of what will fill them —
+   with a light sweep travelling across, rather than a blink.            */
+const base = "skeleton-sheen relative overflow-hidden rounded-[8px]";
+const well: React.CSSProperties = { background: "var(--well)", boxShadow: "var(--well-shadow)" };
+
+export function Skeleton({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className = "",
+  label = "Loading",
+}: SkeletonProps) {
+  const a11y = { role: "status", "aria-busy": true, "aria-label": label } as const;
+
+  if (variant === "circle") {
+    return (
+      <div
+        {...a11y}
+        className={[base, "rounded-full", className].join(" ")}
+        style={{ ...well, width: width ?? 40, height: height ?? 40 }}
+      />
+    );
+  }
+
+  if (variant === "card") {
+    return (
+      <div
+        {...a11y}
+        className={["rounded-[20px] p-1.5", className].join(" ")}
+        style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+      >
+        <div className="bg-white rounded-[15px] p-1.5" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+          <div className={[base, "w-full rounded-[11px]"].join(" ")} style={{ ...well, height: height ?? 160 }} />
+          <div className="px-3.5 pt-4 pb-3.5 flex flex-col gap-2.5">
+            <div className={[base, "h-3.5 w-3/5"].join(" ")} style={well} />
+            <div className={[base, "h-2.5 w-full"].join(" ")} style={well} />
+            <div className={[base, "h-2.5 w-4/5"].join(" ")} style={well} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === "rect") {
+    return (
+      <div
+        {...a11y}
+        className={[base, "rounded-[12px]", className].join(" ")}
+        style={{ ...well, width: width ?? "100%", height: height ?? 80 }}
+      />
+    );
+  }
+
+  return (
+    <div {...a11y} className={["flex flex-col gap-2", className].join(" ")}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className={[base, "h-2.5 rounded-full"].join(" ")}
+          style={{
+            ...well,
+            width: width ?? (i === lines - 1 && lines > 1 ? "60%" : "100%"),
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/dist/registry/SpotlightCard.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { CardShell } from "./CardShell";
+
+interface SpotlightCardProps {
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  theme?: "light" | "dark";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const paddingBySize: Record<NonNullable<SpotlightCardProps["size"]>, string> = {
+  // Feature cards pad 32px whatever their size; only the type scales
+  sm: "p-6",
+  md: "p-8",
+  lg: "p-8",
+};
+
+const titleSizeBySize: Record<
+  NonNullable<SpotlightCardProps["size"]>,
+  string
+> = {
+  sm: "text-[20px]",
+  md: "text-[26px]",
+  lg: "text-[34px]",
+};
+
+export function SpotlightCard({
+  title,
+  subtitle,
+  eyebrow,
+  icon,
+  actions,
+  children,
+  theme = "dark",
+  size = "md",
+  className = "",
+}: SpotlightCardProps) {
+  const dark = theme === "dark";
+
+  return (
+    /* Built on CardShell: icon at the top of the face, words and actions
+       settled at the bottom — the same rhythm as Card and QuoteCard. */
+    <CardShell as="article" theme={theme} className={className}>
+      {/* Headline sits low on the face, so tall cards breathe above it, not below */}
+      <div className={["relative flex-1 flex flex-col gap-3", paddingBySize[size]].join(" ")}>
+        {icon && (
+          <div
+            className={[
+              "w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto",
+              dark ? "text-white" : "text-neutral-800",
+            ].join(" ")}
+            style={{
+              background: dark ? "var(--tile-dark)" : "var(--face-light)",
+              boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+            }}
+          >
+            {icon}
+          </div>
+        )}
+
+        {eyebrow && (
+          <p
+            className={[
+              // Without an icon above to push it down, the copy still sits low
+              icon ? "pt-8" : "mt-auto",
+              "text-[14px] font-medium tracking-[-0.01em]",
+              dark ? "text-neutral-400" : "text-neutral-500",
+            ].join(" ")}
+          >
+            {eyebrow}
+          </p>
+        )}
+
+        <h3
+          className={[
+            titleSizeBySize[size],
+            !icon && !eyebrow ? "mt-auto" : "",
+            "font-medium leading-[1.12] tracking-[-0.03em] text-balance",
+            dark ? "text-white" : "text-neutral-900",
+          ].join(" ")}
+        >
+          {title}
+        </h3>
+
+        {subtitle && (
+          <p
+            className={[
+              "text-[15px] leading-[1.6] max-w-lg text-pretty",
+              dark ? "text-neutral-400" : "text-neutral-600",
+            ].join(" ")}
+          >
+            {subtitle}
+          </p>
+        )}
+
+        {children}
+        {actions && <div className="pt-4 flex items-center gap-2">{actions}</div>}
+      </div>
+    </CardShell>
+  );
+}

package/dist/registry/Stat.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+interface StatProps {
+  value: number | string;
+  label: string;
+  prefix?: string;
+  suffix?: string;
+  trend?: string;
+  className?: string;
+}
+
+function useCountUp(target: number, duration = 800) {
+  const [count, setCount] = useState(0);
+  const raf = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      raf.current = requestAnimationFrame(() => setCount(target));
+      return () => { if (raf.current) cancelAnimationFrame(raf.current); };
+    }
+    let start: number | null = null;
+    const step = (now: number) => {
+      if (!start) start = now;
+      const p = Math.min((now - start) / duration, 1);
+      setCount(Math.round((1 - Math.pow(1 - p, 3)) * target));
+      if (p < 1) raf.current = requestAnimationFrame(step);
+    };
+    raf.current = requestAnimationFrame(step);
+    return () => { if (raf.current) cancelAnimationFrame(raf.current); };
+  }, [target, duration]);
+
+  return count;
+}
+
+export function Stat({ value, label, prefix = "", suffix = "", trend, className = "" }: StatProps) {
+  const isNum = typeof value === "number";
+  const counted = useCountUp(isNum ? (value as number) : 0);
+  const displayed = isNum ? counted : value;
+
+  return (
+    <div className={["flex flex-col gap-0.5", className].join(" ")}>
+      <div className="flex items-baseline gap-1.5">
+        <span
+          className="text-[32px] font-semibold text-neutral-900 leading-none tabular-nums"
+          style={{ letterSpacing: "-0.03em" }}
+        >
+          {prefix}{displayed}{suffix}
+        </span>
+        {trend && (
+          <span className="text-[12px] text-neutral-500 font-medium">{trend}</span>
+        )}
+      </div>
+      <span className="text-[12px] text-neutral-500">{label}</span>
+    </div>
+  );
+}
+
+interface StatRowProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function StatRow({ children, className = "" }: StatRowProps) {
+  const arr = React.Children.toArray(children);
+  return (
+    <div className={["grid grid-cols-2 gap-6 sm:flex sm:divide-x sm:divide-neutral-200 sm:gap-0", className].join(" ")}>
+      {arr.map((child, i) => (
+        <div
+          key={i}
+          className={[
+            "min-w-0",
+            i === 0 ? "sm:pr-6" : i === arr.length - 1 ? "sm:pl-6" : "sm:px-6",
+          ].join(" ")}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+}