@ngrok/mantle 0.76.11 → 0.78.0

package/dist/breadcrumb.d.ts

@@ -0,0 +1,212 @@
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ReactNode } from "react";
+//#region src/components/breadcrumb/breadcrumb.d.ts
+/**
+ * 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
+ * `<nav>` landmark. Router-agnostic: compose `Breadcrumb.Link` onto your app
+ * router's link via `asChild`.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * Composition:
+ * ```
+ * Breadcrumb.Root
+ * └── Breadcrumb.List
+ *     ├── Breadcrumb.Item
+ *     │   └── Breadcrumb.Link
+ *     ├── Breadcrumb.Separator
+ *     └── Breadcrumb.Item
+ *         └── Breadcrumb.Page
+ * ```
+ *
+ * @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 Breadcrumb: {
+  /**
+   * The breadcrumb landmark. Renders a `<nav>` with a default
+   * `aria-label="Breadcrumb"` — pass your own `aria-label` to override it.
+   * 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>
+   * ```
+   */
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  /**
+   * The ordered list of crumbs. Renders an `<ol>` — the order of the items
+   * is the hierarchy, from the root to the current page.
+   *
+   * @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>
+   * ```
+   */
+  readonly List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLOListElement> & import("react").OlHTMLAttributes<HTMLOListElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+  /**
+   * A single crumb. Renders an `<li>` containing a `Breadcrumb.Link` or
+   * `Breadcrumb.Page`.
+   *
+   * @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>
+   * ```
+   */
+  readonly Item: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  /**
+   * 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>`).
+   *
+   * @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>
+   * ```
+   */
+  readonly Link: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+  /**
+   * 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
+   * overridable.
+   *
+   * @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>
+   * ```
+   */
+  readonly Page: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  /**
+   * A purely visual divider between crumbs, hidden from assistive
+   * technology (`role="presentation"` + `aria-hidden`). Children default to
+   * a caret icon; pass your own (e.g. a slash) to replace it.
+   *
+   * @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>
+   * ```
+   */
+  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>>;
+};
+//#endregion
+export { Breadcrumb };

package/dist/breadcrumb.js

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

package/dist/browser-only-CPH56Xw_.js

@@ -0,0 +1 @@
+import{useSyncExternalStore as e}from"react";function t(){return()=>{}}function n(){return!0}function r(){return!1}function i(){return e(t,n,r)}function a({children:e,fallback:t=null}){return i()?e():t}function o(){return typeof window<`u`&&typeof document<`u`}export{o as n,i as r,a as t};

package/dist/browser-only.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/components/browser-only/browser-only.d.ts
 type Props = {
   /**
@@ -27,7 +26,7 @@ type Props = {
  *   the `fallback` is rendered.
  * - On the client, after hydration, the `children` render function is called.
  *
- * @see https://mantle.ngrok.com/components/browser-only
+ * @see https://mantle.ngrok.com/components/primitives/browser-only
  *
  * @example
  * ```tsx
@@ -38,10 +37,7 @@ type Props = {
  *
  * @see useIsHydrated
  */
-declare function BrowserOnly({
-  children,
-  fallback
-}: Props): ReactNode;
+declare function BrowserOnly({ children, fallback }: Props): ReactNode;
 /**
  * Detects whether DOM APIs are available.
  *

package/dist/browser-only.js

@@ -1 +1 @@
-import{n as e,t}from"./browser-only-BSl_hruR.js";export{t as BrowserOnly,e as canUseDOM};
+import{n as e,t}from"./browser-only-CPH56Xw_.js";export{t as BrowserOnly,e as canUseDOM};

package/dist/{button-CERx95KE.js → button-5t6-JS_I.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),o=n(({appearance:n,asChild:i,className:o,children:s,...c},l)=>r(i?t:`div`,{"data-slot":`button-group`,className:e(a({appearance:n}),o),ref:l,...c,children:s}));o.displayName=`ButtonGroup`;export{o as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),o=n(({appearance:n,asChild:i,className:o,children:s,...c},l)=>r(i?t:`div`,{"data-slot":`button-group`,className:e(a({appearance:n}),o),ref:l,...c,children:s}));o.displayName=`ButtonGroup`;export{o as t};

package/dist/button-AS5Ir3DE.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{Children as a,cloneElement as o,forwardRef as s,isValidElement as c}from"react";import l from"tiny-invariant";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{CircleNotchIcon as m}from"@phosphor-icons/react/CircleNotch";const h=p(``,{variants:{appearance:{filled:`bg-filled-accent text-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover border border-transparent text-sm font-medium`,ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border border-transparent text-sm font-medium`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border text-sm font-medium`,link:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent`},isLoading:{false:``,true:`opacity-50`},priority:{danger:``,default:``,neutral:``},size:{xs:``,sm:``,md:``,lg:``,xl:``}},defaultVariants:{appearance:`outlined`,isLoading:!1,priority:`default`,size:`md`},compoundVariants:[{appearance:[`filled`,`ghost`,`outlined`],size:`xs`,class:`h-6 px-2`},{appearance:[`filled`,`ghost`,`outlined`],size:`sm`,class:`h-7 px-2.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`md`,class:`h-9 px-3`},{appearance:[`filled`,`ghost`,`outlined`],size:`lg`,class:`h-10 px-3.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`xl`,class:`h-12 px-4`},{appearance:`ghost`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,priority:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`filled`,priority:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,priority:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600`},{appearance:`filled`,priority:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),g={xs:`ps-1.5`,sm:`ps-2`,md:`ps-2.5`,lg:`ps-3`,xl:`ps-3.5`},_={xs:`pe-1.5`,sm:`pe-2`,md:`pe-2.5`,lg:`pe-3`,xl:`pe-3.5`},v=s(({"aria-disabled":s,appearance:p=`outlined`,asChild:v,children:y,className:b,disabled:x,icon:S,iconPlacement:C=`start`,isLoading:w=!1,priority:T=`default`,size:E=`md`,type:D,...O},k)=>{let A=r(s??x??w),j=w?d(m,{className:`animate-spin`}):S,M=j&&p!==`link`,N={"aria-disabled":A,"data-slot":`button`,className:e(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`,h({appearance:p,priority:T,isLoading:w,size:E}),p!==`link`&&`font-sans`,M&&C===`start`&&g[E],M&&C===`end`&&_[E],b),"data-appearance":p,"data-disabled":A,"data-loading":w,"data-priority":T,"data-size":p===`link`?void 0:E,disabled:A,ref:k,...O};return v?(l(c(y)&&a.only(y),"When using `asChild`, Button must be passed a single child as a JSX tag."),d(n,{...N,children:o(y,{},f(u,{children:[j&&d(t,{svg:j,className:i(C===`end`&&`order-last`)}),y.props.children]}))})):f(`button`,{...N,type:D??`button`,children:[j&&d(t,{svg:j,className:i(C===`end`&&`order-last`)}),y]})});v.displayName=`Button`;export{v as t};

package/dist/{button-mfYak6Rx.d.ts → button-Bw9MpShl.d.ts}

@@ -1,12 +1,12 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { r as VariantProps } from "./index-Bed_XLWa.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { r as VariantProps } from "./index-D47aqlpz.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+  appearance?: "filled" | "ghost" | "link" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "danger" | "default" | "neutral" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps<typeof buttonVariants>;
 /**
@@ -14,8 +14,13 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
  */
 type ButtonProps = ComponentProps<"button"> & ButtonVariants & WithAsChild & {
   /**
-   * An icon to render inside the button. If the `state` is `"pending"`, then
-   * the icon will automatically be replaced with a spinner.
+   * An icon to render inside the button, beside the button's text
+   * children. If the `state` is `"pending"`, then the icon will
+   * automatically be replaced with a spinner.
+   *
+   * For an icon-only button, do not use `Button` — use `IconButton`
+   * instead: it requires an accessible `label` and renders a square box
+   * on the same shared size scale.
    */
   icon?: ReactNode;
   /**
@@ -49,7 +54,12 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & WithAsChild & {
  * other assistive technology. Once activated, it then performs an action, such
  * as submitting a form or opening a dialog.
  *
- * @see https://mantle.ngrok.com/components/button
+ * An icon-only button is not a `Button` — use `IconButton` instead: an
+ * icon-only `Button` has no accessible name and keeps its text-box padding,
+ * while `IconButton` requires a screen-reader `label` and renders a square
+ * box on the same shared size scale.
+ *
+ * @see https://mantle.ngrok.com/components/actions/button
  *
  * @example
  * ```tsx
@@ -65,6 +75,14 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & WithAsChild & {
  *   Save
  * </Button>
  * ```
+ *
+ * @example
+ * Icon-only buttons are not `Button`s — use `IconButton` instead (an icon-only
+ * `Button` has no accessible name and keeps its text-box padding):
+ * ```tsx
+ * // ❌ <Button icon={<CopyIcon />} onClick={copyPage} />
+ * <IconButton icon={<CopyIcon />} label="Copy page" onClick={copyPage} />
+ * ```
  */
 declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion

package/dist/button.d.ts

@@ -1,4 +1,5 @@
-import { n as ButtonProps, t as Button } from "./button-mfYak6Rx.js";
-import { n as IconButtonProps, t as IconButton } from "./icon-button-D7hs6bX2.js";
-import { n as ButtonGroupProps, t as ButtonGroup } from "./index-CTU6apE6.js";
-export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };
+import { n as ButtonProps, t as Button } from "./button-Bw9MpShl.js";
+import { n as IconButtonProps, t as IconButton } from "./icon-button-DuRSCsPh.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-CDwfBOAA.js";
+import { t as ButtonSize } from "./sizes-Dje_rwKc.js";
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, IconButton, type IconButtonProps };

package/dist/button.js

@@ -1 +1 @@
-import{t as e}from"./icon-button-DiX9iZ9n.js";import{t}from"./button-C9GW9nAr.js";import{t as n}from"./button-CERx95KE.js";export{t as Button,n as ButtonGroup,e as IconButton};
+import{t as e}from"./icon-button-CxVsZ2N1.js";import{t}from"./button-AS5Ir3DE.js";import{t as n}from"./button-5t6-JS_I.js";export{t as Button,n as ButtonGroup,e as IconButton};

package/dist/calendar.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { DateRange, DayPicker } from "react-day-picker";
-
 //#region src/components/calendar/calendar.d.ts
 type CalendarProps = ComponentProps<typeof DayPicker>;
 /**
@@ -9,7 +8,7 @@ type CalendarProps = ComponentProps<typeof DayPicker>;
  * @preview This component is in `preview` mode which means the API is not stable and may change.
  * There may also be bugs! Please file an issue if you find any! <3
  *
- * @see https://mantle.ngrok.com/components/calendar#api-calendar
+ * @see https://mantle.ngrok.com/components/preview/calendar#api-calendar
  *
  * @example
  * ```tsx
@@ -28,12 +27,7 @@ type CalendarProps = ComponentProps<typeof DayPicker>;
  *
  * https://github.com/ngrok/mantle/issues
  */
-declare function Calendar({
-  className,
-  classNames,
-  showOutsideDays,
-  ...props
-}: CalendarProps): import("react").JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;
 declare namespace Calendar {
   var displayName: string;
 }

package/dist/calendar.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-SUx16Sl3.js";import{n,r}from"./icon-button-DiX9iZ9n.js";import{jsx as i}from"react/jsx-runtime";import{CaretLeftIcon as a}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as o}from"@phosphor-icons/react/CaretRight";import{DayPicker as s}from"react-day-picker";function c({className:c,classNames:l,showOutsideDays:u=!1,...d}){return i(s,{"data-slot":`calendar`,animate:!1,components:{Chevron:e=>i(t,{svg:e.orientation===`left`?i(a,{}):i(o,{}),className:`size-4`})},classNames:{root:e(`isolate`,c),button_next:e(n,r({appearance:`ghost`,size:`sm`}),`absolute right-0`),button_previous:e(n,r({appearance:`ghost`,size:`sm`}),`absolute left-0`),caption_label:`text-sm font-medium`,day:e(`overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md`,d.mode===`range`?`first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md`:``),day_button:`day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15`,disabled:`text-muted opacity-50`,hidden:`invisible`,month:`space-y-4`,month_caption:`flex justify-center pt-1 relative items-center`,month_grid:`w-full border-collapse space-y-1`,months:`flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min`,nav:`flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10`,outside:`day-outside aria-selected:text-on-filled opacity-50 text-muted`,range_end:`day-range-end [&:not(.day-range-start)]:rounded-l-none`,range_middle:`day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25`,range_start:`day-range-start [&:not(.day-range-end)]:rounded-r-none`,selected:`not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent`,today:`not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md`,week:`flex w-full mt-1`,weekday:`text-body w-7 text-[0.8rem] text-center font-normal`,weekdays:`flex`,...l},showOutsideDays:u,...d})}c.displayName=`Calendar`;export{c as Calendar};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{n,r}from"./icon-button-CxVsZ2N1.js";import{jsx as i}from"react/jsx-runtime";import{CaretRightIcon as a}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as o}from"@phosphor-icons/react/CaretLeft";import{DayPicker as s}from"react-day-picker";function c({className:c,classNames:l,showOutsideDays:u=!1,...d}){return i(s,{"data-slot":`calendar`,animate:!1,components:{Chevron:e=>i(t,{svg:e.orientation===`left`?i(o,{}):i(a,{}),className:`size-4`})},classNames:{root:e(`isolate`,c),button_next:e(n,r({appearance:`ghost`,size:`sm`}),`absolute right-0`),button_previous:e(n,r({appearance:`ghost`,size:`sm`}),`absolute left-0`),caption_label:`text-sm font-medium`,day:e(`overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md`,d.mode===`range`?`first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md`:``),day_button:`day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15`,disabled:`text-muted opacity-50`,hidden:`invisible`,month:`space-y-4`,month_caption:`flex justify-center pt-1 relative items-center`,month_grid:`w-full border-collapse space-y-1`,months:`flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min`,nav:`flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10`,outside:`day-outside aria-selected:text-on-filled opacity-50 text-muted`,range_end:`day-range-end [&:not(.day-range-start)]:rounded-l-none`,range_middle:`day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25`,range_start:`day-range-start [&:not(.day-range-end)]:rounded-r-none`,selected:`not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent`,today:`not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md`,week:`flex w-full mt-1`,weekday:`text-body w-7 text-[0.8rem] text-center font-normal`,weekdays:`flex`,...l},showOutsideDays:u,...d})}c.displayName=`Calendar`;export{c as Calendar};

package/dist/card.d.ts

@@ -1,6 +1,6 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import "./index-D47aqlpz.js";
 import { ComponentProps, HTMLAttributes } from "react";
-
 //#region src/components/card/card.d.ts
 type CardProps = ComponentProps<"div"> & WithAsChild;
 type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
@@ -8,7 +8,7 @@ type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
  * A container that can be used to display content in a box resembling a
  * physical card.
  *
- * @see https://mantle.ngrok.com/components/card
+ * @see https://mantle.ngrok.com/components/structure/card
  *
  * @example
  * Composition:
@@ -45,7 +45,7 @@ declare const Card: {
   /**
    * A container that can be used to display content in a box resembling a physical card.
    *
-   * @see https://mantle.ngrok.com/components/card#cardroot
+   * @see https://mantle.ngrok.com/components/structure/card#cardroot
    *
    * @example
    * ```tsx
@@ -60,7 +60,7 @@ declare const Card: {
   /**
    * The main content of a card.
    *
-   * @see https://mantle.ngrok.com/components/card#cardbody
+   * @see https://mantle.ngrok.com/components/structure/card#cardbody
    *
    * @example
    * ```tsx
@@ -75,7 +75,7 @@ declare const Card: {
   /**
    * The footer container of a card.
    *
-   * @see https://mantle.ngrok.com/components/card#cardfooter
+   * @see https://mantle.ngrok.com/components/structure/card#cardfooter
    *
    * @example
    * ```tsx
@@ -96,7 +96,7 @@ declare const Card: {
   /**
    * The header container of a card.
    *
-   * @see https://mantle.ngrok.com/components/card#cardheader
+   * @see https://mantle.ngrok.com/components/structure/card#cardheader
    *
    * @example
    * ```tsx
@@ -117,7 +117,7 @@ declare const Card: {
   /**
    * The title of a card.
    *
-   * @see https://mantle.ngrok.com/components/card#cardtitle
+   * @see https://mantle.ngrok.com/components/structure/card#cardtitle
    *
    * @example
    * ```tsx

package/dist/card.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card`,className:e(`border-card bg-card relative rounded-md border`,i),...o,children:a}));i.displayName=`Card`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-body`,className:e(`p-6 border-t border-card-muted first:border-t-0`,i),...o,children:a}));a.displayName=`CardBody`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-footer`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));o.displayName=`CardFooter`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-header`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));s.displayName=`CardHeader`;const c=n(({className:n,asChild:i,...a},o)=>r(i?t:`h3`,{ref:o,"data-slot":`card-title`,className:e(`text-strong text-base font-medium`,n),...a}));c.displayName=`CardTitle`;const l={Root:i,Body:a,Footer:o,Header:s,Title:c};export{l as Card};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card`,className:e(`border-card bg-card relative rounded-md border`,i),...o,children:a}));i.displayName=`Card`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-body`,className:e(`p-6 border-t border-card-muted first:border-t-0`,i),...o,children:a}));a.displayName=`CardBody`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-footer`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));o.displayName=`CardFooter`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-header`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));s.displayName=`CardHeader`;const c=n(({className:n,asChild:i,...a},o)=>r(i?t:`h3`,{ref:o,"data-slot":`card-title`,className:e(`text-strong text-base font-medium`,n),...a}));c.displayName=`CardTitle`;const l={Root:i,Body:a,Footer:o,Header:s,Title:c};export{l as Card};

package/dist/centered-layout.d.ts

@@ -0,0 +1,147 @@
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+//#region src/components/centered-layout/centered-layout.d.ts
+/**
+ * A viewport-filling centered page flow for sign-in, sign-up, onboarding,
+ * 404, checkout, and other focused full-page states. It owns structure only —
+ * the flex/overflow skeleton and region ordering. App state (routing,
+ * sessions) never enters it, and landmark semantics stay compositional:
+ * brand marks, links, and the `Main` landmark arrive as composed JSX.
+ *
+ * @see https://mantle.ngrok.com/layouts/centered-layout
+ *
+ * @example
+ * Composition:
+ * ```
+ * CenteredLayout.Root
+ * ├── CenteredLayout.Header
+ * ├── CenteredLayout.Body
+ * └── CenteredLayout.Footer
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CenteredLayout.Root>
+ *   <SkipToMainLink />
+ *   <CenteredLayout.Body>
+ *     <a href="https://ngrok.com">
+ *       <NgrokWordmarkIcon className="h-auto w-24" />
+ *     </a>
+ *     <Main>
+ *       <SignInCard />
+ *     </Main>
+ *   </CenteredLayout.Body>
+ *   <CenteredLayout.Footer>
+ *     <ThemeSwitcher />
+ *   </CenteredLayout.Footer>
+ * </CenteredLayout.Root>
+ * ```
+ */
+declare const CenteredLayout: {
+  /**
+   * The outer frame of a centered page flow. Fills its nearest sized ancestor
+   * (`min-h-full`) and stacks `Header` (pinned top), `Body` (which grows),
+   * and `Footer` (pinned bottom). Merge `h-full` via `className` when the
+   * host requires an exact height.
+   *
+   * @see https://mantle.ngrok.com/layouts/centered-layout
+   *
+   * @example
+   * ```tsx
+   * <CenteredLayout.Root>
+   *   <SkipToMainLink />
+   *   <CenteredLayout.Body>
+   *     <a href="https://ngrok.com">
+   *       <NgrokWordmarkIcon className="h-auto w-24" />
+   *     </a>
+   *     <Main>
+   *       <SignInCard />
+   *     </Main>
+   *   </CenteredLayout.Body>
+   *   <CenteredLayout.Footer>
+   *     <ThemeSwitcher />
+   *   </CenteredLayout.Footer>
+   * </CenteredLayout.Root>
+   * ```
+   */
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A utility strip at the top of the layout (account chip, close button)
+   * rendered as a semantic `<header>` (`banner` landmark) outside the
+   * centered `flex-1` region — the mirror of `Footer`. Merge
+   * `sticky top-0 z-10` via `className` to pin it to the window while the
+   * page scrolls. Optional — omitting it is fine.
+   *
+   * @see https://mantle.ngrok.com/layouts/centered-layout
+   *
+   * @example
+   * ```tsx
+   * <CenteredLayout.Root>
+   *   <CenteredLayout.Header className="sticky top-0 z-10 justify-between">
+   *     <AccountChip />
+   *     <IconButton type="button" label="Close" icon={<XIcon />} />
+   *   </CenteredLayout.Header>
+   *   <CenteredLayout.Body>
+   *     <div className="w-full max-w-5xl">
+   *       <PlanPicker />
+   *     </div>
+   *   </CenteredLayout.Body>
+   * </CenteredLayout.Root>
+   * ```
+   */
+  readonly Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  /**
+   * The growing, centered region of the layout. By convention the brand mark
+   * (a fully-styled logo/wordmark anchor) is its **first child** — spacing
+   * comes from `Body`'s `gap-6`, so no dedicated `Logo` part exists.
+   *
+   * @see https://mantle.ngrok.com/layouts/centered-layout
+   *
+   * @example
+   * ```tsx
+   * <CenteredLayout.Root>
+   *   <SkipToMainLink />
+   *   <CenteredLayout.Body>
+   *     <a href="https://ngrok.com">
+   *       <NgrokWordmarkIcon className="h-auto w-24" />
+   *     </a>
+   *     <Main>
+   *       <SignInCard />
+   *     </Main>
+   *   </CenteredLayout.Body>
+   *   <CenteredLayout.Footer>
+   *     <ThemeSwitcher />
+   *   </CenteredLayout.Footer>
+   * </CenteredLayout.Root>
+   * ```
+   */
+  readonly Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A pinned utility strip (theme switcher, legal links) rendered as a
+   * semantic `<footer>` (`contentinfo` landmark) outside the centered
+   * `flex-1` region. Optional — omitting it is fine.
+   *
+   * @see https://mantle.ngrok.com/layouts/centered-layout
+   *
+   * @example
+   * ```tsx
+   * <CenteredLayout.Root>
+   *   <SkipToMainLink />
+   *   <CenteredLayout.Body>
+   *     <a href="https://ngrok.com">
+   *       <NgrokWordmarkIcon className="h-auto w-24" />
+   *     </a>
+   *     <Main>
+   *       <SignInCard />
+   *     </Main>
+   *   </CenteredLayout.Body>
+   *   <CenteredLayout.Footer>
+   *     <ThemeSwitcher />
+   *   </CenteredLayout.Footer>
+   * </CenteredLayout.Root>
+   * ```
+   */
+  readonly Footer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+};
+//#endregion
+export { CenteredLayout };

package/dist/centered-layout.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./slot-DmPrjM7N.js";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=r(({asChild:r,children:a,className:o,"data-slot":s,...c},l)=>i(r?n:`div`,{ref:l,"data-slot":t(s,`centered-layout`),className:e(`flex min-h-full flex-col`,o),...c,children:a}));a.displayName=`CenteredLayout`;const o=r(({asChild:r,children:a,className:o,"data-slot":s,...c},l)=>i(r?n:`header`,{ref:l,"data-slot":t(s,`centered-layout-header`),className:e(`flex shrink-0 items-center px-4 py-4`,o),...c,children:a}));o.displayName=`CenteredLayoutHeader`;const s=r(({asChild:r,children:a,className:o,"data-slot":s,...c},l)=>i(r?n:`div`,{ref:l,"data-slot":t(s,`centered-layout-body`),className:e(`flex flex-1 flex-col items-center justify-center gap-6 py-4`,o),...c,children:a}));s.displayName=`CenteredLayoutBody`;const c=r(({asChild:r,children:a,className:o,"data-slot":s,...c},l)=>i(r?n:`footer`,{ref:l,"data-slot":t(s,`centered-layout-footer`),className:e(`flex shrink-0 items-center px-4 py-4`,o),...c,children:a}));c.displayName=`CenteredLayoutFooter`;const l={Root:a,Header:o,Body:s,Footer:c};export{l as CenteredLayout};

package/dist/checkbox-DJ2xl7Rc.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./clsx-DUGZgXfJ.js";import{a as n,r}from"./validation-Bpptk_9t.js";import{forwardRef as i,useEffect as a,useRef as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=i(({"aria-invalid":i,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=o(null),[b]=s(f),x=n(),{ariaInvalid:S,validation:C}=r({"aria-invalid":i,validation:g??x}),w=d??b;a(()=>{y.current&&(y.current.indeterminate=l(w))},[w]);let T=d==null?{defaultChecked:l(b)?void 0:b}:{checked:!l(d)&&d};return c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:t(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),...T,"data-validation":C||void 0,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;function d({allSelected:e,someSelected:t}){return e?!0:t?`indeterminate`:!1}export{d as n,u as t};