@ngrok/mantle 0.79.3 → 0.81.0

package/dist/alert.d.ts

@@ -1,8 +1,8 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
-import "./index-D47aqlpz.js";
-import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-BvQvT790.js";
-import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
+import "./index-DA4ig3gj.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];
@@ -23,13 +23,118 @@ type AlertProps = ComponentProps<"div"> & {
    */
   appearance?: Appearance;
 };
+/**
+ * Displays a callout for user attention. Root container for all Alert sub-components.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
+ *
+ * @example
+ * ```tsx
+ * <Alert intent="info">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Alert Title</AlertTitle>
+ *      <AlertDismissIconButton />
+ *     <AlertDescription>
+ *       Alert description text.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </Alert>
+ *```
+ */
+declare const Root: ({ appearance, className, intent, ref, ...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 intent="info">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Alert Title</AlertTitle>
+ *     <AlertDismissIconButton />
+ *     <AlertDescription>
+ *       Alert description text.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </Alert>
+ * ```
+ */
+declare const Icon: ({ className, ref, svg, ...props }: AlertIconProps) => import("react").JSX.Element;
+/**
+ * The container for the content slot of an alert. Place the title and description as direct children.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
+ *
+ * @example
+ * ```tsx
+ * <Alert intent="info">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Alert Title</AlertTitle>
+ *     <AlertDismissIconButton />
+ *     <AlertDescription>
+ *       Alert description text.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </Alert>
+ *```
+ */
+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 intent="info">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Alert Title</AlertTitle>
+ *     <AlertDismissIconButton />
+ *     <AlertDescription>
+ *       Alert description text.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </Alert>
+ *```
+ */
+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 intent="info">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Alert Title</AlertTitle>
+ *     <AlertDismissIconButton />
+ *     <AlertDescription>
+ *       Alert description text.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </Alert>
+ * ```
+ */
+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 —
@@ -44,10 +149,7 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" |
    */
   icon?: ReactNode;
 };
-declare const DismissIconButton: {
-  ({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const DismissIconButton: ({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps) => import("react").JSX.Element;
 /**
  * Displays a callout for user attention.
  *
@@ -95,7 +197,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * The container for the content slot of an alert.
    *
@@ -112,7 +214,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
   /**
    * The optional description of an alert.
    *
@@ -129,7 +231,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Description: import("react").ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Description: typeof Description;
   /**
    * An optional dismiss button that can be used to close the alert.
    *
@@ -164,7 +266,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Icon: import("react").ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+  readonly Icon: typeof Icon;
   /**
    * The title of an alert.
    *
@@ -181,7 +283,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & import("react").RefAttributes<HTMLHeadingElement>>;
+  readonly Title: typeof Title;
 };
 //#endregion
 export { Alert };

package/dist/alert.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./icon-button-DV2-GZHf.js";import{createContext as a,forwardRef as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";import{CheckCircleIcon as d}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as f}from"@phosphor-icons/react/Info";import{MegaphoneIcon as p}from"@phosphor-icons/react/Megaphone";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as g}from"@phosphor-icons/react/X";import{cva as _}from"class-variance-authority";const v=a(null),y=u(g,{});function b(){let e=s(v);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const x=_(`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]:text-danger-700 [&_a]: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]:text-important-700 [&_a]: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]:text-info-700 [&_a]: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]:text-success-700 [&_a]: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]:text-warning-700 [&_a]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}}}),S=o(({appearance:t=`default`,className:n,intent:r,...i},a)=>{let o=c(()=>({intent:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,"data-slot":`alert`,className:e(x({appearance:t,intent:r}),n),...i})})});S.displayName=`Alert`;const C={danger:u(m,{}),important:u(p,{mirrored:!0}),info:u(f,{}),success:u(d,{}),warning:u(h,{})},w=o(({className:n,svg:r,...i},a)=>{let o=b(),s=C[o.intent];return u(t,{ref:a,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:r??s,...i})});w.displayName=`AlertIcon`;const T=o(({className:t,...n},r)=>u(`div`,{ref:r,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));T.displayName=`AlertContent`;const E=o(({asChild:t=!1,className:r,...i},a)=>u(t?n:`h5`,{ref:a,"data-slot":`alert-title`,className:e(`font-medium`,r),...i}));E.displayName=`AlertTitle`;const D=o(({asChild:t=!1,className:r,...i},a)=>u(t?n:`div`,{ref:a,"data-slot":`alert-description`,className:e(`text-sm`,r),...i}));D.displayName=`AlertDescription`;const O=e=>`var(--color-${e}-700)`,k=e=>`var(--color-${e}-800)`,A=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,j=({size:t=`sm`,type:n=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=y,style:l,...d})=>{let f=b();return u(i,{appearance:o,icon:c,intent:`neutral`,label:a,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,s),type:n,style:r({...l,"--alert-dismiss-icon-color":O(f.intent),"--alert-dismiss-icon-hover-color":k(f.intent),"--alert-dismiss-hover-bg":A(f.intent)}),...d})};j.displayName=`AlertDismissIconButton`;const M={Root:S,Content:T,Description:D,DismissIconButton:j,Icon:w,Title:E};export{M as Alert};
+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-BAno7KIU.js";import{createContext as a,useContext as o,useMemo as s}from"react";import c from"tiny-invariant";import{jsx as l}from"react/jsx-runtime";import{CheckCircleIcon as u}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as d}from"@phosphor-icons/react/Info";import{MegaphoneIcon as f}from"@phosphor-icons/react/Megaphone";import{WarningIcon as p}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as m}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{cva as g}from"class-variance-authority";const _=a(null),v=l(h,{});function y(){let e=o(_);return c(e,`useAlertContext hook used outside of Alert parent!`),e}const b=g(`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]:text-danger-700 [&_a]: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]:text-important-700 [&_a]: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]:text-info-700 [&_a]: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]:text-success-700 [&_a]: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]:text-warning-700 [&_a]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}}}),x=({appearance:t=`default`,className:n,intent:r,ref:i,...a})=>{let o=s(()=>({intent:r}),[r]);return l(_.Provider,{value:o,children:l(`div`,{ref:i,"data-slot":`alert`,className:e(b({appearance:t,intent:r}),n),...a})})},S={danger:l(p,{}),important:l(f,{mirrored:!0}),info:l(d,{}),success:l(u,{}),warning:l(m,{})},C=({className:n,ref:r,svg:i,...a})=>{let o=y(),s=S[o.intent];return l(t,{ref:r,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:i??s,...a})},w=({className:t,ref:n,...r})=>l(`div`,{ref:n,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...r}),T=({asChild:t=!1,className:r,ref:i,...a})=>l(t?n:`h5`,{ref:i,"data-slot":`alert-title`,className:e(`font-medium`,r),...a}),E=({asChild:t=!1,className:r,ref:i,...a})=>l(t?n:`div`,{ref:i,"data-slot":`alert-description`,className:e(`text-sm`,r),...a}),D=e=>`var(--color-${e}-700)`,O=e=>`var(--color-${e}-800)`,k=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,A={Root:x,Content:w,Description:E,DismissIconButton:({size:t=`sm`,type:n=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=v,style:u,...d})=>{let f=y();return l(i,{appearance:o,icon:c,intent:`neutral`,label:a,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,s),type:n,style:r({...u,"--alert-dismiss-icon-color":D(f.intent),"--alert-dismiss-icon-hover-color":O(f.intent),"--alert-dismiss-hover-bg":k(f.intent)}),...d})},Icon:C,Title:T};export{A as Alert};

package/dist/anchor-DfeXTpKW.js

@@ -0,0 +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};

package/dist/anchor.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/anchor/types.d.ts
 /**
@@ -95,7 +95,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * </Anchor>
  * ```
  */
-declare const Anchor: import("react").ForwardRefExoticComponent<Omit<AnchorProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const Anchor: ({ asChild, children, className, rel: propRel, icon, iconPlacement, ref, ...props }: AnchorProps) => import("react").JSX.Element;
 /**
  * Resolves the `rel` attribute to a string.
  *

package/dist/anchor.js

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