@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/pricing/Pricing.tsx

@@ -0,0 +1,174 @@
+/**
+ * Pricing — the open-core tier-card family. `PricingTierCard` is one hairline
+ * card: name, mono price line, soft description, ✓-marked feature list
+ * (check-marker grammar in styles/pricing.css), and a CTA slot; `accent`
+ * tints the featured tier (two-color mix, also styles/pricing.css). The
+ * `variant` picks a density: "compact" is the reference/catalog voice,
+ * "hero" the marketing-page voice (digiquant contact tiers). `Pricing` lays
+ * cards out on the two-up grid with an optional hairline trust line;
+ * `PrecisionTable` is the per-unit price table riding the tearsheet
+ * hairline-row, mono-numeral voice. Every name, price, feature and CTA
+ * arrives as a prop — nothing product-specific baked in. Static display
+ * components; no client state.
+ */
+import type { ElementType, ReactNode } from "react";
+
+const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
+
+export interface PricingTierCardProps {
+  /** Tier name, e.g. "Self-hosted". */
+  name: ReactNode;
+  /** Element rendered for the name (default "p"; marketing pages want "h3"). */
+  nameAs?: ElementType;
+  /** Mono sub-line under the name ("$40/mo", "open core · free", "contact us"). */
+  priceLine?: ReactNode;
+  /** Soft body copy under the name/price line. */
+  description?: ReactNode;
+  /** ✓-marked feature rows — the check-marker grammar. */
+  features?: ReactNode[];
+  /** CTA slot — the caller brings its own button/anchor dressing (btn-*). */
+  cta?: ReactNode;
+  /** Featured tier: accent-tinted border + wash (styles/pricing.css). */
+  accent?: boolean;
+  /** Density: "compact" (reference/catalog) or "hero" (marketing page). */
+  variant?: "compact" | "hero";
+  className?: string;
+}
+
+/** One pricing tier card. Composable alone (apps own their grid) or via <Pricing/>. */
+export function PricingTierCard({
+  name,
+  nameAs: NameTag = "p",
+  priceLine,
+  description,
+  features,
+  cta,
+  accent = false,
+  variant = "compact",
+  className,
+}: PricingTierCardProps) {
+  const hero = variant === "hero";
+  return (
+    <div
+      className={cx(
+        "border",
+        hero ? "rounded-none px-[1.8rem] py-[2rem]" : "rounded-none p-[1.1rem]",
+        accent ? "pricing-tier-accent" : "border-hair bg-surface",
+        className,
+      )}
+    >
+      <NameTag className={hero ? "text-[1.4rem] font-semibold tracking-[-0.02em]" : "text-[1rem]"}>
+        {name}
+      </NameTag>
+      {priceLine != null ? (
+        <p
+          className={cx(
+            "mt-[0.4rem] font-mono text-ink-soft",
+            hero ? "text-[0.95rem]" : "text-[0.78rem]",
+          )}
+        >
+          {priceLine}
+        </p>
+      ) : null}
+      {description != null ? (
+        <p className="mt-[0.4rem] text-[0.85rem] text-ink-soft">{description}</p>
+      ) : null}
+      {features && features.length > 0 ? (
+        <ul
+          className={cx(
+            "m-0 flex list-none flex-col gap-[0.55rem] p-0 text-[0.9rem] text-ink-soft",
+            hero ? "mt-[1.3rem]" : "mt-[0.8rem]",
+          )}
+        >
+          {features.map((feature, i) => (
+            <li key={i} className="pricing-feature flex items-start gap-[0.55rem]">
+              {feature}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {cta != null ? <div className={hero ? "mt-[1.6rem]" : "mt-[0.9rem]"}>{cta}</div> : null}
+    </div>
+  );
+}
+
+export interface PricingProps {
+  /** Tier cards, left to right. */
+  tiers: PricingTierCardProps[];
+  /** Hairline-ruled trust line under the grid ("Free for 30 days…"). */
+  footnote?: ReactNode;
+  /** Density forwarded to every tier card (a tier's own `variant` wins). */
+  variant?: "compact" | "hero";
+  /** Extra classes on the grid (e.g. "mt-[1.2rem]"). */
+  className?: string;
+}
+
+/** Tier cards on the reference two-up grid, plus the optional trust line. */
+export function Pricing({ tiers, footnote, variant = "compact", className }: PricingProps) {
+  return (
+    <>
+      <div className={cx("grid grid-cols-2 gap-[0.9rem] max-[640px]:grid-cols-1", className)}>
+        {tiers.map((tier, i) => (
+          <PricingTierCard key={i} variant={variant} {...tier} />
+        ))}
+      </div>
+      {footnote != null ? (
+        <p className="mt-[0.9rem] border-t border-hair pt-[0.9rem] text-[0.82rem] text-ink-mute">
+          {footnote}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+export interface PrecisionTableProps {
+  /** Column headers; the last column right-aligns (numerals live there). */
+  columns: ReactNode[];
+  /** Row cells, one array per row; the first cell carries full ink. */
+  rows: ReactNode[][];
+  /** Extra classes on the table (e.g. "mt-[1.2rem]"). */
+  className?: string;
+}
+
+/** Per-unit price table — hairline rows, mono numerals, right-aligned tail column. */
+export function PrecisionTable({ columns, rows, className }: PrecisionTableProps) {
+  const last = columns.length - 1;
+  return (
+    <table className={cx("w-full border-collapse font-mono text-[0.76rem]", className)}>
+      <thead>
+        <tr>
+          {columns.map((column, i) => (
+            <th
+              key={i}
+              scope="col"
+              className={cx(
+                "border-b border-hair pb-[0.5rem] text-[0.6rem] uppercase tracking-[0.08em] text-ink-mute",
+                i === last ? "text-end" : "text-start",
+              )}
+            >
+              {column}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, ri) => (
+          <tr key={ri}>
+            {row.map((cell, ci) => (
+              <td
+                key={ci}
+                className={cx(
+                  "border-b border-hair py-[0.55rem]",
+                  ci === 0 ? "text-ink" : "text-ink-soft",
+                  ci === last && "text-end",
+                )}
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/components/pricing/PricingMatrix.tsx

@@ -0,0 +1,219 @@
+"use client";
+/**
+ * PricingMatrix — the grouped feature-comparison matrix (Graphite grammar):
+ * tier column headers with a mono price line + CTA slot, an optional billing
+ * toggle, uppercase group rows, plain-word cells ("✓ · Limited · Advanced";
+ * a "—" cell reads muted), and one continuous accent-tinted band down the
+ * `popular` tier (header + body). Billing-dependent prices arrive precomputed
+ * (`priceMonthly` / `priceAnnual`) so server components can pass plain nodes;
+ * the toggle only picks between them. Tier names, prices, CTAs, toggle and
+ * popular labels are all props — nothing product-specific baked in. Static
+ * structure is token-backed utilities; the toggle switch (ancestor `.on`
+ * state + two-color mix + knob translate) lives in styles/pricing.css.
+ */
+import { useId, useState, type ReactNode } from "react";
+
+const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
+
+export interface PricingMatrixTier {
+  name: ReactNode;
+  /** Billing-independent price line ("Free", "Let's talk"). Wins over the pair. */
+  price?: ReactNode;
+  /** Price line while the toggle is off (monthly billing). */
+  priceMonthly?: ReactNode;
+  /** Price line while the toggle is on (annual billing). */
+  priceAnnual?: ReactNode;
+  /** CTA slot — the caller brings its own button/anchor dressing (btn-*). */
+  cta?: ReactNode;
+  /** Tinted column band + accent top rule + the `popularLabel` flag. */
+  popular?: boolean;
+}
+
+export interface PricingMatrixRow {
+  label: ReactNode;
+  /** One cell per tier, in tier order; a cell that is exactly "—" renders muted. */
+  cells: ReactNode[];
+}
+
+export interface PricingMatrixGroup {
+  label: ReactNode;
+  rows: PricingMatrixRow[];
+}
+
+export interface PricingMatrixProps {
+  tiers: PricingMatrixTier[];
+  groups: PricingMatrixGroup[];
+  /** Billing-toggle label ("Annual billing (20% off)"); omit to hide the toggle. */
+  toggleLabel?: ReactNode;
+  /** Initial toggle state. Default true (annual). */
+  defaultAnnual?: boolean;
+  /** Flag under the popular tier's CTA (e.g. "Most popular"). */
+  popularLabel?: ReactNode;
+  /** Accessible name for the empty feature-label column header. */
+  featureColumnLabel?: string;
+  /** Extra classes on the toggle row (e.g. "mt-[1.2rem]"). */
+  toggleClassName?: string;
+  /** Extra classes on the table's scroll wrapper (e.g. "mt-4"). */
+  className?: string;
+}
+
+/** Grouped tier-comparison table with an optional annual-billing toggle. */
+export function PricingMatrix({
+  tiers,
+  groups,
+  toggleLabel,
+  defaultAnnual = true,
+  popularLabel,
+  featureColumnLabel = "Feature",
+  toggleClassName,
+  className,
+}: PricingMatrixProps) {
+  const [annual, setAnnual] = useState(defaultAnnual);
+  const toggleLabelId = useId();
+  const priceOf = (tier: PricingMatrixTier) =>
+    tier.price ?? (annual ? tier.priceAnnual : tier.priceMonthly);
+
+  return (
+    <>
+      {toggleLabel != null ? (
+        <div className={cx("flex items-center gap-[0.6rem]", toggleClassName)}>
+          <button
+            type="button"
+            className={`pm-toggle${annual ? " on" : ""}`}
+            role="switch"
+            aria-checked={annual}
+            aria-labelledby={toggleLabelId}
+            onClick={() => setAnnual((v) => !v)}
+          >
+            <span className="pm-knob" aria-hidden="true" />
+          </button>
+          <span id={toggleLabelId} className="font-mono text-[0.72rem] text-ink-soft">
+            {toggleLabel}
+          </span>
+        </div>
+      ) : null}
+
+      {/* Narrow screens cannot hold four columns, so each tier is its own
+          card. The comparison table returns at md, where 640px fits. */}
+      <div className="grid gap-[0.85rem] md:hidden">
+        {tiers.map((tier, i) => (
+          <section
+            key={i}
+            className={cx(
+              "border border-hair bg-surface px-[1rem] py-[1.05rem]",
+              tier.popular && "border-t-2 border-t-accent bg-accent/6",
+            )}
+          >
+            <h3 className="m-0 text-[1.05rem] font-medium text-ink">{tier.name}</h3>
+            <p className="mt-[0.2rem] mb-[0.75rem] font-mono text-[0.8rem] text-ink-soft">
+              {priceOf(tier)}
+            </p>
+            <div className="[&_a]:flex [&_a]:w-full [&_a]:justify-center">{tier.cta}</div>
+            {tier.popular && popularLabel != null ? (
+              <p className="mt-[0.5rem] mb-0 font-mono text-[0.58rem] uppercase tracking-[0.08em] text-accent">
+                {popularLabel}
+              </p>
+            ) : null}
+            {groups.map((group, gi) => (
+              <div key={gi} className="mt-[1rem]">
+                <p className="m-0 font-mono text-[0.62rem] font-normal uppercase tracking-[0.1em] text-ink-mute">
+                  {group.label}
+                </p>
+                <dl className="m-0">
+                  {group.rows.map((row, ri) => (
+                    <div key={ri} className="border-b border-hair/60 py-[0.5rem]">
+                      <dt className="text-[0.78rem] text-ink-mute">{row.label}</dt>
+                      <dd
+                        className={cx(
+                          "m-0 mt-[0.12rem] font-mono text-[0.86rem] text-ink",
+                          row.cells[i] === "—" && "text-ink-mute",
+                        )}
+                      >
+                        {row.cells[i]}
+                      </dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+            ))}
+          </section>
+        ))}
+      </div>
+
+      <div
+        tabIndex={0}
+        role="region"
+        aria-label="Pricing comparison"
+        className={cx("hidden overflow-x-auto md:block", className)}
+      >
+        <table className="w-full min-w-[640px] border-collapse text-[0.82rem]">
+          <thead>
+            <tr>
+              <th
+                scope="col"
+                aria-label={featureColumnLabel}
+                className="border-b border-hair pt-[0.8rem] pe-[0.9rem] pb-[1rem] ps-0 text-start align-top"
+              />
+              {tiers.map((tier, i) => (
+                <th
+                  scope="col"
+                  key={i}
+                  className={cx(
+                    "border-b border-hair px-[0.9rem] pt-[0.8rem] pb-[1rem] text-start align-top",
+                    tier.popular && "pm-popular rounded-none border-t-2 border-t-accent bg-accent/6",
+                  )}
+                >
+                  <span className="block text-[0.95rem]">{tier.name}</span>
+                  <span className="mt-[0.25rem] mb-[0.7rem] block font-mono text-[0.78rem] text-ink-soft">
+                    {priceOf(tier)}
+                  </span>
+                  {tier.cta}
+                  {tier.popular && popularLabel != null ? (
+                    <span className="mt-[0.5rem] block font-mono text-[0.58rem] uppercase tracking-[0.08em] text-accent">
+                      {popularLabel}
+                    </span>
+                  ) : null}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          {groups.map((group, gi) => (
+            <tbody key={gi}>
+              <tr>
+                <th
+                  scope="rowgroup"
+                  colSpan={tiers.length + 1}
+                  className="px-0 pt-[1rem] pb-[0.4rem] text-start font-mono text-[0.62rem] font-normal uppercase tracking-[0.1em] text-ink-mute"
+                >
+                  {group.label}
+                </th>
+              </tr>
+              {group.rows.map((row, ri) => (
+                <tr key={ri}>
+                  <th
+                    scope="row"
+                    className="border-b border-hair/60 py-[0.55rem] pe-[0.9rem] ps-0 text-start font-normal text-ink-soft"
+                  >
+                    {row.label}
+                  </th>
+                  {row.cells.map((cell, ci) => (
+                    <td
+                      key={ci}
+                      className={cx(
+                        "border-b border-hair/60 px-[0.9rem] py-[0.55rem] font-mono text-[0.74rem]",
+                        cell === "—" && "text-ink-mute",
+                        tiers[ci]?.popular && "pm-popular bg-accent/6",
+                      )}
+                    >
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          ))}
+        </table>
+      </div>
+    </>
+  );
+}

package/src/components/prose/index.ts

@@ -0,0 +1,2 @@
+export { Mono, PageHead, RuledList, RuledRow } from "./prose";
+export type { MonoProps, PageHeadProps, RuledListProps, RuledRowProps } from "./prose";

package/src/components/prose/prose.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+
+/**
+ * Prose atoms — the shared grammar for the long-form company / legal pages
+ * (`/about`, `/team`, `/security`, `/services`, `/legal/*`).
+ * Promoted verbatim from `apps/digithings-web/app/_company/prose.tsx` (D1,
+ * #4429) so the shape is authored once and assembled by every site instead of
+ * living app-locally.
+ *
+ * **Utilities only.** These emit no site/app CSS class — the reference canon
+ * imports neither `@digithings-ai/design/site/site.css` nor an app sheet — so the
+ * exact values of the legacy `.section` / `.wrap` / `.kicker` / `.hero-title`
+ * grammar are reproduced with token-backed utilities (source: `site.css`):
+ *
+ *   .section     `padding: clamp(4rem,9vw,7.5rem) 0` → `pt-[clamp(4rem,9vw,7.5rem)]`
+ *                 (the old call site added `pb-0`, so only the top half survives)
+ *   .wrap        → `w-full max-w-[var(--wrap)] mx-auto px-[var(--gutter)] relative z-[1]`
+ *   .kicker      → `font-mono text-[0.8rem] tracking-[0.02em] text-accent`
+ *   .hero-title  → `font-display font-normal text-[clamp(2.8rem,6.4vw,5rem)]
+ *                   leading-[1.02] tracking-[-0.02em] mt-[1.4rem] mb-[1.2rem]
+ *                   max-w-[16ch] [&_em]:italic [&_em]:text-accent`
+ *
+ * Server components — no hooks, no state. The consuming app still needs a
+ * Tailwind `@source` line for this directory because the parts carry
+ * utilities (Tailwind does not scan package sources on its own).
+ */
+
+export type MonoProps = { children: ReactNode };
+
+/** Inline code. The site reset styles no bare `code` element, so the mono face
+ *  has to be asked for explicitly; `0.92em` keeps the mono x-height in line
+ *  with the surrounding body copy. */
+export function Mono({ children }: MonoProps) {
+  return <code className="font-mono text-[0.92em] text-ink">{children}</code>;
+}
+
+export type PageHeadProps = {
+  /** The `//` mono eyebrow above the title. */
+  kicker: string;
+  /** The page title; `<em>` renders italic + accent. */
+  title: ReactNode;
+  /** The lede paragraph under the title. */
+  children: ReactNode;
+};
+
+/** The standing long-form page opener: `//` kicker, display title, one lede
+ *  paragraph. Mirrors the landing hero's shape at subpage scale. */
+export function PageHead({ kicker, title, children }: PageHeadProps) {
+  return (
+    <section className="pt-[clamp(4rem,9vw,7.5rem)]">
+      <div className="relative z-[1] mx-auto w-full max-w-[var(--wrap)] px-[var(--gutter)]">
+        <span className="font-mono text-[0.8rem] tracking-[0.02em] text-accent">{kicker}</span>
+        <h1 className="mt-[1.4rem] mb-[1.2rem] max-w-[16ch] font-display text-[clamp(2.8rem,6.4vw,5rem)] font-normal leading-[1.02] tracking-[-0.02em] [&_em]:italic [&_em]:text-accent">
+          {title}
+        </h1>
+        <p className="max-w-[64ch] text-[1.08rem] leading-[1.7] text-ink-soft">{children}</p>
+      </div>
+    </section>
+  );
+}
+
+export type RuledRowProps = {
+  /** The mono lead cell — a file, env var, rule or term the body describes. */
+  term: ReactNode;
+  children: ReactNode;
+};
+
+/** A hairline-ruled definition row — the shape used for control lists,
+ *  compatibility lists, residual-risk lists and gate lists. `term` is mono
+ *  (it names a file, an env var or a rule); the body is sans. */
+export function RuledRow({ term, children }: RuledRowProps) {
+  return (
+    <li className="grid gap-[0.35rem] border-t border-hair py-[1rem] last:border-b sm:grid-cols-[15rem_1fr] sm:gap-[1.5rem]">
+      <span className="font-mono text-[0.86rem] leading-[1.5] text-ink">{term}</span>
+      <span className="text-[0.9rem] leading-[1.65] text-ink-soft">{children}</span>
+    </li>
+  );
+}
+
+export type RuledListProps = { children: ReactNode; className?: string };
+
+/** The list wrapper for `RuledRow` — resets the marker and collapses the gap
+ *  so the hairlines butt against each other. */
+export function RuledList({ children, className }: RuledListProps) {
+  return <ul className={[className, "m-0 grid list-none gap-0 p-0"].filter(Boolean).join(" ")}>{children}</ul>;
+}