@ngrok/mantle 0.81.1 → 0.82.1

package/dist/alert-center.d.ts

@@ -0,0 +1,647 @@
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { t as Alert } from "./alert-BWwNPOMI.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/alert-center/alert-center.d.ts
+/**
+ * The tone an alert's color communicates — identical to `Alert`'s intent axis,
+ * so an item's `intent` flows straight through to the `Alert` chrome that
+ * renders it. Also the severity ranking key: `danger` › `warning` ›
+ * `important` › `info` › `success` decides which item the bar shows.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Item id="payment-failed" intent="danger">…</AlertCenter.Item>
+ * ```
+ */
+type AlertCenterIntent = "danger" | "important" | "info" | "success" | "warning";
+/**
+ * Props for {@link AlertCenter.Root} — the expansion's open state. The alerts
+ * themselves are authored as `AlertCenter.Item` children.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterroot
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root open={expanded} onOpenChange={setExpanded}>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content />
+ *   <AlertCenter.Item id="payment-failed" intent="danger">…</AlertCenter.Item>
+ * </AlertCenter.Root>
+ * ```
+ */
+type AlertCenterRootProps = {
+  /** Controlled expanded state of the additional-alert list. Pair with `onOpenChange`. */
+  open?: boolean;
+  /**
+   * Uncontrolled initial expanded state of the additional-alert list.
+   *
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /** Called when the additional-alert list expands or collapses. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The `AlertCenter.Bar`, `AlertCenter.Content`, and every `AlertCenter.Item`.
+   * Items may be authored anywhere under the root — their children stay in this
+   * tree and are projected into the bar or an expansion row by rank.
+   */
+  children?: ReactNode;
+};
+/**
+ * The renderless state owner. It creates the registration store the
+ * `AlertCenter.Item` children register into, owns the inline expansion's open
+ * state, and mounts the persistent live-region announcer. Compose its `Bar`
+ * (and `Content`) inside `AppLayout.Notice`, alongside any other window-level
+ * notice, so all top-of-viewport messaging shares one layout slot.
+ *
+ * Items register client-side (from layout effects), so server-rendered HTML
+ * contains no bar; it enters with its height animation after hydration — the
+ * same entrance every arriving alert gets by design.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-announcer` | On the persistent visually-hidden `role="status"` live region Root mounts. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterroot
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content />
+ *   {paymentFailed && (
+ *     <AlertCenter.Item id="payment-failed" intent="danger">
+ *       <Alert.Icon />
+ *       <Alert.Content>
+ *         <Alert.Title>
+ *           Payment failed — <a href="/billing">update your card</a>
+ *         </Alert.Title>
+ *       </Alert.Content>
+ *     </AlertCenter.Item>
+ *   )}
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const Root: ({ children, defaultOpen, onOpenChange, open }: AlertCenterRootProps) => import("react").JSX.Element;
+/**
+ * Props for {@link AlertCenter.Item}: the coordination facts the center needs
+ * to rank, announce, and label an alert — everything presentational is the
+ * authored `children`.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenteritem
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content />
+ *   <AlertCenter.Item id="transfer-limit" intent="warning">
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>Approaching your data transfer limit</Alert.Title>
+ *       <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *     </Alert.Content>
+ *   </AlertCenter.Item>
+ * </AlertCenter.Root>
+ * ```
+ */
+type AlertCenterItemProps = {
+  /**
+   * Stable identity. It keys the item's stable host element (children keep
+   * their state as the host moves between the bar and a row), pins the
+   * item's arrival order (a returning id resumes its original position), and
+   * is stamped on the chrome as `data-alert-id` for styling. Must be unique
+   * among the items mounted under one `AlertCenter.Root` — a second mounted
+   * item claiming the same id throws, since both would project into that
+   * id's single host.
+   */
+  id: string;
+  /**
+   * The tone the alert's color communicates. Drives both the severity ranking
+   * and the intent of the `Alert.Root` chrome the children render inside.
+   */
+  intent: AlertCenterIntent;
+  /** Optional classes for this item's chrome `Alert.Root`, in both placements. */
+  className?: string;
+  /**
+   * The banner content: compose `Alert.Icon`, `Alert.Content`, `Alert.Title`,
+   * `Alert.Description`, and `AlertCenter.DismissIconButton`. Do NOT include
+   * `Alert.Root` — the center provides the chrome (with this item's `intent`)
+   * at whichever placement the item ranks into.
+   */
+  children: ReactNode;
+};
+/**
+ * One account alert, authored as JSX. It registers its coordination facts
+ * with the center and renders its children through a portal into a stable
+ * per-id host element that `AlertCenter.Bar` / `AlertCenter.Content`
+ * physically adopt into their chrome. Mount it to show the alert, unmount it
+ * to remove it — dismissal is just your state flipping the condition off.
+ *
+ * Because the children stay in YOUR React tree (only their DOM lands in the
+ * chrome), context providers and error boundaries around the item work, and
+ * router-aware links resolve at the authoring location. The host element is
+ * stable and moved — not remounted — between the bar and a row, so authored
+ * content keeps its state (and, in engines with `Element.moveBefore`, even
+ * focus) across re-ranks. While an item ranks nowhere visible (e.g. the
+ * expansion is not composed), its children stay mounted on a detached host —
+ * rendered by React, contributing nothing to the document.
+ *
+ * Server rendering emits no alert DOM — the bar enters after hydration with
+ * its height animation, the same entrance every arriving alert gets.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-item-host` | On the stable per-id host element the item's children portal into. |
+ * | `data-alert-host` | the item's `id` | On that same host — which alert's projected children it holds. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenteritem
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content />
+ *   <AlertCenter.Item id="transfer-limit" intent="warning">
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>
+ *         You've used 92% of your monthly transfer. <a href="/billing">Upgrade</a>
+ *       </Alert.Title>
+ *       <Alert.Description>Free accounts include 5 GB of transfer per month.</Alert.Description>
+ *       <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *     </Alert.Content>
+ *   </AlertCenter.Item>
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const Item: ({ children, className, id, intent }: AlertCenterItemProps) => import("react").ReactPortal | null;
+type AlertCenterDismissIconButtonProps = ComponentProps<typeof Alert.DismissIconButton> & WithDataSlot & {
+  /**
+   * Dismissal is consumer-owned: remove the alert by unmounting its
+   * `AlertCenter.Item` (and persist that however you like). Required because a
+   * dismiss affordance that does nothing is always an authoring error.
+   */
+  onClick: NonNullable<ComponentProps<typeof Alert.DismissIconButton>["onClick"]>;
+};
+/**
+ * The dismiss affordance for the item it's composed inside. A thin wrapper over
+ * `Alert.DismissIconButton` whose label defaults to `Dismiss ${title}`, derived
+ * from the enclosing banner's RENDERED `Alert.Title` text and re-read on every
+ * commit so the accessible name stays in lockstep with the visible copy (pass
+ * `label` to override, e.g. when the title is long). Compose it — or leave it
+ * out — per alert; its presence IS the alert's dismissability.
+ *
+ * Where the control sits in each placement is the chrome's business, not this
+ * wrapper's: {@link dismissClearsExpandControl} seats it beside the bar's
+ * expand control, and {@link singleLineBarControls} re-centers it in a
+ * single-line bar.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-dismiss-icon-button` | Replaces `Alert.DismissIconButton`'s own `alert-dismiss-icon-button` on the rendered button. |
+ * | `data-alert-dismiss` | present | Read, not stamped — `Alert` emits it, and `AlertCenter`'s bar CSS positions the control with it. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterdismissiconbutton
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content />
+ *   <AlertCenter.Item id="transfer-limit" intent="warning">
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>Approaching your data transfer limit</Alert.Title>
+ *       <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *     </Alert.Content>
+ *   </AlertCenter.Item>
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const DismissIconButton: ({ "data-slot": dataSlot, label, ref, ...props }: AlertCenterDismissIconButtonProps) => import("react").JSX.Element;
+type AlertCenterBarProps = Omit<ComponentProps<typeof Alert.Root>, "appearance" | "intent" | "children"> & WithDataSlot & {
+  /** The bar renders the top-ranked item's authored children — it takes none of its own. */
+  children?: never;
+};
+/**
+ * The always-visible, full-width strip. It renders the single highest-severity
+ * item's authored children INLINE — icon, title, description, and its
+ * call-to-action — so the top CTA is one glance (and zero extra clicks) away,
+ * then appends a count-and-caret control that expands the additional alerts
+ * below the bar. Collapses to nothing when there are no alerts (like
+ * `AppLayout.Notice`), so it can stay mounted and render unconditionally.
+ *
+ * The bar renders the top alert as authored, so it is exactly as tall as that
+ * content: single-line for a title alone, two lines once an `Alert.Description`
+ * is composed (matching how the same alert renders as an expansion row). Its
+ * chrome carries `data-placement="bar"` and `data-alert-id` as styling hooks for
+ * placement-aware authored content — `in-data-[placement=bar]:hidden` keeps a
+ * given element out of the bar and shows it only in the expansion.
+ *
+ * The bar itself claims NO ARIA landmark (deliberately, like `AppLayout.Notice`)
+ * — arrivals and re-ranks are announced by the persistent visually-hidden
+ * `role="status"` region that `AlertCenter.Root` mounts.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-bar-wrapper` | On the presence wrapper that owns the enter/exit animation. |
+ * | `data-slot` | `alert-center-bar` | On the banner chrome (`Alert.Root`) the top item's children render inside. |
+ * | `data-slot` | `alert-center-bar-mount` | On the layout-transparent element the top item's host is adopted into. |
+ * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the enter/exit transition, and stays `closed` while the exit plays. |
+ * | `data-placement` | `"bar"` | On the chrome — where the top item's children are currently rendering. |
+ * | `data-alert-id` | the top item's `id` | On the chrome; per-alert styling and testing hook. |
+ * | `data-alert-dismiss` | present on the dismiss control | Read, not stamped — `Alert` emits it; the bar's CSS centers and offsets the control with it. |
+ * | `data-alert-expand` | present on the expand control | Read, not stamped — `Alert` emits it; the bar's CSS centers the control with it. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterbar
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content />
+ *   <AlertCenter.Item id="payment-failed" intent="danger">
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>
+ *         Payment failed — we couldn't charge your card.{" "}
+ *         <a href="/billing">Update payment method</a>
+ *       </Alert.Title>
+ *       <Alert.Description>
+ *         Update your payment method to avoid a service interruption.
+ *       </Alert.Description>
+ *     </Alert.Content>
+ *   </AlertCenter.Item>
+ *   {!dismissed.has("transfer-limit") && (
+ *     <AlertCenter.Item id="transfer-limit" intent="warning">
+ *       <Alert.Icon />
+ *       <Alert.Content>
+ *         <Alert.Title>
+ *           You've used 92% of your monthly transfer.{" "}
+ *           <a href="/billing/choose-a-plan">Upgrade</a>
+ *         </Alert.Title>
+ *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *       </Alert.Content>
+ *     </AlertCenter.Item>
+ *   )}
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const Bar: ({ className, "data-slot": dataSlot, ref, ...props }: AlertCenterBarProps) => import("react").JSX.Element | null;
+type AlertCenterContentProps = Omit<ComponentProps<"div">, "children" | "id"> & WithDataSlot & {
+  /** Rows are the registered items' authored children — Content takes none of its own. */
+  children?: never;
+};
+/**
+ * The inline expansion below `AlertCenter.Bar`. It renders the additional
+ * alerts (every registered item except the bar's top one), ranked
+ * highest-severity-first, as full-width banner rows that push the app shell
+ * down while expanded. Each row is the item's authored children inside an
+ * `Alert.Root` chrome stamped with `data-placement="list"` and
+ * `data-alert-id`.
+ *
+ * `aria-label` (default `"More alerts"`) and `aria-labelledby` name the row
+ * list itself — the outer wrapper is `role="generic"`, where ARIA prohibits
+ * accessible names, so a name passed here would otherwise be dropped.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `alert-center-content` | On the expansion wrapper that owns the collapse animation. |
+ * | `data-slot` | `alert-center-item` | On each row's banner chrome (`Alert.Root`). |
+ * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the collapse transition. |
+ * | `data-placement` | `"list"` | On each row's chrome — where that item's children are currently rendering. |
+ * | `data-alert-id` | the row item's `id` | On each row's chrome; per-alert styling and testing hook. |
+ * | `data-alert-mount` | the row item's `id` | On the row's layout-transparent mount point — the element that item's host is adopted into. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcentercontent
+ *
+ * @example
+ * ```tsx
+ * <AlertCenter.Root>
+ *   <AlertCenter.Bar />
+ *   <AlertCenter.Content aria-label="Autres alertes" />
+ *   <AlertCenter.Item id="payment-failed" intent="danger">
+ *     <Alert.Icon />
+ *     <Alert.Content>
+ *       <Alert.Title>
+ *         Payment failed — <a href="/billing">update your card</a>
+ *       </Alert.Title>
+ *     </Alert.Content>
+ *   </AlertCenter.Item>
+ *   {!dismissed.has("transfer-limit") && (
+ *     <AlertCenter.Item id="transfer-limit" intent="warning">
+ *       <Alert.Icon />
+ *       <Alert.Content>
+ *         <Alert.Title>Approaching your data transfer limit</Alert.Title>
+ *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *       </Alert.Content>
+ *     </AlertCenter.Item>
+ *   )}
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, "data-slot": dataSlot, ref, ...props }: AlertCenterContentProps) => import("react").JSX.Element | null;
+/**
+ * A single, top-level entry point for one-to-many account alerts and their
+ * upgrade CTAs — the aggregation layer that replaces a stack of independent
+ * window banners. Alerts are AUTHORED as `AlertCenter.Item` JSX (mount to
+ * show, unmount to dismiss); each item registers its coordination facts, and
+ * the center derives the count, the top alert, and the severity ranking from
+ * the registrations. `AlertCenter.Bar` shows the highest-severity item inline
+ * (with its CTA) and a count-and-caret control; `AlertCenter.Content` expands
+ * the remaining items as full-width banners.
+ *
+ * Ranking is deterministic: severity first (`danger` › `warning` ›
+ * `important` › `info` › `success`), then arrival order within an intent —
+ * items mounting together rank in tree order, later arrivals append after
+ * their same-intent peers, and a dismissed-then-returning id resumes its
+ * original position.
+ *
+ * Compose `Bar` and `Content` into `AppLayout.Notice`, alongside any other
+ * window-level notice. Items may be authored anywhere under `Root`: their
+ * children stay in the author's React tree (context providers and error
+ * boundaries around an item work; router links resolve where the item is
+ * written) while their DOM renders through a stable per-id host that the bar
+ * and rows physically adopt — so content keeps its state across re-ranks.
+ *
+ * Siblings: `Alert` (`@ngrok/mantle/alert`) is a single inline banner you place
+ * and control yourself; `Toast` (`@ngrok/mantle/toast`) is for transient,
+ * ephemeral notifications; `AppLayout.Notice` (`@ngrok/mantle/app-layout`) is
+ * the layout slot this composes INTO, not a competitor. `AlertCenter` answers
+ * only the one-to-many case: persistent, ACCOUNT-level alerts that must be
+ * ranked and collapsed into a single top-level bar.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert-center
+ *
+ * @example
+ * Composition (items render no DOM in place; their children portal into a
+ * stable host the bar or a row adopts):
+ * ```
+ * AlertCenter.Root
+ * ├── AlertCenter.Bar        ← the top-ranked item's children, in Alert chrome
+ * ├── AlertCenter.Content    ← every other item's children, as ranked rows
+ * └── AlertCenter.Item (0..n, renderless)
+ *     └── Alert.Icon / Alert.Content / Alert.Title / Alert.Description /
+ *         AlertCenter.DismissIconButton
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <AppLayout.Root className="fixed inset-0">
+ *   <AppLayout.Notice>
+ *     {showPreviewNotice && <PreviewNotice />}
+ *     <AlertCenter.Root>
+ *       <AlertCenter.Bar />
+ *       <AlertCenter.Content />
+ *       <AlertCenter.Item id="payment-failed" intent="danger">
+ *         <Alert.Icon />
+ *         <Alert.Content>
+ *           <Alert.Title>
+ *             Payment failed — we couldn't charge your card.{" "}
+ *             <a href="/billing">Update payment method</a>
+ *           </Alert.Title>
+ *           <Alert.Description>
+ *             Update your payment method to avoid a service interruption.
+ *           </Alert.Description>
+ *         </Alert.Content>
+ *       </AlertCenter.Item>
+ *       {!dismissed.has("transfer-limit") && (
+ *         <AlertCenter.Item id="transfer-limit" intent="warning">
+ *           <Alert.Icon />
+ *           <Alert.Content>
+ *             <Alert.Title>
+ *               You've used 92% of your monthly transfer.{" "}
+ *               <a href="/billing/choose-a-plan">Upgrade</a>
+ *             </Alert.Title>
+ *             <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+ *           </Alert.Content>
+ *         </AlertCenter.Item>
+ *       )}
+ *     </AlertCenter.Root>
+ *   </AppLayout.Notice>
+ *   <AppLayout.Workspace>…</AppLayout.Workspace>
+ * </AppLayout.Root>
+ * ```
+ */
+declare const AlertCenter: {
+  /**
+   * The renderless state owner: creates the registration store, owns the
+   * expansion's open state, and mounts the persistent live-region announcer.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-announcer` | On the persistent visually-hidden `role="status"` live region Root mounts. |
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterroot
+   *
+   * @example
+   * ```tsx
+   * <AlertCenter.Root>
+   *   <AlertCenter.Bar />
+   *   <AlertCenter.Content />
+   *   <AlertCenter.Item id="payment-failed" intent="danger">
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — we couldn't charge your card.{" "}
+   *         <a href="/billing">Update payment method</a>
+   *       </Alert.Title>
+   *       <Alert.Description>
+   *         Update your payment method to avoid a service interruption.
+   *       </Alert.Description>
+   *     </Alert.Content>
+   *   </AlertCenter.Item>
+   *   {!dismissed.has("transfer-limit") && (
+   *     <AlertCenter.Item id="transfer-limit" intent="warning">
+   *       <Alert.Icon />
+   *       <Alert.Content>
+   *         <Alert.Title>
+   *           You've used 92% of your monthly transfer.{" "}
+   *           <a href="/billing/choose-a-plan">Upgrade</a>
+   *         </Alert.Title>
+   *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *       </Alert.Content>
+   *     </AlertCenter.Item>
+   *   )}
+   * </AlertCenter.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The always-visible strip: the highest-severity item's children inline
+   * (icon, title, description, CTA) plus the count-and-caret expansion control.
+   * Collapses to nothing when empty. Claims no ARIA landmark; arrivals are
+   * announced by Root's persistent live region.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-bar-wrapper` | On the presence wrapper that owns the enter/exit animation. |
+   * | `data-slot` | `alert-center-bar` | On the banner chrome (`Alert.Root`) the top item's children render inside. |
+   * | `data-slot` | `alert-center-bar-mount` | On the layout-transparent element the top item's host is adopted into. |
+   * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the enter/exit transition, and stays `closed` while the exit plays. |
+   * | `data-placement` | `"bar"` | On the chrome — where the top item's children are currently rendering. |
+   * | `data-alert-id` | the top item's `id` | On the chrome; per-alert styling and testing hook. |
+   * | `data-alert-dismiss` | present on the dismiss control | Read, not stamped — `Alert` emits it; the bar's CSS centers and offsets the control with it. |
+   * | `data-alert-expand` | present on the expand control | Read, not stamped — `Alert` emits it; the bar's CSS centers the control with it. |
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterbar
+   *
+   * @example
+   * ```tsx
+   * <AlertCenter.Root>
+   *   <AlertCenter.Bar />
+   *   <AlertCenter.Content />
+   *   <AlertCenter.Item id="payment-failed" intent="danger">
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — we couldn't charge your card.{" "}
+   *         <a href="/billing">Update payment method</a>
+   *       </Alert.Title>
+   *       <Alert.Description>
+   *         Update your payment method to avoid a service interruption.
+   *       </Alert.Description>
+   *     </Alert.Content>
+   *   </AlertCenter.Item>
+   *   {!dismissed.has("transfer-limit") && (
+   *     <AlertCenter.Item id="transfer-limit" intent="warning">
+   *       <Alert.Icon />
+   *       <Alert.Content>
+   *         <Alert.Title>
+   *           You've used 92% of your monthly transfer.{" "}
+   *           <a href="/billing/choose-a-plan">Upgrade</a>
+   *         </Alert.Title>
+   *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *       </Alert.Content>
+   *     </AlertCenter.Item>
+   *   )}
+   * </AlertCenter.Root>
+   * ```
+   */
+  readonly Bar: typeof Bar;
+  /**
+   * The inline expansion listing every alert hidden by the bar, ranked
+   * highest-severity-first as full-width banner rows of the items' authored
+   * children.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-content` | On the expansion wrapper that owns the collapse animation. |
+   * | `data-slot` | `alert-center-item` | On each row's banner chrome (`Alert.Root`). |
+   * | `data-state` | `"open"` \| `"closed"` | On the wrapper; drives the collapse transition. |
+   * | `data-placement` | `"list"` | On each row's chrome — where that item's children are currently rendering. |
+   * | `data-alert-id` | the row item's `id` | On each row's chrome; per-alert styling and testing hook. |
+   * | `data-alert-mount` | the row item's `id` | On the row's layout-transparent mount point — the element that item's host is adopted into. |
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcentercontent
+   *
+   * @example
+   * ```tsx
+   * <AlertCenter.Root>
+   *   <AlertCenter.Bar />
+   *   <AlertCenter.Content />
+   *   <AlertCenter.Item id="payment-failed" intent="danger">
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — <a href="/billing">update your card</a>
+   *       </Alert.Title>
+   *     </Alert.Content>
+   *   </AlertCenter.Item>
+   *   {!dismissed.has("transfer-limit") && (
+   *     <AlertCenter.Item id="transfer-limit" intent="warning">
+   *       <Alert.Icon />
+   *       <Alert.Content>
+   *         <Alert.Title>Approaching your data transfer limit</Alert.Title>
+   *         <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *       </Alert.Content>
+   *     </AlertCenter.Item>
+   *   )}
+   * </AlertCenter.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * One authored alert: registers its `{id, intent}` facts and renders its
+   * children through a portal into a stable per-id host that the bar or an
+   * expansion row adopts by rank — children stay in the author's React tree
+   * and keep their state across re-ranks. Mount to show; unmount to dismiss.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-item-host` | On the stable per-id host element the item's children portal into. |
+   * | `data-alert-host` | the item's `id` | On that same host — which alert's projected children it holds. |
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenteritem
+   *
+   * @example
+   * ```tsx
+   * <AlertCenter.Root>
+   *   <AlertCenter.Bar />
+   *   <AlertCenter.Content />
+   *   <AlertCenter.Item id="payment-failed" intent="danger">
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>
+   *         Payment failed — <a href="/billing">update your card</a>
+   *       </Alert.Title>
+   *     </Alert.Content>
+   *   </AlertCenter.Item>
+   * </AlertCenter.Root>
+   * ```
+   */
+  readonly Item: typeof Item;
+  /**
+   * The per-item dismiss affordance: `Alert.DismissIconButton` wired to the
+   * enclosing banner's rendered title and the bar's control centering. Its
+   * presence in an item's children is what makes that alert dismissable.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-slot` | `alert-center-dismiss-icon-button` | Replaces `Alert.DismissIconButton`'s own `alert-dismiss-icon-button` on the rendered button. |
+   * | `data-alert-dismiss` | present | Read, not stamped — `Alert` emits it, and `AlertCenter`'s bar CSS positions the control with it. |
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcenterdismissiconbutton
+   *
+   * @example
+   * ```tsx
+   * <AlertCenter.Root>
+   *   <AlertCenter.Bar />
+   *   <AlertCenter.Content />
+   *   <AlertCenter.Item id="transfer-limit" intent="warning">
+   *     <Alert.Icon />
+   *     <Alert.Content>
+   *       <Alert.Title>Approaching your data transfer limit</Alert.Title>
+   *       <AlertCenter.DismissIconButton onClick={() => dismiss("transfer-limit")} />
+   *     </Alert.Content>
+   *   </AlertCenter.Item>
+   * </AlertCenter.Root>
+   * ```
+   */
+  readonly DismissIconButton: typeof DismissIconButton;
+};
+//#endregion
+export { AlertCenter, type AlertCenterIntent, type AlertCenterItemProps, type AlertCenterRootProps };

package/dist/alert-center.js

@@ -0,0 +1 @@
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{n as i,t as a}from"./alert-vwFd7qdp.js";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useReducer as f,useRef as p,useState as m,useSyncExternalStore as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{createPortal as y}from"react-dom";const b={danger:5,warning:4,important:3,info:2,success:1};function x(e,t){if(t.parentElement===e)return!1;if(typeof e.moveBefore==`function`&&t.isConnected&&e.isConnected)try{return e.moveBefore(t,null),!0}catch{}return e.appendChild(t),!0}function S(e){return e.replace(/\s+/g,` `).trim()}function C(e){let t=e.querySelector(`[data-slot="alert-title"]`);if(t==null)return``;let n=t.cloneNode(!0);if(!(n instanceof Element))return S(t.textContent??``);for(let e of n.querySelectorAll(`button`))e.remove();let r=S(n.textContent??``);for(let e of n.querySelectorAll(`a`))e.remove();let i=S(n.textContent??``);return i===``?r:i}function w(e){return e.toSorted((e,t)=>b[t.intent]-b[e.intent]||e.sequence-t.sequence)}function T(e,t){if(t===0)return``;if(e===``)return`${t} alert${t===1?``:`s`}`;let n=t-1;return n===0?e:`${e}, and ${n} more alert${n===1?``:`s`}`}const E=[];var D=class{#e=new Set;#t=new Map;#n=new Map;#r=new Map;#i=0;#a=E;#o=``;#s=!1;getHost(e){let t=this.#r.get(e);if(t!=null)return t;let n=document.createElement(`div`);return n.style.display=`contents`,n.setAttribute(`data-slot`,`alert-center-item-host`),n.setAttribute(`data-alert-host`,e),this.#r.set(e,n),n}#c=null;captureHostSnapshot(e){if(e!==this.#a[0]?.id)return;let t=this.#r.get(e);t!=null&&t.hasChildNodes()&&(this.#c={id:e,content:t.cloneNode(!0)})}getHostSnapshot=e=>this.#c?.id===e?this.#c.content:null;subscribe=e=>(this.#e.add(e),()=>{this.#e.delete(e)});getSnapshot=()=>this.#a;hasAlert=e=>this.#t.has(e);getTopLabel=()=>this.#o;setTopLabel(e){this.#o!==e&&(this.#o=e,this.#p())}#l=null;requestFocusRestore(e){this.#l=e}flushFocusRestore(){let e=this.#l;e==null||!e.isConnected||(this.#l=null,document.activeElement!==e&&e.focus({preventScroll:!0}))}#u=null;#d=0;getPlacementVersion=()=>this.#d;notifyPlacementChange(){this.#d++,this.#p()}setBarElement(e){this.#u=e}getBarElement=()=>this.#u;getContentMounted=()=>this.#s;setContentMounted(e){this.#s!==e&&(this.#s=e,this.#p())}register(e){g(!this.#t.has(e.id),`AlertCenter.Item id "${e.id}" is already registered by another mounted item — ids must be unique under one <AlertCenter.Root>. Render one item per id, or give each alert its own id.`);let t=this.#n.get(e.id)??this.#i++;this.#n.set(e.id,t);let n={...e,sequence:t};return this.#t.set(e.id,n),this.#f(),()=>{this.#t.get(e.id)===n&&(this.#t.delete(e.id),this.#f())}}#f(){this.#a=w([...this.#t.values()]),this.#p()}#p(){for(let e of this.#e)e()}};const O=o(null),k=o(null);function A(e){let t=c(O);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}function j(e){let t=c(k);return g(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}const M=e=>h(e.subscribe,e.getSnapshot,e.getSnapshot),N=o(!1);function P({store:e}){let t=M(e);return _(`div`,{"data-slot":`alert-center-announcer`,className:`sr-only`,role:`status`,"aria-live":`polite`,children:T(h(e.subscribe,e.getTopLabel,e.getTopLabel),t.length)})}const F=({children:e,defaultOpen:t,onOpenChange:n,open:r})=>{let[i]=m(()=>new D),a=u(),[o,c]=m(t??!1),l=r??o,f=s(e=>{r??c(e),n?.(e)},[r,n]),p=d(()=>({store:i,contentId:a}),[i,a]),h=d(()=>({isExpanded:l,setExpanded:f}),[l,f]);return v(O.Provider,{value:p,children:[_(k.Provider,{value:h,children:e}),_(P,{store:i})]})},I=({children:t,className:n,id:r,intent:a})=>{let{store:o}=A(`AlertCenter.Item`);g(!c(N),`AlertCenter.Item cannot be rendered inside another item's children.`);let[s,l]=m(null);return e(()=>{l(o.getHost(r))},[o,r]),e(()=>o.register({id:r,intent:a,className:n}),[o,r,a,n]),e(()=>{o.captureHostSnapshot(r)}),s==null?null:y(_(i,{intent:a,children:_(N.Provider,{value:!0,children:t})}),s)},L=({"data-slot":n,label:i,ref:o,...s})=>{g(c(N),`AlertCenter.DismissIconButton must be composed inside an <AlertCenter.Item>'s children.`);let{store:l}=A(`AlertCenter.DismissIconButton`);h(l.subscribe,l.getPlacementVersion,l.getPlacementVersion);let u=p(null),d=t(u,o),[f,v]=m(null);return e(()=>{if(i!=null)return;let e=u.current?.closest(`[data-alert-id]`),t=e==null?``:C(e);v(t===``?null:`Dismiss ${t}`)}),_(a.DismissIconButton,{ref:d,label:i??f??void 0,...s,"data-slot":r(n,`alert-center-dismiss-icon-button`)})};function R(e,t){switch(t){case`show`:return`open`;case`hide`:return e===`closed`?`closed`:`closing`;case`exited`:return e===`closing`?`closed`:e}}function z({present:t}){let[n,r]=f(R,t?`open`:`closed`);e(()=>{r(t?`show`:`hide`)},[t]),l(()=>{if(n!==`closing`)return;let e=window.setTimeout(()=>r(`exited`),200);return()=>window.clearTimeout(e)},[n]);let i=s(e=>{e.target===e.currentTarget&&e.propertyName===`height`&&r(`exited`)},[]);return{isMounted:n!==`closed`,dataState:n===`open`?`open`:`closed`,onExitTransitionEnd:i}}function B({containerRef:t,isAttached:n}){let r=p(null);return e(()=>{let e=t.current;if(!n||e==null)return;let i=e=>{e.target instanceof Element&&(r.current=e.target)},a=t=>{t.relatedTarget instanceof Node&&!e.contains(t.relatedTarget)&&(r.current=null)};return e.addEventListener(`focusin`,i),e.addEventListener(`focusout`,a),()=>{e.removeEventListener(`focusin`,i),e.removeEventListener(`focusout`,a)}},[t,n]),{lastFocusedWithinRef:r}}function V(){let e=document.querySelector(`main, [role="main"]`);e!=null&&(e.hasAttribute(`tabindex`)||(e.tabIndex=-1),e.focus({preventScroll:!0}))}function H({isMounted:t,store:n,topId:r}){let i=p(null),{lastFocusedWithinRef:a}=B({containerRef:i,isAttached:t}),o=p(r);return e(()=>{let e=o.current;if(o.current=r,e==null||r===e)return;let t=a.current;if(n.hasAlert(e)){t instanceof HTMLElement&&document.activeElement!==t&&n.requestFocusRestore(t);return}if(t==null||t.isConnected)return;a.current=null;let s=i.current;if(r==null){V();return}s!=null&&(s.querySelector(`[data-alert-dismiss], [data-alert-expand]`)??s).focus()},[n,r]),{wrapperRef:i}}const U=`gap-2 py-2 pr-2 [&_[data-slot=alert-icon]]:shrink-0`,W={Root:F,Bar:({className:t,"data-slot":i,ref:o,...s})=>{let{store:c,contentId:l}=A(`AlertCenter.Bar`),{isExpanded:u,setExpanded:d}=j(`AlertCenter.Bar`),f=M(c),m=h(c.subscribe,c.getContentMounted,c.getContentMounted),g=f[0]??null,y=g!=null,{isMounted:b,dataState:S,onExitTransitionEnd:w}=z({present:y}),T=p(g);e(()=>{g!=null&&(T.current=g)},[g]);let E=g??T.current,D=p(null);e(()=>{let e=D.current;if(e==null)return;if(g!=null){let t=c.getHost(g.id);t.parentElement!==e&&e.childNodes.length>0&&e.replaceChildren(),x(e,t)&&c.notifyPlacementChange(),c.flushFocusRestore();return}let t=E==null?null:c.getHostSnapshot(E.id);t!=null&&t.parentNode!==e&&e.replaceChildren(t)});let{wrapperRef:O}=H({isMounted:b,store:c,topId:g?.id});if(e(()=>{let e=O.current;c.setTopLabel(y&&e!=null?C(e):``)}),e(()=>{let e=O.current;if(e==null)return;let t=new MutationObserver(()=>{c.setTopLabel(y?C(e):``)});return t.observe(e,{subtree:!0,childList:!0,characterData:!0}),()=>{t.disconnect()}},[c,y,b]),e(()=>()=>{c.setTopLabel(``)},[c]),e(()=>{c.setBarElement(O.current)}),e(()=>()=>{c.setBarElement(null)},[c]),!b||E==null)return null;let k=y?f.length-1:0;return _(`div`,{ref:O,"data-slot":`alert-center-bar-wrapper`,tabIndex:-1,inert:!y,className:`shrink-0 overflow-hidden transition-[height,opacity] duration-200 ease-out [interpolate-size:allow-keywords] starting:h-0 starting:opacity-0 data-state-closed:h-0 data-state-closed:opacity-0 data-state-closed:duration-150 motion-reduce:transition-none`,"data-state":S,onTransitionEnd:w,children:v(a.Root,{ref:o,appearance:`banner`,intent:E.intent,className:n(U,`not-has-data-[slot=alert-description]:[&_[data-alert-dismiss],&_[data-alert-expand]]:top-1/2 not-has-data-[slot=alert-description]:[&_[data-alert-dismiss],&_[data-alert-expand]]:-translate-y-1/2`,`has-data-alert-expand:[&_[data-alert-dismiss]]:right-16 md:has-data-alert-expand:[&_[data-alert-dismiss]]:right-24`,t,E.className),...s,"data-slot":r(i,`alert-center-bar`),"data-placement":`bar`,"data-alert-id":E.id,children:[_(`div`,{ref:D,className:`contents`,"data-slot":`alert-center-bar-mount`}),k>0&&m&&_(a.ExpandButton,{count:k,expanded:u,"aria-controls":l,onClick:()=>d(!u)})]})})},Content:({"aria-label":i=`More alerts`,"aria-labelledby":o,className:s,"data-slot":c,ref:l,...u})=>{let{store:d,contentId:f}=A(`AlertCenter.Content`),{isExpanded:m,setExpanded:h}=j(`AlertCenter.Content`),g=M(d).slice(1),v=g.length>0;e(()=>(d.setContentMounted(!0),()=>{d.setContentMounted(!1)}),[d]);let y=p(v);e(()=>{let e=y.current&&!v;y.current=v,e&&m&&h(!1)},[v,m,h]);let b=p(null),S=t(b,l),{lastFocusedWithinRef:C}=B({containerRef:b,isAttached:v}),w=g.map(e=>e.id).join(` `);return e(()=>{let e=b.current;if(e==null)return;let t=!1;for(let n of e.querySelectorAll(`[data-alert-mount]`)){let e=n.getAttribute(`data-alert-mount`);e!=null&&x(n,d.getHost(e))&&(t=!0)}t&&d.notifyPlacementChange(),d.flushFocusRestore()},[d,w]),e(()=>{let e=C.current;if(e==null)return;if(e.isConnected){let t=b.current;e instanceof HTMLElement&&document.activeElement!==e&&(t==null||!t.contains(e))&&(C.current=null,e.focus({preventScroll:!0}));return}C.current=null;let t=b.current?.querySelector(`[data-alert-dismiss]`);if(t!=null){t.focus();return}let n=d.getBarElement()?.querySelector(`[data-alert-dismiss], [data-alert-expand]`);if(n!=null){n.focus();return}V()},[d,w]),g.length===0?null:_(`div`,{...u,ref:S,"data-slot":r(c,`alert-center-content`),id:f,"data-state":m?`open`:`closed`,className:n(`h-0 overflow-hidden invisible [content-visibility:hidden] transition-[height,visibility,content-visibility] transition-discrete duration-200 ease-out [interpolate-size:allow-keywords] data-state-open:h-auto data-state-open:visible data-state-open:[content-visibility:visible] motion-reduce:transition-none`,s),children:_(`ul`,{"aria-label":o==null?i:void 0,"aria-labelledby":o,className:`flex w-full flex-col`,children:g.map(e=>_(`li`,{children:_(a.Root,{appearance:`banner`,intent:e.intent,className:n(U,e.className),"data-slot":`alert-center-item`,"data-placement":`list`,"data-alert-id":e.id,children:_(`div`,{className:`contents`,"data-alert-mount":e.id})})},e.id))})})},Item:I,DismissIconButton:L};export{W as AlertCenter};