@ngrok/mantle 0.81.1 → 0.82.1

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-DpNWVci8.js";import{t as r}from"./button-Cnja9Bsr.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-D-9GIFWb.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};

package/dist/alert-vwFd7qdp.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-DpNWVci8.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./button-Cnja9Bsr.js";import{t as a}from"./button-IlxHhjPK.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};

package/dist/alert.d.ts

@@ -1,391 +1,2 @@
-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
+import { t as Alert } from "./alert-BWwNPOMI.js";
 export { Alert };

package/dist/alert.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"./types-D85fCNV3.js";import{t as i}from"./button-DjpEKt2X.js";import{t as a}from"./button-BAno7KIU.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=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:``}}}),w=({appearance:t=`default`,className:n,intent:i,ref:a,style:o,...s})=>{let c=l(()=>({intent:i}),[i]);return d(b.Provider,{value:c,children:d(`div`,{ref:a,"data-slot":`alert`,className:e(C({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":A(i),"--alert-control-hover-color":j(i),"--alert-control-hover-bg":M(i),...o}),...s})})},T={danger:d(g,{}),important:d(h,{mirrored:!0}),info:d(m,{}),success:d(p,{}),warning:d(_,{})},E=({className:n,ref:r,svg:i,...a})=>{let o=S(),s=T[o.intent];return d(t,{ref:r,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:i??s,...a})},D=({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}),O=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`h5`,{ref:i,"data-slot":`alert-title`,className:e(`font-medium`,r),...a}),k=({asChild:t=!1,className:r,ref:i,...a})=>d(t?n:`div`,{ref:i,"data-slot":`alert-description`,className:e(`text-sm`,r),...a}),A=e=>`var(--color-${e}-700)`,j=e=>`var(--color-${e}-800)`,M=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,N={Root:w,Content:D,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:k,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:E,Title:O};export{N as Alert};
+import{t as e}from"./alert-vwFd7qdp.js";export{e as Alert};

package/dist/{anchor-DfeXTpKW.js → anchor-3OGK2UKU.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-CDk0Bb9z.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),d=({asChild:e,children:d,className:p,rel:m,icon:h,iconPlacement:g=`start`,ref:_,...v})=>{let y=f(m),b={"data-slot":`anchor`,className:u(p),ref:_,rel:y,...v};if(e){let e=r.only(d);o(a(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{...b,children:i(e,{},l(s,{children:[h&&g===`start`&&c(t,{className:`inline-block mr-1.5`,svg:h}),u,h&&g===`end`&&c(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return l(`a`,{...b,children:[h&&g===`start`&&c(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&c(t,{className:`inline-block ml-1.5`,svg:h})]})};function f(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{u as n,f as r,d as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-DpNWVci8.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),d=({asChild:e,children:d,className:p,rel:m,icon:h,iconPlacement:g=`start`,ref:_,...v})=>{let y=f(m),b={"data-slot":`anchor`,className:u(p),ref:_,rel:y,...v};if(e){let e=r.only(d);o(a(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{...b,children:i(e,{},l(s,{children:[h&&g===`start`&&c(t,{className:`inline-block mr-1.5`,svg:h}),u,h&&g===`end`&&c(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return l(`a`,{...b,children:[h&&g===`start`&&c(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&c(t,{className:`inline-block ml-1.5`,svg:h})]})};function f(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{u as n,f as r,d as t};

package/dist/anchor.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./anchor-DfeXTpKW.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};
+import{n as e,r as t,t as n}from"./anchor-3OGK2UKU.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};