@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Button.tsx

@@ -0,0 +1,361 @@
+"use client";
+
+import React, { useState, useRef, useCallback } from "react";
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  children: React.ReactNode;
+  fullWidth?: boolean;
+  /** Surface the button sits on. On dark cards, secondary/outline switch to a
+      dark face so they don't glare against the card. */
+  tone?: "light" | "dark";
+  /** Equal width and height, for icon-only layered buttons. */
+  square?: boolean;
+}
+
+/* Layered buttons are a raised face seated in a machined bezel. The bezel
+   never moves; the face lifts on hover and sinks flush when pressed.      */
+const shellConfig: Record<
+  string,
+  {
+    bezel: string;
+    bezelShadow: string;
+    face: string;
+    faceShadow: string;
+    faceHoverShadow: string;
+    facePressedShadow: string;
+    text: string;
+    textShadow: string;
+    fill: string;
+  }
+> = {
+  primary: {
+    bezel: "var(--bezel-inverse)",
+    bezelShadow: "var(--bezel-inverse-shadow)",
+    face: "var(--face-inverse)",
+    faceShadow: "var(--face-inverse-shadow)",
+    faceHoverShadow: "var(--face-inverse-shadow-hover)",
+    facePressedShadow: "var(--face-inverse-pressed)",
+    text: "text-ink-inverse",
+    textShadow: "var(--emboss-inverse-deep)",
+    fill: "bg-ink-inverse/[0.05]",
+  },
+  secondary: {
+    bezel: "var(--bezel)",
+    bezelShadow: "var(--bezel-shadow)",
+    face: "var(--face)",
+    faceShadow: "var(--face-shadow)",
+    faceHoverShadow: "var(--face-shadow-hover)",
+    facePressedShadow: "var(--face-pressed)",
+    text: "text-ink-soft",
+    textShadow: "var(--emboss)",
+    fill: "bg-ink/[0.025]",
+  },
+  outline: {
+    bezel: "var(--outline-bezel)",
+    bezelShadow: "var(--outline-bezel-shadow)",
+    face: "var(--face)",
+    faceShadow: "var(--outline-face-shadow)",
+    faceHoverShadow: "var(--outline-face-shadow-hover)",
+    facePressedShadow: "var(--face-pressed)",
+    text: "text-ink-label",
+    textShadow: "var(--emboss)",
+    fill: "bg-ink/[0.025]",
+  },
+};
+
+/* Secondary on a dark surface: a raised face a few steps lighter than the
+   card — present, but in the same family of tones. It's the mid material,
+   the same one secondary keys wear everywhere in the dark theme.        */
+const darkSecondary = {
+  bezel: "var(--bezel-mid)",
+  bezelShadow: "var(--bezel-mid-shadow)",
+  face: "var(--face-mid)",
+  faceShadow: "var(--face-mid-shadow)",
+  faceHoverShadow: "var(--face-mid-shadow-hover)",
+  facePressedShadow: "var(--face-dark-pressed)",
+  text: "text-neutral-100",
+  textShadow: "var(--emboss-inverse)",
+  fill: "bg-white/[0.04]",
+};
+
+/* Flat buttons (ghost, icon) are a single face without a bezel. */
+const flatConfig: Record<
+  ButtonVariant,
+  {
+    bg: string;
+    background?: string;
+    fill: string;
+    shadow: string;
+    hoverShadow: string;
+    pressedShadow: string;
+  }
+> = {
+  primary: {
+    bg: "text-ink-inverse",
+    background: "var(--face-inverse)",
+    fill: "bg-ink-inverse/[0.08]",
+    shadow: "var(--face-inverse-shadow)",
+    hoverShadow: "var(--face-inverse-float-shadow)",
+    pressedShadow: "var(--face-inverse-pressed)",
+  },
+  secondary: {
+    bg: "text-ink-soft",
+    background: "var(--face)",
+    fill: "bg-ink/[0.035]",
+    shadow: "var(--face-shadow)",
+    hoverShadow: "var(--face-float-shadow)",
+    pressedShadow: "var(--face-pressed)",
+  },
+  ghost: {
+    bg: "bg-transparent text-ink-muted hover:text-ink-soft",
+    fill: "bg-ink/[0.05]",
+    shadow: "none",
+    hoverShadow: "var(--ghost-shadow-hover)",
+    pressedShadow: "var(--ghost-shadow-pressed)",
+  },
+  outline: {
+    bg: "bg-transparent text-ink-label",
+    fill: "bg-ink/[0.035]",
+    shadow: "var(--outline-shadow)",
+    hoverShadow: "var(--outline-shadow-hover)",
+    pressedShadow: "var(--outline-shadow-pressed)",
+  },
+};
+
+/* Bezel radius minus bezel padding = face radius, so the curves stay concentric. */
+const shellRadius: Record<ButtonSize, string> = {
+  sm: "rounded-[12px] p-[3px]",
+  md: "rounded-[13px] p-[3px]",
+  lg: "rounded-[15px] p-[3.5px]",
+  icon: "",
+};
+
+const faceRadius: Record<ButtonSize, string> = {
+  sm: "rounded-[9px]",
+  md: "rounded-[10px]",
+  lg: "rounded-[11.5px]",
+  icon: "",
+};
+
+const innerPadding: Record<ButtonSize, string> = {
+  sm: "px-4 py-2 text-[13px]",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-7 py-3 text-[15px]",
+  icon: "w-7 h-7 p-0 text-[13px]",
+};
+
+const squarePadding: Record<ButtonSize, string> = {
+  sm: "w-9 h-9 p-0 text-[13px]",
+  md: "w-10 h-10 p-0 text-sm",
+  lg: "w-12 h-12 p-0 text-[15px]",
+  icon: "",
+};
+
+const flatSizeStyles: Record<ButtonSize, string> = {
+  sm: "px-4 py-2.5 text-[13px] rounded-[10px]",
+  md: "px-5 py-3 text-sm rounded-[10px]",
+  lg: "px-7 py-3.5 text-[15px] rounded-xl",
+  icon: "w-8 h-8 p-0 rounded-[10px] text-[13px]",
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  tone = "light",
+  square = false,
+  className = "",
+  children,
+  disabled,
+  onClick,
+  onPointerDown,
+  onPointerUp,
+  onPointerLeave,
+  onPointerCancel,
+  onPointerEnter,
+  style,
+  ...rest
+}: ButtonProps) {
+  const [pressed, setPressed] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  /* The press state is the button's own; handlers passed in run alongside
+     it rather than replacing it                                        */
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setPressed(true);
+      onPointerDown?.(e);
+    },
+    [onPointerDown],
+  );
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      timerRef.current = setTimeout(() => setPressed(false), 150);
+      onPointerUp?.(e);
+    },
+    [onPointerUp],
+  );
+
+  const handlePointerCancel = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      timerRef.current = setTimeout(() => setPressed(false), 150);
+      onPointerCancel?.(e);
+    },
+    [onPointerCancel],
+  );
+
+  const handlePointerLeave = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      setHovered(false);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setPressed(false), 150);
+      onPointerLeave?.(e);
+    },
+    [onPointerLeave],
+  );
+
+  const layered = variant !== "ghost" && size !== "icon";
+
+  const handlers = {
+    onClick,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
+    onPointerLeave: handlePointerLeave,
+    onPointerCancel: handlePointerCancel,
+    onPointerEnter: (e: React.PointerEvent<HTMLButtonElement>) => {
+      setHovered(true);
+      onPointerEnter?.(e);
+    },
+  };
+
+  if (layered) {
+    const cfg =
+      tone === "dark" && (variant === "secondary" || variant === "outline")
+        ? darkSecondary
+        : shellConfig[variant];
+    const faceShadow = pressed
+      ? cfg.facePressedShadow
+      : hovered
+        ? cfg.faceHoverShadow
+        : cfg.faceShadow;
+
+    return (
+      <button
+        data-btn
+        className={[
+          "group/btn relative inline-flex cursor-pointer select-none whitespace-nowrap",
+          shellRadius[size],
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+          "disabled:opacity-40 disabled:pointer-events-none",
+          fullWidth ? "w-full" : "",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={{
+          background: cfg.bezel,
+          boxShadow: cfg.bezelShadow,
+          ...style,
+        }}
+        disabled={disabled}
+        {...handlers}
+        {...rest}
+      >
+        <span
+          className={[
+            "btn-face relative overflow-hidden flex items-center justify-center gap-1.5 font-medium",
+            faceRadius[size],
+            cfg.text,
+            square ? squarePadding[size] : ["w-full", innerPadding[size]].join(" "),
+          ].join(" ")}
+          style={{
+            background: cfg.face,
+            boxShadow: faceShadow,
+            textShadow: cfg.textShadow,
+            transform: pressed
+              ? "translateY(0.5px) scale(0.985)"
+              : hovered
+                ? "translateY(-0.5px)"
+                : "none",
+            transition:
+              "transform 240ms var(--ease-spring), box-shadow 200ms ease-out",
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className={[
+              "pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out",
+              pressed
+                ? "scale-y-100"
+                : "scale-y-0 group-hover/btn:scale-y-100",
+              cfg.fill,
+            ].join(" ")}
+          />
+          <span className="btn-icon-nudge relative z-10 inline-flex items-center gap-1.5">
+            {children}
+          </span>
+        </span>
+      </button>
+    );
+  }
+
+  const cfg = flatConfig[variant];
+  const currentShadow = pressed
+    ? cfg.pressedShadow
+    : hovered
+      ? cfg.hoverShadow
+      : cfg.shadow;
+
+  return (
+    <button
+      data-btn
+      className={[
+        "btn-face group/btn relative overflow-hidden inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer select-none whitespace-nowrap",
+        "transition-colors duration-200 ease-out",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+        "disabled:opacity-40 disabled:pointer-events-none",
+        cfg.bg,
+        flatSizeStyles[size],
+        fullWidth ? "w-full" : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{
+        background: cfg.background,
+        boxShadow: currentShadow,
+        transform: pressed
+          ? "translateY(0.5px) scale(0.97)"
+          : hovered && cfg.background
+            ? "translateY(-0.5px)"
+            : "none",
+        transition:
+          "transform 240ms var(--ease-spring), box-shadow 200ms ease-out, color 200ms ease-out",
+        ...style,
+      }}
+      disabled={disabled}
+      {...handlers}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
+        className={[
+          "pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out",
+          pressed ? "scale-y-100" : "scale-y-0 group-hover/btn:scale-y-100",
+          cfg.fill,
+        ].join(" ")}
+      />
+      <span className="relative z-10 inline-flex items-center gap-1.5">
+        {children}
+      </span>
+    </button>
+  );
+}

package/dist/registry/ButtonGroup.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+export interface ButtonGroupItem {
+  label: string;
+  content: React.ReactNode;
+  onClick?: () => void;
+  href?: string;
+  /** Sized to its content; otherwise a square key for a lone icon */
+  wide?: boolean;
+}
+
+interface ButtonGroupProps {
+  items: ButtonGroupItem[];
+  label: string;
+  className?: string;
+}
+
+/* One bezel, one face, several keys: a linked control in the same material
+   as Button (sm), split by grooves rather than gaps. Each key fills from the
+   bottom on hover and sinks when pressed, like a layered Button's face.   */
+export function ButtonGroup({ items, label, className = "" }: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      aria-label={label}
+      className={["inline-flex w-fit rounded-[12px] p-[3px]", className].join(" ")}
+      style={{ background: "var(--bezel)", boxShadow: "var(--bezel-shadow)" }}
+    >
+      <div
+        className="flex rounded-[9px] overflow-hidden"
+        style={{ background: "var(--face)", boxShadow: "var(--face-shadow)" }}
+      >
+        {items.map((item, i) => {
+          const keyClass = [
+            "group/key relative h-9 inline-flex items-center justify-center gap-1.5 cursor-pointer",
+            "text-[13px] font-medium text-ink-soft outline-none",
+            "transition-[box-shadow,background] duration-150",
+            "active:bg-ink/[0.04] active:[box-shadow:var(--ghost-shadow-pressed)]",
+            "focus-visible:[box-shadow:var(--focus-ring-inset)]",
+            item.wide ? "px-4" : "w-10",
+          ].join(" ");
+          const inner = (
+            <>
+              <span
+                aria-hidden
+                className="pointer-events-none absolute inset-0 origin-bottom scale-y-0 bg-ink/[0.025] transition-transform duration-300 ease-out group-hover/key:scale-y-100"
+              />
+              <span className="relative inline-flex items-center gap-1.5">{item.content}</span>
+            </>
+          );
+          const common = {
+            "aria-label": item.label,
+            title: item.wide ? undefined : item.label,
+            className: keyClass,
+            style: { textShadow: "var(--emboss)" },
+          };
+
+          return (
+            <React.Fragment key={item.label}>
+              {i > 0 && (
+                <span
+                  aria-hidden
+                  className="w-px self-stretch my-2 bg-groove"
+                  style={{ boxShadow: "var(--groove-lip)" }}
+                />
+              )}
+              {item.href ? (
+                <a href={item.href} {...common}>
+                  {inner}
+                </a>
+              ) : (
+                <button type="button" onClick={item.onClick} {...common}>
+                  {inner}
+                </button>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/dist/registry/Card.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import { CardShell } from "./CardShell";
+
+type CardTheme = "light" | "dark";
+
+interface SplitCardProps {
+  title?: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  image?: React.ReactNode;
+  imageSrc?: string;
+  imageAlt?: string;
+  actions?: React.ReactNode;
+  theme?: CardTheme;
+  className?: string;
+  children?: React.ReactNode;
+  layout?: "split";
+}
+
+interface StackCardProps {
+  title?: string;
+  badge?: React.ReactNode;
+  subtitle?: string;
+  note?: string;
+  image?: React.ReactNode;
+  imageSrc?: string;
+  imageAlt?: string;
+  imageBg?: string;
+  actions?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+  layout: "stack";
+}
+
+type CardProps = SplitCardProps | StackCardProps;
+
+/* Both layouts use CardShell: content on the face, actions on the rail.
+   Media sits flush in the face — the face's own corners frame it, so there
+   is no box-inside-a-box.                                                 */
+
+function MediaPlaceholder({ dark, bg, monogram }: { dark?: boolean; bg?: string; monogram?: string }) {
+  return (
+    <div
+      className={["relative w-full h-full flex items-center justify-center", bg ?? ""].join(" ")}
+      style={bg ? undefined : { background: dark ? "var(--media-well-dark)" : "var(--media-well)" }}
+    >
+      {/* A faint dot grid fading out from the centre: a slot, not a hole */}
+      <div
+        aria-hidden
+        className="absolute inset-0"
+        style={{
+          backgroundImage: `radial-gradient(${
+            bg ? "var(--media-dots-on-colour)" : dark ? "var(--media-dots-dark)" : "var(--media-dots)"
+          } 1px, transparent 1px)`,
+          backgroundSize: "12px 12px",
+          maskImage: "radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)",
+          WebkitMaskImage: "radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)",
+        }}
+      />
+      {/* The title's initial, set huge and barely there and cropped by the
+          slot's edges: the empty half carries the card's type, not a glyph */}
+      {monogram && (
+        <span
+          aria-hidden
+          className={[
+            "absolute -right-3 -bottom-[0.32em] text-[220px] font-semibold leading-none tracking-[-0.06em] select-none",
+            dark ? "text-white/[0.045]" : "text-ink/[0.045]",
+          ].join(" ")}
+        >
+          {monogram}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function Media({
+  image,
+  imageSrc,
+  imageAlt,
+  dark,
+  bg,
+  monogram,
+}: {
+  image?: React.ReactNode;
+  imageSrc?: string;
+  imageAlt: string;
+  dark?: boolean;
+  bg?: string;
+  monogram?: string;
+}) {
+  if (image) return <>{image}</>;
+  if (imageSrc) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={imageSrc} alt={imageAlt} loading="lazy" className="w-full h-full object-cover" />;
+  }
+  return <MediaPlaceholder dark={dark} bg={bg} monogram={monogram} />;
+}
+
+function IconTile({ dark, children }: { dark: boolean; children: React.ReactNode }) {
+  return (
+    <div
+      aria-hidden
+      className={[
+        "w-9 h-9 rounded-[11px] flex items-center justify-center shrink-0",
+        dark ? "text-neutral-100" : "text-ink-label",
+      ].join(" ")}
+      style={{
+        background: dark ? "var(--tile-dark)" : "var(--tile)",
+        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function Card(props: CardProps) {
+  if (props.layout === "stack") {
+    const {
+      title,
+      badge,
+      subtitle,
+      note,
+      image,
+      imageSrc,
+      imageAlt = "",
+      imageBg,
+      actions,
+      className = "",
+      children,
+    } = props;
+
+    return (
+      <CardShell
+        as="article"
+        className={className}
+        rail={actions}
+      >
+        {/* Hairline under the media so it reads as set into the face */}
+        <div className="relative h-52 shrink-0 overflow-hidden" style={{ boxShadow: "0 1px 0 var(--divider)" }}>
+          <Media image={image} imageSrc={imageSrc} imageAlt={imageAlt} bg={imageBg} />
+        </div>
+
+        <div className="flex-1 flex flex-col p-6">
+          {(title || badge) && (
+            <div className="flex items-center gap-2">
+              {title && (
+                <h3 className="text-[17px] font-semibold text-ink tracking-[-0.015em] leading-snug">{title}</h3>
+              )}
+              {badge}
+            </div>
+          )}
+          {subtitle && (
+            // Line breaks in the copy are for centred layouts; let it flow here
+            <p className="mt-1.5 text-[14px] text-ink-body leading-[1.55] text-pretty">
+              {subtitle.replace(/\n/g, " ")}
+            </p>
+          )}
+          {children}
+          {note && (
+            <p className="mt-auto pt-5 text-[12px] text-ink-muted leading-relaxed text-pretty">{note}</p>
+          )}
+        </div>
+      </CardShell>
+    );
+  }
+
+  const {
+    title,
+    subtitle,
+    icon,
+    image,
+    imageSrc,
+    imageAlt = "",
+    actions,
+    theme = "light",
+    className = "",
+    children,
+  } = props as SplitCardProps;
+  const dark = theme === "dark";
+
+  return (
+    <CardShell
+      as="article"
+      theme={dark ? "dark" : "light"}
+      className={className}
+      faceClassName="flex-row! min-h-[220px]"
+      rail={actions}
+    >
+      {/* The title is the hero: display-sized and pinned to the top. The
+          subtitle answers it from the bottom edge, so the two frame the
+          face between them instead of huddling in one corner.           */}
+      <div className="relative flex flex-col p-7 flex-1 min-w-0">
+        {icon && <IconTile dark={dark}>{icon}</IconTile>}
+        {title && (
+          <h3
+            className={[
+              "text-[34px] font-medium leading-[1.02] tracking-[-0.04em] text-balance max-w-[14ch]",
+              icon ? "mt-5" : "",
+              dark ? "text-white" : "text-ink",
+            ].join(" ")}
+          >
+            {title}
+          </h3>
+        )}
+        <div className="mt-auto pt-8 flex flex-col gap-2">
+          {subtitle && (
+            <p className={["text-[14px] leading-[1.45] tracking-[-0.005em]", dark ? "text-neutral-500" : "text-ink-muted"].join(" ")}>{subtitle}</p>
+          )}
+          {children}
+        </div>
+      </div>
+      <div
+        className="relative w-[40%] shrink-0 overflow-hidden"
+        style={{ boxShadow: dark ? "-1px 0 0 var(--divider-dark)" : "-1px 0 0 var(--divider)" }}
+      >
+        <Media
+          image={image}
+          imageSrc={imageSrc}
+          imageAlt={imageAlt}
+          dark={dark}
+          monogram={typeof title === "string" ? title.trim().charAt(0).toLowerCase() : undefined}
+        />
+      </div>
+    </CardShell>
+  );
+}
+
+interface CardGridProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CardGrid({ children, className = "" }: CardGridProps) {
+  return (
+    <div className={["grid grid-cols-1 sm:grid-cols-2 gap-4", className].join(" ")}>
+      {children}
+    </div>
+  );
+}