@ngrok/mantle 0.81.0 → 0.82.0

package/dist/accordion.d.ts

@@ -78,7 +78,7 @@ type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit
  * other divider in the system. Disable the dividers with `divide-y-0` on the root
  * (e.g. pair it with `space-y-*` for a spaced-card layout).
  *
- * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion
+ * @see https://mantle.ngrok.com/components/data-display/accordion#accordionroot
  *
  * @example
  * <Accordion.Root type="single" defaultValue="shipping">
@@ -102,7 +102,7 @@ declare const Root: (props: AccordionRootProps) => import("react").JSX.Element;
  * Because the item is just a `<div>`, its header can be any layout — e.g. a flex
  * row with the {@link Trigger} alongside a separate, non-toggling action button.
  *
- * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-item
+ * @see https://mantle.ngrok.com/components/data-display/accordion#accordionitem
  *
  * @example
  * <Accordion.Root type="single" defaultValue="item-1">
@@ -128,7 +128,7 @@ declare const Item: ({ children, value, ref, ...props }: ComponentProps<"div"> &
  * role varies). Place the {@link TriggerIcon} as the last child so the default
  * `justify-between` layout pushes it to the trailing edge.
  *
- * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-trigger
+ * @see https://mantle.ngrok.com/components/data-display/accordion#accordiontrigger
  *
  * @example
  * <Accordion.Root type="single" defaultValue="item-1">
@@ -150,7 +150,7 @@ declare const Trigger: ({ className, children, onClick, ref, ...props }: Omit<Co
  * override it with any icon (the rotation-on-open still applies; override
  * `className` to change that).
  *
- * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-trigger-icon
+ * @see https://mantle.ngrok.com/components/data-display/accordion#accordiontriggericon
  *
  * @example
  * // Default caret
@@ -197,7 +197,7 @@ declare const TriggerIcon: ({ className, svg, ...props }: Omit<IconProps, "svg">
  * the section when the browser reveals a match. It is flow content, so it may
  * contain anything — including interactive elements.
  *
- * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-content
+ * @see https://mantle.ngrok.com/components/data-display/accordion#accordioncontent
  *
  * @example
  * <Accordion.Root type="single" defaultValue="item-1">
@@ -226,7 +226,7 @@ declare const Content: ({ className, children, ref, ...props }: ComponentProps<"
  * Override `className` to retune the padding (e.g. `pb-0`, `px-6`); `cx` resolves
  * last-wins.
  *
- * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-body
+ * @see https://mantle.ngrok.com/components/data-display/accordion#accordionbody
  *
  * @example
  * <Accordion.Root type="single" defaultValue="item-1">

package/dist/accordion.js

@@ -1 +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"./icon-lZ48P8Nn.js";import{t as i}from"./slot-CDk0Bb9z.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})},D=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};
+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"./icon-lZ48P8Nn.js";import{t as i}from"./slot-Dpsqz16D.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})},D=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.81.0",
+	"version": "0.82.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -18,8 +18,10 @@
 	"subpaths": [
 		"@ngrok/mantle/accordion",
 		"@ngrok/mantle/alert",
+		"@ngrok/mantle/alert-center",
 		"@ngrok/mantle/alert-dialog",
 		"@ngrok/mantle/anchor",
+		"@ngrok/mantle/app-layout",
 		"@ngrok/mantle/area-chart",
 		"@ngrok/mantle/badge",
 		"@ngrok/mantle/bar-chart",
@@ -69,6 +71,7 @@
 		"@ngrok/mantle/selectable-list",
 		"@ngrok/mantle/separator",
 		"@ngrok/mantle/sheet",
+		"@ngrok/mantle/sidebar",
 		"@ngrok/mantle/skeleton",
 		"@ngrok/mantle/skip-to-main-link",
 		"@ngrok/mantle/slider",

package/dist/alert-BWwNPOMI.d.ts

@@ -0,0 +1,391 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
+import { r as ButtonProps } from "./button-DARFK2KJ.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/alert/alert.d.ts
+declare const intents: readonly ["danger", "important", "info", "success", "warning"];
+type AlertIntent = (typeof intents)[number];
+declare const appearances: readonly ["banner", "default"];
+type Appearance = (typeof appearances)[number];
+type AlertProps = ComponentProps<"div"> & {
+  /**
+   * The intent of the Alert — the status its color communicates to the user,
+   * determining the color and styling of the Alert.
+   */
+  intent: AlertIntent;
+  /**
+   * Controls the visual style of the Alert.
+   * - "default" provides standard rounded corners and borders.
+   * - "banner" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.
+   *
+   * @default "default"
+   */
+  appearance?: Appearance;
+};
+/**
+ * Displays a callout for user attention. Root container for all Alert sub-components.
+ *
+ * Trailing controls inherit these public CSS variables:
+ *
+ * | Variable | Default | Purpose |
+ * | --- | --- | --- |
+ * | `--alert-control-color` | `var(--color-<intent>-700)` | Control text and icon color. |
+ * | `--alert-control-hover-color` | `var(--color-<intent>-800)` | Control text and icon color on hover. |
+ * | `--alert-control-hover-bg` | `color-mix(in oklab, var(--color-<intent>-500) 10%, transparent)` | Control background on hover. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Root: ({ appearance, className, intent, ref, style, ...props }: AlertProps) => import("react").JSX.Element;
+type AlertIconProps = Omit<SvgAttributes, "children"> & {
+  /**
+   * An optional icon that renders in place of the default icon for the Alert intent.
+   */
+  svg?: ReactNode;
+};
+/**
+ * An optional icon that visually represents the intent of the Alert.
+ *
+ * The default rendered icon be overridden with a custom icon using the `svg` prop.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const Icon: ({ className, ref, svg, ...props }: AlertIconProps) => import("react").JSX.Element;
+/**
+ * The container for the content slot of an alert. Place the title, description,
+ * and trailing controls as direct children.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Content: ({ className, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+type AlertTitleProps = ComponentProps<"h5"> & WithAsChild;
+/**
+ * The title of an alert. Default renders as an h5 element, use asChild to render something else.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alerttitle
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Title: ({ asChild, className, ref, ...props }: AlertTitleProps) => import("react").JSX.Element;
+type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
+/**
+ * The optional description of an alert.
+ * Renders as a `div` by default, but can be changed to any other element using
+ * the `asChild` prop.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertdescription
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const Description: ({ asChild, className, ref, ...props }: AlertDescriptionProps) => import("react").JSX.Element;
+type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent">> & {
+  /**
+   * The visual style of the dismiss button. Optional here —
+   * `Alert.DismissIconButton` defaults to `"ghost"` so the dismiss affordance
+   * stays visually quiet inside the Alert.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonAppearance;
+  /**
+   * An optional icon to render inside the dismiss button. Defaults to an X icon.
+   */
+  icon?: ReactNode;
+};
+/**
+ * A compact, trailing control for dismissing an alert.
+ *
+ * It inherits `--alert-control-color`, `--alert-control-hover-color`, and
+ * `--alert-control-hover-bg` from `Alert.Root`, shared with
+ * `Alert.ExpandButton` when both controls are composed together.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertdismissiconbutton
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="warning">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Usage limit approaching</Alert.Title>
+ *     <Alert.DismissIconButton onClick={dismiss} />
+ *     <Alert.ExpandButton count={2} expanded={isExpanded} onClick={toggle} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const DismissIconButton: ({ size, type, label, appearance, className, icon, ...props }: AlertDismissIconButtonProps) => import("react").JSX.Element;
+type AlertExpandButtonProps = Omit<ButtonProps, "appearance" | "asChild" | "children" | "icon" | "iconPlacement" | "intent" | "size"> & {
+  /** The number of alerts hidden by a collapsed alert center. */
+  count: number;
+  /** Whether the alerts controlled by this button are currently visible. */
+  expanded: boolean;
+};
+/**
+ * A compact, trailing control for expanding or collapsing related alerts.
+ *
+ * It occupies the trailing control area alongside `Alert.DismissIconButton`
+ * when both are present, and marks the alert so `Alert.Content` reserves room
+ * for its plus-prefixed count and caret on narrow viewports. It shares the
+ * `--alert-control-*` color variables from `Alert.Root` with the dismiss
+ * control.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertexpandbutton
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="warning">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Usage limit approaching</Alert.Title>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={isExpanded} onClick={toggle} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const ExpandButton: ({ count, expanded, className, ...props }: AlertExpandButtonProps) => import("react").JSX.Element;
+/**
+ * Displays a callout for user attention.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert
+ *
+ * @example
+ * Composition:
+ * ```
+ * Alert.Root
+ * ├── Alert.Icon
+ * ├── Alert.Content
+ *     ├── Alert.Title
+ *     ├── Alert.Description
+ *     ├── Alert.DismissIconButton
+ *     └── Alert.ExpandButton
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Alert: {
+  /**
+   * The root container of the alert component.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The container for the content slot of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * A compact trailing control for expanding or collapsing related alerts.
+   * It inherits the `--alert-control-color`, `--alert-control-hover-color`, and
+   * `--alert-control-hover-bg` variables from `Alert.Root`, shared with the
+   * dismiss control.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertexpandbutton
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="warning">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Usage limit approaching</Alert.Title>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={isExpanded} onClick={toggle} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly ExpandButton: typeof ExpandButton;
+  /**
+   * The optional description of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdescription
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Description: typeof Description;
+  /**
+   * An optional dismiss button that can be used to close the alert.
+   * It inherits the `--alert-control-color`, `--alert-control-hover-color`, and
+   * `--alert-control-hover-bg` variables from `Alert.Root`, shared with the
+   * expand control.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdismissiconbutton
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.DismissIconButton />
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly DismissIconButton: typeof DismissIconButton;
+  /**
+   * An optional icon that visually represents the intent of the Alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Icon: typeof Icon;
+  /**
+   * The title of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerttitle
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Title: typeof Title;
+};
+//#endregion
+export { Alert as t };

package/dist/alert-QMs0PqMq.js

@@ -0,0 +1 @@
+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"./types-D85fCNV3.js";import{t as i}from"./button-BUospUB3.js";import{t as a}from"./button-C0S8RbaJ.js";import{CaretDownIcon as o}from"@phosphor-icons/react/CaretDown";import{createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as m}from"@phosphor-icons/react/Info";import{MegaphoneIcon as h}from"@phosphor-icons/react/Megaphone";import{WarningIcon as g}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as _}from"@phosphor-icons/react/WarningDiamond";import{XIcon as v}from"@phosphor-icons/react/X";import{cva as y}from"class-variance-authority";const b=s(null),x=d(v,{});function S(){let e=c(b);return u(e,`useAlertContext hook used outside of Alert parent!`),e}const C=({children:e,intent:t})=>{let n=l(()=>({intent:t}),[t]);return d(b.Provider,{value:n,children:e})},w=y(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{intent:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a:not([data-slot=button])]:text-danger-700 [&_a:not([data-slot=button])]:underline`,important:`border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a:not([data-slot=button])]:text-important-700 [&_a:not([data-slot=button])]:underline`,info:`border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a:not([data-slot=button])]:text-info-700 [&_a:not([data-slot=button])]:underline`,success:`border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a:not([data-slot=button])]:text-success-700 [&_a:not([data-slot=button])]:underline`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a:not([data-slot=button])]:text-warning-700 [&_a:not([data-slot=button])]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}}}),T=({appearance:t=`default`,className:n,intent:i,ref:a,style:o,...s})=>d(C,{intent:i,children:d(`div`,{ref:a,"data-slot":`alert`,className:e(w({appearance:t,intent:i}),`has-data-alert-dismiss:pr-10`,`has-data-alert-expand:[&_[data-slot=alert-dismiss-icon-button]]:right-16`,`md:has-data-alert-expand:[&_[data-slot=alert-dismiss-icon-button]]:right-24`,`has-data-alert-expand:[&_[data-slot=alert-content]]:pr-12`,`md:has-data-alert-expand:[&_[data-slot=alert-content]]:pr-[5.5rem]`,n),style:r({"--alert-control-color":j(i),"--alert-control-hover-color":M(i),"--alert-control-hover-bg":N(i),...o}),...s})}),E={danger:d(g,{}),important:d(h,{mirrored:!0}),info:d(m,{}),success:d(p,{}),warning:d(_,{})},D=({className:n,ref:r,svg:i,...a})=>{let o=S(),s=E[o.intent];return d(t,{ref:r,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:i??s,...a})},O=({className:t,ref:n,...r})=>d(`div`,{ref:n,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...r}),k=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`h5`,{ref:i,"data-slot":`alert-title`,className:e(`font-medium`,r),...a}),A=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`div`,{ref:i,"data-slot":`alert-description`,className:e(`text-sm`,r),...a}),j=e=>`var(--color-${e}-700)`,M=e=>`var(--color-${e}-800)`,N=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,P={Root:T,Content:O,ExpandButton:({count:t,expanded:n,className:r,...a})=>f(i,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,"aria-expanded":n,"aria-label":n?`Collapse additional alerts`:`Show ${t} more ${t===1?`alert`:`alerts`}`,"data-slot":`alert-expand-button`,"data-alert-expand":!0,className:e(`right-1.5 top-1.5 absolute gap-1 px-1.5`,`text-[var(--alert-control-color,currentColor)]`,`not-disabled:hover:bg-[var(--alert-control-hover-bg,transparent)] not-disabled:hover:text-[var(--alert-control-hover-color,currentColor)]`,r),...a,children:[f(`span`,{className:`min-w-[2ch] text-center tabular-nums`,children:[`+`,t]}),d(`span`,{className:`hidden md:inline`,children:`more`}),d(o,{weight:`bold`,className:e(`size-4 transition-transform ease-out duration-150`,n&&`-rotate-180`)})]}),Description:A,DismissIconButton:({size:t=`sm`,type:n=`button`,label:r=`Dismiss Alert`,appearance:i=`ghost`,className:o,icon:s=x,...c})=>d(a,{appearance:i,icon:s,intent:`neutral`,label:r,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-[var(--alert-control-color,currentColor)]`,`not-disabled:hover:bg-[var(--alert-control-hover-bg,transparent)] not-disabled:hover:text-[var(--alert-control-hover-color,currentColor)]`,o),type:n,...c}),Icon:D,Title:k};export{C as n,P as t};