@ngrok/mantle 0.79.3 → 0.80.0

package/dist/alert.d.ts

@@ -1,8 +1,8 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.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 "./index-DA4ig3gj.js";
+import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-C1AfGnQx.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,133 @@ 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;
+  displayName: string;
+};
 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;
+  displayName: string;
+};
+/**
+ * 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;
+  displayName: string;
+};
+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;
+  displayName: string;
+};
 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;
+  displayName: string;
+};
 type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent">> & {
   /**
    * The visual style of the dismiss button. Optional here —
@@ -95,7 +215,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 +232,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 +249,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 +284,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 +301,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"./svg-only-d-nMCfAI.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./icon-button-DiOhreJD.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})})};x.displayName=`Alert`;const 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})};C.displayName=`AlertIcon`;const 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});w.displayName=`AlertContent`;const 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});T.displayName=`AlertTitle`;const 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});E.displayName=`AlertDescription`;const 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=({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})};A.displayName=`AlertDismissIconButton`;const j={Root:x,Content:w,Description:E,DismissIconButton:A,Icon:C,Title:T};export{j as Alert};

package/dist/anchor-_2meGDfj.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CGgMKpJg.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-_2meGDfj.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};

package/dist/as-child-D23mGo4f.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+//#region src/types/as-child.d.ts
+/**
+ * Utility type for adding the optional `asChild` boolean prop to a component.
+ */
+type WithAsChild = {
+  /**
+   * Use the `asChild` prop to compose component functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the part's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * `asChild` can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  asChild?: boolean;
+};
+/**
+ * Utility type for adding the optional `asChild` boolean prop to a component
+ * that is self-closing.
+ * This is useful for components that do not have children, but still need to
+ * support the `asChild` prop.
+ */
+type SelfClosingWithAsChild = {
+  /**
+   * Use the `asChild` prop to compose component functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the part's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * `asChild` can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  asChild: true;
+  children: ReactNode;
+} | {
+  asChild?: false | undefined;
+  children?: undefined;
+};
+//#endregion
+export { WithAsChild as n, SelfClosingWithAsChild as t };

package/dist/badge.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 { t as Color } from "./index-DorCusfG.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/badge/badge.d.ts
@@ -18,9 +18,48 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
    */
   appearance: Appearance;
 };
-declare function Badge({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps): import("react").JSX.Element;
-declare namespace Badge {
-  var displayName: string;
-}
+/**
+ * A non-interactive label used to highlight short, scannable information —
+ * a status, a category tag, or a count — in the smallest possible footprint.
+ *
+ * **When to use**
+ * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.
+ * - Category or tag chips alongside list items, table rows, or cards.
+ * - Counts (e.g. `12 new`) when paired with brief context.
+ *
+ * **When not to use**
+ * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/actions/button Button}
+ *   or {@link https://mantle.ngrok.com/components/navigation/anchor Anchor} (optionally with `asChild` styling) instead.
+ * - For long-form text. Keep labels to one or two short words.
+ * - As the sole signal of meaning. Pair color with a label or icon so the
+ *   distinction works without color (color blindness, monochrome themes).
+ *
+ * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,
+ * `danger`, `info`, `accent`, `neutral`) for status meaning so theming
+ * stays coherent. Reach for named hues only when the badge's semantic role
+ * isn't already covered.
+ *
+ * **Polymorphism.** Pass `asChild` to render the badge as a single child
+ * element — useful when the badge wraps a link or other semantic element
+ * while keeping the badge styling.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/badge
+ *
+ * @example
+ * ```tsx
+ * import { Badge } from "@ngrok/mantle/badge";
+ * import { CheckCircleIcon } from "@phosphor-icons/react/CheckCircle";
+ *
+ * <Badge appearance="muted" color="success" icon={<CheckCircleIcon />}>
+ *   Succeeded
+ * </Badge>
+ *
+ * // Polymorphic — render the badge as a link, preserving its styling.
+ * <Badge appearance="muted" color="info" asChild>
+ *   <a href="/status">Operational</a>
+ * </Badge>
+ * ```
+ */
+declare const Badge: ({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps) => import("react").JSX.Element;
 //#endregion
 export { Badge, type BadgeProps };

package/dist/badge.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{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=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})};u.displayName=`Badge`;const d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-d-nMCfAI.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=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};

package/dist/breadcrumb.d.ts

@@ -1,7 +1,213 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
-import { ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
 //#region src/components/breadcrumb/breadcrumb.d.ts
+/**
+ * The breadcrumb landmark. Renders a `<nav>` with a default
+ * `aria-label="Breadcrumb"` per the WAI-ARIA breadcrumb pattern — pass your
+ * own `aria-label` to override it (e.g. for localization or when a page has
+ * multiple breadcrumb trails). Carries no visual styling of its own.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const Root: {
+  ({ asChild, children, "data-slot": dataSlot, ref, ...props }: ComponentProps<"nav"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The ordered list of crumbs. Renders an `<ol>` — an **ordered** list, because
+ * the order of the items is the hierarchy, from the root to the current page.
+ * Lays crumbs out inline with wrapping and muted, small text.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const List: {
+  ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"ol"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A single crumb. Renders an `<li>` (`role="listitem"`) that lays out its
+ * content — a `Breadcrumb.Link` or `Breadcrumb.Page` — inline.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const Item: {
+  ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"li"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A link to an ancestor page in the hierarchy. Renders an `<a>` by default;
+ * the component is router-agnostic — use `asChild` to compose the styling
+ * onto your app router's link (e.g. react-router's `<Link>`) so client-side
+ * navigation kicks in.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Link asChild>
+ * 	<Link to={href("/endpoints")}>Endpoints</Link>
+ * </Breadcrumb.Link>
+ * ```
+ */
+declare const Link: {
+  ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"a"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The current page — the last crumb in the trail. Renders a `<span>` (not a
+ * link; the user is already here) with `aria-current="page"`. The ARIA is the
+ * part's whole contract, so `aria-current` is always emitted and is not
+ * overridable via props.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const Page: {
+  ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"span"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The props for `Breadcrumb.Separator`. When `asChild` is set, `children` is
+ * required: the child element is what gets rendered, so an `asChild` separator
+ * without children would clone the default caret icon into the list — invalid
+ * `<ol>` content. The union makes that misuse a compile error.
+ */
+type BreadcrumbSeparatorProps = Omit<ComponentProps<"li">, "children"> & ({
+  asChild: true;
+  children: ReactNode;
+} | {
+  asChild?: false | undefined;
+  children?: ReactNode;
+});
+/**
+ * A purely visual divider between crumbs, hidden from assistive technology.
+ * Renders an `<li>` with `role="presentation"` and `aria-hidden="true"` — a
+ * listitem sibling of `Breadcrumb.Item` elements per the APG breadcrumb
+ * pattern, so it never counts as a crumb. Children default to a size-3.5
+ * caret icon (`<Icon svg={<CaretRightIcon />} className="size-3.5" />`); pass
+ * your own children (e.g. a slash) to replace it. With `asChild`, children
+ * are required — the child element is what renders.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const Separator: {
+  ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: BreadcrumbSeparatorProps & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Compound component for WAI-ARIA breadcrumb navigation — the path from a
  * root to the current page as an ordered list of links inside a labeled
@@ -68,7 +274,7 @@ declare const Breadcrumb: {
    * </Breadcrumb.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  readonly Root: typeof Root;
   /**
    * The ordered list of crumbs. Renders an `<ol>` — the order of the items
    * is the hierarchy, from the root to the current page.
@@ -94,7 +300,7 @@ declare const Breadcrumb: {
    * </Breadcrumb.Root>
    * ```
    */
-  readonly List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLOListElement> & import("react").OlHTMLAttributes<HTMLOListElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+  readonly List: typeof List;
   /**
    * A single crumb. Renders an `<li>` containing a `Breadcrumb.Link` or
    * `Breadcrumb.Page`.
@@ -120,7 +326,7 @@ declare const Breadcrumb: {
    * </Breadcrumb.Root>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  readonly Item: typeof Item;
   /**
    * A link to an ancestor page. Renders an `<a>` by default; use `asChild`
    * to compose onto your app router's link (e.g. react-router's `<Link>`).
@@ -146,7 +352,7 @@ declare const Breadcrumb: {
    * </Breadcrumb.Root>
    * ```
    */
-  readonly Link: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+  readonly Link: typeof Link;
   /**
    * The current page — the last crumb. Renders a `<span>` (not a link) with
    * `aria-current="page"`; the ARIA is the part's whole contract and is not
@@ -173,7 +379,7 @@ declare const Breadcrumb: {
    * </Breadcrumb.Root>
    * ```
    */
-  readonly Page: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly Page: typeof Page;
   /**
    * A purely visual divider between crumbs, hidden from assistive
    * technology (`role="presentation"` + `aria-hidden`). Children default to
@@ -200,13 +406,7 @@ declare const Breadcrumb: {
    * </Breadcrumb.Root>
    * ```
    */
-  readonly Separator: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children"> & {
-    asChild: true;
-    children: ReactNode;
-  } & WithDataSlot, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children"> & {
-    asChild?: false | undefined;
-    children?: ReactNode;
-  } & WithDataSlot, "ref">) & import("react").RefAttributes<HTMLLIElement>>;
+  readonly Separator: typeof Separator;
 };
 //#endregion
 export { Breadcrumb };

package/dist/breadcrumb.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{n,t as r}from"./slot-DmPrjM7N.js";import{cloneElement as i,forwardRef as a,isValidElement as o}from"react";import{jsx as s}from"react/jsx-runtime";import{CaretRightIcon as c}from"@phosphor-icons/react/CaretRight";const l=a(({asChild:e,children:t,"data-slot":i,...a},o)=>s(e?r:`nav`,{ref:o,"data-slot":n(i,`breadcrumb`),"aria-label":`Breadcrumb`,...a,children:t}));l.displayName=`Breadcrumb`;const u=a(({asChild:t,children:i,className:a,"data-slot":o,...c},l)=>s(t?r:`ol`,{ref:l,"data-slot":n(o,`breadcrumb-list`),className:e(`text-muted flex flex-wrap items-center gap-1.5 text-sm`,a),...c,children:i}));u.displayName=`BreadcrumbList`;const d=a(({asChild:t,children:i,className:a,"data-slot":o,...c},l)=>s(t?r:`li`,{ref:l,"data-slot":n(o,`breadcrumb-item`),className:e(`inline-flex items-center gap-1.5`,a),...c,children:i}));d.displayName=`BreadcrumbItem`;const f=a(({asChild:t,children:i,className:a,"data-slot":o,...c},l)=>s(t?r:`a`,{ref:l,"data-slot":n(o,`breadcrumb-link`),className:e(`hover:text-strong transition-colors`,a),...c,children:i}));f.displayName=`BreadcrumbLink`;const p=a(({asChild:t,children:a,className:c,"data-slot":l,...u},d)=>{let f=t?r:`span`,p=t&&o(a)?i(a,{"aria-current":`page`}):a;return s(f,{ref:d,"data-slot":n(l,`breadcrumb-page`),className:e(`text-strong`,c),...u,"aria-current":`page`,children:p})});p.displayName=`BreadcrumbPage`;const m=a(({asChild:e,children:a,className:l,"data-slot":u,...d},f)=>{let p=e?r:`li`,m=e&&o(a)?i(a,{role:`presentation`,"aria-hidden":`true`}):a??s(t,{svg:s(c,{}),className:`size-3.5`});return s(p,{ref:f,"data-slot":n(u,`breadcrumb-separator`),className:l,...d,role:`presentation`,"aria-hidden":`true`,children:m})});m.displayName=`BreadcrumbSeparator`;const h={Root:l,List:u,Item:d,Link:f,Page:p,Separator:m};export{h as Breadcrumb};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CGgMKpJg.js";import{n,t as r}from"./slot-CDk0Bb9z.js";import{cloneElement as i,isValidElement as a}from"react";import{jsx as o}from"react/jsx-runtime";import{CaretRightIcon as s}from"@phosphor-icons/react/CaretRight";const c=({asChild:e,children:t,"data-slot":i,ref:a,...s})=>o(e?r:`nav`,{ref:a,"data-slot":n(i,`breadcrumb`),"aria-label":`Breadcrumb`,...s,children:t});c.displayName=`Breadcrumb`;const l=({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`ol`,{ref:c,"data-slot":n(s,`breadcrumb-list`),className:e(`text-muted flex flex-wrap items-center gap-1.5 text-sm`,a),...l,children:i});l.displayName=`BreadcrumbList`;const u=({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`li`,{ref:c,"data-slot":n(s,`breadcrumb-item`),className:e(`inline-flex items-center gap-1.5`,a),...l,children:i});u.displayName=`BreadcrumbItem`;const d=({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`a`,{ref:c,"data-slot":n(s,`breadcrumb-link`),className:e(`hover:text-strong transition-colors`,a),...l,children:i});d.displayName=`BreadcrumbLink`;const f=({asChild:t,children:s,className:c,"data-slot":l,ref:u,...d})=>{let f=t?r:`span`,p=t&&a(s)?i(s,{"aria-current":`page`}):s;return o(f,{ref:u,"data-slot":n(l,`breadcrumb-page`),className:e(`text-strong`,c),...d,"aria-current":`page`,children:p})};f.displayName=`BreadcrumbPage`;const p=({asChild:e,children:c,className:l,"data-slot":u,ref:d,...f})=>{let p=e?r:`li`,m=e&&a(c)?i(c,{role:`presentation`,"aria-hidden":`true`}):c??o(t,{svg:o(s,{}),className:`size-3.5`});return o(p,{ref:d,"data-slot":n(u,`breadcrumb-separator`),className:l,...f,role:`presentation`,"aria-hidden":`true`,children:m})};p.displayName=`BreadcrumbSeparator`;const m={Root:c,List:l,Item:u,Link:d,Page:f,Separator:p};export{m as Breadcrumb};