@boost33/ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,104 @@
+const t = "_popover_18gyp_5", o = "_anchor_18gyp_35", _ = "_placement_18gyp_40", n = "_menuList_18gyp_54", e = "_menuItem_18gyp_62", s = "_divider_18gyp_67", g = "_row_18gyp_74", a = "_rowHighlighted_18gyp_98", i = "_rowStatic_18gyp_111", d = "_rowIcon_18gyp_117", p = "_rowLabel_18gyp_127", c = "_rowTrailing_18gyp_132", y = "_segmented_18gyp_143", r = "_segment_18gyp_143", l = "_segmentedLg_18gyp_175", w = "_segmentIcon_18gyp_187", m = "_scrim_18gyp_199", L = "_contained_18gyp_210", h = "_top_18gyp_214", b = "_dialog_18gyp_219", u = "_dialogHeader_18gyp_236", H = "_dialogTitle_18gyp_244", I = "_dialogBody_18gyp_253", v = "_dialogHeaderLeading_18gyp_263", C = "_dialogLeading_18gyp_272", T = "_dialogHeaderSettings_18gyp_284", k = "_settingsBody_18gyp_296", B = "_sectionNav_18gyp_302", S = "_sectionList_18gyp_311", A = "_section_18gyp_302", x = "_settingsContent_18gyp_354", f = "_settingsContentPadding_18gyp_362", D = "_dialogFooter_18gyp_367", F = "_toastRegion_18gyp_387", N = "_toast_18gyp_387", P = "_toastDanger_18gyp_429", R = "_toastIcon_18gyp_433", j = "_toastText_18gyp_437", q = "_toastAction_18gyp_441", z = "_toastClose_18gyp_451", E = {
+  popover: t,
+  "boost33-backdrop-pop": "_boost33-backdrop-pop_18gyp_1",
+  "w-help": "_w-help_18gyp_24",
+  "w-account": "_w-account_18gyp_25",
+  "w-tokens": "_w-tokens_18gyp_26",
+  "w-mission": "_w-mission_18gyp_27",
+  "w-allApps": "_w-allApps_18gyp_28",
+  "w-auto": "_w-auto_18gyp_29",
+  "pad-menu": "_pad-menu_18gyp_31",
+  "pad-card": "_pad-card_18gyp_32",
+  "pad-none": "_pad-none_18gyp_33",
+  anchor: o,
+  placement: _,
+  "side-bottom": "_side-bottom_18gyp_45",
+  "align-start": "_align-start_18gyp_46",
+  "align-end": "_align-end_18gyp_47",
+  "side-right": "_side-right_18gyp_48",
+  menuList: n,
+  menuItem: e,
+  divider: s,
+  row: g,
+  rowHighlighted: a,
+  rowStatic: i,
+  rowIcon: d,
+  rowLabel: p,
+  rowTrailing: c,
+  segmented: y,
+  segment: r,
+  segmentedLg: l,
+  segmentIcon: w,
+  scrim: m,
+  contained: L,
+  top: h,
+  dialog: b,
+  "dw-form": "_dw-form_18gyp_233",
+  "dw-search": "_dw-search_18gyp_234",
+  dialogHeader: u,
+  dialogTitle: H,
+  dialogBody: I,
+  dialogHeaderLeading: v,
+  dialogLeading: C,
+  "dw-settings": "_dw-settings_18gyp_277",
+  dialogHeaderSettings: T,
+  settingsBody: k,
+  sectionNav: B,
+  sectionList: S,
+  section: A,
+  settingsContent: x,
+  settingsContentPadding: f,
+  dialogFooter: D,
+  toastRegion: F,
+  toast: N,
+  "boost33-backdrop-toast": "_boost33-backdrop-toast_18gyp_1",
+  toastDanger: P,
+  toastIcon: R,
+  toastText: j,
+  toastAction: q,
+  toastClose: z
+};
+export {
+  o as anchor,
+  L as contained,
+  E as default,
+  b as dialog,
+  I as dialogBody,
+  D as dialogFooter,
+  u as dialogHeader,
+  v as dialogHeaderLeading,
+  T as dialogHeaderSettings,
+  C as dialogLeading,
+  H as dialogTitle,
+  s as divider,
+  e as menuItem,
+  n as menuList,
+  _ as placement,
+  t as popover,
+  g as row,
+  a as rowHighlighted,
+  d as rowIcon,
+  p as rowLabel,
+  i as rowStatic,
+  c as rowTrailing,
+  m as scrim,
+  A as section,
+  S as sectionList,
+  B as sectionNav,
+  r as segment,
+  w as segmentIcon,
+  y as segmented,
+  l as segmentedLg,
+  k as settingsBody,
+  x as settingsContent,
+  f as settingsContentPadding,
+  N as toast,
+  q as toastAction,
+  z as toastClose,
+  P as toastDanger,
+  R as toastIcon,
+  F as toastRegion,
+  j as toastText,
+  h as top
+};
+//# sourceMappingURL=BackdropOverlays.module.css.js.map

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

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

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

@@ -0,0 +1,73 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+/** The package's link-or-button action shape. */
+export interface BackdropPageAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+export interface BackdropBackLinkProps {
+    /** Where back leads, named by the page it returns to: "Opportunities". */
+    label: string;
+    /** A link by default. Without `href` it renders as a button (Stage B wires `onClick`). */
+    href?: string;
+    onClick?: () => void;
+    /** The element the link renders through, for a router's link (ADR-0011). */
+    linkComponent?: ElementType;
+    className?: string;
+}
+/** "← Opportunities" above a detail page's title. One icon, always `arrow-left`. */
+export declare function BackdropBackLink({ label, href, onClick, linkComponent: Link, className }: BackdropBackLinkProps): import("react").JSX.Element;
+/** `page` is 32px (--backdrop-text-page); `hero` is 40px, for the Hub greeting and focus flows only (ADR-0017, D1). */
+export type BackdropPageHeaderSize = 'page' | 'hero';
+export interface BackdropPageHeaderProps {
+    /** The page's name. Renders as the page's one <h1>. */
+    title: ReactNode;
+    /** Defaults to `page`. `hero` only for the Hub greeting and focus flows. */
+    size?: BackdropPageHeaderSize;
+    /** One fact under the title: "Atelier Nord · Furniture & fit-out · Lyon". */
+    fact?: ReactNode;
+    /** Trailing actions, at the right of the title row. */
+    actions?: ReactNode;
+    /** A detail page's way back, drawn above the title with BackdropBackLink. */
+    back?: BackdropPageAction;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropPageHeader({ title, size, fact, actions, back, linkComponent, className }: BackdropPageHeaderProps): import("react").JSX.Element;
+export interface BackdropSectionHeaderProps {
+    /** The section's name: "Campaigns". */
+    label: ReactNode;
+    /** A short count after the label: "3 of 4", "12". Muted, outside the heading. */
+    count?: ReactNode;
+    /** A trailing link: "View all". Drawn as BackdropTextLink. */
+    action?: BackdropPageAction;
+    /** A trailing fact instead of, or before, the link: "Updated 2 h ago". */
+    meta?: ReactNode;
+    /** The heading level. 2 under a page title, 3 inside a section. Size does not change. */
+    level?: 2 | 3;
+    /** A hairline below. Off by default, as most Final boards draw none (Jamal at the set 2 gate, 11 Nov). */
+    divider?: boolean;
+    /** An id for the heading, so a region can name itself by it (BackdropSettingsSection's `aria-labelledby`). */
+    headingId?: string;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropSectionHeader({ label, count, action, meta, level, divider, headingId, linkComponent, className }: BackdropSectionHeaderProps): import("react").JSX.Element;
+/**
+ * ADR-0017, D3: `flat` has a hairline edge; `raised` a ring and one shadow.
+ * There is no third edge. `panel` (Batch 3) has no edge at all: the panel grey
+ * fill alone, for an aside that sits beside the page's content rather than on
+ * it (Brokers offer commission card, Financing application "Ready" card).
+ */
+export type BackdropCardSurface = 'flat' | 'raised' | 'panel';
+/** `none` 0 (the content owns its padding, e.g. a list whose rows pad themselves), `sm` 16, `md` 20, `lg` 24. */
+export type BackdropCardPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface BackdropCardProps extends HTMLAttributes<HTMLElement> {
+    surface?: BackdropCardSurface;
+    padding?: BackdropCardPadding;
+    /** The element to render: `div` by default; `section` or `article` when the card is a region of its own. */
+    as?: 'div' | 'section' | 'article' | 'li';
+    children?: ReactNode;
+}
+/** A white card at radius 16 (ADR-0017, D2). Draws a surface only: layout inside is the caller's. */
+export declare function BackdropCard({ surface, padding, as: Element, className, children, ...rest }: BackdropCardProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropPage.js

@@ -0,0 +1,65 @@
+import { jsx as n, jsxs as s, Fragment as f } from "react/jsx-runtime";
+import e from "./BackdropPage.module.css.js";
+import { cx as o } from "./cx.js";
+import { BackdropTextLink as k } from "./BackdropButton.js";
+const N = () => /* @__PURE__ */ s(
+  "svg",
+  {
+    "aria-hidden": "true",
+    focusable: "false",
+    className: e.backIcon,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ n("path", { d: "M5 12l14 0" }),
+      /* @__PURE__ */ n("path", { d: "M5 12l6 6" }),
+      /* @__PURE__ */ n("path", { d: "M5 12l6 -6" })
+    ]
+  }
+);
+function v({ label: d, href: a, onClick: r, linkComponent: i = "a", className: l }) {
+  const c = /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ n(N, {}),
+    /* @__PURE__ */ n("span", { children: d })
+  ] });
+  return a !== void 0 ? /* @__PURE__ */ n(i, { href: a, onClick: r, className: o(e.back, l), children: c }) : /* @__PURE__ */ n("button", { type: "button", onClick: r, className: o(e.back, l), children: c });
+}
+function x({ title: d, size: a = "page", fact: r, actions: i, back: l, linkComponent: c, className: t }) {
+  return /* @__PURE__ */ s("header", { className: o(e.header, t), children: [
+    l && /* @__PURE__ */ n(v, { label: l.label, href: l.href, onClick: l.onClick, linkComponent: c }),
+    /* @__PURE__ */ s("div", { className: e.headerRow, children: [
+      /* @__PURE__ */ s("div", { className: e.headings, children: [
+        /* @__PURE__ */ n("h1", { className: o(e.title, a === "hero" && e.titleHero), children: d }),
+        r != null && /* @__PURE__ */ n("p", { className: e.fact, children: r })
+      ] }),
+      i != null && /* @__PURE__ */ n("div", { className: e.actions, children: i })
+    ] })
+  ] });
+}
+function L({ label: d, count: a, action: r, meta: i, level: l = 2, divider: c = !1, headingId: t, linkComponent: h, className: m }) {
+  const p = l === 3 ? "h3" : "h2", u = i != null || r !== void 0;
+  return /* @__PURE__ */ s("div", { className: o(e.section, c && e.sectionDivider, m), children: [
+    /* @__PURE__ */ s("div", { className: e.sectionLead, children: [
+      /* @__PURE__ */ n(p, { id: t, className: e.sectionTitle, children: d }),
+      a != null && /* @__PURE__ */ n("span", { className: e.sectionCount, children: a })
+    ] }),
+    u && /* @__PURE__ */ s("div", { className: e.sectionTrailing, children: [
+      i != null && /* @__PURE__ */ n("span", { className: e.sectionMeta, children: i }),
+      r && /* @__PURE__ */ n(k, { href: r.href, onClick: r.onClick, linkComponent: h, children: r.label })
+    ] })
+  ] });
+}
+function H({ surface: d = "flat", padding: a = "md", as: r = "div", className: i, children: l, ...c }) {
+  return /* @__PURE__ */ n(r, { className: o(e.card, e[`card-${d}`], a !== "none" && e[`pad-${a}`], i), ...c, children: l });
+}
+export {
+  v as BackdropBackLink,
+  H as BackdropCard,
+  x as BackdropPageHeader,
+  L as BackdropSectionHeader
+};
+//# sourceMappingURL=BackdropPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropPage.js","sources":["../../../src/components/Backdrop/BackdropPage.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport styles from './BackdropPage.module.css'\nimport { cx } from './cx'\nimport { BackdropTextLink } from './BackdropButton'\n\n/*\n * The parts every page body is built from, inside the content sheet:\n *\n *   Page header     the page's title (ADR-0017, D1), an optional fact line,\n *                   trailing actions, and on a detail page a back link above.\n *   Back link       \"← Opportunities\": the way back up from a detail page.\n *   Section header  a section's label, an optional count, an optional trailing\n *                   link or fact, and a hairline below.\n *   Card            the two card surfaces (ADR-0017, D3) at radius 16 (D2).\n *\n * Stage A: presentational. Links take the package's action shape\n * ({ label, onClick?, href? }, as BackdropNextStepCard and BackdropAvailability\n * do) and a `linkComponent` for a router's link, so wiring is uniform later.\n *\n * Separate from the 0.8 PageHeader (src/components/PageHeader), which four live\n * products render and whose approved baselines this must not move. It borrows\n * that component's semantics only: a <header> holding the page's one <h1>,\n * with the actions after the heading in reading order.\n */\n\n/** The package's link-or-button action shape. */\nexport interface BackdropPageAction {\n  label: string\n  onClick?: () => void\n  href?: string\n}\n\n/* Tabler `arrow-left` (MIT), the `back` meaning in backdrop-icons.ts (ADR-0017,\n   D18). Drawn here, not passed in, so every back link carries the same one\n   icon. 16px at stroke 2 (D17). Decorative: the link's words name it. */\nconst ArrowLeft = () => (\n  <svg\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    className={styles.backIcon}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M5 12l14 0\" />\n    <path d=\"M5 12l6 6\" />\n    <path d=\"M5 12l6 -6\" />\n  </svg>\n)\n\n/* ── Back link ─────────────────────────────────────────────────────────── */\n\nexport interface BackdropBackLinkProps {\n  /** Where back leads, named by the page it returns to: \"Opportunities\". */\n  label: string\n  /** A link by default. Without `href` it renders as a button (Stage B wires `onClick`). */\n  href?: string\n  onClick?: () => void\n  /** The element the link renders through, for a router's link (ADR-0011). */\n  linkComponent?: ElementType\n  className?: string\n}\n\n/** \"← Opportunities\" above a detail page's title. One icon, always `arrow-left`. */\nexport function BackdropBackLink({ label, href, onClick, linkComponent: Link = 'a', className }: BackdropBackLinkProps) {\n  const body = (\n    <>\n      <ArrowLeft />\n      <span>{label}</span>\n    </>\n  )\n  if (href !== undefined) {\n    return (\n      <Link href={href} onClick={onClick} className={cx(styles.back, className)}>\n        {body}\n      </Link>\n    )\n  }\n  return (\n    <button type=\"button\" onClick={onClick} className={cx(styles.back, className)}>\n      {body}\n    </button>\n  )\n}\n\n/* ── Page header ───────────────────────────────────────────────────────── */\n\n/** `page` is 32px (--backdrop-text-page); `hero` is 40px, for the Hub greeting and focus flows only (ADR-0017, D1). */\nexport type BackdropPageHeaderSize = 'page' | 'hero'\n\nexport interface BackdropPageHeaderProps {\n  /** The page's name. Renders as the page's one <h1>. */\n  title: ReactNode\n  /** Defaults to `page`. `hero` only for the Hub greeting and focus flows. */\n  size?: BackdropPageHeaderSize\n  /** One fact under the title: \"Atelier Nord · Furniture & fit-out · Lyon\". */\n  fact?: ReactNode\n  /** Trailing actions, at the right of the title row. */\n  actions?: ReactNode\n  /** A detail page's way back, drawn above the title with BackdropBackLink. */\n  back?: BackdropPageAction\n  linkComponent?: ElementType\n  className?: string\n}\n\nexport function BackdropPageHeader({ title, size = 'page', fact, actions, back, linkComponent, className }: BackdropPageHeaderProps) {\n  return (\n    <header className={cx(styles.header, className)}>\n      {back && <BackdropBackLink label={back.label} href={back.href} onClick={back.onClick} linkComponent={linkComponent} />}\n      <div className={styles.headerRow}>\n        <div className={styles.headings}>\n          <h1 className={cx(styles.title, size === 'hero' && styles.titleHero)}>{title}</h1>\n          {fact != null && <p className={styles.fact}>{fact}</p>}\n        </div>\n        {actions != null && <div className={styles.actions}>{actions}</div>}\n      </div>\n    </header>\n  )\n}\n\n/* ── Section header ────────────────────────────────────────────────────── */\n\nexport interface BackdropSectionHeaderProps {\n  /** The section's name: \"Campaigns\". */\n  label: ReactNode\n  /** A short count after the label: \"3 of 4\", \"12\". Muted, outside the heading. */\n  count?: ReactNode\n  /** A trailing link: \"View all\". Drawn as BackdropTextLink. */\n  action?: BackdropPageAction\n  /** A trailing fact instead of, or before, the link: \"Updated 2 h ago\". */\n  meta?: ReactNode\n  /** The heading level. 2 under a page title, 3 inside a section. Size does not change. */\n  level?: 2 | 3\n  /** A hairline below. Off by default, as most Final boards draw none (Jamal at the set 2 gate, 11 Nov). */\n  divider?: boolean\n  /** An id for the heading, so a region can name itself by it (BackdropSettingsSection's `aria-labelledby`). */\n  headingId?: string\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * One size for every section header: Outfit 20/600 (--text-xl), the value the\n * Final boards draw most (Brokers, Hub, Score, Off-market). The 13/600 and\n * 15/600 labels the review also found are labels inside a card, not section\n * headers, and are not this component.\n */\nexport function BackdropSectionHeader({ label, count, action, meta, level = 2, divider = false, headingId, linkComponent, className }: BackdropSectionHeaderProps) {\n  const Heading = level === 3 ? 'h3' : 'h2'\n  const trailing = meta != null || action !== undefined\n  return (\n    <div className={cx(styles.section, divider && styles.sectionDivider, className)}>\n      <div className={styles.sectionLead}>\n        <Heading id={headingId} className={styles.sectionTitle}>\n          {label}\n        </Heading>\n        {count != null && <span className={styles.sectionCount}>{count}</span>}\n      </div>\n      {trailing && (\n        <div className={styles.sectionTrailing}>\n          {meta != null && <span className={styles.sectionMeta}>{meta}</span>}\n          {action && (\n            <BackdropTextLink href={action.href} onClick={action.onClick} linkComponent={linkComponent}>\n              {action.label}\n            </BackdropTextLink>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* ── Card ──────────────────────────────────────────────────────────────── */\n\n/**\n * ADR-0017, D3: `flat` has a hairline edge; `raised` a ring and one shadow.\n * There is no third edge. `panel` (Batch 3) has no edge at all: the panel grey\n * fill alone, for an aside that sits beside the page's content rather than on\n * it (Brokers offer commission card, Financing application \"Ready\" card).\n */\nexport type BackdropCardSurface = 'flat' | 'raised' | 'panel'\n/** `none` 0 (the content owns its padding, e.g. a list whose rows pad themselves), `sm` 16, `md` 20, `lg` 24. */\nexport type BackdropCardPadding = 'none' | 'sm' | 'md' | 'lg'\n\nexport interface BackdropCardProps extends HTMLAttributes<HTMLElement> {\n  surface?: BackdropCardSurface\n  padding?: BackdropCardPadding\n  /** The element to render: `div` by default; `section` or `article` when the card is a region of its own. */\n  as?: 'div' | 'section' | 'article' | 'li'\n  children?: ReactNode\n}\n\n/** A white card at radius 16 (ADR-0017, D2). Draws a surface only: layout inside is the caller's. */\nexport function BackdropCard({ surface = 'flat', padding = 'md', as: Element = 'div', className, children, ...rest }: BackdropCardProps) {\n  return (\n    <Element className={cx(styles.card, styles[`card-${surface}`], padding !== 'none' && styles[`pad-${padding}`], className)} {...rest}>\n      {children}\n    </Element>\n  )\n}\n"],"names":["ArrowLeft","jsxs","styles","jsx","BackdropBackLink","label","href","onClick","Link","className","body","Fragment","cx","BackdropPageHeader","title","size","fact","actions","back","linkComponent","BackdropSectionHeader","count","action","meta","level","divider","headingId","Heading","trailing","BackdropTextLink","BackdropCard","surface","padding","Element","children","rest"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+const c = "_back_151dc_21", t = "_backIcon_151dc_49", _ = "_header_151dc_58", e = "_headerRow_151dc_67", d = "_headings_151dc_74", n = "_title_151dc_82", o = "_titleHero_151dc_92", a = "_fact_151dc_97", s = "_actions_151dc_104", i = "_section_151dc_113", r = "_sectionDivider_151dc_124", l = "_sectionLead_151dc_129", h = "_sectionTitle_151dc_136", p = "_sectionCount_151dc_145", g = "_sectionTrailing_151dc_152", b = "_sectionMeta_151dc_161", f = "_card_151dc_170", k = {
+  back: c,
+  backIcon: t,
+  header: _,
+  headerRow: e,
+  headings: d,
+  title: n,
+  titleHero: o,
+  fact: a,
+  actions: s,
+  section: i,
+  sectionDivider: r,
+  sectionLead: l,
+  sectionTitle: h,
+  sectionCount: p,
+  sectionTrailing: g,
+  sectionMeta: b,
+  card: f,
+  "card-flat": "_card-flat_151dc_178",
+  "card-raised": "_card-raised_151dc_183",
+  "card-panel": "_card-panel_151dc_188",
+  "pad-sm": "_pad-sm_151dc_192",
+  "pad-md": "_pad-md_151dc_196",
+  "pad-lg": "_pad-lg_151dc_200"
+};
+export {
+  s as actions,
+  c as back,
+  t as backIcon,
+  f as card,
+  k as default,
+  a as fact,
+  _ as header,
+  e as headerRow,
+  d as headings,
+  i as section,
+  p as sectionCount,
+  r as sectionDivider,
+  l as sectionLead,
+  b as sectionMeta,
+  h as sectionTitle,
+  g as sectionTrailing,
+  n as title,
+  o as titleHero
+};
+//# sourceMappingURL=BackdropPage.module.css.js.map

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

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

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

@@ -0,0 +1,224 @@
+import { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+import { BackdropPillTone } from './BackdropBasics';
+import { BackdropMenuRow } from './BackdropOverlays';
+export interface BackdropDisclosureProps {
+    /** The labelled link: "More options", "How we scored this". Never a bare icon. */
+    summary: ReactNode;
+    /** A short fact after the label naming what is inside: "Send window, daily limit". */
+    hint?: ReactNode;
+    children: ReactNode;
+    /**
+     * 1 for a disclosure on the page, 2 for one inside another. There is no 3:
+     * the depth rule caps disclosure at two levels, and the type enforces it.
+     */
+    level?: 1 | 2;
+    /** Open on first render. The element then manages itself (native details). */
+    defaultOpen?: boolean;
+    className?: string;
+}
+/** Native <details>: keyboard, state and announcement come from the browser, no script. */
+export declare function BackdropDisclosure({ summary, hint, children, level, defaultOpen, className }: BackdropDisclosureProps): import("react").JSX.Element;
+export interface BackdropOverflowMenuProps {
+    /** The button's name: "More actions", "More actions for Hotels in the Alps". */
+    label: string;
+    rows: BackdropMenuRow[];
+    /** `page`: a 40px outline button in a page header. `row`: a 32px ghost in a list row. */
+    size?: 'page' | 'row';
+    /** Controlled open state. Omit it and the menu keeps its own. */
+    open?: boolean;
+    /** Starting state when uncontrolled: a story draws the menu open with this. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: 'start' | 'end';
+    linkComponent?: ElementType;
+}
+export declare function BackdropOverflowMenu({ label, rows, size, open, defaultOpen, onOpenChange, align, linkComponent }: BackdropOverflowMenuProps): import("react").JSX.Element;
+export interface BackdropFilterButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** "Filter". */
+    label: string;
+    /** How many filters are on. 0 or undefined: no badge. */
+    activeCount?: number;
+    /** Spoken with the count: "2 filters on". */
+    activeLabel?: string;
+    open?: boolean;
+}
+export declare function BackdropFilterButton({ label, activeCount, activeLabel, open, ...rest }: BackdropFilterButtonProps): import("react").JSX.Element;
+export interface BackdropFilterOption {
+    key: string;
+    label: ReactNode;
+    checked: boolean;
+    count?: ReactNode;
+}
+export interface BackdropFilterPopoverProps {
+    /** The panel's name ("Filters"). */
+    label: string;
+    groups: {
+        key: string;
+        label: string;
+        options: BackdropFilterOption[];
+    }[];
+    onToggle?: (groupKey: string, optionKey: string) => void;
+    /** "Clear all", a text link at the foot. */
+    clearLabel?: string;
+    onClear?: () => void;
+}
+/** The filters a list hides until asked: grouped checkboxes, one Clear link. Filters apply as they are ticked. */
+export declare function BackdropFilterPopover({ label, groups, onToggle, clearLabel, onClear }: BackdropFilterPopoverProps): import("react").JSX.Element;
+export interface BackdropCheckboxProps {
+    checked: boolean | 'mixed';
+    /** The checkbox's name: "Select Hotels in the Alps", "Select all". */
+    label: string;
+    /** The label is printed elsewhere (a row's name); keep it for assistive tech only. */
+    hideLabel?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+}
+export declare function BackdropCheckbox({ checked, label, hideLabel, disabled, onChange, className }: BackdropCheckboxProps): import("react").JSX.Element;
+export interface BackdropBulkBarProps {
+    /** How many rows are ticked. The bar renders nothing at 0. */
+    count: number;
+    /** "3 selected", formatted by the caller. */
+    selectedText: ReactNode;
+    /** The bulk actions, as ink-bar buttons (BackdropBulkAction). */
+    actions: ReactNode;
+    /** "Clear selection". */
+    clearLabel: string;
+    onClear?: () => void;
+    /** The region's name ("Bulk actions"). */
+    label: string;
+    className?: string;
+}
+/** An ink bar floating at the foot of the list, only while one row or more is selected. */
+export declare function BackdropBulkBar({ count, selectedText, actions, clearLabel, onClear, label, className }: BackdropBulkBarProps): import("react").JSX.Element | null;
+export declare function BackdropBulkAction({ children, icon, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+/** The single card: `default` is the sunken strip, `hero` the raised card that leads an overview. */
+export interface BackdropNextStepSingleProps {
+    rows?: never;
+    /** 20px icon in the white tile (18px in the hero's 36px tile). */
+    icon: ReactNode;
+    /** What needs the person: "5 messages to approve". */
+    title: ReactNode;
+    /** One fact: "From 2 campaigns". */
+    caption?: ReactNode;
+    /** The screen's ONE orange button. */
+    action: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    /** `default` (the strip) or `hero` (a raised card with a head row and a 28px title). */
+    size?: 'default' | 'hero';
+    /** Hero only: what the card is about, beside the icon tile in the head row ("Electricity"). */
+    subject?: ReactNode;
+    /** Hero only: a status pill at the head row's right ("Closes in 4 days"), drawn with BackdropPill. */
+    status?: {
+        label: ReactNode;
+        tone?: BackdropPillTone;
+    };
+    label?: never;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export interface BackdropNextStepRow {
+    key: string;
+    /** 18px icon in the 36px tile. */
+    icon: ReactNode;
+    /** "Oak boards for chairs". */
+    title: ReactNode;
+    /** One fact: "2 offers within budget · closes 30 Nov". */
+    caption?: ReactNode;
+    /** The row's outline button. Never orange: the screen's one orange lives elsewhere. */
+    action?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    /** Anything before the action: a small bar and score, a date. */
+    trailing?: ReactNode;
+}
+/** The action list: several rows, each an icon tile, two lines of text and an outline action, in one raised card. */
+export interface BackdropNextStepListProps {
+    rows: BackdropNextStepRow[];
+    /** The list's name ("Also needs you"). */
+    label: string;
+    icon?: never;
+    title?: never;
+    action?: never;
+    size?: never;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export type BackdropNextStepCardProps = BackdropNextStepSingleProps | BackdropNextStepListProps;
+/** One per screen, and only when something needs the person (research addition, 9 Nov). */
+export declare function BackdropNextStepCard(props: BackdropNextStepCardProps): import("react").JSX.Element;
+export interface BackdropAllSetProps {
+    /** "Nothing needs you right now." A plain fact, never cheerleading (copy guide). */
+    children: ReactNode;
+    /** The sub-line under it: what will bring the person back ("We'll tell you when a supplier clears the bar."). */
+    detail?: ReactNode;
+    className?: string;
+}
+export declare function BackdropAllSet({ children, detail, className }: BackdropAllSetProps): import("react").JSX.Element;
+export interface BackdropAvailabilityAppProps {
+    /**
+     * Which of the three. The layout is the same; the state only decides the
+     * button's weight -- `soon` is an outline "Notify me" (nothing to do yet), the
+     * other two are the screen's orange action. Keeps "not built" and "not
+     * entitled" apart, as the hub's cardState does.
+     */
+    state: 'soon' | 'not-on-plan' | 'not-set-up';
+    /** The app's mark, 48px. */
+    mark: ReactNode;
+    /** "Brokers is coming soon", "Brokers is not on your plan", "Set up Outbound". */
+    title: ReactNode;
+    /** One sentence, ≤ 15 words. */
+    body: ReactNode;
+    action: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+        pressed?: boolean;
+    };
+    /** A second, quieter way out: "View plans", "Back to home". */
+    secondary?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    /** A tag beside the title: a BackdropSoonTag for `soon`. */
+    tag?: ReactNode;
+    icon?: never;
+    linkComponent?: ElementType;
+    className?: string;
+}
+/**
+ * `empty`: the one empty-state design (ADR-0017, D12) -- a 48px icon tile, a
+ * 20px title, one line of help, at most one action. A list or page with
+ * nothing in it yet ("No posts published yet"). There is no second action and
+ * no tag, and the type says so.
+ */
+export interface BackdropAvailabilityEmptyProps {
+    state: 'empty';
+    /** 20px icon, drawn in the 48px tile. */
+    icon: ReactNode;
+    /** "No posts published yet". */
+    title: ReactNode;
+    /** One line: "Approve a post to see how it does." */
+    body: ReactNode;
+    /** At most one, and the screen's orange one when present. */
+    action?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    mark?: never;
+    secondary?: never;
+    tag?: never;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export type BackdropAvailabilityProps = BackdropAvailabilityAppProps | BackdropAvailabilityEmptyProps;
+export declare function BackdropAvailability(props: BackdropAvailabilityProps): import("react").JSX.Element;