@spunto/design-system 0.15.1 → 0.17.0

package/src/components/marketing/product-header.tsx

@@ -0,0 +1,115 @@
+// The opening of a product page. Static shell (server-renderable) around the
+// one interactive part, `CopyCommand`.
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+import { CopyCommand } from "./copy-command"
+import { NightBand, NightChip } from "./night-band"
+
+/* ─── ProductHeader ────────────────────────────────────────────────────────
+   Mark, name, kind, headline, promise, the one command, the honest chips. The
+   same shape repeated across a catalogue is what makes several product pages
+   read as one family rather than N landing pages that happen to share a nav.
+
+   **Generalised on the way into the package.** The site's version took a
+   `Product` out of its own registry and looked its accent up in a table, so it
+   couldn't draw anything that wasn't a Spunto product. Here it takes a mark, a
+   name, a kind, an accent colour and (optionally) a command — it knows about no
+   product at all. Everything product-specific a page wants beside the command
+   (a Source link, a docs link, a signup button) goes through `actions`, which
+   is also where a link belongs: the package doesn't import a router. */
+
+export interface ProductHeaderProps {
+  /** The product's logo — any node, usually an inline SVG sized by the caller. */
+  mark?: ReactNode
+  name: ReactNode
+  /** Mono qualifier beside the name: "self-hosted platform", "CLI"… */
+  kind?: ReactNode
+  headline: ReactNode
+  intro?: ReactNode
+  /** Short facts under the intro — "MIT", "no account", "one binary"… */
+  chips?: string[]
+  /** Any CSS colour. Lights the band, the mark, the chips and the `$` prompt. */
+  accent?: string
+  /** When set, the header draws the two-column layout with a copyable command. */
+  command?: string
+  commandCaption?: ReactNode
+  commandNote?: ReactNode
+  /** Buttons and links under the command — the caller renders its own. */
+  actions?: ReactNode
+  className?: string
+}
+
+export function ProductHeader({
+  mark,
+  name,
+  kind,
+  headline,
+  intro,
+  chips,
+  accent = "var(--flame)",
+  command,
+  commandCaption,
+  commandNote,
+  actions,
+  className,
+}: ProductHeaderProps) {
+  const aside = command !== undefined || actions !== undefined
+
+  return (
+    <NightBand glow={accent} className={className}>
+      <div className="mx-auto max-w-6xl px-5 pb-16 pt-28 md:px-10 md:pb-20 md:pt-36">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          {mark && <span style={{ color: accent }}>{mark}</span>}
+          <span className="font-display text-lg font-bold tracking-tight text-white">{name}</span>
+          {kind && <span className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-stone-400">{kind}</span>}
+        </div>
+
+        {/* Full width — the product's one line shouldn't have to share a column
+            with the command block and wrap four times.
+
+            The phone size is fluid, not a fixed 2.5rem: these headlines are
+            hand-broken with a `<br />`, so a line is never allowed to wrap, and
+            at a fixed 40px a long word ran past the content box of a 320px
+            screen — letters off the edge of the band, clipped by its
+            `overflow-hidden`. 10vw keeps the longest word inside the gutters at
+            every phone width (and leaves room for the fallback face while the
+            display font loads), then stops growing at the same 2.5rem. */}
+        <h1 className="font-display mt-6 max-w-[19ch] text-[clamp(2rem,10vw,2.5rem)] font-bold leading-[1.0] tracking-[-0.045em] text-white sm:text-5xl xl:text-[3.9rem]">
+          {headline}
+        </h1>
+
+        {/* `min-w-0` on both cells, and it is not cosmetic. A grid item's
+            automatic minimum size is its min-content width, and the command
+            block's `<pre>` doesn't shrink below its longest line: on a phone
+            (one column) the track grows past the page and the band clips
+            everything in it — invisibly. Capping the track lets the `<pre>`
+            scroll on its own, which is what `overflow-x-auto` was there for. */}
+        <div className={cn("mt-9 grid gap-10", aside && "lg:grid-cols-[1.05fr_0.95fr] lg:items-start lg:gap-14")}>
+          <div className="min-w-0">
+            {intro && <p className="max-w-[56ch] text-[15px] leading-relaxed text-stone-300 md:text-base">{intro}</p>}
+            {chips && chips.length > 0 && (
+              <div className="mt-6 flex flex-wrap gap-2">
+                {chips.map((c) => (
+                  <NightChip key={c} accent={accent}>
+                    {c}
+                  </NightChip>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {aside && (
+            <div className="min-w-0 lg:pb-1">
+              {command !== undefined && (
+                <CopyCommand tone="night" command={command} caption={commandCaption} note={commandNote} accent={accent} />
+              )}
+              {actions && <div className="mt-5 flex flex-wrap items-center gap-3">{actions}</div>}
+            </div>
+          )}
+        </div>
+      </div>
+    </NightBand>
+  )
+}

package/src/components/marketing/reveal.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { useEffect, useRef, useState, type ReactNode } from "react"
+
+import { cn } from "../../utils"
+import { usePrefersReducedMotion } from "./motion"
+
+/* ─── Reveal — fade-and-lift into view on scroll ───────────────────────────
+   The one animated primitive that made it into the package, and the reason it
+   could is that it carries **no motion library**. The site's version was
+   `framer-motion` (`useInView` + a `motion.div`); adding that as a hard
+   dependency of the design system would weigh on every consumer, including the
+   dashboards that never draw a landing page. An IntersectionObserver and a CSS
+   transition do the same job here, in ~20 lines.
+
+   Reduced motion short-circuits to a plain `<div>`: no observer, no transition,
+   the content is simply there. */
+
+export interface RevealProps {
+  children: ReactNode
+  className?: string
+  /** Stagger, in seconds — give siblings 0, 0.08, 0.16… */
+  delay?: number
+  /** How far it lifts, in pixels. */
+  y?: number
+  /** `false` re-hides the element when it leaves the viewport. */
+  once?: boolean
+}
+
+export function Reveal({ children, className, delay = 0, y = 28, once = true }: RevealProps) {
+  const reduced = usePrefersReducedMotion()
+  const ref = useRef<HTMLDivElement>(null)
+  const [shown, setShown] = useState(false)
+
+  useEffect(() => {
+    if (reduced) return
+    const el = ref.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setShown(true)
+          if (once) io.disconnect()
+        } else if (!once) {
+          setShown(false)
+        }
+      },
+      // Same threshold as the framer-motion original: the element has to be
+      // 80px inside the viewport before it counts as seen.
+      { rootMargin: "-80px" }
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [reduced, once])
+
+  if (reduced) return <div className={className}>{children}</div>
+
+  return (
+    <div
+      ref={ref}
+      className={cn("transition-[opacity,transform] duration-[600ms] ease-[cubic-bezier(0.22,1,0.36,1)]", className)}
+      style={{
+        opacity: shown ? 1 : 0,
+        transform: shown ? undefined : `translateY(${y}px)`,
+        transitionDelay: delay ? `${delay}s` : undefined,
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/marketing/section.tsx

@@ -0,0 +1,161 @@
+// Marketing page scaffolding — the static half of the vocabulary.
+//
+// No `"use client"` on purpose: `Section`, `H2`, `Kicker`, `SpecList` and
+// `Disclosure` render no state and hold no effect, so they stay callable from a
+// React Server Component. The package already splits this way for
+// `buttonVariants` / `alertVariants`; the marketing entry keeps the same line —
+// everything interactive lives in its own file with the directive on it
+// (`copy-command.tsx`, `reveal.tsx`, `use-loop-clock.ts`).
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+
+/* ─── Section — every chapter opens the same way ────────────────────────────
+   A hairline rule, a mono label ("01 — WHAT IT IS"), an optional note pushed to
+   the right margin, then the content. Repeating that shape down a page is what
+   makes a marketing page read as one document rather than a stack of unrelated
+   blocks. */
+
+export interface SectionProps {
+  /** Anchor id — the section scrolls under a sticky header (`scroll-mt-20`). */
+  id?: string
+  /** Chapter number, drawn in the accent colour before the title. */
+  n?: string
+  title: string
+  /** Right-hand margin note, hidden below `sm` where there is no margin. */
+  note?: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+export function Section({ id, n, title, note, children, className }: SectionProps) {
+  return (
+    <section id={id} className={cn("scroll-mt-20 border-t border-border px-5 py-16 md:px-10 md:py-24", className)}>
+      <div className="mb-10 flex items-baseline justify-between gap-4 border-b border-border pb-3 font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground md:mb-14">
+        <span>
+          {n && <span className="text-primary">{n}</span>}
+          {n && " — "}
+          {title}
+        </span>
+        {note && <span className="hidden text-muted-foreground/50 sm:block">{note}</span>}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+/* ─── Headline ──────────────────────────────────────────────────────────────
+   Display face (Syne) via the `font-display` utility the tokens already
+   generate — the kits carried a `style={{ fontFamily: "var(--font-display)" }}`
+   object around because the site had no such utility; the package does. */
+
+export interface H2Props {
+  children: ReactNode
+  className?: string
+}
+
+export function H2({ children, className }: H2Props) {
+  return (
+    <h2
+      className={cn(
+        "font-display max-w-[24ch] text-3xl font-bold leading-[1.05] tracking-[-0.03em] md:text-[2.6rem]",
+        className
+      )}
+    >
+      {children}
+    </h2>
+  )
+}
+
+/* ─── Kicker — the mono line above a headline ───────────────────────────────
+   One component, not two: the site had `Kicker` (home + product pages) and
+   `Eyebrow` (Ads landings) doing the same job at 0.22em and 0.25em tracking.
+   The package publishes a single `Kicker`; a page that wants the wider letter
+   spacing passes it through `className`. */
+
+export interface KickerProps {
+  children: ReactNode
+  className?: string
+}
+
+export function Kicker({ children, className }: KickerProps) {
+  return <p className={cn("font-mono text-[11px] uppercase tracking-[0.22em] text-primary", className)}>{children}</p>
+}
+
+/* ─── SpecList — facts without bullets ─────────────────────────────────────
+   Key/value rows, the default way to list what something *is* on a marketing
+   page: denser than a bulleted list and it never invents a verb. */
+
+export interface SpecListProps {
+  rows: [string, ReactNode][]
+  className?: string
+}
+
+export function SpecList({ rows, className }: SpecListProps) {
+  return (
+    <dl className={cn("border-t border-border", className)}>
+      {rows.map(([k, v]) => (
+        <div
+          key={k}
+          className="grid grid-cols-[6.5rem_1fr] gap-4 border-b border-border py-2.5 md:grid-cols-[8.5rem_1fr]"
+        >
+          <dt className="pt-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground/70">{k}</dt>
+          {/* `min-w-0 break-words` — the value column carries the odd API name
+              (`Input.dispatchMouseEvent`), and a token longer than the track
+              would otherwise widen the grid and push the row off a narrow
+              phone rather than wrap. */}
+          <dd className="min-w-0 break-words text-sm leading-relaxed text-foreground/85">{v}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+/* ─── Disclosure — a row you open ──────────────────────────────────────────
+   A marketing page that lays every argument out at once (five timeline entries
+   and seven FAQ answers, all expanded) is a wall a visitor bounces off. Closed,
+   a chapter is five headlines you scan in four seconds; open, it's the same
+   text as before.
+
+   `<details name>` gives the exclusive-accordion behaviour natively: no state,
+   no hydration surface, and it works before the JS lands — which is also why
+   this component stays server-renderable. Browsers that don't know `name` yet
+   just allow several rows open at once: the same page, less tidy. */
+
+export interface DisclosureProps {
+  /** Shared by the rows of one accordion — only one of them stays open. */
+  group: string
+  summary: ReactNode
+  /** Small left-hand column: a time, a product, a number. */
+  aside?: ReactNode
+  defaultOpen?: boolean
+  children: ReactNode
+  className?: string
+}
+
+export function Disclosure({ group, summary, aside, defaultOpen = false, children, className }: DisclosureProps) {
+  return (
+    <details name={group} open={defaultOpen} className={cn("group border-b border-border", className)}>
+      <summary className="flex cursor-pointer list-none items-baseline gap-4 py-4 transition-colors hover:text-primary [&::-webkit-details-marker]:hidden">
+        {/* On a phone the aside sits *above* the headline rather than in a
+            column beside it: a 6rem gutter on a 393pt screen wraps every title
+            onto two lines. */}
+        {aside && <span className="hidden w-[9rem] shrink-0 md:block">{aside}</span>}
+        <span className="min-w-0 flex-1">
+          {aside && <span className="mb-1.5 block md:hidden">{aside}</span>}
+          <span className="font-display block text-[17px] font-bold leading-snug tracking-[-0.02em] md:text-xl">
+            {summary}
+          </span>
+        </span>
+        <span
+          aria-hidden
+          className="mt-1 shrink-0 font-mono text-lg leading-none text-muted-foreground/60 transition-transform group-open:rotate-45"
+        >
+          +
+        </span>
+      </summary>
+      <div className={cn("pb-6", aside && "md:pl-[10rem]")}>{children}</div>
+    </details>
+  )
+}

package/src/components/sheet.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+// ---------------------------------------------------------------------------
+// A sheet is a Dialog that enters from an edge. Same primitive (`@base-ui/react/
+// dialog` — focus trap, Escape, backdrop, focus restore), same portal target as
+// every other overlay here (the `SpuntoProvider` container), only the geometry
+// changes.
+//
+// Position and size are two separate props on purpose. `side` decides which edge
+// the panel is glued to; `size` decides how far it comes in. Both resolve to
+// plain, unprefixed utilities computed in JS — *not* `data-[side=right]:`-style
+// selectors — so a `className` on `SheetContent` still wins on specificity, and
+// an app can go from a 32rem panel to full-bleed with `size="full"` or with its
+// own `sm:max-w-*` without reaching for `!important`.
+// ---------------------------------------------------------------------------
+
+export type SheetSide = "right" | "left" | "top" | "bottom"
+
+/** How far the panel comes in. Widths for left/right, heights for top/bottom. */
+export type SheetSize = "sm" | "md" | "lg" | "xl" | "full"
+
+const SIDE_CLASSES: Record<SheetSide, string> = {
+  right:
+    "inset-y-0 right-0 h-full w-full border-l data-ending-style:translate-x-full data-starting-style:translate-x-full",
+  left:
+    "inset-y-0 left-0 h-full w-full border-r data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+  top:
+    "inset-x-0 top-0 w-full border-b data-ending-style:-translate-y-full data-starting-style:-translate-y-full",
+  bottom:
+    "inset-x-0 bottom-0 w-full border-t data-ending-style:translate-y-full data-starting-style:translate-y-full",
+}
+
+// Below `sm` a side panel always takes the full width — a 24rem panel on a phone
+// is a modal with a useless 3rem gutter.
+const HORIZONTAL_SIZE_CLASSES: Record<SheetSize, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-lg",
+  lg: "sm:max-w-3xl",
+  xl: "sm:max-w-5xl",
+  full: "sm:max-w-none",
+}
+
+const VERTICAL_SIZE_CLASSES: Record<SheetSize, string> = {
+  sm: "h-auto max-h-[16rem]",
+  md: "h-auto max-h-[24rem]",
+  lg: "h-auto max-h-[32rem]",
+  xl: "h-auto max-h-[80dvh]",
+  full: "h-dvh",
+}
+
+/** Groups the sheet parts. Controlled via `open`/`onOpenChange`, or uncontrolled. */
+function Sheet(props: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+/** Element that opens the sheet. Pass `render` to reuse an existing button. */
+function SheetTrigger(props: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+/** Imperatively closes the sheet. Wrap a `Button` via `render` for a footer action. */
+function SheetClose(props: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+export interface SheetContentProps extends SheetPrimitive.Popup.Props {
+  /** Which edge the panel slides in from. @default "right" */
+  side?: SheetSide
+  /** Width (left/right) or height (top/bottom) of the panel. @default "md" */
+  size?: SheetSize
+  /** Draws the ✕ in the top corner. @default true */
+  showClose?: boolean
+}
+
+/**
+ * Portal + backdrop + the sliding panel, in one styled wrapper. Renders into the
+ * `SpuntoProvider` overlay container (falls back to `document.body`).
+ *
+ * The panel is a `flex flex-col` by default; `className` is the layout escape
+ * hatch and is merged last — pass `p-0` to lay out your own padding, `grid
+ * grid-cols-2` to split it in two columns, `overflow-y-auto` to scroll the whole
+ * panel rather than an inner region.
+ */
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  size = "md",
+  showClose = true,
+  ...props
+}: SheetContentProps) {
+  const container = useOverlayContainer()
+  const horizontal = side === "left" || side === "right"
+  return (
+    <SheetPrimitive.Portal container={container ?? undefined}>
+      <SheetPrimitive.Backdrop
+        data-slot="sheet-backdrop"
+        className="fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/60"
+      />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 border-border bg-background bg-clip-padding text-sm text-foreground shadow-xl shadow-black/[0.08] outline-none",
+          "transition-transform duration-200 ease-out",
+          SIDE_CLASSES[side],
+          horizontal ? HORIZONTAL_SIZE_CLASSES[size] : VERTICAL_SIZE_CLASSES[size],
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showClose && (
+          <SheetPrimitive.Close
+            aria-label="Fermer"
+            className="absolute top-3.5 right-3.5 flex size-7 items-center justify-center rounded-md text-muted-foreground/70 transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
+          >
+            <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPrimitive.Portal>
+  )
+}
+
+/** Title + description stack at the top of the panel. */
+function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet-header" className={cn("flex flex-col gap-0.5 p-4", className)} {...props} />
+}
+
+/** Action row pinned to the bottom of the panel. */
+function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-base leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/table.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "../utils"
+
+// ---------------------------------------------------------------------------
+// Presentational only, on purpose: no sorting, no pagination, no column model.
+// Apps that show tables already own that logic (and disagree on it) — what they
+// were re-writing every time is the markup and the token choices, so that's all
+// this ships. Every part is the plain HTML element with a `data-slot` and a
+// class string, `className` merged last.
+// ---------------------------------------------------------------------------
+
+export interface TableProps extends ComponentProps<"table"> {
+  /**
+   * Class for the scroll container wrapping the `<table>` — the only place a
+   * `max-height`, a sticky-header context or a border/rounding can live, since
+   * it's the element that scrolls.
+   */
+  containerClassName?: string
+}
+
+/** The `<table>` plus its horizontal scroll container. */
+function Table({ className, containerClassName, ...props }: TableProps) {
+  return (
+    <div data-slot="table-container" className={cn("relative w-full overflow-x-auto", containerClassName)}>
+      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b [&_tr]:border-border", className)} {...props} />
+}
+
+function TableBody({ className, ...props }: ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+}
+
+/** Totals row. Sits under the body with its own tinted background. */
+function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** A row. Hover tint by default; `data-[state=selected]` keeps it tinted. */
+function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A header cell (`<th>`). */
+function TableHead({ className, ...props }: ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A body cell (`<td>`). */
+function TableCell({ className, ...props }: ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Caption under the table — its accessible description. */
+function TableCaption({ className, ...props }: ComponentProps<"caption">) {
+  return (
+    <caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  )
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption }