@blurrow/ui 0.0.0-stage → 0.2.0

package/dist/registry/Accordion.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState, useCallback, useId, ReactNode } from "react";
+
+interface AccordionItem {
+  key: string;
+  title: string;
+  content: ReactNode;
+  defaultOpen?: boolean;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  className?: string;
+}
+
+export function Accordion({ items, allowMultiple = false, className }: AccordionProps) {
+  const [openKeys, setOpenKeys] = useState<Set<string>>(() => {
+    const defaults = new Set<string>();
+    for (const item of items) {
+      if (item.defaultOpen) {
+        defaults.add(item.key);
+      }
+    }
+    return defaults;
+  });
+
+  const toggle = useCallback(
+    (key: string) => {
+      setOpenKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          if (allowMultiple) {
+            next.add(key);
+          } else {
+            next.clear();
+            next.add(key);
+          }
+        }
+        return next;
+      });
+    },
+    [allowMultiple]
+  );
+  const uid = useId();
+
+  return (
+    <div
+      className={["rounded-[18px] p-1.5", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div
+        className="bg-white rounded-[13px] overflow-hidden p-1"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        {items.map((item, index) => {
+          const isOpen = openKeys.has(item.key);
+          const isLast = index === items.length - 1;
+          const headerId = `${uid}-${item.key}-header`;
+          const panelId = `${uid}-${item.key}-panel`;
+
+          return (
+            <div
+              key={item.key}
+              className={[
+                "relative",
+                // Hairline between rows, inset so it doesn't touch the rounded corners
+                !isLast &&
+                  "after:absolute after:left-3 after:right-3 after:bottom-0 after:h-px after:bg-neutral-100",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              <h3>
+                <button
+                  type="button"
+                  id={headerId}
+                  aria-expanded={isOpen}
+                  aria-controls={panelId}
+                  onClick={() => toggle(item.key)}
+                  className={[
+                    "group/acc w-full flex items-center justify-between gap-3 py-3 px-3 text-left text-[13.5px] font-medium cursor-pointer rounded-[10px]",
+                    "transition-colors duration-150",
+                    isOpen ? "text-neutral-900" : "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-50",
+                  ].join(" ")}
+                >
+                  <span>{item.title}</span>
+                  {/* Plus that turns into a minus: says "more inside", not "navigate" */}
+                  <span
+                    aria-hidden
+                    className="relative shrink-0 w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 group-hover/acc:text-neutral-900 transition-colors"
+                    style={{ background: "var(--face-light)", boxShadow: "var(--face-light-shadow)" }}
+                  >
+                    <span className="absolute w-2.5 h-[1.5px] rounded-full bg-current" />
+                    <span
+                      className="absolute w-2.5 h-[1.5px] rounded-full bg-current"
+                      style={{
+                        transform: isOpen ? "rotate(0deg)" : "rotate(90deg)",
+                        transition: "transform 300ms var(--ease-spring)",
+                      }}
+                    />
+                  </span>
+                </button>
+              </h3>
+
+              <div
+                id={panelId}
+                role="region"
+                aria-labelledby={headerId}
+                // Closed panels are removed from the tab order and the a11y tree
+                inert={!isOpen}
+                style={{
+                  display: "grid",
+                  gridTemplateRows: isOpen ? "1fr" : "0fr",
+                  transition: "grid-template-rows 320ms var(--ease-out-soft)",
+                }}
+              >
+                <div className="overflow-hidden">
+                  <div
+                    className="px-3 pb-4 pt-0.5 text-[13px] text-neutral-600 leading-relaxed"
+                    style={{
+                      opacity: isOpen ? 1 : 0,
+                      transform: isOpen ? "translateY(0)" : "translateY(-4px)",
+                      transition: "opacity 240ms ease-out, transform 320ms var(--ease-out-soft)",
+                    }}
+                  >
+                    {item.content}
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/dist/registry/Alert.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { CloseButton } from "./CloseButton";
+
+type AlertVariant = "default" | "success" | "warning" | "error";
+
+interface AlertProps {
+  variant?: AlertVariant;
+  title: string;
+  description?: string;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+/* Tiles share Toast's lit-from-above gradients, so an alert and the toast
+   it came from look like the same object.                              */
+const variantConfig: Record<AlertVariant, {
+  tile: string;
+  icon: React.ReactNode;
+}> = {
+  default: {
+    tile: "var(--face-dark)",
+    icon: (
+      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="10" />
+        <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
+      </svg>
+    ),
+  },
+  success: {
+    tile: "linear-gradient(180deg, #10b981 0%, #059669 100%)",
+    icon: (
+      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  warning: {
+    tile: "linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%)",
+    icon: (
+      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+      </svg>
+    ),
+  },
+  error: {
+    tile: "linear-gradient(180deg, #f87171 0%, #dc2626 100%)",
+    icon: (
+      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    ),
+  },
+};
+
+export function Alert({ variant = "default", title, description, onDismiss, className = "" }: AlertProps) {
+  const { tile, icon } = variantConfig[variant];
+
+  return (
+    <div
+      // Errors and warnings interrupt; everything else waits its turn
+      role={variant === "error" || variant === "warning" ? "alert" : "status"}
+      className={["rounded-[18px] p-1.5", className].join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div
+        className="bg-white rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        <div
+          aria-hidden
+          className="shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center text-white"
+          style={{
+            background: tile,
+            boxShadow:
+              "0 0 3px rgba(0,0,0,0.212), 0 1px 2px rgba(0,0,0,0.15), inset 0 2px 3px -2px rgba(255,255,255,0.188)",
+          }}
+        >
+          {icon}
+        </div>
+
+        <div className="flex-1 min-w-0 pt-[5px]">
+          <p className="text-[13px] font-semibold text-neutral-900 leading-tight tracking-[-0.01em]">{title}</p>
+          {description && (
+            <p className="text-[12.5px] text-neutral-500 mt-1 leading-relaxed">{description}</p>
+          )}
+        </div>
+
+        {onDismiss && <CloseButton size="sm" label="Dismiss" onClick={onDismiss} />}
+      </div>
+    </div>
+  );
+}

package/dist/registry/AuthorCard.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Avatar } from "./Avatar";
+import { Button } from "./Button";
+
+interface AuthorCardProps {
+  name: string;
+  bio?: string;
+  avatarSrc?: string;
+  onFollow?: () => void;
+  className?: string;
+}
+
+export function AuthorCard({
+  name,
+  bio,
+  avatarSrc,
+  onFollow,
+  className = "",
+}: AuthorCardProps) {
+  return (
+    <div
+      className={[
+        "rim relative rounded-[22px] p-1.5",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--card-light-shadow)" }}
+    >
+      <div className="relative bg-white rounded-[17px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+        {/* Cover: a sunken well, so the avatar visibly sits on top of it */}
+        <div
+          aria-hidden
+          className="h-20 relative overflow-hidden"
+          style={{
+            background:
+              "radial-gradient(130% 90% at 25% 0%, rgba(255,255,255,0.7), transparent 60%), linear-gradient(180deg, #ececeb 0%, #f4f4f3 100%)",
+            boxShadow: "inset 0 1px 3px rgba(17,17,17,0.06), inset 0 -2px 3px -2px rgba(17,17,17,0.05)",
+          }}
+        />
+        <div className="px-6 pb-6">
+          <div className="-mt-8 mb-4">
+            <Avatar
+              src={avatarSrc}
+              name={name}
+              size="lg"
+              className="ring-[3.5px] ring-white shadow-[0_3px_12px_-2px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]"
+            />
+          </div>
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <p className="text-[15px] font-semibold text-neutral-900 leading-snug truncate tracking-[-0.01em]">{name}</p>
+              {bio && (
+                <p className="text-[13px] text-neutral-500 leading-relaxed mt-1 line-clamp-2">{bio}</p>
+              )}
+            </div>
+            {onFollow && (
+              <Button variant="primary" size="sm" onClick={onFollow} className="shrink-0">
+                follow
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/registry/Avatar.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+
+type AvatarSize = "sm" | "md" | "lg";
+
+interface AvatarProps {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: AvatarSize;
+  className?: string;
+}
+
+const sizeStyles: Record<AvatarSize, string> = {
+  sm: "w-7 h-7 text-[10px]",
+  md: "w-9 h-9 text-[12px]",
+  lg: "w-12 h-12 text-[14px]",
+};
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join("")
+    .toLowerCase();
+}
+
+export function Avatar({
+  src,
+  alt = "",
+  name,
+  size = "md",
+  className = "",
+}: AvatarProps) {
+  const initials = name ? getInitials(name) : "?";
+
+  return (
+    <div
+      className={[
+        "relative shrink-0 rounded-full overflow-hidden flex items-center justify-center font-semibold text-neutral-600 select-none",
+        sizeStyles[size],
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{ background: "var(--face-light)" }}
+    >
+      {src ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={src} alt={alt || name || ""} loading="lazy" className="w-full h-full object-cover" />
+      ) : (
+        <span role="img" aria-label={name ?? "Unknown"}>{initials}</span>
+      )}
+      <span
+        aria-hidden
+        className="pointer-events-none absolute inset-0 rounded-full"
+        style={{
+          boxShadow: "inset 0 2px 3px -2px rgba(255,255,255,0.45), inset 0 0 2px rgba(17,17,17,0.12), inset 0 -2px 3px -2px rgba(17,17,17,0.04)",
+        }}
+      />
+    </div>
+  );
+}
+
+interface AvatarGroupProps {
+  children: React.ReactNode;
+  max?: number;
+  size?: AvatarSize;
+  className?: string;
+}
+
+const overlapStyles: Record<AvatarSize, string> = {
+  sm: "-ml-2",
+  md: "-ml-2.5",
+  lg: "-ml-3",
+};
+
+export function AvatarGroup({
+  children,
+  max = 5,
+  size = "md",
+  className = "",
+}: AvatarGroupProps) {
+  const items = React.Children.toArray(children);
+  const visible = items.slice(0, max);
+  const overflow = items.length - max;
+
+  return (
+    <div className={["flex items-center", className].join(" ")}>
+      {visible.map((child, i) => (
+        <div
+          key={i}
+          className={[
+            "ring-2 ring-white rounded-full",
+            i > 0 ? overlapStyles[size] : "",
+          ].join(" ")}
+        >
+          {child}
+        </div>
+      ))}
+      {overflow > 0 && (
+        <div
+          className={[
+            "ring-2 ring-white rounded-full flex items-center justify-center font-semibold text-neutral-600 select-none",
+            overlapStyles[size],
+            sizeStyles[size],
+          ].join(" ")}
+          style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+          aria-label={`${overflow} more`}
+        >
+          +{overflow}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/registry/Badge.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+type BadgeVariant = "default" | "muted" | "accent";
+
+interface BadgeProps {
+  variant?: BadgeVariant;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: "text-white",
+  muted: "text-neutral-600",
+  accent: "text-violet-700",
+};
+
+/* Badges are small raised faces, lit from the same top edge as buttons. */
+const variantSurfaces: Record<BadgeVariant, React.CSSProperties> = {
+  default: {
+    background: "var(--face-dark)",
+    boxShadow:
+      "0 0 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2), inset 0 2px 3px -2px rgba(255,255,255,0.105)",
+    textShadow: "0 -1px 0 rgba(0,0,0,0.4)",
+  },
+  muted: {
+    background: "linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%)",
+    boxShadow:
+      "0 0 3px rgba(17,17,17,0.119), 0 1px 1.5px rgba(17,17,17,0.07), inset 0 2px 3px -2px rgba(255,255,255,1)",
+    textShadow: "0 1px 0 rgba(255,255,255,0.9)",
+  },
+  accent: {
+    background: "linear-gradient(180deg, #f5f0ff 0%, #ebe1ff 100%)",
+    boxShadow:
+      "0 0 3px rgba(124,58,237,0.255), 0 1px 1.5px rgba(124,58,237,0.12), inset 0 2px 3px -2px rgba(255,255,255,0.637)",
+    textShadow: "0 1px 0 rgba(255,255,255,0.7)",
+  },
+};
+
+export function Badge({
+  variant = "muted",
+  children,
+  className = "",
+}: BadgeProps) {
+  return (
+    <span
+      className={[
+        "inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium tracking-wide",
+        variantStyles[variant],
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={variantSurfaces[variant]}
+    >
+      {children}
+    </span>
+  );
+}

package/dist/registry/Banner.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ReactNode } from "react";
+import { CloseButton } from "./CloseButton";
+
+type BannerVariant = "default" | "accent" | "warning";
+
+/* A banner is a dark bezel holding a dark face — the same build as the
+   primary button, stretched to full width.                            */
+const variantStyles: Record<
+  BannerVariant,
+  { bezel: string; bezelShadow: string; face: string; faceShadow: string; text: string; tone: "light" | "dark" }
+> = {
+  default: {
+    bezel: "var(--bezel-dark)",
+    bezelShadow: "var(--bezel-dark-shadow)",
+    face: "var(--face-dark)",
+    faceShadow: "var(--face-dark-shadow)",
+    text: "text-white",
+    tone: "dark",
+  },
+  accent: {
+    bezel: "linear-gradient(180deg, #4c2a99 0%, #2e1065 100%)",
+    bezelShadow:
+      "0 0 0 0.5px rgba(46,16,101,0.36), 0 4px 12px -4px rgba(76,29,149,0.45), inset 0 2px 3px -2px rgba(255,255,255,0.09)",
+    face: "linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%)",
+    faceShadow:
+      "0 0 3px rgba(46,16,101,0.35), 0 1px 2px rgba(46,16,101,0.4), inset 0 2px 3px -2px rgba(255,255,255,0.165)",
+    text: "text-white",
+    tone: "dark",
+  },
+  warning: {
+    bezel: "linear-gradient(180deg, #fde68a 0%, #f5c84b 100%)",
+    bezelShadow:
+      "0 0 0 0.5px rgba(180,83,9,0.15), 0 4px 12px -4px rgba(217,119,6,0.3), inset 0 2px 3px -2px rgba(255,255,255,0.45)",
+    face: "linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%)",
+    faceShadow:
+      "0 0 3px rgba(180,83,9,0.255), 0 1px 2px rgba(180,83,9,0.12), inset 0 2px 3px -2px rgba(255,255,255,1)",
+    text: "text-amber-900",
+    tone: "light",
+  },
+};
+
+export function Banner({
+  variant = "default",
+  children,
+  icon,
+  dismissible = false,
+  onDismiss,
+  action,
+  className = "",
+}: {
+  variant?: BannerVariant;
+  children: ReactNode;
+  icon?: ReactNode;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  action?: ReactNode;
+  className?: string;
+}) {
+  const s = variantStyles[variant];
+
+  return (
+    <div
+      role="region"
+      aria-label="Announcement"
+      className={`w-full rounded-[18px] p-1 ${className}`}
+      style={{ background: s.bezel, boxShadow: s.bezelShadow }}
+    >
+      <div
+        className={`rounded-[14px] pl-4 pr-2 py-2.5 flex items-center gap-3 ${s.text}`}
+        style={{ background: s.face, boxShadow: s.faceShadow }}
+      >
+        {icon && <span aria-hidden className="flex-shrink-0 opacity-80">{icon}</span>}
+
+        {/* Left-aligned so it reads in one sweep with the icon beside it */}
+        <span className="text-[13px] font-medium flex-1 min-w-0 leading-relaxed">
+          {children}
+        </span>
+
+        {action && <span className="flex-shrink-0">{action}</span>}
+
+        {dismissible && (
+          <CloseButton size="sm" tone={s.tone} label="Dismiss announcement" onClick={onDismiss} />
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/registry/Breadcrumb.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex items-center gap-1 flex-wrap">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1;
+
+          return (
+            <li key={i} className="flex items-center gap-1 min-w-0">
+              {i > 0 && (
+                <svg
+                  aria-hidden
+                  width="12"
+                  height="12"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  className="text-neutral-300 shrink-0"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              )}
+              {isLast || !item.href ? (
+                <span
+                  aria-current={isLast ? "page" : undefined}
+                  className={[
+                    "text-[12.5px] px-1.5 py-0.5 truncate",
+                    isLast ? "font-medium text-neutral-900" : "text-neutral-500",
+                  ].join(" ")}
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  href={item.href}
+                  className="text-[12.5px] text-neutral-500 hover:text-neutral-900 px-1.5 py-0.5 rounded-[6px] hover:bg-neutral-900/[0.05] transition-colors truncate"
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}