@ngrok/mantle 0.76.11 → 0.78.0

package/dist/accordion.d.ts

@@ -1,7 +1,6 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { n as IconProps } from "./icon-n49kOh4_.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as IconProps } from "./icon-Cevjo93X.js";
 import { ComponentPropsWithoutRef } from "react";
-
 //#region src/components/accordion/accordion.d.ts
 /**
  * `"single"` mode props: at most one item open at a time — opening a section
@@ -16,9 +15,12 @@ type AccordionSingleProps = {
    * previously open one. Must be set explicitly — the default is `"multiple"`,
    * where sections open independently.
    */
-  type: "single"; /** The controlled open item value (`""` for none). */
-  value?: string; /** The initial open item value when uncontrolled. */
-  defaultValue?: string; /** Called with the newly open item value (`""` when collapsed). */
+  type: "single";
+  /** The controlled open item value (`""` for none). */
+  value?: string;
+  /** The initial open item value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the newly open item value (`""` when collapsed). */
   onValueChange?: (value: string) => void;
 };
 /**
@@ -36,9 +38,12 @@ type AccordionMultipleProps = {
    *
    * @default "multiple"
    */
-  type?: "multiple"; /** The controlled list of open item values. */
-  value?: string[]; /** The initial list of open item values when uncontrolled. */
-  defaultValue?: string[]; /** Called with the new list of open item values. */
+  type?: "multiple";
+  /** The controlled list of open item values. */
+  value?: string[];
+  /** The initial list of open item values when uncontrolled. */
+  defaultValue?: string[];
+  /** Called with the new list of open item values. */
   onValueChange?: (value: string[]) => void;
 };
 /**
@@ -52,6 +57,51 @@ type AccordionMultipleProps = {
  * standard `<div>` props (forwarded to the container) plus `asChild`.
  */
 type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> & WithAsChild;
+/**
+ * The icon that indicates the open/closed state of its {@link Trigger}. Defaults
+ * to a downward caret that rotates 180° when the section is open. Pass `svg` to
+ * 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
+ *
+ * @example
+ * // Default caret
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ *
+ * @example
+ * // Custom icon
+ * import { PlusIcon } from "@phosphor-icons/react/Plus";
+ *
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon svg={<PlusIcon />} />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const TriggerIcon: {
+  ({ className, svg, ...props }: Omit<IconProps, "svg"> & {
+    /** The icon to render. Defaults to a downward caret that rotates open. */
+    svg?: IconProps["svg"];
+  }): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A vertically stacked set of disclosure sections styled after the shadcn /
  * ngrok.com accordion.
@@ -66,7 +116,7 @@ type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit
  * `Accordion.Root` defaults to `type="multiple"` (sections open independently);
  * pass `type="single"` when opening one section should auto-close the others.
  *
- * @see https://mantle.ngrok.com/components/accordion
+ * @see https://mantle.ngrok.com/components/data-display/accordion
  *
  * @example
  * Composition:
@@ -127,7 +177,8 @@ declare const Accordion: {
    * </Accordion.Root>
    */
   readonly Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /** The unique value identifying this item within its accordion. */value: string;
+    /** The unique value identifying this item within its accordion. */
+    value: string;
   } & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The `<button>` header that toggles a section. See {@link Trigger}.
@@ -162,16 +213,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly TriggerIcon: {
-    ({
-      className,
-      svg,
-      ...props
-    }: Omit<IconProps, "svg"> & {
-      /** The icon to render. Defaults to a downward caret that rotates open. */svg?: IconProps["svg"];
-    }): import("react").JSX.Element;
-    displayName: string;
-  };
+  readonly TriggerIcon: typeof TriggerIcon;
   /**
    * The collapsible, find-in-page-discoverable body. See {@link Content}.
    *

package/dist/accordion.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./cx-C1UYP5We.js";import{t as r}from"./icon-SUx16Sl3.js";import{t as i}from"./slot-DT_E5BQx.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";function g(e,t){return e.includes(t)}function _(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 v(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function y(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function b(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const x=o(null);function S(e){let t=l(x);return m(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const C=o(null);function w(e){let t=l(C);return m(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const T=s((e,t)=>{let{type:r=`multiple`,value:a,defaultValue:o,onValueChange:s,asChild:c,children:l,className:u,...f}=e,m=a!=null,[g,b]=p(()=>v(o)),S=m?v(a):g,C=d(()=>({type:r,openValues:S,setItemOpen:(t,n)=>{let i=_(S,t,n,r);i!==S&&(m||b(i),y(e,i))}}),[r,S,m,e]),w={...f,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,u)};return h(x.Provider,{value:C,children:h(c?i:`div`,{ref:t,...w,children:l})})});T.displayName=`Accordion`;const E=s(({children:e,value:t,...n},r)=>{let{openValues:i,setItemOpen:a}=S(`Accordion.Item`),o=g(i,t),s=c(e=>{a(t,e)},[a,t]),l=d(()=>({open:o,setOpen:s}),[o,s]);return h(C.Provider,{value:l,children:h(`div`,{ref:r,...n,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})});E.displayName=`AccordionItem`;const D=s(({className:e,children:t,onClick:r,...i},a)=>{let{open:o,setOpen:s}=w(`Accordion.Trigger`);return h(`button`,{ref:a,type:`button`,...i,"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.displayName=`AccordionTrigger`;const O=h(a,{weight:`bold`}),k=({className:e,svg:t=O,...i})=>h(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)});k.displayName=`AccordionTriggerIcon`;const A=s(({className:r,children:i,...a},o)=>{let{open:s,setOpen:c}=w(`Accordion.Content`),l=f(null),d=t(l,o);return u(()=>{let e=l.current;if(!e||!b())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=l.current;e&&(s||!b()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),h(`div`,{ref:d,...a,"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})});A.displayName=`AccordionContent`;const j=s(({className:e,...t},r)=>h(`div`,{ref:r,...t,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)}));j.displayName=`AccordionBody`;const M={Root:T,Item:E,Trigger:D,TriggerIcon:k,Content:A,Body:j};export{M as Accordion};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-CDtYjF_H.js";import{t as i}from"./slot-DmPrjM7N.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";function g(e,t){return e.includes(t)}function _(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 v(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function y(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function b(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const x=o(null);function S(e){let t=l(x);return m(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const C=o(null);function w(e){let t=l(C);return m(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const T=s((e,t)=>{let{type:r=`multiple`,value:a,defaultValue:o,onValueChange:s,asChild:c,children:l,className:u,...f}=e,m=a!=null,[g,b]=p(()=>v(o)),S=m?v(a):g,C=d(()=>({type:r,openValues:S,setItemOpen:(t,n)=>{let i=_(S,t,n,r);i!==S&&(m||b(i),y(e,i))}}),[r,S,m,e]),w={...f,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,u)};return h(x.Provider,{value:C,children:h(c?i:`div`,{ref:t,...w,children:l})})});T.displayName=`Accordion`;const E=s(({children:e,value:t,...n},r)=>{let{openValues:i,setItemOpen:a}=S(`Accordion.Item`),o=g(i,t),s=c(e=>{a(t,e)},[a,t]),l=d(()=>({open:o,setOpen:s}),[o,s]);return h(C.Provider,{value:l,children:h(`div`,{ref:r,...n,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})});E.displayName=`AccordionItem`;const D=s(({className:e,children:t,onClick:r,...i},a)=>{let{open:o,setOpen:s}=w(`Accordion.Trigger`);return h(`button`,{ref:a,type:`button`,...i,"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.displayName=`AccordionTrigger`;const O=h(a,{weight:`bold`}),k=({className:e,svg:t=O,...i})=>h(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)});k.displayName=`AccordionTriggerIcon`;const A=s(({className:r,children:i,...a},o)=>{let{open:s,setOpen:c}=w(`Accordion.Content`),l=f(null),d=t(l,o);return u(()=>{let e=l.current;if(!e||!b())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=l.current;e&&(s||!b()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),h(`div`,{ref:d,...a,"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})});A.displayName=`AccordionContent`;const j=s(({className:e,...t},r)=>h(`div`,{ref:r,...t,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)}));j.displayName=`AccordionBody`;const M={Root:T,Item:E,Trigger:D,TriggerIcon:k,Content:A,Body:j};export{M as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.76.11",
+	"version": "0.78.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -21,11 +21,14 @@
 		"@ngrok/mantle/alert-dialog",
 		"@ngrok/mantle/anchor",
 		"@ngrok/mantle/badge",
+		"@ngrok/mantle/breadcrumb",
 		"@ngrok/mantle/browser-only",
 		"@ngrok/mantle/button",
 		"@ngrok/mantle/calendar",
 		"@ngrok/mantle/card",
+		"@ngrok/mantle/centered-layout",
 		"@ngrok/mantle/checkbox",
+		"@ngrok/mantle/choice",
 		"@ngrok/mantle/code",
 		"@ngrok/mantle/code-block",
 		"@ngrok/mantle/color",
@@ -47,6 +50,7 @@
 		"@ngrok/mantle/input",
 		"@ngrok/mantle/kbd",
 		"@ngrok/mantle/label",
+		"@ngrok/mantle/list",
 		"@ngrok/mantle/main",
 		"@ngrok/mantle/media-object",
 		"@ngrok/mantle/multi-select",
@@ -58,6 +62,7 @@
 		"@ngrok/mantle/radio-group",
 		"@ngrok/mantle/sandboxed-on-click",
 		"@ngrok/mantle/select",
+		"@ngrok/mantle/selectable-list",
 		"@ngrok/mantle/separator",
 		"@ngrok/mantle/sheet",
 		"@ngrok/mantle/skeleton",
@@ -70,6 +75,7 @@
 		"@ngrok/mantle/tabs",
 		"@ngrok/mantle/text-area",
 		"@ngrok/mantle/theme",
+		"@ngrok/mantle/theme-switcher",
 		"@ngrok/mantle/toast",
 		"@ngrok/mantle/tooltip",
 		"@ngrok/mantle/types",

package/dist/alert-dialog.d.ts

@@ -1,9 +1,8 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { t as SvgAttributes } from "./types-BvUzforF.js";
-import { n as ButtonProps } from "./button-mfYak6Rx.js";
-import { t as Root$1 } from "./primitive-FoWela9a.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { n as ButtonProps } from "./button-Bw9MpShl.js";
+import { t as Root$1 } from "./primitive-C64-m48O.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/alert-dialog/alert-dialog.d.ts
 declare const priorities: readonly ["info", "danger"];
 type Priority = (typeof priorities)[number];
@@ -23,7 +22,7 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
  * shared floating z-index. When multiple shared layers are open, the most
  * recently mounted layer renders on top.
  *
- * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogroot
  *
  * @example
  * ```tsx
@@ -55,13 +54,7 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
  * </AlertDialog.Root>
  * ```
  */
-declare function Root({
-  priority,
-  ...props
-}: AlertDialogProps): import("react").JSX.Element;
-declare namespace Root {
-  var displayName: string;
-}
+declare function Root({ priority, ...props }: AlertDialogProps): import("react").JSX.Element;
 type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
   svg?: ReactNode;
 };
@@ -78,7 +71,7 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
  * shared floating z-index. When multiple shared layers are open, the most
  * recently mounted layer renders on top.
  *
- * @see https://mantle.ngrok.com/components/alert-dialog
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog
  *
  * @example
  * Composition:
@@ -138,7 +131,7 @@ declare const AlertDialog: {
    * shared floating z-index. When multiple shared layers are open, the most
    * recently mounted layer renders on top.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogroot
    *
    * @example
    * ```tsx
@@ -177,7 +170,7 @@ declare const AlertDialog: {
    * `AlertDialog.Root`. Does not close the dialog by default — wrap with
    * `AlertDialog.Close asChild` if the action should also dismiss.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogaction
    *
    * @example
    * ```tsx
@@ -214,7 +207,7 @@ declare const AlertDialog: {
    * Contains the main content of the alert dialog. Wraps the header and footer
    * inside `AlertDialog.Content` next to `AlertDialog.Icon`.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogbody
    *
    * @example
    * ```tsx
@@ -252,7 +245,7 @@ declare const AlertDialog: {
    * `appearance="outlined"` and `priority="neutral"` so it visually
    * de-emphasizes against `AlertDialog.Action`.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcancel
    *
    * @example
    * ```tsx
@@ -290,7 +283,7 @@ declare const AlertDialog: {
    * around `AlertDialog.Action` with `asChild` so the action both performs
    * the operation and dismisses the dialog.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogclose
    *
    * @example
    * ```tsx
@@ -333,7 +326,7 @@ declare const AlertDialog: {
    * Mantle's shared floating z-index. When multiple shared layers are open,
    * the most recently mounted layer renders on top.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcontent
    *
    * @example
    * ```tsx
@@ -380,7 +373,7 @@ declare const AlertDialog: {
    * An accessible description to be announced when the dialog is opened.
    * Renders as a `div` by default; can be changed via the `asChild` prop.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogdescription
    *
    * @example
    * ```tsx
@@ -417,7 +410,7 @@ declare const AlertDialog: {
    * Contains the footer content of the dialog, including the action and
    * cancel buttons.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogfooter
    *
    * @example
    * ```tsx
@@ -454,7 +447,7 @@ declare const AlertDialog: {
    * Contains the header content of the dialog, including the title and
    * description.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogheader
    *
    * @example
    * ```tsx
@@ -492,7 +485,7 @@ declare const AlertDialog: {
    * Defaults to a warning icon for `danger` and an info icon for `info`. Can
    * be overridden via the `svg` prop.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogicon
    *
    * @example
    * ```tsx
@@ -530,7 +523,7 @@ declare const AlertDialog: {
    * Alternatively, provide `aria-label` or `aria-labelledby` to
    * `AlertDialog.Content` and exclude this component.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtitle
    *
    * @example
    * ```tsx
@@ -566,7 +559,7 @@ declare const AlertDialog: {
   /**
    * A button that opens the Alert Dialog.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtrigger
    *
    * @example
    * ```tsx

package/dist/alert-dialog.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./button-C9GW9nAr.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-BFUir4UB.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(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),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,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),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(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:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,"data-slot":`alert-dialog-action`,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
+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"./button-AS5Ir3DE.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-wm7Wk-gy.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(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),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,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),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(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:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,"data-slot":`alert-dialog-action`,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};

package/dist/alert.d.ts

@@ -1,8 +1,8 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { t as SvgAttributes } from "./types-BvUzforF.js";
-import { n as IconButtonProps } from "./icon-button-D7hs6bX2.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import "./index-D47aqlpz.js";
+import { n as IconButtonProps } from "./icon-button-DuRSCsPh.js";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
-
 //#region src/components/alert/alert.d.ts
 declare const priorities: readonly ["danger", "important", "info", "success", "warning"];
 type Priority = (typeof priorities)[number];
@@ -36,10 +36,14 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
    */
   icon?: ReactNode;
 };
+declare const DismissIconButton: {
+  ({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Displays a callout for user attention.
  *
- * @see https://mantle.ngrok.com/components/alert
+ * @see https://mantle.ngrok.com/components/feedback/alert
  *
  * @example
  * Composition:
@@ -70,7 +74,7 @@ declare const Alert: {
   /**
    * The root container of the alert component.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertroot
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
    *
    * @example
    * ```tsx
@@ -87,7 +91,7 @@ declare const Alert: {
   /**
    * The container for the content slot of an alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertcontent
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
    *
    * @example
    * ```tsx
@@ -104,7 +108,7 @@ declare const Alert: {
   /**
    * The optional description of an alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertdescription
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdescription
    *
    * @example
    * ```tsx
@@ -121,7 +125,7 @@ declare const Alert: {
   /**
    * An optional dismiss button that can be used to close the alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdismissiconbutton
    *
    * @example
    * ```tsx
@@ -135,23 +139,11 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly DismissIconButton: {
-    ({
-      size,
-      type,
-      label,
-      appearance,
-      className,
-      icon,
-      style,
-      ...props
-    }: AlertDismissIconButtonProps): import("react").JSX.Element;
-    displayName: string;
-  };
+  readonly DismissIconButton: typeof DismissIconButton;
   /**
    * An optional icon that visually represents the priority of the Alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alerticon
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
    *
    * @example
    * ```tsx
@@ -168,7 +160,7 @@ declare const Alert: {
   /**
    * The title of an alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alerttitle
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerttitle
    *
    * @example
    * ```tsx

package/dist/alert.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./icon-button-DiX9iZ9n.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:{priority:{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:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`important`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),S=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,"data-slot":`alert`,className:e(x({appearance:t,priority: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=C[b().priority];return u(t,{ref:a,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:r??o,...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,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.priority),"--alert-dismiss-icon-hover-color":k(f.priority),"--alert-dismiss-hover-bg":A(f.priority)}),...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-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-CxVsZ2N1.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:{priority:{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:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`important`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),S=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,"data-slot":`alert`,className:e(x({appearance:t,priority: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.priority];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,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.priority),"--alert-dismiss-icon-hover-color":k(f.priority),"--alert-dismiss-hover-bg":A(f.priority)}),...d})};j.displayName=`AlertDismissIconButton`;const M={Root:S,Content:T,Description:D,DismissIconButton:j,Icon:w,Title:E};export{M as Alert};

package/dist/{anchor-BtgEJoPN.js → anchor-C_tjSVy6.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-SUx16Sl3.js";import{t as n}from"./slot-DT_E5BQx.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=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),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={"data-slot":`anchor`,className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,p as r,f as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./slot-DmPrjM7N.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=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),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={"data-slot":`anchor`,className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,p as r,f as t};

package/dist/anchor.d.ts

@@ -1,6 +1,5 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/anchor/types.d.ts
 /**
  * The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
@@ -53,7 +52,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  *   primitive ({@link https://reactrouter.com/en/main/components/link `react-router` `<Link>`})
  *   so client-side navigation kicks in. You can keep mantle's styling by
  *   composing: `<Anchor asChild><Link to="/foo">…</Link></Anchor>`.
- * - For triggering an action — use a {@link https://mantle.ngrok.com/components/button Button}
+ * - For triggering an action — use a {@link https://mantle.ngrok.com/components/actions/button Button}
  *   instead. If it doesn't navigate, it's not a link.
  *
  * **Icons.** Pass `icon` (a phosphor or custom SVG) and optionally
@@ -69,7 +68,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * here" / "read more". For purely decorative icons, no extra labeling is
  * needed; for icon-only links, provide an `aria-label`.
  *
- * @see https://mantle.ngrok.com/components/anchor
+ * @see https://mantle.ngrok.com/components/navigation/anchor
  *
  * @example
  * ```tsx

package/dist/anchor.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./anchor-BtgEJoPN.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};
+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};

package/dist/{as-child-uN_018tj.d.ts → as-child-CYEVu1WY.d.ts}

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/types/as-child.d.ts
 /**
  * Utility type for adding the optional `asChild` boolean prop to a component.
@@ -20,11 +19,5 @@ type WithAsChild = {
    */
   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.
- */
 //#endregion
 export { WithAsChild as t };

package/dist/badge.d.ts

@@ -1,7 +1,6 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
 import { t as Color } from "./index-DorCusfG.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/badge/badge.d.ts
 declare const appearances: readonly ["muted"];
 type Appearance = (typeof appearances)[number];
@@ -19,59 +18,9 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
    */
   appearance: Appearance;
 };
-/**
- * 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/button Button}
- *   or {@link https://mantle.ngrok.com/components/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/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;
-  displayName: string;
-};
+declare function Badge({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps): import("react").JSX.Element;
+declare namespace Badge {
+  var displayName: string;
+}
 //#endregion
 export { Badge, type BadgeProps };

package/dist/badge.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.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-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};