@blurrow/ui 0.1.0 → 0.2.1

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-panel-face 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-line",
+              ]
+                .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-ink" : "text-ink-label hover:text-ink hover:bg-surface-hover",
+                  ].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-ink-muted group-hover/acc:text-ink transition-colors"
+                    style={{ background: "var(--face)", boxShadow: "var(--face-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-ink-body 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,95 @@
+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-inverse)",
+    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: "var(--tile-success)",
+    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: "var(--tile-warning)",
+    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: "var(--tile-error)",
+    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-panel-face 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",
+              // the default tile is the inverse face; status tiles stay white-on-colour
+              tile === "var(--face-inverse)" ? "text-ink-inverse" : "text-white",
+            ].join(" ")}
+          style={{
+            background: tile,
+            boxShadow: "var(--tile-status-shadow)",
+          }}
+        >
+          {icon}
+        </div>
+
+        <div className="flex-1 min-w-0 pt-[5px]">
+          <p className="text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]">{title}</p>
+          {description && (
+            <p className="text-[12.5px] text-ink-muted 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-shadow)" }}
+    >
+      <div className="relative bg-panel-face 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:
+              "var(--cover)",
+            boxShadow: "var(--cover-shadow)",
+          }}
+        />
+        <div className="px-6 pb-6">
+          <div className="-mt-8 mb-4">
+            <Avatar
+              src={avatarSrc}
+              name={name}
+              size="lg"
+              className="ring-[3.5px] ring-panel-face shadow-[var(--avatar-lift)]"
+            />
+          </div>
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <p className="text-[15px] font-semibold text-ink leading-snug truncate tracking-[-0.01em]">{name}</p>
+              {bio && (
+                <p className="text-[13px] text-ink-muted 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-ink-body select-none",
+        sizeStyles[size],
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{ background: "var(--face)" }}
+    >
+      {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: "var(--avatar-rim)",
+        }}
+      />
+    </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-panel-face rounded-full",
+            i > 0 ? overlapStyles[size] : "",
+          ].join(" ")}
+        >
+          {child}
+        </div>
+      ))}
+      {overflow > 0 && (
+        <div
+          className={[
+            "ring-2 ring-panel-face rounded-full flex items-center justify-center font-semibold text-ink-body 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,55 @@
+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-ink-inverse",
+  muted: "text-ink-body",
+  accent: "text-accent",
+};
+
+/* Badges are small raised faces, lit from the same top edge as buttons. */
+const variantSurfaces: Record<BadgeVariant, React.CSSProperties> = {
+  default: {
+    background: "var(--face-inverse)",
+    boxShadow: "var(--badge-inverse-shadow)",
+    textShadow: "var(--emboss-inverse)",
+  },
+  muted: {
+    background: "var(--badge)",
+    boxShadow: "var(--badge-shadow)",
+    textShadow: "var(--emboss)",
+  },
+  accent: {
+    background: "var(--badge-accent)",
+    boxShadow: "var(--badge-accent-shadow)",
+    textShadow: "var(--emboss-soft)",
+  },
+};
+
+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,86 @@
+"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. On a dark page it stays a
+   dark strip (the mid material) rather than a full-width pale bar.    */
+const variantStyles: Record<
+  BannerVariant,
+  { bezel: string; bezelShadow: string; face: string; faceShadow: string; text: string; tone: "light" | "dark" }
+> = {
+  default: {
+    bezel: "var(--banner-bezel)",
+    bezelShadow: "var(--banner-bezel-shadow)",
+    face: "var(--banner-face)",
+    faceShadow: "var(--banner-face-shadow)",
+    text: "text-white",
+    tone: "dark",
+  },
+  accent: {
+    bezel: "var(--bezel-violet)",
+    bezelShadow: "var(--bezel-violet-shadow)",
+    face: "var(--face-violet)",
+    faceShadow: "var(--face-violet-shadow)",
+    text: "text-white",
+    tone: "dark",
+  },
+  warning: {
+    bezel: "var(--bezel-warning)",
+    bezelShadow: "var(--bezel-warning-shadow)",
+    face: "var(--face-warning)",
+    faceShadow: "var(--face-warning-shadow)",
+    text: "text-warning-ink",
+    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-ink-ghost 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-ink" : "text-ink-muted",
+                  ].join(" ")}
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  href={item.href}
+                  className="text-[12.5px] text-ink-muted hover:text-ink px-1.5 py-0.5 rounded-[6px] hover:bg-ink/[0.05] transition-colors truncate"
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}