@ngrok/mantle 0.77.0 → 0.79.0

package/dist/button-DcXOWUYo.d.ts

@@ -0,0 +1,131 @@
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { r as VariantProps } from "./index-D47aqlpz.js";
+import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/button/button.d.ts
+/**
+ * The visual style of a `Button`: how much visual weight the button carries,
+ * independent of its tone (`intent`).
+ *
+ * - `"filled"` — solid fill; the heaviest weight on the page
+ * - `"outlined"` — bordered on the form background
+ * - `"ghost"` — no border or fill until hovered
+ * - `"link"` — renders like an inline link (inherits surrounding typography)
+ *   while remaining a button that performs an action
+ */
+type ButtonAppearance = "filled" | "ghost" | "link" | "outlined";
+declare const buttonVariants: (props?: ({
+  appearance?: "filled" | "ghost" | "link" | "outlined" | null | undefined;
+  isLoading?: boolean | null | undefined;
+  intent?: "accent" | "danger" | "neutral" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+/**
+ * The props for the `Button` component.
+ */
+type ButtonProps = ComponentProps<"button"> & Omit<ButtonVariants, "appearance" | "intent"> & WithAsChild & {
+  /**
+   * The visual style of the Button. Required — there is no default, so
+   * every call site states the weight it means.
+   *
+   * @enum
+   * - `"filled"`: solid fill; the heaviest visual weight
+   * - `"outlined"`: bordered on the form background
+   * - `"ghost"`: no border or fill until hovered
+   * - `"link"`: renders like an inline link (inherits surrounding typography) while remaining a button
+   */
+  appearance: ButtonAppearance;
+  /**
+   * The tone of the Button — the purpose its color communicates to the
+   * user. Required — there is no default, so every call site states the
+   * tone it means.
+   *
+   * @enum
+   * - `"neutral"`: the workhorse tone — routine and secondary actions, and the default primary action (`appearance="filled" intent="neutral"`)
+   * - `"accent"`: deliberate brand emphasis; reach for it when an action should carry the brand color, not as the routine primary
+   * - `"danger"`: a destructive or irreversible action
+   */
+  intent: ButtonIntent;
+  /**
+   * 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;
+  /**
+   * The side that the icon will render on, if one is present. If `state="pending"`,
+   * then the loading icon will also render on this side.
+   * @default "start"
+   */
+  iconPlacement?: "start" | "end";
+  /**
+   * The behavior of the button when activated. Defaults to `"button"`, so the
+   * button does not accidentally submit a surrounding `<form>` — pass
+   * `type="submit"` to submit a form, or `type="reset"` to reset it.
+   *
+   * When `asChild` is used, `type` has no effect and is not forwarded to the
+   * child, so a wrapped anchor never inherits a `button` `type`. See:
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+   *
+   * @default "button"
+   * @enum
+   * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+   * - `"reset"`: The button resets all the controls to their initial values.
+   * - `"submit"`: The button submits the form data to the server.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  type?: ComponentProps<"button">["type"];
+};
+/**
+ * Renders a button or a component that looks like a button, an interactive
+ * element activated by a user with a mouse, keyboard, finger, voice command, or
+ * other assistive technology. Once activated, it then performs an action, such
+ * as submitting a form or opening a dialog.
+ *
+ * `appearance` (visual weight) and `intent` (tone) are required — every call
+ * site states what it means; there are no implicit defaults.
+ *
+ * The primary action button should be `appearance="filled" intent="neutral"` —
+ * the system's default primary action. Reserve `intent="accent"` for
+ * deliberate brand emphasis.
+ *
+ * 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
+ * The default primary action — filled + neutral:
+ * ```tsx
+ * <Button appearance="filled" intent="neutral" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * Submit a form — opt in with `type="submit"` (the default `"button"` does not submit):
+ * ```tsx
+ * <Button type="submit" appearance="filled" intent="neutral">
+ *   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 appearance="outlined" intent="neutral" icon={<CopyIcon />} onClick={copyPage} />
+ * <IconButton appearance="outlined" intent="neutral" icon={<CopyIcon />} label="Copy page" onClick={copyPage} />
+ * ```
+ */
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ButtonAppearance as n, ButtonProps as r, Button as t };

package/dist/button.d.ts

@@ -1,4 +1,6 @@
-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 { t as ButtonIntent } from "./intents-DdSKSj1c.js";
+import { n as ButtonAppearance, r as ButtonProps, t as Button } from "./button-DcXOWUYo.js";
+import { n as IconButtonAppearance, r as IconButtonProps, t as IconButton } from "./icon-button-B7uEj1qq.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-BivvYYs-.js";
+import { t as ButtonSize } from "./sizes-BCoI4bhP.js";
+export { Button, type ButtonAppearance, ButtonGroup, type ButtonGroupProps, type ButtonIntent, type ButtonProps, type ButtonSize, IconButton, type IconButtonAppearance, 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-DV2-GZHf.js";import{t}from"./button-ClC60Nzg.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}from"./icon-button-DV2-GZHf.js";import{jsx as r}from"react/jsx-runtime";import{CaretRightIcon as i}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as a}from"@phosphor-icons/react/CaretLeft";import{DayPicker as o}from"react-day-picker";const s=n({appearance:`ghost`,intent:`neutral`,size:`sm`});function c({className:n,classNames:c,showOutsideDays:l=!1,...u}){return r(o,{"data-slot":`calendar`,animate:!1,components:{Chevron:e=>r(t,{svg:e.orientation===`left`?r(a,{}):r(i,{}),className:`size-4`})},classNames:{root:e(`isolate`,n),button_next:e(s,`absolute right-0`),button_previous:e(s,`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`,u.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`,...c},showOutsideDays:l,...u})}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 appearance="ghost" intent="neutral" 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};

package/dist/checkbox.d.ts

@@ -1,16 +1,15 @@
-import { o as WithValidation } from "./validation-xyX_6kph.js";
-
+import { o as WithValidation } from "./validation-7QeiTFwl.js";
 //#region src/components/checkbox/checkbox.d.ts
 type CheckedState = boolean | "indeterminate";
 /**
  * A form control that allows the user to toggle between checked and not checked.
  * Supports indeterminate state.
  *
- * Pair it with a [`Label`](/components/label) for a single-line caption, or
- * compose it inside [`Choice`](/components/choice) for a titled, multi-line
+ * Pair it with a [`Label`](/components/forms/label) for a single-line caption, or
+ * compose it inside [`Choice`](/components/forms/choice) for a titled, multi-line
  * label with a supplementary description.
  *
- * @see https://mantle.ngrok.com/components/checkbox
+ * @see https://mantle.ngrok.com/components/forms/checkbox
  *
  * @example
  * ```tsx
@@ -22,7 +21,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "checked" | "type"> & WithValidation & {
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "checked" | "defaultChecked" | "type"> & WithValidation & {
   /**
    * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
    */
@@ -54,11 +53,10 @@ declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<impo
  * />
  * ```
  */
-declare function selectAllChecked({
-  allSelected,
-  someSelected
-}: {
-  /** Whether every selectable item is currently selected. */allSelected: boolean; /** Whether some (but not necessarily all) items are selected. */
+declare function selectAllChecked({ allSelected, someSelected }: {
+  /** Whether every selectable item is currently selected. */
+  allSelected: boolean;
+  /** Whether some (but not necessarily all) items are selected. */
   someSelected: boolean;
 }): CheckedState;
 //#endregion

package/dist/checkbox.js

@@ -1 +1 @@
-import{n as e,t}from"./checkbox-Apow0ipK.js";export{t as Checkbox,e as selectAllChecked};
+import{n as e,t}from"./checkbox-DJ2xl7Rc.js";export{t as Checkbox,e as selectAllChecked};

package/dist/{choice-D6S38dPs.js → choice-DOdyNzFC.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{t as n}from"./field-context-4k1kI7Bo.js";import{t as r}from"./label-BLXfnQmn.js";import{cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useId as l,useMemo as u}from"react";import d from"tiny-invariant";import{jsx as f}from"react/jsx-runtime";const p=a(null);function m(e){let t=c(p);return d(t,`Choice.${e} must be rendered inside Choice.Root.`),t}const h=o(({"aria-describedby":t,"aria-errormessage":r,"aria-invalid":i,children:a,className:o,disabled:s=!1,id:d,name:m,...h},g)=>{let _=c(n),v=_?.id,y=_?.name,b=_?.[`aria-describedby`],x=_?.[`aria-invalid`],S=_?.[`aria-errormessage`],C=l(),w=l(),T=v??d??C,E=[b??t,w].filter(Boolean).join(` `)||void 0,D=u(()=>({controlId:T,descriptionId:w,disabled:s,controlProps:{id:T,name:y??m,disabled:s,"aria-describedby":E,"aria-invalid":x??i,"aria-errormessage":S??r}}),[T,w,s,E,y,m,x,i,S,r]);return f(p.Provider,{value:D,children:f(`div`,{ref:g,"data-slot":`choice`,className:e(`flex w-full items-start gap-2`,o),...h,children:a})})});h.displayName=`Choice`;const g=o(({children:t,className:n,...r},a)=>{let{controlProps:o}=m(`Indicator`),c=s(t)?i(t,{...o,disabled:o.disabled||t.props.disabled===!0,name:o.name??t.props.name,"aria-invalid":o[`aria-invalid`]??t.props[`aria-invalid`],"aria-errormessage":o[`aria-errormessage`]??t.props[`aria-errormessage`]}):t;return f(`span`,{ref:a,"data-slot":`choice-indicator`,className:e(`flex h-lh shrink-0 items-center text-sm`,n),...r,children:c})});g.displayName=`ChoiceIndicator`;const _=o(({asChild:n,className:r,...i},a)=>f(n?t:`div`,{ref:a,"data-slot":`choice-content`,className:e(`flex min-w-0 flex-1 flex-col gap-0.5`,r),...i}));_.displayName=`ChoiceContent`;const v=o(({className:t,...n},i)=>{let{controlId:a,disabled:o}=m(`Label`);return f(r,{ref:i,"data-slot":`choice-label`,className:e(o&&`opacity-50`,t),...n,htmlFor:a,disabled:o})});v.displayName=`ChoiceLabel`;const y=o(({asChild:n,className:r,...i},a)=>{let{disabled:o}=m(`Title`);return f(n?t:`p`,{ref:a,"data-slot":`choice-title`,className:e(`text-strong text-sm font-medium font-sans`,o&&`opacity-50`,r),...i})});y.displayName=`ChoiceTitle`;const b=o(({asChild:n,className:r,...i},a)=>{let{descriptionId:o,disabled:s}=m(`Description`);return f(n?t:`p`,{ref:a,id:o,"data-slot":`choice-description`,className:e(`text-body text-sm leading-4`,s&&`opacity-50`,r),...i})});b.displayName=`ChoiceDescription`;const x={Root:h,Indicator:g,Content:_,Label:v,Title:y,Description:b};export{x as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{t as n}from"./field-context-BR01g789.js";import{t as r}from"./label-BMlHW_2D.js";import{cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useId as l,useMemo as u}from"react";import d from"tiny-invariant";import{jsx as f}from"react/jsx-runtime";const p=a(null);function m(e){let t=c(p);return d(t,`Choice.${e} must be rendered inside Choice.Root.`),t}const h=o(({"aria-describedby":t,"aria-errormessage":r,"aria-invalid":i,children:a,className:o,disabled:s=!1,id:d,name:m,...h},g)=>{let _=c(n),v=_?.id,y=_?.name,b=_?.[`aria-describedby`],x=_?.[`aria-invalid`],S=_?.[`aria-errormessage`],C=l(),w=l(),T=v??d??C,E=[b??t,w].filter(Boolean).join(` `)||void 0,D=u(()=>({controlId:T,descriptionId:w,disabled:s,controlProps:{id:T,name:y??m,disabled:s,"aria-describedby":E,"aria-invalid":x??i,"aria-errormessage":S??r}}),[T,w,s,E,y,m,x,i,S,r]);return f(p.Provider,{value:D,children:f(`div`,{ref:g,"data-slot":`choice`,className:e(`flex w-full items-start gap-2`,o),...h,children:a})})});h.displayName=`Choice`;const g=o(({children:t,className:n,...r},a)=>{let{controlProps:o}=m(`Indicator`),c=s(t)?i(t,{...o,disabled:o.disabled||t.props.disabled===!0,name:o.name??t.props.name,"aria-invalid":o[`aria-invalid`]??t.props[`aria-invalid`],"aria-errormessage":o[`aria-errormessage`]??t.props[`aria-errormessage`]}):t;return f(`span`,{ref:a,"data-slot":`choice-indicator`,className:e(`flex h-lh shrink-0 items-center text-sm`,n),...r,children:c})});g.displayName=`ChoiceIndicator`;const _=o(({asChild:n,className:r,...i},a)=>f(n?t:`div`,{ref:a,"data-slot":`choice-content`,className:e(`flex min-w-0 flex-1 flex-col gap-0.5`,r),...i}));_.displayName=`ChoiceContent`;const v=o(({className:t,...n},i)=>{let{controlId:a,disabled:o}=m(`Label`);return f(r,{ref:i,"data-slot":`choice-label`,className:e(o&&`opacity-50`,t),...n,htmlFor:a,disabled:o})});v.displayName=`ChoiceLabel`;const y=o(({asChild:n,className:r,...i},a)=>{let{disabled:o}=m(`Title`);return f(n?t:`p`,{ref:a,"data-slot":`choice-title`,className:e(`text-strong text-sm font-medium font-sans`,o&&`opacity-50`,r),...i})});y.displayName=`ChoiceTitle`;const b=o(({asChild:n,className:r,...i},a)=>{let{descriptionId:o,disabled:s}=m(`Description`);return f(n?t:`p`,{ref:a,id:o,"data-slot":`choice-description`,className:e(`text-body text-sm leading-4`,s&&`opacity-50`,r),...i})});b.displayName=`ChoiceDescription`;const x={Root:h,Indicator:g,Content:_,Label:v,Title:y,Description:b};export{x as t};

package/dist/choice.d.ts

@@ -1,14 +1,13 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { t as Label } from "./label-PY0qM0G5.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as Label } from "./label-v2-bv98k.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/choice/choice.d.ts
 /**
  * Props for `Choice.Root`. Extends `<div>` props (minus `id`, narrowed below)
  * with the disabled / id / name controls. Inside a `Field.Control`, the field's
  * `id` / `name` / `aria-*` take precedence over these.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -24,14 +23,17 @@ import { ComponentProps, ReactNode } from "react";
  * ```
  */
 type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
-  /** Marks the choice disabled — dims the text and is injected onto the control. */disabled?: boolean;
+  /** Marks the choice disabled — dims the text and is injected onto the control. */
+  disabled?: boolean;
   /**
    * Explicit control id. Defaults to a generated id, or — when composed inside a
    * `Field.Control` — the field's id, so `Field.Label` and `Choice.Label` resolve
    * to the same control.
    */
-  id?: string; /** Form value name for the control. Inherited from `Field` when composed within one. */
-  name?: string; /** `Choice.Indicator`, a `Choice.Content` (with `Label` / `Title` + `Description`). */
+  id?: string;
+  /** Form value name for the control. Inherited from `Field` when composed within one. */
+  name?: string;
+  /** `Choice.Indicator`, a `Choice.Content` (with `Label` / `Title` + `Description`). */
   children: ReactNode;
 };
 /**
@@ -44,7 +46,7 @@ type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
  * Outside a `Field` it falls back to its own generated ids, so the two compose
  * but neither requires the other.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -71,7 +73,7 @@ declare const Root: import("react").ForwardRefExoticComponent<Omit<ChoiceRootPro
  * title, and centers its child — so the control sits centered on the title's
  * first line and stays put when the title wraps.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -93,7 +95,7 @@ type ChoiceContentProps = ComponentProps<"div"> & WithAsChild;
  * an optional `Choice.Description`. `min-w-0` so long titles truncate instead of
  * pushing the row wide.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -129,7 +131,7 @@ type ChoiceLabelProps = Omit<ComponentProps<typeof Label>, "htmlFor" | "disabled
  * row or a Headless radio item), use `Choice.Title` instead — a label-less `<p>`
  * (it accepts `asChild`) — so labels never nest or compete.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -154,7 +156,7 @@ declare const ChoiceLabel: import("react").ForwardRefExoticComponent<Omit<Choice
  * control — or inside a `Field` — where the title can be the label, use
  * `Choice.Label`.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -175,7 +177,7 @@ declare const Title: import("react").ForwardRefExoticComponent<Omit<import("reac
  * and wired to the control via `aria-describedby` (never a second label).
  * Renders a `<p>`; pass `asChild` to supply your own element.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * ```tsx
@@ -214,7 +216,7 @@ declare const Description: import("react").ForwardRefExoticComponent<Omit<import
  * `aria-describedby`. Outside a `Field` it uses its own generated ids — the two
  * are aware of each other but neither is required.
  *
- * @see https://mantle.ngrok.com/components/choice
+ * @see https://mantle.ngrok.com/components/forms/choice
  *
  * @example
  * Composition:

package/dist/choice.js

@@ -1 +1 @@
-import{t as e}from"./choice-D6S38dPs.js";export{e as Choice};
+import{t as e}from"./choice-DOdyNzFC.js";export{e as Choice};

package/dist/code-block.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 { A as FoldStrategy, B as computeJsonFoldRanges, C as Indentation, D as FoldExplanation, E as ComputeFoldRangesInput, F as isSupportedLanguage, H as finalizeFoldRanges, I as parseLanguage, L as supportedLanguages, M as computeFoldRanges, N as foldStrategyFor, O as FoldLine, P as SupportedLanguage, S as normalizeIndentation, T as isIndentation, U as LineRange, V as FoldableRange, _ as MantleCodeBlockValue, a as Mode, c as ResolvedPreRenderedCodeBlockProps, d as parseMetastring, f as resolvePreRenderedCodeBlockProps, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, i as MetaInput, j as FoldToken, k as FoldScope, l as defaultMeta, m as parseCodeBlockHighlightLines, n as DefaultMeta, o as ResolvePreRenderedCodeBlockPropsInput, p as tokenizeMetastring, r as Meta, s as ResolvePreRenderedCodeBlockPropsResult, t as CodeBlockPreElementInput, u as normalizeValue, v as MantleCodeOptions, w as inferIndentation, x as mantleCode, y as createMantleCodeBlockValue, z as decorateHighlightedHtml } from "./resolve-pre-rendered-props-DxJ9-DAl.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { A as FoldStrategy, B as computeJsonFoldRanges, C as Indentation, D as FoldExplanation, E as ComputeFoldRangesInput, F as isSupportedLanguage, H as finalizeFoldRanges, I as parseLanguage, L as supportedLanguages, M as computeFoldRanges, N as foldStrategyFor, O as FoldLine, P as SupportedLanguage, S as normalizeIndentation, T as isIndentation, U as LineRange, V as FoldableRange, _ as MantleCodeBlockValue, a as Mode, c as ResolvedPreRenderedCodeBlockProps, d as parseMetastring, f as resolvePreRenderedCodeBlockProps, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, i as MetaInput, j as FoldToken, k as FoldScope, l as defaultMeta, m as parseCodeBlockHighlightLines, n as DefaultMeta, o as ResolvePreRenderedCodeBlockPropsInput, p as tokenizeMetastring, r as Meta, s as ResolvePreRenderedCodeBlockPropsResult, t as CodeBlockPreElementInput, u as normalizeValue, v as MantleCodeOptions, w as inferIndentation, x as mantleCode, y as createMantleCodeBlockValue, z as decorateHighlightedHtml } from "./resolve-pre-rendered-props-B6OlZrSI.js";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { Content, List, Trigger } from "@radix-ui/react-tabs";
-
 //#region src/components/code-block/code-block.d.ts
 type CodeBlockRootProps = Omit<ComponentProps<"div">, "align"> & WithAsChild & {
   /**
@@ -73,15 +72,7 @@ type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
  * </CodeBlock.Root>
  * ```
  */
-declare function CodeBlockIconComponent({
-  className,
-  preset,
-  svg: _svgProp,
-  ...props
-}: CodeBlockIconProps): import("react").JSX.Element;
-declare namespace CodeBlockIconComponent {
-  var displayName: string;
-}
+declare function CodeBlockIconComponent({ className, preset, svg: _svgProp, ...props }: CodeBlockIconProps): import("react").JSX.Element;
 type CodeBlockTabListProps = Omit<ComponentProps<typeof List>, "asChild" | "loop">;
 type CodeBlockTabTriggerProps = Omit<ComponentProps<typeof Trigger>, "asChild">;
 type CodeBlockTabContentProps = Omit<ComponentProps<typeof Content>, "asChild" | "forceMount">;
@@ -486,10 +477,7 @@ type JsonCodeBlockValueOptions = {
  * </CodeBlock.Root>
  * ```
  */
-declare function jsonCodeBlockValue(value: unknown, {
-  showLineNumbers,
-  foldable
-}?: JsonCodeBlockValueOptions): MantleCodeBlockValue;
+declare function jsonCodeBlockValue(value: unknown, { showLineNumbers, foldable }?: JsonCodeBlockValueOptions): MantleCodeBlockValue;
 //#endregion
 //#region src/components/code-block/escape-html.d.ts
 /**