@afterauth/primitives

Portable, themeable React content primitives from AfterAuth. The first release ships the Disclosure primitive — an admonition-style, GitHub-flavored callout that doubles as a collapsible FAQ item.

The components carry no framework runtime: React is a peer dependency and there are no Next.js imports, so the package drops into any React app.

Install

npm i @afterauth/primitives
# react >= 18 must already be installed (peer dependency)

Use

Import the stylesheet once at a single boundary (root layout or app entry), then render the component anywhere:

import "@afterauth/primitives/styles.css";
import { Disclosure } from "@afterauth/primitives";

export function Faq() {
  return (
    <>
      <Disclosure title="Is access really earned?" variant="question" defaultOpen>
        <p>Yes — the first item opens by default; the rest stay collapsed.</p>
      </Disclosure>
      <Disclosure title="What does it cost?" variant="question">
        <p>Collapsed until the reader opens it.</p>
      </Disclosure>
    </>
  );
}

Props

| Prop | Type | Default | Notes | | ------------- | ------------------------------------------------- | -------------- | -------------------------------------- | | title | string | — | Summary text (required). | | variant | PostCalloutVariant | "field-note" | Accent + icon. "question" for FAQs. | | defaultOpen | boolean | false | Open on first render. | | open | boolean | — | Controlled override of defaultOpen. | | spacing | "normal" \| "compact" | "normal" | "compact" tightens FAQ stacks. | | mode | "auto" \| "light" \| "dark" | "auto" | Pin a token mode on the subtree. |

Theming

Every visible value resolves through an --aap-* token that reads a host token first and falls back to a baked default. To theme the primitives to your palette, define the host tokens (on :root, body, or any wrapper):

:root {
  --callout-question: #2d5bff;        /* accent */
  --callout-question-tint: #eef2ff;   /* panel fill */
  --ink: #0e1116;                     /* summary text */
  --font-mono: "Berkeley Mono", ui-monospace, monospace;
}

When a host token is defined it wins automatically — the fallback only applies when it is undefined, so the package never clobbers your :root and there is no import-order war. With no host tokens at all, light defaults render standalone.

Overridable host tokens: --callout-{default,note,tip,question,important,warning,caution} and their -tint variants, --border, --border-strong, --paper, --paper-2, --ink, --slate-2, --slate-3, --blueprint-ring, --font-mono. For dark mode, supply dark values for these tokens under your own dark selector.

License

MIT