@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropData.module.css.js

@@ -0,0 +1,135 @@
+const e = "_status_1le2u_31", t = "_statusSm_1le2u_42", a = "_statusDot_1le2u_47", s = "_statusRing_1le2u_55", r = "_statusIcon_1le2u_61", _ = "_statusSvg_1le2u_67", o = "_meter_1le2u_82", u = "_meterSuccess_1le2u_92", l = "_meterCaption_1le2u_96", n = "_meterValue_1le2u_102", i = "_ring_1le2u_110", d = "_ringBand_1le2u_120", c = "_ringValue_1le2u_132", m = "_meterSignal_1le2u_140", b = "_signal_1le2u_144", C = "_signalBar_1le2u_152", v = "_signalBarOn_1le2u_158", w = "_signalValue_1le2u_162", y = "_summary_1le2u_170", g = "_summaryHead_1le2u_176", S = "_summaryStatus_1le2u_182", T = "_summaryTitle_1le2u_187", h = "_summaryDescription_1le2u_194", k = "_summaryBody_1le2u_201", B = "_summaryActions_1le2u_208", p = "_checklist_1le2u_216", A = "_checklistHead_1le2u_224", H = "_checklistTitleRow_1le2u_230", R = "_checklistTitle_1le2u_230", V = "_checklistCount_1le2u_244", D = "_review_1le2u_254", I = "_reviewRow_1le2u_259", M = "_reviewStacked_1le2u_263", f = "_reviewBody_1le2u_268", E = "_reviewWho_1le2u_276", F = "_reviewAvatar_1le2u_283", L = "_reviewName_1le2u_288", N = "_reviewMeta_1le2u_295", O = "_reviewTitle_1le2u_303", Q = "_reviewQuote_1le2u_310", W = "_reviewChips_1le2u_323", x = "_reviewActions_1le2u_330", j = "_board_1le2u_340", q = "_boardColumn_1le2u_354", z = "_boardColumnHead_1le2u_366", G = "_boardColumnTitle_1le2u_374", J = "_boardColumnCount_1le2u_385", K = "_boardColumnSummary_1le2u_386", P = "_boardList_1le2u_394", U = "_boardItem_1le2u_403", X = "_boardEmpty_1le2u_408", Y = "_boardCard_1le2u_421", Z = "_boardCardAction_1le2u_438", $ = "_boardCardTop_1le2u_452", ee = "_boardCardMeta_1le2u_459", te = "_boardCardHead_1le2u_465", ae = "_boardCardAvatar_1le2u_471", se = "_boardCardTitles_1le2u_476", re = "_boardCardTitle_1le2u_476", _e = "_boardCardSubtitle_1le2u_489", oe = "_boardCardBody_1le2u_495", ue = "_boardCardFooter_1le2u_500", le = {
+  status: e,
+  statusSm: t,
+  statusDot: a,
+  statusRing: s,
+  statusIcon: r,
+  statusSvg: _,
+  "status-neutral": "_status-neutral_1le2u_74",
+  "status-success": "_status-success_1le2u_75",
+  "status-warning": "_status-warning_1le2u_76",
+  "status-danger": "_status-danger_1le2u_77",
+  "status-info": "_status-info_1le2u_78",
+  meter: o,
+  meterSuccess: u,
+  meterCaption: l,
+  meterValue: n,
+  ring: i,
+  ringBand: d,
+  ringValue: c,
+  meterSignal: m,
+  signal: b,
+  signalBar: C,
+  signalBarOn: v,
+  signalValue: w,
+  summary: y,
+  summaryHead: g,
+  summaryStatus: S,
+  summaryTitle: T,
+  summaryDescription: h,
+  summaryBody: k,
+  summaryActions: B,
+  checklist: p,
+  checklistHead: A,
+  checklistTitleRow: H,
+  checklistTitle: R,
+  checklistCount: V,
+  review: D,
+  reviewRow: I,
+  reviewStacked: M,
+  reviewBody: f,
+  reviewWho: E,
+  reviewAvatar: F,
+  reviewName: L,
+  reviewMeta: N,
+  reviewTitle: O,
+  reviewQuote: Q,
+  reviewChips: W,
+  reviewActions: x,
+  board: j,
+  boardColumn: q,
+  boardColumnHead: z,
+  boardColumnTitle: G,
+  boardColumnCount: J,
+  boardColumnSummary: K,
+  boardList: P,
+  boardItem: U,
+  boardEmpty: X,
+  boardCard: Y,
+  boardCardAction: Z,
+  boardCardTop: $,
+  boardCardMeta: ee,
+  boardCardHead: te,
+  boardCardAvatar: ae,
+  boardCardTitles: se,
+  boardCardTitle: re,
+  boardCardSubtitle: _e,
+  boardCardBody: oe,
+  boardCardFooter: ue
+};
+export {
+  j as board,
+  Y as boardCard,
+  Z as boardCardAction,
+  ae as boardCardAvatar,
+  oe as boardCardBody,
+  ue as boardCardFooter,
+  te as boardCardHead,
+  ee as boardCardMeta,
+  _e as boardCardSubtitle,
+  re as boardCardTitle,
+  se as boardCardTitles,
+  $ as boardCardTop,
+  q as boardColumn,
+  J as boardColumnCount,
+  z as boardColumnHead,
+  K as boardColumnSummary,
+  G as boardColumnTitle,
+  X as boardEmpty,
+  U as boardItem,
+  P as boardList,
+  p as checklist,
+  V as checklistCount,
+  A as checklistHead,
+  R as checklistTitle,
+  H as checklistTitleRow,
+  le as default,
+  o as meter,
+  l as meterCaption,
+  m as meterSignal,
+  u as meterSuccess,
+  n as meterValue,
+  D as review,
+  x as reviewActions,
+  F as reviewAvatar,
+  f as reviewBody,
+  W as reviewChips,
+  N as reviewMeta,
+  L as reviewName,
+  Q as reviewQuote,
+  I as reviewRow,
+  M as reviewStacked,
+  O as reviewTitle,
+  E as reviewWho,
+  i as ring,
+  d as ringBand,
+  c as ringValue,
+  b as signal,
+  C as signalBar,
+  v as signalBarOn,
+  w as signalValue,
+  e as status,
+  a as statusDot,
+  r as statusIcon,
+  s as statusRing,
+  t as statusSm,
+  _ as statusSvg,
+  y as summary,
+  B as summaryActions,
+  k as summaryBody,
+  h as summaryDescription,
+  g as summaryHead,
+  S as summaryStatus,
+  T as summaryTitle
+};
+//# sourceMappingURL=BackdropData.module.css.js.map

package/dist/components/Backdrop/BackdropData.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropData.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Backdrop/BackdropDisplay.d.ts

@@ -0,0 +1,122 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+/** The one action shape every Backdrop pattern takes. */
+interface BackdropDisplayAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+/**
+ * `row` (36px): the tile that leads a row or a card's head row (next-step hero
+ * and action list). `empty` (48px): the empty state's tile (ADR-0017, D12).
+ * One size per job; the 40, 44 and 56 drawn on some boards are out of date.
+ */
+export type BackdropIconTileSize = 'row' | 'empty';
+/**
+ * `square` (default) is the grey rounded tile. `circle` is the outcome mark at
+ * the head of BackdropResult (Batch 2 · Flows), the same box drawn round.
+ */
+export type BackdropIconTileShape = 'square' | 'circle';
+/**
+ * `neutral` (default) is the panel grey with ink. `success` and `danger` take
+ * the status pill's ground and text colours (ADR-0017, D7), so an outcome reads
+ * in the same green and red as its pill.
+ */
+export type BackdropIconTileTone = 'neutral' | 'success' | 'danger';
+export interface BackdropIconTileProps {
+    /** The icon: 18px in a `row` tile, 20px in an `empty` tile (ADR-0017, D17). Decorative. */
+    children: ReactNode;
+    size?: BackdropIconTileSize;
+    shape?: BackdropIconTileShape;
+    tone?: BackdropIconTileTone;
+    className?: string;
+}
+/** Decorative: the text beside it names the thing, so the tile is not announced. */
+export declare function BackdropIconTile({ children, size, shape, tone, className }: BackdropIconTileProps): import("react").JSX.Element;
+export interface BackdropEmptyStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** 20px icon, drawn in the 48px tile. */
+    icon: ReactNode;
+    /** "No posts published yet". */
+    title: ReactNode;
+    /** One line of help: "Approve a post to see how it does." */
+    body: ReactNode;
+    /** At most one, and the screen's orange one when present (ADR-0017, D12). */
+    action?: BackdropDisplayAction;
+    linkComponent?: ElementType;
+}
+export declare function BackdropEmptyState({ icon, title, body, action, linkComponent, className, ...rest }: BackdropEmptyStateProps): import("react").JSX.Element;
+/** `success`: a figure that is good news (money saved). The label and caption stay muted. */
+export type BackdropStatTone = 'default' | 'success';
+interface BackdropStatBase {
+    /** "Expected", "Meetings booked". */
+    label: ReactNode;
+    /** The figure: "€3,200", "5 of 7". Formatted by the caller; drawn with tabular numerals. */
+    value: ReactNode;
+    /** One fact under it: "2 open opportunities". */
+    caption?: ReactNode;
+    tone?: BackdropStatTone;
+    className?: string;
+}
+/** Bare on the page: label, number, caption, no box. */
+export interface BackdropStatInlineProps extends BackdropStatBase {
+    appearance?: 'inline';
+    selected?: never;
+}
+/**
+ * A flat card (ADR-0017, D3: a hairline, no shadow). Give it `selected`
+ * (true or false) and it becomes a toggle button with `aria-pressed`, drawn
+ * with the ink ring when on: the tile that picks what a chart below shows.
+ * Stage A: the markup only; the press handler is Stage B's.
+ */
+export interface BackdropStatTileProps extends BackdropStatBase {
+    appearance: 'tile';
+    selected?: boolean;
+}
+export type BackdropStatProps = BackdropStatInlineProps | BackdropStatTileProps;
+export declare function BackdropStat(props: BackdropStatProps): import("react").JSX.Element;
+export interface BackdropStatRowProps {
+    /** BackdropStat elements, all of one appearance. */
+    children: ReactNode;
+    /** `inline` stats sit 48px apart; `tile` stats share the width equally, 16px apart. */
+    appearance?: 'inline' | 'tile';
+    /** Inline only: close the row with a hairline (a stat strip above a list). */
+    divided?: boolean;
+    /** Names the group for assistive tech ("This month", "Choose a measure"). */
+    label?: string;
+    className?: string;
+}
+export declare function BackdropStatRow({ children, appearance, divided, label, className }: BackdropStatRowProps): import("react").JSX.Element;
+/**
+ * The status pill's tones that a callout uses, plus the grey `neutral` most
+ * boards draw. `warning` is the pill's sand, never red or orange: red is
+ * `danger`, kept for something broken or blocked, and orange is the primary
+ * button (Jamal at the set 2 gate, 11 Nov).
+ */
+export type BackdropCalloutTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface BackdropCalloutBase {
+    tone?: BackdropCalloutTone;
+    /** 18px in the box, 16px in a note (ADR-0017, D17). Decorative. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** The tinted block: an icon, an optional short title, the text, an optional single action. */
+export interface BackdropCalloutBoxProps extends BackdropCalloutBase {
+    appearance?: 'box';
+    /** "Why you", "Key point". Short. */
+    title?: ReactNode;
+    /** One or two sentences. */
+    children: ReactNode;
+    /** At most one, drawn as an outline button at the block's end. */
+    action?: BackdropDisplayAction;
+    linkComponent?: ElementType;
+}
+/** The inline note: an icon and one muted caption line, no box ("Card payment by Stripe"). */
+export interface BackdropCalloutNoteProps extends BackdropCalloutBase {
+    appearance: 'note';
+    children: ReactNode;
+    title?: never;
+    action?: never;
+    linkComponent?: never;
+}
+export type BackdropCalloutProps = BackdropCalloutBoxProps | BackdropCalloutNoteProps;
+export declare function BackdropCallout(props: BackdropCalloutProps): import("react").JSX.Element;
+export {};

package/dist/components/Backdrop/BackdropDisplay.js

@@ -0,0 +1,80 @@
+import { jsxs as d, jsx as t, Fragment as f } from "react/jsx-runtime";
+import e from "./BackdropDisplay.module.css.js";
+import { cx as o } from "./cx.js";
+import { BackdropButton as N } from "./BackdropButton.js";
+function v({ children: l, size: n = "row", shape: s = "square", tone: a = "neutral", className: c }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: o(
+        e.tile,
+        n === "empty" ? e.tileEmpty : e.tileRow,
+        s === "circle" && e.tileCircle,
+        a === "success" && e.tileSuccess,
+        a === "danger" && e.tileDanger,
+        c
+      ),
+      "aria-hidden": "true",
+      children: l
+    }
+  );
+}
+function C({ icon: l, title: n, body: s, action: a, linkComponent: c, className: r, ...i }) {
+  return /* @__PURE__ */ d("section", { className: o(e.empty, r), ...i, children: [
+    /* @__PURE__ */ t(v, { size: "empty", className: e.emptyTile, children: l }),
+    /* @__PURE__ */ t("h2", { className: e.emptyTitle, children: n }),
+    /* @__PURE__ */ t("p", { className: e.emptyBody, children: s }),
+    a && /* @__PURE__ */ t("div", { className: e.emptyAction, children: /* @__PURE__ */ t(N, { variant: "primary", size: "lg", href: a.href, linkComponent: c, onClick: a.onClick, children: a.label }) })
+  ] });
+}
+function T(l) {
+  const { label: n, value: s, caption: a, tone: c = "default", className: r } = l, i = l.appearance === "tile", m = i && l.selected !== void 0, u = /* @__PURE__ */ d(f, { children: [
+    /* @__PURE__ */ t("span", { className: e.statLabel, children: n }),
+    /* @__PURE__ */ t("span", { className: o(e.statValue, c === "success" && e.statValueSuccess), children: s }),
+    a !== void 0 && /* @__PURE__ */ t("span", { className: e.statCaption, children: a })
+  ] }), h = o(e.stat, i && e.statTile, m && l.selected && e.statSelected, r);
+  return m ? /* @__PURE__ */ t("button", { type: "button", className: o(h, e.statButton), "aria-pressed": l.selected, children: u }) : /* @__PURE__ */ t("div", { className: h, children: u });
+}
+function b({ children: l, appearance: n = "inline", divided: s = !1, label: a, className: c }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      role: a ? "group" : void 0,
+      "aria-label": a,
+      className: o(e.statRow, n === "tile" ? e.statRowTile : e.statRowInline, s && n === "inline" && e.statRowDivided, c),
+      children: l
+    }
+  );
+}
+const p = {
+  neutral: e.toneNeutral,
+  info: e.toneInfo,
+  success: e.toneSuccess,
+  warning: e.toneWarning,
+  danger: e.toneDanger
+};
+function w(l) {
+  const { tone: n = "neutral", icon: s, children: a, className: c } = l;
+  if (l.appearance === "note")
+    return /* @__PURE__ */ d("p", { className: o(e.note, p[n], c), "data-tone": n, children: [
+      s !== void 0 && /* @__PURE__ */ t("span", { className: e.noteIcon, "aria-hidden": "true", children: s }),
+      /* @__PURE__ */ t("span", { className: e.noteText, children: a })
+    ] });
+  const { title: r, action: i, linkComponent: m } = l;
+  return /* @__PURE__ */ d("div", { role: "note", className: o(e.callout, p[n], c), "data-tone": n, children: [
+    s !== void 0 && /* @__PURE__ */ t("span", { className: e.calloutIcon, "aria-hidden": "true", children: s }),
+    /* @__PURE__ */ d("div", { className: e.calloutText, children: [
+      r !== void 0 && /* @__PURE__ */ t("span", { className: e.calloutTitle, children: r }),
+      /* @__PURE__ */ t("span", { className: e.calloutBody, children: a })
+    ] }),
+    i && /* @__PURE__ */ t("span", { className: e.calloutAction, children: /* @__PURE__ */ t(N, { variant: "outline", size: "md", href: i.href, linkComponent: m, onClick: i.onClick, children: i.label }) })
+  ] });
+}
+export {
+  w as BackdropCallout,
+  C as BackdropEmptyState,
+  v as BackdropIconTile,
+  T as BackdropStat,
+  b as BackdropStatRow
+};
+//# sourceMappingURL=BackdropDisplay.js.map

package/dist/components/Backdrop/BackdropDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropDisplay.js","sources":["../../../src/components/Backdrop/BackdropDisplay.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport styles from './BackdropDisplay.module.css'\nimport { cx } from './cx'\nimport { BackdropButton } from './BackdropButton'\n\n/*\n * Batch 1 set 2 · Display. The page parts that show a fact rather than take an\n * action. Stage A: static and presentational. Nothing here owns an event\n * handler; actions take the package's one action shape ({ label, onClick?,\n * href? }, as BackdropNextStepCard and BackdropAvailability do) so wiring them\n * in Stage B is uniform.\n *\n *   Icon tile    a grey rounded square holding an icon. Two sizes, one per job.\n *   Empty state  the one empty-state design (ADR-0017, D12).\n *   Stat         label, big number, caption; inline or as a (selectable) tile.\n *   Callout      a tinted block with an icon and text; or a one-line note.\n */\n\n/** The one action shape every Backdrop pattern takes. */\ninterface BackdropDisplayAction {\n  label: string\n  onClick?: () => void\n  href?: string\n}\n\n/* ── Icon tile ─────────────────────────────────────────────────────────── */\n\n/**\n * `row` (36px): the tile that leads a row or a card's head row (next-step hero\n * and action list). `empty` (48px): the empty state's tile (ADR-0017, D12).\n * One size per job; the 40, 44 and 56 drawn on some boards are out of date.\n */\nexport type BackdropIconTileSize = 'row' | 'empty'\n/**\n * `square` (default) is the grey rounded tile. `circle` is the outcome mark at\n * the head of BackdropResult (Batch 2 · Flows), the same box drawn round.\n */\nexport type BackdropIconTileShape = 'square' | 'circle'\n/**\n * `neutral` (default) is the panel grey with ink. `success` and `danger` take\n * the status pill's ground and text colours (ADR-0017, D7), so an outcome reads\n * in the same green and red as its pill.\n */\nexport type BackdropIconTileTone = 'neutral' | 'success' | 'danger'\n\nexport interface BackdropIconTileProps {\n  /** The icon: 18px in a `row` tile, 20px in an `empty` tile (ADR-0017, D17). Decorative. */\n  children: ReactNode\n  size?: BackdropIconTileSize\n  shape?: BackdropIconTileShape\n  tone?: BackdropIconTileTone\n  className?: string\n}\n\n/** Decorative: the text beside it names the thing, so the tile is not announced. */\nexport function BackdropIconTile({ children, size = 'row', shape = 'square', tone = 'neutral', className }: BackdropIconTileProps) {\n  return (\n    <span\n      className={cx(\n        styles.tile,\n        size === 'empty' ? styles.tileEmpty : styles.tileRow,\n        shape === 'circle' && styles.tileCircle,\n        tone === 'success' && styles.tileSuccess,\n        tone === 'danger' && styles.tileDanger,\n        className,\n      )}\n      aria-hidden=\"true\"\n    >\n      {children}\n    </span>\n  )\n}\n\n/* ── Empty state ───────────────────────────────────────────────────────── */\n\nexport interface BackdropEmptyStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {\n  /** 20px icon, drawn in the 48px tile. */\n  icon: ReactNode\n  /** \"No posts published yet\". */\n  title: ReactNode\n  /** One line of help: \"Approve a post to see how it does.\" */\n  body: ReactNode\n  /** At most one, and the screen's orange one when present (ADR-0017, D12). */\n  action?: BackdropDisplayAction\n  linkComponent?: ElementType\n}\n\n/*\n * ADR-0017, D12: a 48px icon tile, a 20px title, one line of help, at most one\n * action. BackdropAvailability's `empty` state renders through this, so the\n * design exists once. An h2, not an h1: an empty state sits under the page's\n * own title.\n */\nexport function BackdropEmptyState({ icon, title, body, action, linkComponent, className, ...rest }: BackdropEmptyStateProps) {\n  return (\n    <section className={cx(styles.empty, className)} {...rest}>\n      <BackdropIconTile size=\"empty\" className={styles.emptyTile}>\n        {icon}\n      </BackdropIconTile>\n      <h2 className={styles.emptyTitle}>{title}</h2>\n      <p className={styles.emptyBody}>{body}</p>\n      {action && (\n        <div className={styles.emptyAction}>\n          <BackdropButton variant=\"primary\" size=\"lg\" href={action.href} linkComponent={linkComponent} onClick={action.onClick}>\n            {action.label}\n          </BackdropButton>\n        </div>\n      )}\n    </section>\n  )\n}\n\n/* ── Stat ──────────────────────────────────────────────────────────────── */\n\n/** `success`: a figure that is good news (money saved). The label and caption stay muted. */\nexport type BackdropStatTone = 'default' | 'success'\n\ninterface BackdropStatBase {\n  /** \"Expected\", \"Meetings booked\". */\n  label: ReactNode\n  /** The figure: \"€3,200\", \"5 of 7\". Formatted by the caller; drawn with tabular numerals. */\n  value: ReactNode\n  /** One fact under it: \"2 open opportunities\". */\n  caption?: ReactNode\n  tone?: BackdropStatTone\n  className?: string\n}\n\n/** Bare on the page: label, number, caption, no box. */\nexport interface BackdropStatInlineProps extends BackdropStatBase {\n  appearance?: 'inline'\n  selected?: never\n}\n\n/**\n * A flat card (ADR-0017, D3: a hairline, no shadow). Give it `selected`\n * (true or false) and it becomes a toggle button with `aria-pressed`, drawn\n * with the ink ring when on: the tile that picks what a chart below shows.\n * Stage A: the markup only; the press handler is Stage B's.\n */\nexport interface BackdropStatTileProps extends BackdropStatBase {\n  appearance: 'tile'\n  selected?: boolean\n}\n\nexport type BackdropStatProps = BackdropStatInlineProps | BackdropStatTileProps\n\nexport function BackdropStat(props: BackdropStatProps) {\n  const { label, value, caption, tone = 'default', className } = props\n  const tile = props.appearance === 'tile'\n  const selectable = tile && props.selected !== undefined\n  const body = (\n    <>\n      <span className={styles.statLabel}>{label}</span>\n      <span className={cx(styles.statValue, tone === 'success' && styles.statValueSuccess)}>{value}</span>\n      {caption !== undefined && <span className={styles.statCaption}>{caption}</span>}\n    </>\n  )\n  const classes = cx(styles.stat, tile && styles.statTile, selectable && props.selected && styles.statSelected, className)\n  if (selectable) {\n    return (\n      <button type=\"button\" className={cx(classes, styles.statButton)} aria-pressed={props.selected}>\n        {body}\n      </button>\n    )\n  }\n  return <div className={classes}>{body}</div>\n}\n\nexport interface BackdropStatRowProps {\n  /** BackdropStat elements, all of one appearance. */\n  children: ReactNode\n  /** `inline` stats sit 48px apart; `tile` stats share the width equally, 16px apart. */\n  appearance?: 'inline' | 'tile'\n  /** Inline only: close the row with a hairline (a stat strip above a list). */\n  divided?: boolean\n  /** Names the group for assistive tech (\"This month\", \"Choose a measure\"). */\n  label?: string\n  className?: string\n}\n\nexport function BackdropStatRow({ children, appearance = 'inline', divided = false, label, className }: BackdropStatRowProps) {\n  return (\n    <div\n      role={label ? 'group' : undefined}\n      aria-label={label}\n      className={cx(styles.statRow, appearance === 'tile' ? styles.statRowTile : styles.statRowInline, divided && appearance === 'inline' && styles.statRowDivided, className)}\n    >\n      {children}\n    </div>\n  )\n}\n\n/* ── Callout ───────────────────────────────────────────────────────────── */\n\n/**\n * The status pill's tones that a callout uses, plus the grey `neutral` most\n * boards draw. `warning` is the pill's sand, never red or orange: red is\n * `danger`, kept for something broken or blocked, and orange is the primary\n * button (Jamal at the set 2 gate, 11 Nov).\n */\nexport type BackdropCalloutTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'\n\ninterface BackdropCalloutBase {\n  tone?: BackdropCalloutTone\n  /** 18px in the box, 16px in a note (ADR-0017, D17). Decorative. */\n  icon?: ReactNode\n  className?: string\n}\n\n/** The tinted block: an icon, an optional short title, the text, an optional single action. */\nexport interface BackdropCalloutBoxProps extends BackdropCalloutBase {\n  appearance?: 'box'\n  /** \"Why you\", \"Key point\". Short. */\n  title?: ReactNode\n  /** One or two sentences. */\n  children: ReactNode\n  /** At most one, drawn as an outline button at the block's end. */\n  action?: BackdropDisplayAction\n  linkComponent?: ElementType\n}\n\n/** The inline note: an icon and one muted caption line, no box (\"Card payment by Stripe\"). */\nexport interface BackdropCalloutNoteProps extends BackdropCalloutBase {\n  appearance: 'note'\n  children: ReactNode\n  title?: never\n  action?: never\n  linkComponent?: never\n}\n\nexport type BackdropCalloutProps = BackdropCalloutBoxProps | BackdropCalloutNoteProps\n\nconst calloutToneClass: Record<BackdropCalloutTone, string | undefined> = {\n  neutral: styles.toneNeutral,\n  info: styles.toneInfo,\n  success: styles.toneSuccess,\n  warning: styles.toneWarning,\n  danger: styles.toneDanger,\n}\n\n/*\n * Static content, so role=\"note\" rather than a live region: a callout is on\n * the page when it loads and is never announced over what the person is doing.\n * The tone is colour plus the caller's icon; the words carry the meaning.\n */\nexport function BackdropCallout(props: BackdropCalloutProps) {\n  const { tone = 'neutral', icon, children, className } = props\n  if (props.appearance === 'note') {\n    return (\n      <p className={cx(styles.note, calloutToneClass[tone], className)} data-tone={tone}>\n        {icon !== undefined && (\n          <span className={styles.noteIcon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className={styles.noteText}>{children}</span>\n      </p>\n    )\n  }\n  const { title, action, linkComponent } = props\n  return (\n    <div role=\"note\" className={cx(styles.callout, calloutToneClass[tone], className)} data-tone={tone}>\n      {icon !== undefined && (\n        <span className={styles.calloutIcon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className={styles.calloutText}>\n        {title !== undefined && <span className={styles.calloutTitle}>{title}</span>}\n        <span className={styles.calloutBody}>{children}</span>\n      </div>\n      {action && (\n        <span className={styles.calloutAction}>\n          <BackdropButton variant=\"outline\" size=\"md\" href={action.href} linkComponent={linkComponent} onClick={action.onClick}>\n            {action.label}\n          </BackdropButton>\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["BackdropIconTile","children","size","shape","tone","className","jsx","cx","styles","BackdropEmptyState","icon","title","body","action","linkComponent","rest","jsxs","BackdropButton","BackdropStat","props","label","value","caption","tile","selectable","Fragment","classes","BackdropStatRow","appearance","divided","calloutToneClass","BackdropCallout"],"mappings":"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"}

package/dist/components/Backdrop/BackdropDisplay.module.css.js

@@ -0,0 +1,80 @@
+const t = "_tile_u4rcs_7", s = "_tileRow_u4rcs_17", c = "_tileEmpty_u4rcs_22", e = "_tileCircle_u4rcs_29", o = "_tileSuccess_u4rcs_33", _ = "_tileDanger_u4rcs_38", n = "_empty_u4rcs_5", l = "_emptyTile_u4rcs_5", a = "_emptyTitle_u4rcs_61", u = "_emptyBody_u4rcs_70", i = "_emptyAction_u4rcs_77", r = "_stat_u4rcs_85", y = "_statLabel_u4rcs_94", p = "_statValue_u4rcs_103", T = "_statValueSuccess_u4rcs_112", m = "_statCaption_u4rcs_116", d = "_statTile_u4rcs_123", w = "_statButton_u4rcs_132", R = "_statSelected_u4rcs_145", I = "_statRow_u4rcs_149", S = "_statRowInline_u4rcs_154", g = "_statRowDivided_u4rcs_158", B = "_statRowTile_u4rcs_163", D = "_callout_u4rcs_173", x = "_calloutIcon_u4rcs_184", A = "_calloutText_u4rcs_196", C = "_calloutTitle_u4rcs_204", V = "_calloutBody_u4rcs_210", f = "_calloutAction_u4rcs_215", b = "_note_u4rcs_221", v = "_noteIcon_u4rcs_232", E = "_noteText_u4rcs_244", L = "_toneNeutral_u4rcs_249", N = "_toneInfo_u4rcs_254", W = "_toneSuccess_u4rcs_259", h = "_toneWarning_u4rcs_264", j = "_toneDanger_u4rcs_269", k = {
+  tile: t,
+  tileRow: s,
+  tileEmpty: c,
+  tileCircle: e,
+  tileSuccess: o,
+  tileDanger: _,
+  empty: n,
+  emptyTile: l,
+  emptyTitle: a,
+  emptyBody: u,
+  emptyAction: i,
+  stat: r,
+  statLabel: y,
+  statValue: p,
+  statValueSuccess: T,
+  statCaption: m,
+  statTile: d,
+  statButton: w,
+  statSelected: R,
+  statRow: I,
+  statRowInline: S,
+  statRowDivided: g,
+  statRowTile: B,
+  callout: D,
+  calloutIcon: x,
+  calloutText: A,
+  calloutTitle: C,
+  calloutBody: V,
+  calloutAction: f,
+  note: b,
+  noteIcon: v,
+  noteText: E,
+  toneNeutral: L,
+  toneInfo: N,
+  toneSuccess: W,
+  toneWarning: h,
+  toneDanger: j
+};
+export {
+  D as callout,
+  f as calloutAction,
+  V as calloutBody,
+  x as calloutIcon,
+  A as calloutText,
+  C as calloutTitle,
+  k as default,
+  n as empty,
+  i as emptyAction,
+  u as emptyBody,
+  l as emptyTile,
+  a as emptyTitle,
+  b as note,
+  v as noteIcon,
+  E as noteText,
+  r as stat,
+  w as statButton,
+  m as statCaption,
+  y as statLabel,
+  I as statRow,
+  g as statRowDivided,
+  S as statRowInline,
+  B as statRowTile,
+  R as statSelected,
+  d as statTile,
+  p as statValue,
+  T as statValueSuccess,
+  t as tile,
+  e as tileCircle,
+  _ as tileDanger,
+  c as tileEmpty,
+  s as tileRow,
+  o as tileSuccess,
+  j as toneDanger,
+  N as toneInfo,
+  L as toneNeutral,
+  W as toneSuccess,
+  h as toneWarning
+};
+//# sourceMappingURL=BackdropDisplay.module.css.js.map

package/dist/components/Backdrop/BackdropDisplay.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropDisplay.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Backdrop/BackdropFields.d.ts

@@ -0,0 +1,122 @@
+import { FieldsetHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+export interface BackdropFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** "Company name". Programmatically tied to the control inside. */
+    label: ReactNode;
+    /** The control: a BackdropInput, BackdropTextarea, BackdropSelect or BackdropSearchField. */
+    children: ReactNode;
+    /** The muted suffix after the label: "optional" (drawn "· optional"). */
+    optionalLabel?: string;
+    /** One line of help under the control. Hidden while there is an error. */
+    hint?: ReactNode;
+    /** What is wrong, in the danger colour with the warning icon. Replaces the hint and marks the control invalid. */
+    error?: ReactNode;
+    /** The control's id. Generated when omitted. */
+    controlId?: string;
+}
+export declare function BackdropField({ label, children, optionalLabel, hint, error, controlId, className, ...rest }: BackdropFieldProps): import("react").JSX.Element;
+export interface BackdropInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** A 16px icon before the text (ADR-0017, D17). Decorative. */
+    leadingIcon?: ReactNode;
+    /** A unit after the text: "€", "staff", "per channel". Read out with the field as its description. */
+    suffix?: ReactNode;
+    /** 44px instead of 40, for focus flows only (ADR-0017, D9). */
+    focusFlow?: boolean;
+}
+export declare function BackdropInput({ leadingIcon, suffix, focusFlow, className, type, ...rest }: BackdropInputProps): import("react").JSX.Element;
+/**
+ * `md` (default) is the form textarea. `lg` is the free-writing box at the
+ * head of a create page (Content "New post", Off-market "New introduction"):
+ * 20/32 text, radius 16, roomier padding (Batch 4, N27).
+ */
+export type BackdropTextareaSize = 'md' | 'lg';
+export interface BackdropTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: BackdropTextareaSize;
+    /**
+     * Content inside the box's ring, under the text: an "Add a link or file"
+     * text link, a block of pasted details. With it, or with `size="lg"`, the
+     * ring moves from the <textarea> to a box around it; `className` then goes
+     * on that box and every other prop still reaches the <textarea>.
+     */
+    footer?: ReactNode;
+}
+/** The input's ring, radius and padding. Three rows at least; it grows by hand (resize: vertical). */
+export declare function BackdropTextarea({ className, rows, size, footer, ...rest }: BackdropTextareaProps): import("react").JSX.Element;
+/**
+ * `field` is the 40px form select, drawn exactly like the input. `pill` is the
+ * list filter ("All types", "Last 12 weeks"): the filter chip's 34px height and
+ * full radius, so it sits level in a row of chips (ADR-0017, D11).
+ */
+export type BackdropSelectAppearance = 'field' | 'pill';
+export interface BackdropSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    appearance?: BackdropSelectAppearance;
+    /** 44px instead of 40, for focus flows only. `field` only. */
+    focusFlow?: boolean;
+    /** <option> elements. */
+    children: ReactNode;
+}
+export declare function BackdropSelect({ appearance, focusFlow, className, children, ...rest }: BackdropSelectProps): import("react").JSX.Element;
+export interface BackdropSearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * The field's accessible name when it has no visible label ("Search
+     * companies"). Inside a BackdropField the field's label names it instead.
+     */
+    label?: string;
+    /**
+     * Draws the clear button (×) at the end, named by this: "Clear search".
+     * Stage A: markup only. The press is wired in Stage B.
+     */
+    clearLabel?: string;
+    /**
+     * `lg` (default) is the 40px input (D9). `md` is 34, with 14/20 text, for
+     * the bar above a list, where it sits beside the 34px filter button, chips
+     * and pill select (Jamal at the Batch 3 gate, 11 Nov). Form fields stay 40.
+     */
+    size?: 'lg' | 'md';
+}
+/** An in-page search box: the input's box with a 16px lens before the text. */
+export declare function BackdropSearchField({ label, clearLabel, size, className, ...rest }: BackdropSearchFieldProps): import("react").JSX.Element;
+export interface BackdropSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
+    /** "Email me when a meeting is booked". 14/20 500, right of the track. */
+    label: ReactNode;
+    /** One muted line under the label. */
+    description?: ReactNode;
+}
+export declare function BackdropSwitch({ label, description, className, id, ...rest }: BackdropSwitchProps): import("react").JSX.Element;
+interface BackdropRadioGroupBase extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'children'> {
+    /** The question: "Who can see this?". Drawn as the field label (13/18 500). */
+    legend: ReactNode;
+    /** The radios' shared `name`, handed to every radio inside. */
+    name?: string;
+    /** One line of help under the options. Hidden while there is an error. */
+    hint?: ReactNode;
+    /** What is wrong. Replaces the hint and marks every radio invalid. */
+    error?: ReactNode;
+    children: ReactNode;
+}
+export type BackdropRadioGroupProps = BackdropRadioGroupBase;
+/** Plain radios, one size, stacked, in a fieldset whose legend asks the question. */
+export declare function BackdropRadioGroup(props: BackdropRadioGroupProps): import("react").JSX.Element;
+export interface BackdropRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** "Only my team". 14/20 500. */
+    label: ReactNode;
+    /** One muted line under the label. */
+    description?: ReactNode;
+}
+/** One plain radio: an 18px circle (the checkbox's size), ink dot when chosen. */
+export declare function BackdropRadio({ label, description, className, id, ...rest }: BackdropRadioProps): import("react").JSX.Element;
+export interface BackdropRadioCardGroupProps extends BackdropRadioGroupBase {
+    /** 1 stacks the cards; 2 or more lays them out that many across, equal widths. */
+    columns?: number;
+}
+/** Radio cards in a fieldset: stacked by default, or `columns` across. */
+export declare function BackdropRadioCardGroup({ columns, ...props }: BackdropRadioCardGroupProps): import("react").JSX.Element;
+export interface BackdropRadioCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'title'> {
+    /** "Pay as you go". 14/20 600. */
+    title: ReactNode;
+    /** One or two muted lines. */
+    description?: ReactNode;
+    /** An 18px icon, drawn in the 36px row tile (BackdropIconTile). Decorative. */
+    icon?: ReactNode;
+}
+export declare function BackdropRadioCard({ title, description, icon, className, id, ...rest }: BackdropRadioCardProps): import("react").JSX.Element;
+export {};