@spunto/design-system 0.16.0 → 0.18.0

package/README.md

@@ -63,9 +63,20 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
     `Alert` (+`AlertTitle`/`AlertDescription`, +`alertVariants`) — an **inline, persistent,
     declarative** status banner, the counterpart to the ephemeral imperative `toast()`.
   - _Overlays_ (plug into the `SpuntoProvider` umbrella) — `Dialog`, `AlertDialog`
-    (a confirmation variant, non-dismissible), `Tooltip`. Their portals render into
-    the provider's overlay container; `Tooltip`'s shared delay group is mounted by the
-    provider too.
+    (a confirmation variant, non-dismissible), `Sheet`, `Tooltip`. Their portals render
+    into the provider's overlay container; `Tooltip`'s shared delay group is mounted by
+    the provider too.
+  - _Sheet_ — `Sheet` (+`SheetTrigger`/`SheetClose`/`SheetContent`/`SheetHeader`/
+    `SheetFooter`/`SheetTitle`/`SheetDescription`), the same Base UI dialog entering from
+    an edge. `side` (4) decides the edge, `size` (`sm`…`full`) how far it comes in — two
+    props rather than one bundle of `data-[side=right]:`-prefixed classes, precisely so
+    `className` stays the layout escape hatch (an app widens a panel or lays it out in two
+    columns without `!important`).
+  - _Table_ — `Table` (+`TableHeader`/`TableBody`/`TableFooter`/`TableRow`/`TableHead`/
+    `TableCell`/`TableCaption`). **Presentational only**: no sorting, no pagination, no
+    column model — apps already own that logic and disagree on it; what they were
+    duplicating is the markup and the token choices. `containerClassName` reaches the
+    scroll container (max-height, border, sticky-header context).
   - _CommandPalette_ — `CommandPalette` (+`CommandPaletteInput`/`List`/`Group`/`Item`/
     `Empty`/`Loading`/`Separator`/`Footer`/`Trigger`), the ⌘K palette: an input, groups,
     items, and a jump. **Domain-free**, hence its place in the root entry — it knows
@@ -80,6 +91,32 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
     `value`/`onValueChange` + `filter={null}`. Navigation is `href` + `render.link`, never
     `next/link` — same rule as `WorkerCard`. Not virtualized: a few hundred items stay
     fluid (a non-matching item renders nothing), beyond that filter server-side.
+  - _CommandMenu_ — `CommandMenu` (+`CommandMenuInput`/`List`/`Group`/`Item`/`Empty`/
+    `Loading`/`Separator`), the palette's vocabulary **inline**: a Base UI `Popover`
+    anchored to an element or a **virtual element** (a caret rect), which never moves
+    focus (`initialFocus`/`finalFocus` off, no backdrop, non-modal) and claims ↑ ↓ ↵ Esc
+    on `document` in the **capture** phase, before the field underneath. That's what a
+    "/" menu inside a block editor needs and what the dialog-based palette can't do
+    without losing the caret — hence a separate component rather than a `modal={false}`
+    flag: the contract is the opposite one. Enter is only claimed when an item is
+    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.16.0",
+  "version": "0.18.0",
   "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"