@spatika/react 1.0.0 → 1.1.0

package/src/composites/ProjectCard.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Badge } from "../primitives/Badge";
+import { Card, CardContent, CardHeader, CardTitle } from "./Card";
+import { Tag } from "./Tag";
+
+export type ProjectCardProps = {
+  title: ReactNode;
+  company?: ReactNode;
+  outcome?: ReactNode;
+  description?: ReactNode;
+  tags?: string[];
+  className?: string;
+};
+
+/** Marketing project tile: title, company, outcome pill, body, tech tags. */
+export function ProjectCard({
+  title,
+  company,
+  outcome,
+  description,
+  tags = [],
+  className,
+}: ProjectCardProps) {
+  return (
+    <Card
+      variant="panel"
+      padding="md"
+      className={cn(
+        "group flex h-full flex-col hover:border-primary/30 hover:shadow-[0_12px_32px_color-mix(in_srgb,var(--primary)_7%,transparent)]",
+        className,
+      )}
+    >
+      <CardHeader className="mb-2">
+        <div className="min-w-0">
+          <CardTitle className="text-[15px] leading-snug font-[900] group-hover:text-primary sm:text-[16px]">
+            {title}
+          </CardTitle>
+          {company ? (
+            <p className="mt-0.5 text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
+              {company}
+            </p>
+          ) : null}
+        </div>
+        {outcome ? (
+          <Badge variant="warm" className="rounded-full px-2.5 py-1 text-[10px] font-black">
+            {outcome}
+          </Badge>
+        ) : null}
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col">
+        {description ? (
+          <p className="mb-3 flex-1 text-[13px] leading-relaxed text-muted-foreground">{description}</p>
+        ) : null}
+        {tags.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {tags.map((tag) => (
+              <Tag key={tag}>{tag}</Tag>
+            ))}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/src/composites/SectionHeading.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { AccentRule } from "./AccentRule";
+import { GradientText } from "./GradientText";
+
+export type SectionHeadingProps = {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  align?: "left" | "center";
+  className?: string;
+  /** Hide the accent rule under the copy. */
+  showRule?: boolean;
+};
+
+/**
+ * Marketing / page-section title: optional eyebrow, heading, subtitle, and accent rule.
+ * Renders a `div` (not `<header>`) so it never competes with the site navbar.
+ */
+export function SectionHeading({
+  eyebrow,
+  title,
+  subtitle,
+  align = "left",
+  className,
+  showRule = true,
+}: SectionHeadingProps) {
+  const centered = align === "center";
+
+  return (
+    <div
+      data-slot="section-heading"
+      className={cn("mb-8 sm:mb-10", centered && "text-center", className)}
+    >
+      {eyebrow ? (
+        <p
+          className={cn(
+            "mb-2 text-[11px] font-bold uppercase tracking-[0.14em]",
+            centered && "text-center",
+          )}
+        >
+          <GradientText>{eyebrow}</GradientText>
+        </p>
+      ) : null}
+      <h2 className="text-[clamp(1.6rem,3.6vw,2.1rem)] font-[800] leading-[1.12] tracking-tight text-foreground">
+        {title}
+      </h2>
+      {subtitle ? (
+        <p
+          className={cn(
+            "mt-2 text-[14px] leading-relaxed text-muted-foreground",
+            centered ? "mx-auto max-w-xl" : "max-w-lg",
+          )}
+        >
+          {subtitle}
+        </p>
+      ) : null}
+      {showRule ? <AccentRule className={cn("mt-4", centered && "mx-auto")} /> : null}
+    </div>
+  );
+}

package/src/composites/SiteFooter.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import type { SiteNavLink } from "./SiteNav";
+
+export type SiteFooterProps = {
+  brand?: ReactNode;
+  copyright?: ReactNode;
+  links?: SiteNavLink[];
+  /** Render each link (e.g. Next.js `<Link>`). Defaults to `<a>`. */
+  renderLink?: (link: SiteNavLink, className: string) => ReactNode;
+  /** Trailing meta row (badges, “powered by”, etc.). */
+  meta?: ReactNode;
+  className?: string;
+};
+
+const linkClass =
+  "font-semibold text-muted-foreground transition-colors hover:text-primary";
+
+/**
+ * Marketing-site footer: brand, copyright, links, optional meta chips.
+ * Frosted surface bar with a primary hairline — matches sreelal.me.
+ */
+export function SiteFooter({
+  brand,
+  copyright,
+  links = [],
+  renderLink,
+  meta,
+  className,
+}: SiteFooterProps) {
+  const renderItem = (link: SiteNavLink) => {
+    if (renderLink) return renderLink(link, linkClass);
+    return (
+      <a href={link.href} className={linkClass}>
+        {link.label}
+      </a>
+    );
+  };
+
+  return (
+    <footer
+      data-slot="site-footer"
+      className={cn(
+        "relative border-t border-border/80 bg-[color-mix(in_srgb,var(--background)_85%,transparent)] backdrop-blur-md",
+        className,
+      )}
+    >
+      <div
+        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/35 to-transparent"
+        aria-hidden
+      />
+      <div className="mx-auto max-w-6xl px-6 py-12 lg:px-8">
+        <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
+          <div className="flex items-center gap-3">
+            {brand}
+            {brand && copyright ? (
+              <span className="text-border" aria-hidden>
+                |
+              </span>
+            ) : null}
+            {copyright ? (
+              <span className="text-[13px] text-muted-foreground">{copyright}</span>
+            ) : null}
+          </div>
+
+          {links.length > 0 ? (
+            <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[12px] text-muted-foreground">
+              {links.map((link) => (
+                <span key={`${link.href}-${link.label}`}>{renderItem(link)}</span>
+              ))}
+            </nav>
+          ) : null}
+
+          {meta}
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/composites/SiteNav.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useId, useState, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type SiteNavLink = {
+  href: string;
+  label: string;
+};
+
+export type SiteNavProps = {
+  brand: ReactNode;
+  links: SiteNavLink[];
+  /** Render each link (e.g. Next.js `<Link>`). Defaults to `<a>`. */
+  renderLink?: (link: SiteNavLink, className: string) => ReactNode;
+  className?: string;
+  /** Extra classes for the inner max-width row. */
+  innerClassName?: string;
+};
+
+const desktopLinkClass =
+  "relative rounded-full px-3.5 py-2 text-[13px] font-bold text-muted-foreground transition-colors hover:bg-primary/5 hover:text-foreground";
+
+const mobileLinkClass =
+  "flex items-center rounded-2xl px-4 py-4 text-xl font-bold text-muted-foreground transition-colors hover:bg-primary/5 hover:text-primary";
+
+/**
+ * Marketing-site navbar: fixed bar, brand, desktop links, and a 3-line mobile menu.
+ * Matches the sreelal.me chrome: transparent at rest, frosted surface after scroll.
+ */
+export function SiteNav({
+  brand,
+  links,
+  renderLink,
+  className,
+  innerClassName,
+}: SiteNavProps) {
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  const renderItem = (link: SiteNavLink, itemClass: string) => {
+    const close = () => setOpen(false);
+    if (renderLink) {
+      return (
+        <span className="contents" onClick={close}>
+          {renderLink(link, itemClass)}
+        </span>
+      );
+    }
+    return (
+      <a href={link.href} className={itemClass} onClick={close}>
+        {link.label}
+      </a>
+    );
+  };
+
+  return (
+    <nav
+      data-slot="site-nav"
+      data-scrolled={scrolled ? "true" : "false"}
+      className={cn(
+        "spk-site-nav fixed inset-x-0 top-0 z-50 transition-all duration-500",
+        scrolled
+          ? "border-b border-border/90 bg-[color-mix(in_srgb,var(--background)_88%,transparent)] shadow-[0_8px_30px_rgba(15,13,18,0.06)] backdrop-blur-xl"
+          : "bg-transparent",
+        className,
+      )}
+    >
+      <div className={cn("mx-auto max-w-6xl px-4 sm:px-6 lg:px-8", innerClassName)}>
+        <div className="flex h-14 items-center justify-between sm:h-16">
+          <div className="flex min-w-0 items-center">{brand}</div>
+
+          <div className="hidden items-center gap-0.5 md:flex">
+            {links.map((link) => (
+              <span key={`${link.href}-${link.label}`}>{renderItem(link, desktopLinkClass)}</span>
+            ))}
+          </div>
+
+          <button
+            type="button"
+            className="spk-touch-target -mr-2 p-2 md:hidden"
+            aria-label="Toggle menu"
+            aria-expanded={open}
+            aria-controls={menuId}
+            onClick={() => setOpen((value) => !value)}
+          >
+            <span className="flex h-4 w-6 flex-col justify-between" aria-hidden>
+              <span
+                className={cn(
+                  "block h-[2px] w-6 rounded-full bg-foreground transition-transform duration-200",
+                  open && "translate-y-[7px] rotate-45",
+                )}
+              />
+              <span
+                className={cn(
+                  "block h-[2px] w-6 rounded-full bg-foreground transition-opacity duration-200",
+                  open && "opacity-0",
+                )}
+              />
+              <span
+                className={cn(
+                  "block h-[2px] w-6 rounded-full bg-foreground transition-transform duration-200",
+                  open && "-translate-y-[7px] -rotate-45",
+                )}
+              />
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {open ? (
+        <div
+          id={menuId}
+          className="border-b border-border bg-[color-mix(in_srgb,var(--background)_95%,transparent)] shadow-2xl backdrop-blur-2xl md:hidden"
+        >
+          <div className="flex flex-col gap-2 px-6 py-8">
+            {links.map((link) => (
+              <div key={`${link.href}-${link.label}`}>{renderItem(link, mobileLinkClass)}</div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </nav>
+  );
+}

package/src/composites/StatCard.tsx

@@ -7,10 +7,41 @@ export type StatCardProps = {
   hint?: string;
   icon?: ReactNode;
   className?: string;
+  /**
+   * `app` — elevated app-card tile (label then value).
+   * `metric` — centered value-first tile for marketing stats.
+   */
+  variant?: "app" | "metric";
 };
 
 /** Compact metric tile using elevated app-card surface. */
-export function StatCard({ label, value, hint, icon, className }: StatCardProps) {
+export function StatCard({
+  label,
+  value,
+  hint,
+  icon,
+  className,
+  variant = "app",
+}: StatCardProps) {
+  if (variant === "metric") {
+    return (
+      <div
+        data-slot="stat-card"
+        data-variant="metric"
+        className={cn(
+          "flex flex-col items-center justify-center gap-1 rounded-[1.35rem] border border-border/80 bg-background/90 px-2 py-6 text-center shadow-[0_4px_24px_rgba(15,13,18,0.04)] backdrop-blur-sm",
+          className,
+        )}
+      >
+        <p className="text-xl font-black text-primary sm:text-2xl">{value}</p>
+        <p className="text-[10px] font-bold leading-none text-muted-foreground sm:text-[11px]">
+          {label}
+        </p>
+        {hint ? <p className="text-[10px] text-muted-foreground">{hint}</p> : null}
+      </div>
+    );
+  }
+
   return (
     <div data-slot="stat-card" className={cn("app-stat-card p-4 sm:p-5", className)}>
       <div className="flex items-start justify-between gap-3">

package/src/composites/Tag.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const tagVariants = cva(
+  "inline-flex items-center gap-1.5 whitespace-nowrap border font-bold",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-border/80 bg-[color-mix(in_srgb,var(--foreground)_4.5%,var(--background))] text-foreground",
+        primary: "border-primary/15 bg-primary/10 text-primary",
+        outline: "border-border/80 bg-transparent text-foreground",
+        muted: "border-transparent bg-secondary text-secondary-foreground",
+        red: "border-red-100 bg-red-50 text-red-700",
+        green: "border-green-200 bg-green-50 text-green-700",
+        orange: "border-orange-200 bg-orange-50 text-orange-700",
+        blue: "border-blue-200 bg-blue-50 text-blue-700",
+        purple: "border-purple-200 bg-purple-50 text-purple-700",
+        cyan: "border-cyan-200 bg-cyan-50 text-cyan-700",
+      },
+      size: {
+        sm: "rounded-md px-2 py-0.5 text-[11px]",
+        md: "rounded-lg px-2.5 py-1 text-[12px]",
+        lg: "rounded-xl px-3 py-1.5 text-[13px]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "sm",
+    },
+  },
+);
+
+export type TagProps = React.ComponentProps<"span"> & VariantProps<typeof tagVariants>;
+
+/** Static label pill for skills, tech stacks, and metadata. */
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="tag"
+      className={cn(tagVariants({ variant, size }), className)}
+      {...props}
+    />
+  ),
+);
+Tag.displayName = "Tag";
+
+export { Tag, tagVariants };

package/src/composites/Wordmark.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { GradientText } from "./GradientText";
+
+export type WordmarkProps = {
+  /** Primary name, rendered in foreground. */
+  name: ReactNode;
+  /** Trailing bit (`.me`, last name) in the marketing gradient. */
+  accent?: ReactNode;
+  /** Extra punctuation in primary (the period in `Name.`). */
+  mark?: ReactNode;
+  /** Unstyled trailing copy after the mark (`me` in `Sreelal.me`). */
+  rest?: ReactNode;
+  size?: "sm" | "md" | "lg" | "display";
+  as?: "span" | "h1";
+  className?: string;
+};
+
+const sizeClass = {
+  sm: "text-[14px] font-semibold tracking-tight",
+  md: "text-xl font-[900] tracking-tight",
+  lg: "text-[clamp(1.6rem,3.6vw,2.1rem)] font-[800] tracking-tight",
+  display: "text-[clamp(2.5rem,8vw,5.5rem)] font-[900] leading-[0.95] tracking-tight",
+} as const;
+
+/**
+ * Marketing wordmark: solid name, optional gradient accent, optional primary mark.
+ */
+export function Wordmark({
+  name,
+  accent,
+  mark,
+  rest,
+  size = "md",
+  as: Tag = "span",
+  className,
+}: WordmarkProps) {
+  return (
+    <Tag data-slot="wordmark" className={cn(sizeClass[size], className)}>
+      <span className="text-foreground">{name}</span>
+      {accent ? <GradientText>{accent}</GradientText> : null}
+      {mark ? <span className="text-primary">{mark}</span> : null}
+      {rest ? <span className="text-foreground">{rest}</span> : null}
+    </Tag>
+  );
+}

package/src/composites/marketing.test.tsx

@@ -0,0 +1,188 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Tag } from "./Tag";
+import { SectionHeading } from "./SectionHeading";
+import { SiteNav } from "./SiteNav";
+import { SiteFooter } from "./SiteFooter";
+import { StatCard } from "./StatCard";
+import { GradientText } from "./GradientText";
+import { Wordmark } from "./Wordmark";
+import { AvailabilityBadge } from "./AvailabilityBadge";
+import { FloatChip } from "./FloatChip";
+import { MetaChip } from "./MetaChip";
+import { IconTile } from "./IconTile";
+import { ContactLink } from "./ContactLink";
+import { CareerCard, CareerTimeline } from "./CareerCard";
+import { ProjectCard } from "./ProjectCard";
+import { PresenceDot } from "./PresenceDot";
+import { AccentRule } from "./AccentRule";
+
+describe("Tag", () => {
+  it("renders label text", () => {
+    render(<Tag>Java</Tag>);
+    expect(screen.getByText("Java")).toBeInTheDocument();
+  });
+
+  it("supports color tones from the marketing site", () => {
+    render(<Tag variant="orange">AWS</Tag>);
+    expect(screen.getByText("AWS").className).toMatch(/orange/);
+  });
+});
+
+describe("SectionHeading", () => {
+  it("renders eyebrow, title, and subtitle without a header element", () => {
+    const { container } = render(
+      <SectionHeading eyebrow="Career" title="Where I've worked" subtitle="7+ years." />,
+    );
+    expect(screen.getByText("Career")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Where I've worked" })).toBeInTheDocument();
+    expect(screen.getByText("7+ years.")).toBeInTheDocument();
+    expect(container.querySelector("header")).toBeNull();
+    expect(container.querySelector("[data-slot='section-heading']")).toBeTruthy();
+  });
+});
+
+describe("SiteNav", () => {
+  it("renders brand and links", async () => {
+    const user = userEvent.setup();
+    render(
+      <SiteNav
+        brand={<a href="/">Brand</a>}
+        links={[
+          { href: "#about", label: "About" },
+          { href: "/blog", label: "Blog" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Brand")).toBeInTheDocument();
+    expect(screen.getAllByText("About").length).toBeGreaterThan(0);
+    expect(screen.getByRole("navigation").className).toContain("spk-site-nav");
+    await user.click(screen.getByRole("button", { name: "Toggle menu" }));
+    expect(screen.getByLabelText("Toggle menu")).toHaveAttribute("aria-expanded", "true");
+  });
+});
+
+describe("SiteFooter", () => {
+  it("renders brand, copyright, and links", () => {
+    render(
+      <SiteFooter
+        brand={<span>Acme</span>}
+        copyright="© 2026"
+        links={[{ href: "#about", label: "About" }]}
+        meta={<MetaChip>Next.js</MetaChip>}
+      />,
+    );
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText("© 2026")).toBeInTheDocument();
+    expect(screen.getByText("About")).toBeInTheDocument();
+    expect(screen.getByText("Next.js")).toBeInTheDocument();
+  });
+});
+
+describe("StatCard metric", () => {
+  it("renders value-first metric layout", () => {
+    render(<StatCard variant="metric" label="Years Exp." value="7+" />);
+    expect(screen.getByText("7+")).toBeInTheDocument();
+    expect(screen.getByText("Years Exp.")).toBeInTheDocument();
+  });
+});
+
+describe("marketing chrome", () => {
+  it("renders a gradient wordmark", () => {
+    render(<Wordmark name="Sreelal" accent=".me" />);
+    expect(screen.getByText("Sreelal")).toBeInTheDocument();
+    expect(screen.getByText(".me")).toBeInTheDocument();
+  });
+
+  it("renders gradient text", () => {
+    render(<GradientText>Chalil</GradientText>);
+    expect(screen.getByText("Chalil")).toBeInTheDocument();
+  });
+
+  it("renders an availability badge with a live pip", () => {
+    render(<AvailabilityBadge>Open for work</AvailabilityBadge>);
+    expect(screen.getByText("Open for work")).toBeInTheDocument();
+    expect(document.querySelector("[data-slot='presence-dot']")).toBeTruthy();
+  });
+
+  it("renders a float chip", () => {
+    render(<FloatChip icon="☁️" title="AWS" subtitle="Certified" />);
+    expect(screen.getByText("AWS")).toBeInTheDocument();
+    expect(screen.getByText("Certified")).toBeInTheDocument();
+  });
+
+  it("renders a live float chip", () => {
+    render(<FloatChip live>Open for Work</FloatChip>);
+    expect(screen.getByText("Open for Work")).toBeInTheDocument();
+  });
+
+  it("renders a presence dot", () => {
+    render(<PresenceDot label="Online" />);
+    expect(screen.getByLabelText("Online")).toBeInTheDocument();
+  });
+
+  it("renders an accent rule", () => {
+    const { container } = render(<AccentRule />);
+    expect(container.querySelector("[data-slot='accent-rule']")).toBeTruthy();
+  });
+});
+
+describe("IconTile", () => {
+  it("renders title and description", () => {
+    render(<IconTile icon="🏦" title="Banking" description="Markets" />);
+    expect(screen.getByText("Banking")).toBeInTheDocument();
+    expect(screen.getByText("Markets")).toBeInTheDocument();
+  });
+});
+
+describe("ContactLink", () => {
+  it("renders name, label, and href", () => {
+    render(
+      <ContactLink href="mailto:hi@example.com" name="Email" label="hi@example.com" icon="@" />,
+    );
+    const link = screen.getByRole("link", { name: /Email/ });
+    expect(link).toHaveAttribute("href", "mailto:hi@example.com");
+    expect(screen.getByText("hi@example.com")).toBeInTheDocument();
+  });
+});
+
+describe("CareerCard", () => {
+  it("renders a current role with tags", () => {
+    render(
+      <CareerTimeline>
+        <CareerCard
+          role="Engineer"
+          company="Acme"
+          location="Remote"
+          period="2024 — Present"
+          current
+          bullets={["Shipped the thing."]}
+          tags={["Java"]}
+        />
+      </CareerTimeline>
+    );
+    expect(screen.getByText("Engineer")).toBeInTheDocument();
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText("Shipped the thing.")).toBeInTheDocument();
+    expect(screen.getByText("Java")).toBeInTheDocument();
+  });
+});
+
+describe("ProjectCard", () => {
+  it("renders title, company, outcome, and tags", () => {
+    render(
+      <ProjectCard
+        title="PIM"
+        company="Nissan"
+        outcome="60% cost saved"
+        description="Cloud rewrite."
+        tags={["AWS"]}
+      />,
+    );
+    expect(screen.getByText("PIM")).toBeInTheDocument();
+    expect(screen.getByText("Nissan")).toBeInTheDocument();
+    expect(screen.getByText("60% cost saved")).toBeInTheDocument();
+    expect(screen.getByText("AWS")).toBeInTheDocument();
+  });
+});