@spunto/design-system 0.17.0 → 0.18.1

package/README.md

@@ -102,6 +102,21 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
     highlighted, so a query with no result still inserts a line break. The query either
     comes from the caller (`query`, the "/" case) or from a `CommandMenuInput` rendered
     inside the popup (a filter dropdown on a button; `autoFocus` is opt-in).
+  - _Auth_ — `AuthLayout`, `AuthBrandPanel` (+`AuthBrandMark`), `AuthForm`
+    (+`authFormCopy`), `OAuthButton` (+`GoogleIcon`/`GitHubIcon`) and `AuthSeparator`:
+    the login/signup screen **in bricks**, not one `<AuthScreen />`. In the root entry
+    for the same reason as the palette — nothing in it knows a Spunto concept: every
+    word of the brand panel is a prop, and the form authenticates nothing. **No
+    framework, no network**: no `next/navigation`, no `fetch`; `AuthForm` hands back
+    `onSubmit({ mode, email, password, name })`, `error`/`loading` come back down as
+    props, and anything that navigates takes an `href` (+ `render.link` on
+    `OAuthButton`) — the route, the endpoints and the redirect stay in the app. Both
+    controlled (`mode`, for `/login` + `/signup`) and uncontrolled (`initialMode` + the
+    in-place toggle). The fields are the package's own `Input`/`Label`/`Button`, in this
+    screen's taller register through `className` — the shape belongs to the page, not to
+    inputs in general. Assembling the whole thing:
+    [Créer sa page de login](https://design.spunto.net/#/auth-guide)
+    ([markdown](https://design.spunto.net/auth-guide.md)).
   - _Terminal_ — `Terminal` (+`TerminalHandle`, `TerminalOptions`), a transport-agnostic
     xterm.js surface: mount, shared dark ANSI theme, fit-on-resize. No opinion on where
     bytes come from (WebSocket, SSE, a static string) — feed it via the `write`/`writeln`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/auth/auth-brand-panel.tsx

@@ -0,0 +1,163 @@
+import type { ReactNode } from "react"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+
+/* ─── AuthBrandPanel ───────────────────────────────────────────────────────
+   What fills the dark half of `AuthLayout`: the mark at the top, the promise
+   and its arguments in the middle, a quote at the bottom.
+
+   **Nothing about Spunto is written in here.** The headline, the four lines
+   that sell the product and the quote all come down as props — the component is
+   the *shape* of that panel (three blocks pushed apart by `justify-between`, a
+   flame check per argument, a hairline card for the quote), not its copy. */
+
+export interface AuthBrandMarkProps {
+  /**
+   * The logo, as a node — an inline SVG, an `<img>`, whatever the app has. It
+   * sits above the halo, so give it its own size and radius. Use `logoSrc`
+   * instead to get a plain, correctly-sized `<img>` for free.
+   */
+  logo?: ReactNode
+  /** Convenience over `logo`: an image URL the package draws itself. */
+  logoSrc?: string
+  /** Wordmark beside (or under) the logo. */
+  name?: ReactNode
+  /**
+   * `panel` — horizontal, white text, for the dark brand panel.
+   * `compact` — stacked and centered, themed text, for the top of the form
+   * column on small screens (where the brand panel is hidden).
+   * @default "panel"
+   */
+  variant?: "panel" | "compact"
+  className?: string
+}
+
+/** Logo + wordmark, haloed. The one brand element the auth screen repeats. */
+export function AuthBrandMark({
+  logo,
+  logoSrc,
+  name,
+  variant = "panel",
+  className,
+}: AuthBrandMarkProps) {
+  const panel = variant === "panel"
+  const alt = typeof name === "string" ? name : ""
+
+  const mark = logoSrc ? (
+    <img
+      src={logoSrc}
+      alt={alt}
+      className={cn(
+        "relative object-cover",
+        panel ? "h-10 w-10 rounded-xl ring-1 ring-white/15" : "h-12 w-12 rounded-2xl shadow-lg ring-1 ring-black/5"
+      )}
+    />
+  ) : (
+    <span className="relative block">{logo}</span>
+  )
+
+  return (
+    <div
+      className={cn(
+        "relative flex",
+        panel ? "items-center gap-3" : "flex-col items-center gap-2",
+        className
+      )}
+    >
+      {(logo || logoSrc) && (
+        <div className="relative">
+          <div
+            className={cn(
+              "absolute inset-0 rounded-md",
+              panel ? "bg-primary/40 blur-md" : "scale-110 bg-primary/25 blur-lg"
+            )}
+          />
+          {mark}
+        </div>
+      )}
+      {name && (
+        <span
+          className={cn(
+            "font-display font-bold tracking-tight",
+            panel ? "text-xl text-white" : "text-lg text-foreground"
+          )}
+        >
+          {name}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export interface AuthBrandPanelProps extends Omit<AuthBrandMarkProps, "variant" | "className"> {
+  /** The promise, big. Takes nodes, so a `<br />` or a gradient span is yours to place. */
+  title?: ReactNode
+  /** The paragraph under it. */
+  description?: ReactNode
+  /** The selling points, one flame check each. */
+  items?: ReactNode[]
+  /** A testimonial in the bottom card. Omit both quote props to drop the card. */
+  quote?: ReactNode
+  /** Attribution under the quote — write the dash yourself ("— Platform Lead"). */
+  quoteAuthor?: ReactNode
+  /** Replaces the quote card entirely (a logo strip, a status line…). */
+  footer?: ReactNode
+  className?: string
+  /** Reaches the mark at the top (or hand it `null` to drop it). */
+  markClassName?: string
+}
+
+export function AuthBrandPanel({
+  logo,
+  logoSrc,
+  name,
+  title,
+  description,
+  items,
+  quote,
+  quoteAuthor,
+  footer,
+  className,
+  markClassName,
+}: AuthBrandPanelProps) {
+  const hasQuote = quote !== undefined || quoteAuthor !== undefined
+
+  return (
+    // `h-full` + `justify-between` rather than the layout's own flex column, so
+    // the panel keeps its three-block rhythm wherever it's mounted.
+    <div className={cn("relative flex h-full flex-col justify-between", className)}>
+      <AuthBrandMark logo={logo} logoSrc={logoSrc} name={name} className={markClassName} />
+
+      <div className="space-y-8">
+        {(title || description) && (
+          <div>
+            {title && <h1 className="mb-3 text-3xl leading-snug font-bold text-white">{title}</h1>}
+            {description && <p className="leading-relaxed text-zinc-400">{description}</p>}
+          </div>
+        )}
+
+        {items && items.length > 0 && (
+          <ul className="space-y-4">
+            {items.map((item, i) => (
+              <li key={i} className="flex items-start gap-3 text-sm text-zinc-300">
+                <div className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-primary/30 bg-primary/20">
+                  <CheckIcon className="h-3 w-3 text-primary" />
+                </div>
+                {item}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {footer ??
+        (hasQuote && (
+          <div className="rounded-xl border border-white/10 bg-white/3 p-5">
+            {quote && <p className="text-sm leading-relaxed text-zinc-300 italic">{quote}</p>}
+            {quoteAuthor && <p className="mt-3 text-xs text-zinc-500">{quoteAuthor}</p>}
+          </div>
+        ))}
+    </div>
+  )
+}

package/src/components/auth/auth-form.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import { useId, useState, type FormEvent, type ReactNode } from "react"
+
+import { cn } from "../../utils"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Label } from "../label"
+import { Spinner } from "../spinner"
+import type { AuthMode, AuthSubmitValues } from "./types"
+
+/* ─── AuthForm ─────────────────────────────────────────────────────────────
+   One form, two modes. `/login` opens on the sign-in form and `/signup` on the
+   account form — a home page whose call to action says "Sign up for free" has to
+   land on a form that says "Create an account", not on "Welcome back". The
+   toggle at the bottom still switches between the two *without a navigation*, so
+   nobody is stuck on the wrong one.
+
+   Hence both a `mode` (controlled — two routes, each pinning its own) and an
+   `initialMode` (uncontrolled — one route, the toggle switches in place).
+
+   **It does not authenticate anything.** No `fetch`, no session, no redirect:
+   `onSubmit` hands back `{ mode, email, password, name }` and the app decides
+   which endpoint that goes to and where the user lands afterwards. `error` and
+   `loading` come back down as props — the request is the app's, so its two
+   states are the app's too (`loading` is optional: left out, the form spins by
+   itself while an async `onSubmit` is pending). */
+
+export interface AuthModeCopy {
+  title: ReactNode
+  subtitle: ReactNode
+  /** The submit button's label. */
+  submit: ReactNode
+  /** The question at the bottom ("No account?"). */
+  switchPrompt: ReactNode
+  /** The link that flips the mode ("Create one"). */
+  switchAction: ReactNode
+}
+
+export interface AuthFieldCopy {
+  name: string
+  email: string
+  password: string
+}
+
+export interface AuthFormCopy {
+  login: AuthModeCopy
+  register: AuthModeCopy
+  fields: AuthFieldCopy
+}
+
+/** English defaults — every string is overridable through `copy`. */
+export const authFormCopy: AuthFormCopy = {
+  login: {
+    title: "Welcome back",
+    subtitle: "Sign in to access your environments",
+    submit: "Sign in",
+    switchPrompt: "No account?",
+    switchAction: "Create one",
+  },
+  register: {
+    title: "Create an account",
+    subtitle: "Set up your dev account",
+    submit: "Create account",
+    switchPrompt: "Already have an account?",
+    switchAction: "Sign in",
+  },
+  fields: {
+    name: "Display name (optional)",
+    email: "Email",
+    password: "Password",
+  },
+}
+
+/* The auth register of the `Input` primitive: taller, rounder, on the card
+   surface — the same 44 px pill as `OAuthButton`, so the provider button and the
+   fields under it line up. Kept here rather than added as a `size` on `Input`:
+   it is this screen's shape, not a general one. */
+const fieldClass =
+  "h-auto rounded-xl border-border bg-card px-3 py-2.5 text-sm placeholder:text-muted-foreground dark:bg-card"
+
+export interface AuthFormProps {
+  /** Controlled mode — set it when the route decides (`/login` vs `/signup`). */
+  mode?: AuthMode
+  /** Uncontrolled starting mode. @default "login" */
+  initialMode?: AuthMode
+  /** Fires on both the controlled and the uncontrolled path (clear your `error` here). */
+  onModeChange?: (mode: AuthMode) => void
+  /** Where the app takes over: call your API, then redirect. */
+  onSubmit?: (values: AuthSubmitValues) => void | Promise<void>
+  /** Controlled busy state. Omitted, the form is busy while `onSubmit` is pending. */
+  loading?: boolean
+  /** The failure, under the fields. `null`/`undefined` shows nothing. */
+  error?: ReactNode
+  /** Pre-filled values — dev credentials, an invited address… */
+  defaultEmail?: string
+  defaultPassword?: string
+  defaultName?: string
+  /** Show the display-name field. @default true in `register`, false in `login` */
+  showNameField?: boolean
+  /** Native `minLength` on the password. @default 8 in `register`, 1 in `login` */
+  passwordMinLength?: number
+  /** Hides the bottom "No account? Create one" line (two dedicated routes, no toggle). */
+  hideModeSwitch?: boolean
+  /** Every string on the screen. Merged over the defaults, per mode. */
+  copy?: {
+    login?: Partial<AuthModeCopy>
+    register?: Partial<AuthModeCopy>
+    fields?: Partial<AuthFieldCopy>
+  }
+  /** Slot between the heading and the fields — the OAuth buttons and their separator. */
+  children?: ReactNode
+  /** Slot under the mode switch — terms, a link back to the site. */
+  footer?: ReactNode
+  className?: string
+}
+
+export function AuthForm({
+  mode: modeProp,
+  initialMode = "login",
+  onModeChange,
+  onSubmit,
+  loading,
+  error,
+  defaultEmail = "",
+  defaultPassword = "",
+  defaultName = "",
+  showNameField,
+  passwordMinLength,
+  hideModeSwitch,
+  copy,
+  children,
+  footer,
+  className,
+}: AuthFormProps) {
+  const id = useId()
+  const [uncontrolledMode, setUncontrolledMode] = useState<AuthMode>(initialMode)
+  const mode = modeProp ?? uncontrolledMode
+
+  const [email, setEmail] = useState(defaultEmail)
+  const [password, setPassword] = useState(defaultPassword)
+  const [name, setName] = useState(defaultName)
+  const [pending, setPending] = useState(false)
+
+  const busy = loading ?? pending
+  const register = mode === "register"
+  const withName = showNameField ?? register
+  const fields = { ...authFormCopy.fields, ...copy?.fields }
+  const text = { ...authFormCopy[mode], ...copy?.[mode] }
+
+  function switchMode() {
+    const next: AuthMode = register ? "login" : "register"
+    if (modeProp === undefined) setUncontrolledMode(next)
+    onModeChange?.(next)
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (busy) return
+    const values: AuthSubmitValues = { mode, email, password }
+    if (register && withName && name) values.name = name
+    try {
+      setPending(true)
+      await onSubmit?.(values)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      <div className="text-center">
+        <h2 className="text-2xl font-bold tracking-tight text-foreground">{text.title}</h2>
+        <p className="mt-2 text-sm text-muted-foreground">{text.subtitle}</p>
+      </div>
+
+      {children}
+
+      <form onSubmit={handleSubmit} className="space-y-3">
+        {/* The screen is placeholder-only by design (three fields, no room for a
+            column of labels), so each field still carries a real `Label` — just
+            visually hidden. A placeholder is not an accessible name. */}
+        {register && withName && (
+          <div>
+            <Label htmlFor={`${id}-name`} className="sr-only">
+              {fields.name}
+            </Label>
+            <Input
+              id={`${id}-name`}
+              type="text"
+              autoComplete="name"
+              placeholder={fields.name}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className={fieldClass}
+            />
+          </div>
+        )}
+
+        <div>
+          <Label htmlFor={`${id}-email`} className="sr-only">
+            {fields.email}
+          </Label>
+          <Input
+            id={`${id}-email`}
+            type="email"
+            autoComplete="email"
+            required
+            placeholder={fields.email}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className={fieldClass}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor={`${id}-password`} className="sr-only">
+            {fields.password}
+          </Label>
+          <Input
+            id={`${id}-password`}
+            type="password"
+            autoComplete={register ? "new-password" : "current-password"}
+            required
+            minLength={passwordMinLength ?? (register ? 8 : 1)}
+            placeholder={fields.password}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className={fieldClass}
+          />
+        </div>
+
+        {error && <p className="text-center text-xs text-destructive">{error}</p>}
+
+        <Button
+          type="submit"
+          disabled={busy}
+          className="h-auto w-full gap-2 rounded-xl px-4 py-2.5 text-sm"
+        >
+          {busy && <Spinner className="size-3.5" />}
+          {text.submit}
+        </Button>
+      </form>
+
+      {!hideModeSwitch && (
+        // A plain <button> and not `Button variant="link"`: this one sits *inside*
+        // a sentence, and the primitive is an inline-flex box with a height.
+        <p className="text-center text-xs text-muted-foreground">
+          {text.switchPrompt}{" "}
+          <button
+            type="button"
+            onClick={switchMode}
+            className="font-medium text-primary underline-offset-4 hover:underline"
+          >
+            {text.switchAction}
+          </button>
+        </p>
+      )}
+
+      {footer}
+    </div>
+  )
+}

package/src/components/auth/auth-layout.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+
+/* ─── AuthLayout ───────────────────────────────────────────────────────────
+   The page an auth screen sits in: a fixed dark brand panel on the left (gone
+   below `lg`), the form column on the right, and the two backgrounds that make
+   the left side look like something — the flame halo bleeding out of the bottom
+   corner and the dot grid over it.
+
+   The layout owns the *chrome* (the split, the panel, its backgrounds, the
+   `max-w-sm` column the form lives in); `AuthBrandPanel` owns the content that
+   goes in it. That seam is what lets an app keep the screen and change every
+   word on it, or drop the brand panel entirely (`brand` omitted → the form
+   centers on the whole page). */
+
+export interface AuthLayoutProps {
+  /** Left panel content — usually an `AuthBrandPanel`. Hidden below `lg`. */
+  brand?: ReactNode
+  /**
+   * Shown *above* the form below `lg`, where the brand panel is gone — usually
+   * an `AuthBrandMark variant="compact"`. Without it, small screens open
+   * straight on the form.
+   */
+  brandCompact?: ReactNode
+  /** The form column: `AuthForm`, or anything else you want centered there. */
+  children: ReactNode
+  className?: string
+  /** Reaches the dark panel (a different surface, another glow color…). */
+  brandClassName?: string
+  /** Reaches the form column (a wider container, a different background…). */
+  contentClassName?: string
+}
+
+export function AuthLayout({
+  brand,
+  brandCompact,
+  children,
+  className,
+  brandClassName,
+  contentClassName,
+}: AuthLayoutProps) {
+  return (
+    <div className={cn("flex min-h-screen font-sans antialiased", className)}>
+      {brand && (
+        <div
+          className={cn(
+            "relative hidden w-1/2 overflow-hidden border-r border-white/8 bg-zinc-950 p-12 lg:block",
+            brandClassName
+          )}
+        >
+          {/* Flame halo, bottom-left, bleeding out of the corner. */}
+          <div className="pointer-events-none absolute bottom-0 left-0 h-[500px] w-[500px] bg-primary/20 blur-[120px]" />
+          {/* Not the package's `dot-grid` utility: that one is warm and follows
+              the theme, and this panel is a *fixed* dark surface (same rule as
+              `--night` in /marketing) — it needs a white grid in both themes. */}
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px)",
+              backgroundSize: "32px 32px",
+            }}
+          />
+          {brand}
+        </div>
+      )}
+
+      <div
+        className={cn(
+          "flex flex-1 flex-col items-center justify-center bg-background px-6 py-12",
+          contentClassName
+        )}
+      >
+        {brandCompact && <div className="mb-10 lg:hidden">{brandCompact}</div>}
+        <div className="w-full max-w-sm space-y-6">{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/components/auth/auth-separator.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+
+/* The "or" between the provider buttons and the password form: two hairlines and
+   a word. Not the package's `Separator` — that one is a single `role="separator"`
+   rule, and this is a *labelled* divider, so it's a small composition of its own
+   rather than a variant that would have to bend `Separator`'s ARIA role. */
+
+export interface AuthSeparatorProps {
+  /** The word in the middle. @default "or" */
+  children?: ReactNode
+  className?: string
+}
+
+export function AuthSeparator({ children = "or", className }: AuthSeparatorProps) {
+  return (
+    <div className={cn("flex items-center gap-3 text-xs text-muted-foreground", className)}>
+      <div className="h-px flex-1 bg-border" />
+      {children}
+      <div className="h-px flex-1 bg-border" />
+    </div>
+  )
+}

package/src/components/auth/index.ts

@@ -0,0 +1,38 @@
+// The auth screen, in bricks.
+//
+// Re-exported from the package **root**, not from a sub-entry: nothing in here
+// knows a Spunto concept (the brand panel's every word is a prop, the form posts
+// nowhere), so it follows `CommandPalette` rather than `/workers` — see the
+// README, § "Domain components".
+//
+// Five bricks rather than one `<AuthScreen />`, because the parts are what
+// differ between apps: a product with three OAuth providers and no password,
+// an internal tool with a password and no panel, and a marketing signup that
+// wants its own headline all assemble the same pieces differently.
+//
+//   AuthLayout      — the split screen: dark brand panel, form column, backgrounds.
+//   AuthBrandPanel  — what fills the dark half (+ `AuthBrandMark`, its logo lockup).
+//   AuthForm        — email / password / display name, login ⇄ register, error, loading.
+//   OAuthButton     — "Continue with <provider>" (+ the `GoogleIcon`/`GitHubIcon` marks).
+//   AuthSeparator   — the labelled "or" between the two.
+//
+// Assembling them end to end: the showcase's "Créer sa page de login" guide.
+
+export { AuthLayout } from "./auth-layout"
+export type { AuthLayoutProps } from "./auth-layout"
+
+export { AuthBrandPanel, AuthBrandMark } from "./auth-brand-panel"
+export type { AuthBrandPanelProps, AuthBrandMarkProps } from "./auth-brand-panel"
+
+export { AuthForm, authFormCopy } from "./auth-form"
+export type { AuthFormProps, AuthFormCopy, AuthModeCopy, AuthFieldCopy } from "./auth-form"
+
+export { OAuthButton } from "./oauth-button"
+export type { OAuthButtonProps, OAuthProvider } from "./oauth-button"
+
+export { GoogleIcon, GitHubIcon } from "./oauth-icons"
+
+export { AuthSeparator } from "./auth-separator"
+export type { AuthSeparatorProps } from "./auth-separator"
+
+export type { AuthMode, AuthSubmitValues, AuthLinkProps, AuthLinkRender } from "./types"

package/src/components/auth/oauth-button.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+import { buttonVariants } from "../button-variants"
+import { GitHubIcon, GoogleIcon } from "./oauth-icons"
+import type { AuthLinkRender } from "./types"
+
+/* ─── OAuthButton ──────────────────────────────────────────────────────────
+   "Continue with <provider>", full width, above the separator.
+
+   It's the design system's `Button` in its `outline` register, only taller and
+   rounder than any of its sizes — an auth screen's two big targets (this one and
+   the submit) are 44 px pills, not 32 px toolbar buttons. That's a `className`
+   over `buttonVariants`, deliberately, rather than a new `size` on the primitive:
+   the shape belongs to this screen, not to buttons in general.
+
+   Going through `buttonVariants` (and not the `Button` component) is also what
+   makes the link case honest: an OAuth "button" is nearly always an `<a href>`
+   to the API's redirect route, and both cases must come out pixel-identical. */
+
+export type OAuthProvider = "google" | "github"
+
+const providers: Record<OAuthProvider, { label: string; icon: ReactNode }> = {
+  google: { label: "Continue with Google", icon: <GoogleIcon /> },
+  github: { label: "Continue with GitHub", icon: <GitHubIcon /> },
+}
+
+export interface OAuthButtonProps {
+  /** Picks the shipped icon and the default label. */
+  provider?: OAuthProvider
+  /** Overrides the provider's icon (or supplies one for a provider we don't ship). */
+  icon?: ReactNode
+  /** Overrides the label. Defaults to "Continue with <provider>". */
+  children?: ReactNode
+  /**
+   * Where the provider dance starts — an API route, not a client-side one
+   * (`/api/auth/login`). Set it and the button renders as an `<a>`.
+   */
+  href?: string
+  /** Alternative to `href` when the app opens the flow itself (a popup, a SDK call). */
+  onClick?: () => void
+  disabled?: boolean
+  /** `link` renders the anchor (a router link…); without it, a plain `<a>`. */
+  render?: { link?: AuthLinkRender }
+  className?: string
+}
+
+export function OAuthButton({
+  provider = "google",
+  icon,
+  children,
+  href,
+  onClick,
+  disabled,
+  render,
+  className,
+}: OAuthButtonProps) {
+  const preset = providers[provider]
+  const classes = cn(
+    buttonVariants({ variant: "outline" }),
+    "h-auto w-full gap-3 rounded-xl bg-card px-4 py-3 text-sm font-medium text-foreground",
+    className
+  )
+  const content = (
+    <>
+      {icon ?? preset?.icon}
+      {children ?? preset?.label}
+    </>
+  )
+
+  if (href && !disabled) {
+    const link = render?.link ?? ((props) => <a {...props} />)
+    return link({ href, className: classes, children: content })
+  }
+
+  return (
+    <button type="button" className={classes} onClick={onClick} disabled={disabled}>
+      {content}
+    </button>
+  )
+}

package/src/components/auth/oauth-icons.tsx

@@ -0,0 +1,53 @@
+import type { ComponentProps } from "react"
+
+import { cn } from "../../utils"
+
+/* The two marks that actually appear on an auth screen, shipped with the package
+   for the same reason `/devcontainer` ships its stack marks: a login button that
+   has to fetch its provider logo from a CDN is a login button that renders wrong
+   on a cold cache. Google's is drawn in its brand colors (its guidelines don't
+   allow recoloring it); GitHub's inherits `currentColor` like every other glyph. */
+
+export function GoogleIcon({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={cn("h-4 w-4 shrink-0", className)}
+      {...props}
+    >
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  )
+}
+
+export function GitHubIcon({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      className={cn("h-4 w-4 shrink-0", className)}
+      {...props}
+    >
+      <path d="M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2.17c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.5 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.2.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z" />
+    </svg>
+  )
+}

package/src/components/auth/types.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactElement } from "react"
+
+/** The two faces of one screen: signing in, or opening an account. */
+export type AuthMode = "login" | "register"
+
+/**
+ * What `AuthForm` hands back on submit. `name` only exists in `register` mode
+ * (and only when the display-name field is shown and filled).
+ *
+ * The package **never calls an API**: it collects, validates natively (`required`,
+ * `type="email"`, `minLength`) and gives the values back. Which endpoint they go
+ * to, what a session cookie is, and where to redirect afterwards are the app's.
+ */
+export interface AuthSubmitValues {
+  mode: AuthMode
+  email: string
+  password: string
+  name?: string
+}
+
+/**
+ * Props handed to the app's link component — spread them all.
+ *
+ * Same slot motif as `CommandPaletteLinkRender` and `WorkerCard`'s `render.link`:
+ * the package never imports `next/link`, so anything that navigates takes an
+ * `href` plus an optional renderer. Without one, it falls back to a plain `<a>`.
+ */
+export type AuthLinkProps = ComponentProps<"a"> & { href: string }
+export type AuthLinkRender = (props: AuthLinkProps) => ReactElement

package/src/index.ts

@@ -177,6 +177,37 @@ export type {
   CommandMenuLinkRender,
 } from "./components/command-menu"
 
+// Auth — the login/signup screen in bricks (layout, brand panel, form, OAuth
+// button, separator). Domain-free like the palette, hence its place in the root:
+// every word of it is a prop, and it neither fetches nor redirects. Assembling
+// them: the showcase's "Créer sa page de login" guide.
+export {
+  AuthLayout,
+  AuthBrandPanel,
+  AuthBrandMark,
+  AuthForm,
+  authFormCopy,
+  OAuthButton,
+  AuthSeparator,
+  GoogleIcon,
+  GitHubIcon,
+} from "./components/auth"
+export type {
+  AuthLayoutProps,
+  AuthBrandPanelProps,
+  AuthBrandMarkProps,
+  AuthFormProps,
+  AuthFormCopy,
+  AuthModeCopy,
+  AuthFieldCopy,
+  AuthMode,
+  AuthSubmitValues,
+  AuthLinkProps,
+  AuthLinkRender,
+  OAuthButtonProps,
+  OAuthProvider,
+} from "./components/auth"
+
 // Kbd — one keyboard cap, or a whole shortcut (`keys="mod+k"` → ⌘ K). Used by the
 // palette, exported on its own for anywhere else a shortcut needs drawing.
 export { Kbd } from "./components/kbd"

package/styles.css

@@ -351,6 +351,34 @@
   ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--muted-foreground) 30%, transparent); }
 }
 
+/* ─── Touch devices — no zoom-on-focus ───────────────────────────────────────
+ * iOS Safari (and other coarse-pointer browsers) zoom the whole page in the
+ * moment a form control smaller than 16px takes focus, then leaves the user
+ * to zoom back out by hand. Individual components already set `text-base`
+ * for this (Input, Textarea, the command palette's search field), but any
+ * caller passing its own `text-sm`/`text-xs` override — very common, since
+ * that's how a form matches its surrounding density on desktop — clobbers it
+ * through `tailwind-merge`. Deliberately unlayered (outside `@layer`): Tailwind
+ * utilities all live inside named layers, and an unlayered rule always wins
+ * the cascade over a layered one regardless of source order or specificity —
+ * so this holds no matter what class a consumer adds. */
+@media (any-pointer: coarse) {
+  input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="color"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"]
+    ),
+  textarea,
+  select {
+    font-size: 16px;
+  }
+}
+
 /* ─── Terminal — xterm.js scrollbar ──────────────────────────────────────────
  * Restyle xterm's own custom scrollbar (14px, square corners) to match the
  * thin/rounded one above. Its width/position are set inline by xterm's JS on