@ngrok/mantle 0.81.0 → 0.82.0

package/dist/alert-center.d.ts

@@ -0,0 +1,449 @@
+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. */
+  open?: boolean;
+  /** Uncontrolled initial expanded state of the additional-alert list. */
+  defaultOpen?: boolean;
+  /** Called when the additional-alert list expands or collapses. */
+  onOpenChange?: (open: boolean) => void;
+  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.
+ *
+ * @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. Two mounted
+   * items sharing an id is an authoring error — the last registration wins.
+   */
+  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.
+ *
+ * @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> & {
+  /**
+   * 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: `Alert.Root`'s existing expand-aware CSS seats it beside the bar's
+ * expand control, and {@link singleLineBarControls} re-centers it in a
+ * single-line bar.
+ *
+ * @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: ({ label, ref, ...props }: AlertCenterDismissIconButtonProps) => import("react").JSX.Element;
+type AlertCenterBarProps = Omit<ComponentProps<typeof Alert.Root>, "appearance" | "intent" | "children"> & {
+  /** 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.
+ *
+ * @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">
+ *     …
+ *   </AlertCenter.Item>
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const Bar: ({ className, ref, ...props }: AlertCenterBarProps) => import("react").JSX.Element | null;
+type AlertCenterContentProps = Omit<ComponentProps<"div">, "children" | "id"> & {
+  /** 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.
+ *
+ * @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="transfer-limit" intent="warning">
+ *     …
+ *   </AlertCenter.Item>
+ * </AlertCenter.Root>
+ * ```
+ */
+declare const Content: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, 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.
+ *
+ * @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.Body>…</AppLayout.Body>
+ * </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.
+   *
+   * @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">
+   *     …
+   *   </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.
+   *
+   * @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">
+   *     …
+   *   </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.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert-center#alertcentercontent
+   *
+   * @example
+   * ```tsx
+   * <AlertCenter.Root>
+   *   <AlertCenter.Bar />
+   *   <AlertCenter.Content />
+   *   <AlertCenter.Item id="transfer-limit" intent="warning">
+   *     …
+   *   </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.
+   *
+   * @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.
+   *
+   * @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{n as r,t as i}from"./alert-QMs0PqMq.js";import{createContext as a,useCallback as o,useContext as s,useEffect as c,useId as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";import h from"tiny-invariant";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{createPortal as v}from"react-dom";const y={danger:5,warning:4,important:3,info:2,success:1};function b(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 x(e){return e.replace(/\s+/g,` `).trim()}function S(e){let t=e.querySelector(`[data-slot="alert-title"]`);if(t==null)return``;let n=t.cloneNode(!0);if(!(n instanceof Element))return x(t.textContent??``);for(let e of n.querySelectorAll(`button`))e.remove();let r=x(n.textContent??``);for(let e of n.querySelectorAll(`a`))e.remove();let i=x(n.textContent??``);return i===``?r:i}function C(e){return e.toSorted((e,t)=>y[t.intent]-y[e.intent]||e.sequence-t.sequence)}function w(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 T=[];var E=class{#e=new Set;#t=new Map;#n=new Map;#r=new Map;#i=0;#a=T;#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){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=C([...this.#t.values()]),this.#p()}#p(){for(let e of this.#e)e()}};const D=a(null),O=a(null);function k(e){let t=s(D);return h(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}function A(e){let t=s(O);return h(t,`${e} must be rendered inside <AlertCenter.Root>.`),t}const j=e=>m(e.subscribe,e.getSnapshot,e.getSnapshot),M=a(!1);function N({store:e}){let t=j(e);return g(`div`,{className:`sr-only`,role:`status`,"aria-live":`polite`,children:w(m(e.subscribe,e.getTopLabel,e.getTopLabel),t.length)})}const P=({children:e,defaultOpen:t,onOpenChange:n,open:r})=>{let[i]=p(()=>new E),a=l(),[s,c]=p(t??!1),d=r??s,f=o(e=>{r??c(e),n?.(e)},[r,n]),m=u(()=>({store:i,contentId:a}),[i,a]),h=u(()=>({isExpanded:d,setExpanded:f}),[d,f]);return _(D.Provider,{value:m,children:[g(O.Provider,{value:h,children:e}),g(N,{store:i})]})},F=({children:t,className:n,id:i,intent:a})=>{let{store:o}=k(`AlertCenter.Item`);h(!s(M),`AlertCenter.Item cannot be rendered inside another item's children.`);let[c,l]=p(null);return e(()=>{l(o.getHost(i))},[o,i]),e(()=>o.register({id:i,intent:a,className:n}),[o,i,a,n]),e(()=>{o.captureHostSnapshot(i)}),c==null?null:v(g(r,{intent:a,children:g(M.Provider,{value:!0,children:t})}),c)},I=({label:n,ref:r,...a})=>{h(s(M),`AlertCenter.DismissIconButton must be composed inside an <AlertCenter.Item>'s children.`);let{store:o}=k(`AlertCenter.DismissIconButton`);m(o.subscribe,o.getPlacementVersion,o.getPlacementVersion);let c=f(null),l=t(c,r),[u,d]=p(null);return e(()=>{if(n!=null)return;let e=c.current?.closest(`[data-alert-id]`),t=e==null?``:S(e);d(t===``?null:`Dismiss ${t}`)}),g(i.DismissIconButton,{ref:l,label:n??u??void 0,...a})};function L(e,t){switch(t){case`show`:return`open`;case`hide`:return e===`closed`?`closed`:`closing`;case`exited`:return e===`closing`?`closed`:e}}function R({present:t}){let[n,r]=d(L,t?`open`:`closed`);e(()=>{r(t?`show`:`hide`)},[t]),c(()=>{if(n!==`closing`)return;let e=window.setTimeout(()=>r(`exited`),200);return()=>window.clearTimeout(e)},[n]);let i=o(e=>{e.target===e.currentTarget&&e.propertyName===`height`&&r(`exited`)},[]);return{isMounted:n!==`closed`,dataState:n===`open`?`open`:`closed`,onExitTransitionEnd:i}}function z({containerRef:t,isAttached:n}){let r=f(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 B(){let e=document.querySelector(`main, [role="main"]`);e!=null&&(e.hasAttribute(`tabindex`)||(e.tabIndex=-1),e.focus({preventScroll:!0}))}function V({isMounted:t,store:n,topId:r}){let i=f(null),{lastFocusedWithinRef:a}=z({containerRef:i,isAttached:t}),o=f(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){B();return}s!=null&&(s.querySelector(`[data-slot="alert-dismiss-icon-button"], [data-slot="alert-expand-button"]`)??s).focus()},[n,r]),{wrapperRef:i}}const H=`gap-2 py-2 pr-2 [&_[data-slot=alert-icon]]:shrink-0`,U={Root:P,Bar:({className:t,ref:r,...a})=>{let{store:o,contentId:s}=k(`AlertCenter.Bar`),{isExpanded:c,setExpanded:l}=A(`AlertCenter.Bar`),u=j(o),d=m(o.subscribe,o.getContentMounted,o.getContentMounted),p=u[0]??null,h=p!=null,{isMounted:v,dataState:y,onExitTransitionEnd:x}=R({present:h}),C=f(p);e(()=>{p!=null&&(C.current=p)},[p]);let w=p??C.current,T=f(null);e(()=>{let e=T.current;if(e==null)return;if(p!=null){let t=o.getHost(p.id);t.parentElement!==e&&e.childNodes.length>0&&e.replaceChildren(),b(e,t)&&o.notifyPlacementChange(),o.flushFocusRestore();return}let t=w==null?null:o.getHostSnapshot(w.id);t!=null&&t.parentNode!==e&&e.replaceChildren(t)});let{wrapperRef:E}=V({isMounted:v,store:o,topId:p?.id});if(e(()=>{let e=E.current;o.setTopLabel(h&&e!=null?S(e):``)}),e(()=>{let e=E.current;if(e==null)return;let t=new MutationObserver(()=>{o.setTopLabel(h?S(e):``)});return t.observe(e,{subtree:!0,childList:!0,characterData:!0}),()=>{t.disconnect()}},[o,h,v]),e(()=>()=>{o.setTopLabel(``)},[o]),e(()=>{o.setBarElement(E.current)}),e(()=>()=>{o.setBarElement(null)},[o]),!v||w==null)return null;let D=h?u.length-1:0;return g(`div`,{ref:E,tabIndex:-1,inert:!h,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":y,onTransitionEnd:x,children:_(i.Root,{ref:r,appearance:`banner`,intent:w.intent,className:n(H,`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`,t,w.className),...a,"data-slot":`alert-center-bar`,"data-placement":`bar`,"data-alert-id":w.id,children:[g(`div`,{ref:T,className:`contents`,"data-slot":`alert-center-bar-mount`}),D>0&&d&&g(i.ExpandButton,{count:D,expanded:c,"aria-controls":s,onClick:()=>l(!c)})]})})},Content:({"aria-label":r=`More alerts`,"aria-labelledby":a,className:o,ref:s,...c})=>{let{store:l,contentId:u}=k(`AlertCenter.Content`),{isExpanded:d,setExpanded:p}=A(`AlertCenter.Content`),m=j(l).slice(1),h=m.length>0;e(()=>(l.setContentMounted(!0),()=>{l.setContentMounted(!1)}),[l]);let _=f(h);e(()=>{let e=_.current&&!h;_.current=h,e&&d&&p(!1)},[h,d,p]);let v=f(null),y=t(v,s),{lastFocusedWithinRef:x}=z({containerRef:v,isAttached:h}),S=m.map(e=>e.id).join(` `);return e(()=>{let e=v.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&&b(n,l.getHost(e))&&(t=!0)}t&&l.notifyPlacementChange(),l.flushFocusRestore()},[l,S]),e(()=>{let e=x.current;if(e==null)return;if(e.isConnected){let t=v.current;e instanceof HTMLElement&&document.activeElement!==e&&(t==null||!t.contains(e))&&(x.current=null,e.focus({preventScroll:!0}));return}x.current=null;let t=v.current?.querySelector(`[data-slot="alert-dismiss-icon-button"]`);if(t!=null){t.focus();return}let n=l.getBarElement()?.querySelector(`[data-slot="alert-dismiss-icon-button"], [data-slot="alert-expand-button"]`);if(n!=null){n.focus();return}B()},[l,S]),m.length===0?null:g(`div`,{...c,ref:y,"data-slot":`alert-center-content`,id:u,"data-state":d?`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`,o),children:g(`ul`,{"aria-label":a==null?r:void 0,"aria-labelledby":a,className:`flex w-full flex-col`,children:m.map(e=>g(`li`,{children:g(i.Root,{appearance:`banner`,intent:e.intent,className:n(H,e.className),"data-slot":`alert-center-item`,"data-placement":`list`,"data-alert-id":e.id,children:g(`div`,{className:`contents`,"data-alert-mount":e.id})})},e.id))})})},Item:F,DismissIconButton:I};export{U as AlertCenter};

package/dist/alert-dialog.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./button-DjpEKt2X.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-trJDqIXJ.js";import{createContext as f,useContext as p,useMemo as m}from"react";import h from"tiny-invariant";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{InfoIcon as v}from"@phosphor-icons/react/Info";import{WarningIcon as y}from"@phosphor-icons/react/Warning";const b=f(null);function x(){let e=p(b);return h(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function S({intent:e,...t}){let n=m(()=>({intent:e}),[e]);return g(b.Provider,{value:n,children:g(c,{...t})})}const C=({ref:e,...t})=>g(a,{ref:e,"data-slot":`alert-dialog-trigger`,...t}),w=i,T=({className:t,ref:n,...r})=>g(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...r,ref:n}),E=({className:t,preferredWidth:n=`max-w-md`,ref:r,...i})=>_(w,{children:[g(T,{}),g(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:g(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:r,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...i})})]}),D=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:i,...a}),O=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:i,...a}),k=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:i,...a}),A=({className:t,ref:n,...r})=>g(u,{ref:n,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...r}),j=({className:t,ref:n,...r})=>g(l,{ref:n,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...r}),M={danger:`danger`,info:`neutral`},N=({appearance:e=`filled`,intent:t,ref:n,...i})=>{let a=x(),o=M[a.intent];return g(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:n,...i})},P=({appearance:t=`outlined`,className:n,intent:i=`neutral`,ref:a,...o})=>g(d,{asChild:!0,children:g(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:a,...o})}),F={danger:g(y,{}),info:g(v,{})},I={danger:`text-danger-600`,info:`text-accent-600`},L={Root:S,Action:N,Body:D,Cancel:P,Close:({ref:e,...t})=>g(d,{ref:e,"data-slot":`alert-dialog-close`,...t}),Content:E,Description:j,Footer:k,Header:O,Icon:({className:n,ref:r,svg:i,...a})=>{let o=x(),s=I[o.intent],c=F[o.intent];return g(t,{ref:r,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:i??c,...a})},Title:A,Trigger:C};export{L as AlertDialog};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-Dpsqz16D.js";import{t as r}from"./button-BUospUB3.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-Dv-3snU3.js";import{createContext as f,useContext as p,useMemo as m}from"react";import h from"tiny-invariant";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{InfoIcon as v}from"@phosphor-icons/react/Info";import{WarningIcon as y}from"@phosphor-icons/react/Warning";const b=f(null);function x(){let e=p(b);return h(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function S({intent:e,...t}){let n=m(()=>({intent:e}),[e]);return g(b.Provider,{value:n,children:g(c,{...t})})}const C=({ref:e,...t})=>g(a,{ref:e,"data-slot":`alert-dialog-trigger`,...t}),w=i,T=({className:t,ref:n,...r})=>g(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...r,ref:n}),E=({className:t,preferredWidth:n=`max-w-md`,ref:r,...i})=>_(w,{children:[g(T,{}),g(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:g(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:r,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...i})})]}),D=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:i,...a}),O=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:i,...a}),k=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:i,...a}),A=({className:t,ref:n,...r})=>g(u,{ref:n,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...r}),j=({className:t,ref:n,...r})=>g(l,{ref:n,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...r}),M={danger:`danger`,info:`neutral`},N=({appearance:e=`filled`,intent:t,ref:n,...i})=>{let a=x(),o=M[a.intent];return g(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:n,...i})},P=({appearance:t=`outlined`,className:n,intent:i=`neutral`,ref:a,...o})=>g(d,{asChild:!0,children:g(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:a,...o})}),F={danger:g(y,{}),info:g(v,{})},I={danger:`text-danger-600`,info:`text-accent-600`},L={Root:S,Action:N,Body:D,Cancel:P,Close:({ref:e,...t})=>g(d,{ref:e,"data-slot":`alert-dialog-close`,...t}),Content:E,Description:j,Footer:k,Header:O,Icon:({className:n,ref:r,svg:i,...a})=>{let o=x(),s=I[o.intent],c=F[o.intent];return g(t,{ref:r,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:i??c,...a})},Title:A,Trigger:C};export{L as AlertDialog};